@charset "utf-8";
@import url(reset.css);
@import url(normalize.css);

@font-face {
  font-family: 'Pretendard';
  font-weight: 100;
  font-display: swap;
  src: local('Pretendard Thin'), url('../fonts/Pretendard-Thin.woff2') format('woff2'), url('../fonts/Pretendard-Thin.woff') format('woff');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 200;
  font-display: swap;
  src: local('Pretendard ExtraLight'), url('../fonts/Pretendard-ExtraLight.woff2') format('woff2'), url('../fonts/Pretendard-ExtraLight.woff') format('woff');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 300;
  font-display: swap;
  src: local('Pretendard Light'), url('../fonts/Pretendard-Light.woff2') format('woff2'), url('../fonts/Pretendard-Light.woff') format('woff');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 400;
  font-display: swap;
  src: local('Pretendard Regular'), url('../fonts/Pretendard-Regular.woff2') format('woff2'), url('../fonts/Pretendard-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 500;
  font-display: swap;
  src: local('Pretendard Medium'), url('../fonts/Pretendard-Medium.woff2') format('woff2'), url('../fonts/Pretendard-Medium.woff') format('woff');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 600;
  font-display: swap;
  src: local('Pretendard SemiBold'), url('../fonts/Pretendard-SemiBold.woff2') format('woff2'), url('../fonts/Pretendard-SemiBold.woff') format('woff');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 700;
  font-display: swap;
  src: local('Pretendard Bold'), url('../fonts/Pretendard-Bold.woff2') format('woff2'), url('../fonts/Pretendard-Bold.woff') format('woff');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 800;
  font-display: swap;
  src: local('Pretendard ExtraBold'), url('../fonts/Pretendard-ExtraBold.woff2') format('woff2'), url('../fonts/Pretendard-ExtraBold.woff') format('woff');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 900;
  font-display: swap;
  src: local('Pretendard Black'), url('../fonts/Pretendard-Black.woff2') format('woff2'), url('../fonts/Pretendard-Black.woff') format('woff');
}

:root { 
  --font-size: 18px;
  --inner-width: 92%;
  --inner-max-width: 1400px;
  /* [공통] PC 해상도에서 상단 로고·서브비주얼 하단 탭·컨텐츠 영역 좌우 여백 (창을 줄여도 일정 여백 유지, 탭 우측은 햄버거 메뉴와 정렬). 여백 값 변경 시 이 변수만 수정하면 됨. */
  --content-padding-x: 24px;
  --header-height: 100px;
  --font-family: 'Pretendard', Arial, sans-serif;
  --title-font-family: 'Pretendard', Arial, sans-serif;

  --primary-color: #05507d;
  --light-color: #fff;
  --dark-color: #333;
  --gray-color: #f3f6f9;

  --font-color: #222;
  --font-sec-color: #333;
  --background-color: #fff;
  --border-color: #ccc;

  /* 서브 키비주얼 배경 높이 배율(%) — 박스 높이 대비. 100=원본 세로 전체(하늘 비중 작게 느껴질 수 있음). 108~120=약간 확대+상단 정렬로 하늘 비중↑·하단 산 일부만 잘림(두 번째 시안에 가깝게). 125±=산 실루엣 많이 잘림. */
  --sub-page-kv-bg-height-scale: 115;
}

*, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; box-sizing: border-box; }
a { color: initial; text-decoration: none; }
html { font-size: 16px; }
body { font-family: var(--font-family); color: var(--font-color); font-size: var(--font-size); line-height: 1.5; font-weight: 400; letter-spacing: -0.02em; font-weight: normal; min-width: 320px; background-color: var(--background-color); word-break: keep-all; word-wrap: break-word; }
button { padding: 0; cursor: pointer; }
img { max-width: 100%; vertical-align: top; }
map area { cursor: pointer; }
b { font-weight: 700; }

caption {width:1px; height:1px; margin:-1px; position:relative; top:0; left:0; border:none; overflow:hidden; clip:rect(0, 0, 0, 0)}
.hidden{display:inline-block; width:1px; height:1px; margin:-1px; position:relative; top:0; left:0; border:none; overflow:hidden; clip:rect(0, 0, 0, 0)}
.skip_nav a{position: absolute; top: -100px; width: 100%; background-color: #000; color: #fff; transition: top 0.3s; height: 30px; line-height: 30px; z-index: 9999; text-align: center;}
.skip_nav a:focus{top:0;}

/* IE Alert */
#IE_alert { position: fixed; top: -40px; left: 0; width: 100%; height: 40px; z-index: 10000; background-color: #000; box-sizing: border-box; font-size: 13px; color: #fff; overflow: hidden; -webkit-transition: top 0.35s ease; transition: top 0.35s ease; }
#IE_alert.show { top: 0; }
#IE_alert > div { width: 96%; height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
#IE_alert .text a { color: #fff; border-bottom: 1px solid #fff; }
#IE_alert .text a.download { display: inline-block; width: 75px; height: 20px; font-size: 13px; color: #fff; background-color: #0067b8; text-align: center; margin-left: 20px; border: 0; }
#IE_alert .close a { color: #999; display: flex; align-items: center; }
#IE_alert .close a:after { content: ''; width: 12px; height: 12px; margin-left: 10px; background-size: contain; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='18px' height='18px'%3E%3Cpath fill-rule='evenodd' fill='rgb(255, 255, 255)' d='M17.798,1.040 L9.834,9.004 L17.706,16.877 L16.877,17.706 L9.004,9.833 L1.040,17.797 L0.202,16.960 L8.166,8.995 L0.294,1.123 L1.123,0.294 L8.996,8.166 L16.960,0.202 L17.798,1.040 Z'/%3E%3C/svg%3E"); }
