@media screen and (min-width: 1200px) and (max-width: 1900px) {
    .page-1,
    .page-2 {
        min-height: 945px;
    }

}

@media screen and (max-width: 1024px) {
    body {
        overflow-y: scroll;
        scrollbar-width: none;
    }

    .page .content {
        max-width: 768px;
    }


    .logo-warning {
        top: 182px;
        left: 22px;
        z-index: 4;
    }

    .btn-close {
        width: 35px;
        height: 35px;
        top: 0;
        right: 0;
    }

    .menu-fixed {
        display: none;
    }

    .landing-page header {
        padding: 15px 20px;
        z-index: 3;
    }

    .landing-page header .logo {
        width: 235px;
        height: 159px;
        background-size: 100%;
    }

    .landing-page .group-page,
    .landing-page .page-3 {
        overflow: hidden;
        padding: 0;
    }

    .group-page {
        background-size: auto 100%;
    }

    .group-page .page-1 .content {
        position: absolute;
        top: 0;
        width: 100%;
    }

    .landing-page .page-1 .luffy {
        top: -5px;
        width: 1090px;
        height: 980px;
        max-width: none;
        right: -162px;
    }

    .landing-page .page-1 .kaido {
        left: 30px;
        top: 22px;
        height: 1100px;
        width: auto;
    }

    .landing-page .page-1 .text-group {
        padding-bottom: 75px;
        margin-top: 120px;
    }

    .landing-page .page-1 .text-group .play-video {
        top: -175px;
        left: 415px;
        width: 220px;
        height: 220px;
    }

    .landing-page .page-1 .text-group .title-medium {
        display: block;
        width: 400px;
        top: -40%;
        left: 30px;
    }

    .landing-page .page-1 .text-group .info-group {
        margin-top: 20px;
    }

    .landing-page .page-1 .text-group .title-lg {
        display: none;
    }

    .landing-page .page-1 .text-group .info-group {
        padding-right: 0;
    }

    .landing-page .page-2 {
        padding: 0 20px;
        height: 820px;
    }

    .landing-page .page-2 .content {
        flex: none;
        margin-top: 0;
        height: fit-content;
    }

    .landing-page .page-2 .content ul {
        padding: 0;
    }

    .landing-page .page-3 {
        max-width: none;
    }

    .modal-video .modal-dialog {
        max-width: 1024px;
        margin: 0;
        padding-left: 0;
    }

    .modal-video .modal-dialog .col-5,
    .modal-video .modal-dialog .col-7 {
        width: 100% !important;
        padding: 0;
    }

    .modal-video .modal-dialog .col-5 {
        flex-direction: row !important;
        margin-bottom: 20px;
    }

    .modal-video .modal-dialog .col-5 img:nth-child(2) {
        width: 60%;
    }

    .modal-video .modal-content {
        padding: 80px;
        margin-top: 20px;
        height: auto;
        max-width: 768px;
    }

    .modal-content video {
        height: auto !important;
        width: 100%;
    }

    .landing-page .page-2 .content .champ,
    .modal-content .card.champ {
        background-size: 100% 200% !important;
        width: 200px;
        height: 237px;
    }

    .landing-page .page-2 .content .formation,
    .modal-content .card.formation {
        background-size: 100% 200% !important;
        width: 200px;
        height: 244px;
    }

    .landing-page .page-2 .content .feature,
    .modal-content .card.feature {
        background-size: 100% 200% !important;
        width: 200px;
        height: 264px;
    }


    .landing-page .page-2 .content .update,
    .modal-content .card.update {
        background-size: 100% 200% !important;
        width: 200px;
        height: 197px;
    }


    .landing-page .page-2 .content .newbie,
    .modal-content .card.newbie {
        background-size: 100% 200% !important;
        width: 200px;
        height: 209px;
    }


    .landing-page .page-2 .content .farming,
    .modal-content .card.farming {
        background-size: 100% 200% !important;
        width: 200px;
        height: 233px;
    }

    .landing-page .page-2 .content .col-4,
    .landing-page .page-2 .content button {
        margin-right: 0;
    }

    .landing-page .page-2 .content {
        gap: 10px;
    }

    .landing-page .page-3 {
        transform: translateY(45px);
        background: url(../imgs/bg-page3-tablet.png) top center no-repeat;
        background-size: 100%;
        transform: translateY(-25px);
        padding: 0 35px;
    }

    .landing-page .page-3 .loading {
        width: 100%;
        background-size: 100% 100%;
        padding: 11px 8px;
    }

    .page-4 {
        height: 253px;
        background-size: 100% !important;
        background: url(../imgs/bg-footer-tablet.png) center no-repeat;
    }

    .page-4 .social {
        gap: 20px;
        padding: 0 35px;
    }

    .page-4 .social a {
        height: 116px;
        width: 105px;
    }

    .page-4 .social a.group {
        height: 122px;
        margin-top: 5px;
    }

    footer .wrap-content {
        height: 100%;
        padding: 25px 20px;
        gap: 30px;
    }

    footer .wrap-content .info-group {
        width: 65%;
    }

    #codeModal .modal-content {
        max-width: 768px;
        margin: auto;
    }

}

@media screen and (max-width: 576px) {
    #root {
        background: url(../imgs/bg-mobile.jpg) top center no-repeat;
    }

    .logo-warning {
        top: 95px;
        left: 10px;
        width: 115px;
    }

    .btn-close {
        width: 20px;
        height: 20px;
    }

    .login .wrap-login .user-info button.dropdown-toggle {
        width: 170px;
        height: 45px;
    }

    .landing-page header {
        padding: 10px;
    }

    .landing-page header .logo {
        width: 120px;
        height: 81px;
    }

    .landing-page header .btn-login {
        height: 37px;
        width: 101px;
        background-size: 100%;
    }

    .page .content {
        max-width: 360px;
    }

    .landing-page .page-1 .luffy {
        right: -125px;
        width: 660px;
        height: auto;
    }

    .landing-page .page-1 .kaido {
        top: -12px;
        left: -60px;
        height: 650px;
    }

    .page-1 .text-group>*,
    .page-1 .slogan-group>* {
        width: 320px;
    }

    .landing-page .page-1 .text-group {
        padding-bottom: 85px;
        position: inherit !important;
        margin-top: 234px;
    }

    .landing-page .page-1 .text-group .slogan-img-wrapper,
    .landing-page .page-1 .text-group .slogan-img-wrapper img {
        width: 100%;
    }

    .landing-page .page-1 .text-group .title-medium {
        width: 225px;
        left: 0;
    }

    .landing-page .page-1 .text-group .play-video {
        width: 105px;
        height: 105px;
        left: 202px;
        top: -76px;
    }

    .landing-page .page-1 .text-group .info-group {
        padding-right: 0;
        margin-bottom: 5vh;
        z-index: 100;
    }

    .landing-page .page-1 .btn-download {
        width: 200px;
        height: 67px;
    }

    .landing-page .page-2 {
        padding: 20px;
        height: 620px;
    }

    .landing-page .page-2 .content .action {
        margin: 20px 0 0 0;
    }

    .landing-page .page-2 .content .champ {
        background-size: 100% 200% !important;
        width: 130px;
        height: 156px;
    }

    .landing-page .page-2 .content .formation {
        background-size: 100% 200% !important;
        width: 130px;
        height: 159px;
    }

    .landing-page .page-2 .content .feature {
        background-size: 100% 200% !important;
        width: 109px;
        height: 143px;
    }


    .landing-page .page-2 .content .update {
        background-size: 100% 200% !important;
        width: 130px;
        height: 129px;
    }

    .landing-page .page-2 .content .newbie {
        background-size: 100% 200% !important;
        width: 130px;
        height: 136px;
    }

    .landing-page .page-2 .content .farming {
        background-size: 100% 200% !important;
        width: 130px;
        height: 152px;
    }

    .modal-video .modal-content .card.champ {
        background-size: 100% 200% !important;
        width: 130px;
        height: 156px;
    }

    #modalChamp .modal-content .col-5 img {
        width: 230px;
    }

    .modal-video .modal-content .card.formation {
        background-size: 100% 200% !important;
        width: 130px;
        height: 150px;
        margin-bottom: 11px;
    }

    #modalFormation .modal-content .col-5 img {
        width: 230px;
    }

    .modal-video .modal-content .card.feature {
        background-size: 100% 200% !important;
        width: 110px;
        height: 143px;
    }

    #modalFeature .modal-content .col-5 img {
        width: 250px;
    }

    .modal-video .modal-content .card.update {
        background-size: 100% 200% !important;
        width: 130px;
        height: 129px;
    }

    #modalUpdate .modal-content .col-5 img {
        width: 230px;
    }

    .modal-video .modal-content .card.newbie {
        background-size: 100% 200% !important;
        width: 130px;
        height: 136px;
    }

    #modalNewbie .modal-content .col-5 img {
        width: 230px;
    }

    .modal-video .modal-content .card.farming {
        background-size: 100% 200% !important;
        width: 130px;
        height: 152px;
    }

    #modalFarming .modal-content .col-5 img {
        width: 230px;
    }

    .modal-video .modal-content {
        padding: 0 10px;
        max-width: 360px;
        margin: auto;
    }

    .landing-page .page-3 {
        height: 420px;
        transform: translateY(-10px);
        background-size: 100% 100%;
        padding: 0;
    }

    .landing-page .page-3 .content {
        width: 100%;
        padding: 0 10px;
    }

    .landing-page .page-3 .loading {
        padding: 7px 5px;
        height: 52px;
    }

    .landing-page .page-3 .title {
        width: 80%;
        background: url(../imgs/text-page-3.png) center no-repeat;
        background-size: 100% 100%;
        height: 75px;
    }

    .loading h6 {
        font-size: 14px;
    }

    #sliderTrack span {
        font-size: 16px;
    }

    .landing-page .page-4 {
        height: 120px;
    }

    .modal-dialog .col-5,
    .modal-dialog .col-7 {
        padding: 0;
    }

    .modal-content video {
        width: 360px;
    }

    .page-4 .social {
        gap: 10px;
        padding: 0 10px;
    }

    .page-4 .social a {
        height: 52px;
        width: 50px;
    }

    .page-4 .social a.group {
        height: 58px;
        margin-top: 4px;
    }


    .text-slide {
        height: 40px;
        margin-top: -10px;
        border: 2px solid #000;
    }

    .landing-page .page-3 .checkin {
        width: 160px;
        height: 53px;
        background-size: 100%;
    }

    .landing-page .page-3 .checkin:hover {
        background-size: 100%;
    }


    footer {
        height: 256px;
    }

    footer .logo {
        display: none;
    }

    footer .wrap-content {
        padding-left: 20px;
    }

    footer .info-group ul li a {
        font-size: 15px;
    }

    footer .info-group p {
        font-size: 13px;
    }

    #codeModal .modal-body {
        width: 80%;
        height: 172px;
        padding: 25px 0px 0px 9px;
        background-size: 100% 100%;
    }

    #codeModal .modal-content {
        max-width: 360px;
    }

    #codeModal .modal-content h1,
    #codeModal .modal-content span,
    #codeModal .modal-content button {
        font-size: 12px;
        padding: 0;
    }

    #codeModal .modal-content .confirm {
        width: 100px;
        height: 30px;
    }

    footer .info-group .item-install::before {
        top: 23%;
    }

    footer .wrap-content .info-group {
        width: 100%;
    }

    .page-1 .bg-blur {
        width: 100%;
    }

    .loading .loading-current .shine-effect {
        top: -100%;
    }

}