/* 整個內容方塊 */
.index活動相簿9 {
}

/* 活動容器，每個活動都放在裡面 */
.index活動相簿9 .activityList
{
    margin : 0;
    padding : 0;
    border : 0 none;
}

/*單一活動*/
.index活動相簿9 .eachActivity {
    border-bottom: solid 1px #dddddd;
    padding: 1rem;
    display : flex;
    flex-direction : row;
    flex-wrap : nowrap;
    justify-content : flex-start;
    align-items : flex-start;
}

    .index活動相簿9 .thumbContainer {
        flex-grow: 0;
        flex-shrink: 0;
        margin-right : 2em;
    }

    /*圖片*/
    .index活動相簿9 .eachActivity .themePic {
        width: 100%;
        height: auto;
    }

    .index活動相簿9 .eachActivity .right {
        flex-grow : 1;
        flex-shrink : 1;
    }

    .index活動相簿9 .eachActivity .date {
        font-size: 0.8rem;
    }

    /*標題超連結*/
    .index活動相簿9 .eachActivity .heading {
        font-weight: bold;
        margin-top : 1rem;
    }

    .index活動相簿9 .eachActivity .details {
        font-size: 0.8rem;
        line-height : 2rem;
    }

@media (max-width: 480px) {
    /* 只顯示頭 5 個活動 */
    .index活動相簿9 .eachActivity
    {
        display : none;
    }
    .index活動相簿9 .eachActivity:nth-child(-n+5)
    {
        display : block;
    }
        .index活動相簿9 .eachActivity .right {
            padding-left: 0;
            margin-top: 1rem;
        }
}
@media (min-width: 481px) and (max-width: 767px) {
    /* 只顯示頭 6 個活動 */
.index活動相簿9 .eachActivity
    {
        display : none;
    }
    .index活動相簿9 .eachActivity:nth-child(-n+6)
    {
        display : flex;
    }
        .index活動相簿9 .eachActivity .thumbContainer {
            flex-basis: 50%;
            max-width: 300px;
        }
}
@media (min-width: 768px) and (max-width: 979px) {
    /* 只顯示頭 6 個活動 */
    .index活動相簿9 .eachActivity
    {
        display : none;
    }
    .index活動相簿9 .eachActivity:nth-child(-n+6)
    {
        display : flex;
    }
        .index活動相簿9 .eachActivity .thumbContainer {
            flex-basis: 35%;
            max-width: 400px;
        }
}
@media (min-width: 980px) and (max-width:1199px) {
    /* 只顯示頭 8 個活動 */
    .index活動相簿9 .eachActivity
    {
        display : none;
    }
    .index活動相簿9 .eachActivity:nth-child(-n+8)
    {
        display : flex;
    }
        .index活動相簿9 .eachActivity .thumbContainer {
            flex-basis: 30%;
            max-width: 400px;
        }
}
@media (min-width: 1200px) and (max-width:1919px) {
    .index活動相簿9 .eachActivity .thumbContainer {
        flex-basis: 20%;
        max-width: 400px;
    }
}

@media (min-width: 1920px) {
    .index活動相簿9 .eachActivity .thumbContainer {
        flex-basis: 20%;
        max-width: 400px;
    }
}