/**************************/
/* over 1600px  */
/**************************/
@media (min-width:100em) {
    .sectionIntroduction {
        padding: 2rem 20rem;
    }

    .sectionSystem {
        padding: 3rem 20rem 8rem 20rem
    }

    .sectionPlan {
        padding: 3rem 15rem;
    }

    .priceSection {
        padding: 3rem 20rem
    }
}

/**************************/
/* BELOW 1240px  */
/**************************/
@media (max-width:88.5em) {
    .cardBox {
        width: 50%;
    }

    .priceSection {
        padding: 3rem 15rem;
    }

    .IntroImg1 {
        width: 100%;
    }

    .heroContainer {
        /* margin-top: 5.3rem; */
        padding: 0 0 3rem 0;
    }

    /* ///login//// */
    .sectionLogin {
        padding: 3rem;
    }
}

/**************************/
/* BELOW  900px  */
/**************************/
@media (max-width:56.2em) {
    .heroContent {
        top: 10%;
    }

    .planCardContainer {
        flex-wrap: wrap;
        /* flex-direction: column; */
    }

    .cardBox {
        width: 70%;
    }

    .group1,
    .group3 {
        flex-direction: column-reverse;
        margin-bottom: 10rem;
    }

    .group2 {
        flex-direction: column;
        margin-bottom: 10rem;
    }

    .heroContent>h1 {
        font-size: 3rem;
    }

    .heroContent>p {
        font-size: 1.8rem;
    }

    .priceSection {
        padding: 3rem 10rem;
    }

    /* ////SIGN UP/// */
    .inputContainer {
        flex-wrap: wrap;
    }

    .loginInputContainer {
        grid-template-columns: 1fr !important;
    }

    .inputContainerLogin {
        border: none;
        margin-top: 0;
        padding: 1rem;
    }
}

/**************************/
/* BELOW  675px  */
/**************************/
@media (max-width:42em) {

    /* 把原先為position relative的HeroContent、HeroContainer改為flex模式
    在手機畫面分成上下拆行 */
    .heroContent {
        position: initial;
        padding: 0 0 0 5rem;
    }

    .heroContainer {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
        margin-bottom: 3rem;
    }

    h2 {
        font-size: 3rem;
    }

    .thumbsUpIcon,
    .bagAddIcon {
        font-size: 3.5rem;
    }

    .sectionIntroduction {
        margin: 5rem 0 3rem 0;
        padding: 2rem 5rem;
    }

    .introductionTitle {
        font-size: 4rem;
    }

    .group1,
    .group2,
    .group3 {
        margin-bottom: 5rem;
    }

    .sectionSystem {
        padding: 3rem 5rem;
    }

    .sectionPlan {
        padding: 3rem;
    }

    .cardBox {
        width: 85%;
    }

    .priceSection {
        padding: 3rem;
    }

    .priceSection {
        margin-bottom: 5rem;
    }

    .systemSecondaryTitleBox {
        margin-bottom: 4rem;
    }

    .footerContent,
    .copyrightContent {
        padding-right: 4rem;
        padding-left: 4rem;
    }
}

/**************************/
/* BELOW 1090px  */
/**************************/
@media (max-width: 1090px) {
    .navBox {
        background: #939393;
    }

    header li {
        display: list-item;
        padding: 1.5rem 0;
    }
}

/**************************/
/* BELOW  672px */
/**************************/
@media (max-width: 42em) {

    header {
        /* margin-bottom: 7.9rem !important; */
        /*  78.86px navBox高的值 */
        /* margin-bottom: 78.86px!important;  */
        /*  78.86px navBox高的值 */
    }


}

/**************************/
/* BELOW  550px  */
/**************************/
@media (max-width:42em) {
    .priceBtnContainer {
        flex-direction: column;
    }

    .heroContent>h1 {
        font-size: 3.5rem;
    }

    .introductionTitle {
        font-size: 2.6rem;
    }

    .introductionContent {
        font-size: 2.2rem;
    }

    .sectionSystem {
        padding: 3rem;
        margin-bottom: 2rem;
    }

    .cardBox {
        width: 100%;
    }

    .priceContent {
        gap: 1rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .Amount {
        width: 30rem;
        text-align: left;
    }

    .footerContent,
    .copyrightContent {
        padding-right: 2rem;
        padding-left: 2rem;
        line-height: 1.5;
    }

    .footerBox {
        margin-bottom: 2rem;
    }

    /* ////SIGN UP/// */
    .sectionMain {
        padding: 3rem;
    }

    .input,
    .select {
        width: 30rem;
    }

    .inputContainer {
        margin-top: 2rem;
        padding: 2rem;
    }

    .secondaryTitle {
        font-size: 2.6rem;
    }

    .sectionLogin {
        margin-bottom: 2rem;
    }

    .logo {
        width: 30rem;
    }
}

/**************************/
/* BELOW  380px  */
/**************************/
@media (max-width:24em) {
    .open {
        /* height: 35vh; */
    }
}