/* For Main.Master */
.mainmaster-gridbox {
    height: 100vh;
    width: 100%;
    display: grid;
    grid-template:
        "header" 80px
        "main" 1fr
        "footer" 30px;
}

header {
    grid-area: header;
    background-color: white;
    height: 80px;
    position: fixed;
    top: 0;
    width: 100%;
    padding-left: 0px;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 1024px;
    margin: 0 auto;
}

main {
    grid-area: main;
    padding: 10px;
}

.main-content {
    width: 1024px;
    margin: 0 auto 20px auto;
}

footer {
    grid-area: footer;
    background-color: teal;
    color: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 30px;
}

.center-content {
    background-color: #ecf0f1;
}

/* Media Query 設定*/
/* PC 4K螢幕 <= 3840px */
@media screen and (max-width: 3840px) {
    .main-content {
        width: 80%;
    }

    header {
        width: 100%;
        padding: 0 16px 0 16px;
    }

    .header-content {
        width: 80%;
    }
}

/* PC <= 1600px */
@media screen and (max-width: 1600px) {
    .main-content {
        width: 90%;
    }

    header {
        width: 100%;
        padding: 0 16px 0 16px;
    }

    .header-content {
        width: 90%;
    }
}

/* Tablet橫向 <= 1200px */
@media screen and (max-width: 1300px) {
    .main-content {
        width: 100%;
    }

    header {
        width: 100%;
        padding: 0 16px 0 16px;
    }

    .header-content {
        width: 100%;
    }
}

/* 平板橫向(960) <= 960px */
@media screen and (max-width: 980px) {
}

/* 手機橫向(Samsung S10 778) <= 800px */
@media screen and (max-width: 800px) {
}

/* 手機橫向(Asus Zen3 640), 平板直向(600) <= 650px */
@media screen and (max-width: 650px) {
}



/* 手機直立 <= 576px */
@media screen and (max-width: 576px) {
}