@charset "utf-8";


/* SNB */
#sideMenu{float:left;width:190px}
#sideMenu h2{display:block;width:100%;height:70px;text-align:center;font-size:150%;color:#fff;font-weight:bold;line-height:76px}
.temp_green #sideMenu h2{background:#157a04} /* 웹접근성 명도대비 4.5:1 이상 */
.temp_blue #sideMenu h2{background:#0f6dbd}
.temp_pink #sideMenu h2{background:#c62828}
#snb{width:100%}
#snb ul{margin-top:8px}
#snb li{border-bottom:1px solid #cdcdcd}
#snb li a{display:block;width:164px;height:36px;padding-left:26px;font-size:120%;color:#141414;line-height:36px;font-weight:bold}/* 명도대비 18.43:1 (기존 #666 5.74:1) */
.temp_green #snb li a:hover,.temp_green #snb li a:focus,.temp_green #snb li a:active,.temp_green #snb li.on a{color:#157a04}
.temp_blue #snb li a:hover,.temp_blue #snb li a:focus,.temp_blue #snb li a:active,.temp_blue #snb li.on a{color:#1032bd}
.temp_pink #snb li a:hover,.temp_pink #snb li a:focus,.temp_pink #snb li a:active,.temp_pink #snb li.on a{color:#a02626}
#snb li a.active,#snb li a.active:hover,#snb li a.active:focus,#snb li a.active:active,#snb li.on a.active{font-weight:bold;letter-spacing:-0.05em}
.temp_green #snb li a.active,#snb li a.active:hover,.temp_green #snb li a.active:focus,.temp_green #snb li a.active:active,.temp_green #snb li.on a.active{color:#157a04;background:url('/resources/img/common/snb_point_green.gif') no-repeat 10px 50%}
.temp_blue #snb li a.active,.temp_blue #snb li a.active:hover,.temp_blue #snb li a.active:focus,.temp_blue #snb li a.active:active,.temp_blue #snb li.on a.active{color:#1032bd;background:url('/resources/img/common/snb_point_blue.gif') no-repeat 10px 50%}
.temp_pink #snb li a.active,.temp_pink #snb li a.active:hover,.temp_pink #snb li a.active:focus,.temp_pink #snb li a.active:active,.temp_pink #snb li.on a.active{color:#a02626;background:url('/resources/img/common/snb_point_pink.gif') no-repeat 10px 50%}
#snb li ul{margin-top:0;padding:6px 0;border-top:1px solid #cdcdcd;background-color:#f9f9f9}
#snb li ul li{border:none}
#snb li ul li a{display:block;width:152px;height:21px;margin:1px 0;padding-left:38px;font-size:90%;color:#141414;line-height:23px;;font-weight:normal;background:url('/resources/img/common/snb_point2.gif') no-repeat 28px 50%}
.temp_green #snb li.on ul li a,.temp_blue #snb li.on ul li a,.temp_pink #snb li.on ul li a{color:#141414}/* 명도대비 17.50:1 (2차 배경 #f9f9f9 기준, 기존 #666 5.45:1) */
.temp_green #snb li ul li a:hover,.temp_green #snb li ul li a:focus,.temp_green #snb li ul li a:active{color:#178333}
.temp_blue #snb li ul li a:hover,.temp_blue #snb li ul li a:focus,.temp_blue #snb li ul li a:active{color:#1032bd}
.temp_pink #snb li ul li a:hover,.temp_pink #snb li ul li a:focus,.temp_pink #snb li ul li a:active{color:#a02626}
#snb li ul li a.active,#snb li ul li a.active:hover,#snb li ul li a.active:focus,#snb li ul li a.active:active,#snb li.on ul li a.active{font-weight:bold;letter-spacing:-0.02em}
.temp_green #snb li ul li a.active,.temp_green #snb li ul li a.active:hover,.temp_green #snb li ul li a.active:focus,.temp_green #snb li ul li a.active:active,.temp_green #snb li.on ul li a.active{color:#178333;background:url('/resources/img/common/snb_point2_active_green.gif') no-repeat 28px 50%}
.temp_blue #snb li ul li a.active,.temp_blue #snb li ul li a.active:hover,.temp_blue #snb li ul li a.active:focus,.temp_blue #snb li ul li a.active:active,.temp_blue #snb li.on ul li a.active{color:#1032bd;background:url('/resources/img/common/snb_point2_active_blue.gif') no-repeat 28px 50%}
.temp_pink #snb li ul li a.active,.temp_pink #snb li ul li a.active:hover,.temp_pink #snb li ul li a.active:focus,.temp_pink #snb li ul li a.active:active,.temp_pink #snb li.on ul li a.active{color:#a02626;background:url('/resources/img/common/snb_point2_active_pink.gif') no-repeat 28px 50%}
#snb li ul{display:none}
#snb li.on ul{display:block}


/* CONTENT */
#bodyContent{position:relative;float:right;width:740px;margin-right:10px}

#location{position:absolute;right:1px;top:34px;padding-left:15px;color:#222/*;font-family:Dotum,'돋움',Arial,sans-serif !important*/;font-size:11px;background:url('/resources/img/common/ico_home.gif') no-repeat 0 40%}
#location strong{color:#000}
#location a{color:#222}
#location a:hover,#location a:focus,#location a:active{color:#000;text-decoration:underline}

#bodyContent h2{display:block;width:100%;height:70px;margin-bottom:40px;font-size:210%;color:#222;/* 웹접근성 명도대비 : 밝은 타이틀바 위 어두운 글자 */font-weight:bold;line-height:72px;letter-spacing:-0.05em}
#bodyContent h3{display:block;width:100%;margin-bottom:20px;font-size:130%;color:#333;font-weight:bold}

#siteRule textarea{width:718px;height:160px;padding:10px;border:1px solid #d0d0d0;font-size:100%/*;font-family:Dotum,'돋움',Arial,sans-serif !important*/;line-height:150%;background-color:#f8f8f8}
#siteRule p{margin:10px 0 40px 0}

.textBox{padding:30px;border:1px solid #d0d0d0;font-size:100%;color:#000;line-height:170%;background-color:#f8f8f8}
.textBox h4{margin-bottom:2px;color:#101010;font-weight:bold}
.textBox p{padding-bottom:4px}
.textBox p.guide{font-size:110%}
.textBox ul,.textBox ol{padding-left:20px}
.textBox li{padding:2px 0}
.textBox .nextText{padding:30px;text-align:center}
.textBox .file a{color:#0c0cff}/* 다운로드 링크. 명도대비 8.36:1 — AAA 충족 */
.textBox .file a:hover,.textBox .file a:active,.textBox .file a:focus{text-decoration:underline}

.infoBox{padding:30px;border:1px solid #d0d0d0;font-size:100%;color:#000;line-height:170%;background-color:#f8f8f8}
.infoBox h4{margin-bottom:6px;color:#101010;font-size:110%;font-weight:bold;background:url('/resources/img/sub/bul_h4.gif') no-repeat 2px 50%}
.infoBox h4,.infoBox p,.infoBox ul,.infoBox ol{padding-left:20px}
.infoBox li{padding:2px 0}

.chartBox{padding:30px;border:1px solid #d0d0d0;background-color:#f8f8f8}
.chartBox li{display:block;width:400px;height:57px;margin:0 auto;text-align:center;font-size:120%;font-weight:bold;color:#fff;line-height:37px;background:url('/resources/img/sub/chart_bg.gif') no-repeat 0 0}
.chartBox li.last{height:37px}

#process{height:96px}
#process ol:after{content:"";display:block;clear:both}
#process li{float:left;display:block;width:100px;height:36px;margin:12px 2px 0 0;padding-left:12px;color:#fff;line-height:36px;letter-spacing:-0.05em;background:url('/resources/img/sub/process_bg.png') no-repeat 0 0}


/* 201503 MYPAGE */
.statusSubject{width:100%;height:41px;line-height:41px;text-align:center;font-size:120%;font-weight:bold;color:#101010;border-top:2px solid #333;border-bottom:1px solid #999;background-color:#f8f8f8}
.statusList{padding:55px 20px 211px 20px;text-align:center;border-bottom:1px solid #ccc;background-color:#f8f8f8}
.statusList ol:after{content:"";display:block;clear:both}
.statusList ol li{position:relative;float:left;display:block;width:151px;height:151px;padding-right:32px;font-size:130%;line-height:176px;color:#303030;font-weight:bold}
.statusList ol li.r1{background:url('/resources/img/sub/status_chart_bg1.gif') no-repeat 0 0}
.statusList ol li.r2{background:url('/resources/img/sub/status_chart_bg2.gif') no-repeat 0 0}
.statusList ol li.r3{background:url('/resources/img/sub/status_chart_bg3.gif') no-repeat 0 0}
.statusList ol li.r4{background:url('/resources/img/sub/status_chart_bg4.gif') no-repeat 0 0}
.statusList ol li ul{position:absolute;left:76px;top:156px;display:block;width:142px;height:140px;padding:3px 20px;border-right:1px dashed #a7a7a7}
.statusList ol li:first-child ul{left:75px;border-left:1px dashed #a7a7a7;border-right:1px dashed #a7a7a7}
.statusList ol li ul li{display:block;width:100%;height:33px;margin:1px 0;padding-right:0 !important;text-align:center;font-size:13px;line-height:33px;color:#505050;font-weight:normal;background:#ddd;-webkit-border-radius:6;-moz-border-radius:6;border-radius:6px;}/*behavior:url('/resources/css/pie.htc');*/
.statusList ol li ul li.state{font-size:14px;color:#fff;font-weight:bold;background:#999 url('/resources/img/sub/ico_state.png') no-repeat 18px center}
.statusList ol li ul li a,.statusList ol li ul li a:hover,.statusList ol li ul li a:focus,.statusList ol li ul li a:active{color:#505050}
.statusList ol li ul li.state a,.statusList ol li ul li.state a:hover,.statusList ol li ul li.state a:focus,.statusList ol li ul li.state a:active{color:#fff}
.statusList ol li.now{color:#101010;font-size:150%;background-position:0 -151px !important}
.statusList ol li.now ul li{font-size:14px;color:#fff;font-weight:bold;background:#2f6fc4}/* 웹접근성 명도대비 5.0:1 (기존 #6aa4ed 2.58:1) */
.statusList ol li.now ul li.state{font-size:15px;background:#237500 url('/resources/img/sub/ico_state.png') no-repeat 18px center}/* 웹접근성 명도대비 5.8:1 (기존 #36a208 3.3:1) */
.statusList ol li.now ul li a,.statusList ol li.now ul li a:hover,.statusList ol li.now ul li a:focus,.statusList ol li.now ul li a:active{color:#fff}
.statusList ol li.now ul li.state a,.statusList ol li.now ul li.state a:hover,.statusList ol li.now ul li.state a:focus,.statusList ol li.now ul li.state a:active{color:#fff}
.statusList ol li.last{padding-right:0}


/* FAQ */
#faq{width:100%;border-bottom:1px solid #ccc;line-height:170%}
#faq dt.fst{border-top:2px solid #333 !important}
#faq dt{border-left:1px solid #fff;border-right:1px solid #fff;border-top:1px solid #ccc;background:url('/resources/img/sub/faq_open.gif') no-repeat right 50% }
#faq dt.active{border-left:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;background:url('/resources/img/sub/faq_close.gif') no-repeat right 50% #f8f8f8}
/* 웹접근성 검사항목 24 : 아코디언 컨트롤을 a[href=#none] 에서 button 으로 교체하면서 동일 외형 유지 */
#faq dt a,#faq dt button{display:block;width:698px;height:100%;padding:14px 20px;/*color:#101010;*/color:#993300;font-size:130%;font-weight:bold;text-align:left;cursor:pointer;box-sizing:border-box;background:transparent;border:0 none}
#faq dt.active a,#faq dt.active button{display:block;width:698px;height:100%;padding:14px 20px;color:#993300;font-size:130%;font-weight:bold;text-align:left;cursor:pointer;box-sizing:border-box;background:transparent;border:0 none}
#faq dd{padding:0 22px 22px 22px;border-left:1px solid #ccc;border-right:1px solid #ccc;color:#000;font-size:100%;background-color:#f8f8f8}/* FAQ 답변 본문. 명도대비 19.77:1 (기존 #404040 9.76:1) */
#faq dd a{color:#0b5fa4;text-decoration:underline}/* 웹접근성 색에 무관한 인식: 본문 링크를 밑줄로도 구분 */


/* SCHEDULE */
/*#scheduleCalenda{float:left;display:block;width:225px;margin-top:-18px}*/
#headerCalenda{/*height:31px;*/line-height:22px;text-align:center;color:#333;font-size:150%;font-weight:bold}
#headerCalenda img{margin-top:-2px}
#headerCalenda a{display:inline-block;min-width:24px;min-height:24px;padding:0 6px;line-height:24px;text-align:center;vertical-align:middle}/* 웹접근성 조작 가능: 년·월 이동 컨트롤 활성화 영역 24px 이상 확보 */
.tableCalenda{border-top:2px solid #333;border-bottom:1px solid #999/*;table-layout:fixed*/}
.tableCalenda thead{background-color:#f8f8f8}
.tableCalenda thead th,.tableCalenda tbody th,.tableCalenda tbody td{line-height:170%;text-align:center;white-space:normal}
.tableCalenda thead th{padding:5px 0 6px 0;border-left:1px solid #999;border-right:1px solid #999;border-bottom:1px solid #999;color:#333}
.tableCalenda tbody td{border:1px solid #ccc;color:#303030/*;font-family:Dotum,'돋움',Arial,sans-serif !important*/;background-color:#fff}
.tableCalenda tbody td.blank{background-color:#f0f0f0}
.tableCalenda tbody td a{display:block;width:84px;padding:9px 10px;color:#505050;text-align:left;font-size:100%;line-height:150%;font-weight:normal;background-color:#fff}
.tableCalenda tbody td a span{display:block;width:84px;padding-bottom:6px;font-size:120%;font-weight:bold}
.tableCalenda tbody td a p{display:block;width:84px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tableCalenda tbody td a:hover,.tableCalenda tbody td a:focus,.tableCalenda tbody td a:active{text-decoration:none}
.tableCalenda tbody td a.selectDate{color:#fff;background-color:#fb7878}
/*.tableCalenda thead th.sun,.tableCalenda tbody td.sun,.tableCalenda tbody td.sun a{color:#b4262f}*/
/*.tableCalenda thead th.sat,.tableCalenda tbody td.sat,.tableCalenda tbody td.sat a{color:#3853b6}*/
.tableCalenda th:nth-child(7n+1),.tableCalenda td:nth-child(7n+1),.tableCalenda td:nth-child(7n+1) a{color:#b4262f}
.tableCalenda th:nth-child(n+7),.tableCalenda td:nth-child(n+7),.tableCalenda td:nth-child(n+7) a{color:#3853b6}
/*#scheduleList{float:right;display:block;width:65%;margin-top:-18px}*/


/* MEMBER */
#memberWrap{width:680px;margin:0 auto;padding:10px 0;text-align:center}
#memberWrap h3{height:41px;line-height:41px;margin-bottom:20px;font-size:350%;font-weight:normal;color:#339900}
#memberWrap .loginTitle{background:url('/resources/img/sub/ico_member.png') no-repeat 221px 0}
#memberWrap .idTitle{background:url('/resources/img/sub/ico_member.png') no-repeat 178px -80px}
#memberWrap .pwTitle{background:url('/resources/img/sub/ico_member.png') no-repeat 160px -160px}
#memberWrap p{font-size:110%;color:#232323;line-height:180%}/* 로그인·아이디찾기·비밀번호찾기 안내문. 명도대비 15.72:1 (기존 #707070 4.95:1) */
#memberWrap p span{font-size:140%;color:#101010}

.memberForm{position:relative;margin:20px 0;padding:41px 0 61px 155px;text-align:left;border:1px solid #afc8e9;background-color:#eff4fb}
.memberForm{-webkit-border-radius:10;-moz-border-radius:10;border-radius:10px}
.memberForm label{display:inline-block;width:52px;padding-right:2px;text-align:left;color:#303030;font-size:110%;font-weight:bold}
.memberForm label.choice{vertical-align:middle;width:115px;color:#303030;font-size:100%;font-weight:normal}
.memberForm input,.memberForm select{vertical-align:middle;margin:4px 0;padding:5px;border:1px solid #719bd4;color:#303030}
.memberForm input{height:16px;font-size:120%;font-weight:bold}
.memberForm select{height:28px;font-size:100%}
.memberForm input[type=radio]{vertical-align:middle;border:none}
.memberForm .inp1{width:240px !important}
.memberForm .inp2{width:70px !important}
.memberForm .inp3{width:106px !important}
.memberForm .sel2{width:68px !important}
.memberForm .sel3{width:106px !important}
.memberForm button{position:absolute;left:475px;bottom:65px}
.memberForm P{position:absolute;left:210px;bottom:28px}
.memberForm P a{margin:0 15px;padding:5px 0 5px 32px;color:#303030;font-size:90%;font-weight:normal}
.memberForm P a:hover,.memberForm P a:focus,.memberForm P a:active{color:#034dae}
.memberForm P a.findId{background:url('/resources/img/sub/ico_find_id.gif') no-repeat 0 0}
.memberForm P a.findPw{background:url('/resources/img/sub/ico_find_pw.gif') no-repeat 0 0}

.memberBtn{
	cursor:pointer;
	width:64px;
	height:64px;
	margin:0 1px;padding:0;color:#fff;font-size:120%;font-weight:bold;line-height:64px;font-family:'NanumGothicRWeb','Nanum Gothic' !important;
	background:#477dc5;
	background-image:-webkit-linear-gradient(top,#477dc5,#3964b9);
	background-image:-moz-linear-gradient(top,#477dc5,#3964b9);
	background-image:-ms-linear-gradient(top,#477dc5,#3964b9);
	background-image:-o-linear-gradient(top,#477dc5,#3964b9);
	background-image:linear-gradient(to bottom,#477dc5,#3964b9);
	-webkit-border-radius:2;
	-moz-border-radius:2;
	border-radius:2px;
	border:solid #4070b1 1px;
	text-decoration:none;
}

.memberBtn:hover{
	background:#3964b9;
	background-image:-webkit-linear-gradient(top,#3964b9,#3964b9);
	background-image:-moz-linear-gradient(top,#3964b9,#3964b9);
	background-image:-ms-linear-gradient(top,#3964b9,#3964b9);
	background-image:-o-linear-gradient(top,#3964b9,#3964b9);
	background-image:linear-gradient(to bottom,#3964b9,#3964b9);
	text-decoration:none;
}


/* POPUP */
#popupContent{width:100%;height:100%;background-color:#2e7d32} /* 웹접근성 명도대비 4.5:1 이상 */
#popupContent h2{display:block;height:45px;padding-left:30px;font-size:180%;color:#fff;font-weight:bold;line-height:52px;letter-spacing:-0.05em}
#popcontentWrap{padding:30px;border:4px solid #68b830;background-color:#fff}

/* attention */
.attention{width:100%;padding:10px 0;text-align:center;border:1px solid #e0e0e0;font-size:100%;color:#3c0000;background-color:#f8f8f8}/* 명도대비 16.59:1 — AAA 충족 (기존 #961414 8.22:1, #c0392b 5.12:1, 최초 #ff3300 3.45:1), 글자크기 90%->100% */
.attention span{padding-left:20px;background:url('/resources/img/sub/bul_att.gif') no-repeat 0 0}


/* 201503 addition */
.bg_white{background-color:#fff}
.proposal_info_chart,.apply_info_chart{position:relative;width:660px;height:480px}
.proposal_info_chart{background:url('/resources/img/sub/proposal_bg_chart.gif') no-repeat 0 0}
.apply_info_chart{background:url('/resources/img/sub/apply_bg_chart.gif') no-repeat 0 0}
.proposal_info_chart dt,.apply_info_chart dt,
.proposal_info_chart li,.apply_info_chart li{position:absolute;display:block;text-align:center;font-weight:bold}
.proposal_info_chart dt,.apply_info_chart dt{left:240px;top:190px;width:200px;height:100px;line-height:100px;color:#154d81;font-size:160%}
.proposal_info_chart li,.apply_info_chart li{padding:5px;line-height:120%;color:#303030;font-size:100%}
.proposal_info_chart li.sp1{right:530px;top:226px}
.proposal_info_chart li.sp2{right:430px;top:35px}
.proposal_info_chart li.sp3{left:420px;top:35px}
.proposal_info_chart li.sp4{left:530px;top:226px}
.proposal_info_chart li.sp5{left:430px;top:400px}
.apply_info_chart li.sp1{right:525px;top:216px}
.apply_info_chart li.sp2{right:505px;top:125px}
.apply_info_chart li.sp3{right:430px;top:35px}
.apply_info_chart li.sp4{left:296px;top:0}
.apply_info_chart li.sp5{left:425px;top:35px}
.apply_info_chart li.sp6{left:500px;top:125px}
.apply_info_chart li.sp7{left:525px;top:216px}
.apply_info_chart li.sp8{left:505px;top:310px}
.apply_info_chart li.sp9{left:420px;top:405px}
.proposal_info_chart .ed,.apply_info_chart .ed{color:#2323de}/* 도표 강조 항목. 명도대비 8.65:1 — AAA 충족 (기존 #034dae) */


/****** 201503 안내페이지 수정 ******/
.guideBox{padding:30px;border:1px solid #d0d0d0;font-size:115%;color:#000;line-height:140%;background-color:#fcfcfc;text-align:justify;-webkit-border-radius:16;-moz-border-radius:16;border-radius:16px}
.guideBox h3,.guideBox h4{font-size:130%;margin-bottom:30px}/* 웹접근성 제목 제공: h2 다음 제목 수준을 h3 으로 올리면서 기존 h4 스타일 유지 */
.guideBox p{padding-bottom:4px}
.guideBox p.text1{font-size:110%;line-height:160%;letter-spacing:0em;font-weight:bold}
.guideBox p.text1 strong{font-size:120%;line-height:160%}
.guideBox p.text2{font-size:100%}
.guideBox p.text3{font-size:105%}
.guideBox p.text4{font-size:100%}
.guideBox p.text4 strong{font-size:133%;line-height:160%}

/* guideDL */
.guideDL dt{font-size:100%;color:#202020;padding-left:25px;margin-bottom:4px;font-weight:bold;background:url('/resources/img/sub/bul_guide_dt.gif') no-repeat 4px 50%}
.guideDL dd{font-size:100%;padding-left:26px;margin-bottom:26px;line-height:150%}
/* guideOL */
.guideOL ol{padding-left:0}
.guideOL li{padding-top:20px}
.guideOL li:first-child{padding-top:0}
.guideOL li strong{font-size:100%;color:#202020}
.guideOL li ul,.guideOL li ol{font-size:100%;margin-top:6px}
.guideOL li span{font-size:100%}
.guideOL li ul{padding-left:96px}
.guideOL li ol{padding-left:26px}
.guideOL li ul li,.guideOL li ol li{padding:2px 0}
.guideOL a{color:#0c0cff}/* 서식 다운로드 링크. 명도대비 8.15:1 — AAA 충족 */
.guideOL a:hover,.guideOL a:active,.guideOL a:focus{text-decoration:underline}
/* font Color */
.fontBlue2{color:#1e46bf}/* 안내화면 강조 문구. 명도대비 7.63:1 — AAA 충족 (기존 #0f6dbd 5.19:1) */
/* 같은 .fontBlue2 라도 본문 강조 문구(p 안)와 소제목(h3 안)의 색을 다르게 쓴다.
   p 안쪽만 아래 색으로 덮고, h3 의 '○○ 상세안내' 는 위의 #1e46bf 를 그대로 둔다. */
.guideBox p .fontBlue2{color:#2828c7}/* 본문 강조 문구. 명도대비 9.23:1 — AAA 충족 */
.fontGreen2{color:#157a04}/* 웹접근성 명도대비 5.7:1 (기존 #178306 3.5:1) */


/****** 201503 학술정보 컨텐츠 박스 테두리 라운드 적용 ******/
.textBox,.infoBox,.chartBox{padding:39px !important;background-color:#fcfcfc !important;text-align:justify;-webkit-border-radius:16;-moz-border-radius:16;border-radius:16px}
.textBox{font-size:125% !important;}
.infoBox{font-size:115% !important;}
.chartBox{font-size:110% !important;}

/* 좌측 메뉴 선택 표시 아이콘(화살표 6x9 / 점 3x3)을 글자색과 같게 보이도록 CSS 필터로 덧그린다.
   - 이미지 파일(snb_point*.gif)은 원본 그대로 두고, 같은 이미지를 :before 로 정확히 겹쳐 덮는다.
     글리프에 안티앨리어싱이 없어(단색+투명) 아래 원본이 완전히 가려진다.
   - a 에 직접 filter 를 걸면 메뉴 글자까지 필터를 받으므로 :before 로 분리한다.
   - 원본 background 를 그대로 남겨 두어 filter 미지원 브라우저(IE)에서도 아이콘이 보인다.
   - 필터 정의는 WEB-INF/layouts/home/header.jsp 의 인라인 SVG 참고(단색으로 칠하는 slope:0 방식). */
#snb li a{position:relative}
#snb li a.active:before,#snb li ul li a.active:before{content:"";position:absolute;background-repeat:no-repeat}
#snb li a.active:before{left:10px;top:50%;width:6px;height:9px;margin-top:-4.5px}
#snb li ul li a.active:before{left:28px;top:50%;width:3px;height:3px;margin-top:-1.5px}
.temp_green #snb li a.active:before{background-image:url('/resources/img/common/snb_point_green.gif');filter:url('#snbIconGreen')}
.temp_blue #snb li a.active:before{background-image:url('/resources/img/common/snb_point_blue.gif');filter:url('#snbIconBlue')}
.temp_pink #snb li a.active:before{background-image:url('/resources/img/common/snb_point_pink.gif');filter:url('#snbIconPink')}
.temp_green #snb li ul li a.active:before{background-image:url('/resources/img/common/snb_point2_active_green.gif');filter:url('#snbIconGreen')}
.temp_blue #snb li ul li a.active:before{background-image:url('/resources/img/common/snb_point2_active_blue.gif');filter:url('#snbIconBlue')}
.temp_pink #snb li ul li a.active:before{background-image:url('/resources/img/common/snb_point2_active_pink.gif');filter:url('#snbIconPink')}