@charset "utf-8";
@import url("/font/org/GmarketSans/fonts.css");

.customoverlay {position:relative;bottom:85px;border-radius:6px;border: 1px solid #ccc;border-bottom:2px solid #ddd;float:left;}
.customoverlay:nth-of-type(n) {border:0; box-shadow:0px 1px 2px #888; }
.customoverlay a {display:block;text-decoration:none;color:#000;text-align:center;border-radius:6px;font-size:14px;font-weight:bold;overflow:hidden;background: #d95050;background: #d95050 url(/images/org/ap/btn_search_h.png) no-repeat right 8px center;}
.customoverlay .title {display:block;text-align:center;background:#fff;margin-right:35px;padding:10px 15px;font-size:14px;font-weight:bold;}
.customoverlay:after {content:'';position:absolute;margin-left:-12px;left:50%;bottom:-12px;width:22px;height:12px;background:url('/images/org/web/apple/content_bottom.png')}


.etcBtn {text-align: center;}
 /* 210323 폐교학교현황 */
.school_map .mapBox { padding:1.9rem 0; border:1px solid #d2d2d2; text-align:center;  font-family:'GmarketSans'; font-weight:400;} /* 210326 폰트 수정 */
.school_map .mapBox .map { display:inline-block; position:relative; }
.school_map .mapBox img { max-width:100%; vertical-align:middle; }
.school_map .mapBox li { position:absolute; text-shadow:-1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; }
.school_map .mapBox .area1 {left: 21%;top: 9%;}
.school_map .mapBox .area2 {left: 11%;top: 25%;}
.school_map .mapBox .area3 {left: 33%;top: 25%;}
.school_map .mapBox .area4 {top: 41%;left: 19%;}
.school_map .mapBox .area5 {left: 16%;bottom: 30%;}
.school_map .mapBox .area6 {right: 41%;top: 29%;}
.school_map .mapBox .area7 {left: 40%;top: 39%;}
.school_map .mapBox .area8 {left: 34%;top: 54%;}
.school_map .mapBox .area9 {left: 27%;bottom: 29%;}
.school_map .mapBox .area10  {left: 21%;bottom: 6%;}
.school_map .mapBox .area11  {left: 48%;top: 48%;}
.school_map .mapBox .area12  {right: 50%;bottom: 24%;}
.school_map .mapBox .area13  {right: 26%;top: 31%;}
.school_map .mapBox .area14  {right: 33%;top:52%;}
.school_map .mapBox .area15  {right: 11%;top: 37%;}
.school_map .mapBox .area16  {right: 21%;top: 48%;}
.school_map .mapBox .area17  {right: 32%;bottom: 14%;}
.school_map .mapBox .area18 {left: 47%;bottom: 10%;}
.school_map .mapBox li a { display:block; position:relative; z-index:1; width:100%; height:100%; padding:0.5rem; font-weight:400; font-size:1rem; color:#000; }
.school_map .mapBox li a.no_link { pointer-events:none; }
.school_map .mapBox li a::selection { background:#000; color:#fff; text-shadow:none; }

body { background-color:#ffffff; }
#popupWrap {border-left:0px solid #dad9d9;border-right:0px solid #dad9d9;}

@media screen and (min-width: 749px) { 
	.school_map .mapBox li a:not(.no_link):before { content:""; display:block; position:absolute; bottom:0.2rem; left:0; right:0; z-index:-1; -webkit-transform:scaleX(0); -ms-transform:scaleX(0); transform:scaleX(0); width:80%; height:3px; margin:0 auto; background:#176ecc; -webkit-transition:all 0.2s; -ms-transition:all 0.2s; transition:all 0.2s; }
	.school_map .mapBox li a:not(.no_link):hover:before,
	.school_map .mapBox li a:not(.no_link):focus:before { transform:scaleX(1); }
}

@media screen and (max-width: 748px){
    
	.school_map .mapBox { padding:1.3rem 0; border:0; }
	.school_map .mapBox img { display:none; }
	.school_map .mapBox ul { font-size:0; text-align:left; }
	.school_map .mapBox .map ul li { display:inline-block; position:relative; top:auto; bottom:auto; left:auto; right:auto; width:16.66%; text-shadow:none; vertical-align:top; }
	.school_map .mapBox li a { width:auto; margin:2px; padding:0.5rem; border:1px solid #999; line-height:1; text-align:center; -webkit-transition:all 0.2s; -ms-transition:all 0.2s; transition:all 0.2s; }
	.school_map .mapBox li a:hover,
    .school_map .mapBox li a:focus { border-color:#176ecc; background:#176ecc; box-shadow:0 0 10px rgba(0,0,0,0.3); color:#fff; }
}

@media screen and (max-width:700px) {
	.school_map .mapBox .map ul li { width:20%; }
	.school_map .mapBox li a { font-size:0.85rem; }
}

@media screen and (max-width:580px) { 
	.school_map .mapBox .map ul li { width:25%; }
}

@media screen and (max-width:480px) { 
	.school_map .mapBox .map ul li { width:33.3%; }
}