@charset "utf-8";

/* 레이아웃 */

#gaonwrap {width:100%; }

#top { position:relative; width:100%; /*height:16.4rem;*/ border-bottom:1px solid #ddd; background:#fff; z-index:100; }
	#toparea { position:relative; max-width:140rem; width:100%; padding:1.2rem 0; display:flex; justify-content:space-between; margin:0 auto; }
	
#container { position:relative; min-width:100%; width:100%; z-index:1; }	
	.inner { position:relative; max-width:140rem; width:100%; margin:0 auto;  }
	#cont1{width:100%; background:#eef4f7; padding:4.5rem 0;}
		#cont1 .inner{display:flex; }
	#cont2{width:100%; padding-top:7.2rem;}
		#cont2 .inner{display:flex; align-items:center;}
		#cont2 .inner > section{width:calc((100% - 7.2rem) / 3); height:29rem; margin-right:3.6rem;}
	#cont3{width:100%; padding:4.8rem 0 10rem 0;}
	
#bottom { position:relative; width:100%; border-top:1px solid #ddd;  background:#F4F5F6; z-index:2; }

@media(max-width:1400px){
#toparea{padding:1.2rem 2.8rem;}

	.inner {padding:0 2.8rem;}
		#cont2 .inner > section{width:calc((100% - 4rem) / 3); margin-right:2rem;}
}

@media(max-width:1024px){
	#cont1{padding:4.5rem 0 3rem 0;}
		#cont1 .inner{flex-direction:column;}
	#cont2{padding-top:5rem;}
		#cont2 .inner{flex-direction:column;}
		#cont2 .inner > section{ width:100%; height:24rem; margin-right:0; margin-bottom:2.8rem;}
	#cont3{padding:1.2rem 0 5rem 0;}
}

@media(max-width:768px){
	.inner {padding:0 1.6rem;}
}


/* 하위링크 셀렉트*/
.underLinkUl > li:nth-child(3) a { color:#113d8e; font-weight:700; }


/* 타이틀 */
#top h1.title a { width:100%; height:5.2rem; padding:0 0 0 6.6rem; background:url(/images/common/mark.png) no-repeat; background-size:auto 5.2rem; /* display:flex; align-items:center; */ word-break:keep-all; }
#top h1.title a span { display:block; font-size:2rem; margin-top:-2px; }
#top h1.title a strong{display:block; font-size:3.2rem; line-height:3rem;}


@media (max-width:768px){
	#top h1.title a { height:4rem; padding:0 0 0 5.0rem; background-size:auto 4rem; font-size:3.0rem; }
	
	#top h1.title a span {font-size:1.6rem; margin-top:-2px; }
	#top h1.title a strong{font-size:2.4rem; line-height:2.6rem;}
}

/* 사이드메뉴 */
.sidemenu li.sns{display:none;}
.sidemenu li:nth-of-type(4), .sidemenu li:last-of-type{display:none;}

.utilList .sns{display:none;}
.utilList > li:last-of-type, .utilList > li:nth-of-type(4){display:none;}


/* 메인 메뉴 */
#menu { position:relative; width:100%; height:5.4rem; border-top:1px solid #ddd; z-index:99;  }
#topMenu { position:relative; max-width:140rem; width:100%; overflow:visible !important; margin:0 auto; }

#topMenu > li { position:relative; float:left; width:calc(100% / 6); text-align:center; display:inline-block; }
#topMenu > li > a:link,
#topMenu > li > a:visited { position:relative; vertical-align:middle; height:5.4rem; line-height:5.3rem; color:#111; font-size:1.9rem; font-weight:700; letter-spacing:-1px; word-break:keep-all; display:block; }
#topMenu > li > a:active,
#topMenu > li > a:focus,
#topMenu > li > a:hover,
#topMenu > li > a.select { color:#284394;  }

#topMenu > li > a:link::before,
#topMenu > li > a:visited::before { position:absolute; left:50%; bottom:0px; content:''; width:0; border-bottom:3px solid #284394; text-align:center; transition:0.3s; transform:translate(-50%, 0); display:block; z-index:100; }
#topMenu > li > a:active::before,
#topMenu > li > a:focus::before,
#topMenu > li > a:hover::before { width:100%; }

#topMenu > li > a:link > ul::before,
#topMenu > li > a:visited > ul::before { position:absolute; left:50%; bottom:0px; content:''; width:0; border-bottom:3px solid #284394; text-align:center; transition:0.3s; transform:translate(-50%, 0); display:block; z-index:100; }
#topMenu > li > a:active > ul::before,
#topMenu > li > a:focus > ul::before,
#topMenu > li > a:hover > ul::before { width:100%; }


@media (max-width:1280px){
	#topMenu > li > a:link,
	#topMenu > li > a:visited { font-size:2.0rem; }
}


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


/* 서브레이아웃 */
#container.sub { position:relative; min-width:140rem; width:140rem; background: linear-gradient(180deg,rgba(238, 244, 247, 0.5) 0%, rgba(255, 255, 255, 0) 200px); padding-top:50px; margin:0 auto; z-index:1; }
	#sLeft { float:left; width:200px; margin-right:60px; }
	#sRight { float:left; position:relative; width:calc(100% - 260px); }
		#content { width:100%; }
#bottom{margin-top:100px;}


@media (max-width:1400px){
	#container.sub { min-width:100%; width:100%; padding:0 24px; background:linear-gradient(180deg, rgba(245, 248, 255, 0.7) 0%, rgba(255, 255, 255, 0.4) 60%); margin:0 auto 100px; z-index:1; }				
	#container.sub > .inner { padding:0; }

		#sLeft { float:left; width:220px; margin-right:30px; }
		#sRight { float:left; position:relative; width:calc(100% - 250px); }
			#content { width:100%; }
}


@media (max-width:1024px){
	#container.sub {background:none; padding-top:0;}		

		#sLeft { display:none; }
		#sRight { width:100%; }
}


@media (max-width:768px){
	#container.sub{padding:0;}
	
	#sRight{padding:0;}
		#content { width:100%; padding:0 16px;}
}





/* 서브비주얼 */
#sVisible {width:100%; margin-top:3.2rem;}
#sVisible .mbrList{position:relative; width:100%;}
#sVisible .mbrList::before{content:''; position:absolute; right:-2rem; bottom:-1.6rem; display:block; width:100%; height:100%; background: linear-gradient(180deg,rgba(202, 224, 235, 0) 0%, rgba(216, 223, 232, 1) 100%); border-radius:5.6rem 2.4rem; filter:blur(10px);}
#sVisible .mbrList li{position:relative; display:block !important; height:100%;  width:100%; border-radius:5.6rem 2.4rem; border:1px solid #f5f5f5;overflow:hidden;}
#sVisible .mbrList li img{position:relative; width:100%; height:auto;}
#sVisible .mbrList li .name{position:absolute; left:0; bottom:0; display:block; width:100%;  font-size:2rem; padding:.8rem 0; padding-left:2.4rem;  background:linear-gradient(0deg, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0) 100%); color:#fff; word-break:keep-all;}
#sVisible .mbrList li .name strong{font-size:2.8rem;}

#sVisible .slick-list{margin:0 -1rem;}
#sVisible .slick-slide{margin:0 1rem;}

#sVisible .btnBox{display:flex; align-items:center; background:#fff; padding:.5rem 1rem; margin-top:1.6rem;}

#sVisible .btnBox button{width:32px; height:32px; border:none; font-size:0; display:block; margin-right:.4rem; border:1px solid #efefef; border-radius:9rem; background:#fff; transition:.3s;}
#sVisible .btnBox button:hover, #sVisible .btnBox button:focus, #sVisible .btnBox button:active{box-shadow:0 4px 10px rgb(0,0,0,0.09);}
#sVisible .btnBox .btn_prev {background:#fff url(/images/common/slick_btn_prev.gif) no-repeat center;}
#sVisible .btnBox .btn_next {background:#fff url(/images/common/slick_btn_next.gif) no-repeat center;}

#sVisible .btnBox .btn_pause{background:#fff url(/images/common/slick_btn_pause.gif) no-repeat center;}
#sVisible .btnBox .btn_pause.on{background:#fff url(/images/common/slick_btn_play.gif) no-repeat center;}










/* 패스바 */
.pathbar { position:absolute; left:0; top:-60px; width:100%; height:60px; background:#d80c18; z-index:3;  }
.pathbar > ul { height:60px; overflow:visible; }
.pathbar > ul > li { position:relative; float:left; width:281px; height:60px; line-height:60px; border-right:1px solid #b60a14; overflow:visible; }
.pathbar > ul > li.home { width:61px; }
.pathbar > ul > li.home.print { position:absolute; right:0; top:0; border-right:none; border-left:1px solid #b60a14; }
.pathbar > ul > li.home > a:link,
.pathbar > ul > li.home > a:visited { width:61px; padding-left:0px; text-align:center; display:block; }
.pathbar > ul > li.home > a:active,
.pathbar > ul > li.home > a:focus,
.pathbar > ul > li.home > a:hover { background:#c80a15; }

.pathbar > ul > li.depth > a:link,
.pathbar > ul > li.depth > a:visited { width:100%; padding-left:20px; background:url(/images/inc/pathbar_blt.gif) no-repeat right top; color:#eee; letter-spacing:-1px; display:block; }
.pathbar > ul > li.depth > a:active,
.pathbar > ul > li.depth > a:focus,
.pathbar > ul > li.depth > a:hover { color:#fff; } 



.pathbar ul li ul.ulMenu1 { position:absolute; left:-1px; top:60px; width:calc(100% + 2px); border:1px solid #ddd; border-top:none; background:#fff; box-shadow:1px 5px 8px rgba(0,0,0,0.05); display:none; overflow:visible; z-index:11; }
.pathbar ul li ul.ulMenu2 { position:absolute; left:-1px; top:60px; width:calc(100% + 2px); border:1px solid #ddd; border-top:none; background:#fff; box-shadow:1px 5px 8px rgba(0,0,0,0.05); display:none; z-index:12;  }


.pathbar ul li ul > li { width:100%; display:block;  }
.pathbar ul li ul a:link,
.pathbar ul li ul a:visited { width:100%; padding:8px 0 8px 20px; line-height:1.5; font-size:95%; transition:0.2s; display:block; }
.pathbar ul li ul a:active,
.pathbar ul li ul a:focus,
.pathbar ul li ul a:hover { background:#ff4a0c; color:#fff; }




@media (max-width:768px){
	.pathbar { top:0; height:50px; }
	.pathbar > ul { height:50px; overflow:visible; }
	.pathbar > ul > li { width:calc(50% - 51px); height:50px; line-height:50px; }
	.pathbar > ul > li.home { width:51px; }
	.pathbar > ul > li.home.print { border-left:none; }
	
	
	.pathbar > ul > li.home > a:link,
	.pathbar > ul > li.home > a:visited { width:51px; }
	
	.pathbar > ul > li.home a img { position:relative; top:-5px; left:-5px;}
	
	.pathbar > ul > li.depth > a:link,
	.pathbar > ul > li.depth > a:visited { padding-left:5px; letter-spacing:-1.5px; background-position:103% -5px; }

	.pathbar ul li ul.ulMenu1 { top:50px; }
	.pathbar ul li ul.ulMenu2 { top:50px; }
	
	.pathbar ul li ul a:link,
	.pathbar ul li ul a:visited { padding:8px 0 8px 5px; letter-spacing:-1.5px; }
}






/* 페이지 타이틀 */
.pagetitle { position:relative; width:100%; height:141px; border-bottom:1px solid #ddd; margin-bottom:50px; }

.pagetitle .path { position:absolute; left:0; top:100px; font-size:90%; color:#888; word-spacing:5px; }
.pagetitle .path span { position:relative; top:0px; width:4px; height:7px; line-height:7px; background:url(/images/common/path_blt.gif) no-repeat; text-indent:-9999em; display:inline-block; margin:0 0.8rem; }
.pagetitle .path strong { color:#666; }

.pagetitle h2 { padding:41px 0 0 0px; font-family:pgovb; font-size:220%; color:#000; }


.pagetitle .snsbtn { position:absolute; right:0; bottom:15px; height:35px; }
.pagetitle .snsbtn ul { height:35px; overflow:hidden;}

.pagetitle .snsbtn ul.pcTabletBtn { display:block; }
.pagetitle .snsbtn ul.mobileBtn { display:none; }

.pagetitle .snsbtn ul li { float:left; margin-left:10px; }
.pagetitle .snsbtn ul li.kakaostory { width:35px; height:35px; line-height:35px; background:#fcb700; border-radius:50%; text-align:center; }
.pagetitle .snsbtn ul li.kakaostory img { padding-top:5px; }


@media (max-width:1400px){
	.pagetitle .snsbtn { right:15px; }
}



@media (max-width:1024px){
	.pagetitle { height:120px; }
	
	.pagetitle .path { top:80px; }	
	.pagetitle h2 { padding:32px 0 0 0px; font-size:200%;  }
	
	.pagetitle .snsbtn { bottom:15px; }
	
	.pagetitle .snsbtn ul.pcTabletBtn { display:none; }
	.pagetitle .snsbtn ul.mobileBtn { display:block; }
	.pagetitle .snsbtn ul li { margin-left:5px; }
			
}

@media (max-width:768px){
	.pagetitle { height:110px; border:none;  }
	.pagetitle .path { position:static; width:100%; height:55px; line-height:55px; padding:0 80px 0 10px; background:#667ba2; color:#fff; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; display:block; }	
	.pagetitle .path strong { color:#fff; }
	
	.pagetitle h2 { padding:40px 15px 0 15px; font-size:200%; }

	.pagetitle .snsbtn { right:8px; top:10px; }
	.pagetitle .snsbtn ul li { margin-left:8px; }
}





/*하단 숨김처리*/
#bottom .f-link, #bottom .f-btm .f-btm-text .f-menu{display:none;}

/* 하단 */
.foot-quick { width:100%; background:#fff; border-bottom:1px solid #ddd; }
.foot-quick .inner {  max-width:140rem; width:100%; margin:0 auto; }
.foot-quick .inner > ul { display:flex; justify-content:space-between; border-left:1px solid #ddd; }
.foot-quick .inner > ul > li { position:relative; width:50%; padding:0 2.4rem; border-right:1px solid #ddd;  display:flex; justify-content:space-between; align-items:center; }
.foot-quick .inner > ul > li > .bottomLink { width:100%; height:5.2rem;  background:#fff; text-align:left;  }
.foot-quick .inner > ul > li > i { width:2rem; height:2rem; display:block; transition:transform 0.3s; }
.foot-quick .inner > ul > li > .bottomLinkList { position:absolute; left:-0.1rem; top:-17rem; width:calc(100% + 0.2rem); height:17.0rem; padding:1.6rem; border:1px solid #ddd; background:#f4f4f4; overflow:auto; display:none; } 
.foot-quick .inner > ul > li > .bottomLinkList a:link,
.foot-quick .inner > ul > li > .bottomLinkList a:visited { width:100%; padding:0 1.6rem; line-height:3.0rem; color:#333; font-size:1.6rem; display:block; }
.foot-quick .inner > ul > li > .bottomLinkList a:active,
.foot-quick .inner > ul > li > .bottomLinkList a:focus,
.foot-quick .inner > ul > li > .bottomLinkList a:hover { background:#fff; color:#284394; border-radius:0.8rem; box-shadow:0.3rem 0.3rem 0.6rem rgba(0,0,0,0.1); }

.foot-quick .inner > ul > li > .bottomLink:active,
.foot-quick .inner > ul > li > .bottomLink:focus,
.foot-quick .inner > ul > li > .bottomLink:hover { color:#284394; }

.foot-quick .inner > ul > li > .bottomLink:active + i,
.foot-quick .inner > ul > li > .bottomLink:focus + i,
.foot-quick .inner > ul > li > .bottomLink:hover + i {  transform:rotate(180deg); }


@media (max-width:1400px){
	.foot-quick .inner  { padding:0; }
	.foot-quick .inner > ul { border-left:none; }
	.foot-quick .inner > ul > li:last-child { border-right:none; }
	
}

@media (max-width:560px){
	.foot-quick .inner > ul { flex-wrap:wrap; justify-content:flex-start; }
	.foot-quick .inner > ul > li { width:100%; border-right:none; border-bottom:1px solid #ddd; }
	.foot-quick .inner > ul > li:last-child { border-bottom:none; }
}