@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);


/* 여백 초기화 */
body,div,dl, dd,ul,ol,li,dt, h1,h2, h3,h4,h5,h6,from,input,legend,textarea,select,p, button { margin:0; padding:0;}

/*링크 초기화*/
a { color:#2f3743; text-decoration:none; list-style:none; margin:0px; padding:0px; display:block;}
a:hover { color:#fc0; list-style:none; margin:0px; padding:0px;} 

/*폰트 초기화*/

body, input, textarea, select, button, table { font-family: 'Nanum Gothic'; font-size:20px; line-height:1.7;}


/*제목태그 초기화*/
h1, h2, h3, h4, h5, h6 { font-size:20px; font-weight:normal;}


/*블릿 기호 초기화*/

li, ul, ol {list-style:none; margin:0px; padding:0px;}

/*블라인드 작업*/
.blind, legend { width:0; height:0; overflow:hidden; position:absolute; left:0; top:0; font-size:0; line-height:0;}


/*이미지 초기화*/
img, fieldset { border:0; margin:0; padding:0; display:block;}


/* ============================================== HTML5 display definitions ============================================== */
/*HTML5에 새로 추가된 요소들을 블럭으로 지정, IE 6/7/8/9, 파폭 3 적용*/
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary{display: block;}
/*audio와 canvas 그리고 video 요소를 inline-block값을 지정하고 지원하지 않는 브라우저는 핵을 이용함 , IE 6/7/8/9, 파폭 3 적용*/
audio, canvas, video{display:inline-block; *display:inline; *zoom:1;}
/*audio요소에 contorls 속성이 정의 되지 않은 경우 이를 감춤 , 모든 웹브라우저 및 iOS 5 이상 기기 적용*/
audio:not([controls]){display:none; height:0;}
/*visibility 속성의 hidden값과 display 속성의 none 값을 통일함으로 레이아웃 구현에 차이를 줄임, IE 7/8/9. 파폭 3, 사파리 4, IE 6은 지원않함*/
[hidden]{display:none;}
 
/* ============================================== Base ============================================== */
/**
* 1. IE 6/7 에서 body에  em 단위의 정확한 글자크기를 구현하기 위한 설정으로 100%=16px, 75%=12px 
* 2. iOS에서 가로,세로 모드로 화면을 전환할때 사용자가 직접 줌하지 않는 한 글자크기를 조정하지 않음  
*/
html{font-size:100%;/* 1 */-ms-text-size-adjust:100%;/* 2 */-webkit-text-size-adjust:100%;/* 2 */}  
/*textarea 와 다른 폼요소들 사이의 폰트글꼴이 다른 것을 일치시킴*/
html, body, button, input, select, textarea{font-family:'Nanum Gothic','Arial';}
/*IE 6/7에 기본적으로 적용되어 있는 body의 margin 속성값을 초기화*/
body{margin:0;}

html,body,div,form,input,tr,td,table{margin:0;padding:0;}
form,iframe{border:0;}
button{margin:0; padding:0; border:0;}
input,button,form,select,textarea{outline:none;}
textarea{resize:none;}
/* ============================================== Links ============================================== */
/*크롬과 다른 브라우저들 사이의 outline 속성값을 일치시킴*/
a:focus{outline:none;} 
/*모든 브라우저에서 포커스되거나 마우스 오버되었을때 가독성 향상*/
a:active, a:hover{outline:0; text-decoration:none;}
a{text-decoration:none; cursor:pointer; color:inherit;}
/* ============================================== Typography ============================================== */
/**
 * IE 6/7에서 폰트 크기와 마진값이 다른 것을 일치시킴
 * 파폭 4+, 사파리 5, 크롬에서 section 과 article 요소안에 폰트 크기가 다른 것을 일치시킴
 */
h1{font-size:2em; margin:0.67em 0;}
h2{font-size:1.5em; margin:0.83em 0;}
h3{font-size:1.17em; margin:1em 0;}
h4{font-size:1em; margin:1.33em 0;}
h5{font-size:0.83em; margin:1.67em 0;}
h6{font-size:0.67em; margin:2.33em 0;}
/*abbr 요소의 title 속성 디자인 통일, IE 7/8/9,사파리 5, 크롬 적용*/
abbr[title]{border-bottom:1px dotted;}
/*강조를 위한 b와 strong 요소에 폰트굵기 굵게 적용하고 인용을 위한 blockquote 요소의 마진값 설정, 파폭 3+, 사파리 4/5, 크롬 적용*/
b, strong{font-weight:bold;}
blockquote{margin:1em 40px;}
/*dfn 요소의 기본 폰트 스타일을 이탤릭으로 설정, 사파리 5, 크롬 적용*/
dfn{font-style:italic;}
/**
 * 파폭과 다른 브라우저들의 차이점 통일
 * IE 6/7 적용되지 않음
 */
hr{-moz-box-sizing:content-box; box-sizing:content-box; height:0;}
/*HTML5에 새로 추가된 mark 요소의 속성값 통일, IE 6/7/8/9 적용*/
mark{background:#ff0; color:#000;}
/*IE 6/7과 다른 브라우저들 사이의 p, pre 요소의 마진값을 통일*/
p, pre{margin:1em 0;}
/*폰트 글꼴을 통일, IE 6, 사파리 4/5, 크롬 적용*/
code, kbd, pre, samp{font-family:monospace, serif; _font-family:'courier new', monospace; font-size:1em;}
/*모든 브라우저에서 pre 요소의 가독성을 향상*/
pre{white-space:pre; white-space:pre-wrap; word-wrap:break-word;}
/*IE 6/7에서 따옴표를 표시하는 q 요소를 지원하지 않기에 이를 노출되지 않게함*/
q{quotes:none;}
/*사파리 4에서 q 요소의 :before와 :after가 지원되지 않으므로 노출되지 않게함*/
q:before, q:after{content:''; content:none;}
/*모든 브라우저에서 small 요소의 폰트크기 통일*/
small{font-size:80%;}
/*모든 브라우저에서 sub 와 sup 요소에 영향을 미치는 line-height 를 초기화*/
sub, sup{font-size:75%; line-height:0; position:relative; vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}

/* 드래그 영역 색상 */
::selection{background:#3dccee; color:#fff;}
::-moz-selection{background:#3dccee; color:#fff;}

/* ============================================== Lists ============================================== */
/*IE 6/7에서 마진 값이 다른 것을 통일
dl, menu, ol, ul{margin: 1em 0;}
dd{margin:0 0 0 40px;}*/
/*IE 6/7에서 패딩 값이 다른 것을 통일
menu, ol, ul{padding:0 0 0 40px;}*/
dl, menu, ol, ul{margin:0;}
menu, ol, ul{padding:0; list-style:none;}
/*
dd{margin:0}
*/
/*
 * IE 7에서 블릿에 이미지를 사용할 경우 다른 브라우저들과 위치가 다르기에 사용자가 직접 설정하게 도와줌
 * 크로스 브라우징엔 background-image 속성을 이용하는 것이 좋음
 */
nav ul, nav ol{list-style:none; list-style-image:none;}

/* ============================================== Embedded content ============================================== */
/**
 * 1. a 요소안에 이미지가 위치할 경우 생기는 테두리 값 제거, IE 6/7/8/9 , 파폭 3 적용
 * 2. IE 7에서 이미지를 축소/확대시 계단현상이 생기는 것을 방지
 */
img{border:0;/* 1 */-ms-interpolation-mode:bicubic;/* 2 */}

/*IE 9에서 svg 요소가 영역의 크기를 벗어나지 않도록 설정*/
svg:not(:root){overflow:hidden;}
 
/* ============================================== Figures ============================================== */
/*figure 요소의 마진 값 설정, IE 6/7/8/9, 사파리 5, 오페라 11.*/
figure{margin:0;}

/* ============================================== Forms ============================================== */
/*IE 6/7에 설정되어 있는 마진 값을 초기화*/
form{margin:0;}
/*fieldset 요소의 보더, 마진, 패딩값 통일*/
fieldset{border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;}
/**
 * 1. IE 6/7/8/9에서 상속된 컬러가 정확하지 않는 것을 방지
 * 2. 파폭 3에서 캡션 내용의 공백 문자가 다르게 처리되는 현상 방지 
 * 3. IE 6/7의 정확한 정렬을 위해 핵사용
 */
legend{border:0;/* 1 */padding:0;white-space:normal;/* 2 */*margin-left:-7px;/* 3 */}
/**
 * 1. 모든 브라우저에서 정확한 폰트 크기를 상속받게 함
 * 2. 마진값 재 설정, IE 6/7, 파폭 3+, 사파리 5, 크롬 적용
 * 3. 모든 브라우저에서 세로 정렬 위치가 동일하게 보이도록 함
 */
button, input, select, textarea{font-size:100%;/* 1 */margin:0;/* 2 */vertical-align:baseline;/* 3 */*vertical-align:middle;/* 3 */}
/*파폭 3+ 에서 button 과 input 요소의 기본 line-height 값이 달라 통일시킴*/
button, input{line-height:normal;}
/**
 * button과 select 요소의 value 값을 브라우저마다 대소문자를 표시를 다르게 하는 경우를 방지하기 위해 초기화
 * button 요소의 스타일은 크롬, 사파리 5+, IE 6+ 적용
 * select 요소의 스타일은 파폭 4+ 와 오페라 적용
 */
button, select{text-transform:none;}
/**
 * 1. 안드로이드 4.0 이상의 웹킷 브라우저에서 audio와 video 요소에 발생하는 버그 방지
 * 2. iOS에서 input 요소의 type 속성값을 인식하지 못하는 버그 방지
 * 3. input 요소의 type 속성값에 적용될 마우스 커서의 스타일을 포인터로 설정
  * 4. IE 7에서 텍스트 입력에 영향을 주지 않고 내부 간격을 제거하는 핵
 *  IE 6에서는 내부 간격이 남아있음
 */
button, html input[type="button"], /* 1 */input[type="reset"], input[type="submit"]{-webkit-appearance: button;/* 2 */cursor:pointer;/* 3 */*overflow:visible;/* 4 */}
/*disabled 된 button과 input 요소들의 마우스 커서모양을 기본값으로 설정*/
button[disabled], html input[disabled]{cursor:default;}
/**
 * 1. IE 8/9에서 box sizing 속성값을 content-box에서 border-box로 변경
 * 2. IE 8/9에서 패딩 제거
 * 3. IE 7에서 핵을 이용해 패딩 제거
 * IE 6에서는 패딩이 남아있음
 */
input[type="checkbox"], input[type="radio"]{box-sizing:border-box;/* 1 */padding:0;/* 2 */*height:13px;/* 3 */*width:13px;/* 3 */}
/* 크롬에서 input클릭시 테두리없애기, IE에서 테두리없애기*/
input{outline:none; border:none;}

/**
 * 1. 사파리 5와 크롬에서 텍스트 입력이 가능하게 설정
 * 2. 해당 영역의 크기를 지정하는데 콘텐츠 영역만큼의 크기만 설정하도록 content-box 설정
 */
input[type="search"]{-webkit-appearance: textfield;/* 1 */-moz-box-sizing:content-box; -webkit-box-sizing:content-box;/* 2 */box-sizing:content-box;}
/*맥의 OS X기반의 사파리 5와 크롬의 내부 패딩과 검색 취소 버튼을 제거*/
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance:none;}
/*파폭 3+ 에서 button과 input에 지정되어 있는 패딩과 보더값을 0으로 설정*/
button::-moz-focus-inner, input::-moz-focus-inner{border:0; padding:0;}
/**
 * 1. IE 6/7/8/9의 textarea 요소에 기본 지정된 세로 스크롤 제거
 * 2. 모든 브라우저에서 가독성 향상과 정렬을 위함
 */
textarea{overflow:auto;/* 1 */vertical-align:top;/* 2 */}
 
/* ============================================== Tables ============================================== */
/*테이블 요소 사이의 간격을 제거*/
table{border-collapse:collapse; border-spacing:0; padding:0; margin:0;}