*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}
html{
    font-size:62.5%;
}
body{
    font-family:"Noto Sans TC", sans-serif;
    line-height:1;
    font-weight:400;
    color:#555;
    font-size: 16px;
    background-color: #2B6F68;

    overflow-x: hidden;
}
a{
    text-decoration: none;
}


/* Section Navigation */
nav{
    display:flex;
    background-color:#fff;
    padding:3.5rem;
    justify-content: space-between;
    align-items: center;
}
.homeBtn{
    color:#2B6F68;
    font-weight:700;
    font-size:3rem;
}
.navLink{
    display:flex;
    list-style: none;
    gap:1.6rem;
}
.navLinkBtn{
    color:#fff;
    padding:1.3rem;
    background-color: #000;
    /* width:8rem; */
    font-size: 2.2rem;
    transition:all 0.3s;
}
.navLinkBtn:hover,.navLinkBtn:active{
    background-color:rgba(112, 112, 112, 0.571);
    box-shadow: 0rem 0rem 1rem rgba(85, 85, 85, 0.3);
}
.Btn,.Btn:visited{
    background-color:#2B6F68;
    color:#fff;
    padding:1.3rem;
    /* width:8rem; */
    font-size: 2.2rem;
    transition:all 0.3s;
}
.Btn:hover .Btn:active{
    background-color:rgba(112, 112, 112, 0.571);
    box-shadow: 0rem 0rem 1rem rgba(85, 85, 85, 0.3);
}
/* Section Hero */
.sectionHero{
    background-image:url("/Image/banner.png");
    background-repeat: no-repeat;
    background-size: 100%;

    width:100vw;
    padding:10rem 12rem 10rem 12rem;

    margin-bottom: 3rem;
}
h1{
    font-size: 6rem;
    color:#fff;
    line-height: 1.5;
    font-weight: 700;
    margin-bottom:8rem ;
}
.signBtn,.signBtn:visited{
    background-color: #fff;
    color:#2B6F68;
    font-size: 3.6rem;
    font-weight: 700;
    padding:1.5rem;
    /* margin-bottom: rem; */
    border-radius: 1.5rem;

    transition: all 0.3s;
}
.signBtn:hover,.signBtn:active{
    box-shadow: 0rem 0rem 1rem rgba(85, 85, 85, 0.3);
    color:#000;
}
.heroContentBox{
    display: flex;
    justify-content: center;
}
.heroContent{
    text-align: center;
    font-size: 2.4rem;
    margin-top: 4rem;
    background-color: rgba(255, 255, 255, 0.563);
    padding:4.5rem;
    width:80%;
    border-radius:2rem;
    line-height: 1.5;
    
    /* transform: translateY(0.2rem); */
}
/* sectionSystem */
.sectionSystem{
    padding:6rem 12rem 3rem 12rem;
    background-image:linear-gradient(rgba(116, 116, 116, 0.4),rgba(116, 116, 116, 0.4)) ,url(/Image/systemBackground.jpg);
    background-repeat: no-repeat;
    background-size:100%;
    width:100vw;
    height:80hv;
    margin-top:8rem;
    /* overflow-x: hidden;
    overflow-y:visible ; */

    position: relative;
}
.secondaryTitle{
    color:#fff;
    background-color: rgba(0, 0, 0, 0.9);
    display: inline-block;
    padding:1.5rem 2.5rem 1.5rem 2.5rem;
    font-size: 3.2rem;
    /* position: absolute;
    top:-3rem; */
    
}
.stystemCardBox{
    padding:10rem;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:1.5rem;
    
}
.stystemCardOdd,.stystemCardEven{
    padding:5rem 3rem;  
}

.stystemCardOdd:hover,.stystemCardEven:hover{
    box-shadow:0.1rem 0.1rem 1rem 0.8rem rgba(255, 255, 255, 0.5) ;
}
.stystemCardOdd{
    background-color: #2B6F68;
    color:#fff
}
.stystemCardEven{
    background-color: #fff;
    color: #2B6F68;
}
.systemTittle{
    font-size: 5rem;
    margin-bottom: 1.6rem;
}
.systemContent{
    font-size: 2.6rem;
}

/*  sectionKnowledgeBase */
.sectionKnowledgeBase{
    padding:6rem 8rem 6rem 8rem;
    
}
h2{
    font-size:3.6rem;
    color:#FFEAA1;
}
.KnowledgeBaseList{
    margin-top: 4rem;
    transform: translateX(3rem);
}
.KnowledgeBaseListItem{
    color:#fff;
    font-size:2.6rem;
    line-height: 1.5;
}
/* sectionFlow */
.sectionMaintenanceFlow{
    background-color: #fff;
    padding:6rem 4rem 8rem 4rem;
    margin-bottom: 4rem;
}
.sectionMaintenanceFlowTitle{
    color:#fff;
    background-color: rgba(0, 0, 0, 0.9);
    display: inline-block;
    padding:1.5rem 2.5rem 1.5rem 2.5rem;
    font-size: 3.2rem;

    /* position: absolute;
    top:-3rem; */
    
}
.FlowCardBox{
    display:flex;
    justify-content: center;
}
.FlowCard{
    padding:1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.FlowCardImage{
    justify-self: center;
}
.FlowCardItem{
    /* border: #555 0.1rem solid; */
    padding:5rem 8rem 5rem 8rem;
}   
.FlowCardTittle{
    font-size:5rem;
    color:#2B6F68;
    font-weight: 700;
    margin-bottom: 1.5rem;
}
.FlowCardSecondaryTittle{
    font-size:3.6rem;
    color:#2B6F68;  
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 2rem;
}
.FlowCardContent{
    font-size:2.4rem;
    color:#7D7F7F;
    font-weight: 400;
    line-height: 1.5;
}
/* sectionData */
.sectionData{
    padding:8rem 10rem 12rem 10rem;
}
.sectionDataTitle{
    color:#fff;
    background-color: rgba(0, 0, 0, 0.9);
    display: inline-block;
    padding:1.5rem 2.5rem 1.5rem 2.5rem;
    font-size: 3.2rem;

    margin-bottom: 3rem;
}
.dataBox{
    background-color:rgba(255, 255, 255, 0.7);
    padding:4rem;   
    margin-bottom: 3rem;
}

.dataTitle{
    font-size:3.6rem;
    color:#978237;
    margin-bottom: 2rem;
}
.dataContent{
    font-size:2.4rem;
    line-height: 1.5;
}
/* sectionSubscription */
.sectionSubscription{
    padding:8rem 5rem 8rem 5rem;

    background-image:linear-gradient(rgba(116, 116, 116, 0.4),rgba(116, 116, 116, 0.4)) , url(/Image/subscriptionBg.jpg);
    /* background-repeat: no-repeat; */
    background-size: 100%;
    width:100wv;
    
}
.subscriptionTitle{
    color:#fff;
    background-color: rgba(0, 0, 0, 0.9);
    display: inline-block;
    padding:1.5rem 2.5rem 1.5rem 2.5rem;
    font-size: 3.2rem;

    margin-bottom:3rem;
}
.subscriptionBox{
    display: flex;
    /* justify-content: center; */
    align-items: center;
    flex-direction: column;
}
.subscriptionListItem{
    font-size: 2.6rem;
    background-color: #fff;
    border-radius:10rem;
    box-shadow: 0.1px 0.1px 2rem 0.5rem rgba(255, 255, 255, 0.3);
    padding:1.5rem 3rem 1.5rem 3rem;
    margin-bottom: 2rem;
}
/* table */
table{
    width: 100%;
	/* border-collapse: collapse; */
	overflow: hidden;
	box-shadow: 0 0 20px rgba(0,0,0,0.1);
    border-radius: 5PX;

    border-collapse: separate;
    border-spacing: 3rem;
    font-size: 2.4rem;
    background-color: #fff;

    margin-top: 4rem;
    margin-bottom: 5rem;
}
th{
    text-align: left;
}
th,td{
    padding:3rem;
}
.rowone{
    background-color:#E9F7FB ;
}
.rowtwo{
    background-color: #D9D9D9;
}
.columnone{
    background-color: #CFF0FA;
}
.tableBtn,.tableBtn:visited{
    /* display: inline; */
    background-color: #fff;
    color:#2B6F68;
    font-size: 3.6rem;
    font-weight: 700;
    padding:1.5rem;
    border-radius: 1.5rem;

    transition: all 0.3s;
}
.tableBtn:hover,.tableBtn:active{
    box-shadow: 0rem 0rem 1rem rgba(85, 85, 85, 0.3);
    color:#000;
}
footer{
    background-color: #000;
    padding:4rem 5rem 4rem 5rem;
    color:#fff;

    display: flex;
    flex-direction: column;
    gap:1rem;
}




/* mobile */
.navMobile{
    /* opacity: ; */
    display: flex;
    width:100%;
    justify-content: center;

    position: fixed;
    bottom:0;
/* WEB版看不到 */
    opacity: 0;
    visibility: hidden;
}
.navLinkMobile{
    display:flex;
    list-style: none;
    gap:1.6rem;
}