﻿/* 整個內容方塊 */
.index活動相集6 {
}

    /* 內容方塊標題文字 (h2) */
    .index活動相集6 .blockTitle {
        margin : 0 0 1rem 1.2rem;
        text-transform: uppercase;
    }

    /* 活動容器，每個活動都放在裡面 */
    .index活動相集6 .activityList {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        margin: auto;
    }

    /*單一活動*/
    .index活動相集6 .eachActivity {
        border-right: dashed 1px #808080;
        padding: 0 1rem 1.5rem; /*SettingA*/
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-between;
        flex-basis: calc(100%/8); /* default 預設一行顯示4個活動 */
        max-width: calc(100%/8 - 1px);
    }

        .index活動相集6 .eachActivity:last-child {
            border-right: none 0; /* 最後一個活動不顯示點點的右邊框 */
        }

        .index活動相集6 .eachActivity .text
        {
            padding-bottom : 0rem;
        }

        .index活動相集6 .eachActivity .date {
            font-size: 0.8rem;
            line-height: 2em;
        }

        .index活動相集6 .eachActivity .heading {
            font-weight: bold;
            line-height: 2em;
        }

        .index活動相集6 .eachActivity .themePic {
            width: 100%;
            height: auto;
            background-position: 50% 50%;
            background-size: cover;
            border: 1px solid #fff;
            box-shadow: 0 0 2px rgba(0,0,0,.4);
        }

            .index活動相集6 .eachActivity .themePic:after {
                padding-bottom: 100%;
                content: " ";
                display: block;
                box-sizing: border-box;
            }

@media (max-width: 480px) {
    .index活動相集6 .eachActivity {
        flex-basis: 100%;
        max-width: 100%;
        border-right: none 0;
    }

    /* default 只顯示頭 2 個活動 */
    .index活動相集6 .activityList .eachActivity {
        display: none;
    }

        .index活動相集6 .activityList .eachActivity:nth-child(-n+2) {
            display: block;
        }
}
@media (min-width: 481px) and (max-width: 767px) {
    /* default 只顯示頭 2 個活動 */
    .index活動相集6 .activityList .eachActivity {
        display: none;
    }
    .index活動相集6 .activityList .eachActivity:nth-child(-n+2) {
        display: flex;
    }
    .index活動相集6 .eachActivity {
        flex-basis: calc(100%/2);
        max-width: calc(100%/2 - 1px);
    }
    .index活動相集6 .eachActivity:nth-child(2) {
        border-right: none 0;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    /* default 只顯示頭 2 個活動 */
    .index活動相集6 .activityList .eachActivity {
        display: none;
    }
    .index活動相集6 .activityList .eachActivity:nth-child(-n+2) {
        display: flex;
    }
    .index活動相集6 .eachActivity {
        flex-basis: calc(100%/2);
        max-width: calc(100%/2 - 1px);
    }
    .index活動相集6 .eachActivity:nth-child(2) {
        border-right: none 0;
    }
}

@media (min-width: 980px) and (max-width:1199px) {
    /* default 只顯示頭 3 個活動 */
    .index活動相集6 .activityList .eachActivity {
        display: none;
    }
    .index活動相集6 .activityList .eachActivity:nth-child(-n+3) {
        display: flex;
    }
    .index活動相集6 .eachActivity {
        flex-basis: calc(100%/3);
        max-width: calc(100%/3 - 1px);
    }
    .index活動相集6 .eachActivity:nth-child(3) {
        border-right: none 0;
    }
}


@media (min-width: 1200px) and (max-width:1919px) 
{
    /* default 只顯示頭 4 個活動 */
    .index活動相集6 .activityList .eachActivity {
        display: none;
    }
    .index活動相集6 .activityList .eachActivity:nth-child(-n+6) {
        display: flex;
    }
    .index活動相集6 .eachActivity {
        flex-basis: calc(100%/6);
        max-width: calc(100%/6 - 1px);
    }
    .index活動相集6 .eachActivity:nth-child(6) {
        border-right: none 0;
    }
}
@media (min-width: 1920px) 
{
	/* default 只顯示頭 6 個活動 */
    .index活動相集6 .eachActivity {
        flex-basis: calc(100%/6);
        max-width: calc(100%/6 - 1px);
    }
}
