@extends('layouts.front-master')
@section('content')
    <div id="__next">
        <style data-emotion="css-global y3zw6f">
            html {
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                box-sizing: border-box;
                -webkit-text-size-adjust: 100%;
            }

            *,
            *::before,
            *::after {
                box-sizing: inherit;
            }

            strong,
            b {
                font-weight: 700;
            }

            body {
                margin: 0;
                color: rgba(0, 0, 0, 0.87);
                font-size: 14px;
                line-height: 1.714;
                font-weight: 400;
                font-family: Poppins, Noto Sans Thai, sans-serif;
                background-color: #fff;
            }

            @media (min-width: 768px) {
                body {
                    font-size: 16px;
                    line-height: 1.75;
                }
            }

            @media print {
                body {
                    background-color: #fff;
                }
            }

            body::backdrop {
                background-color: #fff;
            }
        </style>
        <style data-emotion="css 5cqqik">
            .css-5cqqik {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
                width: 100%;
                box-sizing: border-box;
                -webkit-flex-shrink: 0;
                -ms-flex-negative: 0;
                flex-shrink: 0;
                position: -webkit-sticky;
                position: sticky;
                z-index: 1100;
                top: 0;
                left: auto;
                right: 0;
                background-color: #f5f5f5;
                color: rgba(0, 0, 0, 0.87);
                background-image: none;
                background-color: #FFFFFF;
                box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
            }
        </style>
        <style data-emotion="css fu1e4i">
            .css-fu1e4i {
                background-color: #FFFFFF;
                color: rgba(0, 0, 0, 0.87);
                -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
                width: 100%;
                box-sizing: border-box;
                -webkit-flex-shrink: 0;
                -ms-flex-negative: 0;
                flex-shrink: 0;
                position: -webkit-sticky;
                position: sticky;
                z-index: 1100;
                top: 0;
                left: auto;
                right: 0;
                background-color: #f5f5f5;
                color: rgba(0, 0, 0, 0.87);
                background-image: none;
                background-color: #FFFFFF;
                box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
            }
        </style>
        <style data-emotion="css 1aoj923">
            .css-1aoj923 {
                background-color: #00040E;
                -webkit-background-size: cover;
                background-size: cover;
                background-repeat: no-repeat;
                -webkit-background-position: center;
                background-position: center;
                background-image: url("/manage-bg-xs.webp");
                padding: 88px 0px;
            }

            @media (min-width: 768px) {
                .css-1aoj923 {
                    padding: 80px 0px;
                    background-image: url("/manage-bg-md.webp");
                }
            }

            @media (min-width: 1200px) {
                .css-1aoj923 {
                    padding: 88px 0px;
                    background-image: url("/manage-bg-lg.webp");
                }
            }

            @media (min-width: 1536px) {
                .css-1aoj923 {
                    background-image: url("/manage-bg-xl.webp");
                }
            }
        </style>
        <style data-emotion="css i69ajj">
            .css-i69ajj {
                background-color: #00040E;
                -webkit-background-size: cover;
                background-size: cover;
                background-repeat: no-repeat;
                -webkit-background-position: center;
                background-position: center;
                background-image: url("/manage-bg-xs.webp");
                padding: 88px 0px;
            }

            @media (min-width: 768px) {
                .css-i69ajj {
                    padding: 80px 0px;
                    background-image: url("/manage-bg-md.webp");
                }
            }

            @media (min-width: 1200px) {
                .css-i69ajj {
                    padding: 88px 0px;
                    background-image: url("/manage-bg-lg.webp");
                }
            }

            @media (min-width: 1536px) {
                .css-i69ajj {
                    background-image: url("/manage-bg-xl.webp");
                }
            }
        </style>
        <div class="MuiBox-root css-i69ajj">
            <style data-emotion="css 97f0bx">
                .css-97f0bx {
                    width: 100%;
                    margin-left: auto;
                    box-sizing: border-box;
                    margin-right: auto;
                    display: block;
                    padding-left: 16px;
                    padding-right: 16px;
                    padding-left: 24px;
                    padding-right: 24px;
                }

                @media (min-width: 428px) {
                    .css-97f0bx {
                        padding-left: 24px;
                        padding-right: 24px;
                    }
                }

                @media (min-width: 428px) {
                    .css-97f0bx {
                        max-width: 428px;
                    }
                }

                @media (min-width: 768px) {
                    .css-97f0bx {
                        max-width: 768px;
                    }
                }

                @media (min-width: 1200px) {
                    .css-97f0bx {
                        max-width: 1200px;
                    }
                }

                @media (min-width: 1536px) {
                    .css-97f0bx {
                        max-width: 1536px;
                    }
                }

                @media (min-width: 1200px) {
                    .css-97f0bx {
                        max-width: 1200px;
                    }
                }

                @media (min-width: 768px) {
                    .css-97f0bx {
                        padding-left: 40px;
                        padding-right: 40px;
                    }
                }

                @media (min-width: 1200px) {
                    .css-97f0bx {
                        padding-left: 80px;
                        padding-right: 80px;
                    }
                }
            </style>
            <div class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed css-97f0bx"
                data-testid="page-description-manage">
                <div>
                    <style data-emotion="css 1b346on">
                        .css-1b346on {
                            max-width: 240px;
                            margin: 0 auto;
                            text-align: center;
                        }

                        @media (min-width: 428px) {
                            .css-1b346on {
                                max-width: 400px;
                            }
                        }
                    </style>
                    <div class="css-1b346on">
                        <style data-emotion="css 1ke45u7">
                            .css-1ke45u7 {
                                margin: 0;
                                font-size: 30px;
                                line-height: 1.333;
                                font-weight: bold;
                                font-family: Poppins, Noto Sans Thai, sans-serif;
                                color: #FFFFFF;
                            }

                            @media (min-width: 768px) {
                                .css-1ke45u7 {
                                    font-size: 40px;
                                    line-height: 1.2;
                                }
                            }
                        </style>
                        <h1 class="MuiTypography-root MuiTypography-h3 css-1ke45u7" data-testid="top-manage-headline">
                            <style data-emotion="css 6heq0z">
                                .css-6heq0z {
                                    margin: 0;
                                    font-size: 30px;
                                    line-height: 1.333;
                                    font-weight: bold;
                                    font-family: Poppins, Noto Sans Thai, sans-serif;
                                    color: #5DF591;
                                }

                                @media (min-width: 768px) {
                                    .css-6heq0z {
                                        font-size: 40px;
                                        line-height: 1.2;
                                    }
                                }
                            </style>
                            <span class="MuiTypography-root MuiTypography-h3 css-6heq0z">Managing your investments</span>
                            <br />can never be easier.
                        </h1>
                    </div>
                </div>
            </div>
        </div>
        <style data-emotion="css gokeqi">
            .css-gokeqi {
                box-shadow: none;
            }
        </style>
        <style data-emotion="css 5i5o87">
            .css-5i5o87 {
                width: 100%;
                margin-left: auto;
                box-sizing: border-box;
                margin-right: auto;
                display: block;
                padding-left: 16px;
                padding-right: 16px;
                padding-left: 24px;
                padding-right: 24px;
                box-shadow: none;
            }

            @media (min-width: 428px) {
                .css-5i5o87 {
                    padding-left: 24px;
                    padding-right: 24px;
                }
            }

            @media (min-width: 1200px) {
                .css-5i5o87 {
                    max-width: 1200px;
                }
            }

            @media (min-width: 768px) {
                .css-5i5o87 {
                    padding-left: 40px;
                    padding-right: 40px;
                }
            }

            @media (min-width: 1200px) {
                .css-5i5o87 {
                    padding-left: 80px;
                    padding-right: 80px;
                }
            }
        </style>
        <div class="MuiContainer-root MuiContainer-maxWidthLg css-5i5o87">
            <style data-emotion="css 1k7kj54">
                .css-1k7kj54 {
                    display: block;
                    margin: 40px 0px 40px;
                }

                @media (min-width: 768px) {
                    .css-1k7kj54 {
                        margin: 64px 0px 92px;
                    }
                }
            </style>
            <style data-emotion="css 1eh17t7">
                .css-1eh17t7 {
                    display: block;
                    margin: 40px 0px 40px;
                }

                @media (min-width: 768px) {
                    .css-1eh17t7 {
                        margin: 64px 0px 92px;
                    }
                }
            </style>
            <div class="MuiBox-root css-1eh17t7">
                <style data-emotion="css tpyxhp">
                    .css-tpyxhp {
                        padding-top: 64px;
                    }

                    @media (max-width: 427.95px) {
                        .css-tpyxhp {
                            padding-top: 32px;
                        }
                    }

                    @media (min-width: 1200px) {
                        .css-tpyxhp {
                            display: grid;
                            grid-template-columns: 1fr 1fr;
                            gap: 40px;
                            padding: 64px 32px 0px;
                        }
                    }

                    @media (min-width: 1536px) {
                        .css-tpyxhp {
                            gap: 56px;
                        }
                    }
                </style>
                <style data-emotion="css 189r5n3">
                    .css-189r5n3 {
                        padding-top: 64px;
                    }

                    @media (max-width: 427.95px) {
                        .css-189r5n3 {
                            padding-top: 32px;
                        }
                    }

                    @media (min-width: 1200px) {
                        .css-189r5n3 {
                            display: grid;
                            grid-template-columns: 1fr 1fr;
                            gap: 40px;
                            padding: 64px 32px 0px;
                        }
                    }

                    @media (min-width: 1536px) {
                        .css-189r5n3 {
                            gap: 56px;
                        }
                    }
                </style>
                <div class="MuiBox-root css-189r5n3">
                    <style data-emotion="css k2ne2a">
                        .css-k2ne2a {
                            text-align: center;
                            padding-bottom: 40px;
                        }

                        @media (min-width: 1200px) {
                            .css-k2ne2a {
                                text-align: left;
                                padding-top: 32px;
                                padding-bottom: 0px;
                                grid-row-start: 2;
                                grid-column: 2/3;
                            }
                        }
                    </style>
                    <style data-emotion="css nik39t">
                        .css-nik39t {
                            margin: 0;
                            font-size: 40px;
                            line-height: 1.1;
                            font-weight: bold;
                            font-family: Poppins, Noto Sans Thai, sans-serif;
                            text-align: center;
                            padding-bottom: 40px;
                        }

                        @media (min-width: 768px) {
                            .css-nik39t {
                                font-size: 72px;
                                line-height: 1;
                            }
                        }

                        @media (min-width: 1200px) {
                            .css-nik39t {
                                text-align: left;
                                padding-top: 32px;
                                padding-bottom: 0px;
                                grid-row-start: 2;
                                grid-column: 2/3;
                            }
                        }
                    </style>
                    <h2 class="MuiTypography-root MuiTypography-h2 css-nik39t" data-testid="asset-tracker-title">Asset
                        Tracker</h2>
                    <style data-emotion="css 14vmtmc">
                        .css-14vmtmc {
                            display: -webkit-box;
                            display: -webkit-flex;
                            display: -ms-flexbox;
                            display: flex;
                            position: relative;
                            text-align: center;
                            margin: auto;
                            padding: 0px 16px 40px;
                            width: 295px;
                            height: 524.5px;
                        }

                        @media (min-width: 768px) {
                            .css-14vmtmc {
                                width: 350px;
                                height: 622px;
                            }
                        }

                        @media (min-width: 1200px) {
                            .css-14vmtmc {
                                padding: 16px;
                                grid-row: 1/6;
                                width: 468px;
                                height: 832px;
                            }
                        }
                    </style>
                    <style data-emotion="css 1tt667z">
                        .css-1tt667z {
                            display: -webkit-box;
                            display: -webkit-flex;
                            display: -ms-flexbox;
                            display: flex;
                            position: relative;
                            text-align: center;
                            margin: auto;
                            padding: 0px 16px 40px;
                            width: 295px;
                            height: 524.5px;
                        }

                        @media (min-width: 768px) {
                            .css-1tt667z {
                                width: 350px;
                                height: 622px;
                            }
                        }

                        @media (min-width: 1200px) {
                            .css-1tt667z {
                                padding: 16px;
                                grid-row: 1/6;
                                width: 468px;
                                height: 832px;
                            }
                        }
                    </style>
                    <div class="MuiBox-root css-1tt667z">
                        <style data-emotion="css c936vp">
                            .css-c936vp {
                                position: absolute;
                                margin-right: 24px;
                            }

                            @media (min-width: 1200px) {
                                .css-c936vp {
                                    bottom: 0px;
                                    margin-left: 12px;
                                }
                            }
                        </style>
                        <style data-emotion="css 4t5n39">
                            .css-4t5n39 {
                                position: absolute;
                                margin-right: 24px;
                            }

                            @media (min-width: 1200px) {
                                .css-4t5n39 {
                                    bottom: 0px;
                                    margin-left: 12px;
                                }
                            }
                        </style>
                        <div class="MuiBox-root css-4t5n39">
                            <span
                                style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%">
                                <span
                                    style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%">
                                    <img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0"
                                        alt="" aria-hidden="true" src="{{ asset('images/asset-tracker.svg') }}" />
                                </span>
                                <img alt="animation background" src="{{ asset('images/asset-tracker.svg') }}"
                                    decoding="async" data-nimg="intrinsic"
                                    style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" />
                                <noscript>
                                    <img alt="animation background" srcSet="{{ asset('images/asset-tracker.svg') }}"
                                        src="{{ asset('images/asset-tracker.svg') }}" decoding="async" data-nimg="intrinsic"
                                        style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"
                                        loading="lazy" />
                                </noscript>
                            </span>
                        </div>
                        <style data-emotion="css gvqcbd">
                            .css-gvqcbd {
                                display: block;
                                margin: auto;
                            }
                        </style>
                        <style data-emotion="css 9eksad">
                            .css-9eksad {
                                display: block;
                                margin: auto;
                            }
                        </style>
                        <div class="MuiBox-root css-9eksad"></div>
                    </div>
                    <style data-emotion="css 1v3xnsn">
                        .css-1v3xnsn {
                            text-align: center;
                        }

                        @media (min-width: 1200px) {
                            .css-1v3xnsn {
                                text-align: left;
                                grid-row-start: 3;
                            }
                        }

                        @media (min-width: 1200px) {
                            .css-1v3xnsn.image-right {
                                grid-column: 1/2;
                            }
                        }
                    </style>
                    <style data-emotion="css wwn1dg">
                        .css-wwn1dg {
                            text-align: center;
                        }

                        @media (min-width: 1200px) {
                            .css-wwn1dg {
                                text-align: left;
                                grid-row-start: 3;
                            }
                        }

                        @media (min-width: 1200px) {
                            .css-wwn1dg.image-right {
                                grid-column: 1/2;
                            }
                        }
                    </style>
                    <div class="MuiBox-root css-wwn1dg">
                        <style data-emotion="css hzi624">
                            .css-hzi624 {
                                margin: 0;
                                font-size: 24px;
                                line-height: 1.25;
                                font-weight: bold;
                                font-family: Poppins, Noto Sans Thai, sans-serif;
                                color: #111111;
                            }

                            @media (min-width: 768px) {
                                .css-hzi624 {
                                    font-size: 30px;
                                    line-height: 1.267;
                                }
                            }
                        </style>
                        <h4 class="MuiTypography-root MuiTypography-h4 css-hzi624" data-testid="asset-tracker-subtitle">
                            No more Excel sheets and headaches managing your assets! <style data-emotion="css 1rreq7x">
                                .css-1rreq7x {
                                    background: linear-gradient(180deg, transparent 50%, #5DF591 50% 90%, rgba(0, 0, 0, 0) 90%);
                                }
                            </style>
                            <span class="css-1rreq7x">Use Asset Tracker.</span>
                        </h4>
                        <style data-emotion="css 1lmknsg">
                            .css-1lmknsg {
                                color: #898989;
                                text-align: left;
                            }

                            .css-1lmknsg ul {
                                margin: 36px 0px 0px;
                                padding-left: 20px;
                            }

                            .css-1lmknsg li::marker {
                                color: #5DF591;
                            }
                        </style>
                        <style data-emotion="css 181wq1d">
                            .css-181wq1d {
                                color: #898989;
                                text-align: left;
                            }

                            .css-181wq1d ul {
                                margin: 36px 0px 0px;
                                padding-left: 20px;
                            }

                            .css-181wq1d li::marker {
                                color: #5DF591;
                            }
                        </style>
                        <div class="MuiBox-root css-181wq1d">
                            <style data-emotion="css 1tmli6w">
                                .css-1tmli6w {
                                    margin: 0;
                                    font-size: 14px;
                                    line-height: 1.714;
                                    font-weight: 400;
                                    font-family: Poppins, Noto Sans Thai, sans-serif;
                                }

                                @media (min-width: 768px) {
                                    .css-1tmli6w {
                                        font-size: 16px;
                                        line-height: 1.75;
                                    }
                                }
                            </style>
                            <p class="MuiTypography-root MuiTypography-body1 css-1tmli6w"
                                data-testid="asset-tracker-description">
                            <ul>
                                <li>Track your assets with Asset Tracker to see the big picture of your wealth real time.
                                </li>
                                <li>Not ready to invest? Do virtual investing on Asset Tracker and see how well you perform.
                                </li>
                            </ul>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="MuiBox-root css-189r5n3">
                    <style data-emotion="css 1bsmxy5">
                        .css-1bsmxy5 {
                            text-align: center;
                            padding-bottom: 40px;
                        }

                        @media (min-width: 1200px) {
                            .css-1bsmxy5 {
                                text-align: left;
                                padding-top: 32px;
                                padding-bottom: 0px;
                                grid-row-start: 2;
                                grid-column: 1/2;
                            }
                        }
                    </style>
                    <style data-emotion="css 1itfnwg">
                        .css-1itfnwg {
                            margin: 0;
                            font-size: 40px;
                            line-height: 1.1;
                            font-weight: bold;
                            font-family: Poppins, Noto Sans Thai, sans-serif;
                            color: #111111;
                            text-align: center;
                            padding-bottom: 40px;
                        }

                        @media (min-width: 768px) {
                            .css-1itfnwg {
                                font-size: 72px;
                                line-height: 1;
                            }
                        }

                        @media (min-width: 1200px) {
                            .css-1itfnwg {
                                text-align: left;
                                padding-top: 32px;
                                padding-bottom: 0px;
                                grid-row-start: 2;
                                grid-column: 1/2;
                            }
                        }
                    </style>
                    <h2 class="MuiTypography-root MuiTypography-h2 css-1itfnwg" data-testid="dime-character-title">CPALL!
                        Characters</h2>
                    <div class="image-right MuiBox-root css-1tt667z">
                        <div class="MuiBox-root css-4t5n39">
                            <span
                                style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%">
                                <span
                                    style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%">
                                    <img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0"
                                        alt="" aria-hidden="true" src="{{ asset('images/character.svg') }}" />
                                </span>
                                <img alt="animation background" src="{{ asset('images/character.svg') }}" decoding="async"
                                    data-nimg="intrinsic"
                                    style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" />
                                <noscript>
                                    <img alt="animation background"
                                        srcSet="/_next/image?url=%2Fanimation-bg.webp&amp;w=1200&amp;q=75 1x, /_next/image?url=%2Fanimation-bg.webp&amp;w=3840&amp;q=75 2x"
                                        src="{{ asset('images/character.svg') }}" decoding="async" data-nimg="intrinsic"
                                        style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"
                                        loading="lazy" />
                                </noscript>
                            </span>
                        </div>
                        <div class="MuiBox-root css-9eksad"></div>
                    </div>
                    <div class="image-right MuiBox-root css-wwn1dg">
                        <h4 class="MuiTypography-root MuiTypography-h4 css-hzi624" data-testid="dime-character-subtitle">
                            <span class="css-1rreq7x">Learn to manage your money</span>
                            in a way that suits you the most.
                        </h4>
                        <div class="MuiBox-root css-181wq1d">
                            <p class="MuiTypography-root MuiTypography-body1 css-1tmli6w"
                                data-testid="dime-character-description">
                            <ul>
                                <li>Take CPALL! quiz to learn more about yourself - strengths, weaknesses, or financial
                                    habits.</li>
                                <li>Discover CPALL! financial content and investment recommendation carefully selected for
                                    you and you only.</li>
                            </ul>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 css-1pt7lg">
            <div class="css-13oy3uq">
                <marquee direction="left" behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()">
                    <div class=" marquee-container">
                        <div class="marquee " aria-hidden="true">
                            <div data-test-id="character-1-0" class="css-126cxia"><img
                                    src="{{ asset('images/character/character-1.webp') }}" alt="character-1"
                                    class="css-p0ih6z"></div>
                            <div data-test-id="character-1-1" class="css-126cxia"><img
                                    src="{{ asset('images/character/character-2.webp') }}" alt="character-2"
                                    class="css-p0ih6z"></div>
                            <div data-test-id="character-1-2" class="css-126cxia"><img
                                    src="{{ asset('images/character/character-3.webp') }}" alt="character-3"
                                    class="css-p0ih6z"></div>
                            <div data-test-id="character-1-3" class="css-126cxia"><img
                                    src="{{ asset('images/character/character-4.webp') }}" alt="character-4"
                                    class="css-p0ih6z"></div>
                            <div data-test-id="character-1-4" class="css-126cxia"><img
                                    src="{{ asset('images/character/character-5.webp') }}" alt="character-5"
                                    class="css-p0ih6z"></div>
                            <div data-test-id="character-1-5" class="css-126cxia"><img
                                    src="{{ asset('images/character/character-6.webp') }}" alt="character-6"
                                    class="css-p0ih6z"></div>
                            <div data-test-id="character-1-6" class="css-126cxia"><img
                                    src="{{ asset('images/character/character-7.webp') }}" alt="character-7"
                                    class="css-p0ih6z"></div>
                            <div data-test-id="character-1-7" class="css-126cxia"><img
                                    src="{{ asset('images/character/character-8.webp') }}" alt="character-8"
                                    class="css-p0ih6z"></div>
                            <div data-test-id="character-1-8" class="css-126cxia"><img
                                    src="{{ asset('images/character/character-9.webp') }}" alt="character-9"
                                    class="css-p0ih6z"></div>
                            <div data-test-id="character-2-0" class="css-126cxia"><img
                                    src="{{ asset('images/character/character-1.webp') }}" alt="character-1"
                                    class="css-p0ih6z"></div>
                            <div data-test-id="character-2-1" class="css-126cxia"><img
                                    src="{{ asset('images/character/character-2.webp') }}" alt="character-2"
                                    class="css-p0ih6z"></div>
                            <div data-test-id="character-2-2" class="css-126cxia"><img
                                    src="{{ asset('images/character/character-3.webp') }}" alt="character-3"
                                    class="css-p0ih6z"></div>
                            <div data-test-id="character-2-3" class="css-126cxia"><img
                                    src="{{ asset('images/character/character-4.webp') }}" alt="character-4"
                                    class="css-p0ih6z"></div>
                            <div data-test-id="character-2-4" class="css-126cxia"><img
                                    src="{{ asset('images/character/character-5.webp') }}" alt="character-5"
                                    class="css-p0ih6z"></div>
                            <div data-test-id="character-2-5" class="css-126cxia"><img
                                    src="{{ asset('images/character/character-6.webp') }}" alt="character-6"
                                    class="css-p0ih6z"></div>
                            <div data-test-id="character-2-6" class="css-126cxia"><img
                                    src="{{ asset('images/character/character-7.webp') }}" alt="character-7"
                                    class="css-p0ih6z"></div>
                            <div data-test-id="character-2-7" class="css-126cxia"><img
                                    src="{{ asset('images/character/character-8.webp') }}" alt="character-8"
                                    class="css-p0ih6z"></div>
                            <div data-test-id="character-2-8" class="css-126cxia"><img
                                    src="{{ asset('images/character/character-9.webp') }}" alt="character-9"
                                    class="css-p0ih6z"></div>
                        </div>
                    </div>
                </marquee>
            </div>
        </div>
        <style data-emotion="css gokeqi">
            
            .marquee {
                flex: 0 0 auto;
                min-width: 100%;
                z-index: 1;
                display: flex;
                flex-direction: row;
                align-items: center;
                animation: scroll var(--duration) linear var(--delay) var(--iteration-count);
                animation-play-state: var(--play);
                animation-delay: var(--delay);
                animation-direction: var(--direction);
            }

            .marquee-container {
                overflow-x: hidden !important;
                display: flex !important;
                flex-direction: row !important;
                position: relative;
                width: 100%;
            }

            .css-gokeqi {
                box-shadow: none;
            }

            /* .css-p0ih6z{
                        width: 65px;
                    } */
            .css-p0ih6z {
                width: 160px;
                height: 153px;
            }
            .css-nihfs7 {
                background-color: rgb(246, 248, 251);
                position: absolute;
                top: 65%;
                left: 0px;
                height: 140px;
                width: 100%;
            }
        </style>
        <style data-emotion="css 1pt7lg">
            .css-1pt7lg {
                background-color: #FFFFFF;
                color: rgba(0, 0, 0, 0.87);
                -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                box-shadow: none;
                box-shadow: none;
            }
        </style>
        <div class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 css-1pt7lg">
            <style data-emotion="css 13oy3uq">
                .css-13oy3uq {
                    position: relative;
                    padding-bottom: 16px;
                }

                @media (min-width: 1200px) {
                    .css-13oy3uq {
                        padding-bottom: 16px;
                    }
                }
            </style>
            <div class="css-13oy3uq">
                <style data-emotion="css t1iayb">
                    .css-t1iayb {
                        background-color: #F6F8FB;
                        position: absolute;
                        top: 65%;
                        left: 0;
                        height: 140px;
                        width: 100%;
                    }

                    @media (max-width: 427.95px) {
                        .css-t1iayb {
                            top: 53%;
                            height: 80px;
                        }
                    }
                </style>
                <style data-emotion="css nihfs7">
                    .css-nihfs7 {
                        background-color: #F6F8FB;
                        position: absolute;
                        top: 65%;
                        left: 0;
                        height: 140px;
                        width: 100%;
                    }

                    @media (max-width: 427.95px) {
                        .css-nihfs7 {
                            top: 53%;
                            height: 80px;
                        }
                    }
                </style>

                <div class="MuiBox-root css-nihfs7"></div>
            </div>
        </div>
        <style data-emotion="css 1ixbp0l">
            .css-1ixbp0l {
                pointer-events: none;
            }
        </style>
        <style data-emotion="css 1laizt">
            .css-1laizt {
                pointer-events: none;
            }

            @media print {
                .css-1laizt {
                    position: absolute !important;
                }
            }
        </style>
    </div>
@endsection