@import url(https://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

body {
    margin: 0;
    padding: 0;
}

.content {
    display: inline-block;
    width: 100%;
    border: 0px solid blue;
    margin: 0 auto;
    padding: 15px 0;
}

.content img {
    max-width: 100%;
}

.container {
    width: 1100px;
    border: 0px solid blue;
    margin: 0 auto;
    padding: 0px;
}

.row {
    display: inline-block;
    width: 100%;
}


#overlay {
    position: absolute;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 999998;
    display: none;
}

.sidr-open #overlay {
    display: block;
}

.menu {
    width: 50%;
    text-align: right;
    right: 10px;
    float: left;

}

.menu ul li {
    display: inline-block;
    padding: 15px 40px;
}

.menu ul li a {
    float: right;
    font-family: 'Raleway', sans-serif;
    text-decoration: none;
    color: #5a5a5a;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease-in;
    -moz-transition: color 0.3s ease-in;
    -o-transition: color 0.3s ease-in;
    -webkit-transition: color 0.3s ease-in;
    -ms-transition: color 0.3s ease-in;
}

.menu ul li a:hover {
    color: #1C97CA;
}


.menu1 {
    position: relative;
    text-align: left;
    top: 10px;
    left: 30px;
    float: left;
}

.memu1 img {
    max-width: 50%;
}

.menu2 {
    position: relative;
    vertical-align: bottom;
    text-align: right;
    top: 30px;
    right: 20px;
    float: right;
}

.menu2 ul li {
    display: inline-block;
    padding: 15px 15px;
}

.menu2 ul li a {
    /* float: right; */
    font-family: 'Raleway', sans-serif;
    text-decoration: none;
    color: #5a5a5a;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease-in;
    -moz-transition: color 0.3s ease-in;
    -o-transition: color 0.3s ease-in;
    -webkit-transition: color 0.3s ease-in;
    -ms-transition: color 0.3s ease-in;
}

.menu2 ul li a:hover {
    color: #1C97CA;
}


.responsive-menu-button {
    /*	float: right;*/
    /*	padding: 10px 10px;*/
    position: absolute;
    right: 10px;
    top: 10px;
}

#mobile-header {
    display: none;
}




ul,
li {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    font-family: 'Raleway', sans-serif;
}

ol,
ul {
    list-style: none;
}

.black {
    background-color: #0c0c0c;
}

.gray {
    background-color: #eee9e7;
}

.lightgray {
    background-color: #f6f6f6;
}

.pink {
    background-color: #e0d5ee;
}

.violet {
    background-color: #6d5cc7;
}

.purple {
    background-color: #ad48ae;
}


.hidden {
    display: none;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.margin-top-10 {
    margin-top: 10px;
}

.pd-0 {
    padding: 0px;
}

.pt-10 {
    padding-top: 10px;
}

.pt-20 {
    padding-top: 20px;
}

.pt-30 {
    padding-top: 30px;
}

.pt-40 {
    padding-top: 40px;
}

.pt-50 {
    padding-top: 50px;
}

.pt-55 {
    padding-top: 55px;
}

.pt-60 {
    padding-top: 60px;
}

.pt-70 {
    padding-top: 70px;
}

.pt-80 {
    padding-top: 70px;
}

.pt-90 {
    padding-top: 90px;
}

.pt-100 {
    padding-top: 100px;
}

.pt-120 {
    padding-top: 120px;
}


.pb-10 {
    padding-bottom: 10px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pb-40 {
    padding-bottom: 40px;
}

.pb-50 {
    padding-bottom: 50px;
}





/*대학입학*/
.university-entrance {
    margin-left: 30px;
    font-size: 26px;
    color: #595757;
}

.university-entrance h1 {
    font-size: 38px;
}

.university-entrance h1 span {
    color: #6142c3;
}


/*대학편입*/
.university-transfer {
    /* margin-left: 30px; */
    font-size: 21px;
    color: #ded9f7;
    width: 95%;
    margin: 0px auto;
    display: block;
}

.university-transfer h1 {
    font-size: 38px;
    color: #ffffff;
}

.university-transfer h1 span {
    color: #9ebfd1;
}


/*어학연수*/
.university-language {
    margin-left: 30px;
    font-size: 21px;
    color: #595757;
    width: 95%;
    margin: 0px auto;
    display: block;
}

.university-language h1 {
    font-size: 38px;
    color: #3f3f3f;
}

.university-language h1 span {
    color: #6142c3;
}

/*조기유학*/
.university-early {
    margin-left: 30px;
    font-size: 21px;
    color: #595757;
}

.university-early h1 {
    font-size: 38px;
    color: #3f3f3f;
}

.university-early h1 span {
    color: #6142c3;
}

/*특별프로그램*/
.university-special {
    margin-left: 30px;
    font-size: 21px;
    color: #595757;
}

.university-special h1 {
    font-size: 38px;
    color: #ffffff;
}

.university-special h1 span {
    color: #ffd1ea;
}






/* grid1 */
.grid1 {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center;
    width: 95%;
    /* height: 430px; */
    margin: 0 auto;
    text-align: left;
}

.grid1 a {
    padding: 0px 25px 30px 25px;
    border-radius: 10px;
    text-decoration: none;
}

.grid1 a:nth-child(1) {
    background-color: #6142c3;
}

.grid1 a:nth-child(2) {
    background-color: #5ba29e;
}

.grid1 a:nth-child(3) {
    background-color: #ad48ae;
}

.grid1 a p {
    color: #ffffff;
    font-size: 40px;
    font-weight: 500;
}

.grid1 ul li {
    color: #ffffff;
    font-size: 20px;
    line-height: 30px;
    text-indent: -15px;
    padding-left: 15px;
}

.grid1 ul li:before {
    content: '- ';
}

/* grid-desk */
.grid-desk {
    display: grid;
    width: 95%;
    /* height: 320px; */
    margin: 0 auto;
    /* text-align: left; */
    /* color: #626165; */
    /* font-size: 22px; */
}

.grid-desk div {
    padding: 40px 15px 40px 40px;
    border-radius: 10px;
    background-color: #ffffff;
    border: 1px solid #ffffff;
    position: relative;
    color: #ffffff;
    text-align: left;
}

.grid-desk div h1 {
    color: #3f3f3f;
    font-size: 36px;
    font-weight: 600;
    line-height: 30px;
}

.grid-desk div h1 b {
    color: #6142c3;
}

.grid-desk div h1 span {
    color: #ad48ae;
}

.grid-desk div p {
    color: #a2a2a2;
}

.grid-desk div p b {
    color: #403f3f;
}

.grid-desk div h2 {
    font-weight: 500;
    color: #242424;
    line-height: 10px;
}

.grid-desk div .img {
    position: absolute;
    width: 500px;
    right: 20px;
    bottom: 20px;
    /* border: 1px solid red; */
    padding: 0px;
}

.grid-desk div img {
    border: 0px;
}



/* grid-contact1 */
.grid-contact1 {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr 1.28fr;
    justify-content: center;
    width: 95%;
    /* height: 320px; */
    margin: 0 auto;
    /* text-align: left; */
    /* color: #626165; */
    /* font-size: 22px; */
}


/* grid-entrance */
.grid-entrance {
    display: grid;
    gap: 31px;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    width: 95%;
    /* height: 320px; */
    margin: 0 auto;
    text-align: left;
    color: #626165;
    font-size: 22px;
}


.grid-entrance div {
    padding: 3px 3px 3px 3px;
}


.grid-entrance div h1 {
    font-size: 40px;
    color: #ad48ae;
    position: relative;
}

.grid-entrance div h1 .bar {
    position: absolute;
    width: 66px;
    height: 1.5px;
    top: 35px;
    left: 55px;
    background-color: #ad48ae;
}

.grid-entrance div h2 {
    font-size: 24px;
    font-weight: 500;
    color: #000000;
}

.grid-entrance div h3 {
    font-size: 20px;
    font-weight: 500;
    color: #000000;
}

.grid-entrance div p {
    font-size: 19px;
    color: #717070;
}





/* grid-transfer */
.grid-transfer {
    display: grid;
    gap: 25px;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    width: 95%;
    /* height: 275px; */
    margin: 0 auto;
    text-align: left;
    color: #626165;
    font-size: 22px;
}

.grid-transfer div {
    padding: 0px 30px 0px 25px;
    border-radius: 10px;
    background-color: #f6f6f6;
    position: relative;
}


.grid-transfer img {
    margin: 20px auto 20px;
    text-align: center;
    display: block;
}

.grid-transfer h1 {
    font-size: 30px;
    color: #261574;
    text-align: center;
}

.grid-transfer p {
    font-size: 22px;
    color: #626165;
    text-align: center;
}




/* grid-prestigious */
.grid-prestigious div {
    padding: 30px 15px 40px 40px;
    border-radius: 10px;
    background-color: #f3a764;
    border: 1px solid #f3a764;
    position: relative;
    color: #ffffff;
    text-align: left;
}

.grid-prestigious div h1 {
    color: #ffffff;
    font-size: 22px;
    font-weight: 600;
    line-height: 30px;
}

.grid-prestigious div ul li {
    color: #faebd9;
    font-size: 20px;
    list-style: inside;
}


.grid-prestigious div img {
    position: absolute;
    width: 130px;
    right: 80px;
    bottom: 30px;
}



/* grid-language */
.grid-language {
    display: grid;
    gap: 31px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-content: center;
    width: 95%;
    /* height: 320px; */
    margin: 0 auto;
    text-align: left;
    color: #626165;
    font-size: 22px;
}


.grid-language div {
    padding: 3px 3px 3px 3px;
    border-radius: 10px;
}

.grid-language div.area:nth-child(1) {
    background-color: #ffffff;
    border: 3px solid #ad48ae;
}

.grid-language div.area:nth-child(2) {
    background-color: #ffffff;
    border: 3px solid #6d5cc7;
}

.grid-language div.area:nth-child(3) {
    background-color: #ffffff;
    border: 3px solid #5ba29e;
}

.grid-language div.area:nth-child(4) {
    background-color: #ffffff;
    border: 3px solid #f3a764;
}

.grid-language div.area:nth-child(1) .h1 {
    color: #ffffff;
    font-size: 26px;
    font-weight: 600;
    text-align: center;
    background-color: #ad48ae;
    padding: 10px 0px 10px 0px;
    border-radius: 10px 10px 0px 0px;
    margin: -4px -6px 0px -6px;
}

.grid-language div.area:nth-child(2) .h1 {
    color: #ffffff;
    font-size: 26px;
    font-weight: 600;
    text-align: center;
    background-color: #6d5cc7;
    padding: 10px 0px 10px 0px;
    border-radius: 10px 10px 0px 0px;
    margin: -4px -6px 0px -6px;
}

.grid-language div.area:nth-child(3) .h1 {
    color: #ffffff;
    font-size: 26px;
    font-weight: 600;
    text-align: center;
    background-color: #5ba29e;
    padding: 10px 0px 10px 0px;
    border-radius: 10px 10px 0px 0px;
    margin: -4px -6px 0px -6px;
}

.grid-language div.area:nth-child(4) .h1 {
    color: #ffffff;
    font-size: 26px;
    font-weight: 600;
    text-align: center;
    background-color: #f3a764;
    padding: 10px 0px 10px 0px;
    border-radius: 10px 10px 0px 0px;
    margin: -4px -6px 0px -6px;
}

.grid-language div.box {
    background-color: #ffffff;
    padding: 3px 14px 10px 17px;
    /* height: 78%; */
    border-radius: 0px;
    border-radius: 0px 0px 10px 10px;
    font-size: 16px;
    color: #626165;
}

.grid-language div.box p {
    font-size: 20px;
    font-weight: 600;
}

.grid-language div.box p span {
    font-size: 15px;
    font-weight: 600;
}


/* grid-graduate */
.grid-graduate {
    display: grid;
    gap: 0px;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    margin: 0 auto;
    text-align: left;
}

.grid-graduate div:nth-child(1) {
    background-image: url('/haot1/img/img12-1.png');
    background-repeat: no-repeat;
    width: 100%;
}

.grid-graduate div:nth-child(2) {
    background-color: #5ba29e;
    padding: 30px 60px 180px 60px;
}

.grid-graduate div {
    color: #ffffff;
}

.grid-graduate div h1 {
    font-size: 36px;
    color: #ffffff;
}

.grid-graduate div h1 span {
    color: #160646;
}

.grid-graduate h2 {
    font-size: 28px;
    font-weight: 500;
}

.grid-graduate h2 span {
    font-size: 28px;
    color: #e1f7f6;
}

.grid-graduate div p {
    font-size: 22px;
    color: #e4f9f8;
    line-height: 28px;
}



/* grid-early */
.grid-early {
    display: grid;
    gap: 25px;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center;
    width: 95%;
    /* height: 237px; */
    margin: 0 auto;
    text-align: left;
    color: #626165;
    font-size: 22px;
}

.grid-early div {
    padding: 0px 30px 20px 25px;
    border-radius: 10px;
    background-color: #f6f6f6;
    position: relative;
}

.grid-early div p {
    font-size: 22px;
    font-weight: 600;
}

.grid-early div b {
    color: #010101;
    font-size: 22px;
    font-weight: 600;
}

.grid-early div span {
    font-size: 16px;
}

.grid-early div:nth-child(1) div.bar {
    position: absolute;
    border: 1px solid #86b03e;
    background-color: #86b03e;
    border-radius: 10px;
    width: 70px;
    height: 4px;
    right: 30px;
    bottom: 10px;
    padding: 0px;
}

.grid-early div:nth-child(2) div.bar {
    position: absolute;
    border: 1px solid #683eb0;
    background-color: #683eb0;
    border-radius: 10px;
    width: 70px;
    height: 4px;
    right: 30px;
    bottom: 10px;
    padding: 0px;
}

.grid-early div:nth-child(3) div.bar {
    position: absolute;
    border: 1px solid #339eba;
    background-color: #339eba;
    border-radius: 10px;
    width: 70px;
    height: 4px;
    right: 30px;
    bottom: 10px;
    padding: 0px;
}



/* grid-special */
.grid-special {
    display: grid;
    gap: 35px;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    width: 95%;
    /* height: 630px; */
    margin: 0 auto;
    text-align: left;
    color: #626165;
    font-size: 20px;
}

.grid-special div {
    padding: 0px 30px 20px 25px;
    border-radius: 10px;
    background-color: #ffffff;
}

.grid-special div p {
    color: #010101;
    font-size: 30px;
    font-weight: 600;
}

.grid-special div span {
    font-size: 16px;
}



/* grid-contact2 */
.grid-contact2 {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1.02fr;
    justify-content: center;
    width: 95%;
    /* height: 320px; */
    margin: 0 auto;
    /* text-align: left; */
    /* color: #626165; */
    /* font-size: 22px; */
}

/* grid-map */
.grid-map {
    display: grid;
    gap: 35px;
    grid-template-columns: 1fr;
    justify-content: center;
    width: 95%;
    /* height: 630px; */
    margin: 0 auto;
    text-align: left;
    color: #626165;
    font-size: 20px;
}

.grid-map div {}

.grid-map div h1 {
    font-size: 20px;
    color: #000000;
    margin-bottom: 3px;
}

.grid-map div span {
    font-size: 16px;
    color: #6e7079;
}

.grid-map div p {
    font-size: 16px;
    font-weight: 600;
    margin-top: 3px;
    color: #6e7079;
}

.grid-map .area {
    display: inline;
}

.grid-map .line2 {
    display: inline-block;
    padding: 2px 10px 2px 10px;
    border: 1px solid #399c12;
    border-radius: 5px;
    background-color: #399c12;
    font-size: 14px;
    font-weight: 500;
    margin-top: 3px;
    color: #ffffff;
    text-align: center;
    width: 60px;
}

.grid-map .line2info {
    display: inline;
}

.grid-map .linebundang {
    display: inline-block;
    padding: 2px 10px 2px 10px;
    border: 1px solid #9d353f;
    border-radius: 5px;
    background-color: #9d353f;
    font-size: 14px;
    font-weight: 500;
    margin-top: 3px;
    color: #ffffff;
    text-align: center;
    width: 60px;
}

.grid-map .linebundanginfo {
    display: inline;
}

.grid-map div p.info {
    font-size: 14px;
    font-weight: 500;
    margin-top: 5px;
    margin-left: 77px;
    color: #898a90;
}

.copyright img {
    max-width: 80%;
}


.copyright {
    display: inline-block;
    width: 100%;
    border: 0px solid blue;
    margin: 0 auto;
    background-color: #727272;
}

.copyright .cont {
    padding: 27px;
}

.copyright h1 {
    font-size: 30px;
    color: #b8b8b8;
}


.copyright p {
    font-size: 14px;
    color: #b8b8b8;
}



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

@media (max-width: 1100px) {
    .container {
        width: 100%;
        padding: 0px;
        margin: 0;
    }


    #mobile-header {
        display: block;
    }

    #navigation {
        display: none;
    }

    .menu1 img {
        max-width: 70%;
        margin-bottom: 15px;
    }

    .university-entrance {
        margin-left: 10px;
        font-size: 12px;
    }

    .university-entrance h1 {
        font-size: 16px;
    }

    .university-transfer {
        /* margin-left: 10px; */
        font-size: 12px;
    }

    .university-transfer h1 {
        font-size: 16px;
    }

    .university-language {
        /* margin-left: 10px; */
        font-size: 12px;
    }

    .university-language h1 {
        font-size: 16px;
    }

    .university-early {
        margin-left: 10px;
        font-size: 12px;
    }

    .university-early h1 {
        font-size: 16px;
    }

    .university-special {
        margin-left: 10px;
        font-size: 12px;
    }

    .university-special h1 {
        font-size: 16px;
    }



    .grid1 {
        display: grid;
        gap: 10px;
        grid-template-columns: 1fr;
        justify-content: center;
        width: 95%;
        /* height: 540px; */
        margin: 0 auto;
        text-align: left;
    }

    /* .grid1 div {
        padding: 0px 25px 30px 25px;
    } */

    .grid1 a p {
        color: #ffffff;
        font-size: 20px;
        font-weight: 500;
    }

    .grid1 ul li {
        color: #ffffff;
        font-size: 14px;
        line-height: 18px;
        text-indent: -10px;
        padding-left: 10px;
    }


    .grid-desk {
        display: grid;
        width: 95%;
        height: 300px;
    }

    .grid-desk div {
        padding: 10px 15px 40px 10px;
        border-radius: 10px;
        background-color: #ffffff;
        border: 1px solid #ffffff;
        position: relative;
        color: #ffffff;
        text-align: left;
    }

    .grid-desk div h1 {
        font-size: 18px;
    }

    .grid-desk div p {
        font-size: 14px;
    }

    .grid-desk div h2 {
        font-size: 18px;
        line-height: 20px;
    }

    .grid-desk div .img {
        position: absolute;
        width: 50%;
        right: 10px;
        bottom: 0px;
    }




    .grid-entrance {
        display: grid;
        gap: 0px;
        grid-template-columns: 1fr;
        justify-content: center;
        width: 95%;
        height: 380px;
        margin: 0 auto;
        text-align: left;
        color: #626165;
        font-size: 22px;
    }


    .grid-entrance div h1 {
        font-size: 20px;
        color: #ad48ae;
        position: relative;
    }

    .grid-entrance div h1 .bar {
        position: absolute;
        width: 66px;
        height: 1.5px;
        top: 18px;
        left: 30px;
        background-color: #ad48ae;
    }

    .grid-entrance div h2 {
        font-size: 18px;
        font-weight: 500;
        color: #000000;
    }

    .grid-entrance div h3 {
        font-size: 14px;
        font-weight: 500;
        color: #000000;
    }

    .grid-entrance div p {
        font-size: 12px;
        color: #717070;
    }





    .grid-transfer {
        display: grid;
        gap: 10px;
        grid-template-columns: 1fr;
        justify-content: center;
        width: 95%;
        margin: 0 auto;
        text-align: left;
        color: #626165;
        font-size: 22px;
    }

    .grid-transfer div {
        padding: 0px 30px 0px 25px;
        border-radius: 10px;
        background-color: #f6f6f6;
        position: relative;
    }


    .grid-transfer img {
        width: 100px;
        display: block;
        margin: 10px auto;
    }

    .grid-transfer h1 {
        font-size: 20px;
    }

    .grid-transfer p {
        font-size: 12px;
    }







    .grid-prestigious div {
        padding: 15px 10px 80px 10px;
        border-radius: 10px;
        background-color: #f3a764;
        border: 1px solid #f3a764;
        position: relative;
        color: #ffffff;
        text-align: left;
        margin: 0px 10px 0px;
    }

    .grid-prestigious div h1 {
        color: #ffffff;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
    }

    .grid-prestigious div ul li {
        color: #faebd9;
        font-size: 14px;
        list-style: inside;
    }


    .grid-prestigious div img {
        position: absolute;
        width: 70px;
        right: 20px;
        bottom: 10px;
    }









    .grid-language {
        display: grid;
        gap: 8px;
        grid-template-columns: 1fr 1fr;
        justify-content: center;
        width: 95%;
        height: 400px;
        margin: 0 auto;
        text-align: left;
        font-size: 22px;
    }

    .grid-language div {
        padding: 3px 5px 3px 3px;
    }


    .grid-language div.area:nth-child(1) .h1,
    .grid-language div.area:nth-child(2) .h1,
    .grid-language div.area:nth-child(3) .h1,
    .grid-language div.area:nth-child(4) .h1 {
        font-size: 16px;
    }




    .grid-language div.box {
        font-size: 12px;
    }

    .grid-language div.box p {
        font-size: 14px;
    }

    .grid-language div.box p span {
        font-size: 12px;
    }

    .grid-graduate {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: center;
        /* height: 400px; */
        margin: 0 auto;
        text-align: left;
    }


    .grid-graduate div:nth-child(1) {
        /* padding: 120px; */
        background-position: 80% 10%;
        height: 200px;
    }

    .grid-graduate div:nth-child(2) {
        padding: 20px;
    }

    .grid-graduate div h1 {
        font-size: 26px;
    }

    .grid-graduate h2 {
        font-size: 18px;
    }

    .grid-graduate h2 span {
        font-size: 18px;
    }

    .grid-graduate div p {
        font-size: 12px;
        line-height: 18px;
    }






    .grid-early {
        display: grid;
        gap: 10px;
        grid-template-columns: 1fr;
        justify-content: center;
        width: 95%;
        height: 400px;
        margin: 0 auto;
        text-align: left;
        font-size: 12px;
    }

    .grid-early div p {
        font-size: 14px;
    }


    .grid-early div b {
        font-size: 14px;
    }

    .grid-early div span {
        font-size: 10px;
    }




    .grid-special {
        display: grid;
        gap: 10px;
        grid-template-columns: 1fr;
        justify-content: center;
        width: 95%;
        margin: 0 auto;
        text-align: left;
        font-size: 12px;
    }

    .grid-special div p {
        font-size: 14px;
    }

    .grid-special div span {
        font-size: 10px;
    }




    .grid-map div h1 {
        font-size: 16px;
    }

    .grid-map div span {
        font-size: 14px;
    }

    .grid-map div p {
        font-size: 12px;
    }

    .grid-map .line2 {
        font-size: 10px;
    }


    .grid-map .linebundang {
        font-size: 10px;
    }

    .grid-map .linebundanginfo {
        display: inline;
    }

    .grid-map div p.info {
        font-size: 12px;
        font-weight: 500;
        margin-left: 0px;
    }




    .pt-10 {
        padding-top: 5px;
    }

    .pt-20 {
        padding-top: 10px;
    }

    .pt-30 {
        padding-top: 15px;
    }

    .pt-40 {
        padding-top: 20px;
    }

    .pt-50 {
        padding-top: 25px;
    }

    .pt-60 {
        padding-top: 30px;
    }

    .pt-70 {
        padding-top: 35px;
    }

    .pt-80 {
        padding-top: 40px;
    }

    .pt-90 {
        padding-top: 45px;
    }

    .pt-100 {
        padding-top: 50px;
    }

    .pt-110 {
        padding-top: 55px;
    }

    .pt-120 {
        padding-top: 60px;
    }
}

@media (max-width: 660px) {

    .container {
        width: 100%;
        padding: 0px;
        margin: 0;
    }


    .pt-10 {
        padding-top: 3px;
    }

    .pt-20 {
        padding-top: 7px;
    }

    .pt-30 {
        padding-top: 13px;
    }

    .pt-40 {
        padding-top: 17px;
    }

    .pt-50 {
        padding-top: 23px;
    }

    .pt-60 {
        padding-top: 27px;
    }

    .pt-70 {
        padding-top: 33px;
    }

    .pt-80 {
        padding-top: 37px;
    }

    .pt-90 {
        padding-top: 43px;
    }

    .pt-100 {
        padding-top: 47px;
    }

    .pt-110 {
        padding-top: 53px;
    }

    .pt-120 {
        padding-top: 57px;
    }

}