{"id":1102,"date":"2026-05-22T21:02:13","date_gmt":"2026-05-22T18:02:13","guid":{"rendered":"https:\/\/xpeng.rayaauto.com\/?page_id=1102"},"modified":"2026-05-22T22:02:22","modified_gmt":"2026-05-22T19:02:22","slug":"new-g6","status":"publish","type":"page","link":"https:\/\/xpeng.com\/eg\/new-g6","title":{"rendered":"New-G6"},"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\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 G6 | 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 G6 | 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\/c3ac4b4af9174908ac7d34ccd282a704.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-10\/c7a73b3d8d324d74941074fbf340b513.png&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 G6\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\">Intelligent design, spacious driving pleasure: the ultimate coup\u00e9 SUV<\/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\">525<\/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.13<\/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>Avant-garde SUV coupe design<\/h2>\n          <p>Fastback silhouette, new full-width LED strip<\/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\/cc362365922d4ff182d1d1cb81696298.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n            alt=\"Avant-garde SUV coupe design\"\n          >\n        <\/div>\n      <\/article>\n\n      <article class=\"xp-design-slide\">\n        <div class=\"xp-design-header\">\n          <h2>Spacious and comfortable lounge area<\/h2>\n          <p>Power-adjustable Nappa\u00b2 leather seats, unmatched legroom and headroom<\/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\/2f355b85f3604dbaa024c2140bf4d248.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\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 system<\/h2>\n          <p>Advanced driver assistance system<\/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\/f81d0706ac47412d9eb680964a40b834.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\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>XOS COCKPIT with full environmental awareness<\/h2>\n          <p>Seamless voice control, scalable interface via OTA\u2074<\/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\/a4a5b3422f544fc99da6e9dfa441fdc1.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\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>Next-generation 800V platform<\/h2>\n          <p>Ultra-fast charging 5C battery, 10-80% charge in 12 minutes\u00b9, advanced thermal management<\/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\/d4638eab605a4d5890646fd994573039.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\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    box-sizing: border-box;\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\/2edbf787c5e345fa8b3ee214b0b726c6.mp4\"\n        type=\"video\/mp4\"\n      >\n      Your browser does not support the video tag.\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    box-sizing: border-box;\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\/c50eac5250bd40a3833a50d00a57f0c5.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\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\/f2503141c97d4d6c8b522382a205cc9c.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n      alt=\"XPENG dynamic and futuristic design\"\n    >\n  <\/picture>\n\n  <div class=\"xp-futuristic-content\">\n    <h2>Dynamic and futuristic design<\/h2>\n    <p>SUV coupe silhouette with full-width LED strip and aerodynamic curves<\/p>\n  <\/div>\n<\/section>\n\n<style>\n  * {\n    box-sizing: border-box;\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<section class=\"xp-g6-design-carousel-section\">\n  <div class=\"xp-g6-design-carousel\" id=\"xpG6DesignCarousel\">\n\n    <button class=\"xp-g6-arrow xp-g6-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    <div class=\"xp-g6-track\">\n\n      <article class=\"xp-g6-slide\">\n        <div class=\"xp-g6-image\">\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/34e946d9b0334643bd635568b1cc6c94.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n            alt=\"XPENG G6 robotic grille design\"\n          >\n        <\/div>\n\n        <div class=\"xp-g6-caption\">\n          <p>Grille with a robotic design, framed by a full-width LED strip, for a futuristic style.<\/p>\n        <\/div>\n      <\/article>\n\n      <article class=\"xp-g6-slide\">\n        <div class=\"xp-g6-image\">\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/b33ec948b93d404d9b1d84181c55cdd6.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n            alt=\"XPENG G6 fastback rear side lines\"\n          >\n        <\/div>\n\n        <div class=\"xp-g6-caption\">\n          <p>Fastback rear with clean side lines offering a coupe silhouette.<\/p>\n        <\/div>\n      <\/article>\n\n      <article class=\"xp-g6-slide\">\n        <div class=\"xp-g6-image\">\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/7373e93c729b4e3a9b395abfeb97b00f.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n            alt=\"XPENG G6 aerodynamic rear spoiler\"\n          >\n        <\/div>\n\n        <div class=\"xp-g6-caption\">\n          <p>New aerodynamic rear spoiler with LED strip, improving airflow control.<\/p>\n        <\/div>\n      <\/article>\n\n    <\/div>\n\n    <button class=\"xp-g6-arrow xp-g6-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-g6-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    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n  * {\n    box-sizing: border-box;\n  }\n\n  .xp-g6-design-carousel-section {\n    width: 100%;\n    background: #ffffff;\n    padding: 106px 0 72px;\n    overflow: hidden;\n     font-family: basis_grotesque_regular;\n  }\n\n  .xp-g6-design-carousel {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .xp-g6-track {\n    display: flex;\n    gap: 90px;\n    padding: 0 calc((100vw - min(72vw, 1345px)) \/ 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-g6-track::-webkit-scrollbar {\n    display: none;\n  }\n\n  .xp-g6-track.is-dragging {\n    cursor: grabbing;\n    scroll-behavior: auto;\n    scroll-snap-type: none;\n  }\n\n  .xp-g6-slide {\n    position: relative;\n    flex: 0 0 min(72vw, 1345px);\n    height: 672px;\n    overflow: hidden;\n    border-radius: 2px;\n    background: #f3f3f3;\n    scroll-snap-align: center;\n  }\n\n  .xp-g6-image {\n    width: 100%;\n    height: 100%;\n  }\n\n  .xp-g6-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-g6-caption {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    min-height: 145px;\n    padding: 66px 60px 42px;\n    display: flex;\n    align-items: flex-end;\n    justify-content: center;\n    background: linear-gradient(\n      to bottom,\n      rgba(0, 0, 0, 0.06),\n      rgba(0, 0, 0, 0.68)\n    );\n  }\n\n  .xp-g6-caption p {\n    margin: 0;\n    color: #686868;\n    font-size: 13px;\n    line-height: 1.45;\n    font-weight: 400;\n    text-align: center;\n  }\n\n  .xp-g6-arrow {\n    position: absolute;\n    top: 50%;\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-g6-arrow:hover {\n    color: #111111;\n  }\n\n  .xp-g6-arrow:disabled {\n    opacity: 0.25;\n    cursor: default;\n  }\n\n  .xp-g6-prev {\n    left: calc(50% - min(72vw, 1345px) \/ 2 - 82px);\n  }\n\n  .xp-g6-next {\n    right: calc(50% - min(72vw, 1345px) \/ 2 - 82px);\n  }\n\n  .xp-g6-dots {\n    display: none;\n  }\n\n  @media (max-width: 1200px) {\n    .xp-g6-design-carousel-section {\n      padding: 82px 0 70px;\n    }\n\n    .xp-g6-track {\n      gap: 52px;\n      padding: 0 12vw;\n    }\n\n    .xp-g6-slide {\n      flex-basis: 76vw;\n      height: 560px;\n    }\n\n    .xp-g6-prev {\n      left: 6vw;\n    }\n\n    .xp-g6-next {\n      right: 6vw;\n    }\n  }\n\n  @media (max-width: 768px) {\n    .xp-g6-design-carousel-section {\n      padding: 36px 0 58px;\n      background: #ffffff;\n    }\n\n    .xp-g6-track {\n      gap: 18px;\n      padding: 0 37px;\n      scroll-padding-left: 37px;\n      overflow-x: auto;\n      overflow-y: hidden;\n      cursor: default;\n    }\n\n    .xp-g6-slide {\n      flex: 0 0 calc(100vw - 74px);\n      height: auto;\n      display: flex;\n      flex-direction: column;\n      background: #ffffff;\n      border-radius: 2px;\n      overflow: visible;\n      scroll-snap-align: start;\n    }\n\n    .xp-g6-image {\n      width: 100%;\n      height: 344px;\n      overflow: hidden;\n      border-radius: 2px;\n      background: #f5f5f5;\n    }\n\n    .xp-g6-image img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      object-position: center;\n    }\n\n    .xp-g6-caption {\n      position: static;\n      min-height: auto;\n      padding: 80px 0 0;\n      display: block;\n      background: #ffffff;\n      color: #000000;\n    }\n\n    .xp-g6-caption p {\n      margin: 0;\n      color: #686868;\n      font-size: 20px;\n      line-height: 1.45;\n      text-align: left;\n      font-weight: 400;\n    }\n\n    .xp-g6-arrow {\n      display: none;\n    }\n\n    .xp-g6-dots {\n      display: flex;\n      gap: 8px;\n      padding: 52px 37px 0;\n      align-items: center;\n    }\n\n    .xp-g6-dots button {\n      width: 28px;\n      height: 2px;\n      border: 0;\n      padding: 0;\n      background: #e4e4e4;\n      cursor: pointer;\n    }\n\n    .xp-g6-dots button.active {\n      background: #8cc63f;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-g6-design-carousel-section {\n      padding-top: 36px;\n    }\n\n    .xp-g6-track {\n      padding: 0 37px;\n      gap: 18px;\n      scroll-padding-left: 37px;\n    }\n\n    .xp-g6-slide {\n      flex-basis: calc(100vw - 74px);\n    }\n\n    .xp-g6-image {\n      height: 344px;\n    }\n\n    .xp-g6-caption {\n      padding-top: 80px;\n    }\n\n    .xp-g6-caption p {\n      font-size: 20px;\n      line-height: 1.45;\n    }\n\n    .xp-g6-dots {\n      padding-left: 37px;\n      padding-top: 52px;\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    const carousel = document.getElementById(\"xpG6DesignCarousel\");\n    if (!carousel) return;\n\n    const track = carousel.querySelector(\".xp-g6-track\");\n    const slides = Array.from(carousel.querySelectorAll(\".xp-g6-slide\"));\n    const prevBtn = carousel.querySelector(\".xp-g6-prev\");\n    const nextBtn = carousel.querySelector(\".xp-g6-next\");\n    const dots = Array.from(carousel.querySelectorAll(\".xp-g6-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      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      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-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\/382aedd4e3ed458cb19cd14db372aa1a.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\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<\/h2>\n      <p>Sleek and futuristic look<\/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    box-sizing: border-box;\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-color-section\">\n  <h2>Colors inspired by deep space<\/h2>\n\n  <div class=\"xp-color-stage\">\n    <img decoding=\"async\"\n      class=\"xp-g6-logo\"\n      src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/a8aa974a1593467eb84fd4412b5d94fa.png\"\n      alt=\"G6\"\n    >\n\n    <picture class=\"xp-car-img active\">\n      <source media=\"(max-width: 750px)\" srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-10\/a6891f6a366246f2b9fb773d8cfdbb93.png?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\">\n      <img decoding=\"async\" src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-10\/b3ba3f1c56884076aae0e020be843b0f.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\" alt=\"Arctic White\">\n    <\/picture>\n\n    <picture class=\"xp-car-img\">\n      <source media=\"(max-width: 750px)\" srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-10\/2f970950ee5c430693a468412d588ae2.png?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\">\n      <img decoding=\"async\" src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-10\/127bde799d2e4d338d47d7d28ac1a42a.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\" alt=\"Graphite Grey\">\n    <\/picture>\n\n    <picture class=\"xp-car-img\">\n      <source media=\"(max-width: 750px)\" srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-10\/e6b3e97294f84dd7b872617900724805.png?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\">\n      <img decoding=\"async\" src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-10\/294a086e7a7a494b92aa88745aa55ba5.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\" alt=\"Midnight Black\">\n    <\/picture>\n\n    <picture class=\"xp-car-img\">\n      <source media=\"(max-width: 750px)\" srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-10\/7424c8168cbc4474924a7b33dd0caa06.png?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\">\n      <img decoding=\"async\" src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-10\/696791d488ce4b25900a04492e02de78.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\" alt=\"Silver Frost\">\n    <\/picture>\n\n    <picture class=\"xp-car-img\">\n      <source media=\"(max-width: 750px)\" srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-10\/e8a15e7e17f9415c820613bf8c827a28.png?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\">\n      <img decoding=\"async\" src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-10\/01b64c33a42c4873be425252ac21006b.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\" alt=\"Amethyst Grey\">\n    <\/picture>\n\n    <picture class=\"xp-car-img\">\n      <source media=\"(max-width: 750px)\" srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-10\/fe7b55b0dd3a49e48ef4d0db7f9d9ea3.png?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\">\n      <img decoding=\"async\" src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-10\/37d6e2e9b811457d9a2b299b97afdc86.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\" alt=\"Black Edition\">\n    <\/picture>\n  <\/div>\n\n  <div class=\"xp-color-footer\">\n    <div class=\"xp-color-options\" id=\"xpColorOptions\">\n\n      <button class=\"xp-color-btn active\" type=\"button\" data-index=\"0\" aria-label=\"Arctic White\">\n        <span class=\"xp-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-color-text\">Arctic White<\/span>\n      <\/button>\n\n      <button class=\"xp-color-btn\" type=\"button\" data-index=\"1\" aria-label=\"Graphite Grey\">\n        <span class=\"xp-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-color-text\">Graphite Grey<\/span>\n      <\/button>\n\n      <button class=\"xp-color-btn\" type=\"button\" data-index=\"2\" aria-label=\"Midnight Black\">\n        <span class=\"xp-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-color-text\">Midnight Black<\/span>\n      <\/button>\n\n      <button class=\"xp-color-btn\" type=\"button\" data-index=\"3\" aria-label=\"Silver Frost\">\n        <span class=\"xp-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-color-text\">Silver Frost<\/span>\n      <\/button>\n\n      <button class=\"xp-color-btn\" type=\"button\" data-index=\"4\" aria-label=\"Amethyst Grey\">\n        <span class=\"xp-color-dot\">\n          <img decoding=\"async\" src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/9ee4cafecead49b6ac2c3685e079a870.png\" alt=\"Amethyst Grey\">\n        <\/span>\n        <span class=\"xp-color-text\">Amethyst Grey<\/span>\n      <\/button>\n\n      <button class=\"xp-color-btn\" type=\"button\" data-index=\"5\" aria-label=\"Black Edition\">\n        <span class=\"xp-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-color-text\">Black Edition<\/span>\n      <\/button>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<style>\n  * {\n    box-sizing: border-box;\n  }\n\n  .xp-color-section {\n    width: 100%;\n    min-height: 620px;\n    padding: 28px 20px 34px;\n    background: #ffffff;\n     font-family: basis_grotesque_regular;\n    overflow: hidden;\n    position: relative;\n  }\n\n  .xp-color-section h2 {\n    margin: 0;\n    text-align: center;\n    color: #000000;\n    font-size: 30px;\n    line-height: 1.2;\n    font-weight: 400;\n  }\n\n  .xp-color-stage {\n    position: relative;\n    width: 100%;\n    max-width: 900px;\n    height: 430px;\n    margin: 28px auto 0;\n  }\n\n  .xp-g6-logo {\n    position: absolute;\n    left: 11%;\n    top: 18%;\n    width: 205px;\n    opacity: 0.42;\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  .xp-car-img {\n    position: absolute;\n    inset: 0;\n    display: none;\n    z-index: 2;\n  }\n\n  .xp-car-img.active {\n    display: block;\n    animation: xpFade 0.3s ease;\n  }\n\n  .xp-car-img img {\n    width: 100%;\n    height: 100%;\n    display: block;\n    object-fit: contain;\n    object-position: center;\n  }\n\n  .xp-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-color-options {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 28px;\n    max-width: 100%;\n  }\n\n  .xp-color-btn {\n    height: 50px;\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: 9px;\n    transition: 0.25s ease;\n    flex: 0 0 auto;\n  }\n\n  .xp-color-dot {\n    width: 31px;\n    height: 31px;\n    border-radius: 50%;\n    display: grid;\n    place-items: center;\n    flex: 0 0 auto;\n  }\n\n  .xp-color-dot img {\n    width: 31px;\n    height: 31px;\n    display: block;\n    border-radius: 50%;\n  }\n\n  .xp-color-text {\n    display: none;\n    color: #566070;\n    font-size: 16px;\n    line-height: 1;\n    font-weight: 400;\n    white-space: nowrap;\n    padding-right: 8px;\n  }\n\n  .xp-color-btn.active {\n    height: 50px;\n    padding: 7px 14px 7px 8px;\n    background: #f7f7f7;\n  }\n\n  .xp-color-btn.active .xp-color-dot {\n    width: 36px;\n    height: 36px;\n    background: #eeeeee;\n  }\n\n  .xp-color-btn.active .xp-color-dot img {\n    width: 28px;\n    height: 28px;\n  }\n\n  .xp-color-btn.active .xp-color-text {\n    display: inline-block;\n  }\n\n  @keyframes xpFade {\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-color-stage {\n      max-width: 820px;\n      height: 395px;\n    }\n\n    .xp-color-options {\n      gap: 22px;\n    }\n  }\n\n  @media (max-width: 900px) {\n    .xp-color-section {\n      min-height: auto;\n      padding: 18px 20px 34px;\n    }\n\n    .xp-color-section h2 {\n      text-align: left;\n      font-size: 24px;\n      line-height: 1.25;\n    }\n\n    .xp-color-stage {\n      height: 250px;\n      margin-top: 62px;\n    }\n\n    .xp-g6-logo {\n      left: 0;\n      top: -26px;\n      width: 120px;\n      opacity: 0.45;\n    }\n\n    .xp-car-img img {\n      object-fit: contain;\n      object-position: center;\n      transform: scale(1.13);\n    }\n\n    .xp-color-footer {\n      margin-top: 18px;\n      justify-content: flex-start;\n      overflow: hidden;\n      width: calc(100% + 40px);\n      margin-left: -20px;\n    }\n\n    .xp-color-options {\n      justify-content: flex-start;\n      width: 100%;\n      overflow-x: auto;\n      overflow-y: hidden;\n      padding: 8px 22px 12px;\n      gap: 20px;\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-color-options::-webkit-scrollbar {\n      display: none;\n    }\n\n    .xp-color-options.is-dragging {\n      cursor: grabbing;\n    }\n\n    .xp-color-btn {\n      height: 42px;\n      min-width: 28px;\n      scroll-snap-align: center;\n    }\n\n    .xp-color-dot,\n    .xp-color-dot img {\n      width: 28px;\n      height: 28px;\n    }\n\n    .xp-color-text {\n      font-size: 12px;\n      padding-right: 5px;\n    }\n\n    .xp-color-btn.active {\n      height: 42px;\n      padding: 5px 10px 5px 6px;\n      gap: 7px;\n    }\n\n    .xp-color-btn.active .xp-color-dot {\n      width: 32px;\n      height: 32px;\n    }\n\n    .xp-color-btn.active .xp-color-dot img {\n      width: 25px;\n      height: 25px;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-color-stage {\n      height: 230px;\n      margin-top: 66px;\n    }\n\n    .xp-car-img img {\n      transform: scale(1.17);\n    }\n\n    .xp-color-options {\n      gap: 18px;\n      padding-left: 22px;\n      padding-right: 22px;\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    const section = document.querySelector(\".xp-color-section\");\n    if (!section) return;\n\n    const cars = Array.from(section.querySelectorAll(\".xp-car-img\"));\n    const buttons = Array.from(section.querySelectorAll(\".xp-color-btn\"));\n    const options = section.querySelector(\"#xpColorOptions\");\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      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<section class=\"xpeng-interior\">\n  <h2 class=\"interior-title\">Indoor atmosphere<\/h2>\n\n  <div class=\"interior-image\">\n    <img decoding=\"async\" class=\"interior-slide active\"\n         src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-08-12\/8c38695f04ec444183fefe759e6879bc.jpeg\"\n         alt=\"Dark Interior\">\n\n    <img decoding=\"async\" class=\"interior-slide\"\n         src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/55180de5bfcb422ea9d0c7695c4a89c1.jpg\"\n         alt=\"Light Interior\">\n  <\/div>\n\n  <div class=\"interior-color-name\" id=\"interiorColorName\">Dark grey<\/div>\n\n  <div class=\"interior-colors\">\n    <button class=\"color-btn active\" data-index=\"0\" data-name=\"Dark grey\" type=\"button\">\n      <span class=\"dot dark\"><\/span>\n    <\/button>\n\n    <button class=\"color-btn\" data-index=\"1\" data-name=\"Light grey\" type=\"button\">\n      <span class=\"dot light\"><\/span>\n    <\/button>\n  <\/div>\n<\/section>\n\n<style>\n.xpeng-interior {\n  width: 100%;\n  background: #f5f5f5;\n  padding: 90px 20px 70px;\n  overflow: hidden;\n  font-family: basis_grotesque_regular;\n}\n\n.interior-title {\n  text-align: center;\n  font-size: 34px;\n  font-weight: 400;\n  margin: 0 0 70px;\n  color: #000;\n}\n\n\/* IMPORTANT *\/\n.interior-image {\n  width: 68%;\n  aspect-ratio: 16 \/ 8.3;\n  margin: 0 auto;\n  position: relative;\n  overflow: hidden;\n}\n\n.interior-slide {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  opacity: 0;\n  transform: translateX(30px) scale(1.03);\n  transition: opacity .55s ease, transform .55s ease;\n  pointer-events: none;\n}\n\n.interior-slide.active {\n  opacity: 1;\n  transform: translateX(0) scale(1);\n  z-index: 2;\n}\n\n.interior-color-name {\n  text-align: center;\n  font-size: 15px;\n  color: #666;\n  margin-top: 34px;\n  margin-bottom: 20px;\n}\n\n.interior-colors {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 28px;\n}\n\n.color-btn {\n  border: none;\n  background: transparent;\n  padding: 8px;\n  border-radius: 999px;\n  cursor: pointer;\n}\n\n.color-btn.active {\n  background: #eaeaea;\n}\n\n.dot {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  display: block;\n}\n\n.dot.dark {\n  background: radial-gradient(circle at 30% 25%, #606065, #1b1d22 68%, #050505);\n}\n\n.dot.light {\n  background: radial-gradient(circle at 30% 25%, #f7f5f3, #d7d4cf 68%, #bab7b2);\n}\n\n@media (max-width: 768px) {\n  .xpeng-interior {\n    padding: 50px 0 50px;\n  }\n\n  .interior-title {\n    text-align: left;\n    font-size: 30px;\n    line-height: 1.2;\n    margin: 0 32px 120px;\n  }\n\n  .interior-image {\n    width: calc(100% - 64px);\n    aspect-ratio: 16 \/ 8.3;\n  }\n\n  .interior-color-name {\n    margin-top: 42px;\n    margin-bottom: 30px;\n    font-size: 20px;\n    color: #000;\n  }\n\n  .interior-colors {\n    gap: 42px;\n  }\n\n  .color-btn {\n    padding: 10px;\n  }\n\n  .dot {\n    width: 42px;\n    height: 42px;\n  }\n}\n<\/style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  const buttons = document.querySelectorAll(\".color-btn\");\n  const slides = document.querySelectorAll(\".interior-slide\");\n  const colorName = document.getElementById(\"interiorColorName\");\n\n  buttons.forEach(function (button) {\n    button.addEventListener(\"click\", function () {\n      const index = Number(button.dataset.index);\n\n      buttons.forEach(btn => btn.classList.remove(\"active\"));\n      button.classList.add(\"active\");\n\n      slides.forEach(slide => slide.classList.remove(\"active\"));\n      slides[index].classList.add(\"active\");\n\n      colorName.textContent = button.dataset.name;\n    });\n  });\n});\n<\/script>\n\n\n\n\n<section class=\"xp-g6-specs-section\">\n  <div class=\"xp-g6-specs-container\">\n\n    <h2 class=\"xp-g6-specs-title\">NEW XPENG G6<\/h2>\n\n    <div class=\"xp-g6-tabs\">\n      <button class=\"active\" type=\"button\">RWD Standard Range<\/button>\n    <\/div>\n\n    <div class=\"xp-g6-specs-content\">\n\n      <div class=\"xp-g6-car\">\n        <img decoding=\"async\"\n          src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-07\/abda8341e3ed43c6be5a4123106d27ec.png?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n          alt=\"NEW XPENG G6 RWD Standard Range\"\n        >\n      <\/div>\n\n      <div class=\"xp-g6-specs-grid\">\n\n        <div class=\"xp-g6-spec-item\">\n          <span>Wheelbase (mm) <sup>1<\/sup><\/span>\n          <strong>2890<\/strong>\n        <\/div>\n\n        <div class=\"xp-g6-spec-item\">\n          <span>Length x Width x Height (mm) <sup>1<\/sup><\/span>\n          <strong>4758*1920*1650<\/strong>\n        <\/div>\n\n        <div class=\"xp-g6-spec-item\">\n          <span>Number of seats <sup>1<\/sup><\/span>\n          <strong>5<\/strong>\n        <\/div>\n\n        <div class=\"xp-g6-spec-item\">\n          <span>Acceleration 0-100 km\/h (s) <sup>1<\/sup><\/span>\n          <strong>6,9<\/strong>\n        <\/div>\n\n        <div class=\"xp-g6-spec-item\">\n          <span>Curb weight (kg)<\/span>\n          <strong>2065 (without hitch) \/ 2090 (with hitch)<\/strong>\n        <\/div>\n\n        <div class=\"xp-g6-spec-item\">\n          <span>Powertrain<\/span>\n          <strong>RWD<\/strong>\n        <\/div>\n\n        <div class=\"xp-g6-spec-item\">\n          <span>Boot space (L) <sup>1<\/sup><\/span>\n          <strong>571 \/ 1374 with rear seats folded down<\/strong>\n        <\/div>\n\n        <div class=\"xp-g6-spec-item\">\n          <span>Displays(inch)<sup>1<\/sup><\/span>\n          <strong>10.25&quot; digital instrument panel + 15.6&quot; central control screen<\/strong>\n        <\/div>\n\n        <div class=\"xp-g6-spec-item\">\n          <span>DC charging (kW) <sup>1<\/sup><\/span>\n          <strong>382 (10 to 80% in 12 minutes)<\/strong>\n        <\/div>\n\n        <div class=\"xp-g6-spec-item\">\n          <span>WLTP range (km) <sup>1<\/sup><\/span>\n          <strong>470<\/strong>\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n\n  <\/div>\n<\/section>\n\n<style>\n * {\n  box-sizing: border-box;\n}\n\n.xp-g6-specs-section {\n  width: 100%;\n  min-height: 88vh;\n  background: #f7f7f7;\n  padding: 36px 24px 46px;\n  font-family: basis_grotesque_regular;\n  color: #000;\n  overflow: hidden;\n}\n\n.xp-g6-specs-container {\n  width: 100%;\n  max-width: 1120px;\n  margin: 0 auto;\n}\n\n.xp-g6-specs-title {\n  margin: 0;\n  text-align: center;\n  font-size: 32px;\n  line-height: 1.2;\n  font-weight: 400;\n  letter-spacing: 0.01em;\n}\n\n.xp-g6-tabs {\n  width: 100%;\n  max-width: 500px;\n  margin: 28px auto 0;\n  display: flex;\n  justify-content: center;\n  border-bottom: 1px solid #dcdcdc;\n}\n\n.xp-g6-tabs button {\n  appearance: none;\n  border: 0;\n  background: transparent;\n  min-width: 185px;\n  padding: 0 16px 12px;\n  font-size: 15px;\n  line-height: 1.2;\n  color: #000;\n  cursor: default;\n  position: relative;\n}\n\n.xp-g6-tabs button.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-g6-specs-content {\n  display: grid;\n  grid-template-columns: 1.05fr 1fr;\n  gap: 54px;\n  align-items: center;\n  margin-top: 52px;\n}\n\n.xp-g6-car {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.xp-g6-car img {\n  width: 100%;\n  max-width: 560px;\n  display: block;\n  object-fit: contain;\n}\n\n.xp-g6-specs-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  column-gap: 56px;\n  row-gap: 26px;\n}\n\n.xp-g6-spec-item span {\n  display: block;\n  margin-bottom: 8px;\n  color: #536070;\n  font-size: 12px;\n  line-height: 1.35;\n  font-weight: 400;\n}\n\n.xp-g6-spec-item span sup {\n  font-size: 8px;\n  position: relative;\n  top: -2px;\n}\n\n.xp-g6-spec-item strong {\n  display: block;\n  color: #00142a;\n  font-size: 14px;\n  line-height: 1.42;\n  font-weight: 400;\n}\n\n.xp-g6-specs-action {\n  margin-top: 48px;\n  text-align: center;\n}\n\n.xp-g6-specs-action a {\n  min-width: 165px;\n  min-height: 36px;\n  padding: 10px 24px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid #000;\n  border-radius: 3px;\n  color: #000;\n  text-decoration: none;\n  font-size: 13px;\n  line-height: 1;\n  transition: 0.25s ease;\n}\n\n.xp-g6-specs-action a:hover {\n  background: #000;\n  color: #fff;\n}\n\n@media (max-width: 1100px) {\n  .xp-g6-specs-content {\n    grid-template-columns: 1fr;\n    gap: 28px;\n    margin-top: 42px;\n  }\n\n  .xp-g6-car img {\n    max-width: 540px;\n  }\n\n  .xp-g6-specs-grid {\n    max-width: 660px;\n    margin: 0 auto;\n  }\n}\n\n@media (max-width: 768px) {\n  .xp-g6-specs-section {\n    min-height: auto;\n    padding: 28px 17px 46px;\n    background: #fff;\n  }\n\n  .xp-g6-specs-title {\n    text-align: left;\n    font-size: 20px;\n    line-height: 1.25;\n    font-weight: 700;\n  }\n\n  .xp-g6-tabs {\n    max-width: none;\n    margin-top: 21px;\n    justify-content: flex-start;\n    overflow-x: auto;\n    border-bottom: 1px solid #e4e4e4;\n    scrollbar-width: none;\n  }\n\n  .xp-g6-tabs::-webkit-scrollbar {\n    display: none;\n  }\n\n  .xp-g6-tabs button {\n    min-width: 130px;\n    padding: 0 14px 10px;\n    text-align: left;\n    font-size: 10px;\n    white-space: nowrap;\n  }\n\n  .xp-g6-tabs button:first-child {\n    padding-left: 0;\n  }\n\n  .xp-g6-specs-content {\n    display: block;\n    margin-top: 0;\n  }\n\n  .xp-g6-car {\n    margin-top: 46px;\n  }\n\n  .xp-g6-car img {\n    max-width: 92%;\n    transform: scale(1);\n  }\n\n  .xp-g6-specs-grid {\n    margin-top: 48px;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    column-gap: 28px;\n    row-gap: 21px;\n  }\n\n  .xp-g6-spec-item span {\n    margin-bottom: 7px;\n    color: #00142a;\n    font-size: 8.5px;\n    line-height: 1.35;\n  }\n\n  .xp-g6-spec-item strong {\n    color: #000;\n    font-size: 11.5px;\n    line-height: 1.35;\n    font-weight: 400;\n  }\n\n  .xp-g6-specs-action {\n    display: none;\n  }\n}\n<\/style>\n\n\n\n\n<section class=\"xp-storage-banner\">\n  <picture>\n    <!-- Mobile image -->\n    <source\n      media=\"(max-width: 750px)\"\n      srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-07\/50892865a06f4f48992a9c5837790f17.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\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\/fb773aa2e26940a98eca2298ba85ebef.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n      alt=\"XPENG G6 smart storage everyday versatility\"\n    >\n  <\/picture>\n\n  <div class=\"xp-storage-content\">\n    <h2>Smart storage, everyday versatility<\/h2>\n  <\/div>\n<\/section>\n\n<style>\n  * {\n    box-sizing: border-box;\n  }\n\n  .xp-storage-banner {\n    position: relative;\n    width: 100%;\n    min-height: 790px;\n    overflow: hidden;\n    background: #ffffff;\n     font-family: basis_grotesque_regular;\n  }\n\n  .xp-storage-banner picture {\n    display: block;\n    width: 100%;\n    height: 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-banner::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    \/* background: rgba(0, 0, 0, 0.28); *\/\n    pointer-events: none;\n  }\n\n  .xp-storage-content {\n    position: absolute;\n    z-index: 2;\n    top: 118px;\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  @media (max-width: 1200px) {\n    .xp-storage-banner {\n      min-height: 660px;\n    }\n\n    .xp-storage-img {\n      height: 660px;\n    }\n\n    .xp-storage-content {\n      top: 92px;\n    }\n\n    .xp-storage-content h2 {\n      font-size: 32px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-storage-banner {\n      min-height: auto;\n      display: flex;\n      flex-direction: column;\n      background: #ffffff;\n    }\n\n    .xp-storage-banner::after {\n      display: none;\n    }\n\n    .xp-storage-img {\n      width: 100%;\n      height: auto;\n      display: block;\n      object-fit: contain;\n      object-position: center top;\n    }\n\n    .xp-storage-content {\n      position: static;\n      transform: none;\n      width: 100%;\n      max-width: none;\n      text-align: left;\n      padding: 28px 18px 26px;\n      background: #ffffff;\n      color: #000000;\n    }\n\n    .xp-storage-content h2 {\n      max-width: 280px;\n      margin: 0;\n      color: #000000;\n      font-size: 22px;\n      line-height: 1.45;\n      font-weight: 400;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-storage-content {\n      padding: 27px 18px 26px;\n    }\n\n    .xp-storage-content h2 {\n      font-size: 21px;\n      line-height: 1.45;\n    }\n  }\n<\/style>\n\n\n\n<section class=\"xp-comfort-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\/6f0df7ef79804d92a1f49d220dab20db.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n    >\n\n    <!-- Desktop image -->\n    <img decoding=\"async\"\n      class=\"xp-comfort-img\"\n      src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/a60d15e9a967437887c8aaf9cd670b32.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n      alt=\"XPENG G6 spacious interior\"\n    >\n  <\/picture>\n\n  <div class=\"xp-comfort-content\">\n    <h2>Spacious interior, unrivalled comfort<\/h2>\n  <\/div>\n<\/section>\n\n<style>\n  * {\n    box-sizing: border-box;\n  }\n\n  .xp-comfort-banner {\n    position: relative;\n    width: 100%;\n    min-height: 790px;\n    overflow: hidden;\n    \/* background: #ffffff; *\/\n     font-family: basis_grotesque_regular;\n  }\n\n  .xp-comfort-banner picture {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n\n  .xp-comfort-img {\n    width: 100%;\n    height: 790px;\n    display: block;\n    object-fit: cover;\n    object-position: center;\n  }\n\n  .xp-comfort-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-comfort-content {\n    position: absolute;\n    z-index: 2;\n    top: 84px;\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-comfort-content h2 {\n    margin: 0;\n    color: #ffffff;\n    font-size: 36px;\n    line-height: 1.25;\n    font-weight: 400;\n  }\n\n  @media (max-width: 1200px) {\n    .xp-comfort-banner {\n      min-height: 660px;\n    }\n\n    .xp-comfort-img {\n      height: 660px;\n    }\n\n    .xp-comfort-content {\n      top: 72px;\n    }\n\n    .xp-comfort-content h2 {\n      font-size: 32px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-comfort-banner {\n      min-height: auto;\n      display: flex;\n      flex-direction: column;\n      background: #ffffff;\n    }\n\n    .xp-comfort-banner::after {\n      display: none;\n    }\n\n    .xp-comfort-img {\n      width: 100%;\n      height: auto;\n      display: block;\n      object-fit: contain;\n      object-position: center top;\n    }\n\n    .xp-comfort-content {\n      position: static;\n      transform: none;\n      width: 100%;\n      max-width: none;\n      text-align: left;\n      padding: 25px 18px 28px;\n      background: #ffffff;\n      color: #000000;\n    }\n\n    .xp-comfort-content h2 {\n      max-width: 290px;\n      margin: 0;\n      color: #000000;\n      font-size: 21px;\n      line-height: 1.45;\n      font-weight: 400;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-comfort-content {\n      padding: 25px 18px 28px;\n    }\n\n    .xp-comfort-content h2 {\n      font-size: 21px;\n      line-height: 1.45;\n    }\n  }\n<\/style>\n\n\n\n\n\n<section class=\"xp-feature-carousel xp-g6-comfort-feature\">\n  <div class=\"xp-feature-wrap\">\n\n    <div class=\"xp-feature-media\">\n      <div class=\"xp-feature-track\">\n\n        <div class=\"xp-feature-slide active\">\n          <picture>\n            <source\n              media=\"(max-width: 768px)\"\n              srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/6b7bb87af63e43549217e4f26d5663e9.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\/6ce1851bc622403bb623d73ad13d0571.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n              alt=\"First-class comfort in the front\"\n            >\n          <\/picture>\n        <\/div>\n\n        <div class=\"xp-feature-slide\">\n          <picture>\n            <source\n              media=\"(max-width: 768px)\"\n              srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/9979aa0cd78a4b19a2b63a2f72eb23d0.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\/3d5a93b4b60e433d970e079b4ae1655d.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n              alt=\"Lounge-style rear space\"\n            >\n          <\/picture>\n        <\/div>\n\n        <div class=\"xp-feature-slide\">\n          <picture>\n            <source\n              media=\"(max-width: 768px)\"\n              srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/379870f8089846629df342f76225527c.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\/12e6b52c1aa0467184db41f082eb7d50.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n              alt=\"Versatile storage solutions\"\n            >\n          <\/picture>\n        <\/div>\n\n      <\/div>\n\n      <button class=\"xp-feature-arrow xp-feature-prev\" type=\"button\" aria-label=\"Previous slide\">\n        <span><\/span>\n      <\/button>\n\n      <button class=\"xp-feature-arrow xp-feature-next\" type=\"button\" aria-label=\"Next slide\">\n        <span><\/span>\n      <\/button>\n    <\/div>\n\n    <div class=\"xp-feature-mobile-content\">\n      <h3>First-class comfort in the front<\/h3>\n      <p>\n        Electrically adjustable Nappa leather seats with ventilation, heating and massage\u00b2\n      <\/p>\n    <\/div>\n\n    <div class=\"xp-feature-tabs\">\n      <button class=\"xp-feature-tab active\" type=\"button\" data-index=\"0\">\n        First-class comfort in the front\n      <\/button>\n      <button class=\"xp-feature-tab\" type=\"button\" data-index=\"1\">\n        Lounge-style rear space\n      <\/button>\n      <button class=\"xp-feature-tab\" type=\"button\" data-index=\"2\">\n        Versatile storage solutions\n      <\/button>\n    <\/div>\n\n    <div class=\"xp-feature-description\">\n      Electrically adjustable Nappa leather seats with ventilation, heating and massage\u00b2\n    <\/div>\n\n    <div class=\"xp-feature-dots\">\n      <button class=\"xp-feature-dot active\" type=\"button\" data-index=\"0\" aria-label=\"Slide 1\"><\/button>\n      <button class=\"xp-feature-dot\" type=\"button\" data-index=\"1\" aria-label=\"Slide 2\"><\/button>\n      <button class=\"xp-feature-dot\" type=\"button\" data-index=\"2\" aria-label=\"Slide 3\"><\/button>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n  * {\n    box-sizing: border-box;\n  }\n\n  .xp-feature-carousel {\n    width: 100%;\n    background: #ffffff;\n    padding: 44px 0 22px;\n    font-family: basis_grotesque_regular;\n    overflow: hidden;\n  }\n\n  .xp-feature-wrap {\n    width: min(78vw, 1228px);\n    margin: 0 auto;\n  }\n\n  .xp-feature-media {\n    position: relative;\n    width: 100%;\n    height: clamp(430px, 39vw, 615px);\n    overflow: hidden;\n    border-radius: 3px;\n    background: #f5f5f5;\n  }\n\n  .xp-feature-track {\n    width: 100%;\n    height: 100%;\n    position: relative;\n  }\n\n  .xp-feature-slide {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    visibility: hidden;\n    transform: scale(1.015);\n    transition: opacity 0.45s ease, visibility 0.45s ease, transform 0.65s ease;\n  }\n\n  .xp-feature-slide.active {\n    opacity: 1;\n    visibility: visible;\n    transform: scale(1);\n    z-index: 2;\n  }\n\n  .xp-feature-slide picture,\n  .xp-feature-slide img {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n\n  .xp-feature-slide img {\n    object-fit: cover;\n    object-position: center;\n  }\n\n  .xp-feature-arrow {\n    position: absolute;\n    top: 50%;\n    z-index: 5;\n    width: 38px;\n    height: 38px;\n    border: 0;\n    border-radius: 50%;\n    background: rgba(95, 115, 130, 0.62);\n    cursor: pointer;\n    transform: translateY(-50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: 0.25s ease;\n  }\n\n  .xp-feature-arrow:hover {\n    background: rgba(95, 115, 130, 0.9);\n  }\n\n  .xp-feature-arrow:disabled {\n    opacity: 0.35;\n    cursor: default;\n  }\n\n  .xp-feature-prev {\n    left: 18px;\n  }\n\n  .xp-feature-next {\n    right: 18px;\n  }\n\n  .xp-feature-arrow span {\n    width: 11px;\n    height: 11px;\n    border-top: 2px solid #ffffff;\n    border-right: 2px solid #ffffff;\n    display: block;\n  }\n\n  .xp-feature-prev span {\n    transform: rotate(-135deg);\n    margin-left: 4px;\n  }\n\n  .xp-feature-next span {\n    transform: rotate(45deg);\n    margin-right: 4px;\n  }\n\n  .xp-feature-tabs {\n    width: 96%;\n    margin: 25px auto 0;\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    border-bottom: 1px solid #e1e1e1;\n  }\n\n  .xp-feature-tab {\n    position: relative;\n    border: 0;\n    background: transparent;\n    min-height: 38px;\n    padding: 0 16px 15px;\n    color: #9b9b9b;\n    font-size: 14px;\n    line-height: 1.25;\n    font-weight: 600;\n    font-family: inherit;\n    cursor: pointer;\n    text-align: center;\n    transition: 0.25s ease;\n  }\n\n  .xp-feature-tab.active {\n    color: #000000;\n  }\n\n  .xp-feature-tab::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: 0.28s ease;\n  }\n\n  .xp-feature-tab.active::after {\n    transform: scaleX(1);\n  }\n\n  .xp-feature-description {\n    margin-top: 20px;\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-feature-mobile-content,\n  .xp-feature-dots {\n    display: none;\n  }\n\n  @media (max-width: 1024px) {\n    .xp-feature-wrap {\n      width: 92vw;\n    }\n\n    .xp-feature-media {\n      height: 52vw;\n    }\n  }\n\n  @media (max-width: 768px) {\n    .xp-feature-carousel {\n      padding: 0;\n    }\n\n    .xp-feature-wrap {\n      width: 100%;\n    }\n\n    .xp-feature-media {\n      height: auto;\n      aspect-ratio: 315 \/ 391;\n      border-radius: 0;\n    }\n\n    .xp-feature-slide img {\n      object-fit: cover;\n      object-position: center top;\n    }\n\n    .xp-feature-arrow {\n      display: none;\n    }\n\n    .xp-feature-tabs,\n    .xp-feature-description {\n      display: none;\n    }\n\n    .xp-feature-mobile-content {\n      display: block;\n      padding: 24px 18px 62px;\n      background: #ffffff;\n    }\n\n    .xp-feature-mobile-content h3 {\n      margin: 0 0 22px;\n      color: #000000;\n      font-size: 22px;\n      line-height: 1.42;\n      font-weight: 400;\n      max-width: 310px;\n    }\n\n    .xp-feature-mobile-content p {\n      margin: 0;\n      color: #6e6e6e;\n      font-size: 12px;\n      line-height: 1.65;\n      font-weight: 400;\n      max-width: 290px;\n    }\n\n    .xp-feature-dots {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 0 0 10px 18px;\n      margin-top: -24px;\n      position: relative;\n      z-index: 4;\n    }\n\n    .xp-feature-dot {\n      width: 16px;\n      height: 2px;\n      border: 0;\n      padding: 0;\n      background: #eeeeee;\n      cursor: pointer;\n      transition: 0.25s ease;\n    }\n\n    .xp-feature-dot.active {\n      background: #85bf22;\n    }\n  }\n\n  @media (max-width: 390px) {\n    .xp-feature-mobile-content h3 {\n      font-size: 21px;\n    }\n\n    .xp-feature-mobile-content p {\n      font-size: 12px;\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    const section = document.querySelector(\".xp-g6-comfort-feature\");\n    if (!section) return;\n\n    const slides = section.querySelectorAll(\".xp-feature-slide\");\n    const tabs = section.querySelectorAll(\".xp-feature-tab\");\n    const dots = section.querySelectorAll(\".xp-feature-dot\");\n    const prevBtn = section.querySelector(\".xp-feature-prev\");\n    const nextBtn = section.querySelector(\".xp-feature-next\");\n    const mobileTitle = section.querySelector(\".xp-feature-mobile-content h3\");\n    const mobileText = section.querySelector(\".xp-feature-mobile-content p\");\n    const desktopText = section.querySelector(\".xp-feature-description\");\n\n    const data = [\n      {\n        title: \"First-class comfort in the front\",\n        text: \"Electrically adjustable Nappa leather seats with ventilation, heating and massage\u00b2\"\n      },\n      {\n        title: \"Lounge-style rear space\",\n        text: \"Spacious rear seating designed for relaxed travel and everyday comfort.\"\n      },\n      {\n        title: \"Versatile storage solutions\",\n        text: \"571 L rear trunk\u00b9 with rear seats folded down and front compartment with underfloor storage for everyday use\"\n      }\n    ];\n\n    let current = 0;\n    let touchStartX = 0;\n    let touchEndX = 0;\n\n    function setActive(index) {\n      current = (index + slides.length) % slides.length;\n\n      slides.forEach((slide, i) => {\n        slide.classList.toggle(\"active\", i === current);\n      });\n\n      tabs.forEach((tab, i) => {\n        tab.classList.toggle(\"active\", i === current);\n      });\n\n      dots.forEach((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    tabs.forEach((tab) => {\n      tab.addEventListener(\"click\", function () {\n        setActive(Number(this.dataset.index));\n      });\n    });\n\n    dots.forEach((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    setActive(0);\n  })();\n<\/script>\n\n\n\n\n\n<section class=\"xp-adaptive-comfort-section\">\n  <div class=\"xp-adaptive-carousel\" id=\"xpAdaptiveComfortCarousel\">\n\n    <div class=\"xp-adaptive-track\">\n\n      <article class=\"xp-adaptive-slide active\">\n        <div class=\"xp-adaptive-header\">\n          <h2>Adaptive Front Comfort<\/h2>\n          <p>Up to 12 power settings with memory, heating, ventilation and full recline with footrest<sup>2<\/sup><\/p>\n        <\/div>\n\n        <div class=\"xp-adaptive-image\">\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-07\/cffa233d0eff4a2d92c35b12f4a63b76.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n            alt=\"Adaptive Front Comfort\"\n          >\n        <\/div>\n      <\/article>\n\n      <article class=\"xp-adaptive-slide\">\n        <div class=\"xp-adaptive-header\">\n          <h2>Reclining rear seats<\/h2>\n          <p>Rear seats can be reclined by an additional 11\u00b0 and two heated seats<sup>2<\/sup><\/p>\n        <\/div>\n\n        <div class=\"xp-adaptive-image\">\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/03970e494618472d988e34361b425ed9.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n            alt=\"Reclining rear seats\"\n          >\n        <\/div>\n      <\/article>\n\n    <\/div>\n\n    <button class=\"xp-adaptive-arrow xp-adaptive-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-adaptive-arrow xp-adaptive-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-adaptive-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    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n  * {\n    box-sizing: border-box;\n  }\n\n  .xp-adaptive-comfort-section {\n    width: 100%;\n    background: #ffffff;\n    padding: 0 0 74px;\n    overflow: hidden;\n     font-family: basis_grotesque_regular;\n  }\n\n  .xp-adaptive-carousel {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .xp-adaptive-track {\n    display: flex;\n    gap: 90px;\n    padding: 0 calc((100vw - min(75vw, 1390px)) \/ 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-adaptive-track::-webkit-scrollbar {\n    display: none;\n  }\n\n  .xp-adaptive-track.is-dragging {\n    cursor: grabbing;\n    scroll-behavior: auto;\n    scroll-snap-type: none;\n  }\n\n  .xp-adaptive-slide {\n    flex: 0 0 min(75vw, 1390px);\n    scroll-snap-align: center;\n    background: #ffffff;\n  }\n\n  .xp-adaptive-header {\n    min-height: 138px;\n    text-align: center;\n    color: #000000;\n  }\n\n  .xp-adaptive-header h2 {\n    margin: 0 0 16px;\n    color: #000000;\n    font-size: 40px;\n    line-height: 1.15;\n    font-weight: 400;\n  }\n\n  .xp-adaptive-header p {\n    margin: 0 auto;\n    max-width: 900px;\n    color: #000000;\n    font-size: 17px;\n    line-height: 1.5;\n    letter-spacing: 0.02em;\n    font-weight: 400;\n  }\n\n  .xp-adaptive-header sup {\n    font-size: 11px;\n    position: relative;\n    top: -5px;\n    font-weight: 700;\n  }\n\n  .xp-adaptive-image {\n    width: 100%;\n    height: 690px;\n    overflow: hidden;\n    border-radius: 3px;\n    background: #f5f5f5;\n  }\n\n  .xp-adaptive-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-adaptive-arrow {\n    position: absolute;\n    top: calc(138px + 345px);\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: 0.25s ease;\n  }\n\n  .xp-adaptive-arrow:hover {\n    color: #111111;\n  }\n\n  .xp-adaptive-arrow:disabled {\n    opacity: 0.25;\n    cursor: default;\n  }\n\n  .xp-adaptive-prev {\n    left: calc(50% - min(75vw, 1390px) \/ 2 - 74px);\n  }\n\n  .xp-adaptive-next {\n    right: calc(50% - min(75vw, 1390px) \/ 2 - 74px);\n  }\n\n  .xp-adaptive-dots {\n    display: none;\n  }\n\n  @media (max-width: 1450px) {\n    .xp-adaptive-track {\n      gap: 70px;\n      padding: 0 12.5vw;\n    }\n\n    .xp-adaptive-slide {\n      flex-basis: 75vw;\n    }\n\n    .xp-adaptive-image {\n      height: 560px;\n    }\n\n    .xp-adaptive-arrow {\n      top: calc(138px + 280px);\n    }\n\n    .xp-adaptive-prev {\n      left: 10.8vw;\n    }\n\n    .xp-adaptive-next {\n      right: 10.8vw;\n    }\n  }\n\n  @media (max-width: 1024px) {\n    .xp-adaptive-header h2 {\n      font-size: 34px;\n    }\n\n    .xp-adaptive-header p {\n      font-size: 15px;\n    }\n\n    .xp-adaptive-image {\n      height: 480px;\n    }\n\n    .xp-adaptive-arrow {\n      top: calc(138px + 240px);\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-adaptive-comfort-section {\n      padding: 0 0 34px;\n      background: #ffffff;\n    }\n\n    .xp-adaptive-track {\n      gap: 16px;\n      padding: 0 22px;\n      scroll-padding-left: 22px;\n      cursor: default;\n    }\n\n    .xp-adaptive-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-adaptive-header {\n      order: 2;\n      min-height: auto;\n      text-align: left;\n      padding: 26px 0 0;\n    }\n\n    .xp-adaptive-header h2 {\n      margin: 0 0 22px;\n      color: #000000;\n      font-size: 27px;\n      line-height: 1.32;\n      font-weight: 400;\n    }\n\n    .xp-adaptive-header p {\n      margin: 0;\n      max-width: 100%;\n      color: #6e6e6e;\n      font-size: 16px;\n      line-height: 1.55;\n      letter-spacing: 0;\n    }\n\n    .xp-adaptive-image {\n      order: 1;\n      width: 100%;\n      height: 278px;\n      border-radius: 2px;\n      overflow: hidden;\n      background: #f5f5f5;\n    }\n\n    .xp-adaptive-image img {\n      object-fit: cover;\n      object-position: center top;\n    }\n\n    .xp-adaptive-arrow {\n      display: none;\n    }\n\n    .xp-adaptive-dots {\n      display: flex;\n      gap: 8px;\n      padding: 78px 22px 0;\n      align-items: center;\n    }\n\n    .xp-adaptive-dots button {\n      width: 23px;\n      height: 2px;\n      border: 0;\n      padding: 0;\n      background: #eeeeee;\n      cursor: pointer;\n    }\n\n    .xp-adaptive-dots button.active {\n      background: #85bf22;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-adaptive-track {\n      padding: 0 22px;\n      scroll-padding-left: 22px;\n    }\n\n    .xp-adaptive-slide {\n      flex-basis: calc(100vw - 44px);\n    }\n\n    .xp-adaptive-image {\n      height: 278px;\n    }\n\n    .xp-adaptive-header h2 {\n      font-size: 27px;\n    }\n\n    .xp-adaptive-header p {\n      font-size: 16px;\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    const carousel = document.getElementById(\"xpAdaptiveComfortCarousel\");\n    if (!carousel) return;\n\n    const track = carousel.querySelector(\".xp-adaptive-track\");\n    const slides = Array.from(carousel.querySelectorAll(\".xp-adaptive-slide\"));\n    const prevBtn = carousel.querySelector(\".xp-adaptive-prev\");\n    const nextBtn = carousel.querySelector(\".xp-adaptive-next\");\n    const dots = Array.from(carousel.querySelectorAll(\".xp-adaptive-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      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      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 (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-interior-architecture\">\n  <picture>\n    <!-- Mobile image -->\n    <source\n      media=\"(max-width: 750px)\"\n      srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/85f68f84fc634624994793a149bd8581.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n    >\n\n    <!-- Desktop image -->\n    <img decoding=\"async\"\n      class=\"xp-interior-architecture-img\"\n      src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/9a9ad3b51daf430caacdccbace1c07d5.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n      alt=\"Ultra-spacious interior architecture\"\n    >\n  <\/picture>\n\n  <div class=\"xp-interior-architecture-content\">\n    <h2>Ultra-spacious interior architecture<\/h2>\n    <p>Floating center console, &#8220;Star Light&#8221; ambient lighting create a futuristic and immersive space<\/p>\n  <\/div>\n<\/section>\n\n<style>\n  * {\n    box-sizing: border-box;\n  }\n\n  .xp-interior-architecture {\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-interior-architecture picture {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n\n  .xp-interior-architecture-img {\n    width: 100%;\n    height: 760px;\n    display: block;\n    object-fit: cover;\n    object-position: center;\n  }\n\n  .xp-interior-architecture::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    \/* background: rgba(0, 0, 0, 0.18); *\/\n    pointer-events: none;\n  }\n\n  .xp-interior-architecture-content {\n    position: absolute;\n    z-index: 2;\n    top: 88px;\n    left: 50%;\n    width: 92%;\n    max-width: 1080px;\n    transform: translateX(-50%);\n    text-align: center;\n    color: #ffffff;\n  }\n\n  .xp-interior-architecture-content h2 {\n    margin: 0 0 14px;\n    color: #ffffff;\n    font-size: 31px;\n    line-height: 1.25;\n    font-weight: 400;\n  }\n\n  .xp-interior-architecture-content p {\n    margin: 0 auto;\n    max-width: 820px;\n    color: #ffffff;\n    font-size: 14px;\n    line-height: 1.5;\n    font-weight: 700;\n  }\n\n  @media (max-width: 1200px) {\n    .xp-interior-architecture {\n      min-height: 650px;\n    }\n\n    .xp-interior-architecture-img {\n      height: 650px;\n    }\n\n    .xp-interior-architecture-content {\n      top: 78px;\n    }\n\n    .xp-interior-architecture-content h2 {\n      font-size: 30px;\n    }\n\n    .xp-interior-architecture-content p {\n      font-size: 13px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-interior-architecture {\n      min-height: auto;\n      display: flex;\n      flex-direction: column;\n      background: #ffffff;\n    }\n\n    .xp-interior-architecture::after {\n      display: none;\n    }\n\n    .xp-interior-architecture-img {\n      width: 100%;\n      height: auto;\n      display: block;\n      object-fit: contain;\n      object-position: center top;\n    }\n\n    .xp-interior-architecture-content {\n      position: static;\n      transform: none;\n      width: 100%;\n      max-width: none;\n      text-align: left;\n      padding: 33px 24px 28px;\n      background: #ffffff;\n      color: #000000;\n    }\n\n    .xp-interior-architecture-content h2 {\n      margin: 0 0 24px;\n      max-width: 330px;\n      color: #000000;\n      font-size: 27px;\n      line-height: 1.45;\n      font-weight: 400;\n    }\n\n    .xp-interior-architecture-content p {\n      margin: 0;\n      max-width: 345px;\n      color: #5f6673;\n      font-size: 16px;\n      line-height: 1.6;\n      font-weight: 400;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-interior-architecture-content {\n      padding: 33px 24px 28px;\n    }\n\n    .xp-interior-architecture-content h2 {\n      font-size: 27px;\n      line-height: 1.45;\n      margin-bottom: 24px;\n    }\n\n    .xp-interior-architecture-content p {\n      font-size: 16px;\n      line-height: 1.6;\n    }\n  }\n<\/style>\n\n\n\n\n\n<section class=\"xp-seat-carousel-section\">\n  <div class=\"xp-seat-carousel\" id=\"xpSeatCarousel\">\n\n    <h2 class=\"xp-seat-main-title\">Ergonomic seating experience<\/h2>\n\n    <div class=\"xp-seat-media-wrap\">\n\n      <div class=\"xp-seat-track\">\n\n        <article class=\"xp-seat-slide active\">\n          <div class=\"xp-seat-video-box\">\n            <video\n              muted\n              loop\n              autoplay\n              playsinline\n              preload=\"metadata\"\n              src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/0fd0788ff42b462199f3446532b07c2b.mp4\"\n            ><\/video>\n\n            <button class=\"xp-seat-play\" type=\"button\" aria-label=\"Play video\">\n              <span><\/span>\n            <\/button>\n          <\/div>\n\n          <div class=\"xp-seat-mobile-copy\">\n            <h3>Heated, ventilated and massaging seats<\/h3>\n            <p>12-way power front seats, ventilated, heated and massaging for year-round comfort<sup>2<\/sup><\/p>\n          <\/div>\n        <\/article>\n\n        <article class=\"xp-seat-slide\">\n          <div class=\"xp-seat-video-box\">\n            <video\n              muted\n              loop\n              autoplay\n              playsinline\n              preload=\"metadata\"\n              src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/bbd72cb0a5004a28a4302026cc56f019.mp4\"\n            ><\/video>\n\n            <button class=\"xp-seat-play\" type=\"button\" aria-label=\"Play video\">\n              <span><\/span>\n            <\/button>\n          <\/div>\n\n          <div class=\"xp-seat-mobile-copy\">\n            <h3>Ultra-spacious rear cabin<\/h3>\n            <p>Rear seats recline up to 11.4\u00b0, ultra-generous legroom<sup>2<\/sup><\/p>\n          <\/div>\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\n    <\/div>\n\n    <div class=\"xp-seat-tabs\">\n      <button class=\"xp-seat-tab active\" type=\"button\" data-index=\"0\">\n        Heated, ventilated and massaging seats\n      <\/button>\n\n      <button class=\"xp-seat-tab\" type=\"button\" data-index=\"1\">\n        Ultra-spacious rear cabin\n      <\/button>\n    <\/div>\n\n    <div class=\"xp-seat-description\" id=\"xpSeatDescription\">\n      12-way power front seats, ventilated, heated and massaging for year-round comfort<sup>2<\/sup>\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    box-sizing: border-box;\n  }\n\n  .xp-seat-carousel-section {\n    width: 100%;\n    background: #ffffff;\n    padding: 76px 0 54px;\n    overflow: hidden;\n     font-family: basis_grotesque_regular;\n  }\n\n  .xp-seat-carousel {\n    width: 100%;\n    position: relative;\n  }\n\n  .xp-seat-main-title {\n    margin: 0 0 48px;\n    color: #000000;\n    text-align: center;\n    font-size: 25px;\n    line-height: 1.25;\n    font-weight: 400;\n  }\n\n  .xp-seat-media-wrap {\n    position: relative;\n    width: min(78vw, 1118px);\n    height: 522px;\n    margin: 0 auto;\n    overflow: hidden;\n    background: #f4f4f4;\n    border-radius: 2px;\n  }\n\n  .xp-seat-track {\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .xp-seat-slide {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    visibility: hidden;\n    transform: scale(1.012);\n    transition: opacity 0.45s ease, visibility 0.45s ease, transform 0.65s ease;\n  }\n\n  .xp-seat-slide.active {\n    opacity: 1;\n    visibility: visible;\n    transform: scale(1);\n    z-index: 2;\n  }\n\n  .xp-seat-video-box {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n  }\n\n  .xp-seat-video-box video {\n    width: 100%;\n    height: 100%;\n    display: block;\n    object-fit: cover;\n    object-position: center;\n  }\n\n  .xp-seat-play {\n    display: none;\n  }\n\n  .xp-seat-arrow {\n    position: absolute;\n    top: 50%;\n    z-index: 5;\n    width: 34px;\n    height: 34px;\n    border: 0;\n    border-radius: 50%;\n    background: rgba(86, 106, 121, 0.62);\n    cursor: pointer;\n    transform: translateY(-50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: 0.25s ease;\n  }\n\n  .xp-seat-arrow:hover {\n    background: rgba(86, 106, 121, 0.9);\n  }\n\n  .xp-seat-arrow:disabled {\n    opacity: 0.35;\n    cursor: default;\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: 10px;\n    height: 10px;\n    display: block;\n    border-top: 2px solid #ffffff;\n    border-right: 2px solid #ffffff;\n  }\n\n  .xp-seat-prev span {\n    transform: rotate(-135deg);\n    margin-left: 4px;\n  }\n\n  .xp-seat-next span {\n    transform: rotate(45deg);\n    margin-right: 4px;\n  }\n\n  .xp-seat-tabs {\n    width: min(72vw, 1008px);\n    margin: 24px auto 0;\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    border-bottom: 1px solid #e1e1e1;\n  }\n\n  .xp-seat-tab {\n    position: relative;\n    min-height: 39px;\n    padding: 0 18px 15px;\n    border: 0;\n    background: transparent;\n    color: #9b9b9b;\n    font-size: 13px;\n    line-height: 1.3;\n    font-weight: 700;\n    text-align: center;\n    cursor: pointer;\n    transition: 0.25s ease;\n  }\n\n  .xp-seat-tab.active {\n    color: #000000;\n  }\n\n  .xp-seat-tab::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: 0.28s ease;\n  }\n\n  .xp-seat-tab.active::after {\n    transform: scaleX(1);\n  }\n\n  .xp-seat-description {\n    width: min(72vw, 1008px);\n    margin: 20px auto 0;\n    color: #8d8d96;\n    font-size: 13px;\n    line-height: 1.6;\n    letter-spacing: 0.3px;\n    text-align: center;\n  }\n\n  .xp-seat-description sup,\n  .xp-seat-mobile-copy sup {\n    font-size: 9px;\n    position: relative;\n    top: -3px;\n  }\n\n  .xp-seat-mobile-copy,\n  .xp-seat-dots {\n    display: none;\n  }\n\n  @media (max-width: 1200px) {\n    .xp-seat-media-wrap {\n      width: 82vw;\n      height: 46vw;\n      max-height: 522px;\n    }\n\n    .xp-seat-tabs,\n    .xp-seat-description {\n      width: 76vw;\n    }\n  }\n\n  @media (max-width: 768px) {\n    .xp-seat-carousel-section {\n      padding: 0;\n      background: #ffffff;\n    }\n\n    .xp-seat-main-title {\n      display: none;\n    }\n\n    .xp-seat-media-wrap {\n      width: 100%;\n      height: auto;\n      max-height: none;\n      border-radius: 0;\n      overflow: visible;\n      background: #ffffff;\n    }\n\n    .xp-seat-track {\n      height: auto;\n      min-height: 712px;\n      position: relative;\n    }\n\n    .xp-seat-slide {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      flex-direction: column;\n      background: #ffffff;\n    }\n\n    .xp-seat-slide.active {\n      position: relative;\n    }\n\n    .xp-seat-video-box {\n      width: 100%;\n      height: 472px;\n      background: #111111;\n    }\n\n    .xp-seat-video-box video {\n      object-fit: cover;\n      object-position: center top;\n    }\n\n    .xp-seat-video-box::after {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      background: rgba(0, 0, 0, 0.08);\n      pointer-events: none;\n    }\n\n    .xp-seat-play {\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      z-index: 4;\n      width: 62px;\n      height: 62px;\n      border: 0;\n      background: transparent;\n      transform: translate(-50%, -50%);\n      display: grid;\n      place-items: center;\n      cursor: pointer;\n    }\n\n    .xp-seat-play span {\n      width: 0;\n      height: 0;\n      margin-left: 7px;\n      border-top: 20px solid transparent;\n      border-bottom: 20px solid transparent;\n      border-left: 32px solid #ffffff;\n      filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.35));\n    }\n\n    .xp-seat-mobile-copy {\n      display: block;\n      padding: 27px 20px 66px;\n      background: #ffffff;\n    }\n\n    .xp-seat-mobile-copy h3 {\n      margin: 0 0 22px;\n      max-width: 340px;\n      color: #000000;\n      font-size: 28px;\n      line-height: 1.48;\n      font-weight: 400;\n    }\n\n    .xp-seat-mobile-copy p {\n      margin: 0;\n      max-width: 350px;\n      color: #6e6e6e;\n      font-size: 16px;\n      line-height: 1.55;\n      font-weight: 400;\n    }\n\n    .xp-seat-arrow,\n    .xp-seat-tabs,\n    .xp-seat-description {\n      display: none;\n    }\n\n    .xp-seat-dots {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 0 0 10px 20px;\n      margin-top: -36px;\n      position: relative;\n      z-index: 5;\n    }\n\n    .xp-seat-dot {\n      width: 23px;\n      height: 2px;\n      padding: 0;\n      border: 0;\n      background: #eeeeee;\n      cursor: pointer;\n      transition: 0.25s ease;\n    }\n\n    .xp-seat-dot.active {\n      background: #85bf22;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-seat-video-box {\n      height: 472px;\n    }\n\n    .xp-seat-mobile-copy h3 {\n      font-size: 28px;\n      line-height: 1.48;\n    }\n\n    .xp-seat-mobile-copy p {\n      font-size: 16px;\n      line-height: 1.55;\n    }\n  }\n\n  @media (max-width: 390px) {\n    .xp-seat-video-box {\n      height: 430px;\n    }\n\n    .xp-seat-mobile-copy h3 {\n      font-size: 25px;\n    }\n\n    .xp-seat-mobile-copy p {\n      font-size: 15px;\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    const section = document.querySelector(\"#xpSeatCarousel\");\n    if (!section) return;\n\n    const slides = section.querySelectorAll(\".xp-seat-slide\");\n    const tabs = section.querySelectorAll(\".xp-seat-tab\");\n    const dots = section.querySelectorAll(\".xp-seat-dot\");\n    const prevBtn = section.querySelector(\".xp-seat-prev\");\n    const nextBtn = section.querySelector(\".xp-seat-next\");\n    const description = section.querySelector(\"#xpSeatDescription\");\n    const videos = section.querySelectorAll(\"video\");\n    const playButtons = section.querySelectorAll(\".xp-seat-play\");\n\n    const data = [\n      {\n        text: \"12-way power front seats, ventilated, heated and massaging for year-round comfort<sup>2<\/sup>\"\n      },\n      {\n        text: \"Rear seats recline up to 11.4\u00b0, ultra-generous legroom<sup>2<\/sup>\"\n      }\n    ];\n\n    let current = 0;\n    let touchStartX = 0;\n    let touchEndX = 0;\n\n    function resetVideos() {\n      videos.forEach(function (video) {\n        video.muted = true;\n        video.controls = false;\n        video.play().catch(function () {});\n      });\n    }\n\n    function setActive(index) {\n      current = (index + slides.length) % slides.length;\n\n      slides.forEach(function (slide, i) {\n        slide.classList.toggle(\"active\", i === current);\n      });\n\n      tabs.forEach(function (tab, i) {\n        tab.classList.toggle(\"active\", i === current);\n      });\n\n      dots.forEach(function (dot, i) {\n        dot.classList.toggle(\"active\", i === current);\n      });\n\n      if (description) {\n        description.innerHTML = data[current].text;\n      }\n\n      if (prevBtn) prevBtn.disabled = current === 0;\n      if (nextBtn) nextBtn.disabled = current === slides.length - 1;\n\n      resetVideos();\n    }\n\n    tabs.forEach(function (tab) {\n      tab.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    playButtons.forEach(function (button) {\n      button.addEventListener(\"click\", function (event) {\n        event.stopPropagation();\n\n        const video = this.closest(\".xp-seat-video-box\").querySelector(\"video\");\n        if (!video) return;\n\n        video.muted = false;\n        video.controls = true;\n        video.play().catch(function () {\n          video.muted = true;\n          video.play();\n        });\n\n        this.style.display = \"none\";\n      });\n    });\n\n    section.addEventListener(\"touchstart\", function (event) {\n      touchStartX = event.changedTouches[0].screenX;\n    }, { passive: true });\n\n    section.addEventListener(\"touchend\", function (event) {\n      touchEndX = event.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    setActive(0);\n  })();\n<\/script>\n\n\n<section class=\"xp-pano-carousel-section\">\n  <div class=\"xp-pano-carousel\" id=\"xpPanoCarousel\">\n\n    <button class=\"xp-pano-arrow xp-pano-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    <div class=\"xp-pano-track\">\n\n      <article class=\"xp-pano-slide\">\n        <div class=\"xp-pano-image\">\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/997c8a684d604b419b4ceb34a414bd37.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n            alt=\"2.12 m\u00b2 panoramic roof\"\n          >\n        <\/div>\n\n        <div class=\"xp-pano-caption\">\n          <h3>2.12 m\u00b2 panoramic roof<\/h3>\n          <p>Silver tinted glass, 99.99% UV protection, SPF100+<sup>1<\/sup><\/p>\n        <\/div>\n      <\/article>\n\n      <article class=\"xp-pano-slide\">\n        <div class=\"xp-pano-image\">\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/ac0d1f50d44d4baba4f128889bb65760.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n            alt=\"Sound-absorbing glass\"\n          >\n        <\/div>\n\n        <div class=\"xp-pano-caption\">\n          <h3>Sound-absorbing glass<\/h3>\n          <p>Double-layered laminated glass on all windows<\/p>\n        <\/div>\n      <\/article>\n\n      <article class=\"xp-pano-slide\">\n        <div class=\"xp-pano-image\">\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-07\/40170228526f461399cb07d9ae575f7c.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n            alt=\"Floating Console\"\n          >\n        <\/div>\n\n        <div class=\"xp-pano-caption\">\n          <h3>Floating Console<\/h3>\n          <p>Multi-level storage, black felt interior finish<\/p>\n        <\/div>\n      <\/article>\n\n    <\/div>\n\n    <button class=\"xp-pano-arrow xp-pano-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-pano-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    box-sizing: border-box;\n  }\n\n  .xp-pano-carousel-section {\n    width: 100%;\n    background: #ffffff;\n    padding: 96px 0 70px;\n    overflow: hidden;\n     font-family: basis_grotesque_regular;\n  }\n\n  .xp-pano-carousel {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .xp-pano-track {\n    display: flex;\n    gap: 90px;\n    padding: 0 calc((100vw - min(75vw, 1385px)) \/ 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-pano-track::-webkit-scrollbar {\n    display: none;\n  }\n\n  .xp-pano-track.is-dragging {\n    cursor: grabbing;\n    scroll-behavior: auto;\n    scroll-snap-type: none;\n  }\n\n  .xp-pano-slide {\n    position: relative;\n    flex: 0 0 min(75vw, 1385px);\n    height: 694px;\n    overflow: hidden;\n    border-radius: 3px;\n    background: #f3f3f3;\n    scroll-snap-align: center;\n  }\n\n  .xp-pano-image {\n    width: 100%;\n    height: 100%;\n  }\n\n  .xp-pano-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-pano-caption {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 3;\n    min-height: 150px;\n    padding: 74px 70px 46px;\n    background: linear-gradient(\n      to bottom,\n      rgba(0, 0, 0, 0.02) 0%,\n      rgba(0, 0, 0, 0.42) 55%,\n      rgba(0, 0, 0, 0.74) 100%\n    );\n    color: #ffffff;\n  }\n\n  .xp-pano-caption h3 {\n    margin: 0 0 12px;\n    color: #ffffff;\n    font-size: 18px;\n    line-height: 1.35;\n    font-weight: 700;\n  }\n\n  .xp-pano-caption p {\n    margin: 0;\n    color: rgba(255, 255, 255, 0.88);\n    font-size: 14px;\n    line-height: 1.45;\n    font-weight: 400;\n  }\n\n  .xp-pano-caption sup {\n    font-size: 9px;\n    position: relative;\n    top: -3px;\n  }\n\n  .xp-pano-arrow {\n    position: absolute;\n    top: 50%;\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-pano-arrow:hover {\n    color: #111111;\n  }\n\n  .xp-pano-arrow:disabled {\n    opacity: 0.25;\n    cursor: default;\n  }\n\n  .xp-pano-prev {\n    left: calc(50% - min(75vw, 1385px) \/ 2 - 78px);\n  }\n\n  .xp-pano-next {\n    right: calc(50% - min(75vw, 1385px) \/ 2 - 78px);\n  }\n\n  .xp-pano-dots {\n    display: none;\n  }\n\n  @media (max-width: 1450px) {\n    .xp-pano-carousel-section {\n      padding-top: 70px;\n    }\n\n    .xp-pano-track {\n      gap: 70px;\n      padding: 0 12vw;\n    }\n\n    .xp-pano-slide {\n      flex-basis: 76vw;\n      height: 570px;\n    }\n\n    .xp-pano-prev {\n      left: 10vw;\n    }\n\n    .xp-pano-next {\n      right: 10vw;\n    }\n  }\n\n  @media (max-width: 1100px) {\n    .xp-pano-slide {\n      height: 500px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-pano-carousel-section {\n      padding: 94px 0 34px;\n      background: #ffffff;\n    }\n\n    .xp-pano-track {\n      gap: 16px;\n      padding: 0 23px;\n      scroll-padding-left: 23px;\n      cursor: default;\n    }\n\n    .xp-pano-slide {\n      flex: 0 0 calc(100vw - 46px);\n      height: auto;\n      display: flex;\n      flex-direction: column;\n      overflow: visible;\n      background: #ffffff;\n      border-radius: 0;\n      scroll-snap-align: start;\n    }\n\n    .xp-pano-image {\n      width: 100%;\n      height: 276px;\n      overflow: hidden;\n      border-radius: 2px;\n      background: #f3f3f3;\n    }\n\n    .xp-pano-image img {\n      object-fit: cover;\n      object-position: center;\n    }\n\n    .xp-pano-caption {\n      position: static;\n      min-height: auto;\n      padding: 49px 0 0;\n      background: #ffffff;\n      color: #000000;\n    }\n\n    .xp-pano-caption h3 {\n      margin: 0 0 20px;\n      color: #000000;\n      font-size: 19px;\n      line-height: 1.45;\n      font-weight: 400;\n    }\n\n    .xp-pano-caption p {\n      margin: 0;\n      color: #707070;\n      font-size: 16px;\n      line-height: 1.55;\n      font-weight: 400;\n    }\n\n    .xp-pano-arrow {\n      display: none;\n    }\n\n    .xp-pano-dots {\n      display: flex;\n      gap: 8px;\n      padding: 44px 23px 0;\n      align-items: center;\n    }\n\n    .xp-pano-dots button {\n      width: 22px;\n      height: 2px;\n      border: 0;\n      padding: 0;\n      background: #eeeeee;\n      cursor: pointer;\n    }\n\n    .xp-pano-dots button.active {\n      background: #85bf22;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-pano-carousel-section {\n      padding-top: 94px;\n    }\n\n    .xp-pano-track {\n      padding: 0 23px;\n      scroll-padding-left: 23px;\n    }\n\n    .xp-pano-slide {\n      flex-basis: calc(100vw - 46px);\n    }\n\n    .xp-pano-image {\n      height: 276px;\n    }\n\n    .xp-pano-caption {\n      padding-top: 49px;\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    const carousel = document.getElementById(\"xpPanoCarousel\");\n    if (!carousel) return;\n\n    const track = carousel.querySelector(\".xp-pano-track\");\n    const slides = Array.from(carousel.querySelectorAll(\".xp-pano-slide\"));\n    const prevBtn = carousel.querySelector(\".xp-pano-prev\");\n    const nextBtn = carousel.querySelector(\".xp-pano-next\");\n    const dots = Array.from(carousel.querySelectorAll(\".xp-pano-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      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      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 (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-suspension-section\">\n  <div class=\"xp-suspension-carousel\" id=\"xpSuspensionCarousel\">\n\n    <div class=\"xp-suspension-media\">\n\n      <div class=\"xp-suspension-slide active\">\n        <picture>\n          <source\n            media=\"(min-width: 1920px)\"\n            srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/ae8f6d9cce34440babbdc35cdd690375.jpg?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\/6b714460724844bb8b7f07a8f8caa995.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\/ae8f6d9cce34440babbdc35cdd690375.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n            alt=\"Double wishbone front suspension\"\n          >\n        <\/picture>\n\n        <div class=\"xp-suspension-mobile-copy\">\n          <h3>Double wishbone front suspension<\/h3>\n          <p>Agile and smooth ride with reduced vibration<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"xp-suspension-slide\">\n        <picture>\n          <source\n            media=\"(min-width: 1920px)\"\n            srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/b251dfda534642f1a47fb42aa3e843a0.jpg?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\/a57413cefa904fe48d61d95787ccab65.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\/b251dfda534642f1a47fb42aa3e843a0.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n            alt=\"High-performance NVH engineering\"\n          >\n        <\/picture>\n\n        <div class=\"xp-suspension-mobile-copy\">\n          <h3>High-performance NVH engineering<\/h3>\n          <p>Noise, vibration and harshness engineering for a quieter, smoother ride<\/p>\n        <\/div>\n      <\/div>\n\n      <button class=\"xp-suspension-arrow xp-suspension-prev\" type=\"button\" aria-label=\"Previous slide\">\n        <span><\/span>\n      <\/button>\n\n      <button class=\"xp-suspension-arrow xp-suspension-next\" type=\"button\" aria-label=\"Next slide\">\n        <span><\/span>\n      <\/button>\n\n    <\/div>\n\n    <div class=\"xp-suspension-tabs\">\n      <button class=\"active\" type=\"button\" data-index=\"0\">\n        Double wishbone front suspension\n      <\/button>\n      <button type=\"button\" data-index=\"1\">\n        High-performance NVH (Noise, Vibration, Harshness) engineering\n      <\/button>\n    <\/div>\n\n    <div class=\"xp-suspension-description\" id=\"xpSuspensionDescription\">\n      Agile and smooth ride with reduced vibration\n    <\/div>\n\n    <div class=\"xp-suspension-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    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n  * {\n    box-sizing: border-box;\n  }\n\n  .xp-suspension-section {\n    width: 100%;\n    background: #ffffff;\n    padding: 58px 0 70px;\n    overflow: hidden;\n     font-family: basis_grotesque_regular;\n  }\n\n  .xp-suspension-carousel {\n    width: 100%;\n    position: relative;\n  }\n\n  .xp-suspension-media {\n    position: relative;\n    width: min(72vw, 1118px);\n    height: 527px;\n    margin: 0 auto;\n    overflow: hidden;\n    background: #f5f5f5;\n    border-radius: 2px;\n  }\n\n  .xp-suspension-slide {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    visibility: hidden;\n    transform: scale(1.012);\n    transition: opacity 0.45s ease, visibility 0.45s ease, transform 0.65s ease;\n  }\n\n  .xp-suspension-slide.active {\n    opacity: 1;\n    visibility: visible;\n    transform: scale(1);\n    z-index: 2;\n  }\n\n  .xp-suspension-slide picture,\n  .xp-suspension-slide img {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n\n  .xp-suspension-slide img {\n    object-fit: cover;\n    object-position: center;\n  }\n\n  .xp-suspension-arrow {\n    position: absolute;\n    top: 50%;\n    z-index: 6;\n    width: 34px;\n    height: 34px;\n    border: 0;\n    border-radius: 50%;\n    background: rgba(95, 95, 95, 0.62);\n    cursor: pointer;\n    transform: translateY(-50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: 0.25s ease;\n  }\n\n  .xp-suspension-arrow:hover {\n    background: rgba(70, 70, 70, 0.9);\n  }\n\n  .xp-suspension-arrow:disabled {\n    opacity: 0.35;\n    cursor: default;\n  }\n\n  .xp-suspension-prev {\n    left: 18px;\n  }\n\n  .xp-suspension-next {\n    right: 18px;\n  }\n\n  .xp-suspension-arrow span {\n    width: 10px;\n    height: 10px;\n    display: block;\n    border-top: 2px solid #ffffff;\n    border-right: 2px solid #ffffff;\n  }\n\n  .xp-suspension-prev span {\n    transform: rotate(-135deg);\n    margin-left: 4px;\n  }\n\n  .xp-suspension-next span {\n    transform: rotate(45deg);\n    margin-right: 4px;\n  }\n\n  .xp-suspension-tabs {\n    width: min(68vw, 1006px);\n    margin: 22px auto 0;\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    border-bottom: 1px solid #dcdcdc;\n  }\n\n  .xp-suspension-tabs button {\n    position: relative;\n    min-height: 40px;\n    padding: 0 18px 15px;\n    border: 0;\n    background: transparent;\n    color: #9b9b9b;\n    font-size: 13px;\n    line-height: 1.35;\n    font-weight: 700;\n    cursor: pointer;\n    text-align: center;\n    transition: 0.25s ease;\n  }\n\n  .xp-suspension-tabs button.active {\n    color: #000000;\n  }\n\n  .xp-suspension-tabs button::after {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    bottom: -1px;\n    width: 100%;\n    height: 2px;\n    background: #8cc63f;\n    transform: scaleX(0);\n    transform-origin: center;\n    transition: 0.28s ease;\n  }\n\n  .xp-suspension-tabs button.active::after {\n    transform: scaleX(1);\n  }\n\n  .xp-suspension-description {\n    width: min(68vw, 1006px);\n    margin: 20px auto 0;\n    color: #8d8d96;\n    font-size: 14px;\n    line-height: 1.6;\n    letter-spacing: 0.3px;\n    text-align: center;\n  }\n\n  .xp-suspension-mobile-copy,\n  .xp-suspension-dots {\n    display: none;\n  }\n\n  @media (max-width: 1200px) {\n    .xp-suspension-media {\n      width: 78vw;\n      height: 46vw;\n      max-height: 527px;\n    }\n\n    .xp-suspension-tabs,\n    .xp-suspension-description {\n      width: 72vw;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-suspension-section {\n      padding: 0;\n      background: #ffffff;\n    }\n\n    .xp-suspension-media {\n      width: 100%;\n      height: auto;\n      max-height: none;\n      overflow: visible;\n      border-radius: 0;\n      background: #ffffff;\n    }\n\n    .xp-suspension-slide {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      flex-direction: column;\n      background: #ffffff;\n    }\n\n    .xp-suspension-slide.active {\n      position: relative;\n    }\n\n    .xp-suspension-slide picture {\n      width: 100%;\n      height: 429px;\n      overflow: hidden;\n      background: #f4f4f4;\n    }\n\n    .xp-suspension-slide img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      object-position: center top;\n    }\n\n    .xp-suspension-mobile-copy {\n      display: block;\n      min-height: 220px;\n      padding: 23px 23px 66px;\n      background: #ffffff;\n    }\n\n    .xp-suspension-mobile-copy h3 {\n      margin: 0 0 20px;\n      max-width: 300px;\n      color: #000000;\n      font-size: 21px;\n      line-height: 1.45;\n      font-weight: 400;\n    }\n\n    .xp-suspension-mobile-copy p {\n      margin: 0;\n      max-width: 315px;\n      color: #707070;\n      font-size: 13px;\n      line-height: 1.65;\n      font-weight: 400;\n    }\n\n    .xp-suspension-arrow,\n    .xp-suspension-tabs,\n    .xp-suspension-description {\n      display: none;\n    }\n\n    .xp-suspension-dots {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 0 0 26px 23px;\n      margin-top: -52px;\n      position: relative;\n      z-index: 8;\n    }\n\n    .xp-suspension-dots button {\n      width: 17px;\n      height: 2px;\n      border: 0;\n      padding: 0;\n      background: #eeeeee;\n      cursor: pointer;\n      transition: 0.25s ease;\n    }\n\n    .xp-suspension-dots button.active {\n      background: #8cc63f;\n    }\n  }\n\n  @media (max-width: 390px) {\n    .xp-suspension-slide picture {\n      height: 397px;\n    }\n\n    .xp-suspension-mobile-copy {\n      min-height: 220px;\n    }\n\n    .xp-suspension-mobile-copy h3 {\n      font-size: 20px;\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    const carousel = document.getElementById(\"xpSuspensionCarousel\");\n    if (!carousel) return;\n\n    const slides = Array.from(carousel.querySelectorAll(\".xp-suspension-slide\"));\n    const tabs = Array.from(carousel.querySelectorAll(\".xp-suspension-tabs button\"));\n    const dots = Array.from(carousel.querySelectorAll(\".xp-suspension-dots button\"));\n    const prevBtn = carousel.querySelector(\".xp-suspension-prev\");\n    const nextBtn = carousel.querySelector(\".xp-suspension-next\");\n    const description = carousel.querySelector(\"#xpSuspensionDescription\");\n\n    const descriptions = [\n      \"Agile and smooth ride with reduced vibration\",\n      \"Noise, vibration and harshness engineering for a quieter and more refined ride\"\n    ];\n\n    let current = 0;\n    let touchStartX = 0;\n    let touchEndX = 0;\n\n    function setActive(index) {\n      current = (index + slides.length) % slides.length;\n\n      slides.forEach(function (slide, i) {\n        slide.classList.toggle(\"active\", i === current);\n      });\n\n      tabs.forEach(function (tab, i) {\n        tab.classList.toggle(\"active\", i === current);\n      });\n\n      dots.forEach(function (dot, i) {\n        dot.classList.toggle(\"active\", i === current);\n      });\n\n      if (description) {\n        description.textContent = descriptions[current];\n      }\n\n      if (prevBtn) prevBtn.disabled = current === 0;\n      if (nextBtn) nextBtn.disabled = current === slides.length - 1;\n    }\n\n    tabs.forEach(function (tab) {\n      tab.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    carousel.addEventListener(\"touchstart\", function (event) {\n      touchStartX = event.changedTouches[0].screenX;\n    }, { passive: true });\n\n    carousel.addEventListener(\"touchend\", function (event) {\n      touchEndX = event.changedTouches[0].screenX;\n\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    setActive(0);\n  })();\n<\/script>\n\n\n<section class=\"xp-xpilot-hero\">\n  <picture>\n    <!-- Mobile image -->\n    <source\n      media=\"(max-width: 750px)\"\n      srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-07\/d53cc67f58734ce687f48a9dbbb20cd0.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n    >\n\n    <!-- Desktop image -->\n    <img decoding=\"async\"\n      class=\"xp-xpilot-hero-img\"\n      src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-08\/32413aaef2c842e489046fe0c201d5f0.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n      alt=\"Advanced XPILOT ASSIST Technology\"\n    >\n  <\/picture>\n\n  <div class=\"xp-xpilot-hero-content\">\n    <h2>Advanced XPILOT ASSIST<sup>3<\/sup> Technology<\/h2>\n    <p>\n      The NEW G6 features a full suite of advanced driver and parking assistance features,\n      providing a smooth and intelligent driving experience.\n    <\/p>\n  <\/div>\n<\/section>\n\n<style>\n  * {\n    box-sizing: border-box;\n  }\n\n  .xp-xpilot-hero {\n    position: relative;\n    width: 100%;\n    min-height: 780px;\n    overflow: hidden;\n    background: #ffffff;\n     font-family: basis_grotesque_regular;\n  }\n\n  .xp-xpilot-hero picture {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n\n  .xp-xpilot-hero-img {\n    width: 100%;\n    height: 780px;\n    display: block;\n    object-fit: cover;\n    object-position: center;\n  }\n\n  .xp-xpilot-hero::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    \/* background: rgba(0, 0, 0, 0.18); *\/\n    pointer-events: none;\n  }\n  \n  .xp-xpilot-hero-content {\n    position: absolute;\n    z-index: 2;\n    top: 92px;\n    left: 50%;\n    width: 92%;\n    max-width: 1160px;\n    transform: translateX(-50%);\n    text-align: center;\n    color: #ffffff;\n  }\n\n  .xp-xpilot-hero-content h2 {\n    margin: 0 0 12px;\n    color: #ffffff;\n    font-size: 31px;\n    line-height: 1.25;\n    font-weight: 400;\n  }\n\n  .xp-xpilot-hero-content h2 sup {\n    font-size: 13px;\n    position: relative;\n    top: -10px;\n    margin-left: 2px;\n    font-weight: 700;\n  }\n\n  .xp-xpilot-hero-content p {\n    margin: 0 auto;\n    max-width: 930px;\n    color: #ffffff;\n    font-size: 14px;\n    line-height: 1.55;\n    font-weight: 700;\n  }\n\n  @media (max-width: 1200px) {\n    .xp-xpilot-hero {\n      min-height: 650px;\n    }\n\n    .xp-xpilot-hero-img {\n      height: 650px;\n    }\n\n    .xp-xpilot-hero-content {\n      top: 78px;\n    }\n\n    .xp-xpilot-hero-content h2 {\n      font-size: 29px;\n    }\n\n    .xp-xpilot-hero-content p {\n      font-size: 13px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-xpilot-hero {\n      min-height: auto;\n      display: flex;\n      flex-direction: column;\n      background: #ffffff;\n    }\n\n    .xp-xpilot-hero::after {\n      display: none;\n    }\n\n    .xp-xpilot-hero-img {\n      width: 100%;\n      height: auto;\n      display: block;\n      object-fit: contain;\n      object-position: center top;\n    }\n\n    .xp-xpilot-hero-content {\n      position: static;\n      transform: none;\n      width: 100%;\n      max-width: none;\n      text-align: left;\n      padding: 24px 24px 28px;\n      background: #ffffff;\n      color: #000000;\n    }\n\n    .xp-xpilot-hero-content h2 {\n      margin: 0 0 20px;\n      max-width: 330px;\n      color: #000000;\n      font-size: 24px;\n      line-height: 1.38;\n      font-weight: 400;\n    }\n\n    .xp-xpilot-hero-content h2 sup {\n      font-size: 10px;\n      top: -8px;\n      font-weight: 700;\n    }\n\n    .xp-xpilot-hero-content p {\n      margin: 0;\n      max-width: 335px;\n      color: #5f6673;\n      font-size: 12px;\n      line-height: 1.6;\n      font-weight: 400;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-xpilot-hero-content {\n      padding: 24px 24px 28px;\n    }\n\n    .xp-xpilot-hero-content h2 {\n      font-size: 24px;\n      line-height: 1.38;\n    }\n\n    .xp-xpilot-hero-content p {\n      font-size: 12px;\n      line-height: 1.6;\n    }\n  }\n<\/style>\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\/08a6e5afd81f45f78d4ce19f0170418d.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\/c2d3cd98c0564986a6a663bc903c3b26.jpg?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    box-sizing: border-box;\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<section class=\"xp-smart-cabin\">\n  <div class=\"xp-smart-cabin-header\">\n    <h2>Smart Cabin<\/h2>\n  <\/div>\n\n  <picture class=\"xp-smart-cabin-picture\">\n    <!-- Mobile image -->\n    <source\n      media=\"(max-width: 750px)\"\n      srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/5ec8179b60cd445cb1ebc524f0e34aa4.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n    >\n\n    <!-- Desktop image -->\n    <img decoding=\"async\"\n      class=\"xp-smart-cabin-img\"\n      src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/801413fb04624ca6a1f4432e8d6687f0.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n      alt=\"XPENG Smart Cabin\"\n    >\n  <\/picture>\n\n  <div class=\"xp-smart-cabin-description\">\n    <div class=\"xp-smart-cabin-item\">\n      <h3>Full voice activation throughout the car<\/h3>\n      <p>\n        Multi-zone responsive voice control of cockpit functions \u2014 even from the rear seats.\n      <\/p>\n    <\/div>\n\n    <div class=\"xp-smart-cabin-item\">\n      <h3>Adaptive Intelligent Perception<\/h3>\n      <p>\n        Customizable in-car main screen with continuous OTA<sup>4<\/sup> updates that evolve according to your preferences.\n      <\/p>\n    <\/div>\n  <\/div>\n<\/section>\n\n<style>\n  * {\n    box-sizing: border-box;\n  }\n\n  html,\n  body {\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    overflow-x: hidden;\n  }\n\n  .xp-smart-cabin {\n    position: relative;\n    width: 100vw;\n    margin-left: calc(50% - 50vw);\n    height: 790px;\n    overflow: hidden;\n    background: #ffffff;\n     font-family: basis_grotesque_regular;\n  }\n\n  .xp-smart-cabin-picture {\n    display: block;\n    width: 100vw;\n    height: 100%;\n  }\n\n  .xp-smart-cabin-img {\n    width: 100vw;\n    height: 790px;\n    display: block;\n    object-fit: cover;\n    object-position: center;\n  }\n\n  \/* Clean overlay without grey bottom block *\/\n  .xp-smart-cabin::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    background: linear-gradient(\n      to bottom,\n      rgba(0, 0, 0, 0.08) 0%,\n      rgba(0, 0, 0, 0.00) 45%,\n      rgba(0, 0, 0, 0.38) 100%\n    );\n    pointer-events: none;\n  }\n\n  .xp-smart-cabin-header {\n    position: absolute;\n    z-index: 3;\n    top: 96px;\n    left: 50%;\n    width: 92%;\n    transform: translateX(-50%);\n    text-align: center;\n  }\n\n  .xp-smart-cabin-header h2 {\n    margin: 0;\n    color: #ffffff;\n    font-size: 30px;\n    line-height: 1.25;\n    font-weight: 400;\n  }\n\n  .xp-smart-cabin-description {\n    position: absolute;\n    z-index: 3;\n    left: 0;\n    right: 0;\n    bottom: 46px;\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 88px;\n    padding: 0 7.8vw;\n    color: #ffffff;\n    background: transparent;\n  }\n\n  .xp-smart-cabin-item {\n    max-width: 760px;\n  }\n\n  .xp-smart-cabin-item h3 {\n    margin: 0 0 12px;\n    color: #ffffff;\n    font-size: 18px;\n    line-height: 1.35;\n    font-weight: 700;\n  }\n\n  .xp-smart-cabin-item p {\n    margin: 0;\n    color: rgba(255, 255, 255, 0.82);\n    font-size: 13px;\n    line-height: 1.55;\n    font-weight: 400;\n  }\n\n  .xp-smart-cabin-item sup {\n    font-size: 9px;\n    position: relative;\n    top: -3px;\n  }\n\n  @media (max-width: 1200px) {\n    .xp-smart-cabin {\n      height: 650px;\n    }\n\n    .xp-smart-cabin-img {\n      height: 650px;\n    }\n\n    .xp-smart-cabin-header {\n      top: 30vh;\n    }\n\n    .xp-smart-cabin-header h2 {\n      font-size: 28px;\n    }\n\n    .xp-smart-cabin-description {\n      bottom: 38px;\n      gap: 46px;\n      padding: 0 6vw;\n    }\n\n    .xp-smart-cabin-item h3 {\n      font-size: 16px;\n    }\n\n    .xp-smart-cabin-item p {\n      font-size: 12px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-smart-cabin {\n      width: 100vw;\n      margin-left: calc(50% - 50vw);\n      height: auto;\n      min-height: auto;\n      display: flex;\n      flex-direction: column;\n      background: #ffffff;\n      overflow: hidden;\n    }\n\n    .xp-smart-cabin::after {\n      display: none;\n    }\n\n    .xp-smart-cabin-header {\n      position: static;\n      transform: none;\n      order: 1;\n      width: 100%;\n      padding: 56px 20px 34px;\n      text-align: center;\n      background: #ffffff;\n    }\n\n    .xp-smart-cabin-header h2 {\n      margin: 0;\n      \n      color: #000000;\n      font-size: 22px;\n      line-height: 1.3;\n      font-weight: 400;\n    }\n\n    .xp-smart-cabin-picture {\n      order: 2;\n      width: 100vw;\n      height: auto;\n      display: block;\n    }\n\n    .xp-smart-cabin-img {\n      width: 100vw;\n      height: auto;\n      display: block;\n      object-fit: cover;\n      object-position: center top;\n    }\n\n    .xp-smart-cabin-description {\n      position: static;\n      order: 3;\n      display: block;\n      padding: 20px 13px 36px;\n      background: #ffffff;\n      color: #000000;\n    }\n\n    .xp-smart-cabin-item {\n      max-width: none;\n      margin-bottom: 22px;\n    }\n\n    .xp-smart-cabin-item:last-child {\n      margin-bottom: 0;\n    }\n\n    .xp-smart-cabin-item h3 {\n      margin: 0 0 12px;\n      color: #000000;\n      font-size: 14px;\n      line-height: 1.45;\n      font-weight: 400;\n    }\n\n    .xp-smart-cabin-item p {\n      margin: 0;\n      color: #536070;\n      font-size: 11px;\n      line-height: 1.65;\n      font-weight: 400;\n    }\n\n    .xp-smart-cabin-item sup {\n      font-size: 8px;\n      top: -3px;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-smart-cabin-header {\n      padding: 56px 20px 34px;\n    }\n\n    .xp-smart-cabin-description {\n      padding: 20px 13px 36px;\n    }\n  }\n<\/style>\n\n\n\n<section class=\"xp-touchscreen-section\">\n  <div class=\"xp-touchscreen-carousel\" id=\"xpTouchscreenCarousel\">\n\n    <button class=\"xp-touchscreen-arrow xp-touchscreen-prev\" type=\"button\" aria-label=\"Previous slide\">\n      <span><\/span>\n    <\/button>\n\n    <div class=\"xp-touchscreen-track\">\n\n      <article class=\"xp-touchscreen-slide\">\n        <div class=\"xp-touchscreen-title\">\n          <h2>2.4K floating touchscreen<\/h2>\n        <\/div>\n\n        <div class=\"xp-touchscreen-image\">\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/cae74cb34e2b4777948a5efb9e82c120.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n            alt=\"2.4K floating touchscreen\"\n          >\n        <\/div>\n      <\/article>\n\n      <article class=\"xp-touchscreen-slide\">\n        <div class=\"xp-touchscreen-title\">\n          <h2>Digital driver display<\/h2>\n        <\/div>\n\n        <div class=\"xp-touchscreen-image\">\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/df8bb5d7cd3449e686ae8d497a7e2614.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n            alt=\"Digital driver display\"\n          >\n        <\/div>\n      <\/article>\n\n      <article class=\"xp-touchscreen-slide\">\n        <div class=\"xp-touchscreen-title\">\n          <h2>Video rearview mirror with wide-angle camera<sup>2<\/sup><\/h2>\n        <\/div>\n\n        <div class=\"xp-touchscreen-image\">\n          <img decoding=\"async\"\n            src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/abcd250f87c84c3f99933446689cd982.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n            alt=\"Video rearview mirror with wide-angle camera\"\n          >\n        <\/div>\n      <\/article>\n\n    <\/div>\n\n    <button class=\"xp-touchscreen-arrow xp-touchscreen-next\" type=\"button\" aria-label=\"Next slide\">\n      <span><\/span>\n    <\/button>\n\n    <div class=\"xp-touchscreen-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    box-sizing: border-box;\n  }\n\n  .xp-touchscreen-section {\n    width: 100%;\n    background: #ffffff;\n    padding: 72px 0 70px;\n    overflow: hidden;\n     font-family: basis_grotesque_regular;\n  }\n\n  .xp-touchscreen-carousel {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .xp-touchscreen-track {\n    display: flex;\n    gap: 74px;\n    padding: 0 calc((100vw - min(58vw, 1075px)) \/ 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-touchscreen-track::-webkit-scrollbar {\n    display: none;\n  }\n\n  .xp-touchscreen-track.is-dragging {\n    cursor: grabbing;\n    scroll-behavior: auto;\n    scroll-snap-type: none;\n  }\n\n  .xp-touchscreen-slide {\n    flex: 0 0 min(58vw, 1075px);\n    scroll-snap-align: center;\n    background: #ffffff;\n  }\n\n  .xp-touchscreen-title {\n    font-family: basis_grotesque_regular;\n    min-height: 55px;\n    display: flex;\n    align-items: flex-start;\n    justify-content: center;\n    text-align: center;\n  }\n\n  .xp-touchscreen-title h2 {\n    margin: 0;\n    color: #000000;\n    font-size: 25px;\n    line-height: 1.25;\n    font-weight: 300;\n  }\n\n  .xp-touchscreen-title sup {\n    font-size: 12px;\n    position: relative;\n    top: -8px;\n    font-weight: 700;\n  }\n\n  .xp-touchscreen-image {\n    width: 100%;\n    height: 538px;\n    overflow: hidden;\n    border-radius: 3px;\n    background: #f3f3f3;\n  }\n\n  .xp-touchscreen-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-touchscreen-arrow {\n    position: absolute;\n    top: calc(84px + 269px);\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-touchscreen-arrow:hover {\n    color: #111111;\n  }\n\n  .xp-touchscreen-arrow:disabled {\n    opacity: 0.25;\n    cursor: default;\n  }\n\n  .xp-touchscreen-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-touchscreen-prev {\n    left: calc(50% - min(58vw, 1075px) \/ 2 - 78px);\n  }\n\n  .xp-touchscreen-prev span {\n    transform: rotate(-135deg);\n  }\n\n  .xp-touchscreen-next {\n    right: calc(50% - min(58vw, 1075px) \/ 2 - 78px);\n  }\n\n  .xp-touchscreen-next span {\n    transform: rotate(45deg);\n  }\n\n  .xp-touchscreen-dots {\n    display: none;\n  }\n\n  @media (max-width: 1450px) {\n    .xp-touchscreen-section {\n      padding-top: 40px;\n    }\n\n    .xp-touchscreen-track {\n      gap: 35px;\n      padding: 0 21vw;\n    }\n\n    .xp-touchscreen-slide {\n      flex-basis: 58vw;\n    }\n\n    .xp-touchscreen-image {\n      height: 538px;\n    }\n\n    .xp-touchscreen-prev {\n      left: 17vw;\n    }\n\n    .xp-touchscreen-next {\n      right: 17vw;\n    }\n  }\n\n  @media (max-width: 1100px) {\n    .xp-touchscreen-track {\n      padding: 0 14vw;\n    }\n\n    .xp-touchscreen-slide {\n      flex-basis: 72vw;\n    }\n\n    .xp-touchscreen-image {\n      height: 430px;\n    }\n\n    .xp-touchscreen-arrow {\n      top: calc(84px + 215px);\n    }\n\n    .xp-touchscreen-prev {\n      left: 8vw;\n    }\n\n    .xp-touchscreen-next {\n      right: 8vw;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-touchscreen-section {\n      padding: 58px 0 36px;\n      background: #ffffff;\n    }\n\n    .xp-touchscreen-track {\n      gap: 16px;\n      padding: 0 28px;\n      scroll-padding-left: 28px;\n      cursor: default;\n    }\n\n    .xp-touchscreen-slide {\n      flex: 0 0 calc(100vw - 56px);\n      display: flex;\n      flex-direction: column;\n      scroll-snap-align: start;\n      background: #ffffff;\n    }\n\n    .xp-touchscreen-title {\n      order: 2;\n      min-height: auto;\n      justify-content: flex-start;\n      text-align: left;\n      padding: 20px 0 0;\n    }\n\n    .xp-touchscreen-title h2 {\n      max-width: 290px;\n      font-size: 21px;\n      line-height: 1.4;\n      font-weight: 400;\n    }\n\n    .xp-touchscreen-title sup {\n      font-size: 9px;\n      top: -6px;\n    }\n\n    .xp-touchscreen-image {\n      order: 1;\n      width: 100%;\n      height: 206px;\n      border-radius: 2px;\n      background: #f3f3f3;\n    }\n\n    .xp-touchscreen-image img {\n      object-fit: cover;\n      object-position: center;\n    }\n\n    .xp-touchscreen-arrow {\n      display: none;\n    }\n\n    .xp-touchscreen-dots {\n      display: flex;\n      gap: 8px;\n      padding: 62px 28px 0;\n      align-items: center;\n    }\n\n    .xp-touchscreen-dots button {\n      width: 17px;\n      height: 2px;\n      border: 0;\n      padding: 0;\n      background: #eeeeee;\n      cursor: pointer;\n      transition: 0.25s ease;\n    }\n\n    .xp-touchscreen-dots button.active {\n      background: #8cc63f;\n    }\n  }\n\n  @media (max-width: 390px) {\n    .xp-touchscreen-track {\n      padding: 0 28px;\n      scroll-padding-left: 28px;\n    }\n\n    .xp-touchscreen-slide {\n      flex-basis: calc(100vw - 56px);\n    }\n\n    .xp-touchscreen-image {\n      height: 206px;\n    }\n\n    .xp-touchscreen-title h2 {\n      font-size: 21px;\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    const carousel = document.getElementById(\"xpTouchscreenCarousel\");\n    if (!carousel) return;\n\n    const track = carousel.querySelector(\".xp-touchscreen-track\");\n    const slides = Array.from(carousel.querySelectorAll(\".xp-touchscreen-slide\"));\n    const prevBtn = carousel.querySelector(\".xp-touchscreen-prev\");\n    const nextBtn = carousel.querySelector(\".xp-touchscreen-next\");\n    const dots = Array.from(carousel.querySelectorAll(\".xp-touchscreen-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      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      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 (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<section class=\"xp-xopera-section\">\n  <div class=\"xp-xopera-container\">\n\n    <h2 class=\"xp-xopera-main-title\">\n      XOPERA 2.0: Immersive Acoustic Experience\n    <\/h2>\n\n    <div class=\"xp-xopera-image\">\n      <picture>\n        <source\n          media=\"(max-width: 750px)\"\n          srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/490e45f542e344c8b25ed180a4f1a313.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n        >\n\n        <img decoding=\"async\"\n          src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/00c329155d43472fa8824e267e450a98.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n          alt=\"XOPERA 2.0 Immersive Acoustic Experience\"\n        >\n      <\/picture>\n    <\/div>\n\n    <div class=\"xp-xopera-content\">\n\n      <div class=\"xp-xopera-item\">\n        <h3>18 Premium Speakers<\/h3>\n        <p>\n          Surround sound system with dynamic tuning and crisp audio details.\n        <\/p>\n      <\/div>\n\n      <div class=\"xp-xopera-item\">\n        <h3>Custom Sound Modes<\/h3>\n        <p>\n          Selectable presets simulate studio, concert, and cinema acoustics.\n        <\/p>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n  * {\n    box-sizing: border-box;\n  }\n\n  .xp-xopera-section {\n    width: 100%;\n    background: #ffffff;\n    padding: 34px 20px 76px;\n    overflow: hidden;\n     font-family: basis_grotesque_regular;\n  }\n\n  .xp-xopera-container {\n    font-family: basis_grotesque_regular;\n    width: 100%;\n    max-width: 928px;\n    margin: 0 auto;\n    \/* background: #f7f7f7; *\/\n  }\n\n  .xp-xopera-main-title {\n    margin: 0 0 40px;\n    color: #000000;\n    background: #ffffff;\n    text-align: center;\n    font-size: 26px;\n    line-height: 1.28;\n    font-weight: 700;\n  }\n\n  .xp-xopera-image {\n    width: 100%;\n    overflow: hidden;\n    background: #eeeeee;\n  }\n\n  .xp-xopera-image picture,\n  .xp-xopera-image img {\n    width: 100%;\n    display: block;\n  }\n\n  .xp-xopera-image img {\n    height: auto;\n    object-fit: contain;\n    object-position: center;\n  }\n\n  .xp-xopera-content {\n    width: 100%;\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 86px;\n    padding: 32px 20px 32px;\n    background: #f7f7f7;\n  }\n\n  .xp-xopera-item h3 {\n    position: relative;\n    margin: 0 0 14px;\n    padding-left: 14px;\n    color: #000000;\n    font-size: 16px;\n    line-height: 1.35;\n    font-weight: 700;\n  }\n\n  .xp-xopera-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-xopera-item p {\n    margin: 0;\n    color: #566070;\n    font-size: 12px;\n    line-height: 1.7;\n    font-weight: 400;\n    letter-spacing: 0.02em;\n  }\n\n  @media (max-width: 1100px) {\n    .xp-xopera-container {\n      max-width: 900px;\n    }\n\n    .xp-xopera-content {\n      gap: 56px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-xopera-section {\n      padding: 23px 18px 54px;\n      background: #ffffff;\n    }\n\n    .xp-xopera-container {\n      max-width: none;\n      background: #ffffff;\n    }\n\n    .xp-xopera-main-title {\n      margin: 0 0 34px;\n      max-width: 290px;\n      text-align: left;\n      background: #ffffff;\n      color: #000000;\n      font-size: 21px;\n      line-height: 1.25;\n      font-weight: 700;\n    }\n\n    .xp-xopera-image {\n      width: 100%;\n      background: transparent;\n    }\n\n    .xp-xopera-image picture,\n    .xp-xopera-image img {\n      width: 100%;\n      height: auto;\n      display: block;\n    }\n\n    .xp-xopera-image img {\n      object-fit: contain;\n      object-position: center;\n    }\n\n    .xp-xopera-content {\n      display: block;\n      padding: 35px 0 0;\n      background: #ffffff;\n    }\n\n    .xp-xopera-item {\n      margin-bottom: 34px;\n    }\n\n    .xp-xopera-item:last-child {\n      margin-bottom: 0;\n    }\n\n    .xp-xopera-item h3 {\n      margin: 0 0 14px;\n      padding-left: 10px;\n      color: #000000;\n      font-size: 16px;\n      line-height: 1.35;\n      font-weight: 400;\n    }\n\n    .xp-xopera-item h3::before {\n      top: 5px;\n      width: 2px;\n      height: 16px;\n      background: #8cc63f;\n    }\n\n    .xp-xopera-item p {\n      color: #536070;\n      font-size: 11px;\n      line-height: 1.65;\n      letter-spacing: 0;\n      max-width: 290px;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-xopera-section {\n      padding: 23px 18px 54px;\n    }\n\n    .xp-xopera-main-title {\n      font-size: 21px;\n      line-height: 1.25;\n      margin-bottom: 34px;\n    }\n\n    .xp-xopera-content {\n      padding-top: 35px;\n    }\n  }\n<\/style>\n\n\n<section class=\"xp-5c-battery-banner\">\n  <picture class=\"xp-5c-battery-picture\">\n    <!-- Mobile image -->\n    <source\n      media=\"(max-width: 750px)\"\n      srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/eec1d920437b48e189ee423e825cfe27.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n    >\n\n    <!-- Desktop image -->\n    <img decoding=\"async\"\n      class=\"xp-5c-battery-img\"\n      src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/529a8be7a7ba482d9444f926e6a0ac5e.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n      alt=\"Next-generation 5C battery, ultra-fast charging\"\n    >\n  <\/picture>\n\n  <div class=\"xp-5c-battery-content\">\n    <h2>Next-generation 5C battery, ultra-fast charging<\/h2>\n  <\/div>\n<\/section>\n\n<style>\n  * {\n    box-sizing: border-box;\n  }\n\n  .xp-5c-battery-banner {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    background: #ffffff;\n    font-family: basis_grotesque_regular;\n  }\n\n  .xp-5c-battery-picture {\n    display: block;\n    width: 100%;\n  }\n\n  .xp-5c-battery-img {\n    width: 100%;\n    height: 675px;\n    display: block;\n    object-fit: cover;\n    object-position: center;\n  }\n\n  .xp-5c-battery-banner::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    background: rgba(0, 0, 0, 0.12);\n    pointer-events: none;\n  }\n\n  .xp-5c-battery-content {\n    position: absolute;\n    z-index: 2;\n    top: 78px;\n    left: 50%;\n    width: 92%;\n    transform: translateX(-50%);\n    text-align: center;\n  }\n\n  .xp-5c-battery-content h2 {\n    margin: 0;\n    color: #ffffff;\n    font-size: 28px;\n    line-height: 1.25;\n    font-weight: 400;\n  }\n\n  @media (max-width: 1200px) {\n    .xp-5c-battery-img {\n      height: 570px;\n    }\n\n    .xp-5c-battery-content {\n      top: 64px;\n    }\n\n    .xp-5c-battery-content h2 {\n      font-size: 25px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-5c-battery-banner {\n      display: flex;\n      flex-direction: column;\n      background: #ffffff;\n    }\n\n    .xp-5c-battery-banner::after {\n      display: none;\n    }\n\n    .xp-5c-battery-picture {\n      order: 1;\n      width: 100%;\n      display: block;\n    }\n\n    .xp-5c-battery-img {\n      width: 100%;\n      height: auto;\n      display: block;\n      object-fit: contain;\n      object-position: center top;\n    }\n\n    .xp-5c-battery-content {\n      position: static;\n      order: 2;\n      width: 100%;\n      transform: none;\n      padding: 24px 26px 31px;\n      background: #ffffff;\n      text-align: left;\n    }\n\n    .xp-5c-battery-content h2 {\n      max-width: 300px;\n      color: #000000;\n      font-size: 22px;\n      line-height: 1.45;\n      font-weight: 400;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-5c-battery-content {\n      padding: 24px 26px 31px;\n    }\n\n    .xp-5c-battery-content h2 {\n      font-size: 22px;\n      line-height: 1.45;\n    }\n  }\n<\/style>\n\n\n<section class=\"xp-fast-charge-video\">\n  <div class=\"xp-fast-charge-container\">\n\n    <div class=\"xp-fast-charge-header\">\n      <h2>Fast charging in 12 minutes<sup>1<\/sup><\/h2>\n      <p>\n        Charges from 10% to 80% battery life in just 12 minutes<sup>1<\/sup> \u2014\n        perfect for busy days and long commutes.\n      <\/p>\n    <\/div>\n\n    <div class=\"xp-fast-charge-media\" id=\"xpFastChargeMedia\">\n      <video\n        class=\"xp-fast-charge-video-el\"\n        muted\n        loop\n        autoplay\n        playsinline\n        preload=\"metadata\"\n        poster=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/529a8be7a7ba482d9444f926e6a0ac5e.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n      >\n        <source\n          src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/aa00465c74394d759e2c4e2beb1a7b2e.mp4\"\n          type=\"video\/mp4\"\n        >\n      <\/video>\n\n      <button class=\"xp-fast-charge-play\" type=\"button\" aria-label=\"Play video\">\n        <span><\/span>\n      <\/button>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n  * {\n    box-sizing: border-box;\n  }\n\n  .xp-fast-charge-video {\n    width: 100%;\n    background: #ffffff;\n    padding: 58px 20px 70px;\n    overflow: hidden;\n    font-family: basis_grotesque_regular;\n  }\n\n  .xp-fast-charge-container {\n    width: 100%;\n    max-width: 928px;\n    margin: 0 auto;\n  }\n\n  .xp-fast-charge-header {\n    text-align: center;\n    margin-bottom: 43px;\n  }\n\n  .xp-fast-charge-header h2 {\n    margin: 0 0 16px;\n    color: #000000;\n    font-size: 28px;\n    line-height: 1.25;\n    font-weight: 400;\n  }\n\n  .xp-fast-charge-header h2 sup {\n    font-size: 12px;\n    position: relative;\n    top: -8px;\n    margin-left: 2px;\n    font-weight: 700;\n  }\n\n  .xp-fast-charge-header p {\n    margin: 0 auto;\n    max-width: 760px;\n    color: #000000;\n    font-size: 13px;\n    line-height: 1.55;\n    font-weight: 400;\n  }\n\n  .xp-fast-charge-header p sup {\n    font-size: 8px;\n    position: relative;\n    top: -4px;\n  }\n\n  .xp-fast-charge-media {\n    position: relative;\n    width: 100%;\n    height: 464px;\n    overflow: hidden;\n    border-radius: 3px;\n    background: #f4f4f4;\n    cursor: pointer;\n  }\n\n  .xp-fast-charge-video-el {\n    width: 100%;\n    height: 100%;\n    display: block;\n    object-fit: cover;\n    object-position: center;\n  }\n\n  .xp-fast-charge-play {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    z-index: 5;\n    width: 68px;\n    height: 68px;\n    border: 0;\n    border-radius: 50%;\n    background: rgba(0, 0, 0, 0.18);\n    backdrop-filter: blur(3px);\n    transform: translate(-50%, -50%);\n    display: none;\n    place-items: center;\n    cursor: pointer;\n    transition: 0.25s ease;\n  }\n\n  .xp-fast-charge-play:hover {\n    background: rgba(0, 0, 0, 0.32);\n    transform: translate(-50%, -50%) scale(1.05);\n  }\n\n  .xp-fast-charge-play span {\n    width: 0;\n    height: 0;\n    margin-left: 6px;\n    border-top: 17px solid transparent;\n    border-bottom: 17px solid transparent;\n    border-left: 27px solid #ffffff;\n  }\n\n  .xp-fast-charge-media.is-paused .xp-fast-charge-play {\n    display: grid;\n  }\n\n  @media (max-width: 1100px) {\n    .xp-fast-charge-container {\n      max-width: 860px;\n    }\n\n    .xp-fast-charge-media {\n      height: 430px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-fast-charge-video {\n      padding: 25px 22px 58px;\n      background: #ffffff;\n    }\n\n    .xp-fast-charge-container {\n      max-width: none;\n    }\n\n    .xp-fast-charge-header {\n      text-align: left;\n      margin-bottom: 26px;\n    }\n\n    .xp-fast-charge-header h2 {\n      margin: 0 0 18px;\n      max-width: 300px;\n      font-size: 21px;\n      line-height: 1.35;\n      font-weight: 400;\n    }\n\n    .xp-fast-charge-header h2 sup {\n      font-size: 9px;\n      top: -6px;\n    }\n\n    .xp-fast-charge-header p {\n      margin: 0;\n      max-width: 300px;\n      color: #536070;\n      font-size: 12px;\n      line-height: 1.55;\n    }\n\n    .xp-fast-charge-media {\n      width: 100%;\n      height: 212px;\n      border-radius: 0;\n      margin-top: 0;\n    }\n\n    .xp-fast-charge-video-el {\n      object-fit: cover;\n      object-position: center;\n    }\n\n    .xp-fast-charge-play {\n      display: grid;\n      width: 58px;\n      height: 58px;\n      background: transparent;\n      backdrop-filter: none;\n    }\n\n    .xp-fast-charge-play span {\n      margin-left: 5px;\n      border-top-width: 16px;\n      border-bottom-width: 16px;\n      border-left-width: 26px;\n      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));\n    }\n  }\n\n  @media (max-width: 390px) {\n    .xp-fast-charge-video {\n      padding: 25px 22px 58px;\n    }\n\n    .xp-fast-charge-media {\n      height: 212px;\n    }\n\n    .xp-fast-charge-header h2 {\n      font-size: 21px;\n    }\n\n    .xp-fast-charge-header p {\n      font-size: 12px;\n    }\n  }\n<\/style>\n\n<script>\n  (function () {\n    const media = document.getElementById(\"xpFastChargeMedia\");\n    if (!media) return;\n\n    const video = media.querySelector(\"video\");\n    const playBtn = media.querySelector(\".xp-fast-charge-play\");\n\n    if (!video || !playBtn) return;\n\n    function showPlay() {\n      media.classList.add(\"is-paused\");\n    }\n\n    function hidePlay() {\n      media.classList.remove(\"is-paused\");\n    }\n\n    video.play().then(hidePlay).catch(showPlay);\n\n    playBtn.addEventListener(\"click\", function (event) {\n      event.stopPropagation();\n      video.muted = false;\n      video.controls = true;\n      video.play().then(hidePlay).catch(function () {\n        video.muted = true;\n        video.play().then(hidePlay).catch(showPlay);\n      });\n    });\n\n    media.addEventListener(\"click\", function () {\n      if (video.paused) {\n        video.play().then(hidePlay).catch(showPlay);\n      } else {\n        video.pause();\n        showPlay();\n      }\n    });\n\n    video.addEventListener(\"pause\", showPlay);\n    video.addEventListener(\"play\", hidePlay);\n  })();\n<\/script>\n\n\n<section class=\"xp-group-pic-section\">\n  <div class=\"xp-group-pic-container\">\n\n    <div class=\"xp-group-pic-card\">\n      <picture>\n        <source\n          media=\"(max-width: 750px)\"\n          srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/834713ac44e5429c9102a98ebdb0fd3b.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\/c5b35b59eb1f4f678c37ac44f69e0e13.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n          alt=\"800V High Voltage SiC Platform\"\n        >\n      <\/picture>\n\n      <div class=\"xp-group-pic-overlay\">\n        <h3>800V High Voltage SiC Platform<\/h3>\n      <\/div>\n    <\/div>\n\n    <div class=\"xp-group-pic-card\">\n      <picture>\n        <source\n          media=\"(max-width: 750px)\"\n          srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/6f7a9176c14542239134c0b82b6d07c5.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\/6f7a9176c14542239134c0b82b6d07c5.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n          alt=\"XHP 3.0 Thermal Management\"\n        >\n      <\/picture>\n\n      <div class=\"xp-group-pic-overlay\">\n        <h3>XHP 3.0 Thermal Management<\/h3>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n  * {\n    box-sizing: border-box;\n  }\n\n  .xp-group-pic-section {\n    padding-bottom: 5vh;\n    width: 100%;\n    background: #ffffff;\n    overflow: hidden;\n    font-family: basis_grotesque_regular;\n  }\n\n  .xp-group-pic-container {\n    width: 100%;\n    max-width: 928px;\n    margin: 0 auto;\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 20px;\n  }\n\n  .xp-group-pic-card {\n    position: relative;\n    width: 100%;\n    height: 222px;\n    overflow: hidden;\n    border-radius: 2px;\n    background: #f4f4f4;\n    cursor: pointer;\n  }\n\n  .xp-group-pic-card picture,\n  .xp-group-pic-card img {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n\n  .xp-group-pic-card img {\n    object-fit: cover;\n    object-position: center;\n    transition: transform 0.6s ease;\n  }\n\n  .xp-group-pic-card:hover img {\n    transform: scale(1.04);\n  }\n\n  .xp-group-pic-overlay {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    min-height: 48px;\n    display: flex;\n    align-items: center;\n    padding: 14px 18px;\n    background: linear-gradient(\n      to bottom,\n      rgba(0, 0, 0, 0.06) 0%,\n      rgba(0, 0, 0, 0.55) 100%\n    );\n    z-index: 2;\n  }\n\n  .xp-group-pic-overlay h3 {\n    margin: 0;\n    color: #ffffff;\n    font-size: 12px;\n    line-height: 1.35;\n    font-weight: 700;\n  }\n\n  @media (max-width: 900px) {\n    .xp-group-pic-section {\n      padding: 70px 20px;\n    }\n\n    .xp-group-pic-container {\n      max-width: 760px;\n    }\n\n    .xp-group-pic-card {\n      height: 190px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-group-pic-section {\n      padding: 44px 0 54px;\n      background: #ffffff;\n    }\n\n    .xp-group-pic-container {\n      max-width: none;\n      display: flex;\n      gap: 12px;\n      overflow-x: auto;\n      overflow-y: hidden;\n      padding: 0 11px;\n      scroll-snap-type: x mandatory;\n      scrollbar-width: none;\n      -webkit-overflow-scrolling: touch;\n    }\n\n    .xp-group-pic-container::-webkit-scrollbar {\n      display: none;\n    }\n\n    .xp-group-pic-card {\n      flex: 0 0 211px;\n      height: 145px;\n      border-radius: 1px;\n      scroll-snap-align: start;\n    }\n\n    .xp-group-pic-overlay {\n      min-height: 38px;\n      padding: 10px 8px;\n      background: linear-gradient(\n        to bottom,\n        rgba(0, 0, 0, 0.08) 0%,\n        rgba(0, 0, 0, 0.62) 100%\n      );\n    }\n\n    .xp-group-pic-overlay h3 {\n      font-size: 12px;\n      line-height: 1.25;\n      white-space: nowrap;\n    }\n  }\n\n  @media (max-width: 390px) {\n    .xp-group-pic-card {\n      flex-basis: 211px;\n      height: 145px;\n    }\n  }\n<\/style>\n\n\n<section class=\"xp-security-banner\">\n  <picture class=\"xp-security-picture\">\n    <!-- Mobile image -->\n    <source\n      media=\"(max-width: 750px)\"\n      srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/7e5808a17c51493093dc0e142604faec.jpg?x-oss-process=image%2Fresize%2Cw_750%2Fquality%2Cq_75%2Finterlace%2C1\"\n    >\n\n    <!-- Desktop image -->\n    <img decoding=\"async\"\n      class=\"xp-security-img\"\n      src=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-03\/abd4d830705541ba99992f08e6d9590c.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n      alt=\"Absolute security, inside and out\"\n    >\n  <\/picture>\n\n  <div class=\"xp-security-content\">\n    <h2>Absolute security, inside and out<\/h2>\n  <\/div>\n<\/section>\n\n<style>\n  * {\n    box-sizing: border-box;\n  }\n\n  .xp-security-banner {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    background: #ffffff;\n    font-family: basis_grotesque_regular;\n  }\n\n  .xp-security-picture {\n    display: block;\n    width: 100%;\n  }\n\n  .xp-security-img {\n    width: 100%;\n    height: 680px;\n    display: block;\n    object-fit: cover;\n    object-position: center;\n  }\n\n  .xp-security-banner::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    background: rgba(0, 0, 0, 0.16);\n    pointer-events: none;\n  }\n\n  .xp-security-content {\n    position: absolute;\n    z-index: 2;\n    top: 78px;\n    left: 50%;\n    width: 92%;\n    transform: translateX(-50%);\n    text-align: center;\n  }\n\n  .xp-security-content h2 {\n    margin: 0;\n    color: #ffffff;\n    font-size: 28px;\n    line-height: 1.25;\n    font-weight: 400;\n  }\n\n  @media (max-width: 1200px) {\n    .xp-security-img {\n      height: 570px;\n    }\n\n    .xp-security-content {\n      top: 64px;\n    }\n\n    .xp-security-content h2 {\n      font-size: 25px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-security-banner {\n      display: flex;\n      flex-direction: column;\n      background: #ffffff;\n    }\n\n    .xp-security-banner::after {\n      display: none;\n    }\n\n    .xp-security-picture {\n      order: 1;\n      width: 100%;\n      display: block;\n    }\n\n    .xp-security-img {\n      width: 100%;\n      height: auto;\n      display: block;\n      object-fit: contain;\n      object-position: center top;\n    }\n\n    .xp-security-content {\n      position: static;\n      order: 2;\n      width: 100%;\n      transform: none;\n      padding: 24px 20px 30px;\n      background: #ffffff;\n      text-align: left;\n    }\n\n    .xp-security-content h2 {\n      max-width: 300px;\n      color: #000000;\n      font-size: 22px;\n      line-height: 1.45;\n      font-weight: 400;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-security-content {\n      padding: 24px 20px 30px;\n    }\n\n    .xp-security-content h2 {\n      font-size: 22px;\n      line-height: 1.45;\n    }\n  }\n<\/style>\n\n\n<section class=\"xp-battery-protection-section\">\n  <div class=\"xp-battery-protection-container\">\n\n    <h2 class=\"xp-battery-protection-title\">\n      Full battery protection\n    <\/h2>\n\n    <div class=\"xp-battery-protection-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\/036074386661402f9866299e812680c8.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\/444d5adc981c4eeaa55575905908d5bf.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n          alt=\"Full battery protection\"\n        >\n      <\/picture>\n    <\/div>\n\n    <div class=\"xp-battery-protection-content\">\n\n      <div class=\"xp-battery-protection-item\">\n        <h3>Triple-layer battery shield<\/h3>\n        <p>\n          The 4-3-4 design improves resistance to impacts, fires, and thermal runaways.\n        <\/p>\n      <\/div>\n\n      <div class=\"xp-battery-protection-item\">\n        <h3>Smart electrical insulation<\/h3>\n        <p>\n          Real-time fault detection and automatic circuit isolation to ensure battery safety.\n        <\/p>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n  * {\n    box-sizing: border-box;\n  }\n\n  .xp-battery-protection-section {\n    width: 100%;\n    background: #ffffff;\n    padding: 26px 20px 72px;\n    overflow: hidden;\n    font-family: basis_grotesque_regular;\n  }\n\n  .xp-battery-protection-container {\n    width: 100%;\n    max-width: 928px;\n    margin: 0 auto;\n    \/* background: #f7f7f7; *\/\n  }\n\n  .xp-battery-protection-title {\n    margin: 0 0 40px;\n    padding: 0;\n    color: #000000;\n    background: #ffffff;\n    text-align: center;\n    font-size: 25px;\n    line-height: 1.28;\n    font-weight: 700;\n  }\n\n  .xp-battery-protection-image {\n    width: 100%;\n    overflow: hidden;\n    background: #eeeeee;\n  }\n\n  .xp-battery-protection-image picture,\n  .xp-battery-protection-image img {\n    width: 100%;\n    display: block;\n  }\n\n  .xp-battery-protection-image img {\n    height: auto;\n    object-fit: contain;\n    object-position: center;\n  }\n\n  .xp-battery-protection-content {\n    width: 100%;\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 86px;\n    padding: 32px 20px 32px;\n    background: #f7f7f7;\n  }\n\n  .xp-battery-protection-item h3 {\n    position: relative;\n    margin: 0 0 14px;\n    padding-left: 14px;\n    color: #000000;\n    font-size: 16px;\n    line-height: 1.35;\n    font-weight: 700;\n  }\n\n  .xp-battery-protection-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-battery-protection-item p {\n    margin: 0;\n    color: #566070;\n    font-size: 12px;\n    line-height: 1.7;\n    font-weight: 400;\n    letter-spacing: 0.02em;\n  }\n\n  @media (max-width: 1100px) {\n    .xp-battery-protection-container {\n      max-width: 900px;\n    }\n\n    .xp-battery-protection-content {\n      gap: 56px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-battery-protection-section {\n      padding: 52px 20px 58px;\n      background: #ffffff;\n    }\n\n    .xp-battery-protection-container {\n      max-width: none;\n      background: #ffffff;\n    }\n\n    .xp-battery-protection-title {\n      margin: 0 0 34px;\n      max-width: 290px;\n      text-align: left;\n      background: #ffffff;\n      color: #000000;\n      font-size: 22px;\n      line-height: 1.25;\n      font-weight: 700;\n    }\n\n    .xp-battery-protection-image {\n      width: 100%;\n      background: transparent;\n    }\n\n    .xp-battery-protection-image picture,\n    .xp-battery-protection-image img {\n      width: 100%;\n      height: auto;\n      display: block;\n    }\n\n    .xp-battery-protection-image img {\n      object-fit: contain;\n      object-position: center;\n    }\n\n    .xp-battery-protection-content {\n      display: block;\n      padding: 35px 0 0;\n      background: #ffffff;\n    }\n\n    .xp-battery-protection-item {\n      margin-bottom: 34px;\n    }\n\n    .xp-battery-protection-item:last-child {\n      margin-bottom: 0;\n    }\n\n    .xp-battery-protection-item h3 {\n      margin: 0 0 14px;\n      padding-left: 10px;\n      color: #000000;\n      font-size: 16px;\n      line-height: 1.35;\n      font-weight: 400;\n    }\n\n    .xp-battery-protection-item h3::before {\n      top: 5px;\n      width: 2px;\n      height: 16px;\n      background: #8cc63f;\n    }\n\n    .xp-battery-protection-item p {\n      max-width: 290px;\n      color: #536070;\n      font-size: 11px;\n      line-height: 1.65;\n      letter-spacing: 0;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .xp-battery-protection-section {\n      padding: 52px 20px 58px;\n    }\n\n    .xp-battery-protection-title {\n      font-size: 22px;\n      line-height: 1.25;\n      margin-bottom: 34px;\n    }\n\n    .xp-battery-protection-content {\n      padding-top: 35px;\n    }\n  }\n<\/style>\n\n\n<section class=\"xp-group-pic-section\">\n  <div class=\"xp-group-pic-container\">\n\n    <article class=\"xp-group-pic-card\">\n      <picture>\n        <source\n          media=\"(max-width: 750px)\"\n          srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/834713ac44e5429c9102a98ebdb0fd3b.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\/c5b35b59eb1f4f678c37ac44f69e0e13.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n          alt=\"800V High Voltage SiC Platform\"\n        >\n      <\/picture>\n\n      <div class=\"xp-group-pic-overlay\">\n        <h3>800V High Voltage SiC Platform<\/h3>\n      <\/div>\n    <\/article>\n\n    <article class=\"xp-group-pic-card\">\n      <picture>\n        <source\n          media=\"(max-width: 750px)\"\n          srcset=\"https:\/\/s-cdn.xpeng.com\/commoncms\/prod\/2025-07-04\/6f7a9176c14542239134c0b82b6d07c5.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\/6f7a9176c14542239134c0b82b6d07c5.jpg?x-oss-process=image%2Fresize%2Cw_1920%2Fquality%2Cq_80%2Finterlace%2C1\"\n          alt=\"XHP 3.0 Thermal Management\"\n        >\n      <\/picture>\n\n      <div class=\"xp-group-pic-overlay\">\n        <h3>XHP 3.0 Thermal Management<\/h3>\n      <\/div>\n    <\/article>\n\n  <\/div>\n<\/section>\n\n<style>\n  * {\n    box-sizing: border-box;\n  }\n\n  .xp-group-pic-section {\n    width: 100%;\n    background: #ffffff;\n    padding: 110px 20px;\n    overflow: hidden;\n    font-family: basis_grotesque_regular;\n  }\n\n  .xp-group-pic-container {\n    width: 100%;\n    max-width: 928px;\n    margin: 0 auto;\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 20px;\n  }\n\n  .xp-group-pic-card {\n    position: relative;\n    width: 100%;\n    height: 222px;\n    overflow: hidden;\n    border-radius: 2px;\n    background: #f4f4f4;\n    cursor: pointer;\n  }\n\n  .xp-group-pic-card picture,\n  .xp-group-pic-card img {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n\n  .xp-group-pic-card img {\n    object-fit: cover;\n    object-position: center;\n    transition: transform 0.6s ease;\n  }\n\n  .xp-group-pic-card:hover img {\n    transform: scale(1.04);\n  }\n\n  .xp-group-pic-overlay {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 2;\n    min-height: 48px;\n    display: flex;\n    align-items: center;\n    padding: 14px 18px;\n    background: linear-gradient(\n      to bottom,\n      rgba(0, 0, 0, 0.05) 0%,\n      rgba(0, 0, 0, 0.62) 100%\n    );\n  }\n\n  .xp-group-pic-overlay h3 {\n    margin: 0;\n    color: #ffffff;\n    font-size: 12px;\n    line-height: 1.35;\n    font-weight: 700;\n  }\n\n  @media (max-width: 900px) {\n    .xp-group-pic-section {\n      padding: 70px 20px;\n    }\n\n    .xp-group-pic-container {\n      max-width: 760px;\n    }\n\n    .xp-group-pic-card {\n      height: 190px;\n    }\n  }\n\n  @media (max-width: 750px) {\n    .xp-group-pic-section {\n      padding: 0px 0px  0px 42px;\n      background: #ffffff;\n      overflow: hidden;\n    }\n\n    .xp-group-pic-container {\n      width: 100%;\n      max-width: none;\n      margin: 0;\n      display: flex;\n      gap: 12px;\n      overflow-x: auto;\n      overflow-y: hidden;\n      padding: 0 8px;\n      scroll-snap-type: x mandatory;\n      scrollbar-width: none;\n      -webkit-overflow-scrolling: touch;\n    }\n\n    .xp-group-pic-container::-webkit-scrollbar {\n      display: none;\n    }\n\n    .xp-group-pic-card {\n      flex: 0 0 193px;\n      width: 193px;\n      height: 135px;\n      border-radius: 1px;\n      scroll-snap-align: start;\n    }\n\n    .xp-group-pic-card img {\n      object-fit: cover;\n      object-position: center;\n      transform: none;\n    }\n\n    .xp-group-pic-card:hover img {\n      transform: none;\n    }\n\n    .xp-group-pic-overlay {\n      min-height: 34px;\n      padding: 8px 6px;\n      background: linear-gradient(\n        to bottom,\n        rgba(0, 0, 0, 0.04) 0%,\n        rgba(0, 0, 0, 0.66) 100%\n      );\n    }\n\n    .xp-group-pic-overlay h3 {\n      width: 100%;\n      color: #ffffff;\n      font-size: 11px;\n      line-height: 1.2;\n      font-weight: 700;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: clip;\n    }\n  }\n\n  @media (max-width: 390px) {\n    .xp-group-pic-card {\n      flex-basis: 193px;\n      width: 193px;\n      height: 135px;\n    }\n\n    .xp-group-pic-container {\n      gap: 12px;\n      padding: 0 8px;\n    }\n  }\n<\/style>\n\n\n\n\n\n\n\n\n\n\n\n\n\n<section class=\"xp-testdrive\">\n  <div class=\"xp-wrap\">\n\n    <div class=\"xp-left\">\n      <h2>Explore the XPENG P7+<\/h2>\n      <p>Book a test drive of the XPENG P7+<\/p>\n\n      <img decoding=\"async\"\n        class=\"xp-car\"\n        src=\"https:\/\/s-cdn.xpeng.com\/xpwebsite\/prod\/2025-07-11\/0c8721f97c214adebbe8b60adf288bc5.png\"\n        alt=\"XPENG G6\"\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    box-sizing: border-box;\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 P7+ is available from 2,190,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 G6?<\/span>\n          <span class=\"xp-faq-icon\"><\/span>\n        <\/button>\n\n        <div class=\"xp-faq-answer\">\n          <p>\n            The XPENG G6 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 G6?<\/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 G6 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 G6 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    box-sizing: border-box;\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    font-weight: 400;\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    font-weight: 600;\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&#8217;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 G6 | XPENG EGY New XPENG G6 Intelligent design, spacious driving pleasure: the ultimate coup\u00e9 SUV Up to 525 KM1 WLTP Range 4.13 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 Avant-garde SUV coupe design Fastback silhouette, new full-width LED [&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-1102","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/xpeng.com\/eg\/wp-json\/wp\/v2\/pages\/1102","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=1102"}],"version-history":[{"count":5,"href":"https:\/\/xpeng.com\/eg\/wp-json\/wp\/v2\/pages\/1102\/revisions"}],"predecessor-version":[{"id":1107,"href":"https:\/\/xpeng.com\/eg\/wp-json\/wp\/v2\/pages\/1102\/revisions\/1107"}],"wp:attachment":[{"href":"https:\/\/xpeng.com\/eg\/wp-json\/wp\/v2\/media?parent=1102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}