@font-face { font-family: 'gsb'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face {
    font-family: 'jn';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* reset */
* { margin:0; padding:0; }
li { list-style:none; }
a { text-decoration: none; }
img { vertical-align: top; }


/* 팝업 */
#hd_pop h2, #hd_pop span { display: none; }
#hd_pop #hd_pops_1 { box-sizing: border-box; font:16px/1.6 ntb; position: absolute; z-index:99; background: #fff; border:1px solid #000; }
#hd_pop #hd_pops_1 .hd_pops_con { padding:20px; text-align: center; word-break: keep-all; }
#hd_pop #hd_pops_1 .hd_pops_con p:last-child { text-align: left; margin-top: 20px; }
#hd_pop #hd_pops_1 .hd_pops_footer { background: #000;}
#hd_pop #hd_pops_1 .hd_pops_footer button { background: #000; color:#fff; font:14px ntr;  border:none; padding:6px 10px;}
#hd_pop #hd_pops_1 .hd_pops_footer button:last-child { float:right;}

/* common */
html.fix { overflow: hidden; }
html, body { height:100vh; }
body { cursor: url(/images/cursor.png), default; height:100vh; }
.wrap { width: 1200px; margin:0 auto; position: relative; }
ul:after, .wrap:after, .cl:after { content:""; clear:both; display:block; }
.fl { display:flex; align-items: center; justify-content: center; flex-direction: column; }
.fl:after { display:none; }
.dn { display: none !important; }

.detail::-webkit-scrollbar{ width:2px;}
.detail::-webkit-scrollbar-track {background-color:rgba(220,220,200,0.1);}
.detail::-webkit-scrollbar-thumb {background-color:rgba(102,102,102,0.5); }

/* intro */
#w_intro { height:100%; position: relative; overflow: hidden; text-align: center; background:url(/images/bg_intro.jpg) no-repeat center/cover; }
#w_intro a { position: relative;}
#w_intro a:after { content:"참여하기"; display:block; width:180px;height:50px; font:20px/50px ntm; color:#fff; background:#3b8cff; position: absolute; left:50%; margin-left:-90px; bottom:70px; }



/* header & footer */
#w_logo { position: absolute; left:30px; top:40px; z-index:50; }
#w_logo img { width:300px; height:auto; }

.khlogo { position: fixed; right:30px; bottom:30px; z-index: 30;}
.khlogo img { height:30px }

#nav_btn { position:fixed; right:0; top:0; width:60px; height:60px; background: #02d4bb; z-index:99; animation: 1.5s nav_ani infinite;}
@keyframes nav_ani {
    0% { background: #02d4bb; }
    25% { background: #5ba645; }
    50% { background: #fd0; }
    75% { background: #6db2e6; }
    100% { background: #02d4bb; }
}

#nav_btn .line{  width: 40px; height: 2px; background-color: #fff; display: block; margin: 8px auto; transition: all 0.3s ease-in-out; position: relative; top:10px; }
#nav_btn:hover{ cursor: pointer;}
#nav_btn.act .line:nth-child(2){ opacity: 0;}
#nav_btn.act .line:nth-child(1){ transform: translateY(10px) rotate(45deg);}
#nav_btn.act .line:nth-child(3){ transform: translateY(-10px) rotate(-45deg);}  

#w_menu { position: fixed; right:-310px; top:0; width:300px; height:100%; background: #fff; box-shadow: -2px 2px 4px rgba(0,0,0,0.4); box-sizing: border-box; padding:0 40px; transition:0.3s; z-index:98;  }
#w_menu.on { right:0; box-sizing: border-box; }
#w_menu h2 { height:60px; padding-top:10px; margin-left: -20px;}
#w_menu h2 img { height:40px; }
#w_menu #gnb { margin-top: 80px; }
#w_menu #gnb > li { padding:20px 0; border-bottom:1px solid #ddd; }
#w_menu #gnb > li:last-child { border-bottom:none; }
#w_menu #gnb > li > a { font:18px ntb; color:#333; }
#w_menu #gnb ul { display: none; }
#w_menu #gnb ul li { margin-top: 10px; }
#w_menu #gnb ul li:before { content:"- "; color:#666; }
#w_menu #gnb ul li a { font:16px ntd; color:#666;  }



.w_quick { position: fixed; right:100px; top:60px; z-index: 50; animation: 2.7s cube infinite; }
.w_quick img { width:100%; }
@keyframes cube {
    0% { top:60px; } 
    50% { top:85px; } 
    100% { top:60px; } 
}
.w_quick.pc a { position: absolute; width:100px; height:100px; }
.w_quick.pc a:nth-of-type(1) { left:31.1%; top:14%; width:99px; height:63px; transform: skew(311deg, 23deg); }
.w_quick.pc a:nth-of-type(2) { left:14.1%; top:55%; width:99px; height:63px; transform: skew(13deg, 28deg); }
.w_quick.pc a:nth-of-type(3) { left:63.1%; top:47%; width:79px; height:63px; transform: skew(7deg, 311deg); }



/* index */
#ytb { width:100%; height:100%; position: fixed; left:0; top:0; margin-left:0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.7); padding:0 3%; box-sizing: border-box; z-index:999; }    
#ytb div { position: relative; }
#ytb img { width:100%; max-height:95%; }
#ytb .y_close { position: absolute; right:0; top:0; width:40px; height:40px; background: #000; }
#ytb .y_close span { font:24px ntl; color:#fff; transform:rotate(45deg); display: block; }
#ytb .btn-close { font:14px ntm; color:#fff; margin-top: 10px; display: block;}
#ytb .btn-close.on {display: block;}
html.fix .b_box { position: fixed; left:0; top:0; z-index:90; background: rgba(0,0,0,0.7); width:100%; height:100%; }

#w_map { height:100%; background: url(/images/bg_blue21.png) no-repeat center/cover; text-align: center; }
#w_map .wrap { display:inline-block; position: relative; height:100%; width:auto; }
#w_map img { height:100%; }
#w_map .point { position:absolute; width:3.5%; height:9%;  }
#w_map .point .area { display:block; height:100%;  /* background: rgba(0,0,0,0.2);   cursor: url(/images/cursor.png), default !important; */}
#w_map .point .arr { background: #fff; border-radius: 8px; width:160px; height:50px; display: block; text-align: center; font:16px/50px ntb; color:#333; position: absolute; top:0; left:50%; margin-left:-80px; transition:0.3s; opacity:0; box-shadow: 2px 2px 4px rgba(0,0,0,0.4); }
#w_map .point .arr.zin { z-index:1; }
#w_map .edu .arr { width:260px; margin-left:-130px;}
#w_map .point:hover .arr { top:-50px; opacity:1; }
#w_map .point .arr:after { content:""; width:10px; height:10px; display:inline-block; border-top:2px solid #333; border-right:2px solid #333; transform:rotate(45deg); margin-left:10px; position: relative; top:-1px; }


#w_map .wb { left:30.9%; top:73%;  } /* 공지사항 */
#w_map .shm { left:39.8%; top:10%; } /* 송해면 */
#w_map .swm { left:54.3%; top:28.2%; } /* 선원면 */
#w_map .bom { left:61%; top:42.8%; } /* 불은면 */
#w_map .ydm { left:49%; top:55.4%; } /* 양도면 */
#w_map .kdm { left:13.2%; top:34.9%; } /* 교동면 */
#w_map .ngm { left:45.7%; top:42.2%; } /* 내가면 */
#w_map .hjm { left:34.1%; top:25.2%; } /* 하점면 */
#w_map .ysm { left:24.3%; top:24%;  } /* 양사면 */
#w_map .khy { left:48.8%; top:16.1%;  } /* 강화읍 */
#w_map .ssm { left:31.2%; top:49.9%; } /* 삼산면 */
#w_map .sdm { left:12.9%; top:43.9%; } /* 서도면 */
#w_map .ksm { left:79.2%; top:46.9%; } /* 길상면 */
#w_map .hdm { left:64.4%; top:62%; } /* 화도면 */
#w_map .edu { display: none; } /* 인천광역시 강화교육지원청 */


#w_map .bro { position: absolute; left:2%; bottom:13%; text-align: left; font:12px/1.6 ntb; padding-left:18px; } 
#w_map .bro:before { content:"※"; position: absolute; left:0;  } /* 화도면 */


/* 온라인 부스 */
.detail { position: fixed; width:calc(100% - 70px); height:100%; left:-105%; top:0; z-index:100; overflow-x:hidden; transition: 0.7s; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#eeefef+0,ffffff+100 */
background: #eeefef; /* Old browsers */
background: -moz-linear-gradient(top,  #eeefef 0%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #eeefef 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #eeefef 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeefef', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
 }
.detail.on { left:0; }
.detail .box { width:1400px; margin:60px auto; }
.detail .box > div { position: relative; background: #fff; }
.detail .shadow { background: none !important; text-align: center; width:97%; margin:0 auto ;}
.detail .shadow img { width:100%; }

.detail .top { padding:40px 40px 20px; }
.detail .top h2 { font:54px ntb; color:#111;  justify-content: flex-start; flex-direction: row; }
.detail .top h2 img { height: 80px; margin-right: 10px;  }
.detail .top ul { padding-left:400px; padding-top:20px; box-sizing: border-box; display: none; }
.detail .top ul li { float:left; font:16px jn; color:#666; flex-direction: row; justify-content: flex-start; margin:0 0 30px 0; position: relative; padding-left:50px; box-sizing: border-box; width: 100%; flex-wrap:wrap; }
.detail .top ul li.w50 { width: 50%; }
.detail .top ul li img { position: absolute; left:0; height: 40px; }
.detail .top ul li a { color:inherit; display: inline-block; }
.detail .top ul li.a2 a { width: 40%; margin-right:20px;  }
.detail .top ul li.a3 a { width: 30%; margin-right:20px; }

.detail .booth { width:100%; }
.detail .ment { position: absolute; left:40px; top:140px; color:#fff; font:20px/1.8 ntm; width: 44%; word-break: keep-all; }

.detail .school { background: #00a0e9 !important; padding:40px 40px 60px; flex-direction: row; justify-content: flex-start; }
.detail .school > img { width:480px; }
.detail .school ul { position: relative; padding-left:60px; margin-left: 40px;  }
.detail .school ul:before { height:calc(100% - 20px); position: absolute; top:10px; left:0; border-left:8px solid #fff; content:""; }
.detail .school ul li { color:#fff; font:20px/1.6 ntm; flex-direction: row; justify-content: flex-start; border-bottom:1px solid rgba(255,255,255,0.4); padding:10px 0; }
.detail .school ul li:last-child { border-bottom:none; }
.detail .school ul li p { word-break: keep-all; }
.detail .school ul li:nth-child(odd) img { margin-right: 10px; }
.detail .school ul li:nth-child(even) img { margin-left: 10px; }
.detail .school ul li img { height: 100px; }
.detail .school ul li a { padding:2px 8px 4px; border-radius: 4px; background: #f1c506; color:#333; font-size:14px; display: inline-block; margin-bottom: 4px;  }
.detail .school ul.more { flex-direction: row; justify-content: space-around; align-items: flex-start; flex-wrap: wrap; width: 700px; }
.detail .school ul.more li { border: none; flex-direction: column; width:30%; }
.detail .school ul.more li img { margin:0; margin-bottom: 8px; }
.detail .school ul.more li a { margin:4px 0; }




.detail .contents { padding:10px 40px 60px; }
.detail .contents h2 { width:300px; height:60px; border-radius: 100px; text-align: center; background: #fff; font:28px/60px jn; color:#00a0e9; position: absolute; left:50%; margin-left:-150px; top:-25px;  }
.detail .contents ul { background: #efefef; padding: 60px 0; }
.detail .contents ul li { width: 33.3333%; float:left; padding:0 40px; box-sizing: border-box; position: relative; text-align: center;}
.detail .contents ul li h3 { flex-direction: row; font:26px/60px jn; color:#00a0e9; margin-bottom: 20px; }
.detail .contents ul li h3 img { margin-right: 20px; }
.detail .contents ul li a { color:#666; font:20px/1.6 ntr; margin-bottom: 20px; display: inline-block; }
.detail .contents ul li a span { display: block; font:18px/1.6 ntb; word-break: keep-all; color:#333; }
.detail .contents ul li:after { content:""; border-right:2px solid #00a0e9; height:220px; position: absolute; right:0; top:0; }
.detail .contents ul li:last-child:after { display: none; }
.detail .contents ul li a img { height:220px; }
.detail .contents ul li.go { text-align: center; display:flex; align-items: center; justify-content: center; }


.detail .foot { padding: 0 20px 60px; }
.detail .contents.dn + .foot { padding-top:60px; }
.detail .foot article { float:left; width:50%; padding: 0 20px; box-sizing: border-box; }
.detail .foot article h2 { font:28px/1.4 jn; color:#222; margin-bottom: 10px; word-break: keep-all; }
.detail .foot article h2 a { color:inherit; }
.detail .foot .mou p { font:16px/1.6 ntr; color:#666; padding-bottom: 20px; word-break: keep-all; }
.detail .foot .mou p strong { display: block; font:24px ntb; color:#222; word-break: keep-all; }
.detail .foot .mou p span { font-family: ntb; margin-right: 10px; color:#222; }
.detail .foot .go img { height:170px; }

.detail .b_close { position: absolute; right:30px; top:64px; font:48px ntl; color:#333; transform:rotate(45deg); z-index: 10; }


/* 강화읍 */

#ssm.detail .top ul li a:last-child { width:33% }

#sdm.detail .foot { padding-top:60px; }
#sdm.detail .foot .go img { height: 230px;}
#swm.detail .foot { padding-top: 60px; }
#swm.detail .foot .go img { height: 230px;}




/* notice */
#w_notice { height:100%; background:url(/images/bg_gray.jpg); color:#333; }
#w_notice .wrap { width:1200px;  }
#w_notice h2 { font:54px ntb; padding-top:140px;  }
#w_notice p { font:28px ntm; margin-top: 20px; }
#w_notice span { font:22px ntm; margin-top: 15px; display:inline-block; border-left:2px solid #ccc; padding-left:20px; }
#w_notice ul { width:700px; margin-top: 60px; }
#w_notice ul li { margin-bottom: 20px; }
#w_notice ul li a:link, #w_notice ul li a:visited { display: block; font:22px/60px nsb; color:#fff; background: #00d4bb; text-align: center; transition:0.3s; }
#w_notice ul li a:hover, #w_notice ul li a:active, #w_notice ul li a:focus { background: #3b8cff; }


@media (max-width:1400px) { /* 태블릿 가로 */
#w_map { overflow-x: auto; }
#w_logo { top:20px; }
#w_logo img { width:200px; }    


/* 온라인 부스 */
.detail { width: 100%; }
.detail .box { width:90%; }

.detail .top { padding:20px; }
.detail .top h2 { left:20px; top:20px; }
.detail .top ul { padding-left:40%}
.detail .top ul li { float:none; margin-right: 0; font:14px jn; }
.detail .top ul li.w50 { width:100%; }
.detail .top ul li.a3 a, .detail .top ul li.a2 a { width: 45% !important; font-size:16px; }

.detail .ment { top:16%; font:18px/1.8 ntm; left:3%; }
    
.detail .school > img { width:300px;}    
.detail .school ul li { font-size:16px; }
.detail .school ul.more { width: 630px; }

.detail .contents ul li { padding: 0 20px; }
.detail .contents ul li:after { height: 190px; }
.detail .contents ul li h3 { font-size:20px; line-height:40px;}
.detail .contents ul li h3 img { height:80px; }
.detail .contents ul li a { font:16px/1.6 ntr; }
.detail .contents ul li a span { font-size:18px;}
.detail .contents ul li a img { height:190px; }

.detail .foot .mou h2, .detail .foot .go h2 { font-size:26px; }
.detail .foot .mou p strong { font-size:20px; }
.detail .foot .go img { height: 130px; }

    
.detail .b_close { right:0; top:0; }
   
/* 강화읍 */

#khy.detail .contents ul li:after { height: 280px; } 

    
#sdm.detail .foot .go img { height: 200px;} 


}


@media (max-width:960px) { /* 태블릿 세로 */
#w_intro img { width:80%; height:auto !important; }   
    
#ytb > div  { width:80%; }    
#ytb > div iframe  { width:100%; }   

#w_intro a:after { bottom:-70px; }      
     
.detail .top ul { padding-left:45%}
.detail .top ul li.a3 a, .detail .top ul li.a2 a { width: 100% !important; margin-right: 0; } 
.detail .top .mob { display: inline-block !important; }

.detail .ment { width: 50%; font-size:14px; }

.detail .school { padding:40px 0 60px; }    
.detail .school ul { padding-left:20px; margin-left: 0; padding-right:20px; }   
.detail .school ul li { word-break: keep-all; }   
.detail .school ul.more { width:500px; }
.detail .school ul.more li img { height: 60px; }


    
.detail .contents { padding:10px 0px 0; }    
.detail .contents ul li { padding: 0 10px; text-align: center;}
.detail .contents ul li:after { height: 190px; }
.detail .contents ul li h3 { display: block; text-align: center; margin-bottom: 10px; }
.detail .contents ul li h3 img { height:80px; display: block; margin:0 auto ;}
.detail .contents ul li a { font-size:14px; }
.detail .contents ul li a span { font-size:14px;}
.detail .contents ul li a img { height:auto; width:100%; }   
    

.detail .foot { padding-top:60px; }
.detail .foot .mou h2, .detail .foot .go h2 { font-size:22px; }
.detail .foot .mou p { font-size:14px; }
.detail .foot .mou p strong { font-size:18px; }
.detail .foot .mob { display: inline-block !important; }
.detail .foot .go img { height: 140px; margin-bottom: 20px;}    
    
    
#khy.detail .contents ul li:after { height: 290px; } 

    
#kdm.detail .contents ul li:after { height: 220px; }     

#ydm.detail .contents ul li img { height: 160px; width: auto;}
#ydm.detail .contents ul li:after { height: 160px; }
    

    
/* notice */
#w_notice { padding-bottom:60px;}
#w_notice .wrap { width:94%; background-size:50%; background-position: right -12% top 10px;  }
#w_notice h2 { font:50px ntm; padding-top:20px;  }
#w_notice p { font:18px ntr; }
#w_notice span { font:16px/1.6 ntm; padding-left:10px; display: block; word-break: keep-all; }
#w_notice ul { width:auto; margin-top: 30px; }
#w_notice ul li { margin-bottom: 10px; }
#w_notice ul li a { font:16px/40px nsb !important; }
#w_notice + .khlogo { display: none; }    
}


@media (max-width:600px) { /* 모바일용 */
.pc { display: none !important; }
    
/* 팝업 */
#hd_pop #hd_pops_1 { top:100px !important; }
#hd_pop #hd_pops_1 .hd_pops_con { width:300px !important; height:200px !important; }


/* common */
.wrap { width: 94%; }
body { height:100%; }

/* intro */
#w_intro a img { width:90%;  }


/* index */
#w_logo { position: fixed; left:0; top:0; padding:10px 0 0 3%; width:100%; height:60px;  background: #fff; box-sizing: border-box; z-index:99; }
#w_logo img { height:40px; width:auto; }
.blank { height:60px; }
    
.khlogo { bottom:70px; position: fixed; right:3%; }    
.khlogo img { height:20px; }    
    
#w_menu { right:-105%; width:100%; padding:0 40px; transition:0.3s;  }    
#w_menu #gnb { margin-top: 80px;  }    
  
#w_map { height:calc(100% - 110px); position: fixed; left:0; top:60px; width:100%; overflow-x: auto;} 
#w_map .wrap { display:inline-block; position: relative; height:100%; width:auto;  }    

    
#ytb { width:100%; height:100%; position: fixed; left:0; top:0; margin-left:0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.8); padding:0 3%; box-sizing: border-box; }    
#ytb div { width:100%; }
#ytb iframe { width:100%; height:400px;  }

    
.w_quick { position: fixed; left:0; top:auto; animation: none;  bottom:0; z-index: 50; width:100%; border-radius: 0; box-shadow: none; background: #eee; text-align: center; border-top:1px solid #333; height:50px; }
.w_quick img { height:40px; } 
.w_quick a { position: absolute; height:100%; }    
.w_quick .w1 { left:0; width:37%; }    
.w_quick .w2 { left:37%; width:33%;  }    
.w_quick .w3 { right:0; width:30%; }    

    
#w_map .point .arr { top:-50px; opacity:1; display: none; } 
#w_map .point:hover .arr { display: block; }        
    

    
/* 온라인 부스 */
.detail { width: 100%; }
    
.detail .shadow { width:90%; }    
.detail .box { width:94%; }

.detail .top { padding:20px 3%; }
.detail .top h2 { position: static; font-size:42px; }
.detail .top h2 img { height: 60px; }
    
.detail .top ul { padding-left:0; margin-top: 20px; width: 100%; }
.detail .top ul li { float:none; margin-right: 0; font:13px jn; padding-left:40px; }
.detail .top ul li img { height: 30px; }

.detail .bnr { overflow: hidden; }
.detail .ment { top:0%; left:0; bottom:auto; right:auto; position:relative; font:14px/1.8 ntm; width: 100%; word-break: keep-all; padding:60px 3% 100%; box-sizing: border-box; }
.detail .booth { position: absolute; left:0; bottom:0; }
    
    
    
.detail .school { display: block; padding:40px 3%; }
.detail .school > img { width:100% !important; }
.detail .school ul { padding-left:0; margin-left:0; margin-top: 20px; padding-top:20px;  }
.detail .school ul:before { width:94%; height: 0; border:none; border-top:4px solid #fff; top:0; left:3%;}
.detail .school ul li { font:14px/1.6 ntm; word-break: keep-all; }
.detail .school ul li img { height: 60px; }
.detail .school ul li a { font-size:12px; }
.detail .school ul.more { width:100%; box-sizing: border-box; padding-left:0; padding-right:0;  }
.detail .school ul.more li img { height: 60px; }

.detail .contents { padding:10px 3% 0; }
.detail .contents ul { padding:20px 0 0; }
.detail .contents ul li:after { border-right:none; border-bottom:2px solid #00a0e9; height: 0; width:94%; right:3%; top:auto; bottom:0; }
.detail .contents ul li { width:auto; padding:40px 20px; float:none; text-align: center; }
.detail .contents ul li h3 { font:24px/60px jn; display:flex; margin-bottom: 20px;}
.detail .contents ul li h3 img { height: 60px; margin:0; margin-right: 10px; }
.detail .contents ul li a { font:16px/1.6 ntr; }
.detail .contents ul li a span { font:16px/1.6 ntb; }
.detail .contents ul li a img { width:100%; height:auto; }

.detail .foot { padding:40px 3%; }
.detail .foot article { float:none; width:auto; margin-bottom: 40px; padding:0 20px; }    
.detail .foot article:last-child { margin-bottom: 0; }    
.detail .foot .mou h2, .detail .foot .go h2 { font-size:20px; }
.detail .foot .mou p { font-size:14px; word-break: keep-all; }
.detail .foot .mou p strong { font-size:18px; }
.detail .foot .go img { height:auto; width:100%; margin-bottom: 40px;}

    
.detail .b_close { right:0; top:0; }

/* 강화읍 */
#khy.detail .top ul { width: 100%; }
#khy.detail .top ul li a { width: 100%; } 
#khy.detail .school ul.fl { flex-wrap: wrap; }
#khy.detail .school ul.fl li { width: 33.3333%; }
#khy.detail .school ul.fl li a img { height: 86px;  }
#khy.detail .contents ul li:after { height: 280px; }     


#ydm.detail .contents ul li img { height: auto; width: 100%;}
    
   
    
}




@media (min-width:601px) { /* PC용 */
.mob { display: none !important; }
    
} 



/* main_23 */
.school_map{width: 100%;min-height: 100vh;display:flex;align-items:center;background: url('../images/map_bg.png') no-repeat center center;background-size: cover;overflow-x: auto;}
.school_map .map_inner{width: 100%;max-width: 1300px;margin: 0 auto;padding: 0 20px;padding-top:100px;}

.school_map .txt_box{display: flex;align-items: center;justify-content: space-between;}
.school_map .txt_box .tit{color: #3975CC;text-shadow: 0px 2px 3px #6A8C90;font-size: 24px;font-weight: 700;}
.school_map .txt_box .sub_tit{margin-top:10px;color: #2156A3;text-shadow: 0px 2px 3px #91AEB2;font-size: 36px;font-weight: 700;line-height: 1;}
.school_map .txt_box .noti{display: flex;align-items: center;gap: 5px;margin-top: 10px;}
.school_map .txt_box .noti .icon_noti{display: block;width: 24px;height: 24px;background-image: url('../images/icon_noti.svg');background-repeat: no-repeat;background-size: cover;background-position: center center;}
.school_map .txt_box .noti .msg{display:block;font-size: 18px;font-weight: 400;line-height: 1;color: #0055a8;}


.school_map .map_img{width: 100%;}
.school_map .map_img img{width: 100%;}

.school_map .map_box{position: relative;}
.school_map .map_point{position: absolute;left:0;top:0;right:0;bottom:0;width: 100%;}
.school_map .map_point .pin{position: absolute;z-index: 10;/*transform: translate(-50%,-50%);width: 20px;height: 8px;border-radius:40%;*/cursor: pointer;}
.school_map .map_point .pin.ele{background-color: #3A71E8;}
.school_map .map_point .pin.mid{background-color: #45D1C9;}

.school_map .map_point .pin .pin_info{display: flex;align-items: center;gap: 5px;padding:5px 10px 5px 5px;position: absolute;left: -10px;bottom: calc(100% + 2px);opacity: 1;transition: opacity .5s ease;}
.school_map .map_point .pin:hover .pin_info{opacity: 1;}
.school_map .map_point .pin.ele .pin_info{border-radius: 30px;border: 1px solid #3A71E8;background: #ffffff7a;}
.school_map .map_point .pin.mid .pin_info{border-radius: 30px;border: 1px solid #45D1C9;background: #ffffff7a;}

.school_map .map_point .pin .icon_loca{display: block;width: 20px;height: 20px;background-repeat: no-repeat;background-size: cover;background-position: center;flex: 0 0 auto;}
.school_map .map_point .pin.ele .icon_loca{background-image: url('../images/icon_loca_ele.svg');}
.school_map .map_point .pin.mid .icon_loca{background-image: url('../images/icon_loca_mid.svg');}

.school_map .map_point .pin a{display:inline-block;font-size: 12px;font-weight: 400;white-space: nowrap;transition:.3s}
.school_map .map_point .pin.ele a{color: #2E58B3;}
.school_map .map_point .pin.mid a{color: #30A09A;}

.school_map .map_point .pin:hover{z-index: 999;}
.school_map .map_point .pin:hover .pin_info{background: #fff;}    
.school_map .map_point .pin:hover a{font-size: 14px;font-weight: 700;}

/* .school_map .map_point .pin:hover .pin_info{background: #3A71E8;}
.school_map .map_point .pin:hover a{color:#fff} */

.b_pin img{width:100%}

/* 교동면 */
/* 교동초등학교 */
.school_map .map_point .pin.gdc{left: 28.5%;top: 16.5%;}
.school_map .map_point .pin.gdc .b_pin{position:absolute;bottom:-6px;left:7px;width:18px;height:10px}

/* 교동중학교 */
.school_map .map_point .pin.gdj{left: 29.5%;top: 26.5%;}
.school_map .map_point .pin.gdj .b_pin{position:absolute;bottom:35px;left:7px;width:18px;height:10px}
/* 교동면 */

/* 삼산면 */
/* 삼산초등학교 */
.school_map .map_point .pin.ssc{left: 36%;top: 48%;}
.school_map .map_point .pin.ssc .b_pin{position:absolute;bottom:-6px;left:7px;width:18px;height:10px}

/* 승영중학교 */
.school_map .map_point .pin.syj{left: 35.5%;top: 57.3%;}
.school_map .map_point .pin.syj .b_pin{position:absolute;bottom:35px;left:7px;width:18px;height:10px}

/* 해명초등학교 */
.school_map .map_point .pin.hmc{left: 44.6%;top: 63%;}
.school_map .map_point .pin.hmc .b_pin{position:absolute;bottom:-6px;left:7px;width:18px;height:10px}

/* 삼산면 */

/* 서도면 */
/* 서도초등학교 */
.school_map .map_point .pin.sdc{left: 23.5%;top: 78%;}
.school_map .map_point .pin.sdc .b_pin{position:absolute;bottom:-6px;left:7px;width:18px;height:10px}

/* 서도중학교 */
.school_map .map_point .pin.sdj{left: 23.5%;top: 85%;z-index: 9;}
.school_map .map_point .pin.sdj .b_pin{position:absolute;bottom:35px;left:7px;width:18px;height:10px}

/* 서도면 */

/* 양사면 */
/* 양사초등학교 */
.school_map .map_point .pin.ysc{left: 71%;top: 9.3%;}
.school_map .map_point .pin.ysc .b_pin{position:absolute;bottom:-6px;left:7px;width:18px;height:10px}

/* 양사면 */

/* 하점면 */
/* 하점초등학교 */
.school_map .map_point .pin.hjc{left: 71%;top: 22%;}
.school_map .map_point .pin.hjc .b_pin{position:absolute;bottom:-6px;left:7px;width:18px;height:10px}

/* 명신초등학교 */
.school_map .map_point .pin.msc{left: 62%;top: 33.7%;}
.school_map .map_point .pin.msc .b_pin{position:absolute;bottom:-6px;left:35px;width:18px;height:10px}

/* 강서중학교 */
.school_map .map_point .pin.gsj{left: 61%;top: 21%;}
.school_map .map_point .pin.gsj .b_pin{position:absolute;bottom:-6px;left:47px;width:18px;height:10px}

/* 하점면 */

/* 송해면 */
/* 송해초등학교 */
.school_map .map_point .pin.shc{left: 80%;top: 23%;}
.school_map .map_point .pin.shc .b_pin{position:absolute;bottom:-6px;left:7px;width:18px;height:10px}

/* 송해면 */

/* 내가면 */
/* 내가초등학교 */
.school_map .map_point .pin.ngc{left: 64%;top: 44%;}
.school_map .map_point .pin.ngc .b_pin{position:absolute;bottom:-6px;left:22px;width:18px;height:10px}

/* 내가면 */

/* 강화읍 */
/* 강화초등학교 */
.school_map .map_point .pin.ghc{left: 78%;top: 28.5%;}
.school_map .map_point .pin.ghc .b_pin{position:absolute;bottom:-6px;left:60px;width:18px;height:10px}

/* 대월초등학교 */
.school_map .map_point .pin.dwc{left:86%;top: 26%;}
.school_map .map_point .pin.dwc .b_pin{position:absolute;bottom:-6px;left:7px;width:18px;height:10px}

/* 합일초등학교 */
.school_map .map_point .pin.hic{left: 77%;top: 41%;}
.school_map .map_point .pin.hic .b_pin{position:absolute;bottom:35px;left:65px;width:18px;height:10px}

/* 갑룡초등학교 */
.school_map .map_point .pin.grc{left: 88%;top: 41%;}
.school_map .map_point .pin.grc .b_pin{position:absolute;bottom:35px;left:7px;width:18px;height:10px}

/* 강화중학교 */
.school_map .map_point .pin.ghj{left: 78.8%;top:33%;}
.school_map .map_point .pin.ghj .b_pin{position:absolute;bottom:-6px;left:56px;width:18px;height:10px}

/* 강화여자중학교 */
.school_map .map_point .pin.ghyj{left:86%;top:34.5%;}
.school_map .map_point .pin.ghyj .b_pin{position:absolute;bottom:-6px;left:7px;width:18px;height:10px}

/* 강화읍 */

/* 양도면 */
/* 양도초등학교 */
.school_map .map_point .pin.ydc{left: 68.5%;top: 58%;}
.school_map .map_point .pin.ydc .b_pin{position:absolute;bottom:-6px;left:35px;width:18px;height:10px}

/* 조산초등학교 */
.school_map .map_point .pin.jsc{left: 71%;top: 71.5%;}
.school_map .map_point .pin.jsc .b_pin{position:absolute;bottom:-6px;left:35px;width:18px;height:10px}

/* 동광중학교 */
.school_map .map_point .pin.dgj{left: 72%;top: 64.5%;}
.school_map .map_point .pin.dgj .b_pin{position:absolute;bottom:-6px;left:7px;width:18px;height:10px}

/* 양도면 */

/* 불은면 */
/* 삼성초등학교 */
.school_map .map_point .pin.samsungc{left:77.5%;top: 50%;}
.school_map .map_point .pin.samsungc .b_pin{position:absolute;bottom:-6px;left:7px;width:18px;height:10px}

/* 불은초등학교 */
.school_map .map_point .pin.benj{left: 84.5%;top: 60%;}
.school_map .map_point .pin.benj .b_pin{position:absolute;bottom:-6px;left:7px;width:18px;height:10px}

/* 불은면 */

/* 선원면 */
/* 선원초등학교 */
.school_map .map_point .pin.swonc{left: 83.5%;top: 45%;}
.school_map .map_point .pin.swonc .b_pin{position:absolute;bottom:-6px;left:7px;width:18px;height:10px}

/* 선원면 */

/* 화도면 */
/* 화도초등학교 */
.school_map .map_point .pin.hwadoc{left: 64.5%;top: 78%;}
.school_map .map_point .pin.hwadoc .b_pin{position:absolute;bottom:-6px;left:60px;width:18px;height:10px}

/* 심도중학교 */
.school_map .map_point .pin.simdoj{left: 70.5%;top: 86%;}
.school_map .map_point .pin.simdoj .b_pin{position:absolute;bottom:35px;left:7px;width:18px;height:10px}

/* 화도면 */

/* 길상면 */
/* 길상초등학교 */
.school_map .map_point .pin.gilsnagc{left: 85%;top: 78%;}
.school_map .map_point .pin.gilsnagc .b_pin{position:absolute;bottom:-6px;left:7px;width:18px;height:10px}

/* 강남중학교 */
.school_map .map_point .pin.gangnamj{left:  82.8%;top: 72%;}
.school_map .map_point .pin.gangnamj .b_pin{position:absolute;bottom:-6px;left:7px;width:18px;height:10px}

/* 길상면 */




/* 온라인 부스 */
.new_detail{position:fixed;width:calc(100%);height:100%;left:0%;top:0;z-index:100;overflow-x:hidden;transition:.7s;background:rgba(0,0,0,.5);opacity:0;display:none}

.new_detail.on { display:block }
.new_detail .box {width: 860px;margin:60px auto;overflow:hidden;background: #fff;border-radius: 4px;}
.new_detail .box > div { position: relative; background: #fff; }
.new_detail .shadow { background: none !important; text-align: center; width:97%; margin:0 auto ;}
.new_detail .shadow img { width:100%; }
.t_fl{display:flex;align-items: center;gap:10px}
.t_fl p{font-weight:700;font-size:22px;}
.t_fl img{width:40px}
.l_fl_box{display:flex;align-items:center;justify-content: flex-start;gap:20px;border-top:solid 1px #ccc;padding:20px;}
.l_fl_box .sc_logo{width:40px;}
.l_fl_box .sc_logo img{width:100%}
.l_fl_box .sc_name{width:150px;font-size:20px;font-weight:700}
.l_fl_box .sc_btn{display: flex;gap:10px}
.l_fl_box .sc_go_btn{display:flex;gap:10px;border:solid 1px #274990;border-radius:4px;background-color:#fff;padding:12px 10px 11px 10px;align-items:center}
.l_fl_box .sc_go_btn .bttn_text{color:#274990}
.l_fl_box .sc_go_btn img{width:16px;}
.l_fl_box .video_go_btn{display:flex;gap:10px;border:solid 1px #333;border-radius:4px;background-color:#fff;padding:12px 10px 11px 10px;align-items:center}
.l_fl_box .video_go_btn .bttn_text{color:#333}
.bttn_text{font-size:14px;font-weight:700}
.new_detail .box .top{padding:20px;}
.new_detail .img_box{position:relative}
.new_detail .img_box .ment{width: 41%;position:absolute;top:10%;left:3%;font-size:16px;line-height:24px;color:#fff}
.new_detail .img_box img{width:100%}
.new_detail .contents {position:relative}
.new_detail .contents h2 { width:300px; height:60px; border-radius: 100px; text-align: center; background: #fff; font:28px/60px jn; color:#00a0e9; position: absolute; left:50%; margin-left:-150px; top:-25px;  }
.new_detail .contents ul { background: #efefef; padding: 60px 0 30px 0;display:flex; }
.new_detail .contents ul li { width: 33.3333%; float:left; box-sizing: border-box; position: relative; text-align: center;}
.new_detail .contents ul li h3 { flex-direction: row; font-size:14px;gap:10px; color:#00a0e9; margin-bottom: 20px; }
.new_detail .contents ul li h3 img {    width: 50px; }
.new_detail .contents ul li a { color:#666; font:20px/1.6 ntr; margin-bottom: 20px; display: inline-block; }
.new_detail .contents ul li a span { display: block; font-size:12px; word-break: keep-all; color:#333;    font-weight: 700;}
.new_detail .contents ul li:after { content:""; border-right:2px solid #00a0e9; height:100%; position: absolute; right:0; top:0; }
.new_detail .contents ul li:last-child:after { display: none; }
.new_detail .contents ul li a img { height:220px; }
.new_detail .contents ul li.go { text-align: center; display:flex; align-items: center; justify-content: center; }
.new_detail .foot { padding: 40px 20px 0 20px; }
.new_detail .contents.dn + .foot { padding-top:60px; }
.new_detail .foot article { float:left; width:50%; padding: 0 20px; box-sizing: border-box; }
.new_detail .foot article h2 { font-size:18px; color:#222; margin-bottom: 10px; word-break: keep-all; }
.new_detail .foot article h2 a { color:inherit; }
.new_detail .foot .mou p { font:16px/1.6 ntr; color:#666; padding-bottom: 20px; word-break: keep-all; }
.new_detail .foot .mou p strong { display: block; font:24px ntb; color:#222; word-break: keep-all; }
.new_detail .foot .mou p span { font-family: ntb; margin-right: 10px; color:#222; }
.new_detail .foot .go img { height:170px; }
.new_detail .b_close { position: absolute; right:30px; top:64px; font:48px ntl; color:#333; transform:rotate(45deg); z-index: 10; }

.pl_cont_box{display:none}
.t_fl_close{position:absolute;top:22px;right:20px;width:34px;}
.t_fl_close img{width:100%}


.m_title{display:none}

@media screen and (max-width:768px) {
    .m_title{display:block;font-size: 20px;font-weight: 700;padding: 20px 0 10px 10px;}
    .new_detail{transition:none}
    .school_map{background: #c3e1e6;align-items: flex-start;padding-top: 90px;}
    .school_map .map_inner .img_item{width:80px;}
    .school_map .map_inner .img_item img{width:100%;}
    .school_map .map_point{position:relative;padding-bottom: 50px;}
    .school_map .map_point .pin{position:static;border-radius: 0!important;padding:0 6px 0 3px;}
    .school_map .map_point .pin .b_pin{display:none}
    .school_map .map_point .pin.mid,
    .school_map .map_point .pin.ele{background-color:transparent;}
    .school_map .map_point .pin .pin_info{position:relative;left: 0;border:none!important;padding: 16px 10px;border-radius: 0!important;border-top:solid 1px #ededed}
    .school_map .map_point .pin a{font-size:16px;}
    .new_detail .box{width:100%;margin: 0;border-radius: 0;}
    .new_detail .contents ul{    flex-direction: column;}
    .new_detail .contents ul li{width:100%;padding:20px 0}
    .new_detail .contents ul li a{display:block}
    .new_detail .foot article { float:none; width:auto; margin-bottom: 40px; padding:0 20px; }    
    .new_detail .foot article:last-child { margin-bottom: 0; }    
    .new_detail .contents ul li:after { border-right:none; border-bottom:2px solid #00a0e9; height: 0; width:94%; right:3%; top:auto; bottom:0; }
    .new_detail .foot .go img {height: auto;width: 100%;margin-bottom: 40px;}
    

    .l_fl_box{flex-wrap: wrap;}
    .new_detail .contents h2{position: static;margin: 0;text-align: left;font-size: 22px;padding-left: 20px;}
    .t_fl_close{position:fixed;z-index:999}

    .school_map .map_point .pin.mid .pin_info,
    .school_map .map_point .pin.ele .pin_info{background-color:#fff}
    .school_map .map_point .pin .pin_info:after{content:'';display:block;clear:both;position:absolute;top:0;left:0;width:100%;height:1px;background-color:#87b7c1}
    .school_map .map_point .m_title + .pin .pin_info:after{display:none}

    .school_map .map_point .pin:hover{z-index: 999;}
    .school_map .map_point .pin:hover .pin_info{background: #fff;}    
    .school_map .map_point .pin:hover a{font-size: 16px;font-weight: 700;}
    .new_detail .img_box .ment{width:90%}
}

@media screen and (max-width:600px) {
    .school_map .map_point .pin .pin_info{border-radius: 0!important;}
    .school_map .map_inner{width: 100%;max-width: 1440px;margin: 0 auto;padding: 0 10px;}
    .school_map .map_point .pin{padding:0 6px 0 3px;}
    .school_map .map_point .pin > .icon_loca{width: 15px;height: 15px;}
    .school_map .map_point .pin > a{display:inline-block;font-size: 10px;font-weight: 600;}
}