@font-face {
  font-family: 'Pretendard';
  font-style: light;
  font-weight: 300;
  src: url(../fonts/Pretendard-Light.eot);
  src:
    url(../fonts/Pretendard-Light.eot?#iefix) format('embedded-opentype'),
    url(../fonts/Pretendard-Light.woff) format('woff'),
    url(../fonts/Pretendard-Light.ttf) format('truetype');
}
@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/Pretendard-Regular.eot);
  src:
    url(../fonts/Pretendard-Regular.eot?#iefix) format('embedded-opentype'),
    url(../fonts/Pretendard-Regular.woff) format('woff'),
    url(../fonts/Pretendard-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Pretendard';
  font-style: medium;
  font-weight: 500;
  src: url(../fonts/Pretendard-Medium.eot);
  src:
    url(../fonts/Pretendard-Medium.eot?#iefix) format('embedded-opentype'),
    url(../fonts/Pretendard-Medium.woff) format('woff'),
    url(../fonts/Pretendard-Medium.ttf) format('truetype');
}
@font-face {
  font-family: 'Pretendard';
  font-style: bold;
  font-weight: 700;
  src: url(../fonts/Pretendard-Bold.eot);
  src:
    url(../fonts/Pretendard-Bold.eot?#iefix) format('embedded-opentype'),
    url(../fonts/Pretendard-Bold.woff) format('woff'),
    url(../fonts/Pretendard-Bold.ttf) format('truetype');
}

/* 컬러 변수 */
/* :root는 html을 의미 */
:root {
  --point-color1: #3d3dff;
  --point-color2: #ff3333;
  --gray-color1: #111;
  --gray-color2: #222;
  --gray-color3: #333;
  --gray-color4: #666;
  --gray-color5: #999;
  --gray-color6: #ccc;
}
/* 변수명 지정할 때 대시를 2번(--) 적어줌 */
/* 변수는 주로 컬러에만 사용함 */
/* :root 선택자는 일종의 관습화된 문법임 */

/* button태그에 손모양 커서 */
button {
  cursor: pointer;
}

fieldset,
img {
  border: 0;
  vertical-align: top;
}
/* border: 0은 none과 같은 의미임 */
/* vertical-align: top은 img를 a태그에 넣을 경우를 위해 사용함 */

/* 모바일, 반응형에서 이미지가 원본보다 커지지 않게 하고 뷰포트에 따라 줄어들게 함*/
img {
  max-width: 100%;
}
/* 반응형으로 창 크기에 따라 이미지가 줄어들게 됨 */
/* 원본 크기 이상으로 커지지 않음 */

/* 기울임꼴 제거 */
address,
em {
  font-style: normal;
}
strong {
  font-weight: normal;
}
/* strong이라고 무조건 bold가 아니기 때문에 초기화함 */

/* 벤더프리픽스: 브라우저 제조사를 의미 */
/* -webkit- 크롬, 사파리, 다른브라우저에서 사용하기도함 */
/* 벤더프리픽스는 -webkit- 하나만 사용해도 됨 */
a {
  text-decoration: none;
  color: var(--gray-500);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}
/* 여기서 tap은 모바일 등 스크린을 터치하는 것을 의미함 */
/* 탭 즉 터치를 하면 색을 변경해 줌 */

/* iframe으로 외부컨텐츠 연결시 외부컨텐츠 안쪽내용이 페이지에 영향을 주지못하도록 가려줌*/
iframe {
  overflow: hidden;
  border: 0;
}

/* 칸의 선 합치고 간격없애기, 가로를 늘려줌, 테이블의 데이터가 길면 늘어나므로 fixed로 크기고정 */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  /* 부모만큼 크기를 설정함 */
  table-layout: fixed;
  /* 데이터가 길어지면 테이블 밖으로 글자가 나가는 것을 방지함, 부모보다 커지지 않게 하는 것임 */
}

/* 굵기 빼고 폰트크기를 body 폰트크기와 일치시킴 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-size: 100%;
}

/* 폼요소 높이 다를때 요소끼리 세로정렬시킴 */
/* border-radius:0 -> iOS 테두리 둥글게 제거 */
/* -webkit-appearance: none -> iOS 폼요소 기본모양 제거 */
/* -webkit-: 크롬, 사파리 -moz-: 파이어폭스 -ms-:IE -o-: 오페라 */
input,
select,
textarea,
button {
  vertical-align: middle;
  margin: 0;
  padding: 0;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* select 태그 요소에 기본적으로 나타나는 아래 방향 화살표 등을 제거함 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  outline: none;
  /* 커서의 포커스가 있으면 아웃라인이 굵게 표시되는 것을 없앰 */
}

.blind {
  position: absolute;
  /* 다른 요소의 위치와의 영향을 배제하기 위해 사용함 */
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  width: 1px;
  height: 1px;
}

textarea {
  resize: none;
}

/* 모바일 크롬, 사파리 텍스트 자동확대 방지 */
body {
  -webkit-text-size-adjust: none;
}

/*********************** 공통스타일 *************************/
/* body에 높이가 없어도 hidden이 걸리면 스크롤바가 사라짐(데스크탑) */
body.on {
  overflow: hidden;
}
/* iOS 사파리는 페이지최상단에서만 hidden이 걸리므로 페이지 위로 올라오게함(모바일,반응형) */
/* body.on { overflow: hidden; position: fixed; left:0; top:0; width:100%; } */

body,
input,
select,
textarea,
button,
table {
  font-family:
    'Pretendard', '맑은 고딕', 'malgun gothic', 'Apple SD Gothic Neo',
    sans-serif;
  font-size: 20px;
  /* line-height: 1.5; */
  /* 프리텐다드은 line-heigth 1.5 설정함 */
}