@media screen and (min-device-width: 900px) {
    #main-map{
        display: flex;
        flex-wrap: wrap;
        padding: 10.5vw 0;
        justify-content: center;
        background-image: url(../svg/map.svg);
        background-size: 70%;
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
    }
    #main-map h1{
        width: 100vw;
        font-size: 5vw;
        text-align: center;
        margin: 3vw 0;
        color: #333;
    }
    #main-map h1 > a{
        color: #333;
    }
    #main-map a{
        display: block;
    }
    .h2-map{
        width: 30vw;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 1vw;
        align-content: flex-start;
        margin-bottom: 3vw;
    }
    #main-map h2{
        width: 30vw;
        font-size: 3vw;
        text-align: center;
        margin: 1vw 0;
        color: #333;
    }
    #main-map h2 > a{
        color: #333;
    }
    #main-map ul{
        display: flex;
        flex-wrap: wrap;
    }
    #main-map h3{
        width: 30vw;
        font-size: 1.5vw;
        text-align: center;
        margin: 0.3vw 0;
        color: #666;
    }
    #main-map h3 > a{
        color: #666;
    }
    .grade-h3{
        width: 15vw!important;
        display: block;
    }
}





@media screen and (max-device-width: 900px) {
    #main-map{
        display: flex;
        flex-wrap: wrap;
        padding: 30vw 0;
        justify-content: center;
        background-image: url(../svg/map.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
    }
    #main-map h1{
        width: 90vw;
        font-size: 10vw;
        line-height: 12vw;
        text-align: center;
        margin: 8vw 0;
    }
    #main-map a{
        color: #333333;
        display: block;
    }
    .h2-map{
        width: 90vw;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 3vw;
        align-content: flex-start;
        margin-bottom: 9vw;
    }
    #main-map ul{
        display: flex;
        flex-wrap: wrap;
    }
    #main-map h2{
        width: 90vw;
        font-size: 6.5vw;
        line-height: 6.5vw;
        text-align: center;
        margin: 3vw 0;
    }
    #main-map h3{
        width: 90vw;
        font-size: 4.2vw;
        text-align: center;
        margin: 2vw 0;
    }
    #main-map h3 > a{
        color: #666;
    }
    .grade-h3{
        width: 45vw!important;
        display: block;
    }
}