.mp學校資料3 {
    --font-size: 1rem;
    --font-color: #FFFFFF;
    --animation-duration: 0.5s;
    --max-width: 800px;
    --school-logo-name-width: 40%;
    --school-logo-height: 150px;
    --school-logo-shadow: drop-shadow(0 0 0.25em #FFFFFF);
    --school-name-chinese-font-size: 1.1em;
    --school-name-chinese-font-weight: 700;
    --middle-text-column-width: 50%;
    --text-enlarge-hover: scale(1.1);
    --icon-column-width: 10%;
    --icon-size: 1.8em;
    --icon-enlarge-hover: scale(1.2);

    font-size: var(--font-size);
    
    color: var(--font-color);
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1vw;
}

    .mp學校資料3 .innerShell {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
    }

    .mp學校資料3 .link {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
        flex-shrink: 1;
        flex-basis: var(--school-logo-name-width);
    }

    .mp學校資料3 .schoolLogo {
        max-height: var(--school-logo-height);
        filter: var(--school-logo-shadow);
    }

    .mp學校資料3 .schoolName01 {
        display: block;
        font-weight: var(--school-name-chinese-font-weight);
        font-size: var(--school-name-chinese-font-size);
        /* 2024-11-02 */
        transition: all var(--animation-duration);
    }

    .mp學校資料3 .schoolName02 {
        display: block;
        /* 2024-11-02 */
        transition: all var(--animation-duration);
    }

        .mp學校資料3 .textInfo {
            flex-grow: 1;
            flex-basis: var(--middle-text-column-width);
        }

            .mp學校資料3 .textInfo > div {
                padding-bottom: 1em;
                /* 2024-11-02 */
                transition: all var(--animation-duration);
            }

                .mp學校資料3 .textInfo > div:hover, .mp學校資料3 .schoolName01:hover, .mp學校資料3 .schoolName02:hover {
                    transform: var(--text-enlarge-hover);
                }

                .mp學校資料3 .textInfo .label {
                    margin-right: 1em;
                }

    .mp學校資料3 .dmSocial {
        flex-basis: var(--icon-column-width);
        flex-shrink: 1;
        font-size: var(--icon-size);
    }

        .mp學校資料3 .dmSocial a {
            display: block;
            /* 2024-11-02 */
            transition: all var(--animation-duration);
        }

            .mp學校資料3 .dmSocial a:hover {
                transform: var(--icon-enlarge-hover);
            }


@media (max-width: 480px) {
    .mp學校資料3 {
        --school-logo-height: 100px;
    }

    .mp學校資料3 .innerShell {
        display: block;
    }

    .mp學校資料3 .schoolLogo {
        max-height: var(--school-logo-height);
    }

    .mp學校資料3 .link {
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        padding: 1em;
    }

    .mp學校資料3 .textInfo {
        padding: 0 1em 1em 1em;
    }

    .mp學校資料3 .dmSocial {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        padding: 0 1em 1em 1em;
    }

    .mp學校資料3 .copyright {
        text-align: right;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .mp學校資料3 {
        --school-logo-height: 100px;
    }

    .mp學校資料3 .innerShell {
        display: block;
    }

        .mp學校資料3 .schoolLogo {
            max-height: var(--school-logo-height);
            margin-right: 1em;
        }

    .mp學校資料3 .link {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 1em;
    }

    .mp學校資料3 .textInfo {
        padding: 0 1em 1em 1em;
    }

    .mp學校資料3 .dmSocial {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        padding: 0 1em 1em 1em;
    }

    .mp學校資料3 .copyright {
        text-align: right;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
}

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

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

@media (min-width: 1920px) {
}