.numOfCompetition {
    font-weight: 900;
}

/*學年標籤*/
.schoolYearLabel
{

}

/*選擇學年選單*/
.chooseSchoolYear
{

}

/*選擇校內校外選單*/
.chooseTernal
{

}

/*比賽數量*/
.numOfCompetition
{
    
}

/*=====================================================================*/

.mainAccordion
{
    margin-bottom : 5rem;
}

/* 作為標題的比賽名稱 */
.competition_Heading
{
    border-top : solid 1px;
    cursor: pointer;
    box-sizing : border-box;
    display : flex;
    flex-direction : row;
    justify-content : space-between;
    align-items : center;
    padding : 1rem;
}

    .competition_Heading .date {
        font-size : 0.8em;
    }

    .competition_Heading .competitionName {
        font-weight: bolder;
        font-size : 1.2em;
    }

    .competition_Heading .category {
        font-size: 0.8em;
    }

    .selectedHeader {
    }



.eachCompetition
{
    position : relative;
}

.nonSelectedHeader {
    background-color: #FFFFFF;
}

.competition_Heading:hover
{
    text-decoration: underline;
}

/* ======================= 內容來自自建網頁 ==============================*/
.customPage
{

}

.customPage .details
{
    display : block;
    box-sizing : border-box;
    padding : 1rem;
    line-height : 2rem;
}

/* =====================內容來自比賽得獎============================= */

/* 單一比賽 */
.competition {
    background-color: #FFFFFF;
}

    .competition .lhr {
        display : flex;
        flex-direction : row;
        justify-content : space-between;
        align-items : center;
        padding : 1rem;
        box-sizing : border-box;
    }

    /* 地點 */
    .competition .location
    {
        display : block;
    }

    /* 主辦機構 */
    .competition .host {
        display: block;
    }

    /*負責人*/
    .competition .responsiblePerson {
        display: block;
    }

    /*詳情*/
    .competition .details {
        padding: 0 1rem;
        box-sizing: border-box;
        line-height : 2rem;
    }

        .competition .details p:first-child
        {
            margin-top : 0;
        }

        /* 每個獎項 */
    .competition .prizeAndWinner {
        padding: 1rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        border-bottom: dashed 1px #e4e4e4;
    }

    /*獎項名稱*/
    .competition .prize
    {
        flex-basis : 50%;
        font-weight : bolder;
        flex-shrink : 1;
        flex-grow : 1;
        box-sizing : border-box;
        padding-right : 2rem;

    }

    /*得獎者容器*/
    .competition .winners {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        flex-shrink: 1;
        flex-grow: 1;
        flex-basis: 50%;
    }


    /* 得獎者 */
    .competition .eachWinner {
        display : block;
        margin-right : 2rem;
        font-size : 0.9rem;
    }

    /*相片集*/
    .competition .activityLink, .competition .competitionGallery {
        box-sizing: border-box;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1rem;
        justify-items: center;
        padding : 1rem 0;
    }

    .competition .mediaGallery {
        padding: 1rem;
        box-sizing: border-box;
    }

        .competition .mediaGallery .eachMedia {
            display : inline-block;
            margin-right : 2rem;
            line-height : 2rem;
        }

@media (max-width: 480px) {
    .competition_Heading, .competition_Heading .date, .competition_Heading .competitionName, .competition_Heading .category {
        display: block;
    }

    .competition .lhr{
        display : block;
    }

    .competition .activityLink, .competition .competitionGallery {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    .thumbImg
    {
        max-width : 150px;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .competition_Heading, .competition_Heading .date, .competition_Heading .competitionName, .competition_Heading .category {
        display: block;
    }
    .competition .lhr {
        display: block;
    }
    .competition .activityLink, .competition .competitionGallery {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .thumbImg {
        max-width: 200px;
    }
}

@media (max-width: 768px) {
    .details img, .details table, .details iframe, .details div {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
    }
}