/******************/
/* 75.5*16=1208px*/
/******************/
@media (max-width:75.5em){
    /* 首頁 */
    html{
        /* 13px/16px=0.8 | 0.5*100=50% */
        font-size:60%;
    }
    .homeBtn{
        font-size:2.4rem;
    }
    .navLinkBtn{
        font-size:1.6rem;
        width:auto;
    }
    .Btn{
        font-size:1.6rem;
        width:auto;
    }
    h1{
        font-size: 4.5rem;
    }
    .signBtn{
        font-size: 3rem;
    }
    .sectionSystem{
        padding:3rem 4rem 4rem 6rem;
    }
    .sectionMaintenanceFlow{
        padding:4rem 1.5rem 4rem 1.5rem;
    }
    .FlowCardItem{
        padding:2rem 3rem 2rem 3rem;
    }
    .FlowCardTittle{
        font-size: 3.2rem;
    }
    .FlowCardSecondaryTittle{
        font-size:2.8rem;
    }
    .FlowCardImage{
        width:90%;
        height:auto;
    }
    
}
/******************/
/* 57.5*16=920px*/
/******************/
@media (max-width:57.5em){
    .navLinkBtn{
        display:none;
    }
    .Btn{
        padding:1.3rem 2rem 1.3rem 2rem;
    }

    .sectionSystem{
        margin-top:0;
    }
    .sectionHero{
        padding:4rem 6rem 4rem 6rem;
    }
    h1{
        margin-bottom:4rem;
    }
    .signBtn{
        font-size:3rem;
        padding:1rem;
    }
    .heroContent{
        padding:2.5rem;
        font-size:2rem;
    }
    .stystemCardBox{
        grid-template-columns:1fr 1fr;
    }
    .sectionSystem{
        background-color: #131313;
        background-size: 180%;
    }
    .sectionMaintenanceFlow{
        padding:4rem 3rem 4rem 3rem;
    }
    .FlowCardImage{
        transform: translateY(30px);
        width:85%;
    }
    .FlowCardItem{
        padding:3rem 4rem 3rem 4rem;
    }
}
/******************/
/* 47.5*16=760px*/
/******************/
@media (max-width:47.5em){
    .stystemCardBox{
        grid-template-columns: 1fr;
    }
    .sectionSystem{
        background-size: 300%;
    }
    .systemContent{
        font-size: 3rem;
    }
    h2{
        font-size:3rem;
        line-height: 1.3;
        font-weight: 500;
    }
    .FlowCard{
        grid-template-columns: 1fr;
        align-items: center;
        justify-content: center;
    }
    .box2{
        grid-row:2/1;
    }
    .box6{
        grid-row:7/5;
    }
    .FlowCardImage{
        transform: translateY(0);
        transform: translateX(40px);
    }
    .sectionSubscription{
        padding:4rem 3rem;
    }
    .sectionData{
        padding:4rem;
    }
    table{
        font-size:2rem;
    }
    th,td{
        padding:1.5rem;
    }
}
/******************/
/* 34.5*16=550px* 手機/  
/******************/
@media (max-width:34.5em){
    html{
        /* 13px/16px=0.8 | 0.5*100=50% */
        font-size:40%;
    }
    
    .sectionHero{
        background-size: 200%;
    }
    nav{
        padding:2rem;
        justify-content: space-between;
    }
    .signBtn{
        font-size:2.4rem;
    }
    .Btn{
        padding:1rem 1.3rem;
    }
    .secondaryTitle,.sectionMaintenanceFlowTitle,.sectionDataTitle,.subscriptionTitle{
        font-size:2.6rem;
    }
    .tableBtn{
        font-size:2.8rem;
    }
    footer{
        height:50%;
        padding:rem 2.5rem;
        gap:1.5rem;
        letter-spacing: 1.1;
        font-size:2rem;
        font-weight: 400;
        line-height: 1.5;
    }
    table{
        font-size:1.8rem;
    }
    th,td{
        padding:1rem;   
    }
    .subscriptionListItem{
        font-size:2rem;
    }
}