/* 整個內容方塊 */
.index網上相集12 {
    /*height : 300px;   --- if simpleBar (i.e. scroll bar) is set on the whole block, change the number.*/
    --aspect-ratio : 4 / 3;
}

    /* 內容方塊標題文字 (h2) */
    .index網上相集12 .blockTitle {
    }

        /* 內容方塊標題超連結 */
        .index網上相集12 .blockTitle a {
        }

    /* 活動容器，每個活動都放在裡面 */
    .index網上相集12 .loopElementList {
        height : 600px;   /*--- if simpleBar (i.e. scroll bar) is set on the content, change the number.*/
    }

        /* 活動容器，每個活動都放在裡面 */
        .index網上相集12 .loopElementList .elementContainer {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: stretch;
        }

    .index網上相集12 .eachActivity {
        flex-basis: 46%;
        aspect-ratio: var(--aspect-ratio);
        position: relative;
        margin: 0 0 3em 0;
    }

        .index網上相集12 .eachActivity .bg {
            width: calc(100% - 1em);
            aspect-ratio: var(--aspect-ratio);
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: -2;
        }

        .index網上相集12 .eachActivity:nth-child(3n+0) .bg {
            background-color: #E0D056;
        }

        .index網上相集12 .eachActivity:nth-child(3n+1) .bg {
            background-color: #56E0D0;
        }

        .index網上相集12 .eachActivity:nth-child(3n+2) .bg {
            background-color: #D056E0;
        }

            .index網上相集12 .eachActivity .themePic {
                aspect-ratio: var(--aspect-ratio);
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;
                width: calc(100% - 1em);
                position: absolute;
                top: 0;
                right: 0;
                z-index: -1;
                border-left: solid 2px #FFFFFF;
                border-bottom: solid 2px #FFFFFF;
            }

        .index網上相集12 .eachActivity .date {
            display: inline-block;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 0;
            background-color: rgba(0,0,0,0.5);
            color: #FFFFFF;
            padding: 5px;
        }

        .index網上相集12 .eachActivity .heading {
            width: 70%;
            z-index: 0;
            background-color: rgba(0,0,0,0.5);
            color: #FFFFFF;
            position: absolute;
            bottom: calc(1em - 3px);
            left: calc(1em + 2px);
            border: solid 5px transparent;

            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .index網上相集12 .eachActivity .link {
            display: block;
            position: absolute;
            top : 0;
            bottom : 0;
            left : 0;
            right : 0;
            z-index : 1;
        }

@media (max-width: 480px) {
    .index網上相集12 .loopElementList .elementContainer {
        display: block;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .index網上相集12 .eachActivity {
        flex-basis: 48%;
    }
        .index網上相集12 .eachActivity .heading {
            width: calc(100% - 1em - 3px);
        }
}

@media (min-width: 768px) and (max-width: 979px) {
    .index網上相集12 .eachActivity {
        flex-basis: 48%;
    }

        .index網上相集12 .eachActivity .heading {
            width: calc(100% - 1em - 3px);
        }
}

@media (min-width: 980px) and (max-width:1199px) {
}

@media (min-width: 1200px) and (max-width:1919px) {

}

@media (min-width: 1920px) {

}