@media (max-width: 1599.98px) {

    .heroContentBox {
        background: url(../images/mainCover-bg2_l.jpg) no-repeat center center;
        background-size: cover;
        background-attachment: fixed;
        background-color: #fafafa;
    }
}

@media (max-width: 1199.98px) {

    /* Main Cover */

    .mainCover-slogan {
        margin-top: 8%;
        left: 32%;
        width: 52vw;
    }

    .mainCover-talk {
        padding: 15px;
    }

    .mainCover-ai {
        width: 94%;
        padding: 15px;
        margin-left: 35px;
    }

    .mainCover-meter {
        right: 35px;
    }

    .featuresCardBox .card {
        max-height: 280px;
        min-height: 280px;
        overflow: hidden;
        width: 100%;
    }

    /* List */
    .list-1 {
        left: 10%;
        position: absolute;
        top: 80px;
    }

    .list-2 {
        left: 18%;
        position: absolute;
        top: -40px;
    }

    .list-3 {
        left: 31.5%;
        position: absolute;
        top: -40px;
    }

    .list-4 {
        left: 42%;
        position: absolute;
        top: 30px;
    }

    .list-5 {
        left: 57.5%;
        position: absolute;
        top: 10px;
    }

    .list-6 {
        left: 75%;
        position: absolute;
        top: 30px;
    }

    .heroContentBox {
        background: url(../images/mainCover-bg2_l.jpg) no-repeat center center;
        background-size: cover;
        background-attachment: fixed;
        background-color: #fafafa;
    }
}

@media (max-width: 1123.98px) {
    .heroContentBox {
        background: url(../images/mainCover-bg2_m.jpg) no-repeat center center;
        background-size: cover;
        background-attachment: fixed;
        background-color: #fafafa;
    }
}

@media (max-width: 991.98px) {

    .mainCover-slogan {
        margin-top: 9%;
        left: 28%;
        width: 58vw;
    }

    .mainCover-meter {
        right: 40px;
    }

    .mainCover-ai {
        width: 94%;
        margin-left: 30px;
    }

    .mainCover-grandmother {
        left: -90px;
        width: 48%;
    }

    .heroContentBox {
        background: url(../images/mainCover-bg2_s.jpg) no-repeat center center;
        background-attachment: fixed;
        background-color: #fafafa;
    }
}

@media (max-width: 768.98px) {
    .heroContentBox {
        background: url(../images/mainCover-bg2_xs.jpg) no-repeat center center;
        background-color: #fafafa;
    }
}

@media (max-width: 767.98px) {

    /* Cover */
    .mainCover-grandmother {
        left: -100px;
        width: 55%;
        margin-top: 0;
        z-index: 9;
    }

    .mainCover-slogan {
        width: 59vw;
        margin-top: 10%;
        text-align: center;
        animation-name: none;
    }

    .speed {
        height: 30px;
    }

    .mainCover-rale {
        right: -35px;
    }

    .mainCover-meter {
        display: none;
    }

    .mainCover-talk {
        background: url() no-repeat top center;
        background-size: 100% 100%;
        background-color: #fff;
        padding: 15px;
        border-radius: 15px;
    }

    .mainCover-talk .left {
        display: none;
        font-size: 19px;
    }

    .mainCover-talk .right {
        width: 100%;
        font-size: 19px;
    }

    .mainCover-ai {
        width: 100%;
        padding: 15px;
        margin-left: 0;
    }

    .mainCover-ai .left {
        display: none;
    }

    .mainCover-ai .right {
        width: 100%;
    }

    /* Base */
    .contentBox {
        padding: 44px 0;
    }

    .pageTitle {
        font-size: 25px;
        line-height: 34px;
        padding-bottom: 12px;
    }

    .classDescriptionBox .card-header {
        font-size: 19px;
        line-height: 27px;
    }

    .classDescriptionCardTitle {
        font-size: 17px;
        line-height: 21px;
    }

    .moreInfor-city-1 img,
    .moreInfor-city-2 img {
        width: 200%;
    }

    .moreInfoBox {
        background-image: url("../images/moreInfo-2.png");
        background-size: cover;
        background-repeat: no-repeat;
        bottom: 0;
        height: 793px;
    }

    .subText {
        font-size: 16px;
    }

    .subText2 {
        font-size: 16px;
    }
}

@media (max-width: 575.98px) {

    /* Cover */
    .mainCover-grandmother {
        width: 60%;
        margin-top: 10px;
        animation-name: none;
    }

    .mainCover-slogan {
        width: 55vw;
        margin-top: 5%;
    }

    .mainCover-ai {
        top: 310%;
        left: 20px;
    }

    .form-check {
        padding-left: 0rem;
    }

    .checkBoxDescription {
        font-size: 14px;
    }

    .heroContentBox {
        background: url(../images/mainCover-bg2_xss.jpg) no-repeat center center;
        background-size: cover;
        background-color: #fafafa;
    }
}

@media (max-width: 419.98px) {
    .mainCoverBox {
        height: 710px;
    }

    .cloud-1 {
        display: none;
    }

    .cloud-2 {
        display: none;
    }

    .cloud-4 {
        display: none;
    }

    .mainCover-grandmother {
        width: 80%;
        left: 15px;
        margin-top: -20px;
    }

    .mainCover-slogan {
        left: 0%;
        width: 75vw;
        margin-top: 50%;
        z-index: 10;
    }

    .speed-container {
        display: none;
    }

    .heroContentBox {
        background: url(../images/mainCover-bg2_xsss.jpg) no-repeat center center;
        background-size: cover;
        background-color: #fafafa;
    }
}

@media (max-width: 367.98px) {

    /* Cover */
    .mainCoverBox {
        height: 620px;
    }

    .mainCover-slogan {
        margin-top: 55%;
        left: 0;
        width: 67vw;
    }

    .mainCover-talk .right {
        font-size: 15px;
    }

    .mainCover-ai .right {
        font-size: 15px;
    }
}

@media (max-width: 360.98px) {
    .mainCoverBox {
        height: 600px;
    }
}

@media (max-width: 320.98px) {
    .mainCoverBox {
        height: 570px;
    }

    .heroContentBox {
        background: url(../images/mainCover-bg2_xsss.jpg) no-repeat -220px center;
        background-size: cover;
        background-color: #fafafa;
    }
}