@charset "utf-8"; 
@font-face { font-family: 'Youth'; font-style: normal; font-weight: 400; src: url('//cdn.jsdelivr.net/korean-webfonts/1/orgs/othrs/kywa/Youth/Youth.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/orgs/othrs/kywa/Youth/Youth.woff') format('woff'); } 

.info_gra {width: 100%;}
.info_gra_m {display:none;}

.wrapB {width: 1200px; margin: 0 auto}
.map_info .center img {width: auto}
#map-area {float: left;margin-top: 85px;margin-bottom: 50px;}

/*popup*/
.default {    
    position: absolute;
    top: 50%;
    margin-top: 112px;
    right: -24px;
    width: 292px;
    height: 356px;
    border-radius: 10px;
    border: 4px solid #fff;
    text-align: center;
    color: #fff;
    background-color: rgba(255,255,255,0.1);
    display: table;
    box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.3);
}
.default .middle {display: table-cell;vertical-align: middle;}
.default p {font-size: 1.5em; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); font-family: 'Youth', sans-serif; }
.mapPopup {border-radius: 10px;min-height: 365px;height: auto;border:  none;width: 310px;right: -32px;}
.mapPopup img {width: 100%; margin: 0; border-radius: 10px 10px 0 0}
.mapPopup h5 {font-size: 1.125em;margin-top: 8px;}
.mapPopup p:nth-of-type(1) {color: #9F9F9F; font-size: 0.938em;}
.mapPopup p:nth-of-type(2) {color: #333;padding-bottom: 20px;width:  80%;margin:  0 auto;padding: 15px 0 20px 0;}
.scroll {height: auto; overflow-y: hidden}
.mapPopup .btnList {display: none}
.mapPopup .btnList a {border-radius: 0 0 10px 10px;}


@media (max-width: 425px){
    .wrap {width:100%;}
    .info_gra{display: none;}
    .info_gra_m{display: block; width: 320px; margin: 0 auto;}
    .info_gra_m img{width: 100%;}
    .mapPopup {margin: 0 7%; top: 100px; right: 0; margin-top: 0}
}

@media screen and (max-width: 960px) { 
    .junbukMap {width: 320px;}
    .mapPopup p:nth-of-type(2) {line-height: 1.5em;}
    .mapPopup .close { width: 30%; float: left; height: 44px; border-top: 1px solid #ddd; color: #666; line-height: 44px; font-size: 0.9em; display: block}
    .mapPopup .btnList a {width: 70%; height: 46px; text-align: center; color: #fff; background: #447349; display: block; float: right; line-height: 46px; font-size: 0.9em;}
}


@media all and (max-width: 1024px) {
    .map2018 {height: auto;}    
    .info_gra_m {width: 100%}
    .default {display: none}   
    .wrapB {width: 90%; mrgin-bottom: 0}
    .map_info .center img {width: auto;}
    #map-area {float: none; margin: 60px 0; width: 100%; height: auto;}
    .map_info {margin-bottom: 0}
    .info_gra_m .title p {text-align: center; width: 85%; margin: 0 auto;}
    .mapPopup .btnList a {border-radius: 0 0 10px 0;}
    .mapPopup {top: -60px; max-height: inherit; min-height: 100%; left: 50%;
    margin-left: -150px;
    box-shadow: 2px 3px 8px rgba(0,0,0,0.4);} 
    .mapPopup p:nth-of-type(2) {height: 80px; margin-bottom: 30px; padding-bottom: 0}
    .mapPopup .btnList {position: static}
    .mapPopup .btnList {display: block}
    .scroll {overflow-y: auto}   
}