@charset "utf-8";

#search,
#footer .link,
.linksite,
.btn_menu{display:none;}

.logo {top:6px;}
.logo a > span { margin-top: -6px; }
.logo span > em { font-size: 20px; color: #fff; font-weight: 400; padding: 0; letter-spacing: -1px; }
.logo span > span { font-size: 30px; color: #fff; font-weight: 400; padding: 0; margin-top: 2px; letter-spacing: -1px; }

#top{background:#2179b9; height: 50px;}
#top:after { display: none; }
#top .global > li,
#top .global > li.list,
#top .global > li:first-child { width: auto; border: none; }
#top .global > li > a { height: 50px; font-size: 15px; line-height: 50px; background: transparent; color: #fff; padding: 0 20px; border: none; }
#top .global > li > a.on, 
#top .global > li > a:hover { background: #fff; color: #333; } 
#top .global > li > a.current { border: none; }
#top .global > li.list > a:after { display: none; border-color: #fff; }
#top .global > li.list > a.on:after,
#top .global > li.list > a.current:after,
#top .global > li.list > a:hover:after { border-color: #333; }
#top .global li div { top: 50px; left:0;}
#top .global .sns{display:none;}
#top .global2{float:right; padding:14px 0 0 0;}
#top .global2 li{float:left; padding:0 1.5em; line-height:100%;}
#top .global2 li:first-child{border-right:1px solid #745f4a;}
#top .global2 li:last-child{padding-right:0;} 

#header{ width: 100%; height: 60px; background-color: rgba(0, 0, 0, .7); position: absolute; top: 50px; left: 0; z-index: 2; }
#font_control{padding:0;}
#font_control ul{overflow:hidden; width:100%;}
#font_control li{float:left; width:auto; height:50px; line-height:50px; font-size:11px; padding:0; text-align:center; border:none; margin: 0; margin-left: 20px;}
#font_control li:first-child{color:#555; margin-left: 0;}
#font_control li a{display:block; width:100%; height:50px; line-height:50px; border:none; color: #fff;}
#font_control li:first-child a { font-size: 15px; font-size: 100; }
#font_control li.btns { width: 14px; }
#font_control li.btns a{text-indent:-999px; font-size:0; background:url("/images/member/common/icon_util.png") -68px 14px no-repeat;}
#font_control li.big a{background-position-x: 0px;}
#font_control li.small a{background-position-x: -35px;}
#font_control li.end { width: 22px; }
#font_control li a:hover { background-color: transparent; }

#menuArea{top:0px; background: transparent; border: none;}
#menuArea:before { top:60px; display: none; }
#menuArea:after { content: ''; display: block; width: 100%; height: 0px; background-color: rgba(255, 255, 255, .9); position: absolute; left: 0; right: 0; top: 60px; margin: auto; z-index: 1; transition: .2s; }
#menuArea.on:after { height: 180px; }
#menuArea .inner { z-index: 2; }
#menuArea .bar{top:57px; background:#fff;}

#topmenu{ padding: 0; padding-left:300px; }
#topmenu > li { width:16%;}
#topmenu > li:nth-child(4){width:15%;}
#topmenu > li:nth-child(6){width:21%;}
#topmenu > li > a{ line-height:60px; color: #fff; }
#topmenu > li:hover > a, 
#topmenu > li > a:hover, 
#topmenu > li > a:active, 
#topmenu > li > a:focus, 
#topmenu > li.current_on > a { color: #fff; } 
#topmenu li li a:hover, 
#topmenu li li a:active, 
#topmenu li li a:focus, 
#topmenu li li.current_on a{color:#2179b9;}
#topmenu li .menu{height:180px; background:#fff;}

#footer{padding:30px 0 40px; border-top:1px solid #ccc; color: #888; background-color: #f3f3f3; letter-spacing:0;}
#footer address{margin:0 0 8px;}

#pageTitle { position: relative; margin-top: 50px; margin-bottom: 70px; }
#pageTitle:before { content: ''; display: block; width: 100%; height: 1px; background-color: #e2edf5; position: absolute; left: 0; bottom: 0; }
#pageTitle:after { content: ''; display: block; clear: both; }
#pageTitle h3{font-size:30px; font-weight: 800; float: left; position: relative; padding: 0; }
#pageTitle h3:after{content: ''; display: block; width:100%; height: 1px; background:#2179b9; margin-top: 20px;}

/* 문서정보 
#location{z-index:2; position:absolute; right:0; top:55px; font-size:14px;}
#location .inner{overflow:hidden; width:100%;}
#location a{float:left; width:16px; height:15px; text-indent:-999px; font-size:0; opacity:0.4; background:url(/images/common/ico_sub.png) no-repeat 0 -267px;}
#location span{position:relative; float:left; line-height:100%; padding:0 0 0 20px; vertical-align:top; color:#868686;}
#location span:after{content:''; display:block; position:absolute; top:50%; left:8px; width:5px; height:9px; margin:-4px 0 0 0; background:url(/images/common/ico_sub.png) no-repeat 0 -363px;}
*/
#location { background-color: #f7f7f7; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
#location .inner > a { font-size: 0; display: block; width: 50px; height: 50px; float: left; border-right: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; background: url("/images/member/common/icon_home.png") center no-repeat; }  
.snb > li > a { height: 50px; line-height: 50px; }
.snb > li > a:after { width: 9px; height: 5px; background: url("/images/member/common/icon_arrow_down.png") center no-repeat; top: 0; right: 20px; bottom: 0; margin: auto; }
.snb > li > a:hover:after { background-color: transparent; }
.snb ul { top: 50px; }

#subContent{margin: 0 auto; padding:0 0 80px; background: url("/images/member/common/bg_sub_menu.png") left bottom repeat-y;}
#subContent:after{content:''; display:block; clear:both; width:100%;}

#submenu {width:220px; margin: 0;}
#submenu .sm_tit{height:130px; margin:0; background:#2179b9;}
#submenu .depth2 > li{margin:0;}
#submenu .depth2 > li > a{border:none; border:1px solid #e5e5e5; color: #333; }
#submenu .depth2 > li > a:hover,
#submenu .depth2 > li > a:focus,
#submenu .depth2 > li > a:active,
#submenu .depth2 > li.current_on > a{color: #333; background:#e2edf5; border: 1px solid #e5e5e5;}
#submenu .depth2 > li > a:before { display: none; } 

#subVisual{height:300px; background: #d0dbe3 url("/images/member/common/img_sub_visual.jpg") center no-repeat; background-size: cover; overflow: hidden;}
#subVisual .img { position: relative; left: auto; top: auto; height: 100%; transform: none; }
#subVisual .img .wrap { position: relative; height: 100%; overflow: hidden; }
#subVisual .img .wrap .centered { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%); }
#subVisual .img .wrap .centered img { position: absolute; top: 0; left: 0; width: auto; max-width: 1920px; height: 100%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
#subVisual .inner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
#subVisual .txt { text-align: center; height: 106px; position: absolute; top: 100px; right: 0; bottom: 0; left: 0; margin: auto; }
#subVisual .txt h3 { font-size: 25px; font-weight: 800; color: #ffd303; margin-bottom: 10px; text-shadow: 2px 2px 2px rgba(1, 1, 1, .4); }
#subVisual .txt p { margin-top: 7px; font-weight: 200; font-size: 15px; color: #fff; text-shadow: 2px 2px 2px rgba(1, 1, 1, .4); }
#subVisual:before { content: '';display: block; width: 100%; height: calc(100% - 60px); background: rgba(0, 0, 0, .3); position: absolute; left: 0; bottom: 0; right: 0; margin: auto; border-top: 1px solid #888; }

#fontSize,
#sub_default{float:left; width:100%;}
@media all and (max-width:1220px) {

	.snb > li:first-child{width:180px;}
}
@media all and (max-width:1024px) {
	#top .global { opacity: 1; position: relative; visibility: visible; width: auto; background: transparent; top: auto; }
	#top .global > li { float: left; }
	#top .global a[target="_blank"]:after, #top .global > li:first-child > a:after { display: none; }
	#top .global > li.list > a:after, 
	#top .global > li.list > a.on:after { transform: rotate(45deg); margin: -4px 0 0 6px; }
	#top .global2{padding:11px 0 0 0;}

	.logo { text-align: left; padding: 9px 0 0 20px; }

	.btn_menu { display:block; width: 50px; height: auto; top: 77px; left: auto; right: 20px; padding: 0; }
	.btn_menu .bar { height: 6px; border-radius: 3px; background: #fff; margin: 7px 0 7px 0; }

	.m_menu { position: fixed; left: auto; right: -100%; }
	.m_menu.on { left: auto; right: 0; }
	.m_menu .logo { padding: 0; }
	.m_menu .logo span > em { font-size: 18px; }
	.m_menu .logo span > span { font-size: 24px; margin-top: 0px; }

	#subVisual { height: 250px; }

/*
	#location {top:0; width:100%; height:34px; background:#f2f2f2; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5;}
	#location span{height:34px; line-height:34px; padding:0 1.5em 0 0; min-width:0; border-right:none; color:#404040;}
	#location span:after{left:auto; right:8px;}
	#location span.end:after{display:none;}
	#location a{margin:0 5px; height: 34px; background-position: 0px -258px; }
*/
	#location .inner > a { width: 37px; height: 37px; } 
	.snb > li,
	.snb > li:first-child,
	.snb > li:last-child { width: auto; min-width: 120px; } 
	.snb > li > a { height: 37px; line-height: 37px; padding: 0 30px 0 10px; }
	.snb > li > a:after { right: 10px; }
	.snb ul { top: 37px; }

	#pageTitle { margin-top: 30px; margin-bottom: 50px; }
	#pageTitle h3 { font-size: 25px; }

	#subContent { background: none; }
	#subContent #content { float: none; width: 96%; margin: 0 auto; }
	#sub_default{padding:0px;}

	#footer{letter-spacing:-1px;}
}
@media all and (max-width:768px) {
	#top { height: 40px; }
	#top .global > li > a { height: 40px; line-height: 40px; font-size: 13px; padding: 0 10px; }
	#top .global2{padding:9px 2% 0 0;}
	#top .global2 li{padding:0 10px;}
	#top .global li div{top:40px;}

	#header { height: 70px; top: 40px; }
	
	.logo { padding: 18px 0 0 20px; }
	.logo a > span { margin-top: -4px; }
	.logo span > em { font-size: 16px; }
	.logo span > span { font-size: 22px; margin-top: -2px; }
	
	.btn_menu { top: 59px; width: 35px; }
	.btn_menu .bar { height: 4px; margin: 5px 0 5px; border-radius: 2px; }

	#pageTitle { margin-bottom: 30px; }

	#subVisual { height: 180px; }
	#subVisual:before { height: calc(100% - 70px); }
	#subVisual .txt { height: 82px; top: 70px; }
	#subVisual .txt h3 { font-size: 20px; margin-bottom: 5px; }
	#subVisual .txt div img { height: 23px; max-width: none; }
	#subVisual .txt p { margin-top: 3px; }

}
@media all and (max-width:568px) {
	#top .global{width:100%;}
	#top .global > li {width:25% !important;}
	#top .global > li > a{padding:0;}
	#top .global .list2 div,
	#top .global .list3 div{left:auto; right:0;}

	#pageTitle h3 { font-size: 22px; }
}
@media all and (max-width:480px) {
	#subVisual { height: 160px; }
	#subVisual .txt { height: 51px; }
	#subVisual .txt p { display: none; }
}
@media all and (max-width:400px) {
	
	#top .global2 li:first-child{display:none;}

	#pageTitle h3{font-size:21px;}
}