﻿/* 整個內容方塊 */
.index校園生活12 {}

    /* 內容方塊標題文字 (h2) */
    .index校園生活12 .blockTitle {
        padding: 0 0 0 1rem;
    }

        /* 內容方塊標題超連結 */
        .index校園生活12 .blockTitle a {
           color : #bf451d;
           text-shadow: 1px 1px #FFFFFF;
        }


/* 活動容器 */
    .index校園生活12 .activityList {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: stretch;
        padding: 1rem;
    }

/*單一活動*/
.index校園生活12 .eachActivity {
    margin : 1em 0;
    border : solid 2px #dddddd;  /* Change */
    padding: 1rem;
    display: block;
    flex-grow : 1;
    flex-shrink : 1;
    background-color : #edecea;
    position : relative;
    box-shadow: 2px 2px 8px -2px rgba(148,146,148,0.4);
}

/*圖片容器*/
.index校園生活12 .thumbList
{
    display : flex;
    flex-direction : row;
    flex-wrap : nowrap;
    justify-content : flex-start;
    align-items : stretch;
    margin-bottom : 3rem;
}

    /*圖片*/
    .index校園生活12 .eachActivity .themePic {
        width : 100%; /* 這是每個圖片佔每個活動的闊度百分比，如果活動顯示多於一個圖片，要修改這個 */
        /*height : auto;*/
        align-self: flex-start;
    }

    /*標題超連結*/
    .index校園生活12 .eachActivity .heading {
        font-weight: bold;
        padding : 1rem;
        position : absolute;
        left : 0;
        bottom : 0;
        background-color : #ffffff;
        width : 100%;
    }


@media (max-width: 480px) {
    .index校園生活12 .eachActivity {
        flex-basis : 100%;
    }

    /* 只顯示頭 5 個活動 */
    .index校園生活12 .activityList .eachActivity
    {
        display : none;
    }
    .index校園生活12 .activityList .eachActivity:nth-child(-n+5)
    {
        display : block;
    }
}
@media (min-width: 481px) and (max-width: 767px) {
.index校園生活12 .eachActivity {
        flex-basis: calc(50% - 1rem);
        max-width: calc(50% - 1rem);
    }
    /* 只顯示頭 4 個活動 */
    .index校園生活12 .activityList .eachActivity
    {
        display : none;
    }
    .index校園生活12 .activityList .eachActivity:nth-child(-n+4)
    {
        display : block;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .index校園生活12 .eachActivity {
        flex-basis: calc(100%/3 - 2rem);
        max-width: calc(100%/3 - 2rem);
    }
    /* 只顯示頭 6 個活動 */
    .index校園生活12 .activityList .eachActivity
    {
        display : none;
    }
    .index校園生活12 .activityList .eachActivity:nth-child(-n+6)
    {
        display : block;
    }
}
@media (min-width: 980px) and (max-width:1199px) {

    .index校園生活12 .eachActivity {
        flex-basis: calc(100%/3 - 2rem);
        max-width: calc(100%/3 - 2rem);
    }

    /* 只顯示頭 6 個活動 */
    .index校園生活12 .activityList .eachActivity
    {
        display : none;
    }
    .index校園生活12 .activityList .eachActivity:nth-child(-n+6)
    {
        display : block;
    }
}
@media (min-width: 1200px) and (max-width:1919px) {
    .index校園生活12 .activityList .eachActivity
    {
        display : none;
    }
    .index校園生活12 .activityList .eachActivity:nth-child(-n+6)
    {
        display : block;
    }
    .index校園生活12 .eachActivity {
        flex-basis: calc(100%/3 - 2rem);
        max-width: calc(100%/3 - 2rem);
    }
}

@media (min-width: 1920px) {
    .index校園生活12 .eachActivity {
        flex-basis: calc(100%/4 - 3rem);
        max-width: calc(100%/4 - 3rem);
    }
}
