@charset "utf-8";


/* Skip Navigation */
/* [Web Accessibility] item 14 : 평소에는 화면 밖(top:-120px)에 두고, 초점을 받으면 상단에서 부드럽게 내려온다.
   흰 글자 / #0b5fa4 배경 = 명도대비 6.59:1 (기준 4.5:1), 초점 표시는 안쪽 흰 테두리로 제공 */
.skipnav{position:absolute;left:0;top:0;width:100%;z-index:9999}
.skipnav a{position:absolute;left:20px;top:-120px;display:inline-block;padding:14px 28px;
	color:#fff;background-color:#0a5a9c;font-size:115%;font-weight:bold;line-height:1.2;white-space:nowrap;
	border-radius:0 0 8px 8px;box-shadow:0 3px 10px rgba(0,0,0,.3);
	-webkit-transition:top .18s ease-out;transition:top .18s ease-out}
.skipnav a:hover,.skipnav a:active{color:#fff}
.skipnav a:focus{top:0;color:#fff;outline:2px solid #fff;outline-offset:-6px;z-index:99999}
.skipnav.blind{display:none} /* [Web Accessibility] item 14 : neutralize legacy per-page skipnav blocks (replaced by common template skipnav) */


/* header */
#header{width:100%;min-height:126px}
#header.temp_green{background:url('/resources/img/common/header_bg_green.gif') repeat-x left bottom #fff}
#header.temp_blue{background:url('/resources/img/common/header_bg_blue.gif') repeat-x left bottom #fff}
#header.temp_pink{background:url('/resources/img/common/header_bg_pink.gif') repeat-x left bottom #fff}

#headerWrap{position:relative;width:980px;margin:0 auto}
#headerWrap h1{position:absolute;left:1px;top:38px}
#headerWrap p.home{position:absolute;left:282px;top:55px;font-size:130%;color:#303030;font-weight:bold} /*2014-12-04 Edit */
.temp_green #headerWrap p.home a{color:#303030} /*2014-12-04 Edit */
.temp_green #headerWrap p.home a:hover,.temp_green #headerWrap p.home a:focus,.temp_green #headerWrap p.home a:active,.temp_green #headerWrap p.home a.active{color:#178333} /*2014-12-04 Edit */
.temp_blue #headerWrap p.home a{color:#303030} /*2014-12-04 Edit */
.temp_blue #headerWrap p.home a:hover,.temp_blue #headerWrap p.home a:focus,.temp_blue #headerWrap p.home a:active,.temp_blue #headerWrap p.home a.active{color:#1774c0} /*2014-12-04 Edit */
.temp_pink #headerWrap p.home a{color:#303030} /*2014-12-04 Edit */
.temp_pink #headerWrap p.home a:hover,.temp_pink #headerWrap p.home a:focus,.temp_pink #headerWrap p.home a:active,.temp_pink #headerWrap p.home a.active{color:#e20f10} /*2014-12-04 Edit */

#utilWrap{position:absolute;right:4px;top:10px}
#utilWrap:after{content:"";display:block;clear:both}
#utilWrap p,#utilWrap #utilMenu{float:left}
#utilWrap p{padding-right:9px;height:22px;color:#1b1bf6;font-weight:bold/*;font-family:Dotum,'돋움',Arial,sans-serif !important*/;font-size:100%;line-height:22px;letter-spacing:-0.05em}/* 이름·세션 타이머. 명도대비 8.29:1 — AAA(7:1) 충족 */
/* 이름·세션 타이머 색은 메뉴 구역(temp_green/blue/pink)과 무관하게 동일하게 쓴다.
   기존의 구역별 색상 재정의(#157a04 / #0f6dbd / #c62828)는 제거했다. */
#utilMenu ul:after{content:"";display:block;clear:both}
#utilMenu li{float:left;height:22px;padding-left:36px/*;font-family:Dotum,'돋움',Arial,sans-serif !important*/;font-size:90%;line-height:22px;letter-spacing:-0.05em}
#utilMenu li a{color:#141414}/* 마이페이지·로그아웃(비로그인 시 회원가입·로그인). 명도대비 18.43:1 — AAA(7:1) 충족 */
.temp_green #utilMenu li a:hover,.temp_green #utilMenu li a:focus,.temp_green #utilMenu li a:active{color:#178306}
.temp_blue #utilMenu li a:hover,.temp_blue #utilMenu li a:focus,.temp_blue #utilMenu li a:active{color:#1774c0}
.temp_pink #utilMenu li a:hover,.temp_pink #utilMenu li a:focus,.temp_pink #utilMenu li a:active{color:#e21012}
/* 유틸 메뉴 아이콘: 이미지 파일(ico_util.gif, 22x88, 글리프 #c0c0c0 + 흰색 투명)은 그대로 두고
   CSS 필터로 글자색과 같은 #141414 로 보이게 한다.
   - li 에 직접 filter 를 걸면 안 된다: 자식인 링크 글자까지 필터를 받아 hover/focus 색(구역별 강조색)이 사라진다.
     그래서 아이콘을 :before 로 분리하고 그 요소에만 필터를 건다.
   - brightness(0) 으로 글리프를 #000 으로 만든 뒤 invert() 로 밝기를 올려 #141414 를 만든다.
     계산값 7.843%(=20/255)는 브라우저가 내림 처리해 #131313 이 나오므로, 실측으로 #141414 가 나오는
     범위(7.9%~8.2%)의 가운데인 8% 를 쓴다. 투명 영역은 알파가 유지되므로 그대로 투명하다.
   - IE11 이하는 CSS filter 함수를 지원하지 않아 원래 색(#c0c0c0)으로 보인다(기능 저하 없음). */
#utilMenu li{position:relative;background:none}
#utilMenu li:before{content:"";position:absolute;left:12px;top:0;width:22px;height:22px;
	background:url('/resources/img/common/ico_util.gif') no-repeat 0 0;
	-webkit-filter:brightness(0) invert(8%);filter:brightness(0) invert(8%)}
#utilMenu li.umJoin:before{background-position:0 0}
#utilMenu li.umLogin:before{background-position:0 -22px}
#utilMenu li.umMypage:before{background-position:0 -44px}
#utilMenu li.umLogout:before{background-position:0 -66px}

#gnbWrap{position:absolute;right:0;top:37px}
#gnb{position:relative}
#gnb ul:after,#gnb ul li ul:after{content:"";display:block;clear:both}
#gnb li,#gnb li ul li{float:left}
#gnb li a{display:block;height:55px;padding:0 48px;font-size:130%;color:#303030;font-weight:bold;line-height:55px}
#gnb li.m5 a{padding:0 4px 0 48px}
#gnb li ul{position:absolute;top:49px;padding-top:6px}
.temp_green #gnb li ul{background:url('/resources/img/common/gnb_point_green.gif') no-repeat 0 0}
.temp_blue #gnb li ul{background:url('/resources/img/common/gnb_point_blue.gif') no-repeat 0 0}
.temp_pink #gnb li ul{background:url('/resources/img/common/gnb_point_pink.gif') no-repeat 0 0}
#gnb li.m1 ul{left:28px;background-position:60px 0 !important}
#gnb li.m2 ul{left:162px;background-position:110px 0 !important}
#gnb li.m3 ul{left:343px;background-position:110px 0 !important}
#gnb li.m4 ul{right:72px;background-position:107px 0 !important}
#gnb li.m5 ul{right:0;background-position:330px 0 !important}
#gnb li ul li a{display:block;height:34px;padding:0 4px 0 22px;font-size:100%;color:#303030;font-weight:normal;letter-spacing:-0.02em;line-height:34px}
.temp_green #gnb li ul li a,.temp_blue #gnb li ul li a,.temp_pink #gnb li ul li a{color:#303030}
#gnb li.m5 ul li a{padding:0 4px 0 22px}
.temp_green #gnb li a:hover,.temp_green #gnb li a:focus,.temp_green #gnb li a:active,.temp_green #gnb li.on a,.temp_green #gnb li.on a.active,
.temp_green #gnb li.on ul li a:hover,.temp_green #gnb li.on ul li a:focus,.temp_green #gnb li.on ul li a:active,.temp_green #gnb li.on ul li a.active{color:#178333}
.temp_blue #gnb li a:hover,.temp_blue #gnb li a:focus,.temp_blue #gnb li a:active,.temp_blue #gnb li.on a,.temp_blue #gnb li.on a.active,
.temp_blue #gnb li.on ul li a:hover,.temp_blue #gnb li.on ul li a:focus,.temp_blue #gnb li.on ul li a:active,.temp_blue #gnb li.on ul li a.active{color:#1774c0}
.temp_pink #gnb li a:hover,.temp_pink #gnb li a:focus,.temp_pink #gnb li a:active,.temp_pink #gnb li.on a,.temp_pink #gnb li.on a.active,
.temp_pink #gnb li.on ul li a:hover,.temp_pink #gnb li.on ul li a:focus,.temp_pink #gnb li.on ul li a:active,.temp_pink #gnb li.on ul li a.active{color:#e20f10}
#gnb li.on ul li a{color:#303030}
.temp_green #gnb li.on ul li a,.temp_blue #gnb li.on ul li a,.temp_pink #gnb li.on ul li a{color:#303030}
#gnb li ul{display:none}
#gnb li.on ul{display:block}


/* content */
#mainContent{width:100%}
#subContent{width:100%;min-height:470px}
#contentWrap{width:980px;margin:0 auto;padding-bottom:35px}
#contentWrap:after{content:"";display:block;clear:both}
#subContent.temp_green{background:url('/resources/img/common/content_topbg_green.gif') repeat-x 0 0}
#subContent.temp_blue{background:url('/resources/img/common/content_topbg_blue.gif') repeat-x 0 0}
#subContent.temp_pink{background:url('/resources/img/common/content_topbg_pink.gif') repeat-x 0 0}


/* quick menu */
#quickMenu{position:absolute;left:50%;top:125px;margin-left:504px;width:66px}
#quickMenu h2{display:block;width:66px;height:50px;padding-top:21px;text-align:center;font-size:90%;color:#fff;font-weight:bold;line-height:120%;background-color:#595959} /* 웹접근성 명도대비 4.5:1 이상 */
#quickMenu.temp_green h2{background-color:#256529}/* 흰 글자 기준 AAA 7.07:1 (기존 #2e7d32 5.13:1) */
#quickMenu.temp_blue h2{background-color:#185d8b}/* 흰 글자 기준 AAA 7.05:1 (기존 #1c6ea4 5.50:1) */
#quickMenu.temp_pink h2{background-color:#aa2222}/* 흰 글자 기준 AAA 7.09:1 (기존 #c62828 5.62:1) */
#quickMenu ul{width:66px;padding-bottom:25px;background:url('/resources/img/common/quickmenu_bg.png') no-repeat 0 bottom}
#quickMenu li a{position:relative;display:block;padding-top:45px;font-size:90%;color:#141414;text-align:center;line-height:14px;letter-spacing:-0.05em}/* 명도대비 17.35:1 (패널 배경 #f8f8f8 기준) — AAA(7:1) 충족 */
#quickMenu li a:hover,#quickMenu li a:focus,#quickMenu li a:active{color:#333}
/* 퀵메뉴 아이콘: 이미지(ico_quickmenu_*.png, 132x400)는 그대로 두고 CSS 필터로 #141414 로 보이게 한다.
   - 스프라이트는 왼쪽 열(0)=기본 #b9b9b9, 오른쪽 열(-66px)=hover 테마색(파랑/초록/빨강) 구조다.
   - a 에 직접 filter 를 걸면 링크 글자까지 필터를 받아 hover 시 글자색 변화가 사라지므로
     아이콘을 :before 로 분리한다(글리프가 셀 상단 41px 안에 들어가므로 높이 45px 로 충분).
   - 기본 상태만 필터하고 hover/focus/active 에서는 필터를 풀어 테마색 열을 그대로 보여 준다.
     전부 필터하면 기본과 hover 가 똑같은 #141414 가 되어 마우스 위치를 알 수 없다.
   - IE11 이하는 CSS filter 함수를 지원하지 않아 원래 색(#b9b9b9)으로 보인다(기능 저하 없음). */
#quickMenu li a:before{content:"";position:absolute;left:0;top:0;width:66px;height:45px;background-repeat:no-repeat;
	-webkit-filter:brightness(0) invert(8%);filter:brightness(0) invert(8%)}
#quickMenu li a:hover:before,#quickMenu li a:focus:before,#quickMenu li a:active:before{-webkit-filter:none;filter:none}
#quickMenu.temp_green li a:before{background-image:url('/resources/img/common/ico_quickmenu_green.png')}
#quickMenu.temp_blue li a:before{background-image:url('/resources/img/common/ico_quickmenu_blue.png')}
#quickMenu.temp_pink li a:before{background-image:url('/resources/img/common/ico_quickmenu_pink.png')}
#quickMenu li.qm1 a:before{background-position:0 0}
#quickMenu li.qm1 a:hover:before,#quickMenu li.qm1 a:focus:before,#quickMenu li.qm1 a:active:before{background-position:-66px 0}
#quickMenu li.qm2 a:before{background-position:0 -80px}
#quickMenu li.qm2 a:hover:before,#quickMenu li.qm2 a:focus:before,#quickMenu li.qm2 a:active:before{background-position:-66px -80px}
#quickMenu li.qm3 a:before{background-position:0 -160px}
#quickMenu li.qm3 a:hover:before,#quickMenu li.qm3 a:focus:before,#quickMenu li.qm3 a:active:before{background-position:-66px -160px}
#quickMenu li.qm4 a:before{background-position:0 -240px}
#quickMenu li.qm4 a:hover:before,#quickMenu li.qm4 a:focus:before,#quickMenu li.qm4 a:active:before{background-position:-66px -240px}
#quickMenu li.qm5 a:before{background-position:0 -320px}
#quickMenu li.qm5 a:hover:before,#quickMenu li.qm5 a:focus:before,#quickMenu li.qm5 a:active:before{background-position:-66px -320px}

/* footer */
#footer{width:100%;min-height:115px;border-top:1px solid #cdcdcd}/* 201503 */
#footerWrap{position:relative;width:980px;margin:0 auto}
#footerWrap h2{position:absolute;left:2px;top:29px}
#footerLink{width:746px;margin-left:234px;padding:29px 0 10px 0;font-size:100%;line-height:100%;letter-spacing:-0.05em}
#footerLink ul:after{content:"";display:block;clear:both}
#footerLink li{float:left;padding:0 13px 0 13px;background:url('/resources/img/common/footerlink_line.gif') no-repeat left 1px}
#footerLink li.fst{background:none}
#footerLink li a{color:#555;font-weight:bold}
#footerLink li a:hover,#footerLink li a:focus,#footerLink li a:active{color:#005b9b}/* 명도대비 AAA 7.07:1 (기존 #0074c5 4.88:1) */
#footerInfo{margin-left:247px;font-size:90%;color:#232323;letter-spacing:0.01em}/* 주소·사업자등록번호. 명도대비 15.72:1 (기존 #555 7.46:1) */
#footerInfo address,#footerInfo span{float:left;padding-right:25px}
#footerInfo:after{content:"";display:block;clear:both}
#footerTel{margin-left:247px;padding-top:4px;font-size:90%;color:#232323;letter-spacing:0.06em}/* 문의전화. 파란 번호(.fontBlue #034dae)는 그대로 둔다 */
#familyMark{position:absolute;right:0;top:28px}
#gov30Logo{position:absolute;right:140px;top:27px}

/* footer 하단 고정 */
/*  #footer{position:fixed;bottom:0px;background-color:#fff} */
/*  #contentWrap{padding-bottom:130px !important}  */

/*error*/
#error_set {position:relative;margin:0 auto;width:670px;}
#error_box {margin:150px 0 0 0;width:670px;height:382px;background:url('/resources/img/join/bg_error.gif') no-repeat;}
#errorp_box {margin:150px 0 0 0;width:670px;height:382px;background:url('/resources/img/join/bg_page.gif') no-repeat;}
#error_txt {margin:auto; text-align:center}
#error_txt img{margin:0 0 15px 0;}
#error_txtbg {float:left;margin:50px 0 0 21px;width:618px;height:94px;background:url('/resources/img/join/bg_error_txt.gif') no-repeat;overflow:hidden;}
#error_txtbg .error_text {margin:30px 24px 0 24px;}
#error_txtbg .error_text2 {margin:auto; text-align:center}
#error_btnbox {float:left;width:670px;margin:20px 0 0 0;overflow:hidden;}
#error_btn {text-align:center;}
#error_btn img {padding:0 5px 0 0;overflow:hidden;}

/* 새글(NEW) 배지 명도대비 보정 (웹접근성 검사항목 8)
   이미지 파일(ico_new.gif, notice_new.gif)은 원본 그대로 두고 SVG 필터로 배경색만 어둡게 한다.
   필터 정의는 WEB-INF/layouts/home/header.jsp 에 인라인 SVG 로 들어 있다.
   초록 #68b830 -> #157a04 (흰 글리프 대비 2.47:1 -> 5.50:1)
   파랑 #58ace9 -> #0f6dbd (흰 글리프 대비 2.47:1 -> 5.33:1)
   IE 는 CSS filter:url() 을 지원하지 않아 원래 색으로 보인다(기능 저하 없음). */
img[src*="ico_new.gif"]{filter:url('#a11yNewGreen')}
img[src*="notice_new.gif"]{filter:url('#a11yNewBlue')}