{"id":101596,"date":"2024-09-04T16:31:39","date_gmt":"2024-09-04T09:31:39","guid":{"rendered":"https:\/\/jblstore.co.id\/?page_id=101596"},"modified":"2024-10-24T22:08:01","modified_gmt":"2024-10-24T15:08:01","slug":"live-series-3","status":"publish","type":"page","link":"https:\/\/jblstore.co.id\/en\/live-series-3\/","title":{"rendered":"Live Series 3"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"101596\" class=\"elementor elementor-101596\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-af43647 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"af43647\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-29d3049\" data-id=\"29d3049\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a3f3797 elementor-widget elementor-widget-shortcode\" data-id=\"a3f3797\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<link rel=\"stylesheet\" type=\"text\/css\" href=\"\/\/cdn.jsdelivr.net\/gh\/kenwheeler\/slick@1.8.1\/slick\/slick.css\"\/>\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"\/\/cdn.jsdelivr.net\/gh\/kenwheeler\/slick@1.8.1\/slick\/slick-theme.css\"\/>\n    <style>\n        :root {\n            --blue-live-series: #99b9ff;\n            --orange-live-series: #ff471d;\n            --max-width-container: 1200px;\n        }\n\n        #title {\n            display: none;\n        }\n\n        .wrapper {\n            background-color: black;\n            overflow: hidden;\n        }\n\n        .wrapper > section {\n            z-index: 1;\n        }\n\n        .isolation-decoration {\n            background: radial-gradient(50% 50% at 50% 50%, #FF471D 0%, rgba(255, 71, 29, 0) 100%);\n            width: 100%;\n            height: 100%;\n            border-radius: 50%;\n        }\n\n        #hero {\n            position: relative;\n            padding-bottom: 50px;\n\n            .section-wrapper {\n                position: relative;\n                max-width: var(--max-width-container);\n                margin: 0 auto;\n\n                @media (max-width: 768px) {\n                    & {\n                        padding: 0 20px;\n                    }\n                }\n\n                .dots-slideshow {\n                    list-style: none;\n                    display: flex;\n                    justify-content: center;\n                    align-items: center;\n                    gap: 20px;\n                    \n                    li {\n                        button {\n                            background-color: white;\n                            border-radius: 50%;\n                            width: 20px;\n                            height: 20px;\n                            padding: 0;\n                            border: none;\n                            margin: 0;\n\n                            &:focus, &:hover {\n                                outline: none;\n                            }\n\n                            @media (max-width: 768px) {\n                                & {\n                                    width: 10px;\n                                    height: 10px;\n                                }\n                            }\n                        }\n                        [aria-selected=\"true\"] {\n                            clip-path: polygon(88% 0, 63% 31%, 54% 39%, 46% 44%, 38% 47%, 29% 49%, 0% 50%, 20% 51%, 29% 52%, 37% 56%, 37% 65%, 14% 100%, 43% 66%, 49% 61%, 56% 57%, 65% 54%, 74% 52%, 100% 50%, 77% 49%, 70% 46%, 65% 42%, 65% 36%, 68% 29%);\n                            width: 50px;\n                            height: 50px;\n\n                            @media (max-width: 768px) {\n                                & {\n                                    width: 30px;\n                                    height: 30px;\n                                }\n                            }\n                        }\n                    }\n                }\n            }\n        }\n\n        .hero-decoration {\n            position: relative;\n\n            .decoration {\n                position: absolute;\n                left: 50%;\n                width: 1568px;\n                height: 1568px;\n                transform: translateY(-60%) translateX(-10%);\n                display: flex;\n                justify-content: center;\n                align-items: center;\n\n                @media (max-width: 768px) {\n                    & {\n                        width: 784px;\n                        height: 784px;\n                        transform: translateY(-60%) translateX(-10%);\n                    }\n                }\n            }\n        }\n        \n        #description {\n            position: relative;\n\n            .section-wrapper {\n                max-width: var(--max-width-container);\n                margin: 0 auto;\n                position: relative;\n\n                .tws-right, .tws-left {\n                    position: absolute;\n                    width: 255px;\n\n                    @media (max-width: 768px) {\n                        & {\n                            width: 100px;\n                        }\n                    }\n                }\n\n                .tws-right {\n                    bottom: -83px;\n                    right: -45px;\n\n                    @media (max-width: 768px) {\n                        & {\n                            bottom: -45px;\n                            right: 0;\n                        }\n                    }\n                }\n        \n                .tws-left {\n                    top: -107px;\n                    left: -83px;\n\n                    @media (max-width: 768px) {\n                        & {\n                            top: -137.3px;\n                            left: -20px;\n                        }\n                    }\n                }\n                \n                .inside {\n                    display: flex;\n                    justify-content: center;\n                    align-items: center;\n                    flex-direction: column;\n                    gap: 20px;\n                    \n                    .title-description {\n                        color: var(--blue-live-series);\n                        font-family: \"Kostic - Roc Grotesk Condensed Heavy\", Arial, Helvetica, sans-serif;\n                        text-transform: uppercase;\n                        text-align: center;\n                        \/* 1440 -> 376 | 120 -> 60 *\/\n                        font-size: clamp(60px, calc(3.75rem + ((1vw - 3.75px) * 5.6338)), 120px);\n                        min-height: 0vw;\n                        text-transform: uppercase;\n                        margin: 0;\n                    }\n\n                    p {\n                        color: white;\n                        \/* 1440 -> 376 | 20 -> 16 *\/\n                        font-size: clamp(16px, calc(1rem + ((1vw - 3.75px) * 0.3756)), 20px);\n                        min-height: 0vw;\n                        text-align: center;\n                        margin: 0;\n                        max-width: 750px;\n                        margin: 0 auto;\n                        line-height: normal;\n                        font-family: Grostesk-Regular, Arial, Helvetica, sans-serif;\n\n                        @media (max-width: 768px) {\n                            & {\n                                padding: 0 10px;\n                            }\n                        }\n                    }\n\n                    .cta {\n                        background-color: var(--blue-live-series);\n                        border-radius: 20px;\n                        margin-top: 50px;\n                        padding: 5px 30px;\n                        transition: .3s;\n                        text-transform: uppercase;\n                        font-family: \"Kostic - Roc Grotesk Wide Bold\", Arial, Helvetica, sans-serif;\n\n                        &:focus,\n                        &:hover {\n                            outline: none;\n                        }\n\n                        &:hover {\n                            opacity: 0.8;\n                        }\n                    }\n                }\n            }\n        }\n\n        .geek-decoration {\n            position: relative;\n            max-width: var(--max-width-container);\n            margin: 0 auto;\n\n            .decoration {\n                position: absolute;\n                right: 50%;\n                width: 1568px;\n                height: 1568px;\n                transform: translateY(-40%);\n                display: flex;\n                justify-content: center;\n                align-items: center;\n\n                @media (max-width: 768px) {\n                    & {\n                        width: 784px;\n                        height: 784px;\n                        transform: translateY(-100%) translateX(0);\n                    }\n                }\n            }\n        }\n\n        .geek-second-decoration {\n            position: relative;\n            max-width: var(--max-width-container);\n            margin: 0 auto;\n\n            .decoration {\n                position: absolute;\n                left: 20%;\n                width: 784px;\n                height: 784px;\n                transform: translateY(-25%);\n                display: flex;\n                justify-content: center;\n                align-items: center;\n            }\n        }\n\n        .geek-third-decoration {\n            position: relative;\n            max-width: var(--max-width-container);\n            margin: 0 auto;\n\n            .decoration {\n                position: absolute;\n                right: 20%;\n                width: 784px;\n                height: 784px;\n                transform: translateY(-100%);\n                display: flex;\n                justify-content: center;\n                align-items: center;\n            }\n        }\n        .geek-fourth-decoration {\n            position: relative;\n            max-width: var(--max-width-container);\n            margin: 0 auto;\n\n            .decoration {\n                position: absolute;\n                left: 20%;\n                width: 784px;\n                height: 784px;\n                transform: translateY(-180%);\n                display: flex;\n                justify-content: center;\n                align-items: center;\n            }\n        }\n\n        .video {\n            position: relative;\n            margin: 50px 20px;\n            margin-top: 150px;\n            z-index: 1;\n\n            @media (max-width: 768px) {\n                & {\n                    margin-top: 50px;\n                }\n            }\n            \n            .trailer-video {\n                \/* display: flex; *\/\n                max-width: var(--max-width-container);\n                margin: 0 auto;\n                \n                .dots-slideshow {\n                    list-style: none;\n                    display: flex;\n                    justify-content: center;\n                    align-items: center;\n                    gap: 20px;\n                    \n                    li {\n                        button {\n                            background-color: white;\n                            border-radius: 50%;\n                            width: 15px;\n                            height: 15px;\n                            padding: 0;\n                            border: none;\n                            margin: 0;\n                            color: white;\n\n                            &:focus, &:hover {\n                                outline: none;\n                            }\n\n                            \/* @media (max-width: 768px) {\n                                & {\n                                    width: 10px;\n                                    height: 10px;\n                                }\n                            } *\/\n                        }\n                        [aria-selected=\"true\"] {\n                            width: 15px;\n                            height: 15px;\n                            background-color: black;\n                            border: 2px solid white;\n                            color: black;\n\n                            \/* @media (max-width: 768px) {\n                                & {\n                                    width: 30px;\n                                    height: 30px;\n                                }\n                            } *\/\n                        }\n                    }\n                }\n\n                & > * {\n                    width: 100%;\n                    border-radius: 50px;\n                    overflow: hidden;\n\n                    @media (max-width: 768px) {\n                        & {\n                            border-radius: 20px;\n                        }\n                    }\n\n                }\n\n                .rll-youtube-player {\n                    padding-bottom: 40%;\n\n                    @media (max-width: 768px) {\n                        & {\n                            padding-bottom: 56.25%;\n                        }\n                    }\n                }\n            }\n        }\n\n        #geek {\n            margin: 100px 10px;\n            color: white;\n            position: relative;\n\n            .title-geek {\n                text-align: center;\n                text-transform: uppercase;\n                font-family: \"Kostic - Roc Grotesk Wide Light\", Arial, Helvetica, sans-serif;\n                \/* 1440 -> 376 | 70 -> 28 *\/\n                font-size: clamp(28px, calc(1.75rem + ((1vw - 3.75px) * 3.9437)), 70px);\n                min-height: 0vh;\n                color: white;\n                display: flex;\n                flex-direction: column;\n\n                & > *:not(:first-child) {\n                    margin-top: -15px;\n\n                    @media (max-width: 768px) {\n                        & {\n                            margin-top: -8px;\n                        }\n                    }\n                }\n                .second {\n                    line-height: 95%;\n                }\n            }\n            \n            .inside {\n                position: relative;\n                margin-top: 50px;\n\n                .copy:nth-child(2n) {\n                    flex-direction: row-reverse;\n\n                    @media (max-width: 768px) {\n                        & {\n                            flex-direction: column-reverse;\n                        }\n                    }\n                }\n\n                .copy:not(:first-child) {\n                    margin-top: 50px;\n                }\n\n                .copy {\n                    display: flex;\n                    justify-content: space-between;\n                    gap: 100px;\n                    max-width: 1200px;\n                    margin: 0 auto;\n\n                    @media (max-width: 768px) {\n                        & {\n                            flex-wrap: wrap;\n                            flex-direction: column-reverse;\n                            gap: 30px;\n                        }\n                    }\n\n                    .text-wrapper {\n                        width: 50%;\n                        align-content: center;\n\n                        @media (max-width: 768px) {\n                            & {\n                                width: 100%;\n                            }\n                        }\n\n                        .title-inside {\n                            font-family: \"Kostic - Roc Grotesk Condensed Heavy\", Arial, Helvetica, sans-serif;\n                            color: var(--orange-live-series);\n                            \/* 1440 -> 376 | 75 -> 55 *\/\n                            font-size: clamp(55px, calc(3.4375rem + ((1vw - 3.75px) * 1.8779)), 75px);;\n                            min-height: 0vh;\n                            margin-bottom: 30px;\n                            line-height: 80%;\n                            \n                            @media (max-width: 768px) {\n                                & {\n                                    line-height: 45px;\n                                    margin-bottom: 20px;\n                                }\n                            }\n                        }\n\n                        p {\n                            color: white;\n                            \/* 1440 -> 376 | 20 -> 16 *\/\n                            font-size: clamp(16px, calc(1rem + ((1vw - 3.75px) * 0.3756)), 20px);\n                            min-height: 0vw;\n                            margin: 0;\n                            line-height: normal;\n                            font-family: Grostesk-Regular, Arial, Helvetica, sans-serif;\n                        }\n                    }\n                    \n                    .image-wrapper {\n                        width: 50%;\n\n                        @media (max-width: 768px) {\n                            & {\n                                width: 100%;\n                            }\n                        }\n                    }\n                }\n            }\n        }\n\n        .product-after-decoration {\n            position: relative;\n            max-width: var(--max-width-container);\n            margin: 0 auto;\n\n            .decoration {\n                position: absolute;\n                left: 20%;\n                width: 784px;\n                height: 784px;\n                transform: translateY(-25%);\n                display: flex;\n                justify-content: center;\n                align-items: center;\n            }\n        }\n\n        .product-before-decoration {\n            position: relative;\n\n            .decoration {\n                position: absolute;\n                left: 50%;\n                width: 1568px;\n                height: 1568px;\n                transform: translateY(-100%);\n                display: flex;\n                justify-content: center;\n                align-items: center;\n\n                @media (max-width: 768px) {\n                    & {\n                        transform: translateY(-10%);\n                    }\n                }\n            }\n        }\n\n        #products {\n            position: relative;\n            padding-bottom: 50px;\n\n            .section-wrapper {\n                \n                .title-products {\n                    font-family: \"Kostic - Roc Grotesk Wide Light\", Arial, Helvetica, sans-serif;\n                    \/* 1440 -> 376 | 70 -> 30 *\/\n                    font-size: clamp(30px, calc(1.875rem + ((1vw - 3.75px) * 3.7559)), 70px);\n                    min-height: 0vh;\n                    color: white;\n                    text-align: center;\n                    text-transform: uppercase;\n\n                    .second {\n                        font-family: \"Kostic - Roc Grotesk Condensed Heavy\", Arial, Helvetica, sans-serif;\n                        \/* 1440 -> 376 | 120 -> 50 *\/\n                        font-size: clamp(50px, calc(3.125rem + ((1vw - 3.75px) * 6.5728)), 120px);\n                        min-height: 0vh;\n                        color: var(--blue-live-series);\n\n                        .underlined {\n                            position: relative;\n\n                            img {\n                                width: 100%;\n                                height: auto;\n                                position: absolute;\n                                bottom: 2%;\n                                left: 0;\n                                pointer-events: none;\n                                user-select: none;\n                            }\n                        }\n                    }\n                }\n                .inside {\n                    display: flex;\n                    gap: 150px;\n                    justify-content: center;\n                    max-width: var(--max-width-container);\n                    margin: 0 auto;\n\n                    @media (max-width: 768px) {\n                        & {\n                            flex-direction: column;\n                            gap: 50px;\n                        }\n                    }\n\n                    .product {\n\n                        @media (max-width: 768px) {\n                            & {\n                                display: flex;\n                            }\n                        }\n                        \n                        .image-wrapper {\n                            max-width: 270px;\n\n                            @media (max-width: 768px) {\n                                & {\n                                    padding: 0 8%;\n                                    width: 50%;\n                                }\n                            }\n                        }\n\n                        .copy {\n\n                            @media (max-width: 768px) {\n                                & {\n                                    display: flex;\n                                    flex-direction: column;\n                                    align-items: center;\n                                    justify-content: center;\n                                    width: 50%;\n                                }\n                            }\n                            \n                            .text-wrapper {\n                                margin-top: 50px;\n\n                                @media (max-width: 768px) {\n                                    & {\n                                        margin-top: 0;\n                                        padding: 5%;\n                                    }\n                                }\n                                \n                                h3 {\n                                    color: white;\n                                    font-family: \"Kostic - Roc Grotesk Wide ExtraBold\", Arial, Helvetica, sans-serif;\n                                    text-align: center;\n                                    \/* 1440 -> 376 | 36 -> 18 *\/\n                                    font-size: clamp(18px, calc(1.125rem + ((1vw - 3.75px) * 1.6901)), 36px);\n                                    min-height: 0vh;\n                                }\n                            }\n\n                            .button-wrapper {\n                                display: flex;\n                                justify-content: center;\n                                \n                                .cta {\n                                    background-color: var(--orange-live-series);\n                                    color: white;\n                                    font-family: \"Kostic - Roc Grotesk Wide Bold\", Arial, Helvetica, sans-serif;\n                                    border-radius: 30px;\n                                    padding: 10px 30px;\n                                    text-transform: uppercase;\n                                    margin: 0 auto;\n\n                                    @media (max-width: 768px) {\n                                        & {\n                                            font-size: 14px;\n                                            padding: 5px 10px;\n                                        }\n                                    }\n                                    \n                                    &:focus,\n                                    &:hover {\n                                        outline: none;\n                                    }\n\n                                    &:hover {\n                                        opacity: 0.8;\n                                    }\n                                }\n                            }\n                            \n                            .colors-variation {\n                                display: flex;\n                                gap: 8px;\n                                justify-content: center;\n                                margin-top: 50px;\n\n                                @media (max-width: 768px) {\n                                    & {\n                                        margin-top: 20px;\n                                    }\n                                }\n\n                                a {\n                                    div {\n                                        width: 16px;\n                                        height: 16px;\n                                        border-radius: 100%;\n                                        border: 1px solid white;\n                                        cursor: pointer;\n                                    }\n\n                                    .black {\n                                        background-color: black;\n                                    }\n                                    .green {\n                                        background-color: #228b22;\n                                    }\n                                    .grey {\n                                        background-color: #6d6d6d;\n                                    }\n                                    .purple {\n                                        background-color: #552583;\n                                    }\n                                    .silver {\n                                        background-color: #c0c0c0;\n                                    }\n                                }\n\n                            }\n                        }\n                    }\n                }\n            }\n        }\n\n        .desktop {\n            display: block;\n\n            @media (max-width: 768px) {\n                & {\n                    display: none;\n                }\n            }\n        }\n\n        .mobile {\n            display: none;\n\n            @media (max-width: 768px) {\n                & {\n                    display: block;\n                }\n            }\n        }\n\n        .product-decoration {\n            position: relative;\n\n            .decoration {\n                position: absolute;\n                left: 50%;\n                width: 1568px;\n                height: 1568px;\n                transform: translateY(-30%) translateX(-50%);\n                display: flex;\n                justify-content: center;\n                align-items: center;\n\n                @media (max-width: 768px) {\n                    & {\n                        transform: translateY(-10%) translateX(-50%);\n                    }\n                }\n            }\n        }\n\n        .switch {\n            position: relative;\n            display: inline-block;\n            width: 92px;\n            height: 50px;\n            margin-top: -10px;\n\n            @media (max-width: 768px) {\n                & {\n                    width: 50px;\n                    height: 25px;\n                    margin-top: -5px;\n                }\n            }\n        }\n\n        .switch input { \n            opacity: 0;\n            width: 0;\n            height: 0;\n        }\n\n        .slider {\n            position: absolute;\n            cursor: pointer;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background-color: #ccc;\n            -webkit-transition: .4s;\n            transition: .4s;\n\n            &::before {\n                position: absolute;\n                content: \"\";\n                height: 45px;\n                width: 52px;\n                left: 4px;\n                bottom: 2px;\n                background-color: #ccc;\n                -webkit-transition: .4s;\n                transition: .4s;\n                border: 2px solid black;\n            }\n        }\n\n        @media (max-width: 768px) {\n            .slider::before {\n                height: 23px;\n                width: 30px;\n                bottom: 1px;\n            }\n        }\n\n        input:checked + .slider, input:checked + .slider:before {\n            background-color: var(--blue-live-series);\n        }\n\n        input:focus + .slider {\n            box-shadow: 0 0 1px var(--blue-live-series);\n        }\n\n        input:checked + .slider:before {\n            -webkit-transform: translateX(13px);\n            -ms-transform: translateX(13px);\n            transform: translateX(13px);\n        }\n        \n        @media (min-width: 768px) {\n            input:checked + .slider:before {\n                -webkit-transform: translateX(33px);\n                -ms-transform: translateX(33px);\n                transform: translateX(33px);\n            }\n        }\n\n        .slider.round {\n            border-radius: 34px;\n        }\n\n        .slider.round:before {\n            border-radius: 45%;\n        }\n    <\/style>\n    <main class=\"wrapper\">\n        <section id=\"hero\">\n            <div class=\"section-wrapper\">\n                <div class=\"slideshow\">\n                    <div class=\"image-wrapper\">\n                        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2024\/09\/banner-1.webp\" alt=\"KV Night time\">\n                    <\/div>\n                    <div class=\"image-wrapper\">\n                        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2024\/09\/banner-2.webp\" alt=\"KV Me Time\">\n                    <\/div>\n                    <div class=\"image-wrapper\">\n                        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2024\/09\/banner-3.webp\" alt=\"KV Commutee\">\n                    <\/div>\n                    <div class=\"image-wrapper\">\n                        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2024\/09\/banner-4.webp\" alt=\"KV Cafe\">\n                    <\/div>\n                    <div class=\"image-wrapper\">\n                        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2024\/09\/banner-5.webp\" alt=\"KV Hiking\">\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n        <div class=\"hero-decoration\">\n            <div class=\"decoration\">\n                <div class=\"isolation-decoration\"><\/div>\n            <\/div>\n        <\/div>\n        <section id=\"description\">\n            <div class=\"section-wrapper\">\n                <img decoding=\"async\" class=\"tws-left\" src=\"\/wp-content\/uploads\/2024\/09\/tws-left-bg.webp\" alt=\"Earbud top\">\n                <div class=\"inside\">\n                    <h1 class=\"title-description\">JBL Live Series 3<\/h1>\n                    <p>Controlling your sound is now crazy easy! With a first-of-its-kind smart charging case, the JBL Live Series 3 lets you toggle your music with just a touch\u2014all without the need for your phone.<\/p>\n                    <button class=\"cta\" id=\"buy-now\">\n                        Buy Now\n                    <\/button>\n                <\/div>\n                <img decoding=\"async\" class=\"tws-right\" src=\"\/wp-content\/uploads\/2024\/09\/tws-right-bg.webp\" alt=\"Earbud bottom\">\n            <\/div>\n        <\/section>\n        <section class=\"video\">\n            <div class=\"trailer-video\">\n                <div class=\"video-wrapper\">\n                    <iframe width=\"1110\" height=\"625\" src=\"https:\/\/www.youtube.com\/embed\/G9qLav6PQOA\" title=\"JBL APAC | Live Buds 3\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n                <\/div>\n                <div class=\"video-wrapper\">\n                    <iframe width=\"1110\" height=\"625\" src=\"https:\/\/www.youtube.com\/embed\/b3dyNztAFr8\" title=\"JBL APAC | Live Beam 3\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n                <\/div>\n                <div class=\"video-wrapper\">\n                    <iframe width=\"1110\" height=\"625\" src=\"https:\/\/www.youtube.com\/embed\/r7Ms4Fr1FzM\" title=\"JBL APAC | Live Flex 3\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n                <\/div>\n            <\/div>\n        <\/section>\n        <div class=\"geek-decoration\">\n            <div class=\"decoration\">\n                <div class=\"isolation-decoration\"><\/div>\n            <\/div>\n        <\/div>\n        <div class=\"geek-second-decoration mobile\">\n            <div class=\"decoration\">\n                <div class=\"isolation-decoration\"><\/div>\n            <\/div>\n        <\/div>\n        <section id=\"geek\">\n            <h2 class=\"title-geek\">\n                <span>FEED YOUR INNER<\/span>\n                <span>\n                    <span>\n                        <span>C<\/span><span class=\"switch-wrapper\"><label class=\"switch\"><input type=\"checkbox\"><span class=\"slider round\"><\/span><\/label><\/span><span>NTROL<\/span>\n                    <\/span>\n                    <span>GEEK.<\/span>\n                <\/span>\n            <\/h2>\n            <div class=\"inside\">\n                <div class=\"copy\">\n                    <div class=\"text-wrapper\">\n                        <h3 class=\"title-inside\">ALL IN <br> YOUR HAND<\/h3>\n                        <p>Smart case technology enables direct access to features like Ambient Sound Control, EQ Settings, \u2018Find My Buds\u2019, and plenty more.<\/p>\n                    <\/div>\n                    <div class=\"image-wrapper\">\n                        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2024\/09\/gif-tws-live-series.gif\" alt=\"Me Time\">\n                    <\/div>\n                <\/div>\n                <div class=\"copy\">\n                    <div class=\"text-wrapper\">\n                        <h3 class=\"title-inside\">SIGNATURE <br> SOUND WITH <br> A NEW TOUCH<\/h3>\n                        <p>Delivering our signature sound, the Live Series 3 now features Hi-res Audio Wireless with LDAC, JBL Spatial Sound, exceptional call quality\u2014all with an added ease of use.<\/p>\n                    <\/div>\n                    <div class=\"image-wrapper\">\n                        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2024\/09\/tws-KV-digital.webp\" alt=\"Cafe Digital\">\n                    <\/div>\n                <\/div>\n                <div class=\"copy\">\n                    <div class=\"text-wrapper\">\n                        <h3 class=\"title-inside\">TAP IN, <br> TUNE OUT<\/h3>\n                        <p>With 4 noise-sensing mics, the Live Series 3\u2019s True Adaptive Noise Cancelling technology immerses you in the moment, anywhere you go.<\/p>\n                    <\/div>\n                    <div class=\"image-wrapper\">\n                        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2024\/09\/earbud-1.webp\" alt=\"Earbuds\">\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n        <div class=\"geek-fourth-decoration mobile\">\n            <div class=\"decoration\">\n                <div class=\"isolation-decoration\"><\/div>\n            <\/div>\n        <\/div>\n        <div class=\"geek-third-decoration mobile\">\n            <div class=\"decoration\">\n                <div class=\"isolation-decoration\"><\/div>\n            <\/div>\n        <\/div>\n        <div class=\"product-before-decoration\">\n            <div class=\"decoration\">\n                <div class=\"isolation-decoration\"><\/div>\n            <\/div>\n        <\/div>\n        <div class=\"product-after-decoration mobile\">\n            <div class=\"decoration\">\n                <div class=\"isolation-decoration\"><\/div>\n            <\/div>\n        <\/div>\n        <section id=\"products\">\n            <div class=\"section-wrapper\">\n                <h2 class=\"title-products\">\n                3 FITS, 4 COLOURS. <br>\n                    <span class=\"second desktop\"> <span class=\"underlined\">WORLD<img decoding=\"async\" src=\"\/wp-content\/uploads\/2024\/09\/white-line-1.png\" alt=\"decoration\"\/><\/span> OF DIFFERENCE.<\/span>\n                    <span class=\"second mobile\"> <span class=\"underlined\">WORLD<img decoding=\"async\" src=\"\/wp-content\/uploads\/2024\/09\/white-line-1.png\" alt=\"decoration\"\/><\/span><br> OF DIFFERENCE.<\/span>\n                <\/h2>\n                <div class=\"inside\">\n                    <div class=\"product\">\n                        <div class=\"image-wrapper\">\n                            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2024\/09\/tws-1.webp\" alt=\"Live Flex 3 Thumbnail\">\n                        <\/div>\n                        <div class=\"copy\">\n                            <div class=\"text-wrapper\">\n                                <h3>LIVE FLEX 3<\/h3>\n                            <\/div>\n                            <div class=\"button-wrapper\">\n                                <a href=\"\/en\/product\/jbl-live-flex-3\/\">\n                                    <button class=\"cta\">Buy Now<\/button>\n                                <\/a>\n                            <\/div>\n                            <div class=\"colors-variation\">\n                                <a href=\"\/en\/product\/jbl-live-flex-3\/?color=black\" aria-label=\"Select Black Color\">\n                                    <div class=\"black\"><\/div>\n                                <\/a>\n                                <a href=\"\/en\/product\/jbl-live-flex-3\/?color=green\" aria-label=\"Select Green Color\">\n                                    <div class=\"green\"><\/div>\n                                <\/a>\n                                <a href=\"\/en\/product\/jbl-live-flex-3\/?color=purple\" aria-label=\"Select Purple Color\">\n                                    <div class=\"purple\"><\/div>\n                                <\/a>\n                                <a href=\"\/en\/product\/jbl-live-flex-3\/?color=silver\" aria-label=\"Select Silver Color\">\n                                    <div class=\"silver\"><\/div>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"product\">\n                        <div class=\"image-wrapper\">\n                            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2024\/09\/tws-2.webp\" alt=\"Live Beam 3 Thumbnail\">\n                        <\/div>\n                        <div class=\"copy\">\n                            <div class=\"text-wrapper\">\n                                <h3>LIVE BEAM 3<\/h3>\n                            <\/div>\n                            <div class=\"button-wrapper\">\n                                <a href=\"\/en\/product\/jbl-live-beam-3\/\">\n                                    <button class=\"cta\">Buy Now<\/button>\n                                <\/a>\n                            <\/div>\n                            <div class=\"colors-variation\">\n                                <a href=\"\/en\/product\/jbl-live-beam-3\/?color=black\" aria-label=\"Select Black Color\">\n                                    <div class=\"black\"><\/div>\n                                <\/a>\n                                <a href=\"\/en\/product\/jbl-live-beam-3\/?color=green\" aria-label=\"Select Green Color\">\n                                    <div class=\"green\"><\/div>\n                                <\/a>\n                                <a href=\"\/en\/product\/jbl-live-beam-3\/?color=grey\" aria-label=\"Select Grey Color\">\n                                    <div class=\"grey\"><\/div>\n                                <\/a>\n                                <a href=\"\/en\/product\/jbl-live-beam-3\/?color=purple\" aria-label=\"Select Purple Color\">\n                                    <div class=\"purple\"><\/div>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"product\">\n                        <div class=\"image-wrapper\">\n                            <img decoding=\"async\" src=\"\/wp-content\/uploads\/2024\/09\/tws-3.webp\" alt=\"Live Buds 3\">\n                        <\/div>\n                        <div class=\"copy\">\n                            <div class=\"text-wrapper\">\n                                <h3>LIVE BUDS 3<\/h3>\n                            <\/div>\n                            <div class=\"button-wrapper\">\n                                <a href=\"\/en\/product\/jbl-live-buds-3\/\">\n                                    <button class=\"cta\">Buy Now<\/button>\n                                <\/a>\n                            <\/div>\n                            <div class=\"colors-variation\">\n                                <a href=\"\/en\/product\/jbl-live-buds-3\/?color=black\" aria-label=\"Select Black Color\">\n                                    <div class=\"black\"><\/div>\n                                <\/a>\n                                <a href=\"\/en\/product\/jbl-live-buds-3\/?color=green\" aria-label=\"Select Green Color\">\n                                    <div class=\"green\"><\/div>\n                                <\/a>\n                                <a href=\"\/en\/product\/jbl-live-buds-3\/?color=purple\" aria-label=\"Select Purple Color\">\n                                    <div class=\"purple\"><\/div>\n                                <\/a>\n                                <a href=\"\/en\/product\/jbl-live-buds-3\/?color=silver\" aria-label=\"Select Silver Color\">\n                                    <div class=\"silver\"><\/div>\n                                <\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n        <div class=\"product-decoration\">\n            <div class=\"decoration\">\n                <div class=\"isolation-decoration\"><\/div>\n            <\/div>\n        <\/div>\n    <\/main>\n    <script type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/gh\/kenwheeler\/slick@1.8.1\/slick\/slick.min.js\"><\/script>\n    <script>\n        document.addEventListener(\"DOMContentLoaded\", function () {\n            jQuery('.slideshow').slick({\n                slidesToShow: 1,\n                slidesToScroll: 1,\n                arrows: false,\n                infinite: true,\n                focusOnSelect: true,\n                dots: true,\n                dotsClass: \"dots-slideshow\",\n                customPaging: function(slider, i) {\n                    return '<button type=\"button\"><\/button>';\n                },\n                \/\/ responsive: [\n                \/\/     {\n                \/\/         breakpoint: 768,\n                \/\/         settings: {\n                \/\/             slidesToShow: 1,\n                \/\/         }\n                \/\/     }\n                \/\/ ]\n            });\n            jQuery('#buy-now').on('click', function() {\n                jQuery('html, body').animate({\n                    scrollTop: jQuery('#products').offset().top\n                });\n            });\n\n            jQuery('.trailer-video').slick({\n                slidesToShow: 1,\n                slidesToScroll: 1,\n                arrows: false,\n                dots: true,\n                dotsClass: \"dots-slideshow\",\n            })\n        });\n    <\/script>\n    \t\t<div class=\"elementor-shortcode\"><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":88637,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/full-width.php","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-101596","page","type-page","status-publish","hentry","no-post-thumbnail"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Unbox JBL Live Series 3: Smart TWS Earbuds with Spatial Audio!<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jblstore.co.id\/en\/live-series-3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Unbox JBL Live Series 3: Smart TWS Earbuds with Spatial Audio!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jblstore.co.id\/en\/live-series-3\/\" \/>\n<meta property=\"og:site_name\" content=\"JBL Store\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/JBLAudioIndonesia\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-24T15:08:01+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jblstore.co.id\/en\/live-series-3\/\",\"url\":\"https:\/\/jblstore.co.id\/en\/live-series-3\/\",\"name\":\"JBL Live Series Gen 3: True Wireless Earbuds | JBL Indonesia\",\"isPartOf\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/#website\"},\"datePublished\":\"2024-09-04T09:31:39+00:00\",\"dateModified\":\"2024-10-24T15:08:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/live-series-3\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jblstore.co.id\/en\/live-series-3\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jblstore.co.id\/en\/live-series-3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jblstore.co.id\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Live Series 3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jblstore.co.id\/en\/#website\",\"url\":\"https:\/\/jblstore.co.id\/en\/\",\"name\":\"JBL Store\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jblstore.co.id\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jblstore.co.id\/en\/#organization\",\"name\":\"JBL Store\",\"url\":\"https:\/\/jblstore.co.id\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/\",\"url\":\"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png\",\"contentUrl\":\"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png\",\"width\":70,\"height\":52,\"caption\":\"JBL Store\"},\"image\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/JBLAudioIndonesia\/\",\"https:\/\/www.instagram.com\/jblindonesia\/\",\"https:\/\/www.youtube.com\/c\/JBLIndonesia\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Unbox JBL Live Series 3: Smart TWS Earbuds with Spatial Audio!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jblstore.co.id\/en\/live-series-3\/","og_locale":"en_US","og_type":"article","og_title":"Unbox JBL Live Series 3: Smart TWS Earbuds with Spatial Audio!","og_url":"https:\/\/jblstore.co.id\/en\/live-series-3\/","og_site_name":"JBL Store","article_publisher":"https:\/\/www.facebook.com\/JBLAudioIndonesia\/","article_modified_time":"2024-10-24T15:08:01+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/jblstore.co.id\/en\/live-series-3\/","url":"https:\/\/jblstore.co.id\/en\/live-series-3\/","name":"JBL Live Series Gen 3: True Wireless Earbuds | JBL Indonesia","isPartOf":{"@id":"https:\/\/jblstore.co.id\/en\/#website"},"datePublished":"2024-09-04T09:31:39+00:00","dateModified":"2024-10-24T15:08:01+00:00","breadcrumb":{"@id":"https:\/\/jblstore.co.id\/en\/live-series-3\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jblstore.co.id\/en\/live-series-3\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jblstore.co.id\/en\/live-series-3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jblstore.co.id\/"},{"@type":"ListItem","position":2,"name":"Live Series 3"}]},{"@type":"WebSite","@id":"https:\/\/jblstore.co.id\/en\/#website","url":"https:\/\/jblstore.co.id\/en\/","name":"JBL Store","description":"","publisher":{"@id":"https:\/\/jblstore.co.id\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jblstore.co.id\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jblstore.co.id\/en\/#organization","name":"JBL Store","url":"https:\/\/jblstore.co.id\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/","url":"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png","contentUrl":"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png","width":70,"height":52,"caption":"JBL Store"},"image":{"@id":"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/JBLAudioIndonesia\/","https:\/\/www.instagram.com\/jblindonesia\/","https:\/\/www.youtube.com\/c\/JBLIndonesia"]}]}},"_links":{"self":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages\/101596","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/users\/88637"}],"replies":[{"embeddable":true,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/comments?post=101596"}],"version-history":[{"count":6,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages\/101596\/revisions"}],"predecessor-version":[{"id":105131,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages\/101596\/revisions\/105131"}],"wp:attachment":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/media?parent=101596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}