{"id":1108,"date":"2026-05-26T12:36:11","date_gmt":"2026-05-26T09:36:11","guid":{"rendered":"https:\/\/xpeng.rayaauto.com\/?page_id=1108"},"modified":"2026-05-26T12:36:11","modified_gmt":"2026-05-26T09:36:11","slug":"new-g9","status":"publish","type":"page","link":"https:\/\/xpeng.com\/eg\/new-g9","title":{"rendered":"New-G9"},"content":{"rendered":"\n<?php\n    get_header();\n    ?>\n<html lang=\"no\" class=\"isWindows\" style=\"--vh: 6.F07px;\">\n\n<head>\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/antd\/4.16.13\/antd.min.css\">\n    <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/swiper\/swiper-bundle.min.css\">\n    <link rel=\"stylesheet\" href=\"https:\/\/xpeng.rayaauto.net\/wp-content\/themes\/xpeng\/css\/body.css\">\n\n    <link rel=\"stylesheet\" href=\"https:\/\/a-cdn.xpeng.com\/www\/public\/client\/static\/css\/g6.abf7c871.chunk.css\">\n    <link rel=\"stylesheet\" href=\"https:\/\/a-cdn.xpeng.com\/www\/public\/client\/static\/css\/Page.523681e4.chunk.css\">\n    <link rel=\"stylesheet\" href=\"https:\/\/a-cdn.xpeng.com\/www\/public\/client\/static\/css\/6530734185895460.03f4e482.chunk.css\">\n    <link rel=\"stylesheet\" href=\"https:\/\/a-cdn.xpeng.com\/www\/public\/client\/static\/css\/2215705831633098.6b01aed6.chunk.css\">\n    <link rel=\"stylesheet\" href=\"https:\/\/a-cdn.xpeng.com\/www\/public\/client\/static\/css\/528004587020170.0db13d39.chunk.css\">\n    <style>\n  html,\n  body {\n    width: 100%;\n    max-width: 100%;\n    overflow-x: hidden !important;\n    scroll-behavior: auto !important;\n  }\n\n  body {\n    margin: 0;\n    padding: 0;\n    overscroll-behavior-x: none;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  img,\n  video,\n  picture {\n    max-width: 100%;\n  }\n\n  \/* Prevent horizontal carousel overflow from moving the full page *\/\n  .xp-design-carousel,\n  .xp-robot-carousel,\n  .xp-access-carousel,\n  .xp-ride-carousel,\n  .xp-g9-rear-lounge-carousel,\n  .xp-safety-grid-section,\n  .xp-g9-color-section {\n    max-width: 100%;\n    overflow-x: hidden !important;\n  }\n\n  \/* Keep horizontal scrolling only inside the intended carousel track *\/\n  .xp-design-track,\n  .xp-robot-track,\n  .xp-safety-grid,\n  .xp-g9-color-options {\n    overscroll-behavior-x: contain;\n    overscroll-behavior-y: auto;\n  }\n\n  \/* On mobile, allow normal vertical page scroll *\/\n  @media (max-width: 768px) {\n    .xp-design-track,\n    .xp-robot-track,\n    .xp-safety-grid,\n    .xp-g9-color-options {\n      touch-action: pan-y pan-x;\n    }\n  }\n<\/style>\n\n    \n    <script src=\"https:\/\/www.google.com\/recaptcha\/api.js?render=6LeKypgqAAAAAElmzWT44ssVn3FoJEy1y3bQHDGJ\"><\/script> \n    <script>\n document.addEventListener('DOMContentLoaded', function() {\n    const favicon = document.createElement('link');\n    favicon.rel = 'icon';\n    favicon.href = 'https:\/\/xpeng.httpraya-backend.com\/wp-content\/uploads\/2024\/05\/cropped-xpeng1.png';\n    favicon.type = 'image\/x-icon';\n    document.head.appendChild(favicon);\n});\n        function onSubmit(token) {document.getElementById(\"Home-form\");}\n    <\/script>\n    <script>\n                                            grecaptcha.ready(function () {\n                                                grecaptcha.execute('6LeKypgqAAAAAElmzWT44ssVn3FoJEy1y3bQHDGJ', { action: 'submit' }).then(function (token) {\n                                                    document.getElementById('g-recaptcha-response').value = token;\n                                                });\n                                            });\n\n                                            function onSubmit(token) {\n                                                if (validateForm(firstName, lastName, email, phone, area, subject, agreement, terms)) {\n                                                    document.getElementById(\"Home-form\").submit();\n\n\n                                                } else {\n                                                    alert(\"Error in data\")\n\n                                                }\n                                            }\n                                            \/\/ Function to set the error message for a specific field\n                                            function setError(fieldId, message) {\n                                                var errorSpan = document.getElementById(fieldId + \"Error\");\n                                                var field = document.getElementById(fieldId);\n                                                errorSpan.style.fontFamily = \"basis_grotesque_regular\";\n                                                if (errorSpan) {\n                                                    errorSpan.textContent = message;\n\n                                                }\n                                                if (field) {\n                                                    field.focus();\n                                                }\n                                            }\n\n                                            \/\/ Function to clear the error message for a specific field\n                                            function clearError(fieldId) {\n                                                var errorSpan = document.getElementById(fieldId + \"Error\");\n                                                if (errorSpan) {\n                                                    errorSpan.textContent = \"\";\n                                                }\n                                            }\n\n                                            \/\/ Function to validate email format\n                                            function isValidEmail(email) {\n                                                const emailPattern = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n                                                return emailPattern.test(email);\n                                            }\n\n                                            function validateEgyptianPhoneNumber(phoneNumber) {\n                                                \/\/ Remove any non-numeric characters (optional, based on your needs)\n                                                phoneNumber = phoneNumber.replace(\/\\D\/g, '');\n\n                                                \/\/ Regular expression for Egyptian phone numbers\n                                                const egyptianPhoneRegex = \/^(010|011|012|015)\\d{8}$\/;\n\n                                                \/\/ Validate the phone number\n                                                if (egyptianPhoneRegex.test(phoneNumber)) {\n                                                    return true;  \/\/ Valid phone number\n                                                } else {\n                                                    return false; \/\/ Invalid phone number\n                                                }\n                                            }\n\n                                            \/\/ Function to validate the form fields\n                                            function validateForm(firstName, lastName, email, phone, area, subject, agreement, terms) {\n\n\n                                                let isValid = true;\n\n                                                if (!firstName) {\n                                                    setError(\"firstName\", \"First name is required.\");\n                                                    isValid = false;\n                                                }\n\n                                                if (!lastName) {\n                                                    setError(\"lastName\", \"Last name is required.\");\n                                                    isValid = false;\n                                                }\n\n                                                if (!email || !isValidEmail(email)) {\n                                                    setError(\"email\", \"A valid email is required.\");\n                                                    isValid = false;\n                                                }\n\n                                                if (!phone || !validateEgyptianPhoneNumber(phone)) {\n                                                    setError(\"phone\", \"Phone number is required.\");\n                                                    isValid = false;\n                                                }\n                                                if (!area) {\n                                                    setError(\"area\", \"Area is required.\");\n                                                    isValid = false;\n                                                }\n                                                if (subject === \"Subject*\") {\n                                                    setError(\"subject\", \"Subject is required.\");\n                                                    isValid = false;\n                                                }\n                                                if (!agreement) {\n                                                    setError(\"agreement\", \"Please read and accept the Privacy Policy by checking the box.\");\n                                                    isValid = false;\n                                                }\n\n                                                return isValid;\n                                            }\n\n                                            document.getElementById(\"firstName\").addEventListener(\"input\", function () {\n                                                const firstNameInput = document.getElementById(\"firstName\");\n\n                                                if (firstNameInput.value.trim() === \"\") {\n                                                    setError(\"firstName\", \"First name is required.\");\n                                                } else {\n                                                    clearError(\"firstName\");\n                                                }\n\n                                            });\n\n                                            document.getElementById(\"lastName\").addEventListener(\"input\", function () {\n                                                const firstNameInput = document.getElementById(\"lastName\");\n\n                                                if (firstNameInput.value.trim() === \"\") {\n                                                    setError(\"lastName\", \"last name is required.\");\n                                                } else {\n                                                    clearError(\"lastName\");\n                                                }\n\n                                            });\n\n                                            document.getElementById(\"email\").addEventListener(\"input\", function () {\n                                                const emailInput = document.getElementById(\"email\");\n\n                                                if (emailInput.value.trim() === \"\" || !isValidEmail(emailInput.value)) {\n                                                    setError(\"email\", \"A valid email is required.\");\n                                                } else {\n                                                    clearError(\"email\");\n                                                }\n\n\n                                            });\n\n                                            document.getElementById(\"phone\").addEventListener(\"input\", function () {\n                                                const phoneInput = this.value.trim();\n\n                                                if (validateEgyptianPhoneNumber(phoneInput)) {\n                                                    clearError(\"phone\");\n                                                } else {\n\n                                                    setError(\"phone\", \"Invalid Egyptian phone number.\");\n\n                                                }\n                                            });\n                                            document.getElementById(\"area\").addEventListener(\"input\", function () {\n                                                const areaInput = this.value.trim();\n\n                                                if (areaInput === \"\") {\n                                                    setError(\"area\", \"Area is required.\");\n                                                } else {\n                                                    clearError(\"area\");\n                                                }\n                                            });\n                                            document.getElementById(\"policy\").addEventListener(\"change\", function () {\n                                                var agreement = this.value;\n                                                var message = \"\";\n                                                var checkbox = document.getElementById('policy');\n                                                checkbox.value = checkbox.checked ? '1' : '0';\n\n\n\n                                                if (checkbox.value === '0') {\n\n                                                    setError(\"agreement\", \"Please read and accept the Privacy Policy by checking the box.\");\n                                                }\n\n                                                else {\n                                                    clearError(\"agreement\");\n\n                                                }\n\n                                            });\n\n\n                                            document.getElementById(\"subscription\").addEventListener(\"change\", function () {\n                                                var terms = this.value;\n                                                var message = \"\";\n                                                var checkbox = document.getElementById('subscription');\n                                                checkbox.value = checkbox.checked ? '1' : '0';\n\n\n\n                                                if (checkbox.value === '0') {\n\n                                                    setError(\"terms\", \"Please read and accept the Privacy Policy by checking the box.\");\n                                                }\n\n                                                else {\n                                                    clearError(\"terms\");\n\n                                                }\n\n                                            });\n\n\n\n                                            document.getElementById('contactBTN').addEventListener('click', function () {\n                                                event.preventDefault(); \/\/ Prevent form submission and page reload\n\n                                                \/\/ Get trimmed values of the input fields\n                                                var firstName = document.getElementById(\"firstName\").value.trim();\n                                                var lastName = document.getElementById(\"lastName\").value.trim();\n                                                var email = document.getElementById(\"email\").value.trim();\n                                                var phone = document.getElementById(\"phone\").value.trim();\n                                                const uf_crm_1621684061063 = document.getElementById('area').value;\n                                                let comments = document.getElementById(\"selected\").innerHTML; \/\/ Use correct element's value\n\n                                                \/\/ Assuming these are the checkboxes\n                                                let policy = document.getElementById(\"policy\");\n                                                let subscription = document.getElementById(\"subscription\");\n\n\n\n                                                \/\/ Validate the fields\n                                                if (validateForm(firstName, lastName, email, phone, uf_crm_1621684061063, comments, policy.checked, subscription.checked)) {\n\n                                                    document.getElementById(\"Home-form\").submit();\n                                                    submitButton.disabled = true;\n                                                }\n                                            });\n\n\n                                            \/\/ Get the modal\n                                            var modal = document.getElementById(\"myModal\");\n\n                                            \/\/ Get the <span> element that closes the modal\n                                            var span = document.getElementsByClassName(\"close\")[0];\n\n                                            \/\/ When the user clicks on <span> (x), close the modal\n                                            span.onclick = function () {\n                                                modal.style.display = \"none\";\n                                            }\n\n                                            \/\/ When the user clicks anywhere outside of the modal, close it\n                                            window.onclick = function (event) {\n                                                if (event.target == modal) {\n                                                    modal.style.display = \"none\";\n                                                }\n                                            }\n\n\n\n    <\/script>\n\n    \n\n\n    <style>\n        .p3-p8{\n            margin-top: 0% !important; \n            padding-top: 0% !important;\n\n        }\n\n        .jQrT49eR{height: 100%;}\n        .index-module__configurationTitle--eqOn0I-Q{\n            font-family: \"basis_grotesque_regular\" !important;\n\n\n        }\n        .index-module__configurationHint--TW0o3f6X{\n            font-family: \"basis_grotesque_regular\" !important;\n            \n        }\n        .index-module__unit--d1PWKIIl{\n            font-family: \"basis_grotesque_regular\" !important;\n        }\n        @media only screen and (max-width: 768px) {\n            .lazy.Az-q8kti {\n                padding-bottom: 20px !important;\n                \/* Adjust the padding as needed *\/\n            }\n        }\n\n        .n1keNi07 .KL9djTe7 {\n            white-space: normal !important;\n        }\n\n        .uUw8GSOd {\n            height: 100% !important;\n        }\n\n        @media (min-width: 1920px) {\n            .uUw8GSOd {\n\n                padding-top: 0px !important;\n            }\n        }\n\n        .fonted {\n            font-family: 'basis_grotesque_regular' !important;\n        }\n\n        .OVXJVetp {\n            padding-top: 0px !important;\n        }\n\n        .colored-label {\n            color: #FFFFFF99 !important;\n            font-family: 'basis_grotesque_regular';\n        }\n\n        .colored-label-white {\n            color: white !important;\n            font-family: 'basis_grotesque_regular';\n\n        }\n\n        .custom-tabcontent {\n            height: 70px;\n            margin-top: 2%;\n        }\n\n        .responsive-height {\n            height: inherit;\n            \/* Default height for mobile view *\/\n        }\n\n        @media (min-width: 768px) {\n            .responsive-height {\n                height: max-content;\n            }\n\n        }\n\n        .swiper-container {\n            width: 100vw;\n            \/* Full width of the viewport *\/\n            height: 100vh;\n            \/* Full height of the viewport *\/\n            overflow: hidden;\n            \/* Ensure no overflow *\/\n        }\n\n        @media (max-width: 768px) {\n            .swiper-container {\n                width: 100%;\n                height: 100%;\n            }\n        }\n\n        @media (max-width: 480px) {\n            .-MsteyXi {\n                height: 100% !important;\n                padding-bottom: 5%;\n            }\n\n            .swiper-container {\n                width: 100%;\n                height: 100%;\n            }\n        }\n\n        .swiper-slide {\n            position: relative;\n            text-align: left;\n            font-size: 18px;\n            background: #ffffff;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            overflow: hidden;\n        }\n\n        .swiper-slide img {\n            width: 100%;\n            height: 50% !important;\n            object-fit: cover;\n        }\n\n        .slide-content {\n            position: absolute;\n            top: 30%;\n            left: 10%;\n            transform: translateY(-50%);\n            color: white;\n            text-align: left;\n        }\n\n        .slide-title {\n            font-size: 48px;\n            font-weight: bold;\n            margin-bottom: 20px;\n        }\n\n        .slide-button {\n            padding: 10px 20px;\n            font-size: 16px;\n            color: white;\n            background-color: transparent;\n            border: 2px solid white;\n            border-radius: 30px;\n            text-decoration: none;\n            margin-top: 10px;\n            transition: background-color 0.3s, color 0.3s;\n            margin-right: 10px;\n        }\n\n        .slide-button:hover {\n            background-color: white;\n            color: black;\n        }\n\n        \/* Styling for next and previous buttons *\/\n        .swiper-button-next,\n        .swiper-button-prev {\n            background-color: gray;\n\n            color: black;\n            display: none;\n        }\n\n        \/* Styling for pagination points *\/\n        .swiper-pagination-bullet {\n            background-color: #A4CE4C;\n            width: 30px;\n            \/* Adjust the width *\/\n            height: 2px;\n            \/* Adjust the height *\/\n            border-radius: 0;\n\n        }\n\n        .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {\n            left: 50%;\n\n        }\n\n        \/* .title-wrapper-subTitle-custom {\n            height: 45%;\n            margin-bottom: 60%;\n        } *\/\n\n        ._8rM3tlc7 {\n            text-align: start;\n            font-family: 'basis_grotesque_regular' !important;\n        }\n\n        .n8ZStGh2 {\n            font-family: 'basis_grotesque_regular' !important;\n\n        }\n\n        ._3UgFVRV4D {\n            font-size: 35px;\n            font-family: 'basis_grotesque_regular';\n            font-weight: bold;\n            text-align: center;\n            color: white;\n            padding-top: 62px;\n\n\n\n        }\n\n        .KL9djTe7 {\n            font-family: \"basis_grotesque_regular\" !important;\n\n        }\n\n        ._3UgFVRV4 {\n            font-family: 'basis_grotesque_regular' !important;\n            padding-top: 5%;\n            padding-bottom: 5%;\n        }\n\n        .KL9djTe7 {\n            padding-top: 5%;\n            padding-bottom: 5%;\n        }\n\n\n        ._3UgFVRV4D_black {\n          font-family: 'basis_grotesque_regular' !important;\n            font-size: 35px;\n            font-weight: bold;\n            text-align: center;\n\n        }\n\n        ._custom-p {\n            text-align: center;\n            font-family: 'basis_grotesque_regular';\n        }\n\n        @media (max-width: 550px) {\n\n            .p2_custom-bg {\n                    height: 100% !important;\n                    text-align: left !important;\n                    background-image: url('https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2024-03-31\/06ce611b260d4e37a8ea41eb0c44f81b.jpg') !important;\n\n                }\n\n                .p3_custom-bg {\n                    height: 100% !important;\n                    text-align: left !important;\n                    background-image: url('https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2024-08-29\/d0018a71c4624e68b996fcffcd68a667.jpg') !important;\n\n                }\n\n                .p4_custom-bg {\n                    height: 100% !important;\n                    text-align: left !important;\n                    background-image: url('https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2024-03-28\/0fe48ed8189642aca56b311711b86fa0.jpg') !important;\n\n                }\n                .p5_custom-bg {\n                    height: 100% !important;\n                    text-align: left !important;\n                    background-image: url('https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2024-09-14\/fe437359b0ed459fb3c0e8230151d061.jpg') !important;\n\n                }.p6_custom-bg {\n                    height: 90% !important;\n                    text-align: left !important;\n                    background-image: url('https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2024-09-14\/1282694482604b659cdb786676ad9a63.jpg') !important;\n\n                }\n\n            ._3UgFVRV4D_black{\n              font-family: 'basis_grotesque_regular' !important;\n                margin-left: 10px !important ;\n            }\n            .x-appN{\n                    display: block !important;\n                    height: 8px !important;\n                    margin-left: -15px ! important;\n                    margin-bottom: -72px !important;\n                    \n                }\n            .x-app{\n                    height: 20px;\n                    margin-left: -55px ! important;\n                    margin-bottom: -23px !important;\n                    display: flex;\n                    align-items: flex-start;\n\n                }\n            .Qjaj3DQU{\n                            height: 125% !important;\n                            background-color: #101013;\n                        }\n            ._8rM3tlc7 {\n                text-align: left !important;\n            }\n\n            ._73la0dYd {\n                text-align: left;\n            }\n\n            ._custom-p {\n                text-align: start;\n                padding: 2%;\n                font-family: 'basis_grotesque_regular';\n            }\n\n            .inline-container {\n                flex-direction: column;\n                \/* Stack items vertically *\/\n                align-items: flex-start;\n            }\n\n            .inline-container img {\n                margin-bottom: 10px;\n                \/* Space between image and text *\/\n                margin-right: 0;\n                \/* Remove right margin *\/\n            }\n\n\n\n            ._3UgFVRV4D {\n                font-size: 1.5rem;\n                font-family: 'basis_grotesque_regular' !important;\n                font-weight: bold;\n                font-style: italic;\n                color: white;\n                padding-top: 65px;\n                text-align: start;\n            }\n\n\n            ._3UgFVRV4D_black {\n                font-size: 2.7rem;\n                font-weight: bold;\n                color: black;\n                padding-top: 65px;\n                text-align: start;\n            }\n            ._3UgFVRV4D_black_App {\n                font-size: 2.7rem;\n                font-weight: bold;\n                color: black;\n                padding-top: 65px;\n                text-align: start;\n            }\n\n\n        }\n\n        .black_sub_title {\n            font-size: small;\n            font-family: 'basis_grotesque_regular';\n            color: #0A0A1A;\n            opacity: 0.5;\n        }\n    <\/style>\n    <style data-rc-order=\"prepend\" rc-util-key=\"@anta-design-icons\">\n        .anticon {\n            display: inline-block;\n            color: inherit;\n            font-style: normal;\n            line-height: 0;\n            text-align: center;\n            text-transform: none;\n            vertical-align: -0.125em;\n            text-rendering: optimizeLegibility;\n            -webkit-font-smoothing: antialiased;\n            -moz-osx-font-smoothing: grayscale;\n        }\n\n        .anticon>* {\n            line-height: 1;\n        }\n\n        .anticon svg {\n            display: inline-block;\n        }\n\n        .anticon::before {\n            display: none;\n        }\n\n        .anticon .anticon-icon {\n            display: block;\n        }\n\n        .anticon[tabindex] {\n            cursor: pointer;\n        }\n\n        .anticon-spin::before,\n        .anticon-spin {\n            display: inline-block;\n            -webkit-animation: loadingCircle 1s infinite linear;\n            animation: loadingCircle 1s infinite linear;\n        }\n\n        @-webkit-keyframes loadingCircle {\n            100% {\n                -webkit-transform: rotate(360deg);\n                transform: rotate(360deg);\n            }\n        }\n\n        @keyframes loadingCircle {\n            100% {\n                -webkit-transform: rotate(360deg);\n                transform: rotate(360deg);\n            }\n        }\n    <\/style>\n    <script async=\"\" src=\"\/\/acdn.adnxs.com\/dmp\/up\/pixie.js\"><\/script>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n    <meta id=\"viewport\" name=\"viewport\"\n        content=\"width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=false\">\n    <title>XPENG New G9 | XPENG EGY<\/title>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@200..1000&#038;display=swap\" rel=\"stylesheet\">\n    <meta name=\"keywords\" content=\"\">\n    <link rel=\"shortcut icon\" href=\"https:\/\/a-cdn.xpeng.com\/www\/public\/favicon.ico\" type=\"image\/x-icon\">\n    <link rel=\"shortcut icon\"\n        href=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAApVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABU\/knhAAAANnRSTlMACPr27fK8CrgSDdHcwLQtFuSShBqxJyLLVejXxqF4YEo6NTGqimwe4KWYfXFEP51kWVBMD2cr5oz2AAAEBElEQVR42u3a6ZKiMBAA4A7XcokgIjooOt73MUe\/\/6OtulubwYAJAvsr30+tMilCdzodQZIkSZIkSZIkSZIkAPLrjhAC\/wkhf8eEm4tn3JimGW0\/bGjcarnxroMZN5sZgG0gpXqfv6BR\/tLBH3YAkCr4gz4\/EGiMNe5nRguOAGCfMEMbvUMz7EFLwZ\/0M9x0Pcx667Shfr8+PRUzlB380evjg\/WiB\/Uix7mOD7Y2\/HVc4yN3t4IaTU8aPvJ8+GegIcPZd6Em7c4bMvqZh7xXkaH0zxbUoBeukeVmX3WyUJCltC42VLTauZhDG0CWNcc8qlktM\/l7J\/93l\/AobiFVU2ayzve8w1IWBBizBCkmM1XJO6yNBTkmAVKVMxPNOyyjIMTHOhYJwl7VvEM5MyiwU7CQm64q5R0qOEARe4tPOEu\/fN5h6WMo5kf4hDIcfwFXTPNOHjWFAuy+xFKND05a6O4TfGrL+YF3F5\/SowMRD3xW5AMH3Zd4aYEf+KxhD7iWNHxLpQUyYQKfswNRzL7Esw5jZu02OvK8fYAIa4N8SbZamG015NKXIGZlIE+2WugtAuRTQgKC2g4KUFoD+x55qYsiRl8g7BCgCDVqAwwcFGJ2gYPdl\/hGELsoxGlDKamKIgwy01DE+lB2O1+odU4gGJQvKCbpYrvxWv3EDTRdVZVyE1BUXdcC1xka0agT7qfwql9WN+613w8fl\/N+d51RZAwdlz6cFpnSCWiJMzTnp06YLseDyXHajlf+F4GakS+\/e8qdgDL2LZtAw4h9fSSj\/AmcuzXOgK7A6scKjCLzugJBwRLo66Tfqm0N7EF4fwcd5h1kXkL+W5i+lx+\/o9QZhm9jKIeESr2JKJhAKd86CjnBKkEhyRRK+HxDEfqmB\/A5VFBEKwZh0wQFqN6E0M4b39wCQfEQOWjvgPYA+DoEhPhzkXro2wJKrCZS92K5p4NcSdoFSrgq1C6VKwFaE7OO\/Lp4fQSusSZ+Kih\/MnDaVapBfrvEvrSUapVh2yl1MmRZ332lQm28MrhnY65umrx8OrA2TyNvTCOvQodAX752KnT2foXeLOeEyD8Xu7sYSnkfadwzsnhnIHihe08Okc7pEoj2RrTt7LVy7sNUuX0SfndI3xzhVV+Xoq16azPB4xUcPycEKvC\/ndwpKDvIsk\/5gT+wgYufFvjdQrJTctuCFlRB0wK3SDzrLzRGK6aFZAb\/TNjv3bTxS6tWXFwCrsPmr+1okRi3Grm45FcLyoLk3RZppyk0wx4Yak6RGD5cER0bvbzOZiZtcv1syJT6TfKXmcwUAsAlMk3DNE3PizqfNjSu+z2KPNO8Dzq6h+Lt\/xTkBv4XcnUfFCRJkiRJkiRJkiRJAvgNagfeySxnR1cAAAAASUVORK5CYII=\"\n        type=\"image\/png\">\n    <link rel=\"apple-touch-icon\" href=\"https:\/\/a-cdn.xpeng.com\/www\/public\/favicon\/logo.png\">\n    <meta name=\"description\" content=\"XPENG G9 | XPENG EGY | Electric vehicle in egypt\">\n    <link rel=\"stylesheet\"\n        href=\"https:\/\/a-cdn.xpeng.com\/www\/public\/client\/static\/css\/8564070279031375.c2e5bcec.chunk.css\">\n    <!-- <link rel=\"stylesheet\"\n        href=\"https:\/\/a-cdn.xpeng.com\/www\/public\/client\/static\/css\/7527945419924455.aa1cd8fb.chunk.css\"> -->\n    <link rel=\"stylesheet\" href=\"https:\/\/xpeng.rayaauto.net\/wp-content\/themes\/xpeng\/css\/custom1.css\">\n\n    <link rel=\"stylesheet\"\n        href=\"https:\/\/a-cdn.xpeng.com\/www\/public\/client\/static\/css\/6479822391318970.35b0915d.chunk.css\">\n    <!-- <link rel=\"stylesheet\" href=\"https:\/\/a-cdn.xpeng.com\/www\/public\/client\/static\/css\/Page.10146c2c.chunk.css\"> -->\n    <link rel=\"stylesheet\" href=\"https:\/\/a-cdn.xpeng.com\/www\/public\/client\/static\/css\/dk-p7.3f137f4d.chunk.css\">\n    <script type=\"text\/javascript\" async=\"\"\n        src=\"https:\/\/cdn.mouseflow.com\/projects\/25647b44-e12c-4715-9d4e-5e5b7d5af481.js\"><\/script>\n\n    <script type=\"text\/javascript\">function OptanonWrapper() { }<\/script>\n    <!-- <script src=\"https:\/\/cdn-apac.onetrust.com\/scripttemplates\/202401.2.0\/otBannerSdk.js\" async=\"\"\n            type=\"text\/javascript\"><\/script> -->\n    <script charset=\"utf-8\"\n        src=\"https:\/\/a-cdn.xpeng.com\/www\/public\/client\/static\/js\/7527945419924455.e107b566.chunk.js\"><\/script>\n    <script charset=\"utf-8\"\n        src=\"https:\/\/a-cdn.xpeng.com\/www\/public\/client\/static\/js\/8564070279031375.36bb1489.chunk.js\"><\/script>\n    <script charset=\"utf-8\"\n        src=\"https:\/\/a-cdn.xpeng.com\/www\/public\/client\/static\/js\/6479822391318970.0869b77a.chunk.js\"><\/script>\n    <script charset=\"utf-8\" src=\"https:\/\/a-cdn.xpeng.com\/www\/public\/client\/static\/js\/dk-p7.e31ade89.chunk.js\"><\/script>\n\n\n<\/head>\n\n<body>\n\n    <div id=\"hi-content\">\n        <style>\n            .custom-bg {\n                background-size: cover;\n                background-position: center;\n                background-repeat: no-repeat;\n            }\n\n            .p2_custom-bg {\n                height: 120%;\n                background-position: center;\n                background-repeat: no-repeat;\n\n\n            }\n            .uUw8GSOd .model-center-text .title{\n                margin-top: -40px;\n            }\n            \n\n            .p3_custom-bg {\n                background-size: cover;\n                background-position: center;\n                background-repeat: no-repeat;\n\n\n            }\n\n            .p4_custom-bg {\n                background-size: cover;\n                background-position: center;\n                background-repeat: no-repeat;\n\n\n            }\n            .p5_custom-bg {\n                background-size: cover;\n                background-position: center;\n                background-repeat: no-repeat;\n\n\n            }.p6_custom-bg {\n                height: 100%;\n                background-size: cover;\n                background-position: center;\n                background-repeat: no-repeat;\n\n\n            }\n            .header_paragraph_white{\n                \n                line-height: normal !important;\n                font-weight: 300; \n                color: white; \n                font-size: 2.5rem; \n                letter-spacing:0.01rem !important; \n                font-family: 'basis_grotesque_regular';\n            }\n            ._3UgFVRV4{\n                padding-top: 0px !important;\n                padding-bottom: 0px !important;\n            }\n            .header_paragraph{\n                padding-top: 0px !important;\n                padding-bottom: 0px !important;\n                font-weight: 300; \n                font-size: 2.5rem; \n                letter-spacing:0.01rem !important; \n                font-family: 'basis_grotesque_regular';\n            }\n\n\n            @media (max-width: 950px) {\n                ._3UgFVRV4D_black_App{\n                  font-family: 'basis_grotesque_regular' !important;\n                    margin-left: 10px !important ;\n                }\n                .Qjaj3DQU{\n                            height: 100%;\n                            background-color: #101013;\n                        }\n                .x-appN{\n                    height: 20px;\n                    margin-left: -55px;\n                    margin-bottom: -23px;\n                    display: flex;\n                    align-items: flex-start;\n\n                }\n                .xFmdDrOyD{\n                    align-items: start;\n                    height: 50% !important;\n                    width: 50% !important;\n                    display: flex !important;\n                    \n                }\n                .bt1o6Cub{\n                    height: 50%;\n                    width: 50%;\n                    align-items: start;\n                }\n                .x-img{\n                    margin-bottom: 20% !important;\n                }\n                \n                .CxkT\\+OvM .text-display-sub-title-container{\n\n                    text-align: left;\n                    display: flex;\n                    flex-direction: column;\n                    align-items: baseline;\n\n                }\n                .custom-bg {\n                    background-image: url('https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-10\/9ce88581a18d496482c471ea7066758e.png') !important;\n                }\n                .Expect_the_unthinkable{\n                    \n                    text-align: left !important;\n                }\n\n                .p2_custom-bg {\n                    height: 200%;\n                    text-align: left !important;\n                    background-image: url('https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2024-03-31\/06ce611b260d4e37a8ea41eb0c44f81b.jpg') !important;\n\n                }\n\n                .p3_custom-bg {\n                    height: 150%;\n                    text-align: left !important;\n                    background-image: url('https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2024-08-29\/d0018a71c4624e68b996fcffcd68a667.jpg') !important;\n\n                }\n\n                .p4_custom-bg {\n                    height: 200%;\n                    text-align: left !important;\n                    background-image: url('https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2024-03-28\/0fe48ed8189642aca56b311711b86fa0.jpg') !important;\n\n                }\n                .p5_custom-bg {\n                    height: 200%;\n                    text-align: left !important;\n                    background-image: url('https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2024-09-14\/fe437359b0ed459fb3c0e8230151d061.jpg') !important;\n\n                }.p6_custom-bg {\n                    height: 200%;\n                    text-align: left !important;\n                    background-image: url('https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2024-09-14\/1282694482604b659cdb786676ad9a63.jpg') !important;\n\n                }\n                .p7_custom-bg {\n                    background-image: url('https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2024-03-31\/692ff218654245c09425c14baf1228f6.jpg') !important;\n\n                }\n\n\n            }\n        <\/style>\n\n\n\n        <div class=\"mvHvP+3m\">\n            <div class=\"custom-bg lazy global-full-page UIYosJiv entered loaded \" data-ll-status=\"loaded\"\n                style=\"background-image: url(&quot;https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-11\/f721ced05f2b4bd58a02f65c19981fd2.jpg&quot;);  width: 100%; height:100%;\">\n                <div class=\"index-module__body--l7HPp7sF\">\n                    <div class=\"index-module__textDisplay--eZFVaNVR text-display\" style=\"margin-top: -55px !important;\">\n                        <div class=\"index-module__title--ncC47PRj text-display-title\"\n                            style=\"color: rgb(255, 255, 255); translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);\">\n                            <div class=\"index-module__closeIcon--ToFHl71Q close-icon\" style=\"color: rgb(255, 255, 255); opacity: 1;\">\n                                <svg class=\"icon undefined\" aria-hidden=\"true\">\n                                    <use xlink:href=\"#icon-x-new\"><\/use>\n                                <\/svg><\/div>\n                                <div style=\"display: flex; align-items: center; justify-content: center; color: white; font-family: 'basis_grotesque_regular', sans-serif; width: 100%;\">\n                                    <img decoding=\"async\" class=\"x-img\"\n                                      style=\"height: 20px !important; width: 30px !important; margin-right: 7px; margin-bottom: 10%; align-items: baseline;\" \n                                      src=\"data:image\/svg+xml,%3Csvg width='44' height='31' viewBox='0 0 44 31' fill='none' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 31L16.8 15.5L0 0H4.2L21 15.5L4.2 31H0Z' fill='white'\/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M44 31L27.2 15.5L44 0H39.8L23 15.5L39.8 31H44Z' fill='white'\/%3E%3C\/svg%3E%0A\" \n                                      alt=\"Icon\">\n                                  \n                                    <font style=\"font-size: 3.5rem; font-family: 'basis_grotesque_regular'; letter-spacing: normal;\">\n                                       New XPENG G9\n                                    <\/font>\n                                <\/div>\n                                                      \n                                <\/div>\n                        <div class=\"text-display-sub-title-container\">\n                            <div class=\"index-module__subTitle--73la0dYd text-display-sub-title\"\n                                style=\"font-family:'basis_grotesque_regular' ; letter-spacing: normal; color: rgb(255, 255, 255); translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1;\"\n                                _msttexthash=\"3164499\" _msthash=\"12\">Always more premium<\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"index-module__configuration--YH1vhur3 car-configuration\">\n                        <div class=\"index-module__configurationItemContainer--RQP5hIBv\">\n                            <div class=\"index-module__configurationItem--Hp+FhjTk car-configuration-item\"\n                                style=\"opacity: 1; transform: none;\">\n                                <div class=\"index-module__configurationTitle--eqOn0I-Q\">\n                                    <font _mstmutation=\"1\" _msttexthash=\"71656\" _msthash=\"13\"><span class=\"index-module__unit--d1PWKIIl\"\n                                            _mstmutation=\"1\" _istranslated=\"1\">Up to <\/span><span _mstmutation=\"1\"\n                                            _istranslated=\"1\">585<\/span><\/font><span class=\"index-module__unit--d1PWKIIl\">\n                                        <font _mstmutation=\"1\" _msttexthash=\"60138\" _msthash=\"14\">KM<\/font><sup _msttexthash=\"4459\"\n                                            _msthash=\"15\">1<\/sup>\n                                    <\/span>\n                                <\/div>\n                                <div class=\"index-module__configurationHint--TW0o3f6X config-hint\" _msttexthash=\"119938\" _msthash=\"16\">\n                                    WLTP Range<\/div>\n                            <\/div>\n                            <div class=\"index-module__divider--qgndpXHC\" style=\"opacity: 1; transform: none;\"><\/div>\n                        <\/div>\n                        <div class=\"index-module__configurationItemContainer--RQP5hIBv\">\n                            <div class=\"index-module__configurationItem--Hp+FhjTk car-configuration-item\"\n                                style=\"opacity: 1; transform: none;\">\n                                <div class=\"index-module__configurationTitle--eqOn0I-Q\"><span _msttexthash=\"15132\"\n                                        _msthash=\"17\">4.2<\/span><span class=\"index-module__unit--d1PWKIIl\">\n                                        <font _mstmutation=\"1\" _msttexthash=\"10465\" _msthash=\"18\">s<\/font><sup _msttexthash=\"4459\"\n                                            _msthash=\"19\">1<\/sup>\n                                    <\/span> <\/div>\n                                <div class=\"index-module__configurationHint--TW0o3f6X config-hint\" _msttexthash=\"162331\" _msthash=\"20\">\n                                    0-100 km\/h (AWD)<\/div>\n                            <\/div>\n                            <div class=\"index-module__divider--qgndpXHC\" style=\"opacity: 1; transform: none;\"><\/div>\n                        <\/div>\n                        <div class=\"index-module__configurationItemContainer--RQP5hIBv\">\n                            <div class=\"index-module__configurationItem--Hp+FhjTk car-configuration-item\"\n                                style=\"opacity: 1; transform: none;\"><span class=\"index-module__configurationTitle--eqOn0I-Q\"\n                                    _msttexthash=\"273936\" _msthash=\"21\">Ultra-fast charging<\/span><span\n                                    class=\"index-module__unit--d1PWKIIl\"><\/span>\n                                <div class=\"index-module__configurationHint--TW0o3f6X config-hint\" _msttexthash=\"719433\" _msthash=\"22\">\n                                    from 10 to 80% in 12 minutes \u00b9<\/div>\n                            <\/div>\n                            <div class=\"index-module__divider--qgndpXHC\" style=\"opacity: 1; transform: none;\"><\/div>\n                        <\/div>\n                        <div class=\"index-module__configurationItemContainer--RQP5hIBv\">\n                            <div class=\"index-module__configurationItem--Hp+FhjTk car-configuration-item\"\n                                style=\"opacity: 1; transform: none;\"><span class=\"index-module__configurationTitle--eqOn0I-Q\"\n                                    _msttexthash=\"469131\" _msthash=\"23\">Great factory warranty<\/span><span\n                                    class=\"index-module__unit--d1PWKIIl\"><\/span>\n                                <div class=\"index-module__configurationHint--TW0o3f6X config-hint\" _msttexthash=\"274625\" _msthash=\"24\">7\n                                    years \/ 160,000 km\u00b9<\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n\n        <section class=\"xp-design-carousel-section\">\n  <div class=\"xp-design-carousel\" id=\"xpDesignCarousel\">\n\n    <div class=\"xp-design-track\">\n\n      <article class=\"xp-design-slide\">\n        <div class=\"xp-design-header\">\n          <h2>Design<\/h2>\n          <p>Elegant fastback silhouette with integrated full-width LED strip and expressive &#8220;Robot Face&#8221; grille.<\/p>\n        <\/div>\n\n        <div class=\"xp-design-image\">\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/818e3930df7a4dcc8b0ce4f843b4c28f.png\"\n            alt=\"Elegant fastback silhouette\"\n          >\n        <\/div>\n      <\/article>\n\n      <article class=\"xp-design-slide\">\n        <div class=\"xp-design-header\">\n          <h2>Comfort<\/h2>\n          <p>Premium Nappa leather cabin with fully reclining rear seats and two 2.4K floating screens.<\/p>\n        <\/div>\n\n        <div class=\"xp-design-image\">\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/78025e23b2054a8782509ae9147b4e59.jpeg\"\n            alt=\"Spacious and comfortable lounge area\"\n          >\n        <\/div>\n      <\/article>\n\n      <article class=\"xp-design-slide\">\n        <div class=\"xp-design-header\">\n          <h2>XPILOT ASSIST\u00b3 Intelligent Driving Technology<\/h2>\n          <p>4D perception and scalable assistance functions via OTA.m<\/p>\n        <\/div>\n\n        <div class=\"xp-design-image\">\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/3b6319c2fc364cd8acc212ba490592c8.png\"\n            alt=\"XPILOT ASSIST intelligent driving system\"\n          >\n        <\/div>\n      <\/article>\n\n      <article class=\"xp-design-slide\">\n        <div class=\"xp-design-header\">\n          <h2>Driving Dynamics<\/h2>\n          <p>Dual-chamber air suspension and 33.9m braking distance for precise and stable control.<\/p>\n        <\/div>\n\n        <div class=\"xp-design-image\">\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/fadbae5a2039417d82934b41a25682a1.png\"\n            alt=\"XOS COCKPIT with full environmental awareness\"\n          >\n        <\/div>\n      <\/article>\n\n      <article class=\"xp-design-slide\">\n        <div class=\"xp-design-header\">\n          <h2>Ultra-fast charging 5C battery<\/h2>\n          <p>800V SiC platform \u2014 goes from 10% to 80% charge in just 12 minutes.\u00b9<\/p>\n        <\/div>\n\n        <div class=\"xp-design-image\">\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/9f96bca63b44405db0c9b616db2f7921.png\"\n            alt=\"Next-generation 800V platform\"\n          >\n        <\/div>\n      <\/article>\n\n    <\/div>\n\n    <button class=\"xp-design-arrow xp-design-prev\" type=\"button\" aria-label=\"Previous slide\">\n      <svg width=\"11\" height=\"20\" viewBox=\"0 0 11 20\" fill=\"none\">\n        <path d=\"M10.617 0.482966C10.8882 0.754138 10.8882 1.19379 10.617 1.46497L1.80242 10.2796L10.617 19.0942C10.8882 19.3654 10.8882 19.805 10.617 20.0762C10.3459 20.3474 9.90621 20.3474 9.63504 20.0762L0.56586 11.007C0.1641 10.6053 0.1641 9.9539 0.56586 9.55214L9.63504 0.482966C9.90621 0.211794 10.3459 0.211794 10.617 0.482966Z\" fill=\"currentColor\"\/>\n      <\/svg>\n    <\/button>\n\n    <button class=\"xp-design-arrow xp-design-next\" type=\"button\" aria-label=\"Next slide\">\n      <svg width=\"11\" height=\"20\" viewBox=\"0 0 11 20\" fill=\"none\">\n        <path d=\"M0.38296 20.0762C0.111788 19.805 0.111788 19.3654 0.38296 19.0942L9.19758 10.2796L0.38296 1.46497C0.111788 1.19379 0.111788 0.754138 0.38296 0.482966C0.654131 0.211794 1.09379 0.211794 1.36496 0.482966L10.4341 9.55214C10.8359 9.9539 10.8359 10.6053 10.4341 11.007L1.36496 20.0762C1.09379 20.3474 0.654131 20.3474 0.38296 20.0762Z\" fill=\"currentColor\"\/>\n      <\/svg>\n    <\/button>\n\n    <div class=\"xp-design-dots\">\n      <button class=\"active\" type=\"button\" aria-label=\"Slide 1\"><\/button>\n      <button type=\"button\" aria-label=\"Slide 2\"><\/button>\n      <button type=\"button\" aria-label=\"Slide 3\"><\/button>\n      <button type=\"button\" aria-label=\"Slide 4\"><\/button>\n      <button type=\"button\" aria-label=\"Slide 5\"><\/button>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n \n\n  .xp-design-carousel-section {\n    width: 100%;\n    background: #ffffff;\n    padding: 70px 0 76px;\n    overflow: hidden;\n     font-family: basis_grotesque_regular;\n  }\n\n  .xp-design-carousel {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .xp-design-track {\n    display: flex;\n    gap: 90px;\n    padding: 0 calc((100vw - min(72vw, 1330px)) \/ 2);\n    overflow-x: auto;\n    overflow-y: hidden;\n    scroll-behavior: smooth;\n    scroll-snap-type: x mandatory;\n    scrollbar-width: none;\n    cursor: grab;\n    user-select: none;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  .xp-design-track::-webkit-scrollbar {\n    display: none;\n  }\n\n  .xp-design-track.is-dragging {\n    cursor: grabbing;\n    scroll-behavior: auto;\n    scroll-snap-type: none;\n  }\n\n  .xp-design-slide {\n    flex: 0 0 min(72vw, 1330px);\n    scroll-snap-align: center;\n  }\n\n  .xp-design-header {\n    min-height: 130px;\n    text-align: center;\n    color: #000000;\n  }\n\n  .xp-design-header h2 {\n    margin: 0 0 14px;\n    font-size: 36px;\n    line-height: 1.22;\n    font-weight: 400;\n    color: #000000;\n  }\n\n  .xp-design-header p {\n    margin: 0 auto;\n    max-width: 850px;\n    font-size: 15px;\n    line-height: 1.5;\n    color: #000000;\n    letter-spacing: 0.02em;\n  }\n\n  .xp-design-image {\n    width: 100%;\n    height: 625px;\n    border-radius: 2px;\n    overflow: hidden;\n    background: #f2f2f2;\n  }\n\n  .xp-design-image img {\n    width: 100%;\n    height: 100%;\n    display: block;\n    object-fit: cover;\n    object-position: center;\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .xp-design-arrow {\n    position: absolute;\n    top: calc(130px + 312px);\n    z-index: 10;\n    width: 58px;\n    height: 58px;\n    border: 0;\n    background: transparent;\n    color: #9b9b9b;\n    display: grid;\n    place-items: center;\n    cursor: pointer;\n    transform: translateY(-50%);\n    transition: color 0.25s ease, opacity 0.25s ease;\n  }\n\n  .xp-design-arrow:hover {\n    color: #111111;\n  }\n\n  .xp-design-arrow:disabled {\n    opacity: 0.25;\n    cursor: default;\n  }\n\n  .xp-design-prev {\n    left: calc(50% - min(72vw, 1330px) \/ 2 - 78px);\n  }\n\n  .xp-design-next {\n    right: calc(50% - min(72vw, 1330px) \/ 2 - 78px);\n  }\n\n  .xp-design-dots {\n    display: none;\n  }\n\n  @media (max-width: 1200px) {\n    .xp-design-track {\n      gap: 50px;\n      padding: 0 12vw;\n    }\n\n    .xp-design-slide {\n      flex-basis: 76vw;\n    }\n\n    .xp-design-image {\n      height: 520px;\n    }\n\n    .xp-design-arrow {\n      top: calc(130px + 260px);\n    }\n\n    .xp-design-prev {\n      left: 6vw;\n    }\n\n    .xp-design-next {\n      right: 6vw;\n    }\n  }\n\n  @media (max-width: 768px) {\n    .xp-design-carousel-section {\n      padding: 9px 0 58px;\n      background: #ffffff;\n    }\n\n    .xp-design-track {\n      gap: 18px;\n      padding: 0 38px;\n      scroll-padding-left: 38px;\n      cursor: default;\n    }\n\n    .xp-design-slide {\n      flex: 0 0 calc(100vw - 76px);\n      display: flex;\n      flex-direction: column;\n      scroll-snap-align: start;\n      background: #ffffff;\n    }\n\n    .xp-design-header {\n      order: 2;\n      min-height: auto;\n      text-align: left;\n      padding: 32px 0 0;\n    }\n\n    .xp-design-header h2 {\n      margin: 0 0 26px;\n      font-size: 32px;\n      line-height: 1.55;\n      font-weight: 400;\n      color: #000000;\n    }\n\n    .xp-design-header p {\n      margin: 0;\n      max-width: 100%;\n      color: #707070;\n      font-size: 20px;\n      line-height: 1.5;\n    }\n\n    .xp-design-image {\n      order: 1;\n      width: 100%;\n      height: 345px;\n      border-radius: 2px;\n      overflow: hidden;\n    }\n\n    .xp-design-image img {\n      object-fit: cover;\n      object-position: center;\n    }\n\n    .xp-design-arrow {\n      display: none;\n    }\n\n    .xp-design-dots {\n      display: flex;\n      gap: 9px;\n      padding: 52px 38px 0;\n      align-items: center;\n    }\n\n    .xp-design-dots button {\n      width: 28px;\n      height: 2px;\n      border: 0;\n      padding: 0;\n      background: #e5e5e5;\n      cursor: pointer;\n    }\n\n    .xp-design-dots button.active {\n      background: #8cc63f;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-design-track {\n      padding: 0 38px;\n      gap: 18px;\n      scroll-padding-left: 38px;\n    }\n\n    .xp-design-slide {\n      flex-basis: calc(100vw - 76px);\n    }\n\n    .xp-design-image {\n      height: 345px;\n    }\n\n    .xp-design-header {\n      padding-top: 32px;\n    }\n\n    .xp-design-header h2 {\n      font-size: 32px;\n      line-height: 1.55;\n      margin-bottom: 26px;\n    }\n\n    .xp-design-header p {\n      font-size: 20px;\n      line-height: 1.5;\n    }\n\n    .xp-design-dots {\n      padding-left: 38px;\n      padding-top: 52px;\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    const carousel = document.getElementById(\"xpDesignCarousel\");\n    if (!carousel) return;\n\n    const track = carousel.querySelector(\".xp-design-track\");\n    const slides = Array.from(carousel.querySelectorAll(\".xp-design-slide\"));\n    const prevBtn = carousel.querySelector(\".xp-design-prev\");\n    const nextBtn = carousel.querySelector(\".xp-design-next\");\n    const dots = Array.from(carousel.querySelectorAll(\".xp-design-dots button\"));\n\n    let currentIndex = 0;\n    let isDown = false;\n    let startX = 0;\n    let startScrollLeft = 0;\n    let hasMoved = false;\n\n    function getAlign() {\n      return window.innerWidth <= 768 ? \"start\" : \"center\";\n    }\n\n    function updateUI() {\n      prevBtn.disabled = currentIndex === 0;\n      nextBtn.disabled = currentIndex === slides.length - 1;\n\n      dots.forEach(function (dot, index) {\n        dot.classList.toggle(\"active\", index === currentIndex);\n      });\n    }\n\n    function goToSlide(index) {\n      if (index < 0) index = 0;\n      if (index > slides.length - 1) index = slides.length - 1;\n\n      currentIndex = index;\n\n      slides[currentIndex].scrollIntoView({\n        behavior: \"smooth\",\n        inline: getAlign(),\n        block: \"nearest\"\n      });\n\n      updateUI();\n    }\n\n    function updateCurrentIndex() {\n      const trackCenter = track.scrollLeft + track.offsetWidth \/ 2;\n\n      let closestIndex = 0;\n      let closestDistance = Infinity;\n\n      slides.forEach(function (slide, index) {\n        const slideCenter = slide.offsetLeft + slide.offsetWidth \/ 2;\n        const distance = Math.abs(trackCenter - slideCenter);\n\n        if (distance < closestDistance) {\n          closestDistance = distance;\n          closestIndex = index;\n        }\n      });\n\n      currentIndex = closestIndex;\n      updateUI();\n    }\n\n    function snapToClosestSlide() {\n      updateCurrentIndex();\n\n      slides[currentIndex].scrollIntoView({\n        behavior: \"smooth\",\n        inline: getAlign(),\n        block: \"nearest\"\n      });\n    }\n\n    prevBtn.addEventListener(\"click\", function () {\n      goToSlide(currentIndex - 1);\n    });\n\n    nextBtn.addEventListener(\"click\", function () {\n      goToSlide(currentIndex + 1);\n    });\n\n    dots.forEach(function (dot, index) {\n      dot.addEventListener(\"click\", function () {\n        goToSlide(index);\n      });\n    });\n\n    track.addEventListener(\"pointerdown\", function (e) {\n      isDown = true;\n      hasMoved = false;\n      startX = e.clientX;\n      startScrollLeft = track.scrollLeft;\n      track.classList.add(\"is-dragging\");\n\n      if (track.setPointerCapture) {\n        track.setPointerCapture(e.pointerId);\n      }\n    });\n\n    track.addEventListener(\"pointermove\", function (e) {\n      if (!isDown) return;\n\n      const moveX = e.clientX - startX;\n\n      if (Math.abs(moveX) > 5) {\n        hasMoved = true;\n      }\n\n      track.scrollLeft = startScrollLeft - moveX * 1.15;\n    });\n\n    track.addEventListener(\"pointerup\", function (e) {\n      if (!isDown) return;\n\n      isDown = false;\n      track.classList.remove(\"is-dragging\");\n\n      try {\n        track.releasePointerCapture(e.pointerId);\n      } catch (error) {}\n\n      setTimeout(snapToClosestSlide, 90);\n    });\n\n    track.addEventListener(\"pointercancel\", function () {\n      isDown = false;\n      track.classList.remove(\"is-dragging\");\n      setTimeout(snapToClosestSlide, 90);\n    });\n\n    track.addEventListener(\"scroll\", function () {\n      clearTimeout(track.scrollTimer);\n      track.scrollTimer = setTimeout(updateCurrentIndex, 80);\n    });\n\n    slides.forEach(function (slide) {\n      slide.addEventListener(\"click\", function (e) {\n        if (hasMoved) {\n          e.preventDefault();\n          e.stopPropagation();\n        }\n      });\n    });\n\n    window.addEventListener(\"resize\", function () {\n      goToSlide(currentIndex);\n    });\n\n    updateUI();\n  })();\n<\/script>\n\n\n\n\n\n\n<section class=\"xp-video-banner\">\n  <div class=\"xp-video-wrap\" id=\"xpVideoBanner\">\n    <video\n      class=\"xp-video\"\n      muted\n      loop\n      playsinline\n      autoplay\n      preload=\"metadata\"\n      poster=\"\"\n    >\n      <source\n        src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/0eef353d63834125bbd847b3c41cd254.mp4\"\n        type=\"video\/mp4\"\n      >\n    <\/video>\n\n    <button class=\"xp-video-play\" type=\"button\" aria-label=\"Play video\">\n      <span><\/span>\n    <\/button>\n  <\/div>\n<\/section>\n\n<style>\n \n\n  .xp-video-banner {\n    width: 100%;\n    background: #000;\n    overflow: hidden;\n    font-family: basis_grotesque_regular;\n  }\n\n  .xp-video-wrap {\n    position: relative;\n    width: 100%;\n    height: 100vh;\n    min-height: 720px;\n    overflow: hidden;\n    background: #000;\n    cursor: pointer;\n  }\n\n  .xp-video {\n    width: 100%;\n    height: 100%;\n    display: block;\n    object-fit: cover;\n    object-position: center;\n  }\n\n  .xp-video-wrap::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background: rgba(0, 0, 0, 0.16);\n    pointer-events: none;\n    transition: opacity 0.3s ease;\n  }\n\n  .xp-video-play {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    z-index: 3;\n    width: 82px;\n    height: 82px;\n    border: 0;\n    background: transparent;\n    transform: translate(-50%, -50%);\n    display: grid;\n    place-items: center;\n    cursor: pointer;\n    transition: transform 0.25s ease, opacity 0.25s ease;\n  }\n\n  .xp-video-play:hover {\n    transform: translate(-50%, -50%) scale(1.08);\n  }\n\n  .xp-video-play span {\n    display: block;\n    width: 0;\n    height: 0;\n    margin-left: 8px;\n    border-top: 26px solid transparent;\n    border-bottom: 26px solid transparent;\n    border-left: 42px solid #ffffff;\n    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));\n  }\n\n  .xp-video-wrap.is-playing::after,\n  .xp-video-wrap.is-playing .xp-video-play {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  .xp-video-wrap.is-playing .xp-video {\n    object-fit: contain;\n    background: #000;\n  }\n\n  @media (max-width: 768px) {\n    .xp-video-wrap {\n      height: 742px;\n      min-height: 742px;\n    }\n\n    .xp-video {\n      object-fit: cover;\n      object-position: center;\n    }\n\n    .xp-video-play {\n      width: 70px;\n      height: 70px;\n    }\n\n    .xp-video-play span {\n      margin-left: 7px;\n      border-top-width: 22px;\n      border-bottom-width: 22px;\n      border-left-width: 36px;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-video-wrap {\n      height: 742px;\n      min-height: 742px;\n    }\n\n    .xp-video-play {\n      width: 64px;\n      height: 64px;\n    }\n\n    .xp-video-play span {\n      border-top-width: 20px;\n      border-bottom-width: 20px;\n      border-left-width: 33px;\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    const wrapper = document.getElementById(\"xpVideoBanner\");\n    if (!wrapper) return;\n\n    const video = wrapper.querySelector(\".xp-video\");\n    const playButton = wrapper.querySelector(\".xp-video-play\");\n\n    function playWithControls() {\n      wrapper.classList.add(\"is-playing\");\n\n      video.muted = false;\n      video.loop = false;\n      video.controls = true;\n\n      video.play().catch(function () {\n        video.muted = true;\n        video.play();\n      });\n    }\n\n    wrapper.addEventListener(\"click\", playWithControls);\n    playButton.addEventListener(\"click\", function (event) {\n      event.stopPropagation();\n      playWithControls();\n    });\n  })();\n<\/script>\n\n\n\n\n\n<section class=\"xp-futuristic-banner\">\n  <picture>\n    <!-- Mobile image -->\n    <source\n      media=\"(max-width: 750px)\"\n      srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/047e3919551149f5b430686a2fa8cfaf.jpg\"\n    >\n\n    <!-- Desktop image -->\n    <img decoding=\"async\"\n      class=\"xp-futuristic-img\"\n      src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/b47eea6aa4e940d2a80455cb74cbf34d.jpg\"\n      alt=\"XPENG dynamic and futuristic design\"\n    >\n  <\/picture>\n\n  <div class=\"xp-futuristic-content\">\n    <h2>Redefining comfort on the move<\/h2>\n  <\/div>\n<\/section>\n\n<style>\n \n\n  .xp-futuristic-banner {\n    position: relative;\n    width: 100%;\n    min-height: 760px;\n    overflow: hidden;\n    background: #ffffff;\n     font-family: basis_grotesque_regular;\n  }\n\n  .xp-futuristic-banner picture {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n\n  .xp-futuristic-img {\n    width: 100%;\n    height: 760px;\n    display: block;\n    object-fit: cover;\n    object-position: center;\n  }\n\n  .xp-futuristic-banner::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    \/* background: rgba(0, 0, 0, 0.22); *\/\n    pointer-events: none;\n  }\n\n  .xp-futuristic-content {\n    position: absolute;\n    z-index: 2;\n    top: 108px;\n    left: 50%;\n    width: 90%;\n    max-width: 1050px;\n    transform: translateX(-50%);\n    text-align: center;\n    color: #ffffff;\n  }\n\n  .xp-futuristic-content h2 {\n    margin: 0 0 14px;\n    color: #ffffff;\n    font-size: 36px;\n    line-height: 1.2;\n    font-weight: 400;\n  }\n\n  .xp-futuristic-content p {\n    margin: 0 auto;\n    color: #ffffff;\n    font-size: 17px;\n    line-height: 1.45;\n    font-weight: 600;\n  }\n\n  @media (max-width: 1200px) {\n    .xp-futuristic-banner {\n      min-height: 650px;\n    }\n\n    .xp-futuristic-img {\n      height: 650px;\n    }\n\n    .xp-futuristic-content {\n      top: 88px;\n    }\n\n    .xp-futuristic-content h2 {\n      font-size: 32px;\n    }\n\n    .xp-futuristic-content p {\n      font-size: 15px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-futuristic-banner {\n      min-height: auto;\n      display: flex;\n      flex-direction: column;\n      background: #ffffff;\n    }\n\n    .xp-futuristic-banner::after {\n      display: none;\n    }\n\n    .xp-futuristic-img {\n      width: 100%;\n      height: auto;\n      display: block;\n      object-fit: contain;\n      object-position: center top;\n    }\n\n    .xp-futuristic-content {\n      position: static;\n      transform: none;\n      width: 100%;\n      max-width: none;\n      text-align: left;\n      padding: 38px 35px 36px;\n      background: #ffffff;\n      color: #000000;\n    }\n\n    .xp-futuristic-content h2 {\n      margin: 0 0 26px;\n      max-width: 420px;\n      color: #000000;\n      font-size: 32px;\n      line-height: 1.35;\n      font-weight: 400;\n    }\n\n    .xp-futuristic-content p {\n      margin: 0;\n      max-width: 420px;\n      color: #6b6b6b;\n      font-size: 20px;\n      line-height: 1.45;\n      font-weight: 400;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-futuristic-content {\n      padding: 38px 35px 36px;\n    }\n\n    .xp-futuristic-content h2 {\n      font-size: 32px;\n      line-height: 1.35;\n      margin-bottom: 26px;\n    }\n\n    .xp-futuristic-content p {\n      font-size: 20px;\n      line-height: 1.45;\n    }\n  }\n<\/style>\n\n\n<section class=\"xp-robot-carousel-section\">\n  <div class=\"xp-robot-carousel\" id=\"xpRobotCarousel\">\n\n    <button class=\"xp-robot-arrow xp-robot-prev\" type=\"button\" aria-label=\"Previous slide\">\n      <span><\/span>\n    <\/button>\n\n    <div class=\"xp-robot-track\">\n\n      <article class=\"xp-robot-slide\">\n        <div class=\"xp-robot-text\">\n          The &#8220;Robot Face&#8221; grille with integrated full-width LED strip offers a bold and futuristic look.\n        <\/div>\n\n        <div class=\"xp-robot-image\">\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/9eff505d01094222a5c914b83bd189f0.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n            alt=\"Robot Face grille with integrated full-width LED strip\"\n          >\n        <\/div>\n      <\/article>\n\n      <article class=\"xp-robot-slide\">\n        <div class=\"xp-robot-text\">\n          Fastback silhouette with long front overhang and flush handles for a smooth, dynamic profile.\n        <\/div>\n\n        <div class=\"xp-robot-image\">\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/cab4e6f072774ab4b778106e7d35d607.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n            alt=\"Fastback silhouette with smooth dynamic profile\"\n          >\n        <\/div>\n      <\/article>\n\n      <article class=\"xp-robot-slide\">\n        <div class=\"xp-robot-text\">\n          Suspended rear LED strip and aerodynamic lines that enhance both style and performance.\n        <\/div>\n\n        <div class=\"xp-robot-image\">\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/6fec8b6a43c649fcb45aa7218baf6c12.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n            alt=\"Suspended rear LED strip and aerodynamic lines\"\n          >\n        <\/div>\n      <\/article>\n\n    <\/div>\n\n    <button class=\"xp-robot-arrow xp-robot-next\" type=\"button\" aria-label=\"Next slide\">\n      <span><\/span>\n    <\/button>\n\n    <div class=\"xp-robot-dots\">\n      <button class=\"active\" type=\"button\" data-index=\"0\" aria-label=\"Slide 1\"><\/button>\n      <button type=\"button\" data-index=\"1\" aria-label=\"Slide 2\"><\/button>\n      <button type=\"button\" data-index=\"2\" aria-label=\"Slide 3\"><\/button>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n \n\n  .xp-robot-carousel-section {\n    width: 100%;\n    background: #ffffff;\n    overflow: hidden;\n    padding: 64px 0 76px;\n    font-family: basis_grotesque_regular;\n  }\n\n  .xp-robot-carousel {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .xp-robot-track {\n    display: flex;\n    gap: 56px;\n    padding: 0 calc((100vw - min(86vw, 1268px)) \/ 2);\n    overflow-x: auto;\n    overflow-y: hidden;\n    scroll-behavior: smooth;\n    scroll-snap-type: x mandatory;\n    scrollbar-width: none;\n    cursor: grab;\n    user-select: none;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  .xp-robot-track::-webkit-scrollbar {\n    display: none;\n  }\n\n  .xp-robot-track.is-dragging {\n    cursor: grabbing;\n    scroll-behavior: auto;\n    scroll-snap-type: none;\n  }\n\n  .xp-robot-slide {\n    flex: 0 0 min(86vw, 1268px);\n    scroll-snap-align: center;\n    background: #ffffff;\n  }\n\n  .xp-robot-text {\n    max-width: 880px;\n    min-height: 54px;\n    margin: 0 auto 34px;\n    text-align: center;\n    color: #111111;\n    font-size: 17px;\n    line-height: 1.55;\n    font-weight: 400;\n    letter-spacing: 0.03em;\n  }\n\n  .xp-robot-image {\n    width: 100%;\n    height: 633px;\n    overflow: hidden;\n    border-radius: 3px;\n    background: #f3f3f3;\n  }\n\n  .xp-robot-image img {\n    width: 100%;\n    height: 100%;\n    display: block;\n    object-fit: cover;\n    object-position: center;\n    pointer-events: none;\n    user-select: none;\n    -webkit-user-drag: none;\n  }\n\n  .xp-robot-arrow {\n    position: absolute;\n    top: calc(54px + 34px + 316px);\n    z-index: 10;\n    width: 58px;\n    height: 58px;\n    border: 0;\n    background: transparent;\n    color: #9b9b9b;\n    display: grid;\n    place-items: center;\n    cursor: pointer;\n    transform: translateY(-50%);\n    transition: color 0.25s ease, opacity 0.25s ease;\n  }\n\n  .xp-robot-arrow:hover {\n    color: #111111;\n  }\n\n  .xp-robot-arrow:disabled {\n    opacity: 0.25;\n    cursor: default;\n    pointer-events: none;\n  }\n\n  .xp-robot-arrow span {\n    width: 18px;\n    height: 18px;\n    display: block;\n    border-top: 2px solid currentColor;\n    border-right: 2px solid currentColor;\n  }\n\n  .xp-robot-prev {\n    left: calc(50% - min(86vw, 1268px) \/ 2 - 62px);\n  }\n\n  .xp-robot-prev span {\n    transform: rotate(-135deg);\n  }\n\n  .xp-robot-next {\n    right: calc(50% - min(86vw, 1268px) \/ 2 - 62px);\n  }\n\n  .xp-robot-next span {\n    transform: rotate(45deg);\n  }\n\n  .xp-robot-dots {\n    display: none;\n  }\n\n  @media (max-width: 1400px) {\n    .xp-robot-carousel-section {\n      padding: 58px 0 70px;\n    }\n\n    .xp-robot-track {\n      padding: 0 5vw;\n      gap: 46px;\n    }\n\n    .xp-robot-slide {\n      flex-basis: 86vw;\n    }\n\n    .xp-robot-image {\n      height: 48vw;\n      max-height: 633px;\n      min-height: 500px;\n    }\n\n    .xp-robot-prev {\n      left: 1.5vw;\n    }\n\n    .xp-robot-next {\n      right: 1.5vw;\n    }\n  }\n\n  @media (max-width: 1100px) {\n    .xp-robot-carousel-section {\n      padding: 54px 0 64px;\n    }\n\n    .xp-robot-track {\n      padding: 0 7vw;\n      gap: 34px;\n    }\n\n    .xp-robot-slide {\n      flex-basis: 86vw;\n    }\n\n    .xp-robot-text {\n      margin-bottom: 28px;\n      font-size: 16px;\n      line-height: 1.55;\n    }\n\n    .xp-robot-image {\n      height: 460px;\n      min-height: 0;\n    }\n\n    .xp-robot-arrow {\n      top: calc(54px + 28px + 230px);\n    }\n\n    .xp-robot-prev {\n      left: 3vw;\n    }\n\n    .xp-robot-next {\n      right: 3vw;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-robot-carousel-section {\n      padding: 64px 0 58px;\n      background: #ffffff;\n    }\n\n    .xp-robot-track {\n      gap: 16px;\n      padding: 0 22px;\n      scroll-padding-left: 22px;\n      cursor: default;\n    }\n\n    .xp-robot-slide {\n      flex: 0 0 calc(100vw - 44px);\n      display: flex;\n      flex-direction: column;\n      scroll-snap-align: start;\n      background: #ffffff;\n    }\n\n    .xp-robot-text {\n      order: 2;\n      min-height: auto;\n      max-width: 100%;\n      margin: 0;\n      padding: 38px 6px 0;\n      text-align: left;\n      color: #6b6f77;\n      font-size: 17px;\n      line-height: 1.55;\n      font-weight: 400;\n      letter-spacing: 0;\n    }\n\n    .xp-robot-image {\n      order: 1;\n      width: 100%;\n      height: 294px;\n      min-height: 0;\n      border-radius: 2px;\n      background: #f3f3f3;\n    }\n\n    .xp-robot-image img {\n      object-fit: cover;\n      object-position: center;\n    }\n\n    .xp-robot-arrow {\n      display: none;\n    }\n\n    .xp-robot-dots {\n      display: flex;\n      gap: 8px;\n      padding: 76px 28px 0;\n      align-items: center;\n    }\n\n    .xp-robot-dots button {\n      width: 24px;\n      height: 2px;\n      border: 0;\n      padding: 0;\n      background: #eeeeee;\n      cursor: pointer;\n      transition: 0.25s ease;\n    }\n\n    .xp-robot-dots button.active {\n      background: #8cc63f;\n    }\n  }\n\n  @media (max-width: 390px) {\n    .xp-robot-carousel-section {\n      padding-top: 58px;\n      padding-bottom: 54px;\n    }\n\n    .xp-robot-track {\n      padding: 0 20px;\n      scroll-padding-left: 20px;\n    }\n\n    .xp-robot-slide {\n      flex-basis: calc(100vw - 40px);\n    }\n\n    .xp-robot-image {\n      height: 286px;\n    }\n\n    .xp-robot-text {\n      font-size: 16px;\n      line-height: 1.55;\n      padding: 34px 2px 0;\n    }\n\n    .xp-robot-dots {\n      padding: 70px 22px 0;\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    const carousel = document.getElementById(\"xpRobotCarousel\");\n    if (!carousel) return;\n\n    const track = carousel.querySelector(\".xp-robot-track\");\n    const slides = Array.from(carousel.querySelectorAll(\".xp-robot-slide\"));\n    const prevBtn = carousel.querySelector(\".xp-robot-prev\");\n    const nextBtn = carousel.querySelector(\".xp-robot-next\");\n    const dots = Array.from(carousel.querySelectorAll(\".xp-robot-dots button\"));\n\n    let currentIndex = 0;\n    let isDown = false;\n    let startX = 0;\n    let startScrollLeft = 0;\n    let hasMoved = false;\n\n    function getAlign() {\n      return window.innerWidth <= 750 ? \"start\" : \"center\";\n    }\n\n    function updateUI() {\n      if (prevBtn) prevBtn.disabled = currentIndex === 0;\n      if (nextBtn) nextBtn.disabled = currentIndex === slides.length - 1;\n\n      dots.forEach(function (dot, index) {\n        dot.classList.toggle(\"active\", index === currentIndex);\n      });\n    }\n\n    function goToSlide(index) {\n      currentIndex = Math.max(0, Math.min(index, slides.length - 1));\n\n      slides[currentIndex].scrollIntoView({\n        behavior: \"smooth\",\n        inline: getAlign(),\n        block: \"nearest\"\n      });\n\n      updateUI();\n    }\n\n    function updateCurrentIndex() {\n      const trackCenter = track.scrollLeft + track.offsetWidth \/ 2;\n      let closestIndex = 0;\n      let closestDistance = Infinity;\n\n      slides.forEach(function (slide, index) {\n        const slideCenter = slide.offsetLeft + slide.offsetWidth \/ 2;\n        const distance = Math.abs(trackCenter - slideCenter);\n\n        if (distance < closestDistance) {\n          closestDistance = distance;\n          closestIndex = index;\n        }\n      });\n\n      currentIndex = closestIndex;\n      updateUI();\n    }\n\n    function snapToClosestSlide() {\n      updateCurrentIndex();\n\n      slides[currentIndex].scrollIntoView({\n        behavior: \"smooth\",\n        inline: getAlign(),\n        block: \"nearest\"\n      });\n    }\n\n    if (prevBtn) {\n      prevBtn.addEventListener(\"click\", function () {\n        goToSlide(currentIndex - 1);\n      });\n    }\n\n    if (nextBtn) {\n      nextBtn.addEventListener(\"click\", function () {\n        goToSlide(currentIndex + 1);\n      });\n    }\n\n    dots.forEach(function (dot, index) {\n      dot.addEventListener(\"click\", function () {\n        goToSlide(index);\n      });\n    });\n\n    track.addEventListener(\"pointerdown\", function (event) {\n      isDown = true;\n      hasMoved = false;\n      startX = event.clientX;\n      startScrollLeft = track.scrollLeft;\n      track.classList.add(\"is-dragging\");\n\n      if (track.setPointerCapture) {\n        track.setPointerCapture(event.pointerId);\n      }\n    });\n\n    track.addEventListener(\"pointermove\", function (event) {\n      if (!isDown) return;\n\n      const moveX = event.clientX - startX;\n\n      if (Math.abs(moveX) > 5) {\n        hasMoved = true;\n      }\n\n      track.scrollLeft = startScrollLeft - moveX * 1.12;\n    });\n\n    track.addEventListener(\"pointerup\", function (event) {\n      if (!isDown) return;\n\n      isDown = false;\n      track.classList.remove(\"is-dragging\");\n\n      try {\n        track.releasePointerCapture(event.pointerId);\n      } catch (error) {}\n\n      setTimeout(snapToClosestSlide, 90);\n    });\n\n    track.addEventListener(\"pointercancel\", function () {\n      isDown = false;\n      track.classList.remove(\"is-dragging\");\n      setTimeout(snapToClosestSlide, 90);\n    });\n\n    track.addEventListener(\"scroll\", function () {\n      clearTimeout(track.scrollTimer);\n      track.scrollTimer = setTimeout(updateCurrentIndex, 80);\n    });\n\n    slides.forEach(function (slide) {\n      slide.addEventListener(\"click\", function (event) {\n        if (hasMoved) {\n          event.preventDefault();\n          event.stopPropagation();\n        }\n      });\n    });\n\n    window.addEventListener(\"resize\", function () {\n      goToSlide(currentIndex);\n    });\n\n    updateUI();\n  })();\n<\/script>\n\n\n\n<section class=\"xp-black-edition\">\n  <div class=\"xp-black-hero\">\n    <picture>\n      <source\n        media=\"(max-width: 750px)\"\n        srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/4c4ba151dd2d40edae87193685996ee2.jpg\"\n      >\n      <img decoding=\"async\"\n        src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/52706f134eeb4ec8839cab2c1a506416.jpg\"\n        alt=\"XPENG G6 Black Edition\"\n      >\n    <\/picture>\n\n    <div class=\"xp-black-overlay\"><\/div>\n\n    <div class=\"xp-black-header\">\n      <h2>Black Edition Finish<\/h2>\n      <p>A bold reinterpretation of elegance.<\/p>\n    <\/div>\n  <\/div>\n\n  <div class=\"xp-black-cards\">\n\n    <article class=\"xp-black-card\">\n      <picture>\n        <source\n          media=\"(max-width: 750px)\"\n          srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/8745f794553243659cd8e3aadc69bc0f.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n        >\n        <img decoding=\"async\"\n          src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/630904c55cfe45f4b0d006d09f2379c8.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n          alt=\"Matte black finishes\"\n        >\n      <\/picture>\n      <p>\n        Matte black finishes on the mirrors, window surrounds and &#8220;full black&#8221; wheels offer a premium\n      <\/p>\n    <\/article>\n\n    <article class=\"xp-black-card\">\n      <picture>\n        <source\n          media=\"(max-width: 750px)\"\n          srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/e8e224fa142f479a8fd9dbfa47f11855.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n        >\n        <img decoding=\"async\"\n          src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/7db589e1928142669fd6f40087280d63.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n          alt=\"Leather upholstery\"\n        >\n      <\/picture>\n      <p>\n        Leather upholstery, suede roof and ambient lighting reinforce the cocooning feeling of the cabin\n      <\/p>\n    <\/article>\n\n    <article class=\"xp-black-card\">\n      <picture>\n        <source\n          media=\"(max-width: 750px)\"\n          srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/ea066547a12f4c7f93251f89d71b831d.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n        >\n        <img decoding=\"async\"\n          src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/25a0a91455ca487b8a91e0603d5ec571.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n          alt=\"Full black alloy wheels\"\n        >\n      <\/picture>\n      <p>\n        &#8220;Full black&#8221; alloy wheels combined with black calipers amplify the dynamism of the new G6\n      <\/p>\n    <\/article>\n\n  <\/div>\n<\/section>\n\n<style>\n \n\n  .xp-black-edition {\n    width: 100%;\n    background: #ffffff;\n    overflow: hidden;\n     font-family: basis_grotesque_regular;\n  }\n\n  .xp-black-hero {\n    position: relative;\n    width: 100%;\n    height: 760px;\n    overflow: hidden;\n    background: #000;\n  }\n\n  .xp-black-hero picture,\n  .xp-black-hero img {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n\n  .xp-black-hero img {\n    object-fit: cover;\n    object-position: center;\n  }\n\n  .xp-black-overlay {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    background: linear-gradient(\n      to bottom,\n      rgba(0, 0, 0, 0.18) 0%,\n      rgba(0, 0, 0, 0.10) 45%,\n      rgba(255, 255, 255, 0.92) 100%\n    );\n    pointer-events: none;\n  }\n\n  .xp-black-header {\n    position: absolute;\n    top: 26px;\n    left: 50%;\n    z-index: 2;\n    width: 90%;\n    transform: translateX(-50%);\n    text-align: center;\n    color: #fff;\n  }\n\n  .xp-black-header h2 {\n    margin: 0 0 18px;\n    color: #fff;\n    font-size: 30px;\n    line-height: 1.2;\n    font-weight: 400;\n  }\n\n  .xp-black-header p {\n    margin: 0;\n    color: #fff;\n    font-size: 13px;\n    line-height: 1.45;\n    font-weight: 700;\n  }\n\n  .xp-black-cards {\n    position: relative;\n    z-index: 3;\n    width: 100%;\n    max-width: 1080px;\n    margin: -178px auto 0;\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 24px;\n    padding: 0 24px 70px;\n  }\n\n  .xp-black-card {\n    position: relative;\n    height: 257px;\n    overflow: hidden;\n    border-radius: 2px;\n    background: #111;\n  }\n\n  .xp-black-card picture,\n  .xp-black-card img {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n\n  .xp-black-card img {\n    object-fit: cover;\n    object-position: center;\n    transition: transform 0.45s ease;\n  }\n\n  .xp-black-card:hover img {\n    transform: scale(1.04);\n  }\n\n  .xp-black-card::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(\n      to bottom,\n      rgba(0, 0, 0, 0.08) 0%,\n      rgba(0, 0, 0, 0.18) 48%,\n      rgba(0, 0, 0, 0.72) 100%\n    );\n    pointer-events: none;\n  }\n\n  .xp-black-card p {\n    position: absolute;\n    left: 18px;\n    right: 18px;\n    bottom: 18px;\n    z-index: 2;\n    margin: 0;\n    padding: 0;\n    color: #ffffff;\n    font-size: 13px;\n    line-height: 1.45;\n    font-weight: 700;\n  }\n\n  @media (max-width: 1200px) {\n    .xp-black-hero {\n      height: 680px;\n    }\n\n    .xp-black-cards {\n      max-width: 960px;\n      margin-top: -150px;\n    }\n\n    .xp-black-card {\n      height: 235px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-black-hero {\n      height: 459px;\n    }\n\n    .xp-black-hero img {\n      height: 100%;\n      object-fit: cover;\n      object-position: center top;\n    }\n\n    .xp-black-overlay {\n      background: linear-gradient(\n        to bottom,\n        rgba(0, 0, 0, 0.10) 0%,\n        rgba(0, 0, 0, 0.04) 58%,\n        rgba(255, 255, 255, 1) 100%\n      );\n    }\n\n    .xp-black-header {\n      top: 20px;\n      left: 18px;\n      width: calc(100% - 36px);\n      transform: none;\n      text-align: left;\n    }\n\n    .xp-black-header h2 {\n      margin: 0 0 20px;\n      font-size: 22px;\n      line-height: 1.25;\n      font-weight: 600;\n    }\n\n    .xp-black-header p {\n      font-size: 13px;\n      line-height: 1.4;\n      font-weight: 700;\n    }\n\n    .xp-black-cards {\n      max-width: none;\n      margin: -18px 0 0;\n      display: flex;\n      gap: 18px;\n      overflow-x: auto;\n      overflow-y: hidden;\n      padding: 0 8px 34px;\n      scroll-snap-type: x mandatory;\n      -webkit-overflow-scrolling: touch;\n      scrollbar-width: none;\n    }\n\n    .xp-black-cards::-webkit-scrollbar {\n      display: none;\n    }\n\n    .xp-black-card {\n      flex: 0 0 250px;\n      height: auto;\n      overflow: visible;\n      background: transparent;\n      scroll-snap-align: start;\n    }\n\n    .xp-black-card::after {\n      display: none;\n    }\n\n    .xp-black-card picture,\n    .xp-black-card img {\n      width: 250px;\n      height: 186px;\n    }\n\n    .xp-black-card img {\n      border-radius: 0;\n      object-fit: cover;\n    }\n\n    .xp-black-card:hover img {\n      transform: none;\n    }\n\n    .xp-black-card p {\n      position: static;\n      margin: 0;\n      padding: 18px 0 0;\n      color: #000;\n      font-size: 15px;\n      line-height: 1.45;\n      font-weight: 400;\n    }\n  }\n<\/style>\n\n\n\n\n<section class=\"xp-g9-color-section\" id=\"xpG9ColorSection\">\n  <h2>Colors inspired by the cosmos<\/h2>\n\n  <div class=\"xp-g9-color-stage\">\n    <img decoding=\"async\"\n      class=\"xp-g9-logo\"\n      src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/c2d50a6d3662498988a3ffa8b9c60cd9.png\"\n      alt=\"G9\"\n    >\n\n    <!-- Arctic White -->\n    <picture class=\"xp-g9-car-img\">\n      <source\n        media=\"(max-width: 750px)\"\n        srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/e56bb94387c34a15915ade9b4b7972fa.png?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n      >\n      <img decoding=\"async\"\n        src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/1f7df6f7863f4ffc8d4752fc0c31d228.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n        alt=\"Arctic White\"\n      >\n    <\/picture>\n\n    <!-- Graphite Grey -->\n    <picture class=\"xp-g9-car-img\">\n      <source\n        media=\"(max-width: 750px)\"\n        srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/de24a93e657c46e59590dcfeaa19a1ff.png?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n      >\n      <img decoding=\"async\"\n        src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/45fa7cc98a764e3aa5f0c5a939af287b.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n        alt=\"Graphite Grey\"\n      >\n    <\/picture>\n\n    <!-- Midnight Black -->\n    <picture class=\"xp-g9-car-img\">\n      <source\n        media=\"(max-width: 750px)\"\n        srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/266d1065f0ac4195873f048452fe9dc8.png?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n      >\n      <img decoding=\"async\"\n        src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/abd30ce116de4c909a14d6dcc71a07a4.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n        alt=\"Midnight Black\"\n      >\n    <\/picture>\n\n    <!-- Silver Frost -->\n    <picture class=\"xp-g9-car-img\">\n      <source\n        media=\"(max-width: 750px)\"\n        srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/0642c2ea6ef0418b827865c9372f9b53.png?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n      >\n      <img decoding=\"async\"\n        src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/0309151d42bb4c8daacf5cb92458155e.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n        alt=\"Silver Frost\"\n      >\n    <\/picture>\n\n    <!-- Kaitoke Matte Green -->\n    <picture class=\"xp-g9-car-img\">\n      <source\n        media=\"(max-width: 750px)\"\n        srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-09\/8bd1eaecd8e345df8ccf88cd8aa73f2c.png?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n      >\n      <img decoding=\"async\"\n        src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-09\/8bd1eaecd8e345df8ccf88cd8aa73f2c.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n        alt=\"Kaitoke Matte Green\"\n      >\n    <\/picture>\n\n    <!-- Black Edition -->\n    <picture class=\"xp-g9-car-img active\">\n      <source\n        media=\"(max-width: 750px)\"\n        srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-07\/40e402cf289d46f0a82c51d2d8b3c74c.png?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n      >\n      <img decoding=\"async\"\n        src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/be7337cc4e0d48c19fed17ba9e161f24.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n        alt=\"Black Edition\"\n      >\n    <\/picture>\n  <\/div>\n\n  <div class=\"xp-g9-color-name-mobile\" id=\"xpG9ColorNameMobile\">\n    Black Edition\n  <\/div>\n\n  <div class=\"xp-g9-color-footer\">\n    <div class=\"xp-g9-color-options\" id=\"xpG9ColorOptions\">\n\n      <button class=\"xp-g9-color-btn\" type=\"button\" data-index=\"0\" aria-label=\"Arctic White\">\n        <span class=\"xp-g9-color-dot\">\n          <img decoding=\"async\" src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/f45b07d6c7024620849788027e043ccc.png\" alt=\"Arctic White\">\n        <\/span>\n        <span class=\"xp-g9-color-text\">Arctic White<\/span>\n      <\/button>\n\n      <button class=\"xp-g9-color-btn\" type=\"button\" data-index=\"1\" aria-label=\"Graphite Grey\">\n        <span class=\"xp-g9-color-dot\">\n          <img decoding=\"async\" src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/b0493bde96484fbdadf929ca5423ba5a.png\" alt=\"Graphite Grey\">\n        <\/span>\n        <span class=\"xp-g9-color-text\">Graphite Grey<\/span>\n      <\/button>\n\n      <button class=\"xp-g9-color-btn\" type=\"button\" data-index=\"2\" aria-label=\"Midnight Black\">\n        <span class=\"xp-g9-color-dot\">\n          <img decoding=\"async\" src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/9fe053bb762743849b4ddc25db44a4b7.png\" alt=\"Midnight Black\">\n        <\/span>\n        <span class=\"xp-g9-color-text\">Midnight Black<\/span>\n      <\/button>\n\n      <button class=\"xp-g9-color-btn\" type=\"button\" data-index=\"3\" aria-label=\"Silver Frost\">\n        <span class=\"xp-g9-color-dot\">\n          <img decoding=\"async\" src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/b5415f64830a4fc1bc90298993dea0c1.png\" alt=\"Silver Frost\">\n        <\/span>\n        <span class=\"xp-g9-color-text\">Silver Frost<\/span>\n      <\/button>\n\n      <button class=\"xp-g9-color-btn\" type=\"button\" data-index=\"4\" aria-label=\"Kaitoke Matte Green\">\n        <span class=\"xp-g9-color-dot\">\n          <img decoding=\"async\" src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/c2b53daa25944c7a97623214dd2beecd.png\" alt=\"Kaitoke Matte Green\">\n        <\/span>\n        <span class=\"xp-g9-color-text\">Kaitoke Matte Green<\/span>\n      <\/button>\n\n      <button class=\"xp-g9-color-btn active\" type=\"button\" data-index=\"5\" aria-label=\"Black Edition\">\n        <span class=\"xp-g9-color-dot\">\n          <img decoding=\"async\" src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/9fe053bb762743849b4ddc25db44a4b7.png\" alt=\"Black Edition\">\n        <\/span>\n        <span class=\"xp-g9-color-text\">Black Edition<\/span>\n      <\/button>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<style>\n \n\n  .xp-g9-color-section {\n    width: 100%;\n    min-height: 835px;\n    padding: 96px 20px 58px;\n    background: #ffffff;\n    overflow: hidden;\n    position: relative;\n    font-family: basis_grotesque_regular;\n  }\n\n  .xp-g9-color-section h2 {\n    margin: 0;\n    text-align: center;\n    color: #000000;\n    font-size: 30px;\n    line-height: 1.25;\n    font-weight: 400;\n  }\n\n  .xp-g9-color-stage {\n    position: relative;\n    width: 100%;\n    max-width: 1060px;\n    height: 560px;\n    margin: 38px auto 0;\n  }\n\n  .xp-g9-logo {\n    position: absolute;\n    left: 95px;\n    top: 150px;\n    width: 230px;\n    opacity: 0.38;\n    z-index: 1;\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .xp-g9-car-img {\n    position: absolute;\n    inset: 0;\n    display: none;\n    z-index: 2;\n  }\n\n  .xp-g9-car-img.active {\n    display: block;\n    animation: xpG9Fade 0.3s ease;\n  }\n\n  .xp-g9-car-img img {\n    width: 100%;\n    height: 100%;\n    display: block;\n    object-fit: contain;\n    object-position: center;\n  }\n\n  .xp-g9-color-name-mobile {\n    display: none;\n  }\n\n  .xp-g9-color-footer {\n    width: 100%;\n    margin-top: -8px;\n    position: relative;\n    z-index: 3;\n    display: flex;\n    justify-content: center;\n  }\n\n  .xp-g9-color-options {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 14px;\n    max-width: 100%;\n  }\n\n  .xp-g9-color-btn {\n    height: 32px;\n    min-width: 24px;\n    border: 0;\n    padding: 0;\n    background: transparent;\n    border-radius: 999px;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 7px;\n    transition: 0.25s ease;\n    flex: 0 0 auto;\n  }\n\n  .xp-g9-color-dot {\n    width: 22px;\n    height: 22px;\n    border-radius: 50%;\n    display: grid;\n    place-items: center;\n    flex: 0 0 auto;\n  }\n\n  .xp-g9-color-dot img {\n    width: 22px;\n    height: 22px;\n    display: block;\n    border-radius: 50%;\n  }\n\n  .xp-g9-color-text {\n    display: none;\n    color: #566070;\n    font-size: 12px;\n    line-height: 1;\n    font-weight: 400;\n    white-space: nowrap;\n    padding-right: 8px;\n  }\n\n  .xp-g9-color-btn.active {\n    height: 32px;\n    padding: 4px 10px 4px 5px;\n    background: #f7f7f7;\n  }\n\n  .xp-g9-color-btn.active .xp-g9-color-dot {\n    width: 24px;\n    height: 24px;\n    background: #eeeeee;\n  }\n\n  .xp-g9-color-btn.active .xp-g9-color-dot img {\n    width: 20px;\n    height: 20px;\n  }\n\n  .xp-g9-color-btn.active .xp-g9-color-text {\n    display: inline-block;\n  }\n\n  @keyframes xpG9Fade {\n    from {\n      opacity: 0;\n      transform: translateY(6px);\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @media (max-width: 1200px) {\n    .xp-g9-color-section {\n      min-height: 760px;\n      padding-top: 78px;\n    }\n\n    .xp-g9-color-stage {\n      max-width: 900px;\n      height: 500px;\n    }\n\n    .xp-g9-logo {\n      left: 75px;\n      top: 135px;\n      width: 205px;\n    }\n  }\n\n  @media (max-width: 900px) {\n    .xp-g9-color-section {\n      min-height: auto;\n      padding: 44px 0 48px;\n      background: #ffffff;\n    }\n\n    .xp-g9-color-section h2 {\n      padding: 0 38px;\n      text-align: left;\n      font-size: 30px;\n      line-height: 1.22;\n      font-weight: 400;\n    }\n\n    .xp-g9-color-stage {\n      height: 360px;\n      max-width: none;\n      margin: 42px auto 0;\n      padding: 0;\n      overflow: visible;\n    }\n\n    .xp-g9-logo {\n      left: 42px;\n      top: 74px;\n      width: 130px;\n      opacity: 0.42;\n    }\n\n    .xp-g9-car-img img {\n      object-fit: contain;\n      object-position: center;\n      transform: scale(1.05);\n    }\n\n    .xp-g9-color-name-mobile {\n      display: block;\n      margin: -10px 0 32px;\n      color: #000000;\n      font-size: 18px;\n      line-height: 1.3;\n      font-weight: 400;\n      text-align: center;\n    }\n\n    .xp-g9-color-footer {\n      margin-top: 0;\n      justify-content: flex-start;\n      overflow: hidden;\n      width: 100%;\n    }\n\n    .xp-g9-color-options {\n      justify-content: flex-start;\n      width: 100%;\n      overflow-x: auto;\n      overflow-y: hidden;\n      padding: 0 36px 8px;\n      gap: 34px;\n      scroll-snap-type: x mandatory;\n      -webkit-overflow-scrolling: touch;\n      scrollbar-width: none;\n      cursor: grab;\n      user-select: none;\n    }\n\n    .xp-g9-color-options::-webkit-scrollbar {\n      display: none;\n    }\n\n    .xp-g9-color-options.is-dragging {\n      cursor: grabbing;\n    }\n\n    .xp-g9-color-btn {\n      height: 54px;\n      min-width: 40px;\n      scroll-snap-align: center;\n    }\n\n    .xp-g9-color-dot,\n    .xp-g9-color-dot img {\n      width: 40px;\n      height: 40px;\n    }\n\n    .xp-g9-color-text {\n      font-size: 12px;\n      padding-right: 8px;\n    }\n\n    .xp-g9-color-btn.active {\n      height: 54px;\n      padding: 7px 10px;\n      gap: 8px;\n      background: #f7f7f7;\n      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);\n    }\n\n    .xp-g9-color-btn.active .xp-g9-color-dot {\n      width: 40px;\n      height: 40px;\n      background: transparent;\n    }\n\n    .xp-g9-color-btn.active .xp-g9-color-dot img {\n      width: 40px;\n      height: 40px;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-g9-color-section {\n      padding-top: 44px;\n    }\n\n    .xp-g9-color-section h2 {\n      padding: 0 38px;\n      font-size: 30px;\n    }\n\n    .xp-g9-color-stage {\n      height: 360px;\n      margin-top: 42px;\n    }\n\n    .xp-g9-car-img img {\n      transform: scale(1.08);\n    }\n\n    .xp-g9-color-options {\n      gap: 34px;\n      padding-left: 36px;\n      padding-right: 36px;\n    }\n  }\n\n  @media (max-width: 390px) {\n    .xp-g9-color-section h2 {\n      padding: 0 36px;\n      font-size: 29px;\n    }\n\n    .xp-g9-logo {\n      left: 40px;\n      top: 76px;\n      width: 126px;\n    }\n\n    .xp-g9-car-img img {\n      transform: scale(1.1);\n    }\n\n    .xp-g9-color-options {\n      gap: 32px;\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    const section = document.getElementById(\"xpG9ColorSection\");\n    if (!section) return;\n\n    const cars = Array.from(section.querySelectorAll(\".xp-g9-car-img\"));\n    const buttons = Array.from(section.querySelectorAll(\".xp-g9-color-btn\"));\n    const options = section.querySelector(\"#xpG9ColorOptions\");\n    const mobileName = section.querySelector(\"#xpG9ColorNameMobile\");\n\n    let isDown = false;\n    let startX = 0;\n    let startScrollLeft = 0;\n    let hasMoved = false;\n\n    function setColor(index) {\n      cars.forEach(function (car, carIndex) {\n        car.classList.toggle(\"active\", carIndex === index);\n      });\n\n      buttons.forEach(function (button, buttonIndex) {\n        button.classList.toggle(\"active\", buttonIndex === index);\n      });\n\n      const selectedText = buttons[index].querySelector(\".xp-g9-color-text\").textContent.trim();\n      mobileName.textContent = selectedText;\n\n      if (window.innerWidth <= 900) {\n        buttons[index].scrollIntoView({\n          behavior: \"smooth\",\n          inline: \"center\",\n          block: \"nearest\"\n        });\n      }\n    }\n\n    buttons.forEach(function (button) {\n      button.addEventListener(\"click\", function (event) {\n        if (hasMoved) {\n          event.preventDefault();\n          return;\n        }\n\n        setColor(Number(this.dataset.index));\n      });\n    });\n\n    options.addEventListener(\"pointerdown\", function (event) {\n      if (window.innerWidth > 900) return;\n\n      isDown = true;\n      hasMoved = false;\n      startX = event.clientX;\n      startScrollLeft = options.scrollLeft;\n      options.classList.add(\"is-dragging\");\n\n      if (options.setPointerCapture) {\n        options.setPointerCapture(event.pointerId);\n      }\n    });\n\n    options.addEventListener(\"pointermove\", function (event) {\n      if (!isDown) return;\n\n      const moveX = event.clientX - startX;\n\n      if (Math.abs(moveX) > 5) {\n        hasMoved = true;\n      }\n\n      options.scrollLeft = startScrollLeft - moveX;\n    });\n\n    options.addEventListener(\"pointerup\", function (event) {\n      isDown = false;\n      options.classList.remove(\"is-dragging\");\n\n      try {\n        options.releasePointerCapture(event.pointerId);\n      } catch (error) {}\n    });\n\n    options.addEventListener(\"pointercancel\", function () {\n      isDown = false;\n      options.classList.remove(\"is-dragging\");\n    });\n  })();\n<\/script>\n\n\n\n\n\n\n\n\n\n\n\n<section class=\"xp-interior-atmospheres\" id=\"xpInteriorAtmospheres\">\n  <h2 class=\"xp-interior-title\">Interior atmospheres<\/h2>\n\n  <div class=\"xp-interior-stage\">\n\n    <!-- Black -->\n    <picture class=\"xp-interior-image active\">\n      <source\n        media=\"(max-width: 750px)\"\n        srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/dc0aece9e51a452eaa5f76039b329186.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n      >\n      <img decoding=\"async\"\n        src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/0d7b36fabb81468a8ce1390f29e4a58f.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n        alt=\"Black interior atmosphere\"\n      >\n    <\/picture>\n\n    <!-- Mocha -->\n    <picture class=\"xp-interior-image\">\n      <source\n        media=\"(max-width: 750px)\"\n        srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/fc2da03430e947afa0be3d623be45962.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n      >\n      <img decoding=\"async\"\n        src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/0af8ec4fa92b45558cdf24d87f537a94.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n        alt=\"Mocha interior atmosphere\"\n      >\n    <\/picture>\n\n    <!-- Clay -->\n    <picture class=\"xp-interior-image\">\n      <source\n        media=\"(max-width: 750px)\"\n        srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/79bfbd3fe89b418e93e3d02cbc23a059.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n      >\n      <img decoding=\"async\"\n        src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/252c6bca103e45b69f952b7c3eb30e0c.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n        alt=\"Clay interior atmosphere\"\n      >\n    <\/picture>\n\n    <!-- Diamond Grey -->\n    <picture class=\"xp-interior-image\">\n      <source\n        media=\"(max-width: 750px)\"\n        srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/f26a4a9c337c4e37ac0356281dd15fd5.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n      >\n      <img decoding=\"async\"\n        src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/36836a2745174a0f8796e06ae8f004d0.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n        alt=\"Diamond Grey interior atmosphere\"\n      >\n    <\/picture>\n\n  <\/div>\n\n  <div class=\"xp-interior-color-name\" id=\"xpInteriorColorName\">Black<\/div>\n\n  <div class=\"xp-interior-footer\">\n    <div class=\"xp-interior-options\" id=\"xpInteriorOptions\">\n\n      <button class=\"xp-interior-option active\" type=\"button\" data-index=\"0\" data-name=\"Black\" aria-label=\"Black\">\n        <span class=\"xp-interior-dot\">\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/2a5fe964efff4d019e83a869d995166e.png\"\n            alt=\"Black\"\n          >\n        <\/span>\n        <span class=\"xp-interior-text\">Black<\/span>\n      <\/button>\n\n      <button class=\"xp-interior-option\" type=\"button\" data-index=\"1\" data-name=\"Mocha\" aria-label=\"Mocha\">\n        <span class=\"xp-interior-dot\">\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/6d593aa384a444bc82e7b0752bb1ee0e.png\"\n            alt=\"Mocha\"\n          >\n        <\/span>\n        <span class=\"xp-interior-text\">Mocha<\/span>\n      <\/button>\n\n      <button class=\"xp-interior-option\" type=\"button\" data-index=\"2\" data-name=\"Clay\" aria-label=\"Clay\">\n        <span class=\"xp-interior-dot\">\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/d560b48ce4b14bd49d0f6b1aad12175b.png\"\n            alt=\"Clay\"\n          >\n        <\/span>\n        <span class=\"xp-interior-text\">Clay<\/span>\n      <\/button>\n\n      <button class=\"xp-interior-option\" type=\"button\" data-index=\"3\" data-name=\"Diamond Grey\" aria-label=\"Diamond Grey\">\n        <span class=\"xp-interior-dot\">\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/034c59b4573947a9bbae2e5017ba6da0.png\"\n            alt=\"Diamond Grey\"\n          >\n        <\/span>\n        <span class=\"xp-interior-text\">Diamond Grey<\/span>\n      <\/button>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<style>\n \n\n  .xp-interior-atmospheres {\n    width: 100%;\n    background: #ffffff;\n    padding: 26px 20px 48px;\n    overflow: hidden;\n    font-family: basis_grotesque_regular;\n  }\n\n  .xp-interior-title {\n    margin: 0 0 54px;\n    color: #000000;\n    text-align: center;\n    font-size: 32px;\n    line-height: 1.25;\n    font-weight: 400;\n  }\n\n  .xp-interior-stage {\n    position: relative;\n    width: 100%;\n    max-width: 1240px;\n    height: 620px;\n    margin: 0 auto;\n    overflow: hidden;\n    border-radius: 3px;\n    background: #f4f4f4;\n  }\n\n  .xp-interior-image {\n    position: absolute;\n    inset: 0;\n    display: none;\n  }\n\n  .xp-interior-image.active {\n    display: block;\n    animation: xpInteriorFade 0.35s ease;\n  }\n\n  .xp-interior-image img {\n    width: 100%;\n    height: 100%;\n    display: block;\n    object-fit: cover;\n    object-position: center;\n  }\n\n  .xp-interior-color-name {\n    display: none;\n  }\n\n  .xp-interior-footer {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    margin-top: 42px;\n  }\n\n  .xp-interior-options {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 28px;\n    max-width: 100%;\n  }\n\n  .xp-interior-option {\n    height: 42px;\n    min-width: 30px;\n    border: 0;\n    padding: 0;\n    background: transparent;\n    border-radius: 999px;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    transition: 0.25s ease;\n    flex: 0 0 auto;\n  }\n\n  .xp-interior-dot {\n    width: 27px;\n    height: 27px;\n    border-radius: 50%;\n    display: grid;\n    place-items: center;\n    flex: 0 0 auto;\n  }\n\n  .xp-interior-dot img {\n    width: 27px;\n    height: 27px;\n    display: block;\n    border-radius: 50%;\n  }\n\n  .xp-interior-text {\n    display: none;\n    color: #566070;\n    font-size: 13px;\n    line-height: 1;\n    font-weight: 400;\n    white-space: nowrap;\n    padding-right: 8px;\n  }\n\n  .xp-interior-option.active {\n    height: 42px;\n    padding: 5px 12px 5px 6px;\n    background: #f7f7f7;\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);\n  }\n\n  .xp-interior-option.active .xp-interior-dot {\n    width: 31px;\n    height: 31px;\n    background: #eeeeee;\n  }\n\n  .xp-interior-option.active .xp-interior-dot img {\n    width: 27px;\n    height: 27px;\n  }\n\n  .xp-interior-option.active .xp-interior-text {\n    display: inline-block;\n  }\n\n  @keyframes xpInteriorFade {\n    from {\n      opacity: 0;\n      transform: translateY(5px);\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @media (max-width: 1300px) {\n    .xp-interior-stage {\n      max-width: 1120px;\n      height: 560px;\n    }\n  }\n\n  @media (max-width: 1000px) {\n    .xp-interior-stage {\n      height: 460px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-interior-atmospheres {\n      padding: 28px 0 42px;\n      background: #ffffff;\n    }\n\n    .xp-interior-title {\n      margin: 0 0 145px;\n      padding: 0 28px;\n      text-align: left;\n      font-size: 30px;\n      line-height: 1.22;\n      font-weight: 400;\n    }\n\n    .xp-interior-stage {\n      width: calc(100% - 50px);\n      height: 210px;\n      margin: 0 auto;\n      border-radius: 0;\n      background: #f4f4f4;\n    }\n\n    .xp-interior-image img {\n      object-fit: cover;\n      object-position: center;\n    }\n\n    .xp-interior-color-name {\n      display: block;\n      margin: 46px 0 28px;\n      color: #000000;\n      font-size: 18px;\n      line-height: 1.3;\n      font-weight: 400;\n      text-align: center;\n    }\n\n    .xp-interior-footer {\n      margin-top: 0;\n      justify-content: flex-start;\n      overflow: hidden;\n      width: 100%;\n    }\n\n    .xp-interior-options {\n      width: 100%;\n      justify-content: flex-start;\n      gap: 38px;\n      padding: 0 40px 8px;\n      overflow-x: auto;\n      overflow-y: hidden;\n      scroll-snap-type: x mandatory;\n      scrollbar-width: none;\n      -webkit-overflow-scrolling: touch;\n      cursor: grab;\n      user-select: none;\n    }\n\n    .xp-interior-options::-webkit-scrollbar {\n      display: none;\n    }\n\n    .xp-interior-options.is-dragging {\n      cursor: grabbing;\n    }\n\n    .xp-interior-option {\n      height: 54px;\n      min-width: 40px;\n      scroll-snap-align: center;\n    }\n\n    .xp-interior-dot,\n    .xp-interior-dot img {\n      width: 40px;\n      height: 40px;\n    }\n\n    .xp-interior-text {\n      font-size: 12px;\n      padding-right: 8px;\n    }\n\n    .xp-interior-option.active {\n      height: 54px;\n      padding: 7px 10px;\n      gap: 8px;\n      background: #f7f7f7;\n      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);\n    }\n\n    .xp-interior-option.active .xp-interior-dot {\n      width: 40px;\n      height: 40px;\n      background: transparent;\n    }\n\n    .xp-interior-option.active .xp-interior-dot img {\n      width: 40px;\n      height: 40px;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-interior-title {\n      margin-bottom: 145px;\n      padding: 0 28px;\n      font-size: 30px;\n    }\n\n    .xp-interior-stage {\n      width: calc(100% - 50px);\n      height: 210px;\n    }\n\n    .xp-interior-options {\n      gap: 38px;\n      padding-left: 40px;\n      padding-right: 40px;\n    }\n  }\n\n  @media (max-width: 390px) {\n    .xp-interior-title {\n      padding: 0 26px;\n      font-size: 29px;\n    }\n\n    .xp-interior-stage {\n      width: calc(100% - 50px);\n      height: 210px;\n    }\n\n    .xp-interior-options {\n      gap: 36px;\n      padding-left: 40px;\n      padding-right: 40px;\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    const section = document.getElementById(\"xpInteriorAtmospheres\");\n    if (!section) return;\n\n    const images = Array.from(section.querySelectorAll(\".xp-interior-image\"));\n    const buttons = Array.from(section.querySelectorAll(\".xp-interior-option\"));\n    const options = section.querySelector(\"#xpInteriorOptions\");\n    const colorName = section.querySelector(\"#xpInteriorColorName\");\n\n    let isDown = false;\n    let startX = 0;\n    let startScrollLeft = 0;\n    let hasMoved = false;\n\n    function setInterior(index) {\n      images.forEach(function (image, imageIndex) {\n        image.classList.toggle(\"active\", imageIndex === index);\n      });\n\n      buttons.forEach(function (button, buttonIndex) {\n        button.classList.toggle(\"active\", buttonIndex === index);\n      });\n\n      colorName.textContent = buttons[index].dataset.name;\n\n      if (window.innerWidth <= 750) {\n        buttons[index].scrollIntoView({\n          behavior: \"smooth\",\n          inline: \"center\",\n          block: \"nearest\"\n        });\n      }\n    }\n\n    buttons.forEach(function (button) {\n      button.addEventListener(\"click\", function (event) {\n        if (hasMoved) {\n          event.preventDefault();\n          return;\n        }\n\n        setInterior(Number(this.dataset.index));\n      });\n    });\n\n    options.addEventListener(\"pointerdown\", function (event) {\n      if (window.innerWidth > 750) return;\n\n      isDown = true;\n      hasMoved = false;\n      startX = event.clientX;\n      startScrollLeft = options.scrollLeft;\n      options.classList.add(\"is-dragging\");\n\n      if (options.setPointerCapture) {\n        options.setPointerCapture(event.pointerId);\n      }\n    });\n\n    options.addEventListener(\"pointermove\", function (event) {\n      if (!isDown) return;\n\n      const moveX = event.clientX - startX;\n\n      if (Math.abs(moveX) > 5) {\n        hasMoved = true;\n      }\n\n      options.scrollLeft = startScrollLeft - moveX;\n    });\n\n    options.addEventListener(\"pointerup\", function (event) {\n      isDown = false;\n      options.classList.remove(\"is-dragging\");\n\n      try {\n        options.releasePointerCapture(event.pointerId);\n      } catch (error) {}\n    });\n\n    options.addEventListener(\"pointercancel\", function () {\n      isDown = false;\n      options.classList.remove(\"is-dragging\");\n    });\n  })();\n<\/script>\n\n\n\n\n<section class=\"xp-g9-specs-section\" id=\"xpG9Specs\">\n  <div class=\"xp-g9-specs-container\">\n\n    <h2 class=\"xp-g9-specs-title\">NEW XPENG G9<\/h2>\n\n    <div class=\"xp-g9-specs-tabs\" id=\"xpG9SpecsTabs\"><\/div>\n\n    <div class=\"xp-g9-specs-content\">\n\n      <div class=\"xp-g9-specs-car\">\n        <img decoding=\"async\" id=\"xpG9SpecsImage\" src=\"\" alt=\"NEW XPENG G9\">\n      <\/div>\n\n      <div class=\"xp-g9-specs-grid\" id=\"xpG9SpecsGrid\"><\/div>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n \n\n  .xp-g9-specs-section {\n    width: 100%;\n    background: #f8f8f8;\n    padding: 44px 20px 78px;\n    overflow: hidden;\n    font-family: basis_grotesque_regular;\n  }\n\n  .xp-g9-specs-container {\n    width: 100%;\n    max-width: 1260px;\n    margin: 0 auto;\n  }\n\n  .xp-g9-specs-title {\n    margin: 0;\n    color: #000;\n    text-align: center;\n    font-size: 36px;\n    line-height: 1.25;\n    font-weight: 400;\n    letter-spacing: 0.02em;\n  }\n\n  .xp-g9-specs-tabs {\n    width: 100%;\n    max-width: 595px;\n    margin: 34px auto 0;\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    border-bottom: 1px solid #dedede;\n  }\n\n  .xp-g9-specs-tab {\n    position: relative;\n    height: 38px;\n    border: 0;\n    background: transparent;\n    color: #606772;\n    font-size: 16px;\n    font-weight: 400;\n    cursor: pointer;\n    padding: 0 10px;\n    white-space: nowrap;\n    transition: color 0.25s ease;\n  }\n\n  .xp-g9-specs-tab.active {\n    color: #000;\n  }\n\n  .xp-g9-specs-tab.active::after {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -1px;\n    height: 1px;\n    background: #8cc63f;\n  }\n\n  .xp-g9-specs-content {\n    display: grid;\n    grid-template-columns: 52% 48%;\n    align-items: center;\n    gap: 34px;\n    margin-top: 56px;\n  }\n\n  .xp-g9-specs-car {\n    width: 100%;\n    min-height: 430px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .xp-g9-specs-car img {\n    width: 100%;\n    max-width: 640px;\n    height: auto;\n    display: block;\n    object-fit: contain;\n    opacity: 1;\n    transition: opacity 0.25s ease, transform 0.25s ease;\n  }\n\n  .xp-g9-specs-car img.is-changing {\n    opacity: 0;\n    transform: translateY(6px);\n  }\n\n  .xp-g9-specs-grid {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    column-gap: 70px;\n    row-gap: 33px;\n  }\n\n  .xp-g9-spec-item span {\n    display: block;\n    margin-bottom: 10px;\n    color: #536070;\n    font-size: 13px;\n    line-height: 1.35;\n    font-weight: 400;\n  }\n\n  .xp-g9-spec-item strong {\n    display: block;\n    color: #071323;\n    font-size: 15px;\n    line-height: 1.45;\n    font-weight: 400;\n  }\n\n  @media (max-width: 1200px) {\n    .xp-g9-specs-content {\n      grid-template-columns: 50% 50%;\n      gap: 24px;\n    }\n\n    .xp-g9-specs-grid {\n      column-gap: 45px;\n    }\n\n    .xp-g9-specs-car img {\n      max-width: 560px;\n    }\n  }\n\n  @media (max-width: 900px) {\n    .xp-g9-specs-section {\n      padding: 32px 18px 48px;\n      background: #fff;\n    }\n\n    .xp-g9-specs-title {\n      text-align: left;\n      font-size: 27px;\n      line-height: 1.25;\n      font-weight: 700;\n      letter-spacing: 0;\n    }\n\n    .xp-g9-specs-tabs {\n      max-width: none;\n      margin: 28px 0 0;\n      display: flex;\n      overflow-x: auto;\n      overflow-y: hidden;\n      border-bottom: 1px solid #e4e4e4;\n      scrollbar-width: none;\n      -webkit-overflow-scrolling: touch;\n    }\n\n    .xp-g9-specs-tabs::-webkit-scrollbar {\n      display: none;\n    }\n\n    .xp-g9-specs-tab {\n      flex: 0 0 auto;\n      min-width: 173px;\n      height: 36px;\n      padding: 0 20px;\n      text-align: center;\n      font-size: 14px;\n    }\n\n    .xp-g9-specs-content {\n      display: block;\n      margin-top: 62px;\n    }\n\n    .xp-g9-specs-car {\n      min-height: auto;\n      height: 230px;\n      margin-bottom: 42px;\n    }\n\n    .xp-g9-specs-car img {\n      max-width: 390px;\n      margin: 0 auto;\n    }\n\n    .xp-g9-specs-grid {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      column-gap: 24px;\n      row-gap: 28px;\n    }\n\n    .xp-g9-spec-item span {\n      margin-bottom: 8px;\n      color: #000;\n      font-size: 11px;\n      line-height: 1.35;\n    }\n\n    .xp-g9-spec-item strong {\n      color: #000;\n      font-size: 15px;\n      line-height: 1.35;\n      font-weight: 400;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-g9-specs-section {\n      padding: 32px 18px 44px;\n    }\n\n    .xp-g9-specs-car img {\n      max-width: 375px;\n    }\n  }\n\n  @media (max-width: 390px) {\n    .xp-g9-specs-car img {\n      max-width: 350px;\n    }\n\n    .xp-g9-specs-grid {\n      column-gap: 18px;\n    }\n\n    .xp-g9-spec-item strong {\n      font-size: 14px;\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    const specsData = [\n      {\n        id: \"rwd-standard\",\n        tab: \"RWD Standard Range\",\n        image: \"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-07\/1808d73694444850891ebaea23d2ad74.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\",\n        specs: [\n          { label: \"Wheelbase (mm)\", value: \"2998\" },\n          { label: \"Length x Width x Height (mm)\", value: \"4891*1937*1680\" },\n          { label: \"Number of seats\", value: \"5\" },\n          { label: \"Acceleration 0 to 100 km\/h (s)\", value: \"6.4\" },\n          { label: \"Curb weight (kg)\", value: \"2235\" },\n          { label: \"Powertrain\", value: \"RWD\" },\n          { label: \"Boot space (L)\", value: \"660 \/ 1,576 (rear seat folded down)\" },\n          { label: \"Screens(inch)\", value: \"10.25&quot; Digital Instrument Panel + 14.96&quot; Central Control Screen + 14.96&quot; Passenger Entertainment Screen\" },\n          { label: \"DC charging (kW)\", value: \"445 (10 to 80% in 12 minutes)\" },\n          { label: \"WLTP range (km)\u00b9\", value: \"502\" }\n        ]\n      },\n      {\n        id: \"rwd-long\",\n        tab: \"RWD Long Range\",\n        image: \"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-07\/1808d73694444850891ebaea23d2ad74.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\",\n        specs: [\n          { label: \"Wheelbase (mm)\", value: \"2998\" },\n          { label: \"Length x Width x Height (mm)\", value: \"4891*1937*1680\" },\n          { label: \"Number of seats\", value: \"5\" },\n          { label: \"Acceleration 0 to 100 km\/h (s)\", value: \"6.4\" },\n          { label: \"Curb weight (kg)\", value: \"2315 (with towbar) \/ 2290 (without towbar)\" },\n          { label: \"Powertrain\", value: \"RWD\" },\n          { label: \"Boot space (L)\", value: \"660 \/ 1,576 (rear seat folded down)\" },\n          { label: \"Screens(inch)\", value: \"10.25&quot; Driver Screen + 14.96&quot; Central Infotainment Screen + 14.96&quot; Passenger Entertainment Screen\" },\n          { label: \"DC charging (kW)\", value: \"525\" },\n          { label: \"WLTP range (km)\u00b9\", value: \"585\" }\n        ]\n      },\n      {\n        id: \"awd-performance\",\n        tab: \"AWD Performance\",\n        image: \"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-07\/1808d73694444850891ebaea23d2ad74.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\",\n        specs: [\n          { label: \"Wheelbase (mm)\", value: \"2998\" },\n          { label: \"Length x Width x Height (mm)\", value: \"4891*1937*1670\" },\n          { label: \"Number of seats\", value: \"5\" },\n          { label: \"Acceleration 0 to 100 km\/h (s)\", value: \"4.2\" },\n          { label: \"Curb weight (kg)\", value: \"2420 (with towbar) \/ 2395 (without towbar)\" },\n          { label: \"Powertrain\", value: \"AWD\" },\n          { label: \"Boot space (L)\", value: \"660 \/ 1,576 (rear seat folded down)\" },\n          { label: \"Screens(inch)\", value: \"10.25&quot; Driver Screen + 14.96&quot; Central Infotainment Screen + 14.96&quot; Passenger Entertainment Screen\" },\n          { label: \"DC charging (kW)\", value: \"525\" },\n          { label: \"WLTP range (km)\u00b9\", value: \"540\" }\n        ]\n      }\n    ];\n\n    const root = document.getElementById(\"xpG9Specs\");\n    if (!root) return;\n\n    const tabsWrap = root.querySelector(\"#xpG9SpecsTabs\");\n    const grid = root.querySelector(\"#xpG9SpecsGrid\");\n    const image = root.querySelector(\"#xpG9SpecsImage\");\n\n    let activeIndex = 0;\n\n    function renderTabs() {\n      tabsWrap.innerHTML = specsData.map(function (item, index) {\n        return `\n          <button\n            class=\"xp-g9-specs-tab ${index === activeIndex ? \"active\" : \"\"}\"\n            type=\"button\"\n            data-index=\"${index}\"\n          >\n            ${item.tab}\n          <\/button>\n        `;\n      }).join(\"\");\n    }\n\n    function renderSpecs(index) {\n      const data = specsData[index];\n\n      image.classList.add(\"is-changing\");\n\n      setTimeout(function () {\n        image.src = data.image;\n        image.alt = \"NEW XPENG G9 - \" + data.tab;\n        image.classList.remove(\"is-changing\");\n      }, 120);\n\n      grid.innerHTML = data.specs.map(function (spec) {\n        return `\n          <div class=\"xp-g9-spec-item\">\n            <span>${spec.label}<\/span>\n            <strong>${spec.value}<\/strong>\n          <\/div>\n        `;\n      }).join(\"\");\n    }\n\n    function setActiveTab(index) {\n      activeIndex = index;\n\n      tabsWrap.querySelectorAll(\".xp-g9-specs-tab\").forEach(function (tab, tabIndex) {\n        tab.classList.toggle(\"active\", tabIndex === activeIndex);\n      });\n\n      renderSpecs(activeIndex);\n    }\n\n    tabsWrap.addEventListener(\"click\", function (event) {\n      const tab = event.target.closest(\".xp-g9-specs-tab\");\n      if (!tab) return;\n\n      setActiveTab(Number(tab.dataset.index));\n\n      if (window.innerWidth <= 900) {\n        tab.scrollIntoView({\n          behavior: \"smooth\",\n          inline: \"center\",\n          block: \"nearest\"\n        });\n      }\n    });\n\n    renderTabs();\n    renderSpecs(activeIndex);\n  })();\n<\/script>\n\n\n\n<section class=\"xp-storage-banner\">\n  <picture class=\"xp-storage-picture\">\n    <!-- Mobile image -->\n    <source\n      media=\"(max-width: 750px)\"\n      srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/098e6b4bcec547d4b4575daa62f15e9e.jpg\"\n    >\n\n    <!-- Desktop image -->\n    <img decoding=\"async\"\n      class=\"xp-storage-img\"\n      src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/406adc536d7042d6b10d6990c3095ca4.png\"\n      alt=\"Refined materials, immersive comfort\"\n    >\n  <\/picture>\n\n  <div class=\"xp-storage-content\">\n    <h2>Refined materials, immersive comfort<\/h2>\n    <p>Premium textures, flowing surfaces and lounge-inspired space for every trip.<\/p>\n  <\/div>\n<\/section>\n\n<style>\n \n\n  .xp-storage-banner {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    background: #ffffff;\n    font-family: basis_grotesque_regular;\n  }\n\n  .xp-storage-picture {\n    display: block;\n    width: 100%;\n  }\n\n  .xp-storage-img {\n    width: 100%;\n    height: 790px;\n    display: block;\n    object-fit: cover;\n    object-position: center;\n  }\n\n  .xp-storage-content {\n    position: absolute;\n    z-index: 2;\n    top: 96px;\n    left: 50%;\n    width: 90%;\n    max-width: 1100px;\n    transform: translateX(-50%);\n    text-align: center;\n    color: #ffffff;\n  }\n\n  .xp-storage-content h2 {\n    margin: 0;\n    color: #ffffff;\n    font-size: 36px;\n    line-height: 1.25;\n    font-weight: 400;\n  }\n\n  .xp-storage-content p {\n    margin: 14px auto 0;\n    max-width: 760px;\n    color: #ffffff;\n    font-size: 16px;\n    line-height: 1.55;\n    font-weight: 400;\n  }\n\n  @media (max-width: 1200px) {\n    .xp-storage-img {\n      height: 660px;\n    }\n\n    .xp-storage-content {\n      top: 82px;\n    }\n\n    .xp-storage-content h2 {\n      font-size: 32px;\n    }\n\n    .xp-storage-content p {\n      font-size: 15px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-storage-banner {\n      display: flex;\n      flex-direction: column;\n      background: #ffffff;\n      min-height: auto;\n    }\n\n    .xp-storage-picture {\n      width: 100%;\n      order: 1;\n    }\n\n    .xp-storage-img {\n      width: 100%;\n      height: auto;\n      min-height: 0;\n      display: block;\n      object-fit: contain;\n      object-position: center top;\n    }\n\n    .xp-storage-content {\n      position: static;\n      order: 2;\n      width: 100%;\n      max-width: none;\n      transform: none;\n      text-align: left;\n      background: #ffffff;\n      color: #000000;\n      padding: 31px 28px 30px;\n    }\n\n    .xp-storage-content h2 {\n      margin: 0;\n      max-width: 335px;\n      color: #000000;\n      font-size: 28px;\n      line-height: 1.42;\n      font-weight: 400;\n      letter-spacing: -0.02em;\n    }\n\n    .xp-storage-content p {\n      margin: 24px 0 0;\n      max-width: 335px;\n      color: #58616f;\n      font-size: 16px;\n      line-height: 1.55;\n      font-weight: 400;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-storage-content {\n      padding: 31px 28px 30px;\n    }\n\n    .xp-storage-content h2 {\n      font-size: 28px;\n      line-height: 1.42;\n    }\n\n    .xp-storage-content p {\n      font-size: 16px;\n      line-height: 1.55;\n      margin-top: 24px;\n    }\n  }\n\n  @media (max-width: 380px) {\n    .xp-storage-content {\n      padding-left: 24px;\n      padding-right: 24px;\n    }\n\n    .xp-storage-content h2 {\n      font-size: 26px;\n    }\n\n    .xp-storage-content p {\n      font-size: 15px;\n    }\n  }\n<\/style>\n\n\n\n\n\n\n\n\n\n<section class=\"xp-carousel-pic-section xp-g9-rear-lounge-carousel\">\n  <div class=\"xp-carousel-pic-wrap\">\n\n    <div class=\"xp-carousel-pic-media\">\n      <div class=\"xp-carousel-pic-track\">\n\n        <!-- Slide 1 -->\n        <div class=\"xp-carousel-pic-slide active\">\n          <picture>\n            <source\n              media=\"(min-width: 1920px)\"\n              srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/aff09b6a9b98496cad0b05292c979c01.png?x-oss-process=image%2Fresize%2Cw_3840%2Fquality%2Cq_90%2Finterlace%2C1\"\n            >\n            <source\n              media=\"(max-width: 750px)\"\n              srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/7a3c5af0a3464414ba8d3d09f27ac225.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n            >\n            <img decoding=\"async\"\n              src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/aff09b6a9b98496cad0b05292c979c01.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n              alt=\"Rear lounge comfort\"\n            >\n          <\/picture>\n        <\/div>\n\n        <!-- Slide 2 -->\n        <div class=\"xp-carousel-pic-slide\">\n          <picture>\n            <source\n              media=\"(min-width: 1920px)\"\n              srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/18cf09cf4205477bbae86b43b10ae93d.png?x-oss-process=image%2Fresize%2Cw_3840%2Fquality%2Cq_90%2Finterlace%2C1\"\n            >\n            <source\n              media=\"(max-width: 750px)\"\n              srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/1bf1744a7ff54eb9beeb56de81129e67.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n            >\n            <img decoding=\"async\"\n              src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/18cf09cf4205477bbae86b43b10ae93d.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n              alt=\"Flexible storage, thoughtful design\"\n            >\n          <\/picture>\n        <\/div>\n\n      <\/div>\n\n      <button class=\"xp-carousel-pic-arrow xp-carousel-pic-prev\" type=\"button\" aria-label=\"Previous slide\">\n        <span><\/span>\n      <\/button>\n\n      <button class=\"xp-carousel-pic-arrow xp-carousel-pic-next\" type=\"button\" aria-label=\"Next slide\">\n        <span><\/span>\n      <\/button>\n    <\/div>\n\n    <div class=\"xp-carousel-pic-mobile-content\">\n      <h3>Rear lounge comfort<\/h3>\n      <p>The rear seats recline for a lounge feel.<\/p>\n    <\/div>\n\n    <div class=\"xp-carousel-pic-indicators\">\n      <button class=\"xp-carousel-pic-indicator active\" type=\"button\" data-index=\"0\">\n        Rear lounge comfort\n      <\/button>\n      <button class=\"xp-carousel-pic-indicator\" type=\"button\" data-index=\"1\">\n        Flexible storage, thoughtful design\n      <\/button>\n    <\/div>\n\n    <div class=\"xp-carousel-pic-content\">\n      The rear seats recline for a lounge feel.\n    <\/div>\n\n    <div class=\"xp-carousel-pic-dots\">\n      <button class=\"xp-carousel-pic-dot active\" type=\"button\" data-index=\"0\" aria-label=\"Slide 1\"><\/button>\n      <button class=\"xp-carousel-pic-dot\" type=\"button\" data-index=\"1\" aria-label=\"Slide 2\"><\/button>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n \n\n  .xp-carousel-pic-section {\n    width: 100%;\n    background: #ffffff;\n    padding: 58px 0 42px;\n    overflow: hidden;\n    font-family: basis_grotesque_regular;\n  }\n\n  .xp-carousel-pic-wrap {\n    width: 100%;\n    margin: 0 auto;\n  }\n\n  .xp-carousel-pic-media {\n    position: relative;\n    width: min(78vw, 1015px);\n    height: 571px;\n    margin: 0 auto;\n    overflow: hidden;\n    border-radius: 3px;\n    background: #f5f5f5;\n  }\n\n  .xp-carousel-pic-track {\n    width: 100%;\n    height: 100%;\n    position: relative;\n  }\n\n  .xp-carousel-pic-slide {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    visibility: hidden;\n    transform: scale(1.012);\n    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.65s ease;\n  }\n\n  .xp-carousel-pic-slide.active {\n    opacity: 1;\n    visibility: visible;\n    transform: scale(1);\n    z-index: 2;\n  }\n\n  .xp-carousel-pic-slide picture,\n  .xp-carousel-pic-slide img {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n\n  .xp-carousel-pic-slide img {\n    object-fit: cover;\n    object-position: center;\n  }\n\n  .xp-carousel-pic-arrow {\n    position: absolute;\n    top: 50%;\n    z-index: 5;\n    width: 42px;\n    height: 42px;\n    border: 0;\n    border-radius: 50%;\n    background: transparent;\n    cursor: pointer;\n    transform: translateY(-50%);\n    display: grid;\n    place-items: center;\n    transition: opacity 0.25s ease;\n  }\n\n  .xp-carousel-pic-arrow:disabled {\n    opacity: 0.28;\n    cursor: default;\n  }\n\n  .xp-carousel-pic-prev {\n    left: 18px;\n  }\n\n  .xp-carousel-pic-next {\n    right: 18px;\n  }\n\n  .xp-carousel-pic-arrow span {\n    width: 15px;\n    height: 15px;\n    display: block;\n    border-top: 2px solid #8f8f8f;\n    border-right: 2px solid #8f8f8f;\n  }\n\n  .xp-carousel-pic-prev span {\n    transform: rotate(-135deg);\n    margin-left: 5px;\n  }\n\n  .xp-carousel-pic-next span {\n    transform: rotate(45deg);\n    margin-right: 5px;\n  }\n\n  .xp-carousel-pic-indicators {\n    width: min(74vw, 970px);\n    margin: 24px auto 0;\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    border-bottom: 1px solid #dedede;\n  }\n\n  .xp-carousel-pic-indicator {\n    position: relative;\n    min-height: 42px;\n    border: 0;\n    background: transparent;\n    padding: 0 20px 14px;\n    color: #9b9b9b;\n    font-size: 14px;\n    line-height: 1.3;\n    font-weight: 600;\n    font-family: inherit;\n    text-align: center;\n    cursor: pointer;\n    transition: color 0.25s ease;\n  }\n\n  .xp-carousel-pic-indicator.active {\n    color: #000000;\n  }\n\n  .xp-carousel-pic-indicator::after {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    bottom: -1px;\n    width: 100%;\n    height: 2px;\n    background: #85bf22;\n    transform: scaleX(0);\n    transform-origin: center;\n    transition: transform 0.28s ease;\n  }\n\n  .xp-carousel-pic-indicator.active::after {\n    transform: scaleX(1);\n  }\n\n  .xp-carousel-pic-content {\n    width: min(74vw, 970px);\n    margin: 19px auto 0;\n    color: #8d8d96;\n    font-size: 15px;\n    line-height: 1.6;\n    letter-spacing: 0.3px;\n    text-align: center;\n  }\n\n  .xp-carousel-pic-mobile-content,\n  .xp-carousel-pic-dots {\n    display: none;\n  }\n\n  @media (max-width: 1200px) {\n    .xp-carousel-pic-media {\n      width: 82vw;\n      height: 51vw;\n      max-height: 571px;\n    }\n  }\n\n  @media (max-width: 768px) {\n    .xp-carousel-pic-section {\n      padding-bottom: 10vh;\n      background: #ffffff;\n    }\n\n    .xp-carousel-pic-media {\n      width: 100%;\n      height: auto;\n      aspect-ratio: 375 \/ 500;\n      border-radius: 0;\n    }\n\n    .xp-carousel-pic-slide img {\n      object-fit: cover;\n      object-position: center top;\n    }\n\n    .xp-carousel-pic-arrow,\n    .xp-carousel-pic-indicators,\n    .xp-carousel-pic-content {\n      display: none;\n    }\n\n    .xp-carousel-pic-mobile-content {\n      display: block;\n      padding: 27px 20px 68px;\n      background: #ffffff;\n    }\n\n    .xp-carousel-pic-mobile-content h3 {\n      max-width: 320px;\n      margin: 0 0 18px;\n      color: #000000;\n      font-size: 24px;\n      line-height: 1.38;\n      font-weight: 400;\n    }\n\n    .xp-carousel-pic-mobile-content p {\n      max-width: 315px;\n      margin: 0;\n      color: #6e6e6e;\n      font-size: 14px;\n      line-height: 1.65;\n      font-weight: 400;\n    }\n\n    .xp-carousel-pic-dots {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding-left: 20px;\n      margin-top: -33px;\n      position: relative;\n      z-index: 5;\n    }\n\n    .xp-carousel-pic-dot {\n      width: 22px;\n      height: 2px;\n      border: 0;\n      padding: 0;\n      background: #eeeeee;\n      cursor: pointer;\n      transition: background 0.25s ease;\n    }\n\n    .xp-carousel-pic-dot.active {\n      background: #85bf22;\n    }\n  }\n\n  @media (max-width: 390px) {\n    .xp-carousel-pic-mobile-content {\n      padding: 25px 18px 66px;\n    }\n\n    .xp-carousel-pic-mobile-content h3 {\n      font-size: 22px;\n    }\n\n    .xp-carousel-pic-mobile-content p {\n      font-size: 13px;\n    }\n\n    .xp-carousel-pic-dots {\n      padding-left: 18px;\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    const section = document.querySelector(\".xp-g9-rear-lounge-carousel\");\n    if (!section) return;\n\n    const slides = Array.from(section.querySelectorAll(\".xp-carousel-pic-slide\"));\n    const indicators = Array.from(section.querySelectorAll(\".xp-carousel-pic-indicator\"));\n    const dots = Array.from(section.querySelectorAll(\".xp-carousel-pic-dot\"));\n    const prevBtn = section.querySelector(\".xp-carousel-pic-prev\");\n    const nextBtn = section.querySelector(\".xp-carousel-pic-next\");\n    const mobileTitle = section.querySelector(\".xp-carousel-pic-mobile-content h3\");\n    const mobileText = section.querySelector(\".xp-carousel-pic-mobile-content p\");\n    const desktopText = section.querySelector(\".xp-carousel-pic-content\");\n\n    const data = [\n      {\n        title: \"Rear lounge comfort\",\n        text: \"The rear seats recline for a lounge feel.\"\n      },\n      {\n        title: \"Flexible storage, thoughtful design\",\n        text: \"Flexible storage solutions make every journey easier and more practical.\"\n      }\n    ];\n\n    let current = 0;\n    let touchStartX = 0;\n    let touchEndX = 0;\n    let pointerDown = false;\n    let pointerStartX = 0;\n    let pointerEndX = 0;\n\n    function setActive(index) {\n      current = Math.max(0, Math.min(index, slides.length - 1));\n\n      slides.forEach(function (slide, i) {\n        slide.classList.toggle(\"active\", i === current);\n      });\n\n      indicators.forEach(function (item, i) {\n        item.classList.toggle(\"active\", i === current);\n      });\n\n      dots.forEach(function (dot, i) {\n        dot.classList.toggle(\"active\", i === current);\n      });\n\n      if (mobileTitle) mobileTitle.textContent = data[current].title;\n      if (mobileText) mobileText.textContent = data[current].text;\n      if (desktopText) desktopText.textContent = data[current].text;\n\n      if (prevBtn) prevBtn.disabled = current === 0;\n      if (nextBtn) nextBtn.disabled = current === slides.length - 1;\n    }\n\n    indicators.forEach(function (indicator) {\n      indicator.addEventListener(\"click\", function () {\n        setActive(Number(this.dataset.index));\n      });\n    });\n\n    dots.forEach(function (dot) {\n      dot.addEventListener(\"click\", function () {\n        setActive(Number(this.dataset.index));\n      });\n    });\n\n    if (prevBtn) {\n      prevBtn.addEventListener(\"click\", function () {\n        setActive(current - 1);\n      });\n    }\n\n    if (nextBtn) {\n      nextBtn.addEventListener(\"click\", function () {\n        setActive(current + 1);\n      });\n    }\n\n    section.addEventListener(\"touchstart\", function (e) {\n      touchStartX = e.changedTouches[0].screenX;\n    }, { passive: true });\n\n    section.addEventListener(\"touchend\", function (e) {\n      touchEndX = e.changedTouches[0].screenX;\n      const distance = touchStartX - touchEndX;\n\n      if (Math.abs(distance) > 45) {\n        if (distance > 0) {\n          setActive(current + 1);\n        } else {\n          setActive(current - 1);\n        }\n      }\n    }, { passive: true });\n\n    section.addEventListener(\"pointerdown\", function (e) {\n      pointerDown = true;\n      pointerStartX = e.clientX;\n    });\n\n    section.addEventListener(\"pointerup\", function (e) {\n      if (!pointerDown) return;\n\n      pointerEndX = e.clientX;\n      pointerDown = false;\n\n      const distance = pointerStartX - pointerEndX;\n\n      if (Math.abs(distance) > 55) {\n        if (distance > 0) {\n          setActive(current + 1);\n        } else {\n          setActive(current - 1);\n        }\n      }\n    });\n\n    setActive(0);\n  })();\n<\/script>\n\n\n\n\n\n<section class=\"xp-comfort-carousel\" id=\"xpComfortCarousel\">\n  <div class=\"xp-comfort-slider\">\n\n    <div class=\"xp-comfort-track\">\n\n      <!-- Slide 1 -->\n      <article class=\"xp-comfort-slide active\">\n        <picture>\n          <source\n            media=\"(max-width: 750px)\"\n            srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/833c9406f608407cb4b51fef2530fa24.png?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n          >\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/833c9406f608407cb4b51fef2530fa24.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n            alt=\"Healthy comfort, premium craftsmanship\"\n          >\n        <\/picture>\n\n        <div class=\"xp-comfort-caption\">\n          <h3>Healthy comfort, premium craftsmanship<\/h3>\n          <p>\n            Designed to OEKO-TEX standards, the Nappa leather front seats offer 12-way power adjustment,\n            heating, ventilation and a 10-point massage system for unparalleled comfort on long journeys.\n          <\/p>\n        <\/div>\n      <\/article>\n\n      <!-- Slide 2 -->\n      <article class=\"xp-comfort-slide\">\n        <picture>\n          <source\n            media=\"(max-width: 750px)\"\n            srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/06b3a7c13a754966bcc7fe4984ac565d.png?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n          >\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/06b3a7c13a754966bcc7fe4984ac565d.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n            alt=\"Fully adjustable second row\"\n          >\n        <\/picture>\n\n        <div class=\"xp-comfort-caption\">\n          <h3>Fully adjustable second row<\/h3>\n          <p>\n            The second-row seats recline electrically from 27\u00b0 to 37\u00b0, with integrated heating,\n            ventilation and massage functions \u2014 turning every journey into a first-class experience.\n          <\/p>\n        <\/div>\n      <\/article>\n\n    <\/div>\n\n    <button class=\"xp-comfort-arrow xp-comfort-prev\" type=\"button\" aria-label=\"Previous slide\">\n      <span><\/span>\n    <\/button>\n\n    <button class=\"xp-comfort-arrow xp-comfort-next\" type=\"button\" aria-label=\"Next slide\">\n      <span><\/span>\n    <\/button>\n\n  <\/div>\n\n  <!-- Mobile text under image -->\n  <div class=\"xp-comfort-mobile-content\">\n    <h3>Healthy comfort, premium craftsmanship<\/h3>\n    <p>\n      Designed to OEKO-TEX standards, the Nappa leather front seats offer 12-way power adjustment,\n      heating, ventilation and a 10-point massage system for unparalleled comfort on long journeys.\n    <\/p>\n  <\/div>\n\n  <div class=\"xp-comfort-dots\">\n    <button class=\"xp-comfort-dot active\" type=\"button\" data-index=\"0\" aria-label=\"Slide 1\"><\/button>\n    <button class=\"xp-comfort-dot\" type=\"button\" data-index=\"1\" aria-label=\"Slide 2\"><\/button>\n  <\/div>\n<\/section>\n\n<style>\n \n\n  .xp-comfort-carousel {\n    width: 100%;\n    background: #ffffff;\n    padding: 76px 0 70px;\n    overflow: hidden;\n    font-family: basis_grotesque_regular;\n  }\n\n  .xp-comfort-slider {\n    position: relative;\n    width: min(86vw, 1270px);\n    height: 640px;\n    margin: 0 auto;\n    overflow: visible;\n    cursor: grab;\n    touch-action: pan-y;\n    user-select: none;\n  }\n\n  .xp-comfort-slider.is-dragging {\n    cursor: grabbing;\n  }\n\n  .xp-comfort-track {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border-radius: 3px;\n    background: #f5f5f5;\n  }\n\n  .xp-comfort-slide {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    visibility: hidden;\n    transform: scale(1.012);\n    transition:\n      opacity 0.4s ease,\n      visibility 0.4s ease,\n      transform 0.65s ease;\n  }\n\n  .xp-comfort-slide.active {\n    opacity: 1;\n    visibility: visible;\n    transform: scale(1);\n    z-index: 2;\n  }\n\n  .xp-comfort-slide picture,\n  .xp-comfort-slide img {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n\n  .xp-comfort-slide img {\n    object-fit: cover;\n    object-position: center;\n    pointer-events: none;\n    user-select: none;\n    -webkit-user-drag: none;\n  }\n\n  .xp-comfort-caption {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 3;\n    padding: 58px 68px 36px;\n    background: linear-gradient(\n      to top,\n      rgba(0, 0, 0, 0.66),\n      rgba(0, 0, 0, 0.28),\n      rgba(0, 0, 0, 0)\n    );\n    color: #ffffff;\n    pointer-events: none;\n  }\n\n  .xp-comfort-caption h3 {\n    max-width: 820px;\n    margin: 0 0 12px;\n    color: #ffffff;\n    font-size: 16px;\n    line-height: 1.35;\n    font-weight: 700;\n  }\n\n  .xp-comfort-caption p {\n    max-width: 1180px;\n    margin: 0;\n    color: rgba(255, 255, 255, 0.86);\n    font-size: 13px;\n    line-height: 1.55;\n    font-weight: 400;\n  }\n\n  .xp-comfort-arrow {\n    position: absolute;\n    top: 50%;\n    z-index: 8;\n    width: 44px;\n    height: 44px;\n    border: 0;\n    border-radius: 50%;\n    background: transparent;\n    cursor: pointer;\n    transform: translateY(-50%);\n    display: grid;\n    place-items: center;\n    transition: opacity 0.25s ease;\n  }\n\n  .xp-comfort-arrow:disabled {\n    opacity: 0.28;\n    cursor: default;\n  }\n\n  .xp-comfort-prev {\n    left: -54px;\n  }\n\n  .xp-comfort-next {\n    right: -54px;\n  }\n\n  .xp-comfort-arrow span {\n    width: 15px;\n    height: 15px;\n    display: block;\n    border-top: 2px solid #8c8c8c;\n    border-right: 2px solid #8c8c8c;\n  }\n\n  .xp-comfort-prev span {\n    transform: rotate(-135deg);\n    margin-left: 5px;\n  }\n\n  .xp-comfort-next span {\n    transform: rotate(45deg);\n    margin-right: 5px;\n  }\n\n  .xp-comfort-mobile-content,\n  .xp-comfort-dots {\n    display: none;\n  }\n\n  @media (max-width: 1200px) {\n    .xp-comfort-slider {\n      width: 84vw;\n      height: 52vw;\n      max-height: 640px;\n    }\n\n    .xp-comfort-prev {\n      left: -46px;\n    }\n\n    .xp-comfort-next {\n      right: -46px;\n    }\n  }\n\n  @media (max-width: 900px) {\n    .xp-comfort-carousel {\n      padding: 58px 0 54px;\n    }\n\n    .xp-comfort-slider {\n      width: calc(100% - 44px);\n      height: 58vw;\n    }\n\n    .xp-comfort-prev {\n      left: 12px;\n    }\n\n    .xp-comfort-next {\n      right: 12px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-comfort-carousel {\n      padding: 100px 0 58px;\n      background: #f7f7f7;\n    }\n\n    .xp-comfort-slider {\n      width: calc(100% - 44px);\n      height: auto;\n      margin: 0 auto;\n      overflow: hidden;\n      border-radius: 2px;\n      background: transparent;\n    }\n\n    .xp-comfort-track {\n      height: auto;\n      aspect-ratio: 361 \/ 271;\n      border-radius: 2px;\n      overflow: hidden;\n    }\n\n    .xp-comfort-slide img {\n      object-fit: cover;\n      object-position: center;\n    }\n\n    .xp-comfort-caption,\n    .xp-comfort-arrow {\n      display: none;\n    }\n\n    .xp-comfort-mobile-content {\n      display: block;\n      width: calc(100% - 44px);\n      margin: 50px auto 0;\n      background: transparent;\n    }\n\n    .xp-comfort-mobile-content h3 {\n      max-width: 350px;\n      margin: 0 0 18px;\n      color: #333333;\n      font-size: 18px;\n      line-height: 1.55;\n      font-weight: 400;\n    }\n\n    .xp-comfort-mobile-content p {\n      max-width: 355px;\n      margin: 0;\n      color: #6e6e6e;\n      font-size: 16px;\n      line-height: 1.45;\n      font-weight: 400;\n    }\n\n    .xp-comfort-dots {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      width: calc(100% - 44px);\n      margin: 40px auto 0;\n    }\n\n    .xp-comfort-dot {\n      width: 22px;\n      height: 2px;\n      border: 0;\n      padding: 0;\n      background: #e6e6e6;\n      cursor: pointer;\n      transition: background 0.25s ease;\n    }\n\n    .xp-comfort-dot.active {\n      background: #85bf22;\n    }\n  }\n\n  @media (max-width: 420px) {\n    .xp-comfort-carousel {\n      padding-top: 100px;\n    }\n\n    .xp-comfort-mobile-content {\n      margin-top: 50px;\n    }\n\n    .xp-comfort-mobile-content h3 {\n      font-size: 18px;\n      line-height: 1.55;\n    }\n\n    .xp-comfort-mobile-content p {\n      font-size: 16px;\n      line-height: 1.45;\n    }\n\n    .xp-comfort-dots {\n      margin-top: 40px;\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    const section = document.getElementById(\"xpComfortCarousel\");\n    if (!section) return;\n\n    const slides = Array.from(section.querySelectorAll(\".xp-comfort-slide\"));\n    const dots = Array.from(section.querySelectorAll(\".xp-comfort-dot\"));\n    const prevBtn = section.querySelector(\".xp-comfort-prev\");\n    const nextBtn = section.querySelector(\".xp-comfort-next\");\n    const mobileTitle = section.querySelector(\".xp-comfort-mobile-content h3\");\n    const mobileText = section.querySelector(\".xp-comfort-mobile-content p\");\n    const slider = section.querySelector(\".xp-comfort-slider\");\n\n    const data = [\n      {\n        title: \"Healthy comfort, premium craftsmanship\",\n        text: \"Designed to OEKO-TEX standards, the Nappa leather front seats offer 12-way power adjustment, heating, ventilation and a 10-point massage system for unparalleled comfort on long journeys.\"\n      },\n      {\n        title: \"Fully adjustable second row\",\n        text: \"The second-row seats recline electrically from 27\u00b0 to 37\u00b0, with integrated heating, ventilation and massage functions \u2014 turning every journey into a first-class experience.\"\n      }\n    ];\n\n    let current = 0;\n    let pointerStartX = 0;\n    let pointerEndX = 0;\n    let isDragging = false;\n    let isLocked = false;\n\n    function setSlide(index) {\n      if (isLocked) return;\n\n      const nextIndex = Math.max(0, Math.min(index, slides.length - 1));\n      if (nextIndex === current) return;\n\n      isLocked = true;\n      current = nextIndex;\n\n      slides.forEach(function (slide, slideIndex) {\n        slide.classList.toggle(\"active\", slideIndex === current);\n      });\n\n      dots.forEach(function (dot, dotIndex) {\n        dot.classList.toggle(\"active\", dotIndex === current);\n      });\n\n      if (mobileTitle) mobileTitle.textContent = data[current].title;\n      if (mobileText) mobileText.textContent = data[current].text;\n\n      if (prevBtn) prevBtn.disabled = current === 0;\n      if (nextBtn) nextBtn.disabled = current === slides.length - 1;\n\n      setTimeout(function () {\n        isLocked = false;\n      }, 360);\n    }\n\n    function refreshControls() {\n      if (prevBtn) prevBtn.disabled = current === 0;\n      if (nextBtn) nextBtn.disabled = current === slides.length - 1;\n    }\n\n    function goNext() {\n      setSlide(current + 1);\n    }\n\n    function goPrev() {\n      setSlide(current - 1);\n    }\n\n    function handleSwipe(distance) {\n      if (Math.abs(distance) < 55) return;\n\n      if (distance > 0) {\n        goNext();\n      } else {\n        goPrev();\n      }\n    }\n\n    if (prevBtn) {\n      prevBtn.addEventListener(\"click\", function () {\n        goPrev();\n      });\n    }\n\n    if (nextBtn) {\n      nextBtn.addEventListener(\"click\", function () {\n        goNext();\n      });\n    }\n\n    dots.forEach(function (dot) {\n      dot.addEventListener(\"click\", function () {\n        setSlide(Number(this.dataset.index));\n      });\n    });\n\n    slider.addEventListener(\"pointerdown\", function (event) {\n      isDragging = true;\n      pointerStartX = event.clientX;\n      pointerEndX = event.clientX;\n      slider.classList.add(\"is-dragging\");\n\n      if (slider.setPointerCapture) {\n        slider.setPointerCapture(event.pointerId);\n      }\n    });\n\n    slider.addEventListener(\"pointermove\", function (event) {\n      if (!isDragging) return;\n      pointerEndX = event.clientX;\n    });\n\n    slider.addEventListener(\"pointerup\", function (event) {\n      if (!isDragging) return;\n\n      isDragging = false;\n      slider.classList.remove(\"is-dragging\");\n\n      const distance = pointerStartX - pointerEndX;\n      handleSwipe(distance);\n\n      try {\n        slider.releasePointerCapture(event.pointerId);\n      } catch (error) {}\n    });\n\n    slider.addEventListener(\"pointercancel\", function () {\n      isDragging = false;\n      slider.classList.remove(\"is-dragging\");\n    });\n\n    slider.addEventListener(\"dragstart\", function (event) {\n      event.preventDefault();\n    });\n\n    refreshControls();\n  })();\n<\/script>\n\n\n\n\n<section class=\"xp-seat-comfort-carousel\" id=\"xpSeatComfortCarousel\">\n  <div class=\"xp-seat-comfort-wrap\">\n\n    <div class=\"xp-seat-comfort-media\">\n      <div class=\"xp-seat-comfort-track\">\n\n        <!-- Slide 1: Video -->\n        <article class=\"xp-seat-comfort-slide active\">\n          <video\n            class=\"xp-seat-comfort-video\"\n            autoplay\n            muted\n            loop\n            playsinline\n            preload=\"metadata\"\n          >\n            <source\n              src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/883247fcaca44872a0a6ce0a0e5e5a33.mp4\"\n              type=\"video\/mp4\"\n            >\n          <\/video>\n\n          <button class=\"xp-seat-play-btn\" type=\"button\" aria-label=\"Play video\">\n            <span><\/span>\n          <\/button>\n        <\/article>\n\n        <!-- Slide 2: Image -->\n        <article class=\"xp-seat-comfort-slide\">\n          <picture>\n            <source\n              media=\"(min-width: 1920px)\"\n              srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/b692e2cbd8ea4a138d6c90b6d041503f.png?x-oss-process=image%2Fresize%2Cw_3840%2Fquality%2Cq_90%2Finterlace%2C1\"\n            >\n            <source\n              media=\"(max-width: 750px)\"\n              srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/b692e2cbd8ea4a138d6c90b6d041503f.png?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n            >\n            <img decoding=\"async\"\n              src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/b692e2cbd8ea4a138d6c90b6d041503f.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n              alt=\"Ergonomic 8-zone seat support\"\n            >\n          <\/picture>\n        <\/article>\n\n      <\/div>\n\n      <button class=\"xp-seat-arrow xp-seat-prev\" type=\"button\" aria-label=\"Previous slide\">\n        <span><\/span>\n      <\/button>\n\n      <button class=\"xp-seat-arrow xp-seat-next\" type=\"button\" aria-label=\"Next slide\">\n        <span><\/span>\n      <\/button>\n    <\/div>\n\n    <div class=\"xp-seat-mobile-content\">\n      <h3>The front and rear seats are equipped with intelligent comfort features.<\/h3>\n      <p>\n        Enjoy a 10-point massage system, multi-level heating, and ventilation. The front seats offer\n        12-way power adjustment, while the rear seats combine recline and memory for a personalized experience.\n      <\/p>\n    <\/div>\n\n    <div class=\"xp-seat-indicators\">\n      <button class=\"xp-seat-indicator active\" type=\"button\" data-index=\"0\">\n        The front and rear seats are equipped with intelligent comfort features.\n      <\/button>\n\n      <button class=\"xp-seat-indicator\" type=\"button\" data-index=\"1\">\n        Designed with ergonomic 8-zone support and dual-density foam, the seats provide optimal pressure relief as well as perfect spinal alignment.\n      <\/button>\n    <\/div>\n\n    <div class=\"xp-seat-desc\">\n      Enjoy a 10-point massage system, multi-level heating, and ventilation. The front seats offer\n      12-way power adjustment, while the rear seats combine recline and memory for a personalized experience.\n    <\/div>\n\n    <div class=\"xp-seat-dots\">\n      <button class=\"xp-seat-dot active\" type=\"button\" data-index=\"0\" aria-label=\"Slide 1\"><\/button>\n      <button class=\"xp-seat-dot\" type=\"button\" data-index=\"1\" aria-label=\"Slide 2\"><\/button>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n \n\n  .xp-seat-comfort-carousel {\n    width: 100%;\n    background: #ffffff;\n    padding: 58px 0 42px;\n    overflow: hidden;\n    font-family: basis_grotesque_regular;\n  }\n\n  .xp-seat-comfort-wrap {\n    width: 100%;\n    margin: 0 auto;\n  }\n\n  .xp-seat-comfort-media {\n    position: relative;\n    width: min(82vw, 1270px);\n    height: 635px;\n    margin: 0 auto;\n    overflow: visible;\n    cursor: grab;\n    touch-action: pan-y;\n    user-select: none;\n  }\n\n  .xp-seat-comfort-media.is-dragging {\n    cursor: grabbing;\n  }\n\n  .xp-seat-comfort-track {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border-radius: 3px;\n    background: #f5f5f5;\n  }\n\n  .xp-seat-comfort-slide {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    visibility: hidden;\n    transform: scale(1.012);\n    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.65s ease;\n  }\n\n  .xp-seat-comfort-slide.active {\n    opacity: 1;\n    visibility: visible;\n    transform: scale(1);\n    z-index: 2;\n  }\n\n  .xp-seat-comfort-slide picture,\n  .xp-seat-comfort-slide img,\n  .xp-seat-comfort-video {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n\n  .xp-seat-comfort-slide img,\n  .xp-seat-comfort-video {\n    object-fit: cover;\n    object-position: center;\n    pointer-events: none;\n    user-select: none;\n    -webkit-user-drag: none;\n  }\n\n  .xp-seat-play-btn {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    z-index: 4;\n    width: 74px;\n    height: 74px;\n    border: 0;\n    background: transparent;\n    transform: translate(-50%, -50%);\n    cursor: pointer;\n    display: none;\n    place-items: center;\n  }\n\n  .xp-seat-play-btn span {\n    width: 0;\n    height: 0;\n    margin-left: 7px;\n    border-top: 22px solid transparent;\n    border-bottom: 22px solid transparent;\n    border-left: 34px solid #ffffff;\n    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));\n  }\n\n  .xp-seat-arrow {\n    position: absolute;\n    top: 50%;\n    z-index: 50;\n    width: 48px;\n    height: 48px;\n    border: 0;\n    border-radius: 50%;\n    background: rgba(255, 255, 255, 0.05);\n    cursor: pointer;\n    transform: translateY(-50%);\n    display: grid;\n    place-items: center;\n    transition: opacity 0.25s ease, background 0.25s ease;\n  }\n\n  .xp-seat-arrow:hover {\n    background: rgba(255, 255, 255, 0.18);\n  }\n\n  .xp-seat-arrow:disabled {\n    opacity: 0.28;\n    cursor: default;\n    pointer-events: none;\n  }\n\n  .xp-seat-prev {\n    left: 18px;\n  }\n\n  .xp-seat-next {\n    right: 18px;\n  }\n\n  .xp-seat-arrow span {\n    width: 15px;\n    height: 15px;\n    display: block;\n    border-top: 2px solid #8c8c8c;\n    border-right: 2px solid #8c8c8c;\n    pointer-events: none;\n  }\n\n  .xp-seat-prev span {\n    transform: rotate(-135deg);\n    margin-left: 5px;\n  }\n\n  .xp-seat-next span {\n    transform: rotate(45deg);\n    margin-right: 5px;\n  }\n\n  .xp-seat-indicators {\n    width: min(78vw, 1215px);\n    margin: 26px auto 0;\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    border-bottom: 1px solid #dedede;\n  }\n\n  .xp-seat-indicator {\n    position: relative;\n    min-height: 58px;\n    border: 0;\n    background: transparent;\n    padding: 0 28px 16px;\n    color: #9a9a9a;\n    font-size: 15px;\n    line-height: 1.35;\n    font-weight: 600;\n    font-family: inherit;\n    text-align: center;\n    cursor: pointer;\n    transition: color 0.25s ease;\n  }\n\n  .xp-seat-indicator.active {\n    color: #000000;\n  }\n\n  .xp-seat-indicator::after {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    bottom: -1px;\n    width: 100%;\n    height: 2px;\n    background: #85bf22;\n    transform: scaleX(0);\n    transform-origin: center;\n    transition: transform 0.28s ease;\n  }\n\n  .xp-seat-indicator.active::after {\n    transform: scaleX(1);\n  }\n\n  .xp-seat-desc {\n    width: min(78vw, 1215px);\n    margin: 22px auto 0;\n    color: #8b8d96;\n    font-size: 15px;\n    line-height: 1.7;\n    letter-spacing: 0.4px;\n    text-align: center;\n  }\n\n  .xp-seat-mobile-content,\n  .xp-seat-dots {\n    display: none;\n  }\n\n  @media (max-width: 1200px) {\n    .xp-seat-comfort-media {\n      width: 84vw;\n      height: 52vw;\n      max-height: 635px;\n    }\n  }\n\n  @media (max-width: 900px) {\n    .xp-seat-comfort-carousel {\n      padding: 46px 0 40px;\n    }\n\n    .xp-seat-comfort-media {\n      width: calc(100% - 44px);\n      height: 58vw;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-seat-comfort-carousel {\n      padding: 0;\n      background: #f7f7f7;\n    }\n\n    .xp-seat-comfort-media {\n      width: 100%;\n      height: auto;\n      margin: 0 auto;\n      overflow: hidden;\n      border-radius: 0;\n      background: transparent;\n    }\n\n    .xp-seat-comfort-track {\n      height: auto;\n      aspect-ratio: 415 \/ 518;\n      border-radius: 0;\n      overflow: hidden;\n    }\n\n    .xp-seat-comfort-slide img,\n    .xp-seat-comfort-video {\n      object-fit: cover;\n      object-position: center top;\n    }\n\n    .xp-seat-play-btn {\n      display: grid;\n      width: 64px;\n      height: 64px;\n    }\n\n    .xp-seat-play-btn span {\n      border-top-width: 18px;\n      border-bottom-width: 18px;\n      border-left-width: 29px;\n    }\n\n    .xp-seat-arrow,\n    .xp-seat-indicators,\n    .xp-seat-desc {\n      display: none;\n    }\n\n    .xp-seat-mobile-content {\n      display: block;\n      width: 100%;\n      padding: 30px 35px 68px;\n      background: #ffffff;\n    }\n\n    .xp-seat-mobile-content h3 {\n      margin: 0 0 21px;\n      color: #000000;\n      font-size: 27px;\n      line-height: 1.48;\n      font-weight: 400;\n      letter-spacing: -0.02em;\n    }\n\n    .xp-seat-mobile-content p {\n      margin: 0;\n      color: #6d6d6d;\n      font-size: 16px;\n      line-height: 1.55;\n      font-weight: 400;\n    }\n\n    .xp-seat-dots {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding-left: 35px;\n      margin-top: -34px;\n      padding-bottom: 28px;\n      background: #ffffff;\n    }\n\n    .xp-seat-dot {\n      width: 22px;\n      height: 2px;\n      border: 0;\n      padding: 0;\n      background: #eeeeee;\n      cursor: pointer;\n      transition: background 0.25s ease;\n    }\n\n    .xp-seat-dot.active {\n      background: #85bf22;\n    }\n  }\n\n  @media (max-width: 380px) {\n    .xp-seat-mobile-content {\n      padding-left: 28px;\n      padding-right: 28px;\n    }\n\n    .xp-seat-mobile-content h3 {\n        width: 100%;\n      font-size: 25px;\n    }\n\n    .xp-seat-dots {\n      padding-left: 28px;\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    const section = document.getElementById(\"xpSeatComfortCarousel\");\n    if (!section) return;\n\n    const media = section.querySelector(\".xp-seat-comfort-media\");\n    const slides = Array.from(section.querySelectorAll(\".xp-seat-comfort-slide\"));\n    const indicators = Array.from(section.querySelectorAll(\".xp-seat-indicator\"));\n    const dots = Array.from(section.querySelectorAll(\".xp-seat-dot\"));\n    const prevBtn = section.querySelector(\".xp-seat-prev\");\n    const nextBtn = section.querySelector(\".xp-seat-next\");\n    const mobileTitle = section.querySelector(\".xp-seat-mobile-content h3\");\n    const mobileText = section.querySelector(\".xp-seat-mobile-content p\");\n\n    const data = [\n      {\n        title: \"The front and rear seats are equipped with intelligent comfort features.\",\n        text: \"Enjoy a 10-point massage system, multi-level heating, and ventilation. The front seats offer 12-way power adjustment, while the rear seats combine recline and memory for a personalized experience.\"\n      },\n      {\n        title: \"Designed with ergonomic 8-zone support and dual-density foam, the seats provide optimal pressure relief as well as perfect spinal alignment.\",\n        text: \"Enjoy a 10-point massage system, multi-level heating, and ventilation. The front seats offer 12-way power adjustment, while the rear seats combine recline and memory for a personalized experience.\"\n      }\n    ];\n\n    let current = 0;\n    let startX = 0;\n    let endX = 0;\n    let isDragging = false;\n    let locked = false;\n\n    function setSlide(index) {\n      const nextIndex = Math.max(0, Math.min(index, slides.length - 1));\n      if (locked || nextIndex === current) return;\n\n      locked = true;\n      current = nextIndex;\n\n      slides.forEach(function (slide, slideIndex) {\n        slide.classList.toggle(\"active\", slideIndex === current);\n\n        const video = slide.querySelector(\"video\");\n        if (video) {\n          if (slideIndex === current) {\n            video.play().catch(function () {});\n          } else {\n            video.pause();\n          }\n        }\n      });\n\n      indicators.forEach(function (indicator, indicatorIndex) {\n        indicator.classList.toggle(\"active\", indicatorIndex === current);\n      });\n\n      dots.forEach(function (dot, dotIndex) {\n        dot.classList.toggle(\"active\", dotIndex === current);\n      });\n\n      if (mobileTitle) mobileTitle.textContent = data[current].title;\n      if (mobileText) mobileText.textContent = data[current].text;\n\n      refreshControls();\n\n      setTimeout(function () {\n        locked = false;\n      }, 360);\n    }\n\n    function refreshControls() {\n      if (prevBtn) prevBtn.disabled = current === 0;\n      if (nextBtn) nextBtn.disabled = current === slides.length - 1;\n    }\n\n    function goNext() {\n      setSlide(current + 1);\n    }\n\n    function goPrev() {\n      setSlide(current - 1);\n    }\n\n    function handleSwipe(distance) {\n      if (Math.abs(distance) < 55) return;\n\n      if (distance > 0) {\n        goNext();\n      } else {\n        goPrev();\n      }\n    }\n\n    [prevBtn, nextBtn].forEach(function (btn) {\n      if (!btn) return;\n\n      btn.addEventListener(\"pointerdown\", function (event) {\n        event.stopPropagation();\n      });\n\n      btn.addEventListener(\"pointerup\", function (event) {\n        event.stopPropagation();\n      });\n\n      btn.addEventListener(\"click\", function (event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (btn.classList.contains(\"xp-seat-prev\")) {\n          goPrev();\n        }\n\n        if (btn.classList.contains(\"xp-seat-next\")) {\n          goNext();\n        }\n      });\n    });\n\n    indicators.forEach(function (indicator) {\n      indicator.addEventListener(\"click\", function () {\n        setSlide(Number(this.dataset.index));\n      });\n    });\n\n    dots.forEach(function (dot) {\n      dot.addEventListener(\"click\", function () {\n        setSlide(Number(this.dataset.index));\n      });\n    });\n\n    media.addEventListener(\"pointerdown\", function (event) {\n      if (event.target.closest(\".xp-seat-arrow\")) return;\n\n      isDragging = true;\n      startX = event.clientX;\n      endX = event.clientX;\n      media.classList.add(\"is-dragging\");\n\n      if (media.setPointerCapture) {\n        media.setPointerCapture(event.pointerId);\n      }\n    });\n\n    media.addEventListener(\"pointermove\", function (event) {\n      if (!isDragging) return;\n      endX = event.clientX;\n    });\n\n    media.addEventListener(\"pointerup\", function (event) {\n      if (!isDragging) return;\n\n      isDragging = false;\n      media.classList.remove(\"is-dragging\");\n\n      handleSwipe(startX - endX);\n\n      try {\n        media.releasePointerCapture(event.pointerId);\n      } catch (error) {}\n    });\n\n    media.addEventListener(\"pointercancel\", function () {\n      isDragging = false;\n      media.classList.remove(\"is-dragging\");\n    });\n\n    media.addEventListener(\"dragstart\", function (event) {\n      event.preventDefault();\n    });\n\n    refreshControls();\n  })();\n<\/script>\n\n\n<section class=\"xp-secure-video-section\">\n  <div class=\"xp-secure-container\">\n\n    <div class=\"xp-secure-title\">\n      <h2>Secure design<\/h2>\n    <\/div>\n\n    <div class=\"xp-secure-video-box\">\n      <video\n        class=\"xp-secure-video\"\n        loop\n        muted\n        playsinline\n        preload=\"metadata\"\n        poster=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/7a3c5af0a3464414ba8d3d09f27ac225.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n      >\n        <source\n          src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/56c7581c7fd54a55b299564c66129b98.mp4\"\n          type=\"video\/mp4\"\n        >\n      <\/video>\n\n      <button class=\"xp-secure-play\" type=\"button\" aria-label=\"Play video\">\n        <span><\/span>\n      <\/button>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n \n\n  .xp-secure-video-section {\n    width: 100%;\n    background: #ffffff;\n    padding: 52px 20px 66px;\n    overflow: hidden;\n    font-family: basis_grotesque_regular;\n  }\n\n  .xp-secure-container {\n    width: 100%;\n    max-width: 1270px;\n    margin: 0 auto;\n  }\n\n  .xp-secure-title {\n    width: 100%;\n    text-align: center;\n    margin-bottom: 68px;\n  }\n\n  .xp-secure-title h2 {\n    margin: 0;\n    color: #000000;\n    font-size: 36px;\n    line-height: 1.25;\n    font-weight: 400;\n    letter-spacing: -0.02em;\n  }\n\n  .xp-secure-video-box {\n    position: relative;\n    width: 100%;\n    height: 635px;\n    overflow: hidden;\n    border-radius: 3px;\n    background: #f2f2f2;\n    cursor: pointer;\n  }\n\n  .xp-secure-video {\n    width: 100%;\n    height: 100%;\n    display: block;\n    object-fit: cover;\n    object-position: center;\n  }\n\n  .xp-secure-play {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    z-index: 5;\n    width: 52px;\n    height: 52px;\n    border: 0;\n    border-radius: 12px;\n    background: rgba(0, 0, 0, 0.38);\n    transform: translate(-50%, -50%);\n    cursor: pointer;\n    display: grid;\n    place-items: center;\n    transition: opacity 0.25s ease, background 0.25s ease, transform 0.25s ease;\n  }\n\n  .xp-secure-play:hover {\n    background: rgba(0, 0, 0, 0.52);\n    transform: translate(-50%, -50%) scale(1.04);\n  }\n\n  .xp-secure-play span {\n    width: 0;\n    height: 0;\n    margin-left: 4px;\n    border-top: 15px solid transparent;\n    border-bottom: 15px solid transparent;\n    border-left: 24px solid #ffffff;\n  }\n\n  .xp-secure-video-box.is-playing .xp-secure-play {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  @media (max-width: 1200px) {\n    .xp-secure-video-box {\n      height: 52vw;\n      max-height: 635px;\n    }\n\n    .xp-secure-title {\n      margin-bottom: 54px;\n    }\n\n    .xp-secure-title h2 {\n      font-size: 32px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-secure-video-section {\n      padding: 48px 0 66px;\n      background: #ffffff;\n    }\n\n    .xp-secure-container {\n      max-width: none;\n    }\n\n    .xp-secure-title {\n      text-align: left;\n      margin-bottom: 32px;\n      padding: 0 20px;\n    }\n\n    .xp-secure-title h2 {\n      font-size: 28px;\n      line-height: 1.25;\n      font-weight: 400;\n      letter-spacing: -0.02em;\n    }\n\n    .xp-secure-video-box {\n      width: calc(100% - 40px);\n      height: auto;\n      aspect-ratio: 370 \/ 277;\n      margin: 0 auto;\n      border-radius: 1px;\n    }\n\n    .xp-secure-play {\n      width: 58px;\n      height: 58px;\n      background: transparent;\n      border-radius: 0;\n    }\n\n    .xp-secure-play:hover {\n      background: transparent;\n      transform: translate(-50%, -50%);\n    }\n\n    .xp-secure-play span {\n      margin-left: 5px;\n      border-top-width: 20px;\n      border-bottom-width: 20px;\n      border-left-width: 31px;\n      filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35));\n    }\n  }\n\n  @media (max-width: 420px) {\n    .xp-secure-video-section {\n      padding-top: 48px;\n    }\n\n    .xp-secure-title h2 {\n      font-size: 27px;\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    const section = document.querySelector(\".xp-secure-video-section\");\n    if (!section) return;\n\n    const videoBox = section.querySelector(\".xp-secure-video-box\");\n    const video = section.querySelector(\".xp-secure-video\");\n    const playBtn = section.querySelector(\".xp-secure-play\");\n\n    if (!videoBox || !video || !playBtn) return;\n\n    let userPaused = false;\n\n    function playVideo() {\n      video.muted = true;\n\n      video.play()\n        .then(function () {\n          videoBox.classList.add(\"is-playing\");\n        })\n        .catch(function () {\n          videoBox.classList.remove(\"is-playing\");\n        });\n    }\n\n    function pauseVideo() {\n      video.pause();\n      videoBox.classList.remove(\"is-playing\");\n    }\n\n    const observer = new IntersectionObserver(\n      function (entries) {\n        entries.forEach(function (entry) {\n          if (entry.isIntersecting && entry.intersectionRatio >= 0.45 && !userPaused) {\n            playVideo();\n          } else {\n            pauseVideo();\n          }\n        });\n      },\n      {\n        threshold: [0, 0.25, 0.45, 0.75]\n      }\n    );\n\n    observer.observe(section);\n\n    playBtn.addEventListener(\"click\", function (event) {\n      event.stopPropagation();\n      userPaused = false;\n      playVideo();\n    });\n\n    videoBox.addEventListener(\"click\", function (event) {\n      if (event.target.closest(\".xp-secure-play\")) return;\n\n      if (video.paused) {\n        userPaused = false;\n        playVideo();\n      } else {\n        userPaused = true;\n        pauseVideo();\n      }\n    });\n\n    document.addEventListener(\"visibilitychange\", function () {\n      if (document.hidden) {\n        pauseVideo();\n      } else {\n        const rect = section.getBoundingClientRect();\n        const visible =\n          rect.top < window.innerHeight * 0.65 &#038;&#038;\n          rect.bottom > window.innerHeight * 0.35;\n\n        if (visible && !userPaused) {\n          playVideo();\n        }\n      }\n    });\n  })();\n<\/script>\n\n\n\n<section class=\"xp-access-carousel\" id=\"xpAccessCarousel\">\n  <div class=\"xp-access-slider\">\n\n    <div class=\"xp-access-track\">\n\n      <!-- Slide 1 -->\n      <article class=\"xp-access-slide active\">\n        <picture>\n          <source\n            media=\"(max-width: 750px)\"\n            srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/0bec14b3cbeb4273b6e0289fcfb062e5.png?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n          >\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/0bec14b3cbeb4273b6e0289fcfb062e5.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n            alt=\"Frameless doors improve aesthetics and access accuracy\"\n          >\n        <\/picture>\n\n        <div class=\"xp-access-caption\">\n          <h3>Frameless doors improve aesthetics and access accuracy.<\/h3>\n        <\/div>\n      <\/article>\n\n      <!-- Slide 2 -->\n      <article class=\"xp-access-slide\">\n        <picture>\n          <source\n            media=\"(max-width: 750px)\"\n            srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/cf14e174b2d840809010c2796c0ccbe7.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n          >\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/cf14e174b2d840809010c2796c0ccbe7.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n            alt=\"Hands-free smart liftgate with foot sensor function provides easy access\"\n          >\n        <\/picture>\n\n        <div class=\"xp-access-caption\">\n          <h3>Hands-free smart liftgate with foot sensor function provides easy access.<\/h3>\n        <\/div>\n      <\/article>\n\n    <\/div>\n\n    <button class=\"xp-access-arrow xp-access-prev\" type=\"button\" aria-label=\"Previous slide\">\n      <span><\/span>\n    <\/button>\n\n    <button class=\"xp-access-arrow xp-access-next\" type=\"button\" aria-label=\"Next slide\">\n      <span><\/span>\n    <\/button>\n\n  <\/div>\n\n  <!-- Mobile text -->\n  <div class=\"xp-access-mobile-content\">\n    <h3>Frameless doors improve aesthetics and access accuracy.<\/h3>\n  <\/div>\n\n  <!-- Mobile dots -->\n  <div class=\"xp-access-dots\">\n    <button class=\"xp-access-dot active\" type=\"button\" data-index=\"0\" aria-label=\"Slide 1\"><\/button>\n    <button class=\"xp-access-dot\" type=\"button\" data-index=\"1\" aria-label=\"Slide 2\"><\/button>\n  <\/div>\n<\/section>\n\n<style>\n \n\n  .xp-access-carousel {\n    width: 100%;\n    background: #ffffff;\n    padding: 106px 0 62px;\n    overflow: hidden;\n    font-family: basis_grotesque_regular;\n  }\n\n  .xp-access-slider {\n    position: relative;\n    width: min(72vw, 1345px);\n    height: 672px;\n    margin: 0 auto;\n    overflow: visible;\n    cursor: grab;\n    touch-action: pan-y;\n    user-select: none;\n  }\n\n  .xp-access-slider.is-dragging {\n    cursor: grabbing;\n  }\n\n  .xp-access-track {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border-radius: 3px;\n    background: #f5f5f5;\n  }\n\n  .xp-access-slide {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    visibility: hidden;\n    transform: scale(1.012);\n    transition:\n      opacity 0.4s ease,\n      visibility 0.4s ease,\n      transform 0.65s ease;\n  }\n\n  .xp-access-slide.active {\n    opacity: 1;\n    visibility: visible;\n    transform: scale(1);\n    z-index: 2;\n  }\n\n  .xp-access-slide picture,\n  .xp-access-slide img {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n\n  .xp-access-slide img {\n    object-fit: cover;\n    object-position: center;\n    pointer-events: none;\n    user-select: none;\n    -webkit-user-drag: none;\n  }\n\n  .xp-access-caption {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 3;\n    padding: 72px 68px 58px;\n    background: linear-gradient(\n      to top,\n      rgba(0, 0, 0, 0.58),\n      rgba(0, 0, 0, 0.22),\n      rgba(0, 0, 0, 0)\n    );\n    color: #ffffff;\n    pointer-events: none;\n  }\n\n  .xp-access-caption h3 {\n    max-width: 780px;\n    margin: 0;\n    color: #ffffff;\n    font-size: 18px;\n    line-height: 1.45;\n    font-weight: 500;\n  }\n\n  .xp-access-arrow {\n    position: absolute;\n    top: 50%;\n    z-index: 50;\n    width: 52px;\n    height: 52px;\n    border: 0;\n    border-radius: 50%;\n    background: transparent;\n    cursor: pointer;\n    transform: translateY(-50%);\n    display: grid;\n    place-items: center;\n    transition: opacity 0.25s ease, background 0.25s ease;\n  }\n\n  .xp-access-arrow:disabled {\n    opacity: 0.28;\n    cursor: default;\n    pointer-events: none;\n  }\n\n  .xp-access-prev {\n    left: -72px;\n  }\n\n  .xp-access-next {\n    right: -72px;\n  }\n\n  .xp-access-arrow span {\n    width: 17px;\n    height: 17px;\n    display: block;\n    border-top: 2px solid #9a9a9a;\n    border-right: 2px solid #9a9a9a;\n    pointer-events: none;\n  }\n\n  .xp-access-prev span {\n    transform: rotate(-135deg);\n    margin-left: 6px;\n  }\n\n  .xp-access-next span {\n    transform: rotate(45deg);\n    margin-right: 6px;\n  }\n\n  .xp-access-mobile-content,\n  .xp-access-dots {\n    display: none;\n  }\n\n  @media (max-width: 1400px) {\n    .xp-access-slider {\n      width: 82vw;\n      height: 52vw;\n      max-height: 672px;\n    }\n\n    .xp-access-prev {\n      left: -56px;\n    }\n\n    .xp-access-next {\n      right: -56px;\n    }\n  }\n\n  @media (max-width: 900px) {\n    .xp-access-carousel {\n      padding: 72px 0 54px;\n    }\n\n    .xp-access-slider {\n      width: calc(100% - 44px);\n      height: 58vw;\n    }\n\n    .xp-access-prev {\n      left: 12px;\n    }\n\n    .xp-access-next {\n      right: 12px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-access-carousel {\n      padding: 89px 0 66px;\n      background: #f7f7f7;\n    }\n\n    .xp-access-slider {\n      width: calc(100% - 46px);\n      height: auto;\n      margin: 0 auto;\n      overflow: hidden;\n      border-radius: 2px;\n      background: transparent;\n    }\n\n    .xp-access-track {\n      height: auto;\n      aspect-ratio: 364 \/ 271;\n      border-radius: 2px;\n      overflow: hidden;\n    }\n\n    .xp-access-slide img {\n      object-fit: cover;\n      object-position: center;\n    }\n\n    .xp-access-caption,\n    .xp-access-arrow {\n      display: none;\n    }\n\n    .xp-access-mobile-content {\n      display: block;\n      width: calc(100% - 46px);\n      margin: 50px auto 0;\n      background: transparent;\n    }\n\n    .xp-access-mobile-content h3 {\n      max-width: 350px;\n      margin: 0;\n      color: #333333;\n      font-size: 18px;\n      line-height: 1.55;\n      font-weight: 400;\n    }\n\n    .xp-access-dots {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      width: calc(100% - 46px);\n      margin: 52px auto 0;\n    }\n\n    .xp-access-dot {\n      width: 22px;\n      height: 2px;\n      border: 0;\n      padding: 0;\n      background: #e6e6e6;\n      cursor: pointer;\n      transition: background 0.25s ease;\n    }\n\n    .xp-access-dot.active {\n      background: #85bf22;\n    }\n  }\n\n  @media (max-width: 420px) {\n    .xp-access-carousel {\n      padding-top: 89px;\n    }\n\n    .xp-access-mobile-content {\n      margin-top: 50px;\n    }\n\n    .xp-access-mobile-content h3 {\n      font-size: 18px;\n      line-height: 1.55;\n    }\n\n    .xp-access-dots {\n      margin-top: 52px;\n    }\n  }\n\n  @media (max-width: 380px) {\n    .xp-access-slider,\n    .xp-access-mobile-content,\n    .xp-access-dots {\n      width: calc(100% - 40px);\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    const section = document.getElementById(\"xpAccessCarousel\");\n    if (!section) return;\n\n    const slider = section.querySelector(\".xp-access-slider\");\n    const slides = Array.from(section.querySelectorAll(\".xp-access-slide\"));\n    const dots = Array.from(section.querySelectorAll(\".xp-access-dot\"));\n    const prevBtn = section.querySelector(\".xp-access-prev\");\n    const nextBtn = section.querySelector(\".xp-access-next\");\n    const mobileTitle = section.querySelector(\".xp-access-mobile-content h3\");\n\n    const data = [\n      {\n        title: \"Frameless doors improve aesthetics and access accuracy.\"\n      },\n      {\n        title: \"Hands-free smart liftgate with foot sensor function provides easy access.\"\n      }\n    ];\n\n    let current = 0;\n    let startX = 0;\n    let endX = 0;\n    let isDragging = false;\n    let locked = false;\n\n    function refreshControls() {\n      if (prevBtn) prevBtn.disabled = current === 0;\n      if (nextBtn) nextBtn.disabled = current === slides.length - 1;\n    }\n\n    function setSlide(index) {\n      const nextIndex = Math.max(0, Math.min(index, slides.length - 1));\n      if (locked || nextIndex === current) return;\n\n      locked = true;\n      current = nextIndex;\n\n      slides.forEach(function (slide, slideIndex) {\n        slide.classList.toggle(\"active\", slideIndex === current);\n      });\n\n      dots.forEach(function (dot, dotIndex) {\n        dot.classList.toggle(\"active\", dotIndex === current);\n      });\n\n      if (mobileTitle) {\n        mobileTitle.textContent = data[current].title;\n      }\n\n      refreshControls();\n\n      setTimeout(function () {\n        locked = false;\n      }, 360);\n    }\n\n    function goNext() {\n      setSlide(current + 1);\n    }\n\n    function goPrev() {\n      setSlide(current - 1);\n    }\n\n    function handleSwipe(distance) {\n      if (Math.abs(distance) < 55) return;\n\n      if (distance > 0) {\n        goNext();\n      } else {\n        goPrev();\n      }\n    }\n\n    [prevBtn, nextBtn].forEach(function (btn) {\n      if (!btn) return;\n\n      btn.addEventListener(\"pointerdown\", function (event) {\n        event.stopPropagation();\n      });\n\n      btn.addEventListener(\"pointerup\", function (event) {\n        event.stopPropagation();\n      });\n\n      btn.addEventListener(\"click\", function (event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (btn.classList.contains(\"xp-access-prev\")) {\n          goPrev();\n        }\n\n        if (btn.classList.contains(\"xp-access-next\")) {\n          goNext();\n        }\n      });\n    });\n\n    dots.forEach(function (dot) {\n      dot.addEventListener(\"click\", function () {\n        setSlide(Number(this.dataset.index));\n      });\n    });\n\n    slider.addEventListener(\"pointerdown\", function (event) {\n      if (event.target.closest(\".xp-access-arrow\")) return;\n\n      isDragging = true;\n      startX = event.clientX;\n      endX = event.clientX;\n      slider.classList.add(\"is-dragging\");\n\n      if (slider.setPointerCapture) {\n        slider.setPointerCapture(event.pointerId);\n      }\n    });\n\n    slider.addEventListener(\"pointermove\", function (event) {\n      if (!isDragging) return;\n      endX = event.clientX;\n    });\n\n    slider.addEventListener(\"pointerup\", function (event) {\n      if (!isDragging) return;\n\n      isDragging = false;\n      slider.classList.remove(\"is-dragging\");\n\n      handleSwipe(startX - endX);\n\n      try {\n        slider.releasePointerCapture(event.pointerId);\n      } catch (error) {}\n    });\n\n    slider.addEventListener(\"pointercancel\", function () {\n      isDragging = false;\n      slider.classList.remove(\"is-dragging\");\n    });\n\n    slider.addEventListener(\"dragstart\", function (event) {\n      event.preventDefault();\n    });\n\n    refreshControls();\n  })();\n<\/script>\n\n\n<section class=\"xp-storage-banner\">\n  <picture class=\"xp-storage-picture\">\n    <!-- Mobile image -->\n    <source\n      media=\"(max-width: 750px)\"\n      srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/d666a2b0aba1431e8f85a2ee67848b7a.jpg\"\n    >\n\n    <!-- Desktop image -->\n    <img decoding=\"async\"\n      class=\"xp-storage-img\"\n      src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/07a6ceed21a04cc6bb0b59d62fe9c06d.jpg\"\n      alt=\"Refined materials, immersive comfort\"\n    >\n  <\/picture>\n\n  <div class=\"xp-storage-content\">\n    <h2>Intelligent COCKPIT<\/h2>\n    <p>Two 14.96\" 2.4K floating displays, multi-zone voice control, OTA\u2074 updates, adaptive intelligent cockpit.<\/p>\n  <\/div>\n<\/section>\n\n<style>\n \n\n  .xp-storage-banner {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    background: #ffffff;\n    font-family: basis_grotesque_regular;\n  }\n\n  .xp-storage-picture {\n    display: block;\n    width: 100%;\n  }\n\n  .xp-storage-img {\n    width: 100%;\n    height: 790px;\n    display: block;\n    object-fit: cover;\n    object-position: center;\n  }\n\n  .xp-storage-content {\n    position: absolute;\n    z-index: 2;\n    top: 96px;\n    left: 50%;\n    width: 90%;\n    max-width: 1100px;\n    transform: translateX(-50%);\n    text-align: center;\n    color: #ffffff;\n  }\n\n  .xp-storage-content h2 {\n    margin: 0;\n    color: #ffffff;\n    font-size: 36px;\n    line-height: 1.25;\n    font-weight: 400;\n  }\n\n  .xp-storage-content p {\n    margin: 14px auto 0;\n    max-width: 760px;\n    color: #ffffff;\n    font-size: 16px;\n    line-height: 1.55;\n    font-weight: 400;\n  }\n\n  @media (max-width: 1200px) {\n    .xp-storage-img {\n      height: 660px;\n    }\n\n    .xp-storage-content {\n      top: 82px;\n    }\n\n    .xp-storage-content h2 {\n      font-size: 32px;\n    }\n\n    .xp-storage-content p {\n      font-size: 15px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-storage-banner {\n      display: flex;\n      flex-direction: column;\n      background: #ffffff;\n      min-height: auto;\n    }\n\n    .xp-storage-picture {\n      width: 100%;\n      order: 1;\n    }\n\n    .xp-storage-img {\n      width: 100%;\n      height: auto;\n      min-height: 0;\n      display: block;\n      object-fit: contain;\n      object-position: center top;\n    }\n\n    .xp-storage-content {\n      position: static;\n      order: 2;\n      width: 100%;\n      max-width: none;\n      transform: none;\n      text-align: left;\n      background: #ffffff;\n      color: #000000;\n      padding: 31px 28px 30px;\n    }\n\n    .xp-storage-content h2 {\n      margin: 0;\n      max-width: 335px;\n      color: #000000;\n      font-size: 28px;\n      line-height: 1.42;\n      font-weight: 400;\n      letter-spacing: -0.02em;\n    }\n\n    .xp-storage-content p {\n      margin: 24px 0 0;\n      max-width: 335px;\n      color: #58616f;\n      font-size: 16px;\n      line-height: 1.55;\n      font-weight: 400;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-storage-content {\n      padding: 31px 28px 30px;\n    }\n\n    .xp-storage-content h2 {\n      font-size: 28px;\n      line-height: 1.42;\n    }\n\n    .xp-storage-content p {\n      font-size: 16px;\n      line-height: 1.55;\n      margin-top: 24px;\n    }\n  }\n\n  @media (max-width: 380px) {\n    .xp-storage-content {\n      padding-left: 24px;\n      padding-right: 24px;\n    }\n\n    .xp-storage-content h2 {\n      font-size: 26px;\n    }\n\n    .xp-storage-content p {\n      font-size: 15px;\n    }\n  }\n<\/style>\n\n\n<section class=\"xp-storage-banner\">\n  <picture class=\"xp-storage-picture\">\n    <!-- Mobile image -->\n    <source\n      media=\"(max-width: 750px)\"\n      srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/aad32a37738644b890e5bf3e302a8744.jpg\"\n    >\n\n    <!-- Desktop image -->\n    <img decoding=\"async\"\n      class=\"xp-storage-img\"\n      src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/1cdca9257e0349d2a1163d3218354560.jpg\"\n      alt=\"Refined materials, immersive comfort\"\n    >\n  <\/picture>\n\n  <div class=\"xp-storage-content\">\n    <h2>User-centric operating system<\/h2>\n    <p>Seamless smartphone integration, smart controls, adaptive preferences, continuous OTA updates.<\/p>\n  <\/div>\n<\/section>\n\n<style>\n \n\n  .xp-storage-banner {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    background: #ffffff;\n    font-family: basis_grotesque_regular;\n  }\n\n  .xp-storage-picture {\n    display: block;\n    width: 100%;\n  }\n\n  .xp-storage-img {\n    width: 100%;\n    height: 790px;\n    display: block;\n    object-fit: cover;\n    object-position: center;\n  }\n\n  .xp-storage-content {\n    position: absolute;\n    z-index: 2;\n    top: 96px;\n    left: 50%;\n    width: 90%;\n    max-width: 1100px;\n    transform: translateX(-50%);\n    text-align: center;\n    color: #ffffff;\n  }\n\n  .xp-storage-content h2 {\n    margin: 0;\n    color: #ffffff;\n    font-size: 36px;\n    line-height: 1.25;\n    font-weight: 400;\n  }\n\n  .xp-storage-content p {\n    margin: 14px auto 0;\n    max-width: 760px;\n    color: #ffffff;\n    font-size: 16px;\n    line-height: 1.55;\n    font-weight: 400;\n  }\n\n  @media (max-width: 1200px) {\n    .xp-storage-img {\n      height: 660px;\n    }\n\n    .xp-storage-content {\n      top: 82px;\n    }\n\n    .xp-storage-content h2 {\n      font-size: 32px;\n    }\n\n    .xp-storage-content p {\n      font-size: 15px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-storage-banner {\n      display: flex;\n      flex-direction: column;\n      background: #ffffff;\n      min-height: auto;\n    }\n\n    .xp-storage-picture {\n      width: 100%;\n      order: 1;\n    }\n\n    .xp-storage-img {\n      width: 100%;\n      height: auto;\n      min-height: 0;\n      display: block;\n      object-fit: contain;\n      object-position: center top;\n    }\n\n    .xp-storage-content {\n      position: static;\n      order: 2;\n      width: 100%;\n      max-width: none;\n      transform: none;\n      text-align: left;\n      background: #ffffff;\n      color: #000000;\n      padding: 31px 28px 30px;\n    }\n\n    .xp-storage-content h2 {\n      margin: 0;\n      max-width: 335px;\n      color: #000000;\n      font-size: 28px;\n      line-height: 1.42;\n      font-weight: 400;\n      letter-spacing: -0.02em;\n    }\n\n    .xp-storage-content p {\n      margin: 24px 0 0;\n      max-width: 335px;\n      color: #58616f;\n      font-size: 16px;\n      line-height: 1.55;\n      font-weight: 400;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-storage-content {\n      padding: 31px 28px 30px;\n    }\n\n    .xp-storage-content h2 {\n      font-size: 28px;\n      line-height: 1.42;\n    }\n\n    .xp-storage-content p {\n      font-size: 16px;\n      line-height: 1.55;\n      margin-top: 24px;\n    }\n  }\n\n  @media (max-width: 380px) {\n    .xp-storage-content {\n      padding-left: 24px;\n      padding-right: 24px;\n    }\n\n    .xp-storage-content h2 {\n      font-size: 26px;\n    }\n\n    .xp-storage-content p {\n      font-size: 15px;\n    }\n  }\n<\/style>\n\n<section class=\"xp-storage-banner\">\n  <picture class=\"xp-storage-picture\">\n    <!-- Mobile image -->\n    <source\n      media=\"(max-width: 750px)\"\n      srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/94e10ce071fb42eabbaa839109907fb2.jpg\"\n    >\n\n    <!-- Desktop image -->\n    <img decoding=\"async\"\n      class=\"xp-storage-img\"\n      src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/52016505ddae47388a656156d036cd33.jpg\"\n      alt=\"Refined materials, immersive comfort\"\n    >\n  <\/picture>\n\n  <div class=\"xp-storage-content\">\n\n    <h2>All-Scenario AI Voice Control<\/h2>\n    <p>Ultra-fast wake-up, multi-zone recognition, support for commands from the rear, natural dialogue, continuous evolution via OTA.\u2074<\/p>\n  <\/div>\n<\/section>\n\n<style>\n \n\n  .xp-storage-banner {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    background: #ffffff;\n    font-family: basis_grotesque_regular;\n  }\n\n  .xp-storage-picture {\n    display: block;\n    width: 100%;\n  }\n\n  .xp-storage-img {\n    width: 100%;\n    height: 790px;\n    display: block;\n    object-fit: cover;\n    object-position: center;\n  }\n\n  .xp-storage-content {\n    position: absolute;\n    z-index: 2;\n    top: 96px;\n    left: 50%;\n    width: 90%;\n    max-width: 1100px;\n    transform: translateX(-50%);\n    text-align: center;\n    color: #ffffff;\n  }\n\n  .xp-storage-content h2 {\n    margin: 0;\n    color: #ffffff;\n    font-size: 36px;\n    line-height: 1.25;\n    font-weight: 400;\n  }\n\n  .xp-storage-content p {\n    margin: 14px auto 0;\n    max-width: 760px;\n    color: #ffffff;\n    font-size: 16px;\n    line-height: 1.55;\n    font-weight: 400;\n  }\n\n  @media (max-width: 1200px) {\n    .xp-storage-img {\n      height: 660px;\n    }\n\n    .xp-storage-content {\n      top: 82px;\n    }\n\n    .xp-storage-content h2 {\n      font-size: 32px;\n    }\n\n    .xp-storage-content p {\n      font-size: 15px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-storage-banner {\n      display: flex;\n      flex-direction: column;\n      background: #ffffff;\n      min-height: auto;\n    }\n\n    .xp-storage-picture {\n      width: 100%;\n      order: 1;\n    }\n\n    .xp-storage-img {\n      width: 100%;\n      height: auto;\n      min-height: 0;\n      display: block;\n      object-fit: contain;\n      object-position: center top;\n    }\n\n    .xp-storage-content {\n      position: static;\n      order: 2;\n      width: 100%;\n      max-width: none;\n      transform: none;\n      text-align: left;\n      background: #ffffff;\n      color: #000000;\n      padding: 31px 28px 30px;\n    }\n\n    .xp-storage-content h2 {\n      margin: 0;\n      max-width: 335px;\n      color: #000000;\n      font-size: 28px;\n      line-height: 1.42;\n      font-weight: 400;\n      letter-spacing: -0.02em;\n    }\n\n    .xp-storage-content p {\n      margin: 24px 0 0;\n      max-width: 335px;\n      color: #58616f;\n      font-size: 16px;\n      line-height: 1.55;\n      font-weight: 400;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-storage-content {\n      padding: 31px 28px 30px;\n    }\n\n    .xp-storage-content h2 {\n      font-size: 28px;\n      line-height: 1.42;\n    }\n\n    .xp-storage-content p {\n      font-size: 16px;\n      line-height: 1.55;\n      margin-top: 24px;\n    }\n  }\n\n  @media (max-width: 380px) {\n    .xp-storage-content {\n      padding-left: 24px;\n      padding-right: 24px;\n    }\n\n    .xp-storage-content h2 {\n      font-size: 26px;\n    }\n\n    .xp-storage-content p {\n      font-size: 15px;\n    }\n  }\n<\/style>\n\n\n\n<section class=\"xp-storage-banner\">\n  <picture class=\"xp-storage-picture\">\n    <!-- Mobile image -->\n    <source\n      media=\"(max-width: 750px)\"\n      srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/f2f719bcaeda4698990f83642f2fe485.png\"\n    >\n\n    <!-- Desktop image -->\n    <img decoding=\"async\"\n      class=\"xp-storage-img\"\n      src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/f2f719bcaeda4698990f83642f2fe485.png\"\n      alt=\"Refined materials, immersive comfort\"\n    >\n  <\/picture>\n\n  <div class=\"xp-storage-content\">\n    <h2>Advanced XPILOT ASSIST Technology \u00b3<\/h2>\n    <p>The new G9 incorporates a full suite of advanced driver and parking assistance features for a smooth and intelligent driving experience.<\/p>\n  <\/div>\n<\/section>\n\n<style>\n \n\n  .xp-storage-banner {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    background: #ffffff;\n    font-family: basis_grotesque_regular;\n  }\n\n  .xp-storage-picture {\n    display: block;\n    width: 100%;\n  }\n\n  .xp-storage-img {\n    width: 100%;\n    height: 790px;\n    display: block;\n    object-fit: cover;\n    object-position: center;\n  }\n\n  .xp-storage-content {\n    position: absolute;\n    z-index: 2;\n    top: 96px;\n    left: 50%;\n    width: 90%;\n    max-width: 1100px;\n    transform: translateX(-50%);\n    text-align: center;\n    color: #ffffff;\n  }\n\n  .xp-storage-content h2 {\n    margin: 0;\n    color: #ffffff;\n    font-size: 36px;\n    line-height: 1.25;\n    font-weight: 400;\n  }\n\n  .xp-storage-content p {\n    margin: 14px auto 0;\n    max-width: 760px;\n    color: #ffffff;\n    font-size: 16px;\n    line-height: 1.55;\n    font-weight: 400;\n  }\n\n  @media (max-width: 1200px) {\n    .xp-storage-img {\n      height: 660px;\n    }\n\n    .xp-storage-content {\n      top: 82px;\n    }\n\n    .xp-storage-content h2 {\n      font-size: 32px;\n    }\n\n    .xp-storage-content p {\n      font-size: 15px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-storage-banner {\n      display: flex;\n      flex-direction: column;\n      background: #ffffff;\n      min-height: auto;\n    }\n\n    .xp-storage-picture {\n      width: 100%;\n      order: 1;\n    }\n\n    .xp-storage-img {\n      width: 100%;\n      height: auto;\n      min-height: 0;\n      display: block;\n      object-fit: contain;\n      object-position: center top;\n    }\n\n    .xp-storage-content {\n      position: static;\n      order: 2;\n      width: 100%;\n      max-width: none;\n      transform: none;\n      text-align: left;\n      background: #ffffff;\n      color: #000000;\n      padding: 31px 28px 30px;\n    }\n\n    .xp-storage-content h2 {\n      margin: 0;\n      max-width: 335px;\n      color: #000000;\n      font-size: 28px;\n      line-height: 1.42;\n      font-weight: 400;\n      letter-spacing: -0.02em;\n    }\n\n    .xp-storage-content p {\n      margin: 24px 0 0;\n      max-width: 335px;\n      color: #58616f;\n      font-size: 16px;\n      line-height: 1.55;\n      font-weight: 400;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-storage-content {\n      padding: 31px 28px 30px;\n    }\n\n    .xp-storage-content h2 {\n      font-size: 28px;\n      line-height: 1.42;\n    }\n\n    .xp-storage-content p {\n      font-size: 16px;\n      line-height: 1.55;\n      margin-top: 24px;\n    }\n  }\n\n  @media (max-width: 380px) {\n    .xp-storage-content {\n      padding-left: 24px;\n      padding-right: 24px;\n    }\n\n    .xp-storage-content h2 {\n      font-size: 26px;\n    }\n\n    .xp-storage-content p {\n      font-size: 15px;\n    }\n  }\n<\/style>\n\n\n\n\n\n\n<section class=\"xp-lofic-section\">\n  <div class=\"xp-lofic-container\">\n\n    <div class=\"xp-lofic-image\">\n      <picture>\n        <!-- Mobile image -->\n        <source\n          media=\"(max-width: 750px)\"\n          srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/223cc4b73a5e4134a1ad21a781ff66c3.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n        >\n\n        <!-- Desktop image -->\n        <img decoding=\"async\"\n          src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/de7fc98304ef477981ca68c8c705d9c2.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n          alt=\"XPENG Full-Stack LOFIC Architecture\"\n        >\n      <\/picture>\n    <\/div>\n\n    <div class=\"xp-lofic-content\">\n\n      <div class=\"xp-lofic-item\">\n        <h3>XPENG Full-Stack LOFIC Architecture<\/h3>\n        <p>\n          Equipped with a new binocular camera, along with multiple cameras and sensors around the vehicle,\n          XPENG Full-Stack LOFIC Architecture improves environmental perception across a wide range of driving\n          scenarios, adapting seamlessly to both bright and low-light conditions.\n        <\/p>\n      <\/div>\n\n      <div class=\"xp-lofic-item\">\n        <h3>Advanced Sensor System<\/h3>\n        <p>\n          Visual perception range is extended by 125% <sup>1<\/sup> compared with the previous generation,\n          with the ability to accurately recognize and distinguish 49 types of obstacles \u2014 both dynamic and static.\n        <\/p>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n \n\n  .xp-lofic-section {\n    width: 100%;\n    background: #ffffff;\n    padding: 72px 20px 70px;\n     font-family: basis_grotesque_regular;\n    overflow: hidden;\n  }\n\n  .xp-lofic-container {\n    width: 100%;\n    max-width: 1024px;\n    margin: 0 auto;\n    background: #f7f7f7;\n  }\n\n  .xp-lofic-image {\n    width: 100%;\n    height: auto;\n    overflow: hidden;\n    background: #eeeeee;\n  }\n\n  .xp-lofic-image picture,\n  .xp-lofic-image img {\n    width: 100%;\n    display: block;\n  }\n\n  .xp-lofic-image img {\n    height: auto;\n    object-fit: contain;\n    object-position: center;\n  }\n\n  .xp-lofic-content {\n    width: 100%;\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 88px;\n    padding: 36px 24px 36px;\n    background: #f7f7f7;\n  }\n\n  .xp-lofic-item {\n    color: #000000;\n  }\n\n  .xp-lofic-item h3 {\n    position: relative;\n    margin: 0 0 18px;\n    padding-left: 14px;\n    color: #000000;\n    font-size: 17px;\n    line-height: 1.35;\n    font-weight: 700;\n  }\n\n  .xp-lofic-item h3::before {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    top: 4px;\n    width: 2px;\n    height: 17px;\n    background: #8cc63f;\n  }\n\n  .xp-lofic-item p {\n    margin: 0;\n    color: #566070;\n    font-size: 13px;\n    line-height: 1.75;\n    font-weight: 400;\n    letter-spacing: 0.02em;\n  }\n\n  .xp-lofic-item sup {\n    font-size: 9px;\n    position: relative;\n    top: -3px;\n  }\n\n  @media (max-width: 1200px) {\n    .xp-lofic-container {\n      max-width: 980px;\n    }\n\n    .xp-lofic-content {\n      gap: 60px;\n    }\n  }\n\n  @media (max-width: 900px) {\n    .xp-lofic-section {\n      padding: 52px 20px;\n    }\n\n    .xp-lofic-content {\n      gap: 34px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-lofic-section {\n      padding: 52px 20px 58px;\n      background: #ffffff;\n    }\n\n    .xp-lofic-container {\n      max-width: none;\n      width: 100%;\n      background: #ffffff;\n    }\n\n    .xp-lofic-image {\n      width: 100%;\n      height: auto;\n      overflow: hidden;\n      background: transparent;\n    }\n\n    .xp-lofic-image picture,\n    .xp-lofic-image img {\n      width: 100%;\n      height: auto;\n      display: block;\n    }\n\n    .xp-lofic-image img {\n      object-fit: contain;\n      object-position: center;\n    }\n\n    .xp-lofic-content {\n      display: block;\n      padding: 34px 0 0;\n      background: #ffffff;\n    }\n\n    .xp-lofic-item {\n      margin-bottom: 34px;\n    }\n\n    .xp-lofic-item:last-child {\n      margin-bottom: 0;\n    }\n\n    .xp-lofic-item h3 {\n      position: relative;\n      margin: 0 0 13px;\n      padding-left: 10px;\n      color: #000000;\n      font-size: 16px;\n      line-height: 1.45;\n      font-weight: 400;\n    }\n\n    .xp-lofic-item h3::before {\n      content: \"\";\n      position: absolute;\n      left: 0;\n      top: 6px;\n      width: 2px;\n      height: 16px;\n      background: #8cc63f;\n    }\n\n    .xp-lofic-item p {\n      margin: 0;\n      color: #536070;\n      font-size: 11px;\n      line-height: 1.65;\n      font-weight: 400;\n      letter-spacing: 0;\n    }\n\n    .xp-lofic-item sup {\n      font-size: 8px;\n      position: relative;\n      top: -3px;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-lofic-section {\n      padding: 52px 20px 58px;\n    }\n\n    .xp-lofic-content {\n      padding-top: 34px;\n    }\n\n    .xp-lofic-item {\n      margin-bottom: 34px;\n    }\n  }\n<\/style>\n\n\n\n\n\n<section class=\"xp-power-banner\">\n  <picture>\n    <!-- Desktop 4K -->\n    <source\n      media=\"(min-width: 1920px)\"\n      srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/fadbae5a2039417d82934b41a25682a1.png?x-oss-process=image%2Fresize%2Cw_3840%2Fquality%2Cq_90%2Finterlace%2C1\"\n    >\n\n    <!-- Mobile -->\n    <source\n      media=\"(max-width: 750px)\"\n      srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/9b178b9d2e3b4f8caf86cb095fa6aa45.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n    >\n\n    <!-- Desktop -->\n    <img decoding=\"async\"\n      class=\"xp-power-img\"\n      src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/fadbae5a2039417d82934b41a25682a1.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n      alt=\"XPENG G9 refined power all-terrain agility\"\n    >\n  <\/picture>\n\n  <div class=\"xp-power-header\">\n<div class=\"index-module__title--ncC47PRj text-display-title\"\n                            style=\"color: rgb(255, 255, 255); translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);\">\n                            <div class=\"index-module__closeIcon--ToFHl71Q close-icon\" style=\"color: rgb(255, 255, 255); opacity: 1;\">\n                                <svg class=\"icon undefined\" aria-hidden=\"true\">\n                                    <use xlink:href=\"#icon-x-new\"><\/use>\n                                <\/svg><\/div>\n                                <div style=\"display: flex; align-items: center; justify-content: center; color: white; font-family: 'basis_grotesque_regular', sans-serif; width: 100%;\">\n                                    <img decoding=\"async\" class=\"x-img\"\n                                      style=\"height: 20px !important; width: 30px !important; margin-right: 7px; margin-bottom: 10%; align-items: baseline;\" \n                                      src=\"data:image\/svg+xml,%3Csvg width='44' height='31' viewBox='0 0 44 31' fill='none' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 31L16.8 15.5L0 0H4.2L21 15.5L4.2 31H0Z' fill='white'\/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M44 31L27.2 15.5L44 0H39.8L23 15.5L39.8 31H44Z' fill='white'\/%3E%3C\/svg%3E%0A\" \n                                      alt=\"Icon\">\n                                  \n                                    <font style=\"font-size: 3.5rem; font-family: 'basis_grotesque_regular'; letter-spacing: normal;\">\n                                      Refined power, all-terrain agility\n                                    <\/font>\n                                <\/div>\n                                                      \n                                <\/div>\n  <\/div>\n\n  <div class=\"xp-power-bottom\">\n    <div class=\"xp-power-item\">\n      <p>Adaptive ride height and comfort<\/p>\n    <\/div>\n\n    <div class=\"xp-power-item\">\n      <p>Balanced torque distribution across all four wheels<\/p>\n    <\/div>\n\n    <div class=\"xp-power-item\">\n      <p>Maximum power: 575 hp, 695 Nm high electric performance<\/p>\n    <\/div>\n  <\/div>\n<\/section>\n\n<style>\n \n\n  .xp-power-banner {\n    position: relative;\n    width: 100%;\n    height: 820px;\n    overflow: hidden;\n    background: #000000;\n    font-family: basis_grotesque_regular;\n  }\n\n  .xp-power-banner picture {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n\n  .xp-power-img {\n    width: 100%;\n    height: 100%;\n    display: block;\n    object-fit: cover;\n    object-position: center;\n  }\n\n  .xp-power-banner::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    pointer-events: none;\n    background:\n      linear-gradient(\n        to bottom,\n        rgba(0, 0, 0, 0.18) 0%,\n        rgba(0, 0, 0, 0.02) 36%,\n        rgba(0, 0, 0, 0.36) 100%\n      );\n  }\n\n  .xp-power-header {\n    position: absolute;\n    z-index: 2;\n    top: 86px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 92%;\n    text-align: center;\n    color: #ffffff;\n  }\n\n  .xp-power-header h2 {\n    margin: 0;\n    color: #ffffff;\n    font-size: 34px;\n    line-height: 1.2;\n    font-weight: 600;\n    letter-spacing: -0.03em;\n  }\n\n  .xp-power-close {\n    position: relative;\n    top: -4px;\n    right: 8px;\n    display: inline-block;\n    color: #ffffff;\n    font-size: 26px;\n    line-height: 1;\n    font-weight: 200;\n    opacity: 0.9;\n    transform: rotate(0deg);\n  }\n\n  .xp-power-bottom {\n    position: absolute;\n    z-index: 2;\n    left: 0;\n    right: 0;\n    bottom: 68px;\n    width: 100%;\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 24px;\n    padding: 0 56px;\n    color: #ffffff;\n  }\n\n  .xp-power-item {\n    text-align: center;\n  }\n\n  .xp-power-item p {\n    margin: 0;\n    color: #ffffff;\n    font-size: 18px;\n    line-height: 1.45;\n    font-weight: 400;\n    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);\n  }\n\n  @media (max-width: 1200px) {\n    .xp-power-banner {\n      height: 720px;\n    }\n\n    .xp-power-header {\n      top: 74px;\n    }\n\n    .xp-power-header h2 {\n      font-size: 31px;\n    }\n\n    .xp-power-bottom {\n      bottom: 54px;\n      padding: 0 34px;\n      gap: 18px;\n    }\n\n    .xp-power-item p {\n      font-size: 16px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-power-banner {\n      height: 730px;\n      min-height: 730px;\n      background: #000000;\n    }\n\n    .xp-power-img {\n      height: 100%;\n      object-fit: cover;\n      object-position: center top;\n    }\n\n    .xp-power-banner::after {\n      background:\n        linear-gradient(\n          to bottom,\n          rgba(0, 0, 0, 0.04) 0%,\n          rgba(0, 0, 0, 0.02) 38%,\n          rgba(0, 0, 0, 0.45) 100%\n        );\n    }\n\n    .xp-power-header {\n      top: 160px;\n      width: 100%;\n      padding: 0 38px;\n    }\n\n    .xp-power-header h2 {\n      max-width: 330px;\n      margin: 0 auto;\n      font-size: 35px;\n      line-height: 1.08;\n      font-weight: 700;\n      letter-spacing: -0.04em;\n    }\n\n    .xp-power-close {\n      position: absolute;\n      top: -18px;\n      left: 30px;\n      right: auto;\n      font-size: 23px;\n      font-weight: 200;\n    }\n\n    .xp-power-bottom {\n      bottom: 66px;\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n      gap: 18px 18px;\n      padding: 0 38px;\n      align-items: end;\n    }\n\n    .xp-power-item {\n      text-align: center;\n    }\n\n    .xp-power-item p {\n      font-size: 12px;\n      line-height: 1.28;\n      font-weight: 500;\n    }\n\n    .xp-power-item:nth-child(3) {\n      grid-column: 1 \/ -1;\n      padding-top: 2px;\n    }\n  }\n\n  @media (max-width: 430px) {\n    .xp-power-banner {\n      height: 730px;\n      min-height: 730px;\n    }\n\n    .xp-power-header {\n      top: 158px;\n      padding: 0 34px;\n    }\n\n    .xp-power-header h2 {\n      font-size: 34px;\n    }\n\n    .xp-power-bottom {\n      bottom: 65px;\n      padding: 0 36px;\n      gap: 16px 16px;\n    }\n\n    .xp-power-item p {\n      font-size: 12px;\n    }\n  }\n\n  @media (max-width: 380px) {\n    .xp-power-header h2 {\n      font-size: 31px;\n    }\n\n    .xp-power-bottom {\n      padding: 0 28px;\n    }\n\n    .xp-power-item p {\n      font-size: 11px;\n    }\n  }\n<\/style>\n\n\n\n\n\n\n\n\n\n\n<section class=\"xp-ride-carousel\" id=\"xpRideCarousel\">\n  <div class=\"xp-ride-wrapper\">\n\n    <div class=\"xp-ride-media\">\n      <div class=\"xp-ride-track\">\n\n        <!-- Slide 1 -->\n        <article class=\"xp-ride-slide active\">\n          <picture>\n            <source\n              media=\"(min-width: 1920px)\"\n              srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/73143daa7d4c4feb994af098984c190e.png?x-oss-process=image%2Fresize%2Cw_3840%2Fquality%2Cq_90%2Finterlace%2C1\"\n            >\n            <source\n              media=\"(max-width: 750px)\"\n              srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/d8b2ee5bd48e4975ac464ae62ae81ee6.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n            >\n            <img decoding=\"async\"\n              src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/73143daa7d4c4feb994af098984c190e.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n              alt=\"Adaptive ride height and damping\"\n            >\n          <\/picture>\n        <\/article>\n\n        <!-- Slide 2 -->\n        <article class=\"xp-ride-slide\">\n          <video\n            class=\"xp-ride-video\"\n            muted\n            loop\n            autoplay\n            playsinline\n            preload=\"metadata\"\n          >\n            <source\n              src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/379ffb88615a4bbcad0137953e491cbb.mp4\"\n              type=\"video\/mp4\"\n            >\n          <\/video>\n\n          <button class=\"xp-ride-play\" type=\"button\" aria-label=\"Play video\">\n            <span><\/span>\n          <\/button>\n        <\/article>\n\n      <\/div>\n\n      <button class=\"xp-ride-arrow xp-ride-prev\" type=\"button\" aria-label=\"Previous slide\">\n        <span><\/span>\n      <\/button>\n\n      <button class=\"xp-ride-arrow xp-ride-next\" type=\"button\" aria-label=\"Next slide\">\n        <span><\/span>\n      <\/button>\n    <\/div>\n\n    <!-- Mobile text card -->\n    <div class=\"xp-ride-mobile-content\">\n      <h3>Adaptive ride height and damping<\/h3>\n      <p>Adjusted according to speed and mode, smooth and controlled driving<\/p>\n    <\/div>\n\n    <!-- Desktop tabs -->\n    <div class=\"xp-ride-tabs\">\n      <button class=\"xp-ride-tab active\" type=\"button\" data-index=\"0\">\n        Adaptive ride height and damping\n      <\/button>\n\n      <button class=\"xp-ride-tab\" type=\"button\" data-index=\"1\">\n        33.9 m braking distance at 100 km\/h\u00b9\n      <\/button>\n    <\/div>\n\n    <!-- Desktop description -->\n    <div class=\"xp-ride-description\">\n      Adjusted according to speed and mode, smooth and controlled driving\n    <\/div>\n\n    <!-- Mobile progress -->\n    <div class=\"xp-ride-dots\">\n      <button class=\"xp-ride-dot active\" type=\"button\" data-index=\"0\" aria-label=\"Slide 1\"><\/button>\n      <button class=\"xp-ride-dot\" type=\"button\" data-index=\"1\" aria-label=\"Slide 2\"><\/button>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n \n\n  .xp-ride-carousel {\n    width: 100%;\n    background: #ffffff;\n    padding: 64px 0 46px;\n    overflow: hidden;\n    font-family: basis_grotesque_regular;\n  }\n\n  .xp-ride-wrapper {\n    width: 100%;\n    margin: 0 auto;\n  }\n\n  .xp-ride-media {\n    position: relative;\n    width: min(72vw, 1345px);\n    height: 672px;\n    margin: 0 auto;\n    overflow: visible;\n    cursor: grab;\n    touch-action: pan-y;\n    user-select: none;\n  }\n\n  .xp-ride-media.is-dragging {\n    cursor: grabbing;\n  }\n\n  .xp-ride-track {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border-radius: 3px;\n    background: #f4f4f4;\n  }\n\n  .xp-ride-slide {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    visibility: hidden;\n    transform: scale(1.012);\n    transition:\n      opacity 0.4s ease,\n      visibility 0.4s ease,\n      transform 0.65s ease;\n  }\n\n  .xp-ride-slide.active {\n    opacity: 1;\n    visibility: visible;\n    transform: scale(1);\n    z-index: 2;\n  }\n\n  .xp-ride-slide picture,\n  .xp-ride-slide img,\n  .xp-ride-video {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n\n  .xp-ride-slide img,\n  .xp-ride-video {\n    object-fit: cover;\n    object-position: center;\n    pointer-events: none;\n    user-select: none;\n    -webkit-user-drag: none;\n  }\n\n  .xp-ride-play {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    z-index: 5;\n    width: 56px;\n    height: 56px;\n    border: 0;\n    border-radius: 12px;\n    background: rgba(0, 0, 0, 0.38);\n    transform: translate(-50%, -50%);\n    cursor: pointer;\n    display: none;\n    place-items: center;\n  }\n\n  .xp-ride-play span {\n    width: 0;\n    height: 0;\n    margin-left: 5px;\n    border-top: 15px solid transparent;\n    border-bottom: 15px solid transparent;\n    border-left: 24px solid #ffffff;\n  }\n\n  .xp-ride-arrow {\n    position: absolute;\n    top: 50%;\n    z-index: 50;\n    width: 52px;\n    height: 52px;\n    border: 0;\n    border-radius: 50%;\n    background: transparent;\n    cursor: pointer;\n    transform: translateY(-50%);\n    display: grid;\n    place-items: center;\n    transition: opacity 0.25s ease, background 0.25s ease;\n  }\n\n  .xp-ride-arrow:hover {\n    background: rgba(255, 255, 255, 0.18);\n  }\n\n  .xp-ride-arrow:disabled {\n    opacity: 0.28;\n    cursor: default;\n    pointer-events: none;\n  }\n\n  .xp-ride-prev {\n    left: 18px;\n  }\n\n  .xp-ride-next {\n    right: 18px;\n  }\n\n  .xp-ride-arrow span {\n    width: 17px;\n    height: 17px;\n    display: block;\n    border-top: 2px solid #8f8f8f;\n    border-right: 2px solid #8f8f8f;\n    pointer-events: none;\n  }\n\n  .xp-ride-prev span {\n    transform: rotate(-135deg);\n    margin-left: 6px;\n  }\n\n  .xp-ride-next span {\n    transform: rotate(45deg);\n    margin-right: 6px;\n  }\n\n  .xp-ride-tabs {\n    width: min(69vw, 1290px);\n    margin: 26px auto 0;\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    border-bottom: 1px solid #dedede;\n  }\n\n  .xp-ride-tab {\n    position: relative;\n    min-height: 44px;\n    border: 0;\n    background: transparent;\n    padding: 0 28px 16px;\n    color: #9a9a9a;\n    font-size: 16px;\n    line-height: 1.35;\n    font-weight: 700;\n    font-family: inherit;\n    text-align: center;\n    cursor: pointer;\n    transition: color 0.25s ease;\n  }\n\n  .xp-ride-tab.active {\n    color: #000000;\n  }\n\n  .xp-ride-tab::after {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    bottom: -1px;\n    width: 100%;\n    height: 2px;\n    background: #86bf25;\n    transform: scaleX(0);\n    transform-origin: center;\n    transition: transform 0.28s ease;\n  }\n\n  .xp-ride-tab.active::after {\n    transform: scaleX(1);\n  }\n\n  .xp-ride-description {\n    width: min(69vw, 1290px);\n    margin: 22px auto 0;\n    color: #8e9098;\n    font-size: 18px;\n    line-height: 1.5;\n    letter-spacing: 0.7px;\n    text-align: center;\n  }\n\n  .xp-ride-mobile-content,\n  .xp-ride-dots {\n    display: none;\n  }\n\n  @media (max-width: 1400px) {\n    .xp-ride-media {\n      width: 82vw;\n      height: 52vw;\n      max-height: 672px;\n    }\n\n    .xp-ride-tabs,\n    .xp-ride-description {\n      width: 78vw;\n    }\n  }\n\n  @media (max-width: 900px) {\n    .xp-ride-carousel {\n      padding: 54px 0 42px;\n    }\n\n    .xp-ride-media {\n      width: calc(100% - 44px);\n      height: 58vw;\n    }\n\n    .xp-ride-tabs,\n    .xp-ride-description {\n      width: calc(100% - 44px);\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-ride-carousel {\n      padding: 0 0 46px;\n      background: #f7f7f7;\n    }\n\n    .xp-ride-wrapper {\n      background: #ffffff;\n      border-radius: 0 0 8px 8px;\n      overflow: hidden;\n    }\n\n    .xp-ride-media {\n      width: 100%;\n      height: auto;\n      margin: 0 auto;\n      overflow: hidden;\n      border-radius: 0;\n      background: transparent;\n    }\n\n    .xp-ride-track {\n      height: auto;\n      aspect-ratio: 282 \/ 346;\n      border-radius: 0;\n      overflow: hidden;\n      background: #eeeeee;\n    }\n\n    .xp-ride-slide img,\n    .xp-ride-video {\n      object-fit: cover;\n      object-position: center top;\n    }\n\n    .xp-ride-arrow,\n    .xp-ride-tabs,\n    .xp-ride-description {\n      display: none;\n    }\n\n    .xp-ride-play {\n      display: grid;\n      width: 60px;\n      height: 60px;\n      background: transparent;\n      border-radius: 0;\n    }\n\n    .xp-ride-play span {\n      margin-left: 5px;\n      border-top-width: 20px;\n      border-bottom-width: 20px;\n      border-left-width: 31px;\n      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.36));\n    }\n\n    .xp-ride-mobile-content {\n      display: block;\n      width: 100%;\n      padding: 23px 24px 48px;\n      background: #ffffff;\n    }\n\n    .xp-ride-mobile-content h3 {\n      max-width: 245px;\n      margin: 0 0 20px;\n      color: #202020;\n      font-size: 21px;\n      line-height: 1.35;\n      font-weight: 400;\n      letter-spacing: -0.01em;\n    }\n\n    .xp-ride-mobile-content p {\n      max-width: 250px;\n      margin: 0;\n      color: #7b7b7b;\n      font-size: 11px;\n      line-height: 1.65;\n      font-weight: 400;\n    }\n\n    .xp-ride-dots {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding-left: 24px;\n      margin-top: -28px;\n      padding-bottom: 36px;\n      background: #ffffff;\n    }\n\n    .xp-ride-dot {\n      width: 16px;\n      height: 2px;\n      border: 0;\n      padding: 0;\n      background: #eeeeee;\n      cursor: pointer;\n      transition: background 0.25s ease;\n    }\n\n    .xp-ride-dot.active {\n      background: #86bf25;\n    }\n  }\n\n  @media (max-width: 420px) {\n    .xp-ride-mobile-content {\n      padding: 23px 24px 48px;\n    }\n\n    .xp-ride-mobile-content h3 {\n      font-size: 21px;\n      line-height: 1.35;\n    }\n\n    .xp-ride-mobile-content p {\n      font-size: 11px;\n      line-height: 1.65;\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    const section = document.getElementById(\"xpRideCarousel\");\n    if (!section) return;\n\n    const media = section.querySelector(\".xp-ride-media\");\n    const slides = Array.from(section.querySelectorAll(\".xp-ride-slide\"));\n    const tabs = Array.from(section.querySelectorAll(\".xp-ride-tab\"));\n    const dots = Array.from(section.querySelectorAll(\".xp-ride-dot\"));\n    const prevBtn = section.querySelector(\".xp-ride-prev\");\n    const nextBtn = section.querySelector(\".xp-ride-next\");\n    const mobileTitle = section.querySelector(\".xp-ride-mobile-content h3\");\n    const mobileText = section.querySelector(\".xp-ride-mobile-content p\");\n\n    const data = [\n      {\n        title: \"Adaptive ride height and damping\",\n        text: \"Adjusted according to speed and mode, smooth and controlled driving\"\n      },\n      {\n        title: \"33.9 m braking distance at 100 km\/h\u00b9\",\n        text: \"High-performance brakes, advanced torque control, assured stopping power\"\n      }\n    ];\n\n    let current = 0;\n    let startX = 0;\n    let endX = 0;\n    let isDragging = false;\n    let locked = false;\n\n    function refreshControls() {\n      if (prevBtn) prevBtn.disabled = current === 0;\n      if (nextBtn) nextBtn.disabled = current === slides.length - 1;\n    }\n\n    function setSlide(index) {\n      const nextIndex = Math.max(0, Math.min(index, slides.length - 1));\n      if (locked || nextIndex === current) return;\n\n      locked = true;\n      current = nextIndex;\n\n      slides.forEach(function (slide, slideIndex) {\n        slide.classList.toggle(\"active\", slideIndex === current);\n\n        const video = slide.querySelector(\"video\");\n        if (video) {\n          if (slideIndex === current) {\n            video.play().catch(function () {});\n          } else {\n            video.pause();\n          }\n        }\n      });\n\n      tabs.forEach(function (tab, tabIndex) {\n        tab.classList.toggle(\"active\", tabIndex === current);\n      });\n\n      dots.forEach(function (dot, dotIndex) {\n        dot.classList.toggle(\"active\", dotIndex === current);\n      });\n\n      if (mobileTitle) mobileTitle.textContent = data[current].title;\n      if (mobileText) mobileText.textContent = data[current].text;\n\n      const description = section.querySelector(\".xp-ride-description\");\n      if (description) description.textContent = data[current].text;\n\n      refreshControls();\n\n      setTimeout(function () {\n        locked = false;\n      }, 360);\n    }\n\n    function goNext() {\n      setSlide(current + 1);\n    }\n\n    function goPrev() {\n      setSlide(current - 1);\n    }\n\n    function handleSwipe(distance) {\n      if (Math.abs(distance) < 55) return;\n\n      if (distance > 0) {\n        goNext();\n      } else {\n        goPrev();\n      }\n    }\n\n    [prevBtn, nextBtn].forEach(function (btn) {\n      if (!btn) return;\n\n      btn.addEventListener(\"pointerdown\", function (event) {\n        event.stopPropagation();\n      });\n\n      btn.addEventListener(\"pointerup\", function (event) {\n        event.stopPropagation();\n      });\n\n      btn.addEventListener(\"click\", function (event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (btn.classList.contains(\"xp-ride-prev\")) goPrev();\n        if (btn.classList.contains(\"xp-ride-next\")) goNext();\n      });\n    });\n\n    tabs.forEach(function (tab) {\n      tab.addEventListener(\"click\", function () {\n        setSlide(Number(this.dataset.index));\n      });\n    });\n\n    dots.forEach(function (dot) {\n      dot.addEventListener(\"click\", function () {\n        setSlide(Number(this.dataset.index));\n      });\n    });\n\n    media.addEventListener(\"pointerdown\", function (event) {\n      if (event.target.closest(\".xp-ride-arrow\")) return;\n\n      isDragging = true;\n      startX = event.clientX;\n      endX = event.clientX;\n      media.classList.add(\"is-dragging\");\n\n      if (media.setPointerCapture) {\n        media.setPointerCapture(event.pointerId);\n      }\n    });\n\n    media.addEventListener(\"pointermove\", function (event) {\n      if (!isDragging) return;\n      endX = event.clientX;\n    });\n\n    media.addEventListener(\"pointerup\", function (event) {\n      if (!isDragging) return;\n\n      isDragging = false;\n      media.classList.remove(\"is-dragging\");\n\n      handleSwipe(startX - endX);\n\n      try {\n        media.releasePointerCapture(event.pointerId);\n      } catch (error) {}\n    });\n\n    media.addEventListener(\"pointercancel\", function () {\n      isDragging = false;\n      media.classList.remove(\"is-dragging\");\n    });\n\n    media.addEventListener(\"dragstart\", function (event) {\n      event.preventDefault();\n    });\n\n    const observer = new IntersectionObserver(\n      function (entries) {\n        entries.forEach(function (entry) {\n          const activeVideo = slides[current].querySelector(\"video\");\n\n          if (!activeVideo) return;\n\n          if (entry.isIntersecting && entry.intersectionRatio >= 0.35) {\n            activeVideo.play().catch(function () {});\n          } else {\n            activeVideo.pause();\n          }\n        });\n      },\n      {\n        threshold: [0, 0.25, 0.35, 0.6]\n      }\n    );\n\n    observer.observe(section);\n\n    refreshControls();\n  })();\n<\/script>\n\n\n\n<section class=\"xp-storage-banner\">\n  <picture class=\"xp-storage-picture\">\n    <!-- Mobile image -->\n    <source\n      media=\"(max-width: 750px)\"\n      srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-08\/b8e9027a600f483a817d099cf5f4a9a4.jpg\"\n    >\n\n    <!-- Desktop image -->\n    <img decoding=\"async\"\n      class=\"xp-storage-img\"\n      src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-07\/074f7e27ff144613befc1307cbd85dcc.jpg\"\n      alt=\"Refined materials, immersive comfort\"\n    >\n  <\/picture>\n\n  <div class=\"xp-storage-content\">\n    <h2>Confidence on every ride<\/h2>\n  <\/div>\n<\/section>\n\n\n<section class=\"xp-safety-grid-section\">\n  <div class=\"xp-safety-grid\">\n\n    <article class=\"xp-safety-card\">\n      <picture>\n        <source\n          media=\"(max-width: 750px)\"\n          srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-07\/080cd7bea56c4537a01103d7a4fec980.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n        >\n        <img decoding=\"async\"\n          src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-07\/080cd7bea56c4537a01103d7a4fec980.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n          alt=\"5-star Euro NCAP safety\"\n        >\n      <\/picture>\n      <div class=\"xp-safety-title\">\n        <h3>5-star Euro NCAP safety, full protection against front, side and rear impacts<\/h3>\n      <\/div>\n    <\/article>\n\n    <article class=\"xp-safety-card\">\n      <picture>\n        <source\n          media=\"(max-width: 750px)\"\n          srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-07\/6693b9b5bed94fa2b82ecd9344ddbe75.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n        >\n        <img decoding=\"async\"\n          src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-07\/6693b9b5bed94fa2b82ecd9344ddbe75.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n          alt=\"14 active safety features\"\n        >\n      <\/picture>\n      <div class=\"xp-safety-title\">\n        <h3>14 active safety features for real-time, holistic protection<\/h3>\n      <\/div>\n    <\/article>\n\n    <article class=\"xp-safety-card\">\n      <picture>\n        <source\n          media=\"(max-width: 750px)\"\n          srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-07\/41277270c0534b36ac96156efbce2c5a.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n        >\n        <img decoding=\"async\"\n          src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-07\/41277270c0534b36ac96156efbce2c5a.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n          alt=\"Steel-aluminium hybrid chassis\"\n        >\n      <\/picture>\n      <div class=\"xp-safety-title\">\n        <h3>Steel-aluminium hybrid chassis, 32,000 Nm\/degree rigidity, maximum cabin protection<\/h3>\n      <\/div>\n    <\/article>\n\n    <article class=\"xp-safety-card\">\n      <picture>\n        <source\n          media=\"(max-width: 750px)\"\n          srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-07\/15294264b7594be98a40725032b0cc6d.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n        >\n        <img decoding=\"async\"\n          src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-07\/15294264b7594be98a40725032b0cc6d.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n          alt=\"Triple-layer protection\"\n        >\n      <\/picture>\n      <div class=\"xp-safety-title\">\n        <h3>Triple-layer protection against shock, fire and heat, enhanced battery safety in all conditions<\/h3>\n      <\/div>\n    <\/article>\n\n  <\/div>\n<\/section>\n\n<style>\n \n\n  .xp-safety-grid-section {\n    width: 100%;\n    background: #ffffff;\n    padding: 58px 0 78px;\n    overflow: hidden;\n    font-family: basis_grotesque_regular;\n  }\n\n  .xp-safety-grid {\n    width: min(86vw, 1365px);\n    margin: 0 auto;\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 30px 30px;\n  }\n\n  .xp-safety-card {\n    position: relative;\n    height: 322px;\n    overflow: hidden;\n    border-radius: 3px;\n    background: #f3f3f3;\n  }\n\n  .xp-safety-card picture,\n  .xp-safety-card img {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n\n  .xp-safety-card img {\n    object-fit: cover;\n    object-position: center;\n    transition: transform 0.55s ease;\n  }\n\n  .xp-safety-card:hover img {\n    transform: scale(1.035);\n  }\n\n  .xp-safety-card::after {\n    content: \"\";\n    position: absolute;\n    inset: auto 0 0;\n    height: 42%;\n    z-index: 1;\n    pointer-events: none;\n    background: linear-gradient(\n      to top,\n      rgba(0, 0, 0, 0.72),\n      rgba(0, 0, 0, 0.36),\n      rgba(0, 0, 0, 0)\n    );\n  }\n\n  .xp-safety-title {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 2;\n    padding: 0 28px 28px;\n  }\n\n  .xp-safety-title h3 {\n    margin: 0;\n    color: #ffffff;\n    font-size: 15px;\n    line-height: 1.45;\n    font-weight: 700;\n    letter-spacing: -0.01em;\n  }\n\n  @media (max-width: 1200px) {\n    .xp-safety-grid {\n      width: calc(100% - 80px);\n      gap: 24px;\n    }\n\n    .xp-safety-card {\n      height: 27vw;\n      min-height: 260px;\n    }\n  }\n\n  @media (max-width: 900px) {\n    .xp-safety-grid {\n      width: calc(100% - 44px);\n      gap: 18px;\n    }\n\n    .xp-safety-card {\n      height: 30vw;\n      min-height: 230px;\n    }\n\n    .xp-safety-title {\n      padding: 0 20px 22px;\n    }\n\n    .xp-safety-title h3 {\n      font-size: 14px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-safety-grid-section {\n      padding: 44px 0 54px;\n      background: #ffffff;\n    }\n\n    .xp-safety-grid {\n      width: 100%;\n      margin: 0;\n      padding: 0 0 0 29px;\n      display: flex;\n      gap: 12px;\n      overflow-x: auto;\n      overflow-y: hidden;\n      scroll-snap-type: x mandatory;\n      scroll-padding-left: 29px;\n      -webkit-overflow-scrolling: touch;\n    }\n\n    .xp-safety-grid::-webkit-scrollbar {\n      display: none;\n    }\n\n    .xp-safety-grid {\n      scrollbar-width: none;\n    }\n\n    .xp-safety-card {\n      flex: 0 0 208px;\n      width: 208px;\n      height: 123px;\n      min-height: 0;\n      border-radius: 2px;\n      scroll-snap-align: start;\n    }\n\n    .xp-safety-card:hover img {\n      transform: none;\n    }\n\n    .xp-safety-card::after {\n      height: 52%;\n      background: linear-gradient(\n        to top,\n        rgba(0, 0, 0, 0.78),\n        rgba(0, 0, 0, 0.38),\n        rgba(0, 0, 0, 0)\n      );\n    }\n\n    .xp-safety-title {\n      padding: 0 8px 9px;\n    }\n\n    .xp-safety-title h3 {\n      font-size: 11px;\n      line-height: 1.22;\n      font-weight: 700;\n      letter-spacing: -0.02em;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n  }\n\n  @media (max-width: 390px) {\n    .xp-safety-grid {\n      padding-left: 28px;\n      gap: 12px;\n    }\n\n    .xp-safety-card {\n      flex-basis: 208px;\n      width: 208px;\n      height: 123px;\n    }\n  }\n<\/style>\n\n\n<section class=\"xp-testdrive\">\n  <div class=\"xp-wrap\">\n\n    <div class=\"xp-left\">\n      <h3>Discover the future of smart mobility<\/h3>\n      <p>Book your XPENG NEW G9 trial<\/p>\n\n      <img decoding=\"async\"\n        class=\"xp-car\"\n        src=\"https:\/\/s-cdn.xpeng.com\/xpwebsite\/prod\/2025-07-11\/f38631124463409680492705dacaef9e.png\"\n        alt=\"XPENG G9\"\n      \/>\n    <\/div>\n\n    <form\n      id=\"Home-form\"\n      class=\"xp-form\"\n      action=\"https:\/\/xpeng.rayaauto.com\/action.php\"\n      method=\"POST\"\n      novalidate\n    >\n      <input type=\"hidden\" id=\"g-recaptcha-response\" name=\"g-recaptcha-response\">\n\n      <div class=\"xp-cars\">\n        <label>\n          <input type=\"radio\" name=\"carType\" value=\"P7+\">\n          <span>P7+<\/span>\n        <\/label>\n\n        <label>\n          <input type=\"radio\" name=\"carType\" value=\"New G6\">\n          <span>New G6<\/span>\n        <\/label>\n\n        <label>\n          <input type=\"radio\" name=\"carType\" value=\"New G9\">\n          <span>New G9<\/span>\n        <\/label>\n\n        <label>\n          <input type=\"radio\" name=\"carType\" value=\"X9\">\n          <span>X9<\/span>\n        <\/label>\n      <\/div>\n\n      <p class=\"xp-main-error\" id=\"mainError\">\n        Please provide all required information.\n      <\/p>\n\n      <div class=\"xp-row\">\n        <div class=\"xp-field\">\n          <input id=\"firstName\" name=\"fname\" type=\"text\" maxlength=\"30\" placeholder=\"First name*\">\n        <\/div>\n\n        <div class=\"xp-field\">\n          <input id=\"lastName\" name=\"lname\" type=\"text\" maxlength=\"30\" placeholder=\"Last Name*\">\n        <\/div>\n      <\/div>\n\n      <div class=\"xp-field\">\n        <input id=\"email\" name=\"email\" type=\"email\" maxlength=\"50\" placeholder=\"E-Mail*\">\n      <\/div>\n\n      <div class=\"xp-field\">\n        <input id=\"phone\" name=\"mobile\" type=\"tel\" maxlength=\"20\" placeholder=\"Phone Number*\">\n      <\/div>\n\n      <div class=\"xp-field\">\n        <input id=\"area\" name=\"area\" type=\"text\" maxlength=\"20\" placeholder=\"Postal Code*\">\n      <\/div>\n\n      <div class=\"xp-field xp-select-field\">\n        <select id=\"subject\" name=\"dropdownInput\">\n          <option value=\"\">Subject*<\/option>\n          <option value=\"Learn More\">Learn More<\/option>\n          <option value=\"Get a quote\">Get a quote<\/option>\n          <option value=\"After-Sales\">After-Sales<\/option>\n          <option value=\"Complaints\">Complaints<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"xp-field xp-select-field\">\n        <select id=\"hearAbout\" name=\"hearAbout\">\n          <option value=\"\">How did you hear about us?<\/option>\n          <option value=\"Events\">Events<\/option>\n          <option value=\"Referral\">Referral<\/option>\n          <option value=\"Outdoor ads\">Outdoor ads<\/option>\n          <option value=\"Facebook\">Facebook<\/option>\n          <option value=\"YouTube\">YouTube<\/option>\n          <option value=\"Instagram\">Instagram<\/option>\n          <option value=\"LinkedIn\">LinkedIn<\/option>\n          <option value=\"Radio advertisement\">Radio advertisement<\/option>\n          <option value=\"Website\">Website<\/option>\n          <option value=\"Tiktok\">Tiktok<\/option>\n        <\/select>\n      <\/div>\n\n      <label class=\"xp-check\">\n        <input id=\"policy\" name=\"policy\" type=\"checkbox\" value=\"1\">\n        <span class=\"xp-check-icon\"><\/span>\n        <span class=\"xp-check-text\">\n          I consent to the processing of my personal data so that XPENG can communicate with me about its products and services.\n          For more information about the processing of your personal data, you can access our privacy statement here:\n          <a href=\"https:\/\/xpeng.com\/eg\/privacy-policy\" target=\"_blank\">Privacy Policy<\/a>\n        <\/span>\n      <\/label>\n\n      <label class=\"xp-check\">\n        <input id=\"subscription\" name=\"subscription\" type=\"checkbox\" value=\"1\">\n        <span class=\"xp-check-icon\"><\/span>\n        <span class=\"xp-check-text\">\n          I consent to the processing of my personal data in order to receive\n          <a href=\"\/eg\/marketing-communications\">personalized advertising by XPENG<\/a>\n          that will better meet my expectations.\n        <\/span>\n      <\/label>\n\n      <button id=\"contactBTN\" type=\"submit\" class=\"xp-btn\">\n        Submit\n      <\/button>\n    <\/form>\n\n  <\/div>\n<\/section>\n\n<style>\n \n\n  .xp-testdrive {\n    width: 100%;\n    min-height: 100vh;\n    background: #fff;\n    padding: 110px 8vw 70px;\n    font-family: basis_grotesque_regular;\n    color: #06152b;\n    overflow: hidden;\n  }\n\n  .xp-wrap {\n    max-width: 1320px;\n    margin: 0 auto;\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) 372px;\n    gap: 90px;\n    align-items: center;\n  }\n\n  .xp-left h2 {\n    margin: 0 0 14px;\n    font-size: 30px;\n    font-weight: 400;\n    color: #001026;\n  }\n\n  .xp-left p {\n    margin: 0 0 130px;\n    font-size: 16px;\n    color: #000;\n  }\n\n  .xp-car {\n    display: block;\n    width: 100%;\n    max-width: 770px;\n    object-fit: contain;\n  }\n\n  .xp-form {\n    width: 100%;\n  }\n\n  .xp-cars {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    margin-bottom: 12px;\n    flex-wrap: wrap;\n  }\n\n  .xp-cars label {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 14px;\n    color: #06152b;\n    cursor: pointer;\n  }\n\n  .xp-cars input {\n    width: 15px;\n    height: 15px;\n    margin: 0;\n    accent-color: #111;\n  }\n\n  .xp-main-error {\n    display: none;\n    margin: 0 0 20px;\n    color: #ff3030;\n    font-size: 13px;\n  }\n\n  .xp-main-error.show {\n    display: block;\n  }\n\n  .xp-row {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 26px;\n  }\n\n  .xp-field {\n    position: relative;\n    width: 100%;\n  }\n\n  .xp-field input,\n  .xp-field select {\n    width: 100%;\n    height: 62px;\n    border: 0;\n    border-bottom: 1px solid #e8e8e8;\n    border-radius: 0;\n    outline: none;\n    background: transparent !important;\n    box-shadow: none !important;\n    padding: 0;\n    font-size: 13px;\n    color: #06152b;\n    font-family: inherit;\n    appearance: none;\n  }\n\n  .xp-field input::placeholder,\n  .xp-field select {\n    color: #aaaebb;\n    opacity: 1;\n  }\n\n  .xp-select-field select {\n    padding-right: 22px;\n    background-image:\n      linear-gradient(45deg, transparent 50%, #9ba0aa 50%),\n      linear-gradient(135deg, #9ba0aa 50%, transparent 50%) !important;\n    background-position:\n      calc(100% - 10px) 50%,\n      calc(100% - 5px) 50% !important;\n    background-size: 5px 5px, 5px 5px !important;\n    background-repeat: no-repeat !important;\n  }\n\n  .xp-field input:-webkit-autofill,\n  .xp-field input:-webkit-autofill:hover,\n  .xp-field input:-webkit-autofill:focus {\n    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;\n    -webkit-text-fill-color: #06152b !important;\n    transition: background-color 9999s ease-in-out 0s;\n  }\n\n  .xp-check {\n    position: relative;\n    display: grid;\n    grid-template-columns: 28px 1fr;\n    gap: 14px;\n    margin-top: 24px;\n    color: #4c5668;\n    cursor: pointer;\n  }\n\n  .xp-check input {\n    position: absolute;\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  .xp-check-icon {\n    width: 28px;\n    height: 28px;\n    border-radius: 50%;\n    border: 1px solid #b8bfca;\n    margin-top: 2px;\n    background: #fff;\n    position: relative;\n    transition: 0.25s ease;\n  }\n\n  .xp-check input:checked + .xp-check-icon {\n    background: #93c83e;\n    border-color: #93c83e;\n  }\n\n  .xp-check input:checked + .xp-check-icon::after {\n    content: \"\";\n    position: absolute;\n    left: 8px;\n    top: 6px;\n    width: 10px;\n    height: 6px;\n    border-left: 3px solid #fff;\n    border-bottom: 3px solid #fff;\n    transform: rotate(-45deg);\n  }\n\n  .xp-check-text {\n    font-size: 13px;\n    line-height: 1.55;\n  }\n\n  .xp-check-text a {\n    color: #8cc63f;\n    text-decoration: none;\n  }\n\n  .xp-btn {\n    width: 100%;\n    height: 42px;\n    margin-top: 24px;\n    border: 0;\n    border-radius: 3px;\n    background: #000;\n    color: #fff;\n    font-size: 15px;\n    font-family: inherit;\n    cursor: pointer;\n    transition: 0.25s ease;\n  }\n\n  .xp-btn:hover {\n    background: #222;\n  }\n\n  .xp-btn:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  .xp-invalid input,\n  .xp-invalid select {\n    border-bottom-color: #ff3030 !important;\n  }\n\n  .xp-checkbox-invalid .xp-check-icon {\n    border-color: #ff3030 !important;\n  }\n\n  @media (max-width: 900px) {\n    .xp-testdrive {\n      padding: 0 50px 60px;\n      min-height: auto;\n    }\n\n    .xp-wrap {\n      display: flex;\n      flex-direction: column;\n      gap: 28px;\n      align-items: stretch;\n    }\n\n    .xp-left h2,\n    .xp-left p {\n      display: none;\n    }\n\n    .xp-car {\n      width: 170%;\n      max-width: none;\n      margin-left: -35%;\n      margin-top: -10px;\n    }\n\n    .xp-row {\n      grid-template-columns: 1fr;\n      gap: 0;\n    }\n\n    .xp-cars {\n      gap: 14px;\n      margin-bottom: 12px;\n    }\n\n    .xp-cars label {\n      font-size: 14px;\n    }\n\n    .xp-field input,\n    .xp-field select {\n      height: 86px;\n      font-size: 25px;\n      background: #fff !important;\n    }\n\n    .xp-main-error {\n      font-size: 14px;\n      margin-bottom: 18px;\n    }\n\n    .xp-check {\n      grid-template-columns: 28px 1fr;\n      gap: 14px;\n      margin-top: 22px;\n    }\n\n    .xp-check-text {\n      font-size: 22px;\n      line-height: 1.35;\n    }\n\n    .xp-btn {\n      height: 42px;\n      margin-top: 28px;\n    }\n  }\n\n  @media (max-width: 520px) {\n    .xp-testdrive {\n      padding: 0 40px 55px;\n    }\n\n    .xp-car {\n      width: 150%;\n      margin-left: -20%;\n      margin-top: -0px;\n    }\n\n    .xp-field input,\n    .xp-field select {\n      height: 106px;\n      font-size: 26px;\n    }\n\n    .xp-cars {\n      margin-top: 6px;\n    }\n\n    .xp-check-text {\n      font-size: 24px;\n    }\n  }\n<\/style>\n\n<script src=\"https:\/\/www.google.com\/recaptcha\/api.js?render=6LeKypgqAAAAAElmzWT44ssVn3FoJEy1y3bQHDGJ\"><\/script>\n\n<script>\n  const xpForm = document.getElementById(\"Home-form\");\n  const mainError = document.getElementById(\"mainError\");\n  const submitButton = document.getElementById(\"contactBTN\");\n\n  function isValidEmail(value) {\n    return \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(value);\n  }\n\n  function isValidEgyptPhone(value) {\n    return \/^(010|011|012|015)\\d{8}$\/.test(value.replace(\/\\D\/g, \"\"));\n  }\n\n  function clearInvalid() {\n    document.querySelectorAll(\".xp-invalid\").forEach(function (el) {\n      el.classList.remove(\"xp-invalid\");\n    });\n\n    document.querySelectorAll(\".xp-checkbox-invalid\").forEach(function (el) {\n      el.classList.remove(\"xp-checkbox-invalid\");\n    });\n\n    mainError.classList.remove(\"show\");\n    mainError.textContent = \"Please provide all required information.\";\n  }\n\n  function markInvalid(field) {\n    const wrapper = field.closest(\".xp-field\");\n    if (wrapper) wrapper.classList.add(\"xp-invalid\");\n  }\n\n  function validateForm() {\n    clearInvalid();\n\n    let valid = true;\n\n    const firstName = document.getElementById(\"firstName\");\n    const lastName = document.getElementById(\"lastName\");\n    const email = document.getElementById(\"email\");\n    const phone = document.getElementById(\"phone\");\n    const area = document.getElementById(\"area\");\n    const subject = document.getElementById(\"subject\");\n    const hearAbout = document.getElementById(\"hearAbout\");\n    const policy = document.getElementById(\"policy\");\n    const selectedCar = document.querySelector('input[name=\"carType\"]:checked');\n\n    if (!selectedCar) {\n      valid = false;\n    }\n\n    if (!firstName.value.trim()) {\n      markInvalid(firstName);\n      valid = false;\n    }\n\n    if (!lastName.value.trim()) {\n      markInvalid(lastName);\n      valid = false;\n    }\n\n    if (!email.value.trim() || !isValidEmail(email.value.trim())) {\n      markInvalid(email);\n      valid = false;\n    }\n\n    if (!phone.value.trim() || !isValidEgyptPhone(phone.value.trim())) {\n      markInvalid(phone);\n      valid = false;\n    }\n\n    if (!area.value.trim()) {\n      markInvalid(area);\n      valid = false;\n    }\n\n    if (!subject.value.trim()) {\n      markInvalid(subject);\n      valid = false;\n    }\n\n    if (!hearAbout.value.trim()) {\n      markInvalid(hearAbout);\n      valid = false;\n    }\n\n    if (!policy.checked) {\n      policy.closest(\".xp-check\").classList.add(\"xp-checkbox-invalid\");\n      valid = false;\n    }\n\n    if (!valid) {\n      mainError.classList.add(\"show\");\n    }\n\n    return valid;\n  }\n\n  xpForm.addEventListener(\"submit\", function (e) {\n    e.preventDefault();\n\n    if (!validateForm()) return;\n\n    submitButton.disabled = true;\n    submitButton.textContent = \"Sending...\";\n\n    grecaptcha.ready(function () {\n      grecaptcha\n        .execute(\"6LeKypgqAAAAAElmzWT44ssVn3FoJEy1y3bQHDGJ\", { action: \"submit\" })\n        .then(function (token) {\n          document.getElementById(\"g-recaptcha-response\").value = token;\n          xpForm.submit();\n        })\n        .catch(function () {\n          submitButton.disabled = false;\n          submitButton.textContent = \"Try\";\n          mainError.textContent = \"reCAPTCHA failed. Please try again.\";\n          mainError.classList.add(\"show\");\n        });\n    });\n  });\n\n  document.querySelectorAll(\".xp-field input, .xp-field select\").forEach(function (field) {\n    field.addEventListener(\"input\", function () {\n      const wrapper = this.closest(\".xp-field\");\n      if (wrapper) wrapper.classList.remove(\"xp-invalid\");\n    });\n\n    field.addEventListener(\"change\", function () {\n      const wrapper = this.closest(\".xp-field\");\n      if (wrapper) wrapper.classList.remove(\"xp-invalid\");\n    });\n  });\n\n  document.getElementById(\"policy\").addEventListener(\"change\", function () {\n    if (this.checked) {\n      this.closest(\".xp-check\").classList.remove(\"xp-checkbox-invalid\");\n    }\n  });\n<\/script>\n\n<section class=\"xp-faq-section\">\n  <div class=\"xp-faq-container\">\n    <h2>Frequently Asked Questions<\/h2>\n\n    <div class=\"xp-faq-list\">\n\n      <div class=\"xp-faq-item active\">\n        <button class=\"xp-faq-question\" type=\"button\">\n          <span>What is the price of the XPENG G6?<\/span>\n          <span class=\"xp-faq-icon\"><\/span>\n        <\/button>\n\n        <div class=\"xp-faq-answer\">\n          <p>\n            The XPENG G9  is available from  2,750,000 for the standard battery life model\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"xp-faq-item\">\n        <button class=\"xp-faq-question\" type=\"button\">\n          <span>What is the engine of the XPENG G9?<\/span>\n          <span class=\"xp-faq-icon\"><\/span>\n        <\/button>\n\n        <div class=\"xp-faq-answer\">\n          <p>\n            The XPENG G9 is a fully electric vehicle powered by an advanced electric motor system,\n            designed to deliver smooth acceleration, high efficiency, and intelligent performance.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"xp-faq-item\">\n        <button class=\"xp-faq-question\" type=\"button\">\n          <span>What is the charging speed of the XPENG G9?<\/span>\n          <span class=\"xp-faq-icon\"><\/span>\n        <\/button>\n\n        <div class=\"xp-faq-answer\">\n          <p>\n            Charging speed depends on the charger type and battery configuration. With DC fast charging,\n            the XPENG G9 is designed to support quick charging for daily and long-distance usage.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"xp-faq-item\">\n        <button class=\"xp-faq-question\" type=\"button\">\n          <span>What is the range of the XPENG G9 in km?<\/span>\n          <span class=\"xp-faq-icon\"><\/span>\n        <\/button>\n\n        <div class=\"xp-faq-answer\">\n          <p>\n            The driving range depends on the selected battery version, driving conditions, road type,\n            temperature, and usage of in-car systems.\n          <\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<style>\n \n\n  .xp-faq-section {\n    width: 100%;\n    background: #ffffff;\n    padding: 48px 16px;\n    font-family: basis_grotesque_regular;\n  }\n\n  .xp-faq-container {\n    width: 100%;\n    max-width: 92%;\n    margin: 0 auto;\n  }\n\n  .xp-faq-container h2 {\n    margin: 0 0 26px;\n    color: #000000;\n    font-size: 24px;\n    line-height: 1.2;\n    text-align: center;\n  }\n\n  .xp-faq-list {\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n    width: 100%;\n  }\n\n  .xp-faq-item {\n    width: 100%;\n    background: #ffffff;\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);\n    overflow: hidden;\n    transition: 0.25s ease;\n  }\n\n  .xp-faq-question {\n    width: 100%;\n    min-height: 48px;\n    padding: 14px 16px;\n    border: 0;\n    background: #ffffff;\n    color: #000000;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr 24px;\n    align-items: center;\n    gap: 14px;\n    text-align: left;\n    font-family: inherit;\n  }\n\n  .xp-faq-question span:first-child {\n    font-size: 13px;\n    line-height: 1.4;\n    \n  }\n\n  .xp-faq-icon {\n    width: 24px;\n    height: 24px;\n    border: 1px solid #6e6e6e;\n    border-radius: 50%;\n    position: relative;\n    display: inline-block;\n  }\n\n  .xp-faq-icon::before,\n  .xp-faq-icon::after {\n    content: \"\";\n    position: absolute;\n    background: #555555;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    transition: 0.25s ease;\n  }\n\n  .xp-faq-icon::before {\n    width: 9px;\n    height: 1px;\n  }\n\n  .xp-faq-icon::after {\n    width: 1px;\n    height: 9px;\n  }\n\n  .xp-faq-item.active .xp-faq-icon::after {\n    transform: translate(-50%, -50%) rotate(90deg);\n    opacity: 0;\n  }\n\n  .xp-faq-answer {\n    max-height: 0;\n    overflow: hidden;\n    transition: max-height 0.32s ease;\n  }\n\n  .xp-faq-answer p {\n    margin: 0;\n    padding: 0 16px 18px;\n    color: #333333;\n    font-size: 12px;\n    line-height: 1.5;\n  }\n\n  .xp-faq-item.active .xp-faq-answer {\n    max-height: 220px;\n  }\n\n  @media (min-width: 768px) {\n    .xp-faq-section {\n      padding: 70px 32px;\n    }\n\n    .xp-faq-container {\n      max-width: 1100px;\n    }\n\n    .xp-faq-container h2 {\n      font-size: 34px;\n      margin-bottom: 34px;\n    }\n\n    .xp-faq-question {\n      min-height: 62px;\n      padding: 19px 26px;\n      grid-template-columns: 1fr 30px;\n    }\n\n    .xp-faq-question span:first-child {\n      font-size: 17px;\n    }\n\n    .xp-faq-answer p {\n      font-size: 15px;\n      padding: 0 26px 24px;\n      max-width: 92%;\n    }\n\n    .xp-faq-icon {\n      width: 30px;\n      height: 30px;\n    }\n\n    .xp-faq-icon::before {\n      width: 11px;\n    }\n\n    .xp-faq-icon::after {\n      height: 11px;\n    }\n  }\n\n  @media (min-width: 1200px) {\n    .xp-faq-container {\n      max-width: 1240px;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-faq-section {\n      padding: 44px 14px;\n    }\n\n    .xp-faq-container {\n      max-width: 100%;\n    }\n\n    .xp-faq-container h2 {\n      font-size: 23px;\n      margin-bottom: 24px;\n    }\n\n    .xp-faq-list {\n      gap: 12px;\n    }\n\n    .xp-faq-question {\n      padding: 13px 14px;\n      grid-template-columns: 1fr 22px;\n    }\n\n    .xp-faq-question span:first-child {\n      font-size: 12px;\n    }\n\n    .xp-faq-answer p {\n      font-size: 11px;\n      padding: 0 14px 16px;\n    }\n\n    .xp-faq-icon {\n      width: 22px;\n      height: 22px;\n    }\n  }\n<\/style>\n\n<script>\n  document.querySelectorAll(\".xp-faq-question\").forEach(function (button) {\n    button.addEventListener(\"click\", function () {\n      const currentItem = this.closest(\".xp-faq-item\");\n\n      document.querySelectorAll(\".xp-faq-item\").forEach(function (item) {\n        if (item !== currentItem) {\n          item.classList.remove(\"active\");\n        }\n      });\n\n      currentItem.classList.toggle(\"active\");\n    });\n  });\n<\/script>\n\n    <div class=\"fqoocdue\" style=\"background-color:\">\n        <div class=\"eO4wNdCc animation-bg-content\">\n            <div class=\"-mOPuTM5\">\n                <div class=\"omaPTzsk\">\n                    <div class=\"eZFVaNVR text-display q7qbAE8e\">\n                        <div class=\"ToFHl71Q close-icon\" style=\"opacity: 1;\"><svg class=\"icon undefined\"\n                                aria-hidden=\"true\">\n                                <use xlink:href=\"#icon-x-new\"><\/use>\n                            <\/svg><\/div>\n                        <div class=\"_3UgFVRV4D_black\" style=\"text-align: center; font-size: 3rem;\">\n                            XPENG APP<\/div>\n                        <div class=\"text-display-sub-title-container\">\n                            <div class=\"_73la0dYd text-display-sub-title\"\n                                style=\"translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1; font-family: 'basis_grotesque_regular';\">\n                                Explore the world intelligently<\/div>\n                            <div class=\"_73la0dYd text-display-sub-title\"\n                                style=\"translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1;\">\n                                <div class=\"VQp9MOe-\">\n                                    <div class=\"bt1o6Cub\">\n                                        <div class=\"ciUVZy26\">\n                                            <div class=\"JnytOMdo auto-fit-img\">\n                                                <a href=\"https:\/\/apps.apple.com\/eg\/app\/xpeng\/id1538089870\">\n                                                    <picture>\n                                                        <img decoding=\"async\" class=\"xFmdDrOy lazy entered loaded\"\n                                                            data-src=\"https:\/\/a-cdn.xpeng.com\/www\/public\/client\/static\/images\/app-store.f3c5cb87.svg\"\n                                                            data-ll-status=\"loaded\"\n                                                            src=\"https:\/\/a-cdn.xpeng.com\/www\/public\/client\/static\/images\/app-store.f3c5cb87.svg\">\n                                                    <\/picture>\n                                                <\/a>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"bt1o6Cub\">\n                                        <div class=\"ciUVZy26\">\n                                            <div class=\"JnytOMdo auto-fit-img\">\n                                                <a\n                                                    href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.xiaopeng.globalcarinfo&#038;hl=en_US\">\n                                                    <picture><img decoding=\"async\" class=\"xFmdDrOy lazy entered loaded\"\n                                                            data-src=\"https:\/\/a-cdn.xpeng.com\/www\/public\/client\/static\/images\/google.93118a38.svg\"\n                                                            data-ll-status=\"loaded\"\n                                                            src=\"https:\/\/a-cdn.xpeng.com\/www\/public\/client\/static\/images\/google.93118a38.svg\">\n                                                    <\/picture>\n\n                                                <\/a>\n\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n\n                <\/div>\n                <div class=\"ijjYcchS\">\n                    <div class=\"JnytOMdo TfXupsJr auto-fit-img\">\n                        <picture>\n                            <source media=\"(min-width: 1920px)\"\n                                data-srcset=\"https:\/\/a-cdn.xpeng.com\/www\/public\/static\/img\/app-3@2x.9ad37525.png\"\n                                srcset=\"https:\/\/a-cdn.xpeng.com\/www\/public\/static\/img\/app-3@2x.9ad37525.png\"><img decoding=\"async\"\n                                class=\"xFmdDrOy lazy entered loaded\"\n                                data-src=\"https:\/\/a-cdn.xpeng.com\/www\/public\/static\/img\/app-3.7fbcd99e.png\"\n                                data-ll-status=\"loaded\"\n                                src=\"https:\/\/a-cdn.xpeng.com\/www\/public\/static\/img\/app-3.7fbcd99e.png\">\n                        <\/picture>\n                    <\/div>\n                    <div class=\"JnytOMdo -M8N5lCl auto-fit-img\">\n                        <picture>\n                            <source media=\"(min-width: 1920px)\"\n                                data-srcset=\"https:\/\/a-cdn.xpeng.com\/www\/public\/static\/img\/app-1@2x.c75ee3c6.png\"\n                                srcset=\"https:\/\/a-cdn.xpeng.com\/www\/public\/static\/img\/app-1@2x.c75ee3c6.png\"><img decoding=\"async\"\n                                class=\"xFmdDrOy lazy entered loaded\"\n                                data-src=\"https:\/\/a-cdn.xpeng.com\/www\/public\/static\/img\/app-1.0bbf1eeb.png\"\n                                data-ll-status=\"loaded\"\n                                src=\"https:\/\/a-cdn.xpeng.com\/www\/public\/static\/img\/app-1.0bbf1eeb.png\">\n                        <\/picture>\n                    <\/div>\n                    <div class=\"JnytOMdo _2UvDeyYx auto-fit-img\">\n                        <picture>\n                            <source media=\"(min-width: 1920px)\"\n                                data-srcset=\"https:\/\/a-cdn.xpeng.com\/www\/public\/static\/img\/app-2@2x.cb17584e.png\"\n                                srcset=\"https:\/\/a-cdn.xpeng.com\/www\/public\/static\/img\/app-2@2x.cb17584e.png\"><img decoding=\"async\"\n                                class=\"xFmdDrOy lazy entered loaded\"\n                                data-src=\"https:\/\/a-cdn.xpeng.com\/www\/public\/static\/img\/app-2.431eb74f.png\"\n                                data-ll-status=\"loaded\"\n                                src=\"https:\/\/a-cdn.xpeng.com\/www\/public\/static\/img\/app-2.431eb74f.png\">\n                        <\/picture>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"IryU0VNR\">\n        <div class=\"B6McRuBT\">\n            <div class=\"nuq7OU8I\">\n                <div class=\"W7Ibrl3m\" style=\"font-family: 'basis_grotesque_regular';\">1. All technical data are subject\n                    to type approval. Data is obtained below\n                    internal testing. All figures shown are representative of the maximum or fastest values\n                    obtained under test conditions from non-standard G9 models. Actual range may vary\n                    the calculated WLTP range, depending on the driver's driving style, speed, number of passengers,\n                    vehicle load, outside temperature, use of air conditioning, terrain, vehicle condition, etc.\n                <\/div>\n                <div class=\"W7Ibrl3m\" style=\"font-family: 'basis_grotesque_regular';\">2. The vehicle configuration\n                    information only applies to the corresponding ones\n                    the models produced within a particular production month, and the vehicle configuration information\n                    which is produced during different production months may be different.<\/div>\n            <\/div>\n            <div class=\"PyZMN4YK\">\n                <div class=\"W7Ibrl3m\" style=\"font-family: 'basis_grotesque_regular';\">3. XPILOT intelligent driving\n                    system is a driving assistance function and does not cope\n                    all traffic, weather and road conditions. The driver must always be aware of the person in question\n                    the traffic situation. If the automatic assistant driving system fails to provide the correct\n                    steering assistance or maintaining the correct distance and speed, the driver must actively\n                    intervene.\n                    Please read all information about XPILOT in the user manual to better understand its limitations\n                    this system. The driver should be aware of these restrictions before using the XPILOT. Weather\n                    carefully in complex and changing traffic conditions, icy and snowy roads, wet and slippery\n                    lead, roads with mud or standstill, poor visibility, rough mountain roads or\n                    motorway exitsSend feedback Side panels History Saved.<\/div>\n            <\/div>\n            <div class=\"_94-fgBFy\">\n                <div class=\"W7Ibrl3m\" style=\"font-family: 'basis_grotesque_regular';\">4. Our cars can receive OTA\n                    updates that improve existing ones\n                    features or introduce new features via a Wi-Fi or 4G connection. As soon\n                    the update has been downloaded, you will receive a notification on the screen in the car. You can\n                    also check out new ones\n                    updates by tapping the XPENG logo at the top of the central screen. It is also possible to\n                    schedule an update download for a later time. After you have set\n                    the download to a later time, you can adjust the time or cancel the update at\n                    touch screen by clicking the XPENG logo Send feedback Side panels History Saved-&gt; Install -&gt;\n                    Cancel or Adjust time.\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n  <\/div>\n\n<\/body>\n\n\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>XPENG New G9 | XPENG EGY New XPENG G9 Always more premium Up to 585 KM1 WLTP Range 4.2 s1 0-100 km\/h (AWD) Ultra-fast charging from 10 to 80% in 12 minutes \u00b9 Great factory warranty 7 years \/ 160,000 km\u00b9 Design Elegant fastback silhouette with integrated full-width LED strip and expressive &#8220;Robot Face&#8221; grille. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1108","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/xpeng.com\/eg\/wp-json\/wp\/v2\/pages\/1108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xpeng.com\/eg\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/xpeng.com\/eg\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/xpeng.com\/eg\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xpeng.com\/eg\/wp-json\/wp\/v2\/comments?post=1108"}],"version-history":[{"count":1,"href":"https:\/\/xpeng.com\/eg\/wp-json\/wp\/v2\/pages\/1108\/revisions"}],"predecessor-version":[{"id":1109,"href":"https:\/\/xpeng.com\/eg\/wp-json\/wp\/v2\/pages\/1108\/revisions\/1109"}],"wp:attachment":[{"href":"https:\/\/xpeng.com\/eg\/wp-json\/wp\/v2\/media?parent=1108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}