@charset "utf-8";

/* 토큰 */
:root {--Gray_100:#141414; --Gray_80:#565656; --Gray_70:#747474; --Gray_40:#C1C1C1; --Gray_20:#e6e6e6; --Gray_10:#f7f9fb; --White:#fff; --Primary:#003763; --Primary_Hover:#001729; --Secondary:#27aae1; --Tertiary:#59b892; --Warning:#fbb03f; --Success:#8dc63f; --Info:#568fdf; --Orange:#ce8129; --Focus:#005fcc; --Shadow_Surface:0 12px 30px rgba(0,36,80,.12); --Size_Page:1920px; --Size_Inner:1440px; --Header_Height:70px; --Radius_S:8px; --Radius_M:20px; --Radius_L:30px; --Radius_Pill:999px;}

/* 초기화 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } 

table, caption, tbody, tfoot, thead, tr, th, td{vertical-align: middle;}
/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; } 
body { line-height: 1; } 
ol, ul { list-style: none; } 
blockquote, q { quotes: none; } 
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; } 
table { border-collapse: collapse; border-spacing: 0; } 
html {font-size: 62.5%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable;}
/* 기본 글자 크기 반응형 - 태블릿 */
@media (max-width: 1200px) {
  html {font-size: 58%;}
}

/* 기본 글자 크기 반응형 - 태블릿 */
@media (max-width: 1024px) {
  html {font-size: 56.25%;}
}

/* 기본 글자 크기 반응형 - 모바일 */
@media (max-width: 768px) {
  html {font-size: 55%;}
}
@media (max-width: 480px) {
  html {font-size: 53.5%;}
}
/* 기본 글자 크기 반응형 - 모바일 */


html, body {width: 100%; min-height: 100%; overflow-x: hidden;}
body {min-width: 320px; font-family: "Pretendard", "Malgun Gothic", "맑은 고딕", Arial, sans-serif; font-size: 1.6rem; font-weight: 400; line-height: 1.5; color: var(--Gray_100); background-color: var(--White); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
main {display: block;}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {margin: 0;}
ul, ol {list-style: none;}
a {color: inherit; text-decoration: none;}
*,
*::before,
*::after { box-sizing: border-box; } 
a { color:inherit; text-decoration: none; } 
button { cursor: pointer; border:0 none; background-color: transparent; color:inherit; } 
input,label, button,textarea,select {border-radius: 0;} 
button, input, select, textarea {font: inherit; color: inherit;}
button {border: 0; background: none; cursor: pointer;}
button:disabled {cursor: not-allowed;}
input, button, textarea {-webkit-appearance: none; appearance: none;}
input, textarea {border-radius: 0;}
textarea {resize: vertical;}

img, picture, video, canvas, svg {display: block; max-width: 100%;}
img {height: auto; vertical-align: middle;}
table {width: 100%; border-collapse: collapse; border-spacing: 0;}
caption {padding: 0; text-align: left;}
fieldset {min-width: 0; border: 0;}
legend {padding: 0;}
address, em, i {font-style: normal;}
strong, b {font-weight: 700;}

/* 접근성 */
.blind {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); border: 0; white-space: nowrap;}
.skip-nav {position: fixed; left: 0; top: -60px; z-index: 10000; min-width: 18rem; padding: 1.2rem 2rem; background-color: var(--Primary); color: #fff; font-weight: 700; text-align: center;}
.skip-nav:focus {top: 0;}
:where(a, button, input, select, textarea, [tabindex]):focus-visible {outline: 3px solid var(--Focus); outline-offset: 3px;}

/* 공통 */
.inner {max-width: var(--Size_Inner); margin: 0 auto;width: calc(100% - 40px);padding: 0 6rem;}
.pc-only {display: block;}
.mobile-only {display: none;}
.text-primary {color: var(--Primary);}
.text-muted {color: var(--Gray_70);}
.is-hidden {display: none;}

@media screen and (max-width:1024px) {
  .inner {padding: 0;}
}

/* 공통 반응형 - 모바일 */
@media (max-width: 480px) {
  .inner {width: calc(100% - 32px);}
}