@charset "utf-8";
@font-face {
    src: url("../css/font/강원교육모두-Light.woff");
    font-family:"edu";
}

@font-face {
    font-family: 'GangwonEdu_OTFBoldA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEdu_OTFBoldA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body{
    scroll-behavior: smooth;
    -webkit-overflow-scrolling:touch;
min-height:-webkit-fill-available;
height: fill-available;
}
.mapwrap{
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 11%;
    padding-bottom: 10%;
}
.mapwrap .bg09,.mapwrap .bg10, .mapwrap .bg11{
    position: absolute;
}
.mapwrap .photowrap{
    width: 85%;
    height: auto;
    margin: 0 auto;
    margin-bottom: 5%;
}
.mapwrap .photowrap .flex{
    display: flex;
}
.mapwrap .photowrap .flex img{
    width: 33%;
    filter: none !important;
}
.mapwrap .bg09{
    top: -12%;
    left: 0;
    z-index: -1;
    height: 90%;
}
.mapwrap .bg10{
    top: -7%;
    right: 4%;
}
.mapwrap .bg11{
width: 100%;
    bottom: 0;
 
}
.mapwrap .bg11 img{
    object-fit: cover;
    width: 100%;
    display: inline-block;
}
.mapwrap .bg09 img{
    height: 100%;
object-fit: cover;
}
.mapwrap .photowrap .title{
    margin-bottom: 3%;
}
.mapwrap .photowrap .title h1{
    display: inline-block;
    margin-left: 3%;
    font-size: 40px;
    width: 65%;
}
.mapwrap .photowrap .title span{
    margin-left: 3%;
    font-size: 30px;
}
.mapwrap .photowrap .title img{
    margin-bottom: 0.8%;
}
.mapwrap .photowrap .flex img:nth-child(2){
    width: 25%;
}
.underline{

    width: 95%;
    background-image: url('/images/main/underline.png');
    height: 2px;
    position: absolute;
    bottom: -1%;
    left: 50%;
    transform: translate(-50%,0);
}
.mapwrap .photowrap .title-m{
    display: none;
}
.mapwrap .bg11-m{display: none;}
.mapwrap .photowrap .flex #map{
    margin: 0 2%;
    width: 43%;
}

.mapwrap .photowrap .flex #photo2{
    width: 23%;
}
@media(max-width:768px){
    .mapwrap{
        height: auto;
        padding-bottom: 10%;
    }
   .mapwrap .bg09, .mapwrap .bg10,.mapwrap .bg11{
    display: none;
   } 
   .mapwrap .bg11-m{
    display: block;
    width: 100%;
    position: absolute;bottom: 0;
}
.mapwrap .bg11-m img{
    object-fit: cover;
    width: 100%;
}
   .mapwrap .photowrap .title{
    display: none;
   }
   .mapwrap .photowrap .title-m{
    display: block;
}
.mapwrap .photowrap .title-m h1{
    display: inline-block;
    font-size: 30px;
}
.mapwrap .photowrap .title-m p{
    margin-top: 5%;
    margin-bottom: 5%;
    text-align: center;
    letter-spacing: -0.15px;
    color:#623e2a;
}
.mapwrap .photowrap .title-m img{
    margin-right: 1%;
    margin-bottom: 2%;
}
.mapwrap .photowrap .flex{
    display: block;
}
.mapwrap .photowrap .flex img{
    display: none;
}
.mapwrap .photowrap .flex #map{
    width: 100% !important;
    margin: 0 auto;
    max-height:350px !important;
    height: 350px !important;
}
.underline{
    width: 85%;
}
}
@media(max-width:420px){
    .mapwrap{
        /* height: 67vh; */
        height: auto;
    }
}

@media(max-width:420px) and (min-height:850px){
    .mapwrap{
         /* height: 60vh; */
         height: auto;
    }
}

@media(max-width:390px){

    .mapwrap{
         /* height: 75vh; */
         height: auto;
    }
}
@media(max-width:390px) and (min-height:800px){
    .mapwrap{
         /* height: 63vh; */
         height: auto;
    }
}
@media(max-width:320px){
.mapwrap{
     /* height: 85vh; */
     height: auto;
}
}

@media(max-width:280px){
.mapwrap{
     /* height: 75vh; */
     height: auto;
}
}