/* 整個內容方塊 */
.index學校活動3 {
    margin: 0;
}

    /* 內容方塊標題文字 (h2) */ 
.index學校活動3 .blockTitle{}

/* 活動容器 */
.index學校活動3 .activityList
{
    display :flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : space-around;
}

/*單一活動*/
.index學校活動3 .eachActivity {
    margin : 1em 0;
    border : solid 1px rgb(135,77,0);  
    padding: 1rem;
    display: block;
    flex-grow : 1;
    flex-shrink : 1;
    background-color : rgb(232,208,174);
    position : relative;
    box-shadow: 5px 5px 10px -2px rgba(148,146,148,0.4);
}

/*圖片容器*/
.index學校活動3 .thumbList
{
    display : flex;
    flex-direction : row;
    flex-wrap : nowrap;
    justify-content : space-between;
    align-items : flex-start;
    align-content : space-between;
    margin-bottom : 3rem;
}

    /*圖片*/
    .index學校活動3 .eachActivity .themePic {
        width : 100%; /* 這是每個圖片佔每個活動的闊度百分比，如果活動顯示多於一個圖片，要修改這個 */
        height : auto;
        max-height : 250px;
    }

    /*標題超連結*/
    .index學校活動3 .eachActivity .heading {
        font-weight: bold;
        padding : 1rem;
        position : absolute;
        left : 0;
        bottom : 0;
        background-color : #ffffff;
        width : 100%;
    }
@media (max-width: 480px) {
    .index學校活動3 .eachActivity {
        flex-basis : 100%;
    }

    /* 只顯示頭 2 個活動 */
    .index學校活動3 .activityList .eachActivity
    {
        display : none;
    }
    .index學校活動3 .activityList .eachActivity:nth-child(-n+4)
    {
        display : block;
    }
}
@media (min-width: 481px) and (max-width: 767px) {
    .index學校活動3 .eachActivity {
        flex-basis: calc(100%/2 - 1rem);
        max-width: calc(100%/2 - 1rem);
    }
    /* 只顯示頭 4 個活動 */
    .index學校活動3 .activityList .eachActivity
{
display : none;
    }
    .index學校活動3 .activityList .eachActivity:nth-child(-n+4)
    {
        display : block;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .index學校活動3 .eachActivity {
        flex-basis: calc(100%/2 - 2rem);
        max-width: calc(100%/2 - 2rem);
    }
    /* 只顯示頭 4 個活動 */
    .index學校活動3 .activityList .eachActivity
    {
        display : none;
    }
    .index學校活動3 .activityList .eachActivity:nth-child(-n+4)
    {
        display : block;
    }
}
@media (min-width: 980px) and (max-width:1199px) {

    .index學校活動3 .eachActivity {
        flex-basis: calc(100%/3 - 1rem);
        max-width: calc(100%/3 - 1rem);
    }

    /* 只顯示頭 6 個活動 */
    .index學校活動3 .activityList .eachActivity
    {
        display : none;
    }
    .index學校活動3 .activityList .eachActivity:nth-child(-n+6)
    {
        display : block;
    }
}
@media (min-width: 1200px) and (max-width:1919px) {
    .index學校活動3 .activityList .eachActivity
    {
        display : none;
    }
    .index學校活動3 .activityList .eachActivity:nth-child(-n+6)
    {
        display : block;
    }    
    .index學校活動3 .eachActivity {
        flex-basis: calc(100%/3 - 1rem);
        max-width: calc(100%/3 - 1rem);
    }
}
@media (min-width: 1920px)
{
    .index學校活動3 .eachActivity {
        flex-basis: calc(100%/4 - 1rem);
        max-width: calc(100%/4 - 1rem);
    }
}