﻿.numOfCompetition {
    font-weight: 900;
}

/*選擇學年選單*/
.chooseSchoolYear {
}

/*選擇校內校外選單*/
.chooseTernal {
}

span.pageBall input {
    display: none;
}

    span.pageBall input + label {
        margin: 0 0.5em;
        padding: 0.5em 0.8em;
        background-color: beige;
        border-radius: 50%;
    }

        span.pageBall input + label:hover {
            background-color: burlywood;
        }

.allCompetitionContainer {
    border-radius: 3rem;
    padding: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content : space-between;
    align-items: stretch;
}

.eachCompetition {
    flex-basis: 30%;
    padding: 1rem;
    position: relative;
    display: flex;
    flex-direction : column;
    justify-content : flex-start;
}

    .eachCompetition .coverLink {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
    }

    .eachCompetition .thumbImg {
        max-width: 100%;
        border-radius : 1rem;

    }

    .eachCompetition .coverLink:hover ~ .thumbImg {
        transform: scale(1.02);
        transition: .3s ease-in-out;
    }

        .eachCompetition .text {
            padding: 1em 0;
        }

    .eachCompetition .date {
        font-size: 0.8em;
        display: block;
        line-height: 2em;
    }

    .eachCompetition .name {
        display: block;
        font-weight: 800;
    }


    .eachCompetition .contentUrl {
    }


@media (max-width: 480px) {
    .allCompetitionContainer {
        display: block;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .eachCompetition {
        flex-basis: 46%;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .eachCompetition {
        flex-basis: 46%;
    }
}

@media (min-width: 980px) and (max-width:1199px) {
    .eachCompetition {
        flex-basis: 30%;
    }
}

@media (min-width: 1200px) and (max-width:1919px) {
    .eachCompetition {
        flex-basis: 30%;
    }
}

@media (min-width: 1920px) {
    .eachCompetition {
        flex-basis: 24%;
    }
}
