@media only screen and (max-width: 1890px) { 
    .peopleItemName h6, .foursItemTitle {
        font-size: 18px;
    }
    .peopleItemName img {
        width: 24px;
    }
    .serviceBg {
        height: 80%;
    }
    .teacherL img {
        width: 300px;
    }
}

@media only screen and (max-width: 1440px) { 
    .wrapper {
        width: 88%;
    }
    .hero {
        margin-top: 64px;
    }
    .heroTitle {
        font-size: 32px;
    }
    .heroSlogan {
        font-size: 32px;
        margin-top: 24px;
    }
    .footerRInfo h4 {
        font-size: 24px;
    }
    .footerRInfo span {
        font-size: 18px;
        margin-top: 16px;
    }
    .service {
        padding: 32px 40px 56px;
    }
    .serviceBg {
        left: 48px;
    }
    .teacherRImg img {
        width: 140px;
    }
    .topLogos img {
        height: 56px;
    }
    .topLogos a {
        margin: 0 16px;
    }
    .topLogos {
        margin: 24px auto;
    }
    .secTitle {
        font-size: 24px;
    }
}

@media only screen and (max-width: 1260px) { 
    .teacherL, .supportL, .footerSocial, .footerLine {
        display: none;
    }
    .foursItem {
        width: 49%;
        margin: 24px 0;
    }
    .fours, .people {
        flex-wrap: wrap;
    }
    .peopleItem {
        padding: 32px;
        width: 49%;
        margin: 24px 0;
    }
    .supportR input, .supportR textarea {
        width: 100%;
    }
    .support {
        display: block;
    }
}

@media only screen and (max-width: 1024px) { 
    .serviceBg, .footerL {
        display: none;
    }
    .twosItem, .foursItem, .serviceRP {
        width: 100%;
    }
    .twos, .collabsCtr {
        flex-direction: column;
    }
    .twosItem:last-child {
        margin-top: 40px;
    }
    .collabsCtr a {
        margin: 24px 0;
    }
    .threesItem {
        width: 100%;
        margin: 24px 0;
    }
    .twos, .fours, .threes {
        flex-direction: column;
    }
    .coursePurchaseR {
        font-size: 16px;
    }
}

@media only screen and (max-width: 780px) { 
    .peopleItem, .pR, .secP {
        width: 100%;
    }
    .serviceRTitle, .teacherRInfoName h6 {
        font-size: 24px;
    }
    .serviceRBtn a, .teacherRInfoTitle {
        font-size: 16px;
    }
    .pL, .heroBg {
        display: none;
    }
    .heroTitle {
        font-size: 32px;
    }
    .heroSlogan {
        font-size: 24px;
        margin-top: 16px;
    }
    .teacherRInfoJob {
        font-size: 13px;
    }
    .teacherRImg img {
        width: 120px;
    }
    .teacherRInfo {
        margin-right: 24px;
    }
    .secTitle, .twosItemTitle {
        font-size: 28px;
    }
}

@media only screen and (max-width: 560px) { 
    .coursePurchase .courseBtn {
        display: none;
    }
    .footer {
        margin-top: 80px;
        padding: 16px 24px 24px;
    }
    .hero {
        padding: 16px 24px 24px;
        margin-top: 24px;
    }
    .copyrightCtr {
        justify-content: center;
        flex-direction: column;
        text-align: center;
    }
    .copyrightCtrText {
        text-align: center;
        display: block;
        margin-top: 8px;
        margin-bottom: 16px;
    }
    .footerRInfo {
        margin-right: 20px;
    }
    .wrapper {
        width: 94%;
    }
    .support {
        padding: 24px 32px 48px;
    }
    .p, .collabsCtr {
        margin-top: 24px;
    }
    .secTitle {
        margin-top: 80px;
    }
    .service {
        margin-top: 40px;
    }
    .photo {
        margin: 80px 0;
    }
    .people {
        margin-top: 0px;
    }
    .collabs {
        margin: 80px auto;
    }
    .twosItem, .service, .hero, .footer, .foursItem, .peopleItem, .support, .photo img {
        border-radius: 24px;
    }
    .supportR textarea {
        border-radius: 20px;
    }
}