﻿/* 整個內容方塊 */
.index活動6 {}

    /* 內容方塊標題文字 (h2) */ 
.index活動6 .blockTitle{}

.index活動6 .loopElementList {
        height : 800px;   /*--- if simpleBar (i.e. scroll bar) is set on the content, change the number.*/
    }

/* 活動容器 */
.index活動6 .elementContainer
{
    display :flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : space-around;
    align-items : stretch;
}

/*單一活動*/
.index活動6 .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: 5px 5px 21px -2px rgba(148,146,148,0.4);
}

/*圖片容器*/
.index活動6 .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活動6 .eachActivity .themePic {
        width : 100%; /* 這是每個圖片佔每個活動的闊度百分比，如果活動顯示多於一個圖片，要修改這個 */
        height : auto;
    }

    /*標題超連結*/
    .index活動6 .eachActivity .heading {
        font-weight: bold;
        padding : 1rem;
        position : absolute;
        left : 0;
        bottom : 0;
        background-color : #ffffff;
        width : 100%;
    }


@media (max-width: 480px) {
  .index活動6 .loopElementList {
    height : auto;
  }
  
    .index活動6 .eachActivity {
        flex-basis : 100%;
    }

    /* 只顯示頭 4 個活動 */
    .index活動6 .activityList .eachActivity
    {
        display : none;
    }
    .index活動6 .activityList .eachActivity:nth-child(-n+4)
    {
        display : block;
    }
}
@media (min-width: 481px) and (max-width: 767px) {
  .index活動6 .loopElementList {
    height : auto;
  }  
    .index活動6 .eachActivity {
        flex-basis: calc(100%/2 - 2rem);
        max-width: calc(100%/2 - 2rem);
    }
    /* 只顯示頭 4 個活動 */
    .index活動6 .activityList .eachActivity
    {
        display : none;
    }
    .index活動6 .activityList .eachActivity:nth-child(-n+4)
    {
        display : block;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
  .index活動6 .loopElementList 
  {
     height: auto;
  }
    .index活動6 .eachActivity {
        flex-basis: calc(100%/2 - 2rem);
        max-width: calc(100%/2 - 2rem);
    }
    /* 只顯示頭 6 個活動 */
    .index活動6 .activityList .eachActivity
    {
        display : none;
    }
    .index活動6 .activityList .eachActivity:nth-child(-n+6)
    {
        display : block;
    }
}
@media (min-width: 980px) and (max-width:1199px) {

    .index活動6 .eachActivity {
        flex-basis: calc(100%/2 - 1rem);
        max-width: calc(100%/2 - 1rem);
    }

    /* 只顯示頭 6 個活動 */
    .index活動6 .activityList .eachActivity
    {
        display : none;
    }
    .index活動6 .activityList .eachActivity:nth-child(-n+6)
    {
        display : block;
    }
}
@media (min-width: 1200px) and (max-width:1919px) 
{
    .index活動6 .eachActivity {
        flex-basis: calc(100%/2 - 2rem);
        max-width: calc(100%/2 - 2rem);
    }
}
@media (min-width: 1920px) 
{
    .index活動6 .eachActivity {
        flex-basis: calc(100%/3 - 2rem);
        max-width: calc(100%/3 - 2rem);
    }
}
