/**************************/
/* 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;
    }
}
/* 2024/05/24 shawn增加 */
/**************************/
/* over 673px  */
/**************************/
@media (min-width: 42.0625em) {
    header {
        margin-bottom: 8.5rem!important; 
        /*  85.17px navBox高的值 */
        /* margin-bottom: 85.17px!important;  */
        /*  85.17px navBox高的值 */
    }
}

/**************************/
/* 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:auto;
        height: 8rem;
    }
}
/**************************/
/* BELOW  380px  */
/**************************/
@media (max-width:24em) {
    .open{
        height:35vh;
    }
}