/*--------------------------------------------------|
| 한넷 CSS Guide 
| Update : 2011-06-03
|--------------------------------------------------*/
@charset "utf-8";

/*
	default.css - 각 브라우저마다 동일한 효과를 주기위한 요소의 초기화와 자주 사용되는 공통css, 모든 css를 import 시킨다.
					사용된 css YUI 2: Reset CSS (http://developer.yahoo.com/yui/reset/)
	layout.css  - index나 main에 사용된 css	
	content.css - Sub 요소 전체
*/


/* CSS 속성 선언 순서 
그 쓰임새가 레이아웃과 관련이 높은 것으로 부터 시작하여 레이아웃과 무관한 것 순으로 아래와 같이 선언 합니다. 
이 순서는 화면의 렌더링 효율보다는 유지보수의 이점 때문에 제안되었으며 권장하는 수준 입니다. 
아래 제시된 속성들과 짝을 이루는 관련 속성들은 etc로 분류하여 따로 기술하지 않고 되도록 함께 기술합니다. 
예를 들면 position 속성과 left, right , top, bottom 속성은 서로 연관된 속성이므로 etc로 분류하지 않고 position 다음에 기술합니다.

display : 표시 
overflow : 넘침 
float : 흐름 
position : 위치 
z-index : 정렬 
width & height : 크기 
margin & padding : 간격 
border : 보더 
font : 폰트 
background : 배경 
etc : 기타 
*/

/*
- 글꼴(그룹)의 이름에 공백이 들어가는 경우에는 인용부호("또는')를 이용합니다.
예) font-family: "Comic Sans MS", 'Times New Roman';

- 지정한 모든 특정 글꼴(그룹)을 사용할 수 없는 경우, 최종적인 선택 범위로 지정해 두는 것이 좋습니다. 인용부호를 사용하지 않아야 합니다.
serif : 명조계열
sans-serif : 고딕계열
cursive : 필기체
fantasy : 장식체
monospace : 등폭 글꼴

- 가변폭 글꼴 - 바탕(Batang), 굴림(Gulim), 돋움(Dotum), 궁서(Gungsuh)
- 고정폭 글꼴 - 바탕체(BatangChe), 굴림체(GulimChe), 돋움(DotumChe), 궁서체(GungsuhChe)

- 가변폭, 고정폭 글꼴의 차이는 자간(글자간의 폭)입니다. 고정폭 글꼴은 알파벳 하나하나에 모두 같은 폭을 사용하는 글골입니다.
- CSS를 이용해 자간을 설정하려면 가변폭 글꼴을 사용하도록 합니다.
*/



/* BASIC STYLE */
html {overflow-y:scroll;}
html,body { font:12px/1.6 '돋움',dotum,'나눔고딕',NanumGothic,Verdana,AppleGothic,Tahoma; text-align:justify; color:#808080; width:100%; height:100%;}	
			
body,p,h1,h2,h3,h4,h5,h6,menu,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,blockquote { padding:0; margin:0;} 			

table { border-collapse:collapse; border-spacing:0; font:12px/16px Dotum,"돋움",Tahoma,sans-serif;}
ol, ul, li, dl, dt, dd	{ list-style:none; }
hr, caption, legend { display:none;}
fieldset, abbr, acronym  { border:none; }
h1,h2,h3,h4,h5,h6,address,caption,cite,code,dfn,em,var { font-size:100%; }

input.type-image	{ border:none;line-height:0;font-size:0;vertical-align:middle;}
img {border:0 none;line-height:0;font-size:0;vertical-align:top;}
input, select, textarea	{ font-family:"돋움",dotum,"나눔고딕",NanumGothic,Verdana,AppleGothic,Tahoma; font-size:12px; line-height:18px;}
input, option 	{border: 1px solid #d7d9dd; font-size:12px; color:#666; vertical-align:middle; padding:1px;}
select {height:18px; vertical-align:middle;}
textarea 				{ border:1px solid #c8c8c8; padding:5px; color:#666; }

.png24 { tmp:expression(setPng24(this)) }
*html .png24 { tmp:expression(setPng24(this)) }

* html input 				{margin:-1px 0 0 0;} /* ie6 input margin... */
/* *:first-child+html input 	{margin:-1px 0} 	/* ie7 input margin... */
* html input.input_radio, * html input.input_check, * html .btn input, * html .btn2 input, * html .totalsearch input.btn {margin:0 0 0 0;}

/* A LINK STYLE */
a:link {color:#808080; text-decoration:none;}
a:visited {color:#808080; text-decoration:none;}
a:hover {color:#e34d00; text-decoration:none;}
a:active {color:#808080; text-decoration:none;}

q:before, q:after { content : ''; }

#skipNav {position:absolute;width:0px;height:0px;overflow:hidden;}
#skipNav h2 {position:absolute; left:-5000px; height:0; line-height:0;}


/* ALIGN STYLE */
.inline { display:inline;}
.block { display:block;}
.invisible {position:absolute; left:-5000px; height:0; line-height:0;}

.f_L { float:left;}
.f_R { float:right;}
.c_B { clear:both;}
.c_L { clear:left;}

.ta_L { text-align:left;}
.ta_C { text-align:center;}
.ta_R { text-align:right;}
.ta_J { text-align:justify;}
.va_T { vertical-align:top;}
.va_M { vertical-align:middle;}
.center { margin:0 auto;}

.cu_P { cursor:pointer}
.ls_1 { letter-spacing:-0.07em;}
.ls_2 { letter-spacing:-1px;}
.tDeco_line{ text-decoration:underline;}
.tDeco_none{ text-decoration:none;}

.bd_none { border:none;}
.bg_none { background:none !important;}

.input1 { border:1px solid #c8c8c8; padding:4px;}
.input2 { border:1px solid #e1e1e; padding:3px;}
input.no { border:none !important; }

table tr td.ta_L {text-align:left; padding-left:10px;}


 /* FONT STYLE */
.f_0 { font-size:0;}
.f_11 { font-size:11px;}
.f_14 { font-size:14px;}
.f_bold { font-weight:bold;}
.f_normal { font-weight:normal;}

.f_black { color:#000 !important;}
.f_gray { color:#666;}
.f_hotpink { color:#ee4d74;}
.f_blue { color:#4f82d6;}
.f_orange {color:#f06400;}

/* PADDING STYLE */
.pT_10 { padding-top:10px !important;} 
.pT_15 { padding-top:15px;}
.pT_20 { padding-top:20px;}
.pT_25 { padding-top:25px;}
.pT_30 { padding-top:30px;}
.pT_110 { padding-top:110px;}
.pR_10 { padding-right:10px;}
.pB_10 { padding-bottom:10px;}
.pB_20 { padding-bottom:20px;}
.pB_30 { padding-bottom:30px;}
.pB_35 { padding-bottom:35px;}
.pB_50 { padding-bottom:50px;}
.pB_70 { padding-bottom:70px;}
.pL_05 { padding-left:5px;}
.pL_10 { padding-left:10px;}
.pL_20 { padding-left:20px;}
.pL_30 { padding-left:30px;}

/* MARGIN STYLE */
.mT_5 { margin-top:5px !important;}
.mR_5 { margin-right:5px;}
.mB_5 { margin-bottom:5px;}
.mL_5 { margin-left:5px;}

/* HEIGHT STYLE */
.height20 { clear:both; height:20px;}
.height30 { clear:both; height:30px;}
.height40 { clear:both; height:40px;}
.height50 { clear:both; height:50px;}
.height60 { clear:both; height:60px;}
.height100 { clear:both; height:100px;}

.width700 {clear:both; width:700px;}

/* QUICK STYLE */
#gotop { position:absolute; left:50%; top:270px; margin-left:490px; /* 레이아웃 너비의 절반 + 여백 */
		 width: 21px;}

/* Excel 숫자형태를 텍스트형태로 셀서식을 변환 */
.TextFormat
    {padding-top:1px;
    padding-right:1px;
    padding-left:1px;
    mso-ignore:padding;
    color:windowtext;
    font-size:11.0pt;
    font-weight:400;
    font-style:normal;
    text-decoration:none;
    font-family:돋움;
    mso-generic-font-family:auto;
    mso-font-charset:129;
    mso-number-format:"\@";
    text-align:general;
    vertical-align:bottom;
    mso-background-source:auto;
    mso-pattern:auto;
    white-space:nowrap;
	}


/* 줄바꿈 */
.nowrap{
	border:1px solid red;
	word-wrap: break-word; /* Internet Explorer 5.5+ */
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
}

/*-------------------------------------------------------------------------------------------------
	Smart Editor Outout
-------------------------------------------------------------------------------------------------*/
/* 스마트 에디터의 풍부한 표현이 정상적으로 출력되도록 하려면 콘텐츠가 출력되는 곳에 이 클래스를 적용하여야 한다. 
   예를 들면 게시물 읽기 페이지의 본문이 이에 해당된다. */
.smartOutput{ font-size:12px; line-height:1.6; font-family:Dotum, AppleGothic, Sans-serif;} 

.smartOutput p{ margin-top:7px; margin-bottom:7px;}

.smartOutput blockquote.q1,
.smartOutput blockquote.q2,
.smartOutput blockquote.q3,
.smartOutput blockquote.q4,
.smartOutput blockquote.q5,
.smartOutput blockquote.q6,
.smartOutput blockquote.q7{ padding:10px; margin-left:15px; margin-right:15px;}

.smartOutput blockquote.q1{ padding:0 10px; border-left:2px solid #ccc;}
.smartOutput blockquote.q2{ padding:0 10px; background:url(../img/bg_qmark.gif) no-repeat;}
.smartOutput blockquote.q3{ border:1px solid #d9d9d9;}
.smartOutput blockquote.q4{ border:1px solid #d9d9d9; background:#fbfbfb;}
.smartOutput blockquote.q5{ border:2px solid #707070;}
.smartOutput blockquote.q6{ border:1px dashed #707070;}
.smartOutput blockquote.q7{ border:1px dashed #707070; background:#fbfbfb;}

.smartOutput sup{ font:10px Tahoma, monospace;}
.smartOutput sub{ font:10px Tahoma, monospace;}
.smartOutput table td{ padding:4px;}