.mp學校資料7 {
    --font-size: 1rem;
    --font-color: #FFFFFF;
    --animation-duration: 0.5s;
    --max-width: 1000px;
    --school-logo-name-width: 30%;
    --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: 30%;
    --text-enlarge-hover: scale(1.1);
    --map-column-width: 400px;

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

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

    .mp學校資料7 .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學校資料7 .schoolLogo {
        max-height: var(--school-logo-height);
        filter: var(--school-logo-shadow);
    }

    .mp學校資料7 .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學校資料7 .schoolName02 {
        display: block;
        /* 2024-11-02 */
        transition: all var(--animation-duration);
    }

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

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

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

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

    .mp學校資料7 .map {
        flex-basis: var(--map-column-width);
        flex-shrink: 0;
        overflow : hidden;
    }

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

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

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

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

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

    .mp學校資料7 .map {
        padding: 0 1em 1em 1em;

    }

    .mp學校資料7 .map iframe
    {
        max-width : 100%;
    }

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

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

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

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

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

    .mp學校資料7 .textInfo {
        padding: 0 1em 1em 1em;
      display : flex;
      flex-wrap: wrap;
      flex-direction: row;
    }
  
  .mp學校資料7 .textInfo > div
  {
    flex-basis : 50%;
  }

    .mp學校資料7 .map {
        padding: 0 1em 1em 1em;
      text-align : center;
    }

}

@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) {
}