@charset "UTF-8";
/* 공통 */
/* @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&display=swap"); */
/* @font-face { */
/*   font-family: "SebangGothic"; */
/*   font-weight: 400; */
/*   font-style: normal; */
/*   font-display: swap; */
/*   src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.0/SEBANG_Gothic_Regular.woff") */
/*     format("woff"); */
/* } */
/*  */
/* @font-face { */
/*   font-family: "SebangGothic"; */
/*   font-weight: 700; */
/*   font-style: normal; */
/*   font-display: swap; */
/*   src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.0/SEBANG_Gothic_Bold.woff") */
/*     format("woff"); */
/* } */

/** reset **/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ol,
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
hr {
  display: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
a:link,
a:visited {
  text-decoration: none;
}
a,
a:hover,
a:visited,
a:link a:active {
  color: inherit;
  text-decoration: none;
}

/** tokens **/
:root {
  font-family: "SebangGothic", "Noto Sans KR", "맑은 고딕", "Malgun Gothic",
    "돋움", "Dotum", "Apple SD Gothic Neo", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;

  --color-white: #fff;
  --color-black: #000;
  --color-text: var(--color-gray-80);
  --color-primary: #246beb;
  --color-secondary: #003675;
  --color-point: #e71825;
  --color-danger: #eb003b;
  --color-warning: #ffb724;
  --color-success: #008a1e;
  --color-information: #2768ff;

  /* 수도권 */
  --sline-01: #0052a4; /* 1호선 */
  --sline-02: #00a84d; /* 2호선 */
  --sline-03: #ef7c1c; /* 3호선 */
  --sline-04: #00a4e3; /* 4호선 */
  --sline-05: #996cac; /* 5호선 */
  --sline-06: #cd7c2f; /* 6호선 */
  --sline-07: #747f00; /* 7호선 */
  --sline-08: #e6186c; /* 8호선 */
  --sline-09: #bdb092; /* 9호선 */

  --sline-10: #8cadcb; /* 인천1호선 */
  --sline-11: #f06a00; /* 인천2호선 */

  --sline-12: #fabe00; /* 수인분당선 */
  --sline-13: #0090d2; /* 공항철도 */
  --sline-14: #77c4a3; /* 경의중앙선 */
  --sline-15: #178c72; /* 경춘선 */
  --sline-16: #005bac; /* 경강선 */

  --sline-17: #d31145; /* 신분당선 */
  --sline-18: #56ad2d; /* 에버라인 */
  --sline-19: #b7c450; /* 우이신설선 */
  --sline-20: #fd8100; /* 의정부 */
  --sline-21: #ff6600; /* 자기부상 */

  --sline-22: #9a6292; /* GTX-A */
  --sline-23: #ad8605; /* 김포골드라인 */
  --sline-24: #6789ca; /* 신림선 */
  --sline-25: #8bc53f; /* 서해선 */

  /* 부산 */
  --bline-01: #f06a00; /* 부산 1호선 */
  --bline-02: #81bf48; /* 부산 2호선 */
  --bline-03: #bb8c00; /* 부산 3호선 */
  --bline-04: #217dcb; /* 부산 4호선e */
  --bline-05: #8451a0; /* 부산-김해선 */
  --bline-06: #0066b3; /* 동해선 */

  /* 대구 */
  --dline-01: #e3002c; /* 대구 1호선 */
  --dline-02: #00a5e5; /* 대구 2호선 */
  --dline-03: #ffce00; /* 대구 3호선 */
  --dline-04: #003da5; /* 대경선 */

  /* 광주 */
  --gline-01: #009d3e;

  /* 대전 */
  --djline-01: #0078c9; /* 대전 1호선 */

  --color-primary-5: #ecf2fe;
  --color-primary-10: #d8e5fd;
  --color-primary-20: #b1cefb;
  --color-primary-30: #86aff9;
  --color-primary-40: #4c87f6;
  --color-primary-50: #256ef4;
  --color-primary-60: #0b50d0;
  --color-primary-70: #083891;
  --color-primary-80: #052561;
  --color-primary-90: #03163a;
  --color-primary-95: #020f27;
  --color-secondary-5: #eef2f7;
  --color-secondary-10: #d6e0eb;
  --color-secondary-20: #bacbde;
  --color-secondary-30: #90b0d5;
  --color-secondary-40: #6b96c7;
  --color-secondary-50: #346fb2;
  --color-secondary-60: #1c589c;
  --color-secondary-70: #063a74;
  --color-secondary-80: #052b57;
  --color-secondary-90: #031f3f;
  --color-secondary-95: #02162c;
  --color-gray-0: #f9fafc;
  --color-gray-5: #f4f5f6;
  --color-gray-10: #e6e8ea;
  --color-gray-20: #cdd1d5;
  --color-gray-30: #b1b8be;
  --color-gray-40: #8a949e;
  --color-gray-50: #6d7882;
  --color-gray-60: #58616a;
  --color-gray-70: #464c53;
  --color-gray-80: #33363d;
  --color-gray-90: #1e2124;
  --color-gray-95: #131416;
  --color-gray-100: #000000;
  --color-danger-5: #fdefec;
  --color-danger-10: #fcdfd9;
  --color-danger-20: #f7afa1;
  --color-danger-30: #f48771;
  --color-danger-40: #f05f42;
  --color-danger-50: #de3412;
  --color-danger-60: #bd2c0f;
  --color-danger-70: #8a240f;
  --color-danger-80: #5c180a;
  --color-danger-90: #390d05;
  --color-danger-95: #260903;
  --color-information-5: #e7f4fe;
  --color-information-10: #d3ebfd;
  --color-information-20: #9ed2fa;
  --color-information-30: #5fb5f7;
  --color-information-40: #2098f3;
  --color-information-50: #0b78cb;
  --color-information-60: #096ab3;
  --color-information-70: #085691;
  --color-information-80: #053961;
  --color-information-90: #03253f;
  --color-information-95: #021a2c;
  --color-warning-5: #fff3db;
  --color-warning-10: #ffe0a3;
  --color-warning-20: #ffc95c;
  --color-warning-30: #ffb114;
  --color-warning-40: #c78500;
  --color-warning-50: #9e6a00;
  --color-warning-60: #8a5c00;
  --color-warning-70: #614100;
  --color-warning-80: #422c00;
  --color-warning-90: #2e1f00;
  --color-warning-95: #241800;
  --color-success-5: #eaf6ec;
  --color-success-10: #d8eedd;
  --color-success-20: #a9dab4;
  --color-success-30: #7ec88e;
  --color-success-40: #3fa654;
  --color-success-50: #228738;
  --color-success-60: #267337;
  --color-success-70: #285d33;
  --color-success-80: #1f4727;
  --color-success-90: #122b18;
  --color-success-95: #0e2012;
  --color-point-5: #fbeff0;
  --color-point-10: #f5d6d9;
  --color-point-20: #ebadb2;
  --color-point-30: #e0858c;
  --color-point-40: #d65c66;
  --color-point-50: #d63d4a;
  --color-point-60: #ab2b36;
  --color-point-70: #7a1f26;
  --color-point-80: #521419;
  --color-point-90: #310c0f;
  --color-point-95: #21080a;
  --color-graphic-5: #f8fcff;
  --color-graphic-10: #e5ecf9;
  --color-graphic-20: #beccdf;
  --color-graphic-30: #98acc5;
  --color-graphic-50: #61758f;
  --color-graphic-70: #39506c;
  --color-graphic-90: #223a58;

  --space-120: clamp(4rem, 1.2rem + 6vw, 7.5rem);
  --space-100: clamp(3.5rem, 1rem + 5vw, 6.25rem);
  --space-96: clamp(3.25rem, 0.9rem + 4.8vw, 6rem);
  --space-80: clamp(2.75rem, 0.8rem + 4vw, 5rem);
  --space-72: clamp(2.5rem, 0.7rem + 3.6vw, 4.5rem);
  --space-68: clamp(2.125rem, 0.6rem + 3.3vw, 4.25rem);
  --space-64: clamp(2.25rem, 0.6rem + 3.2vw, 4rem);
  --space-60: clamp(2rem, 0.5rem + 3vw, 3.75rem);
  --space-56: clamp(1.875rem, 0.5rem + 2.8vw, 3.5rem);
  --space-52: clamp(1.75rem, 0.4rem + 2.6vw, 3.25rem);
  --space-48: clamp(1.625rem, 0.4rem + 2.5vw, 3rem);
  --space-40: clamp(1.5rem, 0.35rem + 2vw, 2.5rem);
  --space-36: clamp(1.25rem, 0.3rem + 1.8vw, 2.25rem);
  --space-32: clamp(1.125rem, 0.3rem + 1.6vw, 2rem);
  --space-30: clamp(1rem, 0.25rem + 1.5vw, 1.875rem);
  --space-28: clamp(0.9375rem, 0.25rem + 1.4vw, 1.75rem);
  --space-24: clamp(1rem, 0.25rem + 1.2vw, 1.5rem);
  --space-21: clamp(0.9375rem, 0.22rem + 1.05vw, 1.375rem);
  --space-20: clamp(0.875rem, 0.2rem + 1vw, 1.25rem);
  --space-16: clamp(0.75rem, 0.15rem + 0.8vw, 1rem);
  --space-12: clamp(0.5rem, 0.1rem + 0.6vw, 0.75rem);
  --space-8: clamp(0.375rem, 0.08rem + 0.4vw, 0.5rem);
  --space-4: clamp(0.1875rem, 0.05rem + 0.2vw, 0.25rem);

  --fz-h56: clamp(2.125rem, 1.6rem + 1.7vw, 3.5rem);
  --fz-h54: clamp(2.0625rem, 1.55rem + 1.65vw, 3.375rem);
  --fz-h52: clamp(2rem, 1.5rem + 1.6vw, 3.25rem);
  --fz-h50: clamp(1.9375rem, 1.45rem + 1.55vw, 3.125rem);
  --fz-h48: clamp(1.875rem, 1.4rem + 1.5vw, 3rem);
  --fz-h46: clamp(1.8125rem, 1.35rem + 1.45vw, 2.875rem);
  --fz-h44: clamp(1.75rem, 1.3rem + 1.4vw, 2.75rem);
  --fz-h42: clamp(1.6875rem, 1.25rem + 1.35vw, 2.625rem);
  --fz-h40: clamp(1.625rem, 1.2rem + 1.3vw, 2.5rem);
  --fz-h38: clamp(1.5625rem, 1.15rem + 1.25vw, 2.375rem);
  --fz-h36: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  --fz-h34: clamp(1.4375rem, 1.05rem + 1.15vw, 2.125rem);
  --fz-h32: clamp(1.375rem, 1rem + 1.1vw, 2rem);
  --fz-h30: clamp(1.3125rem, 0.95rem + 1.05vw, 1.875rem);
  --fz-h28: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
  --fz-h26: clamp(1.1875rem, 0.85rem + 0.95vw, 1.625rem);
  --fz-h24: clamp(1.125rem, 0.8rem + 0.9vw, 1.5rem);
  --fz-h22: clamp(1.0625rem, 0.75rem + 0.8vw, 1.375rem);
  --fz-h21: clamp(1.03125rem, 0.725rem + 0.75vw, 1.3125rem);
  --fz-h20: clamp(1rem, 0.7rem + 0.7vw, 1.25rem);
  --fz-h18: clamp(0.9375rem, 0.65rem + 0.6vw, 1.125rem);
  --fz-h16: clamp(0.875rem, 0.6rem + 0.5vw, 1rem);
  --fz-h14: clamp(0.8125rem, 0.55rem + 0.4vw, 0.875rem);

  --border-1: 1px solid var(--color-gray-40);
  --box-shadow-xl: 4px 0 32px rgba(0, 0, 0, 0.2);
  --box-shadow-lg: 2px 0 16px rgba(0, 0, 0, 0.2);
  --box-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.2);
  --box-shadow-sm: 0 4px 4px rgba(0, 0, 0, 0.25);
}

/** base **/
body {
  color: var(--color-gray-90);
  font-size: var(--fz-h16);
}
body.no-scroll {
  overflow: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6,
strong {
  font-weight: 700;
  line-height: 1.5;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a:focus,
button:focus,
.focusable:focus {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  outline: 3px solid var(--color-point-60) !important;
  outline-offset: 0;
  border: none !important;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
/* a:focus:not(:focus-visible) { outline: none; } */

a:hover {
  color: var(--color-point-50);
  transition: all 0.3s ease;
}

/** components **/
.btn,
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1em 1.5em;
  color: var(--color-white);
  background-color: var(--color-primary-60);
  border: 1px solid var(--color-primary-60);
  border-radius: 0.5em;
  transition: 0.4s ease-in-out;
}
.btn:hover {
  background-color: var(--color-primary-70);
  color: var(--color-white);
}

.btn.secondary {
  color: var(--color-secondary-50);
  background-color: #fff;
}
.btn.secondary:hover {
  color: var(--color-secondary-80);
  background-color: var(--color-primary-5);
}
.btn.danger {
  background-color: var(--color-danger-60);
  border-color: var(--color-danger-60);
}
.btn.danger:hover {
  background-color: var(--color-danger-70);
}
.btn.gray {
  background-color: var(--color-gray-70);
}
.btn.gray:hover {
  background-color: var(--color-gray-80);
}

.btn.xxs {
  padding: 0.5em 1.5em;
  font-size: var(--fz-h18);
  height: 2.5em;
}
.btn.xs {
  padding: 0.75em 1em;
  font-size: var(--fz-h18);
  height: 3em;
}
.btn.sm {
  padding: 0.75em 2em;
  font-size: var(--fz-h20);
}
.btn.md {
  font-size: var(--fz-h24);
}
.btn.lg {
  font-size: var(--fz-h28);
}

input.xs {
  padding: 0.75em 1em;
  font-size: var(--fz-h18);
  border-radius: 0.5em;
  border: 1px solid var(--color-gray-30);
  height: 3em;
}
input.sm {
  padding: 0.75em 2em;
  font-size: var(--fz-h20);
  border-radius: 0.5em;
  border: 1px solid var(--color-gray-30);
}

select.xxs {
  padding: 0.5em 1em;
  font-size: var(--fz-h18);
  height: 2.5em;
  border-radius: 0.5em;
}

.btn.icon-newwin {
  position: relative;
  padding-right: 3em;
  background-image: url("../img/icon-newwin.svg");
  background-repeat: no-repeat;
  background-position: right 1.5em center;
  background-size: 1em;
}
.btn.icon-file {
  position: relative;
  padding-right: 3em;
  background-image: url("../img/icon-file.svg");
  background-repeat: no-repeat;
  background-position: right 1.5em center;
  background-size: 1em;
}

.badge-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-right: 0.5em;
  width: 5em;
  height: 2.2em;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 2.2;
  text-align: center;
  color: #fff;
  border-radius: 3em;
  background-color: var(--color-point-60);
  vertical-align: 0.25em;
}
.badge-new.primary {
  background-color: var(--color-primary-50);
}

a:hover .badge-new {
  animation: pulse 1.2s ease-in-out 0s 1 forwards;
}
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

.alarm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-right: 0.25em;
  width: 3.5em;
  height: 2em;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 2.2;
  text-align: center;
  color: #fff;
  border-radius: 3em;
  background-color: var(--color-danger-50);
  vertical-align: 0.25em;
}
.alarm.normal {
  background-color: var(--color-success-50);
}

.badge-up {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5em 0.75em;
  font-size: var(--fz-h14);
  color: #fff;
  border-radius: 3em;
  background-color: var(--color-point-60);
  vertical-align: 0.25em;
}

/** utilities **/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-nav {
  position: absolute;
  top: -3rem;
  left: 0;
  padding: 0.25em;
  width: 100%;
  text-align: center;
  color: #fff !important;
  background: #000;
  z-index: 1000;
}
.skip-nav:focus {
  top: 0;
}

.t-primary {
  color: var(--color-primary-70);
}
.t-secondary {
  color: var(--color-secondary-60);
}
.t-point {
  color: var(--color-point-50);
}
.t-white {
  color: #fff;
}
.t-black {
  color: #000;
}

.bg-white {
  background-color: #fff;
}
.bg-gray {
  background-color: var(--color-gray-5);
}
.bg-black {
  background-color: #000;
}

.fz-20 {
  font-size: var(--fz-h20) !important;
}
.fz-24 {
  font-size: var(--fz-h24) !important;
}
.fz-28 {
  font-size: var(--fz-h28) !important;
}
.fw-n {
  font-weight: 400 !important;
}
.fw-b {
  font-weight: 700 !important;
}
.lh-sm {
  line-height: 1 !important;
}
.lh-md {
  line-height: 1.5 !important;
}
.lh-lg {
  line-height: 1.8 !important;
}
.lh-xl {
  line-height: 2 !important;
}

.pt-0 {
  padding-top: 0em !important;
}
.pt-1 {
  padding-top: 1em !important;
}
.pt-2 {
  padding-top: 2em !important;
}
.pt-3 {
  padding-top: 3em !important;
}
.pt-4 {
  padding-top: 4em !important;
}
.pt-5 {
  padding-top: 5em !important;
}
.pb-0 {
  padding-bottom: 0em !important;
}
.pb-1 {
  padding-bottom: 1em !important;
}
.pb-2 {
  padding-bottom: 2em !important;
}
.pb-3 {
  padding-bottom: 3em !important;
}
.pb-4 {
  padding-bottom: 4em !important;
}
.pb-5 {
  padding-bottom: 5em !important;
}
.px-0 {
  padding-inline: 0em !important;
}
.px-1 {
  padding-inline: 1em !important;
}
.px-2 {
  padding-inline: 2em !important;
}
.px-3 {
  padding-inline: 3em !important;
}
.px-4 {
  padding-inline: 4em !important;
}
.px-5 {
  padding-inline: 5em !important;
}
.py-0 {
  padding-block: 0em !important;
}
.py-1 {
  padding-block: 1em !important;
}
.py-2 {
  padding-block: 2em !important;
}
.py-3 {
  padding-block: 3em !important;
}
.py-4 {
  padding-block: 4em !important;
}
.py-5 {
  padding-block: 5em !important;
}

.mt-0 {
  margin-top: 0em !important;
}
.mt-1 {
  margin-top: 1em !important;
}
.mt-2 {
  margin-top: 2em !important;
}
.mt-3 {
  margin-top: 3em !important;
}
.mt-4 {
  margin-top: 4em !important;
}
.mt-5 {
  margin-top: 5em !important;
}
.mb-0 {
  margin-bottom: 0em !important;
}
.mb-1 {
  margin-bottom: 1em !important;
}
.mb-2 {
  margin-bottom: 2em !important;
}
.mb-3 {
  margin-bottom: 3em !important;
}
.mb-4 {
  margin-bottom: 4em !important;
}
.mb-5 {
  margin-bottom: 5em !important;
}
.mx-0 {
  margin-inline: 0em !important;
}
.mx-1 {
  margin-inline: 1em !important;
}
.mx-2 {
  margin-inline: 2em !important;
}
.mx-3 {
  margin-inline: 3em !important;
}
.mx-4 {
  margin-inline: 4em !important;
}
.mx-5 {
  margin-inline: 5em !important;
}
.my-0 {
  margin-block: 0em !important;
}
.my-1 {
  margin-block: 1em !important;
}
.my-2 {
  margin-block: 2em !important;
}
.my-3 {
  margin-block: 3em !important;
}
.my-4 {
  margin-block: 4em !important;
}
.my-5 {
  margin-block: 5em !important;
}

.br-1 {
  border-radius: 1em;
}
.br-2 {
  border-radius: 2em;
}
.br-3 {
  border-radius: 3em;
}
.br-4 {
  border-radius: 4em;
}
.br-5 {
  border-radius: 5em;
}

.t-left {
  text-align: left !important;
}
.t-center {
  text-align: center !important;
}
.t-right {
  text-align: right !important;
}

.scroll-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.border {
  border: 1px solid var(--color-gray-30);
}
.display-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.note-mark {
  position: relative;
  padding-left: 1.5em;
  margin-top: 0.5em;
  font-size: var(--fz-h20);
  color: var(--color-gray-70);
  line-height: 1.5;
}

.note-mark::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-point-70);
}
.note-text {
  font-size: var(--fz-h20);
}
.note-text.point {
  color: var(--color-danger-60);
  font-size: var(--fz-h20);
}
.new-link {
  padding-left: 1.25em;
  background: url(../img/icon-link.svg) no-repeat;
  background-size: contain;
}