/* ==========================================================================
   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, button, input, select, textarea {
    font-family: sans-serif;
}
 
 
/**
 * IE 6/7에 기본적으로 적용되어 있는 body의 margin 속성값을 초기화
 */
 
body {
    margin: 0;
}
 
 
/* ==========================================================================
   Links
   ========================================================================== */
 
/**
 * 크롬과 다른 브라우저들 사이의 outline 속성값을 일치시킴
 */
 
a:focus {
    outline: thin dotted;
}
 
 
/**
 * 모든 브라우저에서 포커스되거나 마우스 오버되었을때 가독성 향상
 */
 
a:active,
a:hover {
    outline: 0;
}
 
 
/* ==========================================================================
   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;
}
 
 
/* ==========================================================================
   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;
}
 
 
/**
 * 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 */
}
 
 
/**
 * 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;
}