@charset "utf-8";


/* 레이아웃 */
#sjclwrap { min-width:1400px; width:100%; }

#top { position:relative; min-width:1400px; width:100%; border-bottom:1px solid #ddd; background:#fff url(/images/common/top_bg.gif) repeat-x; }
	#toparea { position:relative; width:1400px; height:170px; margin:0 auto; overflow:visible; }
	
#container { position:relative; min-width:1400px; width:100%; z-index:2; }

	#cont1 { position:relative; width:100%; overflow:hidden; }
	#cont2 { position:relative; width:100%; padding:60px 0 100px 0; background:#ffffea; }
		.containerarea { width:1400px; margin:0 auto;  }

#bottom { position:relative; width:100%; z-index:4; background:#444c57; color:#ccc; }
	#bottomarea { position:relative; width:1400px; padding:32px 0 70px 0; margin:0 auto; z-index:5; }
		


@media (min-width:1281px) and (max-width:1400px){
    #sjclwrap { min-width:100%; width:100%; }

	#top { position:relative; min-width:100%; width:100%; border-bottom:1px solid #ddd; background:#fff url(/images/common/top_bg.gif) repeat-x; }
		#toparea { position:relative; width:100%; height:165px; margin:0 auto; overflow:visible; z-index:1005; } 

	#container { position:relative; min-width:100%; width:100%; z-index:2;  }
		#cont1 { position:relative; width:100%; overflow:hidden; }
		#cont2 { position:relative; width:100%; padding:60px 15px 100px 15px; background:#ffffea; }
			.containerarea { width:100%; margin:0 auto;  }

	#bottom { position:relative; width:100%; z-index:4; background:#444c57; color:#ccc; }
		#bottomarea { position:relative; width:100%; padding:32px 15px 70px 15px; margin:0 auto; z-index:5; }
}	


@media (min-width:1025px) and (max-width:1280px){
	html, body, #sjclwrap { min-width:100%; width:100%; }		
	
	#top {  position:relative; min-width:100%; width:100%; border-bottom:1px solid #ddd; background:#fff url(/images/common/top_bg.gif) repeat-x; }
		#toparea { position:relative; width:100%; height:165px; margin:0 auto; overflow:visible; z-index:1005; }
		
	#container { position:relative; min-width:100%; width:100%; z-index:2;}
		
		#cont1 { position:relative; width:100%; overflow:hidden; }
		#cont2 { position:relative; width:100%; padding:60px 15px 100px 15px; background:#ffffea; }
			.containerarea { width:100%; margin:0 auto;  }
	
		
	#bottom { position:relative; width:100%; z-index:4; background:#444c57; color:#ccc; }
		#bottomarea { position:relative; width:100%; padding:32px 30px 70px 30px; margin:0 auto; z-index:5; }
}


@media (min-width:769px) and (max-width:1024px){
	html, body, #sjclwrap { min-width:100%; width:100%; }
		
	#top { position:relative; min-width:100%; width:100%; border-bottom:1px solid #ddd; background:#fff; }
		#toparea { position:relative; width:100%; height:90px; margin:0 auto; overflow:visible; z-index:1005; }
		
	#container { position:relative; min-width:100%; width:100%; z-index:2; }
	
		#cont1 { position:relative; width:100%; overflow:hidden; }
		#cont2 { position:relative; width:100%; padding:45px 30px 75px 30px; background:#ffffea; }
			.containerarea { width:100%; margin:0 auto;  }
	
		
	#bottom { position:relative; width:100%; z-index:4; background:#444c57; color:#ccc; }
		#bottomarea { position:relative; width:100%; padding:32px 30px 70px 30px; margin:0 auto; z-index:5; }
}


@media (max-width:768px){
	html, body, #sjclwrap { min-width:100%; width:100%; }
		
	#top { position:relative; min-width:100%; width:100%; border-bottom:1px solid #ddd; background:#fff; }
		#toparea { position:relative; width:100%; height:70px; margin:0 auto; overflow:visible; z-index:1005; }
		
	#container { position:relative; min-width:100%; width:100%; z-index:2; }
	
		#cont1 { position:relative; width:100%; overflow:hidden; }
		#cont2 { position:relative; width:100%; padding:30px 15px 50px 15px; background:#ffffea; }
			.containerarea { width:100%; margin:0 auto;  }
	
			
	#bottom { position:relative; width:100%; z-index:4; background:#444c57; color:#ccc; font-size:90%; }
		#bottomarea { position:relative; width:100%; padding:32px 15px 70px 15px; margin:0 auto; z-index:5; }
}





/* 타이틀 */
#top h1.title { position:absolute; left:0; top:75px;  }


@media (min-width:1281px) and (max-width:1400px){
	#top h1.title { left:15px; }
}


@media (min-width:1025px) and (max-width:1280px){
	#top h1.title { left:15px; }
}


@media (min-width:769px) and (max-width:1024px){
	#top h1.title { left:calc(50% - 100px); top:15px; text-align:center; margin:0; }
	#top h1.title img { height:60px; }
	
	.sidenav h1 img { height:40px; } 
}

@media (max-width:768px){
	#top h1.title { left:calc(50% - 65px); top:15px; text-align:center; margin:0; }
	#top h1.title img { height:40px; }
	
	.sidenav h1 img { height:40px; } 
}




/* 사이드상단메뉴 */
.sidemenu ul li:nth-child(1),
.sidemenu ul li:nth-child(2) { display:none; }


/* 사이드메뉴 숨기기 */
.mobileTopBtn .mobileTopBtn3 { display:none !important; }





/* 메인 메뉴 */
#menu { position:absolute; right:0; top:97px; }
#topMenu { position:relative; overflow:visible !important; }

#topMenu > li { position:relative; float:left; text-align:center; display:inline-block; }

#topMenu > li > a:link,
#topMenu > li > a:visited { height:70px; vertical-align:top; padding:0 40px; color:#222; font-size:140%; font-family:esamanru-Medium, "이사만루 미디엄"; letter-spacing:-1px; display:block; }
#topMenu > li > a:active,
#topMenu > li > a:focus,
#topMenu > li > a:hover,
#topMenu > li > a.select { color:#9e5d9e;  }


@media (max-width:1440px){
	#menu { width:calc(100% - 284px); }
	#topMenu > li { width:16.666%;  }
	#topMenu > li > a:link,
	#topMenu > li > a:visited { padding:0; }
}

@media (max-width:1152px){
	#topMenu > li > a:link,
	#topMenu > li > a:visited { font-size:125%; }
}


@media (max-width:1024px){
	#menu { display:none; } 
}



/* 서브메뉴 표시 */
#topMenu > li > ul { position:absolute; left:0; top:67px; width:100%; height:188px; padding:10px 0 0 0px; border-top:1px solid #ddd; border-left: 1px solid #eee; background:#fff; display:none; clear:both; z-index:1003;   }
#topMenu > li > ul > li { position:relative; width:100%; padding:3px 10px 4px 10px;  text-align:left; display:block; }
#topMenu > li > ul.end { border-right: 1px solid #eee;}

#topMenu > li > ul > li > a:link,
#topMenu > li > ul > li > a:visited { width:100%; height:auto; padding:0; background:none; color:#333; border:0; line-height:1.3; text-decoration:none; font-family:NotoSans-DemiLight, "본고딕 데미라이트"; font-size:90%; margin:0; letter-spacing:-1px;  }
#topMenu > li > ul > li > a:active,
#topMenu > li > ul > li > a:hover,
#topMenu > li > ul > li > a:focus,
#topMenu > li > ul > li > a.select { clear:both; color:#2a8e9d; font-weight:bold; }

#topMenu > li > ul > li > a.st { letter-spacing:-2px; }

.submenu { display:none; overflow:hidden; }

.menubox { position:absolute; left:0; top:164px; width:100%; height:191px; border-top:1px solid #ddd; border-bottom:3px solid #ff5244; background:#fff; display:none; z-index:10; }




@media (min-width:1153px) and (max-width:1280px){
	
}


@media (min-width:1025px) and (max-width:1152px){
	
}


@media (max-width:1024px){
	.topMenu,
	.menubox { display:none; } 	
	.menubox { width:0; height:0; border:0; line-height:0; }
}	




/* 메인비주얼 */
.mVisible { position:relative; width:100%; height:600px; background:#b3e6f7 url(/images/child/main/visible_img.jpg) no-repeat 50% bottom;  }

.mVisible .mText { text-align:center; padding:100px 0 100px 0;  }
.mVisible .mText .txt1 { color:#0c3b6f; font-size:245%; font-family:esamanru-Medium, "이사만루 미디엄"; margin-bottom:12px;  }
.mVisible .mText .txt2 { color:#000; font-size:150%;   }


@media (max-width:768px){
	.mVisible { padding:0 15px; background-size:contain; }
	.mVisible .mText { padding:40px 0 100px 0;  }
	.mVisible .mText .txt1 { font-size:180%; }
	.mVisible .mText .txt2 { font-size:125%; word-break:keep-all;   }
}




/* 퀵메뉴 */
.mQuick { position:absolute; left:0; right:0; bottom:30px; width:100%;  }
.mQuick ul { width:1200px; margin:0 auto;}
.mQuick ul li { float:left; width:calc(25% - 52.5px); text-align:center; margin-right:70px; }
.mQuick ul li:last-child { margin-right:0; }

.mQuick ul li a:link,
.mQuick ul li a:visited { width:100%; height:100%; padding-top:30px; padding-bottom:30px; border-radius:25px; background:#ffccb6; color:#000; font-size:110%; text-align:center; letter-spacing:-1px; transition:0.2s; display:block; }
.mQuick ul li a:focus,
.mQuick ul li a:hover,
.mQuick ul li a.select { background:#f3b0c3; color:#fff; }

.mQuick ul li i { display:block; margin-bottom:10px; }




@media (min-width:769px) and (max-width:1200px){
	.mQuick ul { width:calc(100% - 60px); }
	.mQuick ul li { width:calc(25% - 37.5px); margin-right:50px; }
}


@media (max-width:768px){
	.mQuick { bottom:auto; top:150px; }
	.mQuick ul { width:calc(100% - 30px); }
	.mQuick ul li { width:calc(25% - 22.5px); margin-right:30px; } 
}


@media (max-width:650px){
	.mQuick { top:160px; }
	.mQuick ul li { width:calc(50% - 15px); margin:0 15px 20px 0; }
	.mQuick ul li:nth-child(even) { margin:0 0 20px 15px; }

}


	


/* 견학방청사진*/
.mPhoto { position:relative; width:1400px; margin:0 auto;}
.mPhoto h1 { color:#000; !important; font-size:195%; font-family:esamanru-Medium, "이사만루 미디엄"; letter-spacing:-1px; text-align:center; margin-bottom:22px; }
.mPhoto .more { position:absolute; left:calc(50% + 115px); top:1px; width:110px; height:34px; line-height:34px; background:#cbaacb; color:#fff; text-align:center; display:block; }
.mPhoto ul { width:100%; display:flex; justify-content:space-between; }
.mPhoto ul li { position:relative; width:calc(25% - 24px); }

.mPhoto ul li .picArea { width:100%; height:auto; overflow:hidden; }
.mPhoto ul li .picArea a { width:100%; height:auto; overflow:hidden; display:block; }
.mPhoto ul li .pic { width:100%; height:0; padding-top:calc(187 / 279 * 100%);  /* calc(이미지 높이 ÷ 이미지 가로 × 100%) */ overflow:hidden;  display:block; }
.mPhoto ul li .pic img { width:100%;  p동sition:absolute; left:calc(50% + 140px); top:5px; }

.mPhoto ul li .pic { background-size:cover !important;}

.mPhoto ul li .picArea a:link,
.mPhoto ul li .picArea a:visited { transition:0.3s; }
.mPhoto ul li .picArea a:active,
.mPhoto ul li .picArea a:focus,
.mPhoto ul li .picArea a:hover {transform:scale(1.1);}

.mPhoto ul li .bar { width:100%; height:90px; padding:10px 15px 0 15px;  background:#fff; }
.mPhoto ul li .subject a:link,
.mPhoto ul li .subject a:visited { width:100%; color:#111; font-size:125%; font-family:esamanru-Medium, "이사만루 미디엄"; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; transition:0.3s; display:block; margin-bottom:2px; }
.mPhoto ul li .subject a:active,
.mPhoto ul li .subject a:focus,
.mPhoto ul li .subject a:hover { color:#1757b7; }

.mPhoto ul li .date { font-size:95%; color:#666; }






@media (min-width:1281px) and (max-width:1400px){
	.mPhoto { width:100%; }
}



@media (min-width:1025px) and (max-width:1280px){
	.mPhoto { width:100%; }
}
	
@media (min-width:769px) and (max-width:1024px){
	.mPhoto { width:100%; }
    .mPhoto .photoBody { width:100%; overflow:auto; }
    .mPhoto ul {  width:1045px; }
    .mPhoto ul li { width:250px; padding-bottom:10px; margin-right:15px; }
    .mPhoto ul li:last-child { margin-right:0; }
}

@media (max-width:768px){
	.mPhoto { width:100%; }
	.mPhoto h1 { text-align:left;  }
	.mPhoto .more { left:190px; }
    .mPhoto .photoBody { width:100%; overflow:auto; }
    .mPhoto ul { width:1045px; }
    .mPhoto ul li { width:250px; padding-bottom:10px; margin-right:15px; }
    .mPhoto ul li:last-child { margin-right:0; }
}






/* 하단 */
#bottom #bottomarea address { margin:0 0 10px 0; }
#bottom #bottomarea address span { margin-right:20px; }

#bottom #bottomarea .copyright { font-size:90%; font-family:Arial, Helvetica, sans-serif; } 

#bottom .topbtn { position:absolute; right:0; bottom:10px; z-index:100001; }



@media (max-width:1440px){
	#bottom .topbtn { right:10px; }
	
}