@charset "UTF-8";
:root {
  --white: #fff;
  --black: #000;
  --primary_0: var(--white);
  --primary_5: #f0f5fa;
  --primary_10: #d9e7f3;
  --primary_15: #b0cde6;
  --primary_20: #8ab5da;
  --primary_30: #5493c9;
  --primary_40: #337ebe;
  --primary_50: #005eae;
  --primary_60: #005eae;
  --primary_70: #00437c;
  --primary_80: #003460;
  --primary_90: #002749;
  --primary_100: var(--black);
  --secondary_0: var(--white);
  --secondary_5: #f5fbfa;
  --secondary_10: #e6f6f3;
  --secondary_15: #def3f0;
  --secondary_20: #c2e9e2;
  --secondary_30: #91d7cc;
  --secondary_40: #5ec5b4;
  --secondary_50: #2eb49d;
  --secondary_60: #00a388;
  --secondary_70: #008b74;
  --secondary_80: #007461;
  --secondary_90: #005d4e;
  --secondary_100: var(--black);
  --gray_0: var(--white);
  --gray_5: #f7f7f7;
  --gray_10: #efefef;
  --gray_15: #d9d9d9;
  --gray_20: #c4c4c4;
  --gray_25: #b0b0b0;
  --gray_30: #9b9b9b;
  --gray_35: #8a8a8a;
  --gray_40: #737373;
  --gray_50: #5c5c5c;
  --gray_60: #474747;
  --gray_70: #303030;
  --gray_80: #2a2a2a;
  --gray_90: #1c1c1c;
  --gray_95: #171717;
  --gray_99: #0f0f0f;
  --gray_100: var(--black);
  --primary: var(--primary_60);
  --secondary: var(--secondary_60);
  --primary_light: var(--primary_40);
  --primary_normal: var(--primary);
  --primary_saturate: #0677d7;
  --primary_strong: var(--primary_80);
  --primary_heavy: var(--primary_90);
  --primary_primary-light: var(--primary_10);
  --secondary_light: var(--secondary_40);
  --secondary_normal: var(--secondary);
  --secondary_strong: var(--secondary_80);
  --secondary_heavy: var(--secondary_90);
  --secondary_secondary-light: var(--secondary_10);
  --text_display: var(--gray_95);
  --text_heading: var(--gray_95);
  --text_title: var(--gray_80);
  --text_body1: var(--gray_70);
  --text_body2: var(--gray_70);
  --text_body3: var(--gray_60);
  --text_caption: var(--gray_40);
  --text_placeholder: var(--gray_35);
  --text_disable: var(--gray_30);
  --text_light: var(--gray_35);
  --text_normal: var(--gray_50);
  --text_strong: var(--gray_60);
  --text_disable: var(--gray_25);
  --divider_light: var(--gray_10);
  --divider_normal: var(--gray_15);
  --divider_strong: var(--gray_20);
  --outline_light: var(--gray_10);
  --outline_normal: var(--gray_15);
  --outline_strong: var(--gray_35);
  --outline_heavy: var(--gray_50);
  --outline_alternative: rgba(0, 0, 0, 0.8);
  --container_gray-light: var(--gray_5);
  --container_gray-normal: var(--gray_10);
  --container_gray-strong: var(--gray_25);
  --container_primary-light: var(--primary_5);
  --container_primary-normal: var(--primary_10);
  --container_primary-strong: var(--primary_15);
  --container_secondary-light: var(--secondary_5);
  --container_secondary-normal: var(--secondary_10);
  --container_secondary-strong: var(--secondary_20);
  --container_disable: var(--gray_10);
  --surface_background: var(--white);
  --surface_low: var(--gray_5);
  --surface_mid: var(--gray_10);
  --surface_high: var(--gray_15);
  --status_error: #f5222d;
  --status_success: #096dd9;
}

.text-white {
  color: var(--white) !important;
}

.text-black {
  color: var(--black) !important;
}

.text-error {
  color: #f5222d !important;
}

.text-error-strong {
  color: #cf1322 !important;
}

.text-warning {
  color: #faad14 !important;
}

.text-warning-strong {
  color: #d48806 !important;
}

.text-info {
  color: #2f54eb !important;
}

.text-info-strong {
  color: #1d39c4 !important;
}

.text-success {
  color: #096dd9 !important;
}

.text-success-strong {
  color: #0050b3 !important;
}

.text-legend-1 {
  color: #28c21a !important;
}

.text-legend-2 {
  color: #f9ca44 !important;
}

.text-legend-3 {
  color: #fb8339 !important;
}

.text-legend-4 {
  color: #dd1f3d !important;
}

.text-legend-5 {
  color: #c7c7c7 !important;
}

.bg-white {
  background-color: var(--white) !important;
}

.bg-black {
  background-color: var(--black) !important;
}

.bg-error {
  background-color: #f5222d !important;
}

.bg-error-strong {
  background-color: #cf1322 !important;
}

.bg-warning {
  background-color: #faad14 !important;
}

.bg-warning-strong {
  background-color: #d48806 !important;
}

.bg-info {
  background-color: #2f54eb !important;
}

.bg-info-strong {
  background-color: #1d39c4 !important;
}

.bg-success {
  background-color: #096dd9 !important;
}

.bg-success-strong {
  background-color: #0050b3 !important;
}

.bg-legend-1 {
  background-color: #28c21a !important;
}

.bg-legend-2 {
  background-color: #f9ca44 !important;
}

.bg-legend-3 {
  background-color: #fb8339 !important;
}

.bg-legend-4 {
  background-color: #dd1f3d !important;
}

.bg-legend-5 {
  background-color: #c7c7c7 !important;
}

/* 
 * Normalize 
 */
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,
b,
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 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: "NanumSquareNeo", sans-serif;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

html,
body {
  font-size: 10px;
  font-family: "NanumSquareNeo", sans-serif;
  font-weight: 400;
}

body {
  line-height: 1;
}

h1,
h2,
h3 {
  font-weight: 700;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

button {
  cursor: pointer;
  font-family: inherit;
}

button,
input {
  vertical-align: middle;
  box-sizing: border-box;
  border: 0;
  appearance: none;
  border-radius: 0;
  background: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  text-decoration: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 
 * Scroll Bar 
 */
::-webkit-scrollbar {
  width: 6px;
  height: 7px;
  border-radius: 30px;
  background: transparent;
}

::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}

::-webkit-scrollbar-thumb {
  border: none;
  border-radius: 30px;
  background: var(--primary_10);
}

::-webkit-scrollbar-track {
  border: none;
  border-radius: 30px;
  background: transparent;
}

/**************************** 
 * LAYOUT COMMON
*****************************/
.wrapper {
  width: 100%;
  height: 100%;
}
/**************************** 
 * FONT FACE
*****************************/
@font-face {
  font-family: "NanumSquareNeo";
  font-style: normal;
  font-weight: 100 900;
  src: url("../fonts/woff2/NanumSquareNeo-Variable.woff2") format("woff2"), url("../fonts/woff/NanumSquareNeo-Variable.woff") format("woff"), url("../fonts/eot/NanumSquareNeo-Variable.eot");
  font-display: swap;
}
@font-face {
  font-family: "NanumSquareNeo";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/woff2/NanumSquareNeoTTF-aLt.woff2") format("woff2"), url("../fonts/woff/NanumSquareNeoTTF-aLt.woff") format("woff"), url("../fonts/eot/NanumSquareNeoTTF-aLt.eot");
  font-display: swap;
}
@font-face {
  font-family: "NanumSquareNeo";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/woff2/NanumSquareNeoTTF-bRg.woff2") format("woff2"), url("../fonts/woff/NanumSquareNeoTTF-bRg.woff") format("woff"), url("../fonts/eot/NanumSquareNeoTTF-bRg.eot");
  font-display: swap;
}
@font-face {
  font-family: "NanumSquareNeo";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/woff2/NanumSquareNeoTTF-cBd.woff2") format("woff2"), url("../fonts/woff/NanumSquareNeoTTF-cBd.woff") format("woff"), url("../fonts/eot/NanumSquareNeoTTF-cBd.eot");
  font-display: swap;
}
@font-face {
  font-family: "NanumSquareNeo";
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/woff2/NanumSquareNeoTTF-dEb.woff2") format("woff2"), url("../fonts/woff/NanumSquareNeoTTF-dEb.woff") format("woff"), url("../fonts/eot/NanumSquareNeoTTF-dEb.eot");
  font-display: swap;
}
@font-face {
  font-family: "NanumSquareNeo";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/woff2/NanumSquareNeoTTF-eHv.woff2") format("woff2"), url("../fonts/woff/NanumSquareNeoTTF-eHv.woff") format("woff"), url("../fonts/eot/NanumSquareNeoTTF-eHv.eot");
  font-display: swap;
}
/**************************** 
 * FONT STYLE DEFINE
*****************************/
:root {
  --font_display-pc: 5.6rem;
  --font_display-mobile: 3.2rem;
  --lineheight_display-pc: 7.2rem;
  --lineheight_display-mobile: 4.1rem;
  --font_heading1-pc: 4.8rem;
  --font_heading1-mobile: 2.8rem;
  --lineheight_heading1-pc: 6.2rem;
  --lineheight_heading1-mobile: 3.2rem;
  --font_heading2-pc: 4rem;
  --font_heading2-mobile: 2.4rem;
  --lineheight_heading2-pc: 5.2rem;
  --lineheight_heading2-mobile: 3.1rem;
  --font_title1-pc: 3.2rem;
  --font_title1-mobile: 2rem;
  --lineheight_title1-pc: 4.4rem;
  --lineheight_title1-mobile: 2.8rem;
  --font_title2-pc: 2.4rem;
  --font_title2-mobile: 1.8rem;
  --lineheight_title2-pc: 3.3rem;
  --lineheight_title2-mobile: 2.5rem;
  --font_title3-pc: 2rem;
  --font_title3-mobile: 1.6rem;
  --lineheight_title3-pc: 2.8rem;
  --lineheight_title3-mobile: 2.2rem;
  --font_body1-pc: 1.8rem;
  --font_body1-mobile: 1.4rem;
  --lineheight_body1-pc: 2.7rem;
  --lineheight_body1-mobile: 2.1rem;
  --font_body2-pc: 1.6rem;
  --font_body2-mobile: 1.3rem;
  --lineheight_body2-pc: 2.4rem;
  --lineheight_body2-mobile: 1.9rem;
  --font_body3-pc: 1.5rem;
  --font_body3-mobile: 1.3rem;
  --lineheight_body3-pc: 2.2rem;
  --lineheight_body3-mobile: 1.9rem;
  --font_caption-pc: 1.4rem;
  --font_caption-mobile: 1.2rem;
  --lineheight_caption-pc: 1.9rem;
  --lineheight_caption-mobile: 1.6rem;
}

@media (max-width: 768px) {
  :root {
    --font_display: 3.2rem;
    --lineheight_display: 4.1rem;
    --font_heading1: 2.8rem;
    --lineheight_heading1: 3.2rem;
    --font_heading2: 2.4rem;
    --lineheight_heading2: 3.1rem;
    --font_title1: 2rem;
    --lineheight_title1: 2.8rem;
    --font_title2: 1.8rem;
    --lineheight_title2: 2.5rem;
    --font_title3: 1.6rem;
    --lineheight_title3: 2.2rem;
    --font_body1: 1.4rem;
    --lineheight_body1: 2.1rem;
    --font_body2: 1.3rem;
    --lineheight_body2: 1.9rem;
    --font_body3: 1.3rem;
    --lineheight_body3: 1.9rem;
    --font_caption: 1.2rem;
    --lineheight_caption: 1.6rem;
  }
}
@media screen and (min-width: 768px) {
  :root {
    --font_display: 5.6rem;
    --lineheight_display: 7.2rem;
    --font_heading1: 4.8rem;
    --lineheight_heading1: 6.2rem;
    --font_heading2: 4rem;
    --lineheight_heading2: 5.2rem;
    --font_title1: 3.2rem;
    --lineheight_title1: 4.4rem;
    --font_title2: 2.4rem;
    --lineheight_title2: 3.3rem;
    --font_title3: 2rem;
    --lineheight_title3: 2.8rem;
    --font_body1: 1.8rem;
    --lineheight_body1: 2.7rem;
    --font_body2: 1.6rem;
    --lineheight_body2: 2.4rem;
    --font_body3: 1.5rem;
    --lineheight_body3: 2.2rem;
    --font_caption: 1.4rem;
    --lineheight_caption: 1.9rem;
  }
}
@media (max-width: 768px) {
  .is-mobile {
    display: block !important;
  }
  .is-tablet {
    display: none !important;
  }
  .is-desktop {
    display: none !important;
  }
  .is-tablet-desktop {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .is-mobile {
    display: none !important;
  }
  .is-tablet {
    display: block !important;
  }
  .is-desktop {
    display: none !important;
  }
  .is-tablet-desktop {
    display: block !important;
  }
}
@media (min-width: 1280px) {
  .sector {
    padding: 0 4rem;
  }
  .sector .inner {
    width: 100%;
    max-width: 128rem;
    margin: 0 auto;
  }
  .is-mobile {
    display: none !important;
  }
  .is-tablet {
    display: none !important;
  }
  .is-desktop {
    display: block !important;
  }
  .is-tablet-desktop {
    display: block !important;
  }
}
.btns {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
}
.btns .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  padding: 1.3rem 2.4rem;
  border-radius: 99.9rem;
  font-size: var(--font_title3);
  line-height: var(--lineheight_title3);
  color: var(--white);
  background-color: var(--primary_normal);
  white-space: nowrap;
  cursor: pointer;
}
.btns .btn:hover {
  background-color: var(--primary_strong);
}
.btns .btn--arrow::after {
  content: "";
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  background: url(../images/icons/icon-chevron_right.svg) center no-repeat;
}
.btns .btn--cancel {
  border: 1px solid var(--outline_heavy);
  color: var(--text_body1);
  background-color: #fff;
}
.btns .btn--cancel:hover {
  background-color: var(--surface_low);
}
.btns .btn--roadview {
  border: 1px solid var(--outline_heavy);
  color: var(--text_body1);
  background-color: #fff;
}
.btns .btn--roadview:hover {
  background-color: var(--surface_low);
}
.btns .btn--home {
  padding: 1.3rem 1.6rem;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
}
.btns .btn--home::before {
  content: "";
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  background: url(../images/icons/icon-home-white.svg) center no-repeat;
}
.btns--sm .btn {
  width: auto;
  padding: 0.25rem 1.6rem;
}

@media (min-width: 768px) {
  .btns {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
  }
  .btns .btn {
    padding: 0.85rem 1.6rem;
  }
  .btns--sm .btn {
    padding: 0.7rem 1.6rem;
    font-size: var(--font_body3);
    line-height: var(--lineheight_body3);
    padding: 0.25rem 1.6rem;
  }
}
/* =========================================
   Header (Mobile First)
   - html { font-size: 10px } 기준 rem
   - 모바일: 햄버거 + 풀스크린 우측 슬라이드 패널
   - PC(≥1200px): GNB 노출, 드롭다운
========================================= */
div[data-include=header] {
  position: sticky;
  top: 0;
  z-index: 100;
}

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 0.1rem solid var(--outline_normal);
  background-color: #fff;
  /* 상단 바 */
  /* 로고 */
  /* ---------------------------------------
     공통 네비게이션 컨테이너
     (모바일/PC 변형에 공통으로 쓰는 기본값)
  --------------------------------------- */
}
.header__inner {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding: 1.8rem 1.6rem;
}
.header__logo a {
  display: block;
}
.header__logo a > img {
  width: auto;
  height: 2rem; /* 20px */
  vertical-align: top;
}
.header__nav {
  /* 모바일: 오버레이 패널 */
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: #fff;
  /* 공통 리스트 스타일 (모바일 기본 세로 스택) */
}
.header__nav ul {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  height: 100%;
}
.header__nav ul li {
  display: flex;
  align-items: start;
  flex-direction: column;
}
.header__nav ul li.nav__item {
  border-bottom: 1px solid var(--outline_normal);
}
.header__nav ul li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  padding: 1.95rem 0;
  font-weight: 700;
  font-size: var(--font_title2);
  line-height: var(--lineheight_title2);
  color: var(--text_body1);
}
.header__nav ul li a:hover {
  color: var(--primary_normal);
}
.header__nav ul li a::after {
  content: "";
  inline-size: 2.4rem;
  block-size: 2.4rem;
  background: url(../images/icons/icon-expand-plus.svg) no-repeat center;
  background-size: cover;
}
.header__nav ul li.is-active > a {
  color: var(--primary_normal);
}
.header__nav ul li.is-active > a::after {
  background: url(../images/icons/icon-expand-minus.svg) no-repeat center;
  background-size: cover;
}
.header__nav ul li.is-active > .nav__submenu {
  display: block;
}
.header__nav .nav__submenu {
  display: none;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  padding-bottom: 1.6rem;
}
.header__nav .nav__submenu li {
  padding-bottom: 0;
  border-bottom: 0;
}
.header__nav .nav__submenu li a {
  padding: 0.75rem 0;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--text_body1);
}
.header__nav .nav__submenu li a.external::after {
  content: "";
  display: inline-block;
  inline-size: 2rem;
  block-size: 2rem;
  line-height: var(--lineheight_body2);
  vertical-align: middle;
  background: url("../images/icons/icon-external-link.svg") center no-repeat;
  background-size: cover;
}
.header__nav .nav__submenu li a::after {
  display: none;
}
.header .nav__util {
  display: flex;
  flex-direction: row;
  gap: 1.6rem;
  margin-top: 0.6rem;
  border-bottom: 0;
}
.header .nav__util.nav--pc {
  display: none;
}
.header .nav__util li {
  border-bottom: 0;
}
.header .nav__util li a {
  display: flex;
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(--text_body3);
}
.header .nav__util li a::after {
  content: "";
  inline-size: 2rem;
  block-size: 2rem;
  background: url("../images/icons/icon-external-link.svg") center no-repeat;
}
.header .nav__util li a:hover {
  text-decoration: underline;
}
.header__nav.nav--pc {
  display: none;
}
.header__nav.nav--mobile {
  display: block;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  padding: 0;
  pointer-events: none;
}
.header__nav.nav--mobile.active {
  transform: translateX(0);
  pointer-events: auto;
  padding: 0 1.5rem;
}
.header .nav-toggle {
  inline-size: 2.8rem;
  block-size: 2.8rem;
  padding: 0.58rem 0.32rem;
  display: inline-block;
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
}
.header .nav-toggle:focus-visible {
  outline: 0.2rem solid var(--primary);
  outline-offset: 0.2rem;
  border-radius: 0.6rem;
}
.header .nav-toggle > span {
  position: absolute;
  inset-inline-start: 0.325rem;
  inset-inline-end: 0.325rem;
  block-size: 0.3rem;
  background: var(--gray_50);
  border-radius: 0.1rem;
  transform-origin: center;
  transition: transform 0.2s ease, opacity 0.16s ease;
}
.header .nav-toggle > span:nth-child(1) {
  inset-block-start: 0.55rem;
}
.header .nav-toggle > span:nth-child(2) {
  inset-block-start: 1.3125rem;
}
.header .nav-toggle > span:nth-child(3) {
  inset-block-start: 2.05rem;
}
@media (prefers-reduced-motion: reduce) {
  .header .nav-toggle > span {
    transition: none;
  }
}
.header .nav-toggle[aria-expanded=true] > span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.header .nav-toggle[aria-expanded=true] > span:nth-child(2) {
  opacity: 0;
}
.header .nav-toggle[aria-expanded=true] > span:nth-child(3) {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* layout/_footer.scss */
/* components/_dropdown.scss */
.c-dropdown {
  position: relative;
}
.c-dropdown + .c-dropdown {
  border-top: 1px solid var(--outline_normal);
}
.c-dropdown__btn {
  width: 100%;
  text-align: left;
  background: #fff;
  color: var(--text_body2);
  font-size: var(--font_body3);
  font-weight: 400;
  border: 0;
  padding: 1.4rem 1.6rem;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s ease;
}
.c-dropdown__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.6rem;
  width: 2rem;
  height: 2rem;
  background: url(../images/icons/icon-expand-plus.svg) center/contain no-repeat;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}
.c-dropdown__btn[aria-expanded=true]::after {
  transform: translateY(-50%) rotate(180deg);
  background: url(../images/icons/icon-expand-minus.svg) center/contain no-repeat;
}
.c-dropdown__btn:hover {
  background-color: var(--bg_subtle, #f8f9fa);
}
@media (min-width: 768px) {
  .c-dropdown__btn::after {
    width: 3rem;
    height: 3rem;
  }
}
.c-dropdown__panel {
  display: none;
  flex-direction: column;
  background: #fff;
  padding: 0.8rem;
  animation: dropdownFade 0.25s ease;
}
.c-dropdown__panel .c-dropdown__item {
  text-align: left;
  font-size: var(--font_body2);
  color: var(--text_body1, #303030);
  background: none;
  border: none;
  padding: 0.8rem;
  cursor: pointer;
}
.c-dropdown__panel .c-dropdown__item:hover {
  color: var(--primary-color, #0a67c8);
}
.c-dropdown.is-active .c-dropdown__panel {
  display: flex;
  overflow: hidden;
  overflow-y: auto;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: 17.6rem;
  border: 1px solid var(--outline_strong);
  border-radius: 0.4rem;
}

/* Fade animation */
@keyframes dropdownFade {
  from {
    opacity: 0;
    transform: translateY(-0.4rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.footer {
  position: relative;
  z-index: 1;
  /* Footer 내 드롭다운 확장 스타일 */
  /* 하단 약관 */
  /* 주소 영역 */
}
.footer__partners {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--outline_normal);
  border-bottom: 1px solid var(--outline_normal);
}
.footer .footer__dropdown .c-dropdown__btn {
  background-color: #fff;
}
.footer .footer__dropdown .c-dropdown__panel {
  background-color: #fefefe;
}
.footer .terms {
  display: flex;
  overflow: hidden;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.6rem;
  margin: 0.8rem 1.6rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--outline_light);
}
.footer .terms a {
  position: relative;
  font-size: var(--font_body3);
  color: var(--text_body2);
}
.footer .terms a::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: -1rem;
  width: 0.1rem;
  height: 1.2rem;
  vertical-align: middle;
  background-color: var(--outline_normal, #d9d9d9);
}
.footer .terms a:hover {
  text-decoration: underline;
}
.footer .address {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 0;
  padding: 0 0 4rem;
  margin: 0 1.6rem;
}
.footer .address p {
  display: inline-block;
  position: relative;
  margin-right: 1.7rem;
  margin-bottom: 0.8rem;
  font-size: var(--font_caption);
  color: var(--text_body2);
  line-height: 1;
}
.footer .address p + p::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: -1rem;
  width: 0.1rem;
  height: 1.2rem;
  vertical-align: middle;
  background-color: var(--outline_normal, #d9d9d9);
}
.footer .address p.ci {
  display: block;
  font-weight: 700;
  font-size: var(--font_caption);
  color: var(--text_body2);
  line-height: 1;
}
.footer .address p.copy {
  color: var(--text_caption);
}
.footer .address p > a {
  color: inherit;
}

@media (min-width: 768px) {
  .footer {
    border-top: 1px solid var(--outline_normal);
    /* Footer 내 드롭다운 확장 스타일 */
    /* 하단 약관 */
    /* 주소 영역 */
  }
  .footer::after {
    content: "";
    position: absolute;
    top: 5.6rem;
    left: 0;
    right: 0;
    border-bottom: 1px solid var(--outline_normal);
  }
  .footer__partners {
    flex-direction: row;
    justify-content: space-between;
    border-top: 0;
    border-bottom: 0;
    padding: 0 4rem;
  }
  .footer .footer__dropdown {
    flex: 1 0 auto;
    border-right: 1px solid var(--outline_normal);
  }
  .footer .footer__dropdown:first-child {
    border-left: 1px solid var(--outline_normal);
  }
  .footer .footer__dropdown {
    border-top: 0;
  }
  .footer .footer__dropdown .c-dropdown__btn {
    padding: 1.95rem 1.6rem;
  }
  .footer .footer__dropdown .c-dropdown__btn:hover {
    background-color: rgba(0, 0, 0, 0.02);
  }
  .footer .terms {
    margin: 1.6rem 4rem;
    gap: 3.2rem;
    border-bottom: 1px solid var(--outline_normal);
  }
  .footer .terms a:not(:last-child)::after {
    margin-left: 1.6rem;
    margin-right: -1.6rem;
  }
  .footer .terms a:hover {
    text-decoration: underline;
  }
  .footer .address {
    padding: 0 0 6.4rem;
    margin: 0 4rem;
  }
  .footer .address p {
    display: inline-block;
    position: relative;
    margin-right: 1.7rem;
    margin-bottom: 0.8rem;
    font-size: var(--font_caption);
    color: var(--text_body2);
    line-height: 1;
  }
  .footer .address p + p::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: -1rem;
    width: 0.1rem;
    height: 1.2rem;
    vertical-align: middle;
    background-color: var(--outline_normal, #d9d9d9);
  }
  .footer .address p.ci {
    display: block;
    font-weight: 700;
    font-size: var(--font_caption);
    color: var(--text_body2);
    line-height: 1;
  }
  .footer .address p.copy {
    color: var(--text_caption);
  }
  .footer .address p > a {
    color: inherit;
  }
}
@media (min-width: 1280px) {
  .footer__partners {
    padding: 0;
  }
  .footer .terms {
    margin: 1.6rem 0;
  }
  .footer .address {
    margin: 0;
  }
}
.sub__wrapper .sub__content {
  padding: 4rem 0;
}
.sub__wrapper .sub__content .sub__title {
  display: block;
  width: 100%;
  margin-bottom: 2.4rem;
  font-weight: 800;
  font-size: var(--font_heading1);
  color: var(--text_title);
  line-height: normal;
  text-align: center;
}

@media (min-width: 768px) {
  .sub__wrapper .sub__content {
    width: 100%;
    max-width: 128rem;
    margin: 0 auto;
    padding: 8rem 0;
  }
  .sub__wrapper .sub__content .sub__title {
    margin-bottom: 5.6rem;
  }
}
.textcontent {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0 1.6rem 25rem;
}
.textcontent > p {
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(--text_body3);
}
.textcontent > p.t1 {
  font-weight: 700;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--text_title);
}

@media (min-width: 768px) {
  .textcontent {
    padding: 0 4rem 43rem;
  }
}
.errorcontent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
  padding: 15.7rem 1.6rem;
}
.errorcontent img {
  width: 9.6rem;
  height: 9.6rem;
}
.errorcontent > h1 {
  font-weight: 700;
  font-size: var(--font_heading1);
  color: var(--text_heading);
}
.errorcontent > p {
  text-align: center;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_body2);
}
.errorcontent > p.t1 {
  font-weight: 700;
}
.errorcontent .btns {
  margin-top: 1.6rem;
}

:root {
  --oneclick-gap-vertical: 2.4rem;
  --oneclick-header-height: 6.4rem;
  --oneclick-toggle-height: 6.4rem;
  --oneclick-panel-bottom-gap: 2.4rem;
  --oneclick-panel-header-height: 2.4rem;
  --oneclick-panel-padding: 3.6rem;
  --oneclick-panel-max-height: calc(
          100vh - var(--oneclick-gap-vertical) - var(--oneclick-header-height) - var(--oneclick-toggle-height) - var(
          --oneclick-panel-bottom-gap
          ) - var(--oneclick-panel-header-height)
  );
}

@media (min-width: 768px) {
  :root {
    --oneclick-header-height: 9.6rem;
    --oneclick-toggle-height: 9.6rem;
    --oneclick-panel-bottom-gap: 3.2rem;
    --oneclick-panel-padding: 5.6rem;
    --oneclick-panel-max-height: calc(
            100vh - var(--oneclick-gap-vertical) - var(--oneclick-header-height) - var(--oneclick-toggle-height) - var(
            --oneclick-panel-bottom-gap
            )
    );
    --oneclick-panel-header-height: 5.6rem;
  }
}
/* 원클릭 버튼 */
.oneclick {
  position: fixed;
  bottom: 1.6rem;
  right: 1.6rem;
  z-index: 2000;
}
.oneclick .btn__top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  margin-bottom: 0.8rem;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.15rem;
  color: var(--text_body3);
  opacity: 0;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 99rem;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.oneclick .btn__top > i {
  flex: 0 0 1.6rem;
  width: 1.6rem;
  height: 1.6rem;
  background: url(../images/icons/icon-arrow-up.svg) center no-repeat;
}
.oneclick .btn__top.is-show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.oneclick__toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.072rem;
  word-break: keep-all;
  cursor: pointer;
  background: linear-gradient(144deg, #2495c6 15%, #b25cf9 38%, #de2c8b 63%, #ea7d1d 84%);
  box-shadow: 0.4rem 0.8rem 1.2rem rgba(9, 30, 66, 0.12);
  transition: transform 0.2s ease;
}
.oneclick__toggle:hover {
  transform: scale(1.05);
}
.oneclick__panel {
  overflow: hidden;
  position: absolute;
  max-height: var(--oneclick-panel-max-height);
  bottom: calc(var(--oneclick-toggle-height) + var(--oneclick-panel-bottom-gap));
  right: 0;
  width: 23.2rem;
  padding: 1.6rem;
  background: #fff;
  border-radius: 0.8rem;
  box-shadow: 4px 8px 12px 0 rgba(9, 30, 66, 0.12);
  transform-origin: bottom right;
  transform: scale(0);
  clip-path: circle(0% at 90% 100%);
  opacity: 0;
  transition: clip-path 0.5s cubic-bezier(0.25, 0.9, 0.25, 1), transform 0.5s cubic-bezier(0.25, 0.9, 0.25, 1), opacity 0.3s ease;
}
@media (min-width: 768px) {
  .oneclick__panel {
    padding: 1.6rem 1.6rem 2.4rem;
  }
}
.oneclick__panel.is-active {
  transform: scale(1);
  clip-path: circle(150% at 90% 100%);
  opacity: 1;
}
.oneclick__panel .oneclick__panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  margin-bottom: 0.8rem;
}
.oneclick__panel .oneclick__panel-header .oneclick__panel-logo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.oneclick__panel .oneclick__panel-header .oneclick__panel-logo img {
  width: 2.4rem;
  height: 2.4rem;
}
.oneclick__panel .oneclick__panel-header .oneclick__panel-logo span {
  font-size: var(--font_body1, 1.4rem);
  font-weight: 700;
  color: var(--text_heading);
  letter-spacing: -0.056rem;
}
.oneclick__panel .oneclick__panel-header .oneclick__close {
  width: 2.4rem;
  height: 2.4rem;
  background: url("../images/icons/icon-btn-close-gray.svg") center/contain no-repeat;
  cursor: pointer;
}
.oneclick__panel .oneclick__panel-body {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  /* max-height에서 헤더 영역 높이($oneclick-panel-header-height)를 제외함 */
  max-height: calc(var(--oneclick-panel-max-height) - var(--oneclick-panel-header-height) - var(--oneclick-panel-padding));
  overflow: hidden;
  overflow-y: auto;
}
.oneclick__panel .oneclick__section {
  border: 1px solid var(--outline_light);
  background-color: var(--surface_low);
  border-radius: 0.8rem;
  padding: 1.2rem;
}
.oneclick__panel .oneclick__section h3 {
  font-size: var(--font_body2);
  font-weight: 700;
  color: var(--primary_strong);
  text-align: left;
  margin-bottom: 0.8rem;
}
.oneclick__panel .oneclick__section ul {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
}
.oneclick__panel .oneclick__section ul li {
  flex: 1 1 100%;
  width: 100%;
}
.oneclick__panel .oneclick__section ul li + li {
  margin-top: 0.4rem;
}
.oneclick__panel .oneclick__section ul li a {
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  gap: 0.8rem;
  font-size: var(--font_caption);
  line-height: var(--lineheight_caption);
  color: var(--text_body2);
}
.oneclick__panel .oneclick__section ul li a img {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  transition: box-shadow 0.15s, border 0.15s;
}
.oneclick__panel .oneclick__section ul li a span br {
  display: none;
}
.oneclick__panel .oneclick__banner > a {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  padding: 1.6rem 0;
  border-radius: 0.8rem;
  text-align: center;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 100%), linear-gradient(100deg, #36f2ff -2.07%, #769ced 50.93%, #f876c8 100%);
}
.oneclick__panel .oneclick__banner > a img {
  width: auto;
  height: 2.4rem;
  vertical-align: top;
}
.oneclick__panel .oneclick__banner > a span {
  font-size: var(--font_caption);
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.072rem;
  color: var(--white);
}
.oneclick__panel .oneclick__banner > a span br {
  display: none;
}

@media (min-width: 768px) {
  .oneclick {
    bottom: 3.2rem;
    right: 3.2rem;
  }
  .oneclick__toggle {
    flex-direction: column;
    width: 9.6rem;
    height: 9.6rem;
    gap: 0.6rem;
  }
  .oneclick__toggle::before {
    content: "";
    width: 3.33rem;
    height: 4rem;
    background: url(../images/icons/icon-quick-logo.svg) center no-repeat;
  }
  .oneclick__toggle:hover {
    transform: scale(1.05);
  }
  .oneclick__panel {
    bottom: 11.2rem;
  }
  .oneclick__panel .oneclick__panel-header {
    margin-bottom: 1.6rem;
  }
  .oneclick__panel .oneclick__panel-header .oneclick__panel-logo img {
    width: 4rem;
    height: 4rem;
  }
  .oneclick__panel .oneclick__panel-header .oneclick__panel-logo span {
    letter-spacing: -0.072rem;
  }
  .oneclick__panel .oneclick__panel-body {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    /* max-height에서 헤더 영역 높이($oneclick-panel-header-height)를 제외함 */
    max-height: calc(var(--oneclick-panel-max-height) - var(--oneclick-panel-header-height) - var(--oneclick-panel-padding));
    overflow: hidden;
    overflow-y: auto;
  }
  .oneclick__panel .oneclick__section {
    padding: 1.6rem 0;
  }
  .oneclick__panel .oneclick__section h3 {
    text-align: center;
  }
  .oneclick__panel .oneclick__section ul {
    flex-direction: row;
  }
  .oneclick__panel .oneclick__section ul li + li {
    margin-top: 0;
  }
  .oneclick__panel .oneclick__section ul li a {
    flex-direction: column;
    gap: 0.8rem;
    text-align: center;
  }
  .oneclick__panel .oneclick__section ul li a img {
    width: 6.4rem;
    height: 6.4rem;
  }
  .oneclick__panel .oneclick__section ul li a span br {
    display: block;
  }
  .oneclick__panel .oneclick__section ul li a:hover {
    font-weight: 600;
    color: var(--primary_strong);
  }
  .oneclick__panel .oneclick__section ul li a:hover img {
    box-shadow: 0 0 0 1px var(--primary_strong);
  }
  .oneclick__panel .oneclick__banner > a {
    gap: 1.1rem;
    padding: 1.8rem 3.2rem 1.3rem;
  }
  .oneclick__panel .oneclick__banner > a span {
    line-height: 2rem;
  }
  .oneclick__panel .oneclick__banner > a span br {
    display: block;
  }
}
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
}
.modal.show {
  display: block;
}
.modal .dimmed {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: rgba(0, 0, 0, 0.6);
}
.modal__content {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 3.2rem);
  height: auto;
  max-width: 34.3rem;
  border-radius: 0.8rem;
  background-color: var(--white);
}
.modal__content .modal__head {
  position: relative;
  height: 4rem;
  padding: 0.8rem 4rem 0.8rem 0.8rem;
}
.modal__content .modal__head .btn__close {
  display: inline-block;
  overflow: hidden;
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 0;
  text-indent: -9999rem;
  background: url(../images/icons/icon-btn-close-black.svg) center no-repeat;
}
.modal__content .modal__body .modal__form {
  padding: 1.6rem;
}
.modal__content .modal__body .modal__form--phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}
.modal__content .modal__body .modal__form--phone .modal__desc {
  font-weight: 700;
  font-size: var(--font_body1);
  color: var(--text_body1);
  line-height: normal;
}
.modal__content .modal__body .modal__form--phone .modal__input {
  width: 16rem;
  padding: 1.05rem 0.8rem;
  border-radius: 0.4rem;
  border: 1px solid var(--outline_normal);
  font-size: var(--font_body2);
  color: var(--text_body2);
  line-height: var(--lineheight_body2);
  text-align: center;
}
.modal__content .modal__body .modal__form--phone .modal__input::placeholder {
  color: var(--text_caption);
}
.modal__content .modal__foot {
  display: flex;
  justify-content: center;
  padding-bottom: 1.6rem;
}
.modal__content .modal__foot .btn__confirm {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  width: 12.2rem;
  padding: 0.85rem 1.6rem;
  border-radius: 99.9rem;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--white);
  background-color: var(--primary_normal);
  cursor: pointer;
}
.modal.modal--notice .modal__content {
  display: flex;
  flex-direction: column;
  gap: 1.55rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: transparent;
}
.modal.modal--notice .modal__body {
  width: 100%;
  border: 1px solid var(--white);
}
.modal.modal--notice .modal__body .notice {
  width: 100%;
  max-width: 48rem;
}
.modal.modal--notice .modal__body .notice img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.modal.modal--notice .modal__foot {
  display: flex;
  justify-content: space-between;
}
.modal.modal--notice .modal__foot .btn__close {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--font_body3);
  line-height: 2rem;
  color: var(--white);
}
.modal.modal--notice .modal__foot .btn__close::after {
  content: "";
  width: 2rem;
  height: 2rem;
  background: url(../images/icons/icon-btn-close.svg) no-repeat;
}

@media (min-width: 768px) {
  .modal__content {
    max-width: 44.4rem;
  }
  .modal__content .modal__head {
    position: relative;
    height: 4rem;
    padding: 1.2rem 4rem 1.2rem 1.6rem;
  }
  .modal__content .modal__head .btn__close {
    top: 1.2rem;
    right: 1.6rem;
  }
  .modal__content .modal__body .modal__form {
    padding: 2.4rem 4rem;
  }
  .modal__content .modal__body .modal__form--phone .modal__input {
    width: 100%;
    padding: 0.8rem;
  }
  .modal__content .modal__foot {
    padding-bottom: 2.4rem;
  }
  .modal__content .modal__foot .btn__confirm {
    padding: 0.8rem 1.6rem;
  }
}
div[data-include=breadcrumbs] {
  position: sticky;
  top: 6.4rem;
  z-index: 90;
}

.breadcrumbs {
  position: sticky;
  top: 6.4rem;
  z-index: 90;
  border-bottom: 1px solid var(--outline_normal);
  background: #fff;
}
.breadcrumbs__nav {
  display: flex;
  align-items: stretch;
  height: 4.8rem;
}
.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  width: 100%;
  height: 100%;
}
.breadcrumbs__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  font-size: var(--font_body2);
  color: var(--text_body2);
  border-right: 1px solid var(--outline_normal);
  white-space: nowrap;
}
@media (max-width: 768px) {
  .breadcrumbs__item:last-child {
    border-right: 0;
  }
}
.breadcrumbs__item--home {
  flex: 0 0 4.8rem;
  width: 4.8rem;
  height: 4.8rem;
}
.breadcrumbs__item--home a {
  justify-content: center;
}
.breadcrumbs__item--home a img,
.breadcrumbs__item--home a svg {
  width: 2.4rem;
  height: 2.4rem;
}
.breadcrumbs__home {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../images/icons/icon-home.svg) center no-repeat;
  background-size: 2rem;
}
.breadcrumbs__button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  height: 100%;
  padding: 0 1.6rem;
  font-size: var(--font_body2);
  color: var(--text_body1);
  cursor: pointer;
  transition: all 0.2s ease;
  background: #fff;
  text-align: left;
}
.breadcrumbs__button:hover {
  background: var(--bg_hover);
}
.breadcrumbs__button .icon {
  flex-shrink: 0;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background: url(../images/icons/icon-chevron_down_gray.svg) center/contain no-repeat;
  transition: transform 0.2s ease;
}
.breadcrumbs__button[aria-expanded=true] .icon {
  transform: rotate(180deg);
}
.breadcrumbs__dropdown {
  position: absolute;
  top: calc(100% + 0.1rem);
  left: 0;
  min-width: 100%;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid var(--outline_strong);
  border-radius: 0.4rem;
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.4rem);
  transition: all 0.2s ease;
  z-index: 10;
}
.breadcrumbs__dropdown li a {
  display: block;
  padding: 0.5rem;
  font-weight: 400;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_body1);
  vertical-align: middle;
  text-decoration: none;
  white-space: nowrap;
}
.breadcrumbs__dropdown li a:hover {
  background: var(--bg_hover);
}
.breadcrumbs__dropdown li a.external::after {
  content: "";
  display: inline-block;
  inline-size: 2rem;
  block-size: 2rem;
  line-height: var(--lineheight_body2);
  vertical-align: middle;
  background: url("../images/icons/icon-external-link.svg") center no-repeat;
}
.breadcrumbs__dropdown li.is-active a {
  font-weight: 700;
}
.breadcrumbs__dropdown.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(0);
}
@media (min-width: 768px) {
  .breadcrumbs .breadcrumbs__item {
    max-width: 22.4rem;
  }
  .breadcrumbs .breadcrumbs__item--home {
    flex: 0 0 4.8rem;
    width: 4.8rem;
    height: 4.8rem;
  }
}

@media (min-width: 768px) {
  div[data-include=breadcrumbs] {
    top: 9.6rem;
  }
}
@media (min-width: 1280px) {
  div[data-include=breadcrumbs] {
    top: 8rem;
  }
}
.tabs .inner {
  display: flex;
  flex-direction: column;
  padding-top: 1.6rem;
}
.tabs__nav {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.8rem;
  max-width: 96rem;
  margin: 0 auto;
}
.tabs__button {
  flex-shrink: 0;
  padding: 1.35rem 0.8rem;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  font-weight: 400;
  color: var(--text_body2);
  border-bottom: 0.2rem solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tabs__button:hover {
  color: var(--primary_hover);
}
.tabs__button.is-active {
  border-bottom-color: var(--primary_normal);
  font-weight: 700;
}
.tabs__button:focus-visible {
  outline: 0.2rem solid var(--primary_normal);
  outline-offset: 0.2rem;
  border-radius: 0.2rem;
}
.tabs__panel {
  display: none;
  animation: fadeIn 0.25s ease forwards;
}
.tabs__panel.is-active {
  display: block;
}
.tabs--box, .tabs--depth2 {
  padding: 0 1.6rem;
}
.tabs--box .tabs__nav, .tabs--depth2 .tabs__nav {
  display: flex;
  gap: 0;
  width: calc(100% - 0.8rem);
  height: 4rem;
}
.tabs--box .tabs__button, .tabs--depth2 .tabs__button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 0%;
  max-width: 100%;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_caption);
  background-color: var(--surface_low);
}
.tabs--box .tabs__button:hover, .tabs--depth2 .tabs__button:hover {
  background-color: var(--surface_mid);
}
.tabs--box .tabs__button.is-active, .tabs--depth2 .tabs__button.is-active {
  border-radius: 0.4rem;
  border: 2px solid var(--primary_normal);
  background-color: var(--white);
  font-weight: 700;
  color: var(--primary_normal);
}
.tabs--box .tabs__button:focus-visible, .tabs--depth2 .tabs__button:focus-visible {
  outline: 0.2rem solid var(--primary_normal);
  outline-offset: 0.2rem;
  border-radius: 0.2rem;
}
.tabs--box .tabs__content, .tabs--depth2 .tabs__content {
  padding: 4rem 0;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(0.6rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tabs--circle {
  overflow: hidden;
}
.tabs--circle .tabs__list {
  overflow-x: auto;
  display: flex;
  gap: 0.8rem;
  padding: 0.2rem 1.6rem 0;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  justify-content: flex-start;
  scrollbar-width: none;
}
.tabs--circle .tabs__list::-webkit-scrollbar {
  display: none;
}
.tabs--circle .tabs__item {
  min-width: 11rem;
  max-width: 16.32rem;
  width: auto;
  flex: 0 0 auto;
  scroll-snap-align: center;
  text-align: center;
  cursor: pointer;
  transition: transform 0.25s ease;
}
.tabs--circle .tabs__item:hover .tabs__circle::before, .tabs--circle .tabs__item.is-active .tabs__circle::before {
  background: var(--primary_normal);
  opacity: 0.8;
}
.tabs--circle .tabs__item:hover .tabs__label, .tabs--circle .tabs__item.is-active .tabs__label {
  color: var(--primary);
}
.tabs--circle .tabs__item:hover {
  transform: translateY(-0.2rem);
}
.tabs--circle .tabs__circle {
  position: relative;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tabs--circle .tabs__circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.tabs--circle .tabs__circle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--black);
  opacity: 0.44;
  border-radius: 50%;
}
.tabs--circle .tabs__circle::after {
  content: "";
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../images/center/tab-system-icon1.svg) center no-repeat;
  background-size: 3.2rem;
}
.tabs--circle .tabs__circle--1::after {
  background-image: url(../images/center/tab-system-icon1.svg);
  opacity: 1;
}
.tabs--circle .tabs__circle--2::after {
  background-image: url(../images/center/tab-system-icon2.svg);
  opacity: 1;
}
.tabs--circle .tabs__circle--3::after {
  background-image: url(../images/center/tab-system-icon3.svg);
  opacity: 1;
}
.tabs--circle .tabs__circle--4::after {
  background-image: url(../images/center/tab-system-icon4.svg);
  opacity: 1;
}
.tabs--circle .tabs__circle--5::after {
  background-image: url(../images/center/tab-system-icon5.svg);
  opacity: 1;
}
.tabs--circle .tabs__label {
  display: block;
  font-size: var(--font_title3);
  font-weight: 700;
  line-height: var(--lineheight_title3);
  color: var(--text_title);
}
.tabs--circle .tabs__label small {
  display: block;
  font-size: var(--font_body3);
  color: var(--text_body1);
  line-height: var(--lineheight_body3);
  font-weight: 400;
}
.tabs--circle--circle {
  overflow: hidden;
}
.tabs--circle--circle .tabs__list {
  overflow-x: auto;
  display: flex;
  gap: 0.8rem;
  padding: 0.2rem 1.6rem 0;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  justify-content: flex-start;
  scrollbar-width: none;
}
.tabs--circle--circle .tabs__list::-webkit-scrollbar {
  display: none;
}
.tabs--circle--circle .tabs__item {
  min-width: 11rem;
  max-width: 16.32rem;
  width: auto;
  flex: 0 0 auto;
  scroll-snap-align: center;
  text-align: center;
  cursor: pointer;
  transition: transform 0.25s ease;
}
.tabs--circle--circle .tabs__item:hover .tabs__circle::before, .tabs--circle--circle .tabs__item.is-active .tabs__circle::before {
  background: var(--primary_normal);
  opacity: 0.8;
}
.tabs--circle--circle .tabs__item:hover .tabs__label, .tabs--circle--circle .tabs__item.is-active .tabs__label {
  color: var(--primary);
}
.tabs--circle--circle .tabs__item:hover {
  transform: translateY(-0.2rem);
}
.tabs--circle--circle .tabs__circle {
  position: relative;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tabs--circle--circle .tabs__circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.tabs--circle--circle .tabs__circle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--black);
  opacity: 0.44;
  border-radius: 50%;
}
.tabs--circle--circle .tabs__circle::after {
  content: "";
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../images/center/tab-system-icon1.svg) center no-repeat;
  background-size: 3.2rem;
}
.tabs--circle--circle .tabs__circle--1::after {
  background-image: url(../images/center/tab-system-icon1.svg);
  opacity: 1;
}
.tabs--circle--circle .tabs__circle--2::after {
  background-image: url(../images/center/tab-system-icon2.svg);
  opacity: 1;
}
.tabs--circle--circle .tabs__circle--3::after {
  background-image: url(../images/center/tab-system-icon3.svg);
  opacity: 1;
}
.tabs--circle--circle .tabs__circle--4::after {
  background-image: url(../images/center/tab-system-icon4.svg);
  opacity: 1;
}
.tabs--circle--circle .tabs__circle--5::after {
  background-image: url(../images/center/tab-system-icon5.svg);
  opacity: 1;
}
.tabs--circle--circle .tabs__label {
  display: block;
  font-size: var(--font_title3);
  font-weight: 700;
  line-height: var(--lineheight_title3);
  color: var(--text_title);
}
.tabs--circle--circle .tabs__label small {
  display: block;
  font-size: var(--font_body3);
  color: var(--text_body1);
  line-height: var(--lineheight_body3);
  font-weight: 400;
}
.tabs--circle--scroll {
  overflow-x: auto;
}

.tabs--scroll .tabs__nav {
  overflow-x: auto;
  justify-content: start;
  padding: 0 1.6rem;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
.tabs--scroll .tabs__nav::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

@media (min-width: 768px) {
  .tabs {
    padding: 0 4rem;
  }
  .tabs--box .tabs__content, .tabs--depth2 .tabs__content {
    padding: 6.4rem 0;
  }
  .tabs--circle .tabs__list {
    justify-content: center;
    gap: 1.6rem;
    padding: 0.2rem 4rem 0;
  }
  .tabs--circle .tabs__item {
    position: relative;
    flex: 1 1 auto;
  }
  .tabs--circle .tabs__item:hover .tabs__label, .tabs--circle .tabs__item.is-active .tabs__label {
    color: var(--white);
  }
  .tabs--circle .tabs__circle {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .tabs--circle .tabs__circle::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--black);
    opacity: 0.44;
    border-radius: 50%;
  }
  .tabs--circle .tabs__circle::after {
    inset: auto;
    width: 4rem;
    height: 4rem;
    top: 2.25rem;
    align-items: flex-start;
    background-size: 4rem;
  }
  .tabs--circle .tabs__label {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 100%;
    text-align: center;
    color: var(--white);
  }
  .tabs--circle .tabs__label small {
    display: block;
    color: var(--white);
  }
  .tabs__scroll {
    overflow-x: auto;
  }
}
@media (min-width: 1280px) {
  .tabs {
    padding: 0;
  }
  .tabs__button {
    padding: 1.45rem 0.8rem;
  }
  .tabs--box .tabs__nav, .tabs--depth2 .tabs__nav {
    height: 6.4rem;
  }
  .tabs--box .tabs__button, .tabs--depth2 .tabs__button {
    font-size: var(--font_title3);
    line-height: var(--lineheight_title3);
  }
  .tabs--box .tabs__button.is-active, .tabs--depth2 .tabs__button.is-active {
    color: var(--primary_normal);
  }
}
@media (min-width: 768px) {
  .tabs--depth2 .tabs__content {
    padding: 6.4rem 0;
  }
}
.chart-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 2.4rem 1.6rem;
  border: 1px solid var(--outline_normal);
}
.chart-wrapper .chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.8rem;
}
.chart-wrapper .chart-legend > p {
  position: relative;
  padding-left: 1.2rem;
  font-size: var(--font_caption);
  color: var(--text_body3);
}
.chart-wrapper .chart-legend > p::before {
  content: "";
  position: absolute;
  top: 0.3rem;
  left: 0;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
}
.chart-wrapper .chart-legend > p:nth-child(1)::before {
  background: #f8be02;
}
.chart-wrapper .chart-legend > p:nth-child(2)::before {
  background: #00a388;
}
.chart-wrapper .chart-legend > p:nth-child(3)::before {
  background: #fa7500;
}
.chart-wrapper .chart-legend > p:nth-child(4)::before {
  background: #d51212;
}
.chart-wrapper .chart-legend > p:nth-child(5)::before {
  background: #005eae;
}
.chart-wrapper .chart-legend > p:nth-child(6)::before {
  background: #00acf8;
}
.chart-wrapper .chart-legend > p:nth-child(7)::before {
  background: #003460;
}
.chart-wrapper .chart-div {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  width: 100%;
}
.chart-wrapper .chart-box {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  width: 100%;
  height: 100%;
}
.chart-wrapper .chart-box > div {
  position: relative;
  height: 100%;
  min-height: 24rem;
  transition: 0s !important;
}
.chart-wrapper .chart-box > div[data-chart-type=bar], .chart-wrapper .chart-box > div[data-chart-type=line] {
  min-height: 35.5rem;
}
.chart-wrapper .chart-box > div .apexcharts-canvas {
  height: 100% !important;
  top: 0 !important;
  transform: none !important;
}
.chart-wrapper .chart-box > div svg {
  height: 100% !important;
}
.chart-wrapper .chart-box .year {
  margin-bottom: 0.4rem;
  font-weight: 800;
  font-size: var(--font_body1);
  line-height: normal;
  color: var(--text_body1);
  text-align: center;
}

@media (min-width: 768px) {
  .chart-wrapper .chart-legend {
    margin-right: 11.2rem;
  }
  .chart-wrapper .chart-div {
    flex-direction: row;
    justify-content: center;
    gap: 2.4rem;
  }
  .chart-wrapper .chart-box {
    gap: 2.4rem;
    padding: 4.2rem;
  }
  .chart-wrapper .chart-box > div {
    max-height: 32rem;
  }
  .chart-wrapper .chart-box > div[data-chart-type=bar], .chart-wrapper .chart-box > div[data-chart-type=line] {
    min-height: 39.2rem;
  }
  .chart-wrapper .chart-box .year {
    margin-bottom: 0.4rem;
    font-weight: 800;
    font-size: var(--font_body1);
    line-height: normal;
    color: var(--text_body1);
    text-align: center;
  }
}
@media (min-width: 768px) and (max-width: 1280px) {
  .chart-wrapper .chart-box > div {
    min-height: 26rem;
  }
}
.apexcharts-legend-marker {
  width: 0.8rem !important;
  height: 0.8rem !important;
  border-radius: 50% !important;
}

.column-tooltip {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: #fff; /* 텍스트 색상 */
  padding: 1.6rem;
  border-radius: 0.8rem;
  background: rgba(0, 0, 0, 0.8);
  box-shadow: 4px 8px 12px 0 rgba(9, 30, 66, 0.12);
}
.column-tooltip-head {
  display: flex;
  justify-content: space-between;
}
.column-tooltip-head .tx_label {
  font-family: "IBM Plex Sans KR";
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.8rem;
  letter-spacing: 0.016rem;
  color: var(--gray_10);
}
.column-tooltip-list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  min-width: 12.4rem;
}
.column-tooltip-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
  line-height: 1.5rem;
  letter-spacing: 0.032rem;
  text-align: left;
}
.column-tooltip-list li .marker {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
}
.column-tooltip-list li .tx_name {
  margin-right: 2rem;
  flex-grow: 2;
  font-family: "Pretendard";
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--white);
}
.column-tooltip-list li .tx_val {
  color: #fff; /* 값 색상 */
  font-size: 1.2rem;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 4rem;
}

.inp {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 2.4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: var(--font_body2);
  color: var(--text_body2);
  line-height: normal;
}
.inp input {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}
.inp input:checked ~ .checkmark {
  border-color: var(--primary_normal);
  background: var(--primary_normal);
}
.inp input:checked ~ .checkmark:after {
  display: block;
}
.inp input:disabled ~ .checkmark {
  border-color: var(--gray_50);
}
.inp .checkmark {
  position: absolute;
  top: -0.1rem;
  left: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.2rem;
  border: 0.1rem solid var(--outline_strong);
  background: var(--white);
}
.inp .checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 0.5rem;
  top: 0.1rem;
  width: 0.3rem;
  height: 0.8rem;
  border: solid var(--white);
  border-width: 0 0.1rem 0.1rem 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.inp .checkmark.radio {
  border-radius: 50%;
}
.inp .checkmark.radio::after {
  left: 0.4rem;
  top: 0.4rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--white);
}

@media (min-width: 768px) {
  .inp .checkmark {
    top: 0.1rem;
  }
}
.hero {
  position: relative;
  overflow: hidden;
}
.hero__controls {
  position: absolute;
  inset-inline-start: 1.6rem;
  inset-block-start: 8rem;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 2.4rem;
  z-index: 20;
  color: #fff;
}
.hero__controls .hero__title {
  font-size: var(--font_heading1);
  font-weight: 800;
  line-height: var(--lineheight_heading1);
  color: var(--white);
}
.hero__controls > section {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.hero__slider .swiper-slide {
  position: relative;
  inline-size: 100%;
  block-size: 32rem;
  background-size: cover;
  background-position: center;
  transition: block-size 0.3s ease-in-out;
}
.hero__slider .swiper-slide .hero__img {
  width: 100%;
  height: 100%;
}
.hero__slider .swiper-slide .hero__img--first {
  background: url("../images/hero/hero-img1.png") no-repeat center/cover;
}
.hero__slider .swiper-slide .hero__img--second {
  background: url("../images/hero/hero-img2.png") no-repeat center/cover;
}
.hero__slider .swiper-slide .hero__img--third {
  background: url("../images/hero/hero-img3.png") no-repeat center/cover;
}
.hero__title {
  font-size: var(--font_heading1);
  font-weight: 700;
  line-height: var(--lineheight_heading1);
}
@media (min-width: 1280px) {
  .hero__title {
    font-size: 4.8rem;
  }
}
.hero__pagination {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.hero__pagination > span {
  inline-size: 2rem;
  font-size: var(--font_caption);
  font-weight: 100;
  color: var(--white);
}
.hero__pagination .hero__progress {
  inline-size: 10rem;
  block-size: 0.2rem;
  background: rgba(255, 255, 255, 0.4);
  position: relative;
  overflow: hidden;
}
.hero__pagination .hero__progress .hero__progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  inline-size: 0%;
  block-size: 100%;
  background-color: #fff;
  transition: inline-size 5s linear;
}
.hero__nav {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.hero__nav button {
  background: none;
  border: none;
  inline-size: 2rem;
  block-size: 2rem;
  font-size: 0;
  cursor: pointer;
}
.hero__nav button:hover {
  border-radius: 0.4rem;
  outline: 1px solid var(--white);
}
.hero__nav button.hero__prev {
  background: url(../images/icons/icon-chevron_left.svg);
}
.hero__nav button.hero__pause {
  background: url(../images/icons/icon-pause.svg);
}
.hero__nav button.hero__pause.is-paused {
  background: url(../images/icons/icon-play.svg);
}
.hero__nav button.hero__next {
  background: url(../images/icons/icon-chevron_right.svg);
}

.quicks {
  padding: 0 0.8rem;
  background: linear-gradient(90deg, #224a8d 0%, #002668 100%);
}
.quicks__icons {
  display: flex;
  justify-content: center;
  gap: 0;
}
.quicks__btn {
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.4rem 0 1.1rem;
  text-align: center;
}
.quicks__btn:hover {
  border-radius: 99.9rem;
  background: rgba(0, 0, 0, 0.24);
}
.quicks__btn .icon {
  display: block;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  font-size: 2.4rem;
  font-weight: bold;
}
.quicks__btn .icon-1 {
  background: url(../images/icons/icon-quick-1.svg);
  background-size: cover;
}
.quicks__btn .icon-2 {
  background: url(../images/icons/icon-quick-2.svg);
  background-size: cover;
}
.quicks__btn .icon-3 {
  background: url(../images/icons/icon-quick-3.svg);
  background-size: cover;
}
.quicks__btn .icon-4 {
  background: url(../images/icons/icon-quick-4.svg);
  background-size: cover;
}
.quicks__btn .icon-5 {
  background: url(../images/icons/icon-quick-5.svg);
  background-size: cover;
}
.quicks__btn p {
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(--white);
}
.quicks__btn p > sub {
  display: none;
}

.main-contents {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding: 4rem 0 3.6rem;
}

.stats {
  margin: 0;
  padding: 0 1.6rem;
  border-radius: 1.6rem;
}
.stats .inner {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.stats__tit {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
}
.stats__tit--left {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.stats__tit--left h3 {
  font-weight: 800;
  font-size: var(--font_title1);
  line-height: var(--lineheight_title1);
  color: var(--text_title);
}
.stats__tit--left .tx-date {
  font-size: var(--font_caption);
  line-height: var(--lineheight_caption);
  color: var(--text_caption);
}
.stats__tit--right {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: right;
}
.stats__tit--right .label {
  font-weight: 700;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--text_body2);
}
.stats__tit--right .total {
  font-weight: 800;
  font-size: var(--font_heading1);
  line-height: var(--lineheight_heading1);
  background: var(--gradient-, linear-gradient(90deg, #44ccd8 0%, #4597de 50%, #477de2 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stats__tit--right .total::after {
  content: "명";
}
.stats .bar {
  display: none;
}
.stats__info {
  display: flex;
  gap: 0.8rem;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.stats__info .detail {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.8rem;
  width: 100%;
}
.stats__info .detail > div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.8rem;
  flex: 0 0 auto;
  min-width: 14.4rem;
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(--gray_70);
}
.stats__info .detail > div:last-child {
  flex: 1 0 100%;
}
.stats__info .detail > div p {
  padding: 0.3rem 1.2rem;
  border-radius: 0.4rem;
  background-color: var(--container_primary-normal);
  font-weight: 700;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--primary_normal);
}
.stats__info .detail > div span {
  font-weight: 800;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_body1);
}
.stats__info .detail > div span::after {
  content: attr(data-label);
  font-weight: 700;
  color: var(--text_body3);
}

.news {
  overflow: hidden;
}
.news__head {
  display: flex;
  justify-content: space-between;
  gap: 1.6rem;
}
.news__more {
  display: none;
}
.news__more .btn {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  font-size: var(--font_body3);
  line-height: 2.4rem;
  color: var(--text_body3);
}
.news__more .btn::after {
  content: "";
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  background: url(../images/icons/icon-chevron_right_gray.svg) center no-repeat;
}
.news__tabs {
  display: flex;
  gap: 1.6rem;
  margin-bottom: 1.6rem;
  padding: 0 2rem;
}
.news__tabs li a {
  font-weight: 700;
  font-size: var(--font_title2);
  line-height: var(--lineheight_title2);
  color: var(--gray_40);
}
.news__tabs li.active a {
  position: relative;
  color: var(--gray_80);
  font-weight: 800;
}
.news__tabs li.active a::after {
  content: "";
  position: absolute;
  top: 0;
  right: -0.7rem;
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--primary_normal);
  border-radius: 50%;
}
.news .news__slider {
  overflow: hidden;
  margin: 0;
  padding: 0 1.6rem 3.2rem;
}
.news .news__slider .swiper-wrapper {
  width: 100%;
  padding: 0;
}
.news .news__slider .swiper-slide {
  display: flex;
  flex: 0 0 22rem;
  max-width: 22rem;
}
.news .news__slider .news__item {
  overflow: hidden;
  flex: 0 0 22rem;
  inline-size: 22rem;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: 1.6rem;
  border: 1px solid var(--outline_normal);
  border-radius: 1.6rem;
}
.news .news__slider .news__item .img-wrapper {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 1.6rem;
}
.news .news__slider .news__item .img-wrapper > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.news .news__slider .news__item > div {
  position: relative;
  z-index: 10;
}
.news .news__slider .news__item > div .tx-badge {
  display: inline-block;
  margin-bottom: 0.8rem;
  padding: 0.3rem 0.8rem;
  border-radius: 0.4rem;
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(--white);
  background: var(--primary_normal);
}
.news .news__slider .news__item > div .tx-badge.is-notice {
  background: var(--primary_normal);
}
.news .news__slider .news__item > div .tx-badge.is-news {
  background: var(--secondary_normal);
}
.news .news__slider .news__item > div .tx-badge.is-photo {
  color: var(--primary_normal);
  background: #d9e7f3;
}
.news .news__slider .news__item > div .tx-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  -webkit-line-clamp: 3;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--gray_70);
}
.news .news__slider .news__item .tx-date {
  font-size: var(--font_caption);
  line-height: var(--lineheight_caption);
  color: var(--gray_40);
}
.news .news__slider .news__pagination {
  bottom: 0 !important;
  top: auto !important;
}
.news .news__slider .news__pagination-bullet {
  opacity: 1;
  background-color: var(--gray_15);
}
.news .news__slider .news__pagination-bullet-active {
  background-color: var(--primary_normal);
}
.news .news__slider .news__nav {
  display: none;
}

.reserved {
  padding: 0 2rem;
}
.reserved__tit {
  margin-bottom: 1.6rem;
}
.reserved__tit h3 {
  font-weight: 800;
  font-size: var(--font_title1);
  line-height: var(--lineheight_title1);
  color: var(--text_heading);
}
.reserved__grid {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.reserved__grid .reserved__item {
  position: relative;
  width: 100%;
  height: 20rem;
  border-radius: 1.6rem;
}
.reserved__grid .reserved__item::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 1.6rem;
  background-color: rgba(0, 0, 0, 0.36);
}
.reserved__grid .reserved__item--1 {
  background: url(../images/home/reserved-img1.png) no-repeat center/cover;
}
.reserved__grid .reserved__item--2 {
  background: url(../images/home/reserved-img2.png) no-repeat center/cover;
}
.reserved__grid .reserved__item .reserved__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  position: relative;
  z-index: 20;
  inline-size: 100%;
  block-size: 100%;
  padding-top: 1.7rem;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--white);
}
.reserved__grid .reserved__item .reserved__link::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 12rem;
  height: 12rem;
  margin-top: -1rem;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}
.reserved__grid .reserved__item .reserved__link > i {
  display: inline-block;
  inline-size: 2rem;
  block-size: 2rem;
  background: url(../images/icons/icon-arrow_right.svg) no-repeat center;
}

.community {
  padding-top: 4rem;
  padding-bottom: 7.7rem;
  background-color: var(--primary_5);
}
.community__tit {
  padding: 0 1.6rem;
  margin-bottom: 2.4rem;
}
.community__tit .tx-menu {
  margin-bottom: 0.4rem;
  font-weight: 700;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--text_body3);
}
.community__tit h3 {
  margin-bottom: 0.8rem;
  font-weight: 800;
  font-size: var(--font_title1);
  line-height: var(--lineheight_title1);
  color: var(--text_heading);
}
.community__tit .tx-sub {
  font-weight: 400;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_body2);
}
.community__slider {
  overflow: visible;
  margin: 0;
  padding: 0 1.6rem 3.2rem !important;
}
.community__slider .swiper-wrapper {
  width: 100%;
  padding: 0;
}
.community__slider .swiper-slide {
  display: flex;
  flex: 0 0 22rem;
  max-width: 22rem;
}
.community__slider .community__item {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  flex: 0 0 22rem;
  inline-size: 22rem;
}
.community__slider .community__item .img-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 0;
  margin-bottom: 1.1rem;
  padding-bottom: 56.49%;
  aspect-ratio: 30.8/17.4;
}
.community__slider .community__item .img-wrapper > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.community__slider .community__item > p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 700;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--text_body1);
}
.community__slider .community__item .ico-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  inline-size: 4rem;
  block-size: 4rem;
  background: url(../images/icons/icon-vod-play.svg) no-repeat center;
  background-size: 4rem;
}
.community__slider .community__pagination {
  bottom: 0 !important;
  top: auto !important;
}
.community__slider .community__pagination-bullet {
  opacity: 1;
  background-color: var(--gray_15);
}
.community__slider .community__pagination-bullet-active {
  background-color: var(--primary_normal);
}
.community__slider .community__nav {
  display: none;
}

.bigdata {
  padding: 0 1.6rem;
}
.bigdata .inner {
  width: 100%;
  padding: 2.4rem 1.6rem;
  border: 1px solid var(--outline_normal);
  border-radius: 1.6rem;
}
.bigdata__tit {
  padding: 0;
  margin-bottom: 2.4rem;
}
.bigdata__tit .tx-menu {
  margin-bottom: 0.4rem;
  font-weight: 700;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--text_body3);
}
.bigdata__tit h3 {
  margin-bottom: 0.8rem;
  font-weight: 800;
  font-size: var(--font_title1);
  line-height: var(--lineheight_title1);
  color: var(--text_heading);
}
.bigdata__tit .tx-sub {
  font-weight: 400;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_body2);
}
.bigdata__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  margin-bottom: 1.6rem;
}
.bigdata__list > p {
  padding: 0.7rem;
  border-radius: 99.9rem;
  border: 1px solid var(--outline_normal);
  font-weight: 700;
  font-size: var(--font_body2);
  line-height: normal;
  backdrop-filter: blur(5px);
  color: var(--primary_strong);
}
.bigdata__list > p::before {
  content: "#";
}
.bigdata__map > img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.bigdata__link > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.8rem 1.6rem;
  border-radius: 99.9rem;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--white);
  text-transform: capitalize;
  background: var(--primary_normal);
}
.bigdata__link > a::after {
  content: "";
  display: inline-block;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  background: url(../images/icons/icon-chevron_right.svg) no-repeat center;
}

.external {
  padding: 0.4rem 1.6rem;
}
.external__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}
.external__btn {
  flex: 1 1 calc(33.333% - 0.8rem);
  max-width: calc(33.333% - 0.8rem);
  height: 4rem;
  box-sizing: border-box;
  font-size: 0;
  text-indent: -9999px;
}
.external__btn--1 {
  background: url(../images/externals/logo-1.png) no-repeat center;
  background-size: auto 2.8rem;
}
.external__btn--2 {
  background: url(../images/externals/logo-2.png) no-repeat center;
  background-size: auto 2.8rem;
}
.external__btn--3 {
  background: url(../images/externals/logo-3.png) no-repeat center;
  background-size: auto 2.8rem;
}
.external__btn--4 {
  background: url(../images/externals/logo-4.png) no-repeat center;
  background-size: auto 2.8rem;
}
.external__btn--5 {
  background: url(../images/externals/logo-5.png) no-repeat center;
  background-size: auto 2.8rem;
}

.center-intro {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding: 0 1.6rem 4rem;
}
.center-intro .intro__text .headline {
  margin-bottom: 0.8rem;
  font-weight: 800;
  font-size: var(--font_heading2);
  line-height: var(--lineheight_heading2);
  color: var(--text_title);
}
.center-intro .intro__text .desc {
  font-weight: 400;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--text_body1);
}
.center-intro .intro-image img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

.center-system {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding: 4.8rem 0 4rem;
  background-color: var(--surface_low);
}
.center-system .system__text {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  text-align: center;
}
.center-system .system__text .headline {
  font-weight: 800;
  font-size: var(--font_title1);
  line-height: var(--lineheight_title1);
  color: var(--text_title);
}
.center-system .system__text .desc {
  padding: 0 1.6rem;
  font-weight: 400;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--text_body1);
}

.system__content {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  padding: 4rem 1.6rem;
}
.system__content--title h3 {
  margin-bottom: 0.8rem;
  font-size: var(--font_title3);
  line-height: var(--lineheight_body3);
  color: var(--primary_normal);
}
.system__content--title p {
  font-weight: 800;
  font-size: var(--font_title1);
  line-height: var(--lineheight_title1);
  color: var(--text_title);
  word-break: keep-all;
}
.system__content--sector {
  display: flex;
  flex-direction: column;
  gap: 4.8rem;
}
.system__content--sector .system__content--box {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.system__content--sector .system__content--box h4 {
  position: relative;
  padding-left: 1.2rem;
  font-weight: 800;
  font-size: var(--font_title2);
  color: var(--text_title);
}
.system__content--sector .system__content--box h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.4rem;
  height: 2.2rem;
  background-color: var(--primary_light);
}
.system__content--sector .system__content--box p {
  font-weight: 400;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--text_body1);
  word-break: keep-all;
}
.system__content--sector .system__content--box .dotted > p {
  position: relative;
  padding-left: 2rem;
}
.system__content--sector .system__content--box .dotted > p::before {
  content: "";
  position: absolute;
  top: 0.8rem;
  left: 0.6rem;
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  line-height: var(--lineheight_caption);
  border-radius: 50%;
  background-color: var(--primary_normal);
}
.system__content--sector .system__content--box .system__list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 0.8rem;
}
.system__content--sector .system__content--box .system__list > li {
  flex: 0 0 calc(50% - 0.8rem);
}
.system__content--sector .system__content--box .system__list > li.full {
  flex: 1 0 100%;
}
.system__content--sector .system__content--box .system__list > li > img {
  overflow: hidden;
  width: 100%;
  height: auto;
  margin-bottom: 0.4rem;
  vertical-align: top;
  border-radius: 0.8rem;
  background-color: var(--gray_20);
}
.system__content--sector .system__content--box .system__list > li p {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 4rem;
  padding: 0 1.6rem;
  border-radius: 0.8rem;
  font-weight: 700;
  font-size: var(--font_body2);
  color: var(--text_body1);
  background-color: var(--container_primary-light);
}

.tabs__content.record .record__timeline {
  position: relative;
}
.tabs__content.record .record__year {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  margin-bottom: 6rem;
}
.tabs__content.record .record__year h3 {
  font-size: var(--font_heading1);
  font-weight: 900;
  line-height: var(--lineheight_heading1);
  color: var(--text_title);
  margin-bottom: 2rem;
}
.tabs__content.record .record__year .record__list {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tabs__content.record .record__year .record__list > li {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  position: relative;
}
.tabs__content.record .record__year .record__list > li .record__text {
  position: relative;
  padding-left: 2rem;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--text_body1);
}
.tabs__content.record .record__year .record__list > li .record__text::before {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 0.8rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--primary_normal);
  box-shadow: 0 0 0 4px var(--white);
  z-index: 2;
}
.tabs__content.record .record__year .record__list > li .record__crape {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2.4rem;
}
.tabs__content.record .record__year .record__list > li .record__crape .record__card {
  flex: 0 0 auto;
  width: 12rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.tabs__content.record .record__year .record__list > li .record__crape .record__card .img-wrap {
  position: relative;
  width: 12rem;
  height: 17rem;
  overflow: hidden;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--outline_normal);
  background: linear-gradient(180deg, #4c4b49 0%, #272524 100%);
}
.tabs__content.record .record__year .record__list > li .record__crape .record__card .img-wrap > img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  margin: auto;
}
.tabs__content.record .record__year .record__list > li .record__crape .record__card figcaption {
  text-align: center;
  font-weight: 700;
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(--text_body);
  word-break: keep-all;
}
.tabs__content.statistics .statistics--sector {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.tabs__content.statistics .statistics--sector .statistics--box {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.tabs__content.statistics .headline {
  position: relative;
  margin-bottom: 1.6rem;
  padding-left: 1.2rem;
  font-weight: 800;
  font-size: var(--font_title2);
  line-height: normal;
  color: var(--text_title);
}
.tabs__content.statistics .headline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.4rem;
  height: 2.2rem;
  background-color: var(--primary_light);
}
.tabs__content.statistics .desc {
  font-size: var(--font_caption);
  color: var(--text_caption);
  line-height: normal;
}
.tabs__content.overseas {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.tabs__content.overseas .headline {
  position: relative;
  margin-bottom: 1.6rem;
  padding-left: 1.2rem;
  font-weight: 800;
  font-size: var(--font_title2);
  line-height: normal;
  color: var(--text_title);
}
.tabs__content.overseas .headline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.4rem;
  height: 2.2rem;
  background-color: var(--primary_light);
}
.tabs__content.overseas > img {
  width: 100%;
  height: auto;
  vertical-align: top;
  border: 1px solid var(--outline_normal);
}
.tabs__content.overseas .desc p {
  font-size: var(--font_caption);
  line-height: var(--lineheight_caption);
  color: var(--text_caption);
}

.center-orgchart {
  padding: 0 1.6rem 4rem;
}
.center-orgchart .org-chart {
  margin-top: 4rem;
  font-size: 1.5rem;
  color: #333;
}
.center-orgchart .org-chart .org-section-title {
  position: relative;
  margin-top: 4rem;
  margin-bottom: 1.6rem;
  padding-left: 1.2rem;
  font-weight: 800;
  font-size: var(--font_title2);
  color: var(--text_title);
}
.center-orgchart .org-chart .org-section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.4rem;
  height: 2.2rem;
  background-color: var(--primary_light);
}
.center-orgchart .org-chart .org-table-wrap {
  overflow-x: auto;
}
@media (max-width: 768px) {
  .center-orgchart .org-chart .org-table-wrap {
    -webkit-overflow-scrolling: touch;
  }
}
.center-orgchart .org-chart .org-table {
  width: 100%;
  min-width: 76.8rem;
  border-collapse: collapse;
  background: #fff;
  border-top: 1px solid var(--outline_normal);
}
.center-orgchart .org-chart .org-table th,
.center-orgchart .org-chart .org-table td {
  padding: 1.2rem 1.4rem;
  border-bottom: 1px solid var(--outline_normal);
  text-align: left;
  vertical-align: middle;
}
.center-orgchart .org-chart .org-table th {
  text-align: center;
  padding: 1.6rem 1.2rem;
  font-weight: 700;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_title);
  background: var(--container_gray-light);
}
.center-orgchart .org-chart .org-table th + th {
  border-left: 1px solid var(--outline_normal);
}
.center-orgchart .org-chart .org-table td {
  padding: 1.6rem 1.2rem;
  font-weight: 400;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_body1);
}
.center-orgchart .org-chart .org-table td + td {
  border-left: 1px solid var(--outline_normal);
}
.center-orgchart .org-chart .org-table td .dot {
  position: relative;
  padding-left: 2rem;
  word-break: keep-all;
}
.center-orgchart .org-chart .org-table td .dot:before {
  content: "";
  position: absolute;
  top: 1.1rem;
  left: 0.6rem;
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  line-height: var(--lineheight_caption);
  border-radius: 50%;
  background-color: var(--primary_normal);
}

.center-location {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding: 0 1.6rem 4rem;
}
.center-location .map-wrap {
  display: flex;
  position: relative;
  width: 100%;
  min-height: 28rem;
  aspect-ratio: 16/9;
  border: 1px solid var(--outline_noraml);
  background: var(--surface_low);
}
.center-location .map-wrap .kakao-map {
  position: relative;
  width: 100%;
  height: 100%;
}
.center-location .directions {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.center-location .directions__item {
  display: flex;
  align-items: flex-start;
  gap: 1.6rem;
}
.center-location .directions__icon {
  flex-shrink: 0;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background: #e9f4ff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.center-location .directions__icon img {
  width: 2.4rem;
  height: 2.4rem;
}
.center-location .directions__content {
  flex: 1;
}
.center-location .directions__content a {
  color: #333;
  text-decoration: none;
}
.center-location .directions__title {
  font-size: var(--font_title2);
  font-weight: 800;
  color: var(--text_body1);
  line-height: var(--lineheight_title3);
  margin-bottom: 0.8rem;
}
.center-location .directions__badge {
  display: inline-block;
  margin-bottom: 0.4rem;
  padding: 0.2rem 0.4rem;
  color: var(--white);
  font-size: var(--font_body3);
  font-weight: 700;
  line-height: var(--lineheight_body3);
  border-radius: 999px;
  background: #00aae7;
}
.center-location .directions__badge--sub {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--text_body2);
}
.center-location .directions__info, .center-location .directions__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--text_body2);
}
.center-location .directions__info li, .center-location .directions__list li {
  position: relative;
  padding-left: 2rem;
  word-break: keep-all;
}
.center-location .directions__info li:before, .center-location .directions__list li:before {
  content: "";
  position: absolute;
  top: 1.1rem;
  left: 0.6rem;
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  line-height: var(--lineheight_caption);
  border-radius: 50%;
  background-color: var(--primary_normal);
}
.center-location .directions__info li:not(:last-child), .center-location .directions__list li:not(:last-child) {
  margin-bottom: 0.4rem;
}

.center-service {
  padding: 0 1.6rem 4rem;
}
.center-service .service {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.center-service .service__item {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.center-service .service__img {
  width: 100%;
  aspect-ratio: 1.46;
  background: #f4f6f9;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 1.6rem;
}
.center-service .service__img > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.center-service .service__content {
  flex: 1;
}
.center-service .service__title {
  font-size: var(--font_title2);
  font-weight: 800;
  color: var(--text_body1);
  line-height: var(--lineheight_title3);
  margin-bottom: 0.8rem;
}
.center-service .service__desc {
  font-size: var(--font_body1);
  font-weight: 400;
  color: var(--text_body1);
  line-height: var(--lineheight_body1);
  margin-bottom: 1.6rem;
}
.center-service .service__info, .center-service .service__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--text_body2);
}
.center-service .service__info li, .center-service .service__list li {
  position: relative;
  padding-left: 2rem;
  word-break: keep-all;
}
.center-service .service__info li:before, .center-service .service__list li:before {
  content: "";
  position: absolute;
  top: 1.1rem;
  left: 0.6rem;
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  line-height: var(--lineheight_caption);
  border-radius: 50%;
  background-color: var(--primary_normal);
}
.center-service .service__info li:not(:last-child), .center-service .service__list li:not(:last-child) {
  margin-bottom: 0.8rem;
}
.center-service .service__subtitle {
  position: relative;
  padding-left: 1rem;
  word-break: keep-all;
  margin-bottom: 0.8rem;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--text_body2);
}
.center-service .service__subtitle:before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--primary_normal);
}
.center-service .service__chk {
  list-style: none;
  margin: 0;
  padding: 1.6rem 2.4rem;
  border-radius: 0.8rem;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_body1);
  background-color: var(--container_primary-light);
}
.center-service .service__chk + .service__subtitle {
  margin-top: 2.4rem;
}
.center-service .service__chk li {
  position: relative;
  padding-left: 2.4rem;
  word-break: keep-all;
}
.center-service .service__chk li strong {
  font-weight: 700;
}
.center-service .service__chk li strong::after {
  content: " : ";
}
.center-service .service__chk li:before {
  content: "";
  position: absolute;
  left: 0;
  width: 2rem;
  height: 2rem;
  background: url(../images/icons/icon-list-check.svg) center no-repeat;
}
.center-service .service__chk li:not(:last-child) {
  margin-bottom: 0.8rem;
}

.citymap {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  position: relative;
  padding: 0 1.6rem;
}
.citymap .map-container {
  overflow: hidden;
  display: flex;
  justify-content: stretch;
  position: relative;
  width: 100%;
  max-height: 45rem;
  aspect-ratio: 34/45;
  border: 1px solid var(--outline_normal);
  background: var(--surface_low);
}
.citymap .map-container .smart-map {
  position: relative;
  flex: 1 0 100%;
  width: 100%;
  min-height: 100%;
}
.citymap .map-container .smart-map .marker {
  width: 3.2rem;
  height: 3.2rem;
}
.citymap .map-container .map__btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  position: absolute;
  z-index: 10;
}
.citymap .map-container .map__btn--left {
  top: 0.8rem;
  left: 0.8rem;
}
.citymap .map-container .map__btn--right_1 {
  top: 0.8rem;
  right: 0.8rem;
}
.citymap .map-container .map__btn--right_2 {
  top: 5.4rem;
  right: 0.8rem;
}
.citymap .map-container .map__btn .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 0.4rem;
  border: 1px solid var(--outline_normal);
  background-color: var(--white);
  box-shadow: 0 3px 6px 0 rgba(9, 30, 66, 0.16);
}
.citymap .map-container .map__btn .btn:hover {
  background-color: var(--surface_low);
}
.citymap .map-container .map__btn .btn--zoom {
  height: 2.8rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.citymap .map-container .map__btn .btn--zoom:last-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0.4rem;
  border-bottom-right-radius: 0.4rem;
  border-top: 0;
}
.citymap .map-container .map__btn .btn .ico {
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
}
.citymap .map-container .map__btn .btn .ico-map-roadview {
  background: url(../images/icons/icon-roadview.svg) center no-repeat;
}
.citymap .map-container .map__btn .btn .ico-map-current {
  background: url(../images/icons/icon-current.svg) center no-repeat;
}
.citymap .map-container .map__btn .btn .ico-map-layer {
  background: url(../images/icons/icon-layer.svg) center no-repeat;
}
.citymap .map-container .map__btn .btn .ico-map-plus {
  background: url(../images/icons/icon-plus.svg) center no-repeat;
}
.citymap .map-container .map__btn .btn .ico-map-minus {
  background: url(../images/icons/icon-minus.svg) center no-repeat;
}
.citymap .map-container .map__btn .btn.active {
  border-color: var(--primary_strong);
  background-color: var(--primary_normal);
}
.citymap .map-container .map__btn .btn.active .ico {
  filter: brightness(0) invert(1);
}
.citymap .map-container .layer {
  display: none;
  position: absolute;
  bottom: 0.8rem;
  left: 0.8rem;
  right: 0.8rem;
  z-index: 10;
}
.citymap .map-container .layer--info {
  top: 50%;
  bottom: auto;
  left: 4rem;
  right: 4rem;
  transform: translateY(-50%);
  min-width: 29.6rem;
}
.citymap .map-container .layer--info .layer__content {
  padding-bottom: 0.8rem;
  border-radius: 0.8rem;
  box-shadow: 4px 8px 12px 0 rgba(9, 30, 66, 0.12);
}
@media (max-width: 768px) {
  .citymap .map-container .layer--info {
    left: 2rem;
    right: 2rem;
    margin: 0 auto;
  }
}
.citymap .map-container .layer.show {
  display: block;
}
.citymap .map-container .layer__content {
  border-radius: 0.4rem;
  border: 1px solid var(--outline_normal);
  background-color: var(--white);
}
.citymap .map-container .layer__head {
  display: flex;
  align-items: center;
  position: relative;
  height: 4rem;
  padding: 0.8rem 4rem 0.8rem 1.6rem;
  border-bottom: 1px solid var(--outline_normal);
}
.citymap .map-container .layer__head > h3 {
  font-weight: 700;
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(--text_title);
}
.citymap .map-container .layer__head .btn__close {
  display: inline-block;
  overflow: hidden;
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 0;
  text-indent: -9999rem;
  background: url(../images/icons/icon-btn-close-black.svg) center no-repeat;
}
.citymap .map-container .layer__body {
  padding: 1.6rem;
}
.citymap .map-container .layer__body .btns {
  margin-top: 2.4rem;
}

.maptype__box {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  max-width: 100%;
}
.maptype__box > li {
  display: flex;
  justify-content: center;
  flex: 1 0 calc(33.333333% - 1.6rem);
}
.maptype__box > li .btn {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
}
.maptype__box > li .btn > img {
  overflow: hidden;
  border-radius: 0.4rem;
  width: 100%;
  height: 100%;
  vertical-align: top;
}
.maptype__box > li .btn > span {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  font-size: var(--font_caption);
  line-height: var(--lineheight_caption);
  color: var(--text_body1);
}
.maptype__box > li .btn.active::after {
  content: "";
  position: absolute;
  inset: 0;
  bottom: 2.2rem;
  border-radius: 0.4rem;
  border: 2px solid var(--primary_normal);
}

.marker__select {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.marker__select > li {
  flex: 1 0 calc(50% - 0.8rem);
}

.markerinfo {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.markerinfo .divider {
  width: 100%;
  height: 1px;
  outline: 0;
  border: 0;
  background-color: var(--divider_light);
}
.markerinfo__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.markerinfo__list > h4 {
  flex: 1 0 100%;
  font-weight: 700;
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(--text_body1);
}
.markerinfo__list ul {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.4rem;
  overflow: hidden;
  overflow-y: auto;
  max-height: 15rem;
  width: 100%;
}
.markerinfo__list ul > li {
  display: flex;
  align-items: start;
  gap: 0.4rem 1.2rem;
}
.markerinfo__list ul > li .title {
  flex: 1 0 8.4rem;
  min-width: 8.4rem;
  max-width: 11.6rem;
  position: relative;
  padding-left: 2rem;
  font-weight: 700;
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(--text_body1);
}
.markerinfo__list ul > li .title sub {
  display: block;
  font-weight: 400;
  white-space: normal;
}
.markerinfo__list ul > li .title::before {
  content: "";
  position: absolute;
  top: 0.9rem;
  left: 0.6rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background-color: var(--primary_normal);
}
.markerinfo__list ul > li .desc {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(--text_body1);
}
.markerinfo__list ul > li .desc > p > strong {
  color: var(--status_success);
}
.markerinfo__list ul > li .desc > p.in-use strong {
  color: var(--status_error);
}
.markerinfo__list ul > li .desc > a {
  color: inherit;
}
.markerinfo__list--elec ul > li {
  gap: 0.4rem;
}
.markerinfo__list--elec ul > li .title {
  flex-basis: 9.6rem;
}

.legend {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.legend__title {
  font-weight: 700;
  font-size: var(--font_body3);
  line-height: normal;
  color: var(--text_title);
}
.legend__bar {
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 0.6rem;
}
.legend__item {
  flex: 1;
  height: 100%;
}
.legend__labels {
  display: flex;
  justify-content: space-between;
  text-align: center;
  padding: 0 0.4rem;
}
.legend__labels span {
  flex: 1;
  font-size: var(--font_caption);
  line-height: normal;
  color: var(--text_body1);
}

.safety {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.safety-home-intro {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding: 0 1.6rem;
}
.safety-home-intro .intro__text {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.safety-home-intro .intro__text .headline {
  font-weight: 800;
  font-size: var(--font_heading2);
  line-height: var(--lineheight_heading2);
  color: var(-text_title);
  word-break: keep-all;
}
.safety-home-intro .intro__text .desc {
  font-weight: 400;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(-text_body1);
  word-break: keep-all;
}
.safety-home-intro .intro__text .desc--sub {
  font-weight: 400;
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(-text_caption);
  word-break: keep-all;
}
.safety-home-intro .intro-image {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.safety-home-intro .intro-image > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.safety-home-info {
  padding: 4.8rem 1.6rem;
  background-color: var(--container_primary-light);
}
.safety-home-info .info__text {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  text-align: center;
  margin-bottom: 2.4rem;
}
.safety-home-info .info__text > i {
  height: 5.2rem;
  margin-bottom: 1.6rem;
}
.safety-home-info .info__text > i > img {
  width: auto;
  height: 100%;
  vertical-align: top;
}
.safety-home-info .info__text .headline {
  font-weight: 800;
  font-size: var(--font_heading2);
  line-height: var(--lineheight_heading2);
  color: var(-text_title);
  word-break: keep-all;
}
.safety-home-info .info__text .desc {
  font-weight: 400;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(-text_body1);
  word-break: keep-all;
}
.safety-home-info .info__text .desc--sub {
  font-weight: 400;
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(-text_caption);
  word-break: keep-all;
}
.safety-home-info .info__icons {
  display: flex;
  justify-content: center;
  gap: 0;
}
.safety-home-info .info__icons .icons__item {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  flex: 1;
  position: relative;
  text-align: center;
}
.safety-home-info .info__icons .icons__item > img {
  display: inline-block;
  position: relative;
  z-index: 2;
  width: 6.4rem;
  height: 6.4rem;
  margin: 0 auto;
}
.safety-home-info .info__icons .icons__item > p {
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--text_body1);
  word-break: keep-all;
}
.safety-home-info .info__icons .icons__item:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 3.2rem;
  left: 0;
  z-index: 1;
  width: 50%;
  height: 1px;
  background-color: var(--primary_normal);
}
.safety-home-info .info__icons .icons__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 3.2rem;
  right: 0;
  z-index: 1;
  width: 50%;
  height: 1px;
  background-color: var(--primary_normal);
}
.safety-home-info .info__imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem 0.8rem;
  margin-top: 4.8rem;
}
.safety-home-info .info__imgs .imgs__item {
  width: calc(50% - 0.4rem);
  flex: 0 0 calc(50% - 0.4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  padding: 0 2.35rem;
  box-sizing: border-box;
}
.safety-home-info .info__imgs .imgs__item > img {
  width: 100%;
  height: auto;
  display: block;
}
.safety-home-info .info__imgs .imgs__item > p {
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_body1);
  word-break: keep-all;
}
.safety-home-step {
  padding: 0 1.6rem;
}
.safety-home-step .step__text {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  text-align: center;
  margin-bottom: 2.4rem;
}
.safety-home-step .step__text .headline {
  font-weight: 800;
  font-size: var(--font_heading2);
  line-height: var(--lineheight_heading2);
  color: var(-text_title);
  word-break: keep-all;
}
.safety-home-step .step__text .desc {
  font-weight: 400;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(-text_body1);
  word-break: keep-all;
}
.safety-home-step .step__text .desc--sub {
  font-weight: 400;
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(-text_caption);
  word-break: keep-all;
}
.safety-home-step .step__wrap {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.safety-home-step .step__wrap .step__cont .step__badge {
  display: inline-block;
  margin-bottom: 1.6rem;
  padding: 0.4rem 0.8rem;
  border-radius: 99.9rem;
  border: 1px solid var(--primary_normal);
  font-weight: 700;
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(--primary_normal);
}
.safety-home-step .step__wrap .step__cont .step__desc {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  font-weight: 400;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--text_body1);
  word-break: keep-all;
}
.safety-home-step .step__wrap .step__cont .step__desc > strong {
  font-weight: 700;
  font-size: var(--font_title2);
  line-height: var(--lineheight_title2);
}
.safety-home-step .step__wrap .step__cont .step__desc > sub {
  font-weight: 700;
  font-size: var(--font_body3);
  line-height: var(--lineheight_title2);
  color: var(--text_caption);
}
.safety-home-step .step__wrap .step__cont .step__btn {
  display: flex;
  gap: 0.8rem;
  margin-top: 0.8rem;
}
.safety-home-step .step__wrap .step__cont .step__btn > button {
  display: inline-block;
  position: relative;
  padding: 0.85rem 3.6rem 0.85rem 1.6rem;
  border-radius: 99.9rem;
  border: 1px solid var(--outline_heavy);
  font-weight: 700;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_body1);
}
.safety-home-step .step__wrap .step__cont .step__btn > button > img {
  display: none;
}
.safety-home-step .step__wrap .step__cont .step__btn > button::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 1.6rem;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  background: url(../images/icons/icon-chevron_right_gray.svg) center no-repeat;
}
.safety-home-step .step__wrap .step__cont > img {
  display: block;
  margin: 1.6rem auto 0;
  width: 100%;
  max-width: 24rem;
  height: auto;
}

.elderly {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.elderly-intro {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding: 0 1.6rem;
}
.elderly-intro .intro__text {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.elderly-intro .intro__text .headline {
  font-weight: 800;
  font-size: var(--font_heading2);
  line-height: var(--lineheight_heading2);
  color: var(-text_title);
  word-break: keep-all;
}
.elderly-intro .intro__text .desc {
  font-weight: 400;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(-text_body1);
  word-break: keep-all;
}
.elderly-intro .intro__text .desc--sub {
  font-weight: 400;
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(-text_caption);
  word-break: keep-all;
}
.elderly-intro .intro-image {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.elderly-intro .intro-image > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.elderly-info {
  padding: 4.8rem 1.6rem;
  background-color: var(--container_primary-light);
}
.elderly-info .info__text {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  text-align: center;
  margin-bottom: 2.4rem;
}
.elderly-info .info__text > i {
  height: 5.2rem;
  margin-bottom: 1.6rem;
}
.elderly-info .info__text > i > img {
  width: auto;
  height: 100%;
  vertical-align: top;
}
.elderly-info .info__text .headline {
  font-weight: 800;
  font-size: var(--font_heading2);
  line-height: var(--lineheight_heading2);
  color: var(-text_title);
  word-break: keep-all;
}
.elderly-info .info__text .desc {
  font-weight: 400;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(-text_body1);
  word-break: keep-all;
}
.elderly-info .info__text .desc--sub {
  font-weight: 400;
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(-text_caption);
  word-break: keep-all;
}
.elderly-info .info__icons {
  display: flex;
  justify-content: center;
  gap: 0;
}
.elderly-info .info__icons .icons__item {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  flex: 1;
  position: relative;
  text-align: center;
}
.elderly-info .info__icons .icons__item > img {
  display: inline-block;
  position: relative;
  z-index: 2;
  width: 6.4rem;
  height: 6.4rem;
  margin: 0 auto;
}
.elderly-info .info__icons .icons__item > p {
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--text_body1);
  word-break: keep-all;
}
.elderly-info .info__icons .icons__item:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 3.2rem;
  left: 0;
  z-index: 1;
  width: 50%;
  height: 1px;
  background-color: var(--primary_normal);
}
.elderly-info .info__icons .icons__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 3.2rem;
  right: 0;
  z-index: 1;
  width: 50%;
  height: 1px;
  background-color: var(--primary_normal);
}
.elderly-info .info__imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem 0.8rem;
  margin-top: 4.8rem;
}
.elderly-info .info__imgs .imgs__item {
  width: calc(50% - 0.4rem);
  flex: 0 0 calc(50% - 0.4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  padding: 0 2.35rem;
  box-sizing: border-box;
}
.elderly-info .info__imgs .imgs__item > img {
  width: 100%;
  height: auto;
  display: block;
}
.elderly-info .info__imgs .imgs__item > p {
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_body1);
  word-break: keep-all;
}
.elderly-step {
  padding: 0 1.6rem;
}
.elderly-step .step__text {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  text-align: center;
  margin-bottom: 2.4rem;
}
.elderly-step .step__text .headline {
  font-weight: 800;
  font-size: var(--font_heading2);
  line-height: var(--lineheight_heading2);
  color: var(-text_title);
  word-break: keep-all;
}
.elderly-step .step__text .desc {
  font-weight: 400;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(-text_body1);
  word-break: keep-all;
}
.elderly-step .step__text .desc--sub {
  font-weight: 400;
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(-text_caption);
  word-break: keep-all;
}
.elderly-step .step__wrap {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.elderly-step .step__wrap .step__cont .step__badge {
  display: inline-block;
  margin-bottom: 1.6rem;
  padding: 0.4rem 0.8rem;
  border-radius: 99.9rem;
  border: 1px solid var(--primary_normal);
  font-weight: 700;
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(--primary_normal);
}
.elderly-step .step__wrap .step__cont .step__desc {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  font-weight: 400;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--text_body1);
  word-break: keep-all;
}
.elderly-step .step__wrap .step__cont .step__desc > strong {
  font-weight: 700;
  font-size: var(--font_title2);
  line-height: var(--lineheight_title2);
}
.elderly-step .step__wrap .step__cont .step__desc > sub {
  font-weight: 700;
  font-size: var(--font_body3);
  line-height: var(--lineheight_title2);
  color: var(--text_caption);
}
.elderly-step .step__wrap .step__cont .terminal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 2rem;
}
.elderly-step .step__wrap .step__cont .terminal-list > div {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex: 0 0 calc(33.3333% - 1.07rem);
  max-width: calc(33.3333% - 1.07rem);
  text-align: center;
}
.elderly-step .step__wrap .step__cont .terminal-list > div > span {
  font-weight: 400;
  font-size: var(--font_caption);
  line-height: var(--lineheight_caption);
  color: var(--text_body2);
}
.elderly-step .step__wrap .step__cont .terminal-list > div > img {
  width: auto;
  height: auto;
}
.elderly-step .step__wrap .step__cont .terminal-list > div::after {
  content: "";
}
.elderly-step .step__wrap .step__cont .step__btn {
  display: flex;
  gap: 0.8rem;
  margin-top: 0.8rem;
}
.elderly-step .step__wrap .step__cont .step__btn > button {
  display: inline-block;
  position: relative;
  padding: 0.85rem 3.6rem 0.85rem 1.6rem;
  border-radius: 99.9rem;
  border: 1px solid var(--outline_heavy);
  font-weight: 700;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_body1);
}
.elderly-step .step__wrap .step__cont .step__btn > button::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 1.6rem;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  background: url(../images/icons/icon-chevron_right_gray.svg) center no-repeat;
}
.elderly-step .step__wrap .step__cont > img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 1.6rem;
  aspect-ratio: 34.3/21.4;
}
.elderly-step .step__condition {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-top: 4rem;
  margin-bottom: 4rem;
  padding: 1.6rem 2rem 2rem;
  border-radius: 1.6rem;
  background-color: var(--container_gray-light);
}
.elderly-step .step__condition--head {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.elderly-step .step__condition--head .headline {
  font-weight: 700;
  font-size: var(--font_title3);
  line-height: var(--lineheight_title3);
  color: var(--text_title);
}
.elderly-step .step__condition--head .desc {
  font-size: var(--font_body3);
  line-height: var(--lineheight_body1);
  color: var(--text_body1);
}
.elderly-step .step__condition--body .dotted {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.elderly-step .step__condition--body .dotted > p {
  position: relative;
  padding-left: 2rem;
  font-weight: 400;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_body1);
  word-break: keep-all;
}
.elderly-step .step__condition--body .dotted > p::before {
  content: "";
  position: absolute;
  top: 0.8rem;
  left: 0.6rem;
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  line-height: var(--lineheight_caption);
  border-radius: 50%;
  background-color: var(--primary_normal);
}

.board-search {
  margin: 2.4rem 1.6rem 0;
}
.board-search__form {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  width: 100%;
  padding: 1.6rem 0.8rem;
  border-radius: 0.8rem;
  background: var(--container_gray-light);
}
.board-search__row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.8rem;
}
.board-search__label {
  display: flex;
  align-items: center;
  font-size: var(--font_body2);
  line-height: 2.4rem;
  font-weight: 700;
  flex: 0 0 auto;
  color: #222;
}
.board-search__fields {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
}
.board-search__select {
  flex-basis: 30%;
  width: 30%;
  padding: 0.8rem 3.6rem 0.8rem 0.8rem;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  border: 1px solid var(--outline_normal);
  border-radius: 0.8rem;
  appearance: none;
  background: #fff url(../images/icons/icon-chevron_down_gray.svg) right 1rem center no-repeat;
}
.board-search__select:focus {
  border-color: var(--primary_normal);
  outline: none;
  box-shadow: 0 0 0 2px rgba(47, 100, 231, 0.25);
}
.board-search__input {
  flex: 1;
  padding: 0.8rem;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  border: 1px solid var(--outline_normal);
  border-radius: 0.8rem;
  background-color: var(--white);
}
.board-search__input::placeholder {
  color: var(--text_placeholder);
}
.board-search__input:focus {
  border-color: var(--primary_normal);
  outline: none;
  box-shadow: 0 0 0 2px rgba(47, 100, 231, 0.25);
}
.board-search__buttons {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  flex-shrink: 0;
}
.board-search__buttons > button {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 1.6rem;
  border-radius: 99.9rem;
  border: 1px solid var(--outline_heavy);
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  cursor: pointer;
}
.board-search__buttons > button.btn-reset {
  background: #fff;
}
.board-search__buttons > button.btn-reset .ico-reset {
  width: 2rem;
  height: 2rem;
  display: inline-block;
  background: url(../images/icons/icon-refresh.svg) center no-repeat;
}
.board-search__buttons > button.btn-reset:hover {
  background-color: var(--surface_low);
}
.board-search__buttons > button.btn-submit {
  color: var(--white);
  background: var(--primary_normal);
}
.board-search__buttons > button.btn-submit:hover {
  background: var(--primary_saturate);
}

.board-list {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 1.6rem;
}
.board-list__head .tx-total {
  font-size: 1.5rem;
  color: var(--text_body2);
  line-height: normal;
}
.board-list__head .tx-total > strong {
  font-weight: 700;
}
.board-list__head .tx-total > strong::after {
  content: "개";
}
.board-list__body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.board-list__body .table__list {
  flex: 1 0 auto;
  width: 100%;
  border-top: 1px solid var(--outline_strong);
}
.board-list__body .table__list tr th,
.board-list__body .table__list tr td {
  padding: 1.6rem 0.8rem;
  border-bottom: 1px solid var(--outline_normal);
}
.board-list__body .table__list tr td {
  white-space: nowrap;
  font-weight: 400;
  font-size: var(--font_body3);
  color: var(--text-body2);
  vertical-align: middle;
}
.board-list__body .table__list tr td:first-child {
  text-align: center;
}
.board-list__body .table__list tr td .report-number {
  margin-bottom: 1.6rem;
  font-size: var(--font_body3);
  color: var(--text_body2);
  line-height: normal;
}
.board-list__body .table__list tr td > a {
  font-weight: 700;
  font-size: var(--font_title3);
  color: var(--text_title);
  line-height: var(--lineheight_title3);
  word-break: keep-all;
  white-space: normal;
}
.board-list__body .table__list tr td > a:hover {
  text-decoration: underline;
}
.board-list__body .table__list tr td > a .attach {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: middle;
  background: url(../images/icons/icon-attach-file.svg) center no-repeat;
}
.board-list__body .table__list tr td .info {
  display: flex;
  flex-wrap: wrap;
  gap: 1.7rem;
  margin-top: 0.8rem;
  font-size: var(--font_body3);
  color: var(--text_body2);
  line-height: normal;
}
.board-list__body .table__list tr td .info > p + p {
  position: relative;
}
.board-list__body .table__list tr td .info > p + p::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: -0.9rem;
  width: 1px;
  height: 1.4rem;
  background-color: var(--divider_normal);
}
.board-list__body .table__list tr td .info > p span {
  display: none;
  font-weight: 400;
  font-size: var(--font_body3);
  color: var(--text_body2);
}
.board-list__body .table__list tr td .info > p.is--wait {
  color: var(--text_caption);
}
.board-list__body .table__list tr td .info > p.is--complete {
  font-weight: 700;
  color: var(--primary_normal);
}
.board-list__body .table__list tr.fixed {
  background-color: var(--container_primary-light);
}
.board-list__body .table__list tr.fixed td:first-child {
  font-weight: 700;
  color: var(--primary_normal);
}
.board-list__body .gallery__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2.4rem 1.6rem;
}
.board-list__body .gallery__list .gallery__item {
  display: flex;
  justify-content: start;
  flex-direction: column;
  gap: 0.8rem;
  flex: 1 0 calc(50% - 0.8rem);
  max-width: calc(50% - 0.8rem);
}
.board-list__body .gallery__list .gallery__item .img-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%;
}
.board-list__body .gallery__list .gallery__item .img-wrapper > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.board-list__body .gallery__list .gallery__item > p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 700;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--text_title);
}
.board-list__body .gallery__list .no-data {
  flex: 1 0 100%;
}

.board-view {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 1.6rem;
}
.board-view__head {
  padding: 1.6rem 0;
  border-top: 1px solid var(--outline_strong);
  border-bottom: 1px solid var(--outline_normal);
}
.board-view__head > p {
  font-weight: 700;
  font-size: var(--font_title1);
  color: var(--text_title);
  line-height: var(--lineheight_title1);
  word-break: keep-all;
}
.board-view__head > p .attach {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: middle;
  background: url(../images/icons/icon-attach-file.svg) center no-repeat;
}
.board-view__head .info {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.7rem;
  overflow: hidden;
  margin-top: 0.8rem;
  font-size: var(--font_body3);
  color: var(--text_body2);
  line-height: normal;
}
.board-view__head .info > p + p {
  position: relative;
}
.board-view__head .info > p + p::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: -0.9rem;
  width: 1px;
  height: 1.4rem;
  background-color: var(--divider_normal);
}
.board-view__head .info > p span {
  margin-left: 0.8rem;
}
.board-view__head .info > p strong.is--wait {
  color: var(--text_caption);
}
.board-view__head .info > p strong.is--complete {
  font-weight: 700;
  color: var(--primary_normal);
}
.board-view__body {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.board-view__body .board-inner {
  border-bottom: 1px solid var(--outline_normal);
}
.board-view__body .board-inner iframe {
  display: block;
  margin: 2.4rem auto;
  width: 100%;
  max-width: 94rem;
  aspect-ratio: 16/9;
  height: auto;
  border: 0;
}
.board-view__body .board-attach {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--outline_normal);
}
.board-view__body .board-attach .attachs {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.8rem;
}
.board-view__body .board-attach > label {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_body1);
}
.board-view__body .board-attach .btn-download {
  width: 100%;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_body1);
}
.board-view__body .board-attach .btn-download:hover {
  text-decoration: underline;
}
.board-view__body .board-attach .btn-download .ico-download {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin-right: 0.4rem;
  vertical-align: middle;
  background: url(../images/icons/icon-attach-file.svg) center no-repeat;
}
.board-view__body .borad-reply {
  margin-top: 2.4rem;
  padding: 1.6rem;
  border-radius: 0.8rem;
  background-color: var(--container_primary-light);
}
.board-view__body .borad-reply__head > h4 {
  font-weight: 700;
  font-size: var(--font_body1);
  color: var(--text_title);
  line-height: var(--lineheight_body1);
  word-break: keep-all;
}
.board-view__body .borad-reply__head > h4::before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin-right: 0.8rem;
  vertical-align: middle;
  background: url(../images/icons/icon-reply.svg) center no-repeat;
}
.board-view__body .borad-reply__head .info {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3.3rem;
  overflow: hidden;
  margin-top: 0.8rem;
  font-size: var(--font_body3);
  color: var(--text_body2);
  line-height: normal;
}
.board-view__body .borad-reply__head .info > p + p {
  position: relative;
}
.board-view__body .borad-reply__head .info > p + p::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: -1.7rem;
  width: 1px;
  height: 1.4rem;
  background-color: var(--divider_normal);
}
.board-view__body .borad-reply__head .info > p span {
  margin-left: 0.8rem;
}
.board-view__body .borad-reply__body .board-inner {
  padding-bottom: 0;
  border-bottom: 0;
}
.board-view__body .btn-back {
  display: inline-block;
  margin: 2.4rem auto 0;
  padding: 1.05rem 3.5rem;
  border-radius: 99.9rem;
  border: 1px solid var(--outline_heavy);
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_body1);
}

.board-inner {
  all: revert;
  display: block;
  padding: 2.4rem 0 4rem;
  color: var(--text_body1);
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
}
.board-inner p {
  margin: 0;
}
.board-inner ul {
  list-style: revert;
  margin: 1rem 0 1rem 2.4rem;
}
.board-inner ol {
  list-style: revert;
  margin: 1rem 0 1rem 2.4rem;
}
.board-inner li {
  margin: 0.4rem 0;
}
.board-inner img {
  max-width: 100%;
  height: auto;
}
.board-inner table {
  border-collapse: collapse;
  margin: 1rem 0;
  width: auto;
}
.board-inner table,
.board-inner th,
.board-inner td {
  border: revert;
  padding: revert;
}

.paging {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.6rem;
}
.paging a,
.paging span {
  position: relative;
  height: 2.4rem;
}
.paging a.is-active,
.paging span.is-active {
  font-weight: 700;
  color: var(--primary_normal);
}
.paging a.is-active::after,
.paging span.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.2rem;
  background: var(--primary_normal);
  border-radius: 2px;
}
.paging a.disabled,
.paging span.disabled {
  pointer-events: none;
  opacity: 0.35;
}
.paging__first, .paging__last, .paging__prev, .paging__next {
  width: 2rem;
  height: 2rem;
  font-size: 0;
  background-position: center;
  background-repeat: no-repeat;
}
.paging__first, .paging__last {
  background-image: url(../images/icons/icon-chevron_end.svg);
}
.paging__first {
  transform: rotate(180deg);
}
.paging__prev {
  background-image: url(../images/icons/icon-chevron_left_gray.svg);
}
.paging__next {
  background-image: url(../images/icons/icon-chevron_right_gray.svg);
}
.paging__num {
  inline-size: 1.8rem;
  margin: 0 0.8rem;
  padding: 0 0.4rem;
  font-size: var(--font_body3);
  line-height: 2.4rem;
  color: var(--text_body2);
  text-align: center;
}

.no-data {
  text-align: center;
  padding: 5rem 0 !important;
  font-weight: 300 !important;
  font-size: var(--font_body3) !important;
  color: var(--text_caption) !important;
}

.btn-report {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-top: 4rem;
  padding: 1.3rem 2.4rem;
  border-radius: 99.9rem;
  font-size: var(--font_title3);
  line-height: var(--lineheight_title3);
  color: var(--white);
  background-color: var(--primary_normal);
  text-align: center;
}
.btn-report::after {
  content: "";
  width: 2.4rem;
  height: 2.4rem;
  background: url(../images/icons/icon-chevron_right.svg) center no-repeat;
}

.board-report {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding: 0 1.6rem;
}
.board-report__head .step {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
}
.board-report__head .step__item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-weight: 700;
  font-size: var(--font_body1);
  color: var(--text_caption);
}
.board-report__head .step__item .num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  font-size: var(--font_body3);
  background: var(--container_gray-normal);
}
.board-report__head .step__item.active {
  color: #0a4ea3;
}
.board-report__head .step__item.active .num {
  background: var(--primary_normal);
  color: #fff;
}
.board-report__head .step .bar {
  flex: 1;
  max-width: 4rem;
  height: 0.2rem;
  background: var(--divider_normal);
}
.board-report__body {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.board-report__body .section__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  font-size: var(--font_title2);
  margin-bottom: 1.6rem;
  border-left: 4px solid var(--primary_light);
  padding-left: 1rem;
}
.board-report__body .section__title .required {
  font-weight: 400;
  font-size: var(--font_body3);
  color: var(--text_body3);
  line-height: 140%;
}
.board-report__body .section__title .required::before {
  content: "*";
  position: relative;
  top: 0.2rem;
  margin-right: 0.4rem;
  color: var(--status_error);
}
.board-report__body .section__desc {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.board-report__body .section__desc h4 {
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--text_title);
}
.board-report__body .section__desc h4 > strong {
  color: var(--primary_normal);
}
.board-report__body .section__desc p {
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(--text_body3);
}
.board-report__body .section__complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
  height: 40rem;
  padding: 3.2rem 1.6rem 4.8rem;
  border-radius: 0.8rem;
  border: 1px solid var(--outline_normal);
}
.board-report__body .section__complete .check {
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  background: var(--container_primary-light) url(../images/icons/icon-list-check.svg) center no-repeat;
}
.board-report__body .section__complete .message {
  text-align: center;
  font-weight: 400;
  font-size: var(--font_title3);
  line-height: var(--lineheight_title3);
  color: var(--text_title);
}
.board-report__body .section__complete .message > span {
  font-weight: 700;
  color: var(--primary_normal);
}
.board-report__body .section__complete .btn-back {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  width: 12.2rem;
  padding: 1.05rem 1.6rem;
  border-radius: 99.9rem;
  border: 1px solid var(--outline_heavy);
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_body1);
  background-color: var(--white);
  cursor: pointer;
}
.board-report__body .table-wrap {
  margin-top: 2.4rem;
}
.board-report__body .table-wrap .info-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
.board-report__body .table-wrap .info-table th,
.board-report__body .table-wrap .info-table td {
  border: 1px solid var(--outline_normal);
  padding: 1rem 1.2rem;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(text_body1);
  text-align: center;
}
.board-report__body .table-wrap .info-table th:first-child,
.board-report__body .table-wrap .info-table td:first-child {
  border-left: 0;
}
.board-report__body .table-wrap .info-table th:last-child,
.board-report__body .table-wrap .info-table td:last-child {
  border-right: 0;
}
.board-report__body .table-wrap .info-table th {
  padding: 1.85rem 1.2rem;
  font-weight: 700;
  color: var(text_title);
  background: var(--container_gray-light);
}
.board-report__body .table-wrap .info-table td.primary {
  font-weight: 700;
  color: var(--primary_normal);
}
.board-report__body .table-wrap .table-note {
  margin-top: 1.6rem;
  font-size: var(--font_caption);
  color: var(--text_caption);
}
.board-report__body .agree {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 2.4rem;
  padding: 1.6rem;
  border-radius: 0.8rem;
  background-color: var(--container_primary-light);
}
.board-report__body .agree__label {
  font-size: var(--font_body1);
  color: var(--text_body1);
}
.board-report__body .form {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding-top: 1.6rem;
}
.board-report__body .form .form__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.6rem;
  width: 100%;
}
.board-report__body .form .form__row label:not(.inp) {
  flex: 1 0 15%;
  max-width: 15%;
  word-break: keep-all;
  font-weight: 700;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_body2);
}
.board-report__body .form .form__row label:not(.inp) .star {
  color: var(--status_error);
  margin-left: 0.2rem;
}
.board-report__body .form .form__row .column {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex: 1 0 auto;
  width: calc(85% - 1.6rem);
  max-width: 100%;
  /* 파일첨부 */
  /* 파일 목록 */
}
.board-report__body .form .form__row .column input:not([type=checkbox]):not([type=radio]),
.board-report__body .form .form__row .column select {
  flex-basis: auto;
  width: 100%;
  max-width: 100%;
  padding: 0.8rem;
  border-radius: 0.4rem;
  border: 1px solid var(--outline_normal);
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_body2);
  background-color: var(--white);
}
.board-report__body .form .form__row .column input:not([type=checkbox]):not([type=radio])::placeholder,
.board-report__body .form .form__row .column select::placeholder {
  color: var(--text_placeholder);
}
.board-report__body .form .form__row .column input:not([type=checkbox]):not([type=radio]):read-only,
.board-report__body .form .form__row .column select:read-only {
  background-color: var(--container_disable);
}
.board-report__body .form .form__row .column .help {
  margin-top: 0.4rem;
  font-size: var(--font_caption);
  line-height: var(--lineheight_caption);
  color: var(--text_caption);
  word-break: keep-all;
}
.board-report__body .form .form__row .column .address-find {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex: 1 0 auto;
}
.board-report__body .form .form__row .column .address-find > div {
  display: flex;
  gap: 0.8rem;
}
.board-report__body .form .form__row .column .address-find .btn-find {
  flex: 1 0 auto;
  padding: 0.8rem 1.6rem;
  border-radius: 0.4rem;
  border: 1px solid var(--outline_heavy);
  font-weight: 700;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_body1);
  background: #fff;
}
.board-report__body .form .form__row .column .address-find .btn-find:hover {
  background-color: var(--surface_low);
}
.board-report__body .form .form__row .column .selects {
  display: flex;
  gap: 0.8rem;
}
.board-report__body .form .form__row .column .selects > select {
  flex: 1;
  background-color: #fff;
  appearance: none;
  background: url(../images/icons/icon-chevron_down_gray.svg) calc(100% - 0.8rem) center no-repeat;
}
.board-report__body .form .form__row .column .textareas {
  position: relative;
  /* 글자수 카운터 */
}
.board-report__body .form .form__row .column .textareas > textarea {
  flex-basis: auto;
  width: 100%;
  max-width: 100%;
  height: 24rem;
  padding: 0.8rem;
  border-radius: 0.4rem;
  border: 1px solid var(--outline_normal);
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_body2);
  resize: none;
}
.board-report__body .form .form__row .column .textareas > textarea::placeholder {
  color: #b0b0b0;
}
.board-report__body .form .form__row .column .textareas .text-counter {
  position: absolute;
  bottom: 0.8rem;
  right: 0.8rem;
  font-size: var(--font_caption);
  line-height: var(--lineheight_caption);
  color: var(--text_caption);
}
.board-report__body .form .form__row .column .filebox {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.board-report__body .form .form__row .column .filebox__btn {
  flex: 1 0 auto;
  padding: 0.8rem 1.6rem;
  max-width: 100%;
  border-radius: 0.4rem;
  border: 1px solid var(--outline_heavy);
  font-weight: 700;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_body1);
  background: var(--white);
  cursor: pointer;
}
.board-report__body .form .form__row .column .filebox__btn:hover {
  background-color: var(--surface_low);
}
.board-report__body .form .form__row .column .filebox__list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.board-report__body .form .form__row .column .filebox__list .file-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.board-report__body .form .form__row .column .filebox__list .file-item .file-name {
  font-size: var(--font_body3);
  color: var(--primary_normal);
  line-height: var(--lineheignt_body3);
}
.board-report__body .form .form__row .column .filebox__list .file-item .file-name::before {
  content: "• ";
}
.board-report__body .form .form__row .column .filebox__list .file-item .file-remove {
  display: inline-block;
  overflow: hidden;
  width: 2rem;
  height: 2rem;
  font-size: 0;
  text-indent: -9999rem;
  background: url(../images/icons/icon-btn-close-gray.svg) center no-repeat;
}
.board-report__body .form .form__row .caution {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.6rem;
  background-color: var(--container_gray-light);
}
.board-report__body .form .form__row .caution li {
  position: relative;
  padding-left: 2rem;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_body1);
}
.board-report__body .form .form__row .caution li::before {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 0.6rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--primary_normal);
  z-index: 2;
}

.promotion {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.promotion-intro {
  padding: 0 1.6rem;
}
.promotion-intro .video-hero {
  aspect-ratio: 49/31;
  margin-bottom: 1.6rem;
}
.promotion-intro .video-hero__thumb {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
.promotion-intro .video-hero__thumb:hover .video-hero__play, .promotion-intro .video-hero__thumb:focus-visible .video-hero__play {
  background-color: rgba(0, 0, 0, 0.8);
}
.promotion-intro .video-hero__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.promotion-intro .video-hero__thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.35));
}
.promotion-intro .video-hero__thumb .video-hero__play {
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
}
.promotion-intro .video-hero__thumb .video-hero__play::before {
  content: "";
  display: block;
  margin-left: 0.3rem;
  border-style: solid;
  border-width: 0.8rem 0 0.8rem 1.4rem;
  border-color: transparent transparent transparent #ffffff;
}
.promotion-intro .video-hero__video-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}
.promotion-intro .video-hero__video-wrap .video-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
.promotion-intro .video-hero .video-hero__thumb[hidden],
.promotion-intro .video-hero .video-hero__video-wrap[hidden] {
  display: none !important;
}
.promotion-intro .intro__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.6rem;
}
.promotion-intro .intro__text .headline {
  font-weight: 800;
  font-size: var(--font_heading2);
  line-height: var(--lineheight_heading2);
  color: var(-text_title);
  word-break: keep-all;
}
.promotion-intro .intro__text .desc {
  font-weight: 400;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(-text_body1);
  word-break: keep-all;
  text-align: center;
}
.promotion-intro .intro__text .desc--sub {
  font-weight: 400;
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(-text_caption);
  word-break: keep-all;
}
.promotion-intro .intro__text .btns {
  margin-top: 0.8rem;
}
.promotion .promoinfo__sector {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.promotion .promoinfo__box {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.promotion .promoinfo__box .headline {
  text-align: center;
  font-weight: 800;
  font-size: var(--font_title1);
  line-height: var(--lineheight_title1);
  color: var(--text_title);
}
.promotion .promoinfo__img {
  width: 100%;
  aspect-ratio: 1.46;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.promotion .promoinfo__img > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.promotion .promoinfo__list {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding: 1.6rem 1.6rem 2.4rem;
  border-radius: 1.6rem;
  background-color: vaR(--container_gray-light);
}
.promotion .promoinfo__list > ul {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.promotion .promoinfo__list > ul > li {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.promotion .promoinfo__list > ul > li .title {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 0.4rem 0;
  font-weight: 700;
  font-size: var(--font_title3);
  line-height: normal;
  color: var(--text_title);
}
.promotion .promoinfo__list > ul > li .title br {
  display: none;
}
.promotion .promoinfo__list > ul > li .title > i {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
}
.promotion .promoinfo__list > ul > li .title > i.ico-1 {
  background: url(../images/promotion/icon-promotion-info1.svg) center no-repeat;
}
.promotion .promoinfo__list > ul > li .title > i.ico-2 {
  background: url(../images/promotion/icon-promotion-info2.svg) center no-repeat;
}
.promotion .promoinfo__list > ul > li .title > i.ico-3 {
  background: url(../images/promotion/icon-promotion-info3.svg) center no-repeat;
}
.promotion .promoinfo__list > ul > li .title > i.ico-4 {
  background: url(../images/promotion/icon-promotion-info4.svg) center no-repeat;
}
.promotion .promoinfo__list > ul > li .title > i.ico-5 {
  background: url(../images/promotion/icon-promotion-info5.svg) center no-repeat;
}
.promotion .promoinfo__list > ul > li .title > i.ico-6 {
  background: url(../images/promotion/icon-promotion-info6.svg) center no-repeat;
}
.promotion .promoinfo__list > ul > li .dotted > li {
  position: relative;
  padding-left: 2rem;
  font-weight: 400;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--text_body1);
}
.promotion .promoinfo__list > ul > li .dotted > li + li {
  margin-top: 0.4rem;
}
.promotion .promoinfo__list > ul > li .dotted > li::before {
  content: "";
  position: absolute;
  top: 0.8rem;
  left: 0.6rem;
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  line-height: var(--lineheight_caption);
  border-radius: 50%;
  background-color: var(--primary_normal);
}
.promotion .promoinfo .promoslide {
  margin-bottom: 1.6rem;
}
.promotion .promoinfo .promoslide__main {
  position: relative;
  margin-bottom: 0.8rem;
}
.promotion .promoinfo .promoslide__main .slide-inner {
  position: relative;
}
.promotion .promoinfo .promoslide__main .slide-inner .img-wrapper {
  width: 100%;
  aspect-ratio: 343/193;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.promotion .promoinfo .promoslide__main .slide-inner .img-wrapper > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.promotion .promoinfo .promoslide__main .slide-inner .img-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  top: auto;
  height: 8rem;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
}
.promotion .promoinfo .promoslide__main .slide-inner .slide-info {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  position: absolute;
  inset: 1.6rem;
  top: auto;
  z-index: 10;
  color: var(--white);
}
.promotion .promoinfo .promoslide__main .slide-inner .slide-info .title {
  font-weight: 800;
  font-size: var(--font_title3);
  line-height: normal;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0px 2px rgba(0, 0, 0, 0.2), 0 0 0.15em #000;
}
.promotion .promoinfo .promoslide__main .slide-inner .slide-info .desc {
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
}
.promotion .promoinfo .promoslide__main .slide-inner .slide-info .desc br {
  display: none;
}
.promotion .promoinfo .promoslide__thumb .swiper-slide-thumb-active .img-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--outline_heavy);
}
.promotion .promoinfo .promoslide__thumb .img-wrapper {
  width: 100%;
  aspect-ratio: 343/193;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.promotion .promoinfo .promoslide__thumb .img-wrapper > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.promotion .promoinfo .promoslide__nav button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: none;
  border: none;
  inline-size: 2.8rem;
  block-size: 2.8rem;
  font-size: 0;
  cursor: pointer;
}
.promotion .promoinfo .promoslide__nav button:hover {
  border-radius: 0.4rem;
  outline: 1px solid var(--white);
}
.promotion .promoinfo .promoslide__nav button.promoslide__prev {
  left: 0;
  background: rgba(0, 0, 0, 0.7) url(../images/icons/icon-chevron_left.svg);
  background-size: cover;
}
.promotion .promoinfo .promoslide__nav button.promoslide__next {
  right: 0;
  background: rgba(0, 0, 0, 0.7) url(../images/icons/icon-chevron_right.svg);
  background-size: cover;
}
.promotion .visitrecord {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin-top: 4rem;
}
.promotion .visitrecord__sector {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.promotion .visitrecord__box {
  position: relative;
}
.promotion .visitrecord__box .headline {
  max-width: 80rem;
  margin: 0 auto 1.6rem;
  font-weight: 800;
  font-size: var(--font_title1);
  line-height: var(--lineheight_title1);
  color: var(--white);
  text-align: center;
}
.promotion .visitrecord__box--blue {
  padding: 4.8rem 1.6rem 5.4rem;
}
.promotion .visitrecord__box--blue::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  z-index: 0;
  width: 100vw;
  min-width: 100vw;
  transform: translateX(-50%);
  background: radial-gradient(27.61% 33.45% at 49.32% 59.48%, #003766 0%, #001526 100%);
  z-index: -1;
}
.promotion .visitrecord__box--marquee {
  left: 50%;
  right: 50%;
  width: calc(100vh + 3.2rem);
  min-width: 100vw;
  transform: translateX(-50%);
}
.promotion .visitrecord__box--marquee .marquee-swiper {
  width: 100vw;
  margin-bottom: 4rem;
}
.promotion .visitrecord__box--marquee .marquee-swiper .swiper-wrapper {
  transition-timing-function: linear !important; /* 끊김 없이 */
}
.promotion .visitrecord__box--marquee .marquee-swiper .swiper-wrapper .swiper-slide {
  width: auto; /* 이미지 원본 비율 유지 */
}
.promotion .visitrecord__box--marquee .marquee-swiper .swiper-wrapper .swiper-slide img {
  display: block;
  object-fit: cover;
  aspect-ratio: 32/23;
  max-height: 6.9rem;
}
@media (min-width: 768px) {
  .promotion .visitrecord__box--marquee .marquee-swiper .swiper-wrapper .swiper-slide img {
    max-height: 20rem;
  }
}
.promotion .visitrecord__stats {
  display: flex;
  gap: 1.6rem;
  justify-content: center;
  align-items: center;
  max-width: 80rem;
  margin: 0 auto;
}
.promotion .visitrecord__stats > div {
  text-align: center;
}
.promotion .visitrecord__stats > div p {
  margin-top: 0.4rem;
  font-size: var(--font_caption);
  line-height: var(--lineheight_caption);
  color: var(--white);
}
.promotion .visitrecord__stats > div span {
  font-weight: 800;
  font-size: var(--font_title1);
  line-height: var(--lineheight_title1);
  background: var(--gradient-, linear-gradient(90deg, #44ccd8 0%, #4597de 50%, #477de2 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.promotion .visitrecord__stats .bar {
  flex: 0 1 auto;
  width: 0.1rem;
  height: 4rem;
  background-color: var(--divider_normal);
  opacity: 0.2;
}
.promotion .visitrecord__img {
  margin-top: 2.7rem;
  width: 100%;
  aspect-ratio: 343/150;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.promotion .visitrecord__img > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.promotion .reservation__step {
  padding: 0 1.6rem;
}
.promotion .reservation__step .step__text {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  text-align: center;
  margin-bottom: 2.4rem;
}
.promotion .reservation__step .step__text .headline {
  font-weight: 800;
  font-size: var(--font_heading2);
  line-height: var(--lineheight_heading2);
  color: var(-text_title);
  word-break: keep-all;
}
.promotion .reservation__step .step__text .desc {
  font-weight: 400;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(-text_body1);
  word-break: keep-all;
}
.promotion .reservation__step .step__text .desc--sub {
  font-weight: 400;
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(-text_caption);
  word-break: keep-all;
}
.promotion .reservation__step .step__wrap {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.promotion .reservation__step .step__wrap .step__cont .step__badge {
  display: inline-block;
  margin-bottom: 1.6rem;
  padding: 0.4rem 0.8rem;
  border-radius: 99.9rem;
  border: 1px solid var(--primary_normal);
  font-weight: 700;
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(--primary_normal);
}
.promotion .reservation__step .step__wrap .step__cont .step__desc {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  font-weight: 400;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--text_body1);
  word-break: keep-all;
}
.promotion .reservation__step .step__wrap .step__cont .step__desc > strong {
  font-weight: 700;
  font-size: var(--font_title2);
  line-height: var(--lineheight_title2);
}
.promotion .reservation__step .step__wrap .step__cont .step__desc > sub {
  font-weight: 400;
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(--text_caption);
}
.promotion .reservation__step .step__wrap .step__cont .step__desc br {
  display: none;
}
.promotion .reservation__step .step__wrap .step__cont .step__btn {
  display: flex;
  gap: 0.8rem;
  margin-top: 0.8rem;
}
.promotion .reservation__step .step__wrap .step__cont .step__btn > button {
  display: inline-block;
  position: relative;
  padding: 0.85rem 3.6rem 0.85rem 1.6rem;
  border-radius: 99.9rem;
  border: 1px solid var(--outline_heavy);
  font-weight: 700;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_body1);
}
.promotion .reservation__step .step__wrap .step__cont .step__btn > button > img {
  display: none;
}
.promotion .reservation__step .step__wrap .step__cont .step__btn > button::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 1.6rem;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  background: url(../images/icons/icon-chevron_right_gray.svg) center no-repeat;
}
.promotion .reservation__step .step__wrap .step__cont > img {
  display: flex;
  overflow: hidden;
  text-align: center;
  margin: 1.6rem auto 0;
  width: 100%;
  height: auto;
  aspect-ratio: 343/201;
  border-radius: 0.8rem;
  background-color: #ededed;
}
.promotion .reservation__step .step__condition {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-top: 4rem;
  margin-bottom: 4rem;
  padding: 1.6rem 2rem 2rem;
  border-radius: 1.6rem;
  background-color: var(--container_gray-light);
}
.promotion .reservation__step .step__condition--head {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.promotion .reservation__step .step__condition--head .headline {
  font-weight: 700;
  font-size: var(--font_title3);
  line-height: var(--lineheight_title3);
  color: var(--text_title);
}
.promotion .reservation__step .step__condition--head .desc {
  font-size: var(--font_body3);
  line-height: var(--lineheight_body1);
  color: var(--text_body1);
}
.promotion .reservation__step .step__condition--body .dotted {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.promotion .reservation__step .step__condition--body .dotted > p {
  position: relative;
  padding-left: 2rem;
  font-weight: 400;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_body1);
  word-break: keep-all;
}
.promotion .reservation__step .step__condition--body .dotted > p::before {
  content: "";
  position: absolute;
  top: 0.8rem;
  left: 0.6rem;
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  line-height: var(--lineheight_caption);
  border-radius: 50%;
  background-color: var(--primary_normal);
}

.autodriving {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.autodriving-intro {
  padding: 0 1.6rem;
}
.autodriving-intro .video-hero {
  aspect-ratio: 49/31;
  margin-bottom: 1.6rem;
}
.autodriving-intro .video-hero__thumb {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
.autodriving-intro .video-hero__thumb:hover .video-hero__play, .autodriving-intro .video-hero__thumb:focus-visible .video-hero__play {
  background-color: rgba(0, 0, 0, 0.8);
}
.autodriving-intro .video-hero__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.autodriving-intro .video-hero__thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.35));
}
.autodriving-intro .video-hero__thumb .video-hero__play {
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
}
.autodriving-intro .video-hero__thumb .video-hero__play::before {
  content: "";
  display: block;
  margin-left: 0.3rem;
  border-style: solid;
  border-width: 0.8rem 0 0.8rem 1.4rem;
  border-color: transparent transparent transparent #ffffff;
}
.autodriving-intro .video-hero__video-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}
.autodriving-intro .video-hero__video-wrap .video-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
.autodriving-intro .video-hero .video-hero__thumb[hidden],
.autodriving-intro .video-hero .video-hero__video-wrap[hidden] {
  display: none !important;
}
.autodriving-intro .intro__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.6rem;
}
.autodriving-intro .intro__text .headline {
  font-weight: 800;
  font-size: var(--font_heading2);
  line-height: var(--lineheight_heading2);
  color: var(-text_title);
  word-break: keep-all;
}
.autodriving-intro .intro__text .desc {
  font-weight: 400;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(-text_body1);
  word-break: keep-all;
  text-align: center;
}
.autodriving-intro .intro__text .desc--sub {
  font-weight: 400;
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(-text_caption);
  word-break: keep-all;
}
.autodriving-intro .intro__text .btns {
  margin-top: 0.8rem;
}
.autodriving .businfo__sector {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.autodriving .businfo__box {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.autodriving .businfo__box .headline {
  text-align: center;
  font-weight: 800;
  font-size: var(--font_title1);
  line-height: var(--lineheight_title1);
  color: var(--text_title);
}
.autodriving .businfo__box .dotted {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.autodriving .businfo__box .dotted > p {
  position: relative;
  padding-left: 2rem;
  font-weight: 400;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--text_body1);
  word-break: keep-all;
}
.autodriving .businfo__box .dotted > p strong {
  display: block;
  width: 100%;
}
.autodriving .businfo__box .dotted > p::before {
  content: "";
  position: absolute;
  top: 0.8rem;
  left: 0.6rem;
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  line-height: var(--lineheight_caption);
  border-radius: 50%;
  background-color: var(--primary_normal);
}
.autodriving .businfo__text {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.autodriving .businfo__img {
  width: 100%;
  aspect-ratio: 34.3/26;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.autodriving .businfo__img > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.autodriving .businfo__list {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding: 1.6rem 1.6rem 2.4rem;
  border-radius: 1.6rem;
  background-color: vaR(--container_gray-light);
}
.autodriving .businfo__list > ul {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.autodriving .businfo__list > ul > li {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.autodriving .businfo__list > ul > li .title {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 0.4rem 0;
  font-weight: 700;
  font-size: var(--font_title3);
  line-height: normal;
  color: var(--text_title);
}
.autodriving .businfo__list > ul > li .title br {
  display: none;
}
.autodriving .businfo__list > ul > li .title > i {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
}
.autodriving .businfo__list > ul > li .title > i.ico-1 {
  background: url(../images/bus/icon-bus-info1.svg) center no-repeat;
}
.autodriving .businfo__list > ul > li .title > i.ico-2 {
  background: url(../images/bus/icon-bus-info2.svg) center no-repeat;
}
.autodriving .businfo__list > ul > li .title > i.ico-3 {
  background: url(../images/bus/icon-bus-info3.svg) center no-repeat;
}
.autodriving .businfo__list > ul > li .title > i.ico-4 {
  background: url(../images/bus/icon-bus-info4.svg) center no-repeat;
}
.autodriving .businfo__list > ul > li .title > i.ico-5 {
  background: url(../images/bus/icon-bus-info5.svg) center no-repeat;
}
.autodriving .businfo__list > ul > li .title > i.ico-6 {
  background: url(../images/bus/icon-bus-info6.svg) center no-repeat;
}
.autodriving .businfo__list > ul > li .dotted > li {
  position: relative;
  padding-left: 2rem;
  font-weight: 400;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--text_body1);
}
.autodriving .businfo__list > ul > li .dotted > li + li {
  margin-top: 0.4rem;
}
.autodriving .businfo__list > ul > li .dotted > li::before {
  content: "";
  position: absolute;
  top: 0.8rem;
  left: 0.6rem;
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  line-height: var(--lineheight_caption);
  border-radius: 50%;
  background-color: var(--primary_normal);
}
.autodriving .businfo .promoslide {
  margin-bottom: 1.6rem;
}
.autodriving .businfo .promoslide__main {
  position: relative;
  margin-bottom: 0.8rem;
}
.autodriving .businfo .promoslide__main .slide-inner {
  position: relative;
}
.autodriving .businfo .promoslide__main .slide-inner .img-wrapper {
  width: 100%;
  aspect-ratio: 343/193;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.autodriving .businfo .promoslide__main .slide-inner .img-wrapper > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.autodriving .businfo .promoslide__main .slide-inner .img-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  top: auto;
  height: 8rem;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
}
.autodriving .businfo .promoslide__main .slide-inner .slide-info {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  position: absolute;
  inset: 1.6rem;
  top: auto;
  z-index: 10;
  color: var(--white);
}
.autodriving .businfo .promoslide__main .slide-inner .slide-info .title {
  font-weight: 800;
  font-size: var(--font_title3);
  line-height: normal;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0px 2px rgba(0, 0, 0, 0.2), 0 0 0.15em #000;
}
.autodriving .businfo .promoslide__main .slide-inner .slide-info .desc {
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
}
.autodriving .businfo .promoslide__main .slide-inner .slide-info .desc br {
  display: none;
}
.autodriving .businfo .promoslide__thumb .swiper-slide-thumb-active .img-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--outline_heavy);
}
.autodriving .businfo .promoslide__thumb .img-wrapper {
  width: 100%;
  aspect-ratio: 343/193;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.autodriving .businfo .promoslide__thumb .img-wrapper > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.autodriving .businfo .promoslide__nav button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: none;
  border: none;
  inline-size: 2.8rem;
  block-size: 2.8rem;
  font-size: 0;
  cursor: pointer;
}
.autodriving .businfo .promoslide__nav button:hover {
  border-radius: 0.4rem;
  outline: 1px solid var(--white);
}
.autodriving .businfo .promoslide__nav button.promoslide__prev {
  left: 0;
  background: rgba(0, 0, 0, 0.7) url(../images/icons/icon-chevron_left.svg);
  background-size: cover;
}
.autodriving .businfo .promoslide__nav button.promoslide__next {
  right: 0;
  background: rgba(0, 0, 0, 0.7) url(../images/icons/icon-chevron_right.svg);
  background-size: cover;
}
.autodriving .busroute__sector {
  display: flex;
  flex-direction: column;
  gap: 6.4rem;
}
.autodriving .busroute__box {
  position: relative;
}
.autodriving .busroute__box .headline {
  position: relative;
  max-width: 100%;
  padding-left: 1.2rem;
  font-weight: 700;
  font-size: var(--font_title2);
  color: var(--text_title);
}
.autodriving .busroute__box .headline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.4rem;
  height: 2.2rem;
  background-color: var(--primary_light);
}
.autodriving .busroute__box .busroute__img {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 1.6rem;
  padding: 0 3rem;
  border: 1px solid var(--outline_normal);
}
.autodriving .busroute__box .busroute__img > img {
  width: 100%;
  height: 100%;
  aspect-ratio: 142/81;
  object-fit: contain;
  object-position: center;
  display: block;
}
.autodriving .howtouse__step {
  padding: 0 1.6rem;
}
.autodriving .howtouse__step .step__text {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  text-align: center;
  margin-bottom: 2.4rem;
}
.autodriving .howtouse__step .step__text .headline {
  font-weight: 800;
  font-size: var(--font_heading2);
  line-height: var(--lineheight_heading2);
  color: var(-text_title);
  word-break: keep-all;
}
.autodriving .howtouse__step .step__text .desc {
  font-weight: 400;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(-text_body1);
  word-break: keep-all;
}
.autodriving .howtouse__step .step__text .desc--sub {
  font-weight: 400;
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(-text_caption);
  word-break: keep-all;
}
.autodriving .howtouse__step .step__wrap {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.autodriving .howtouse__step .step__wrap .step__cont .step__badge {
  display: inline-block;
  margin-bottom: 1.6rem;
  padding: 0.4rem 0.8rem;
  border-radius: 99.9rem;
  border: 1px solid var(--primary_normal);
  font-weight: 700;
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(--primary_normal);
}
.autodriving .howtouse__step .step__wrap .step__cont .step__desc {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  font-weight: 400;
  font-size: var(--font_body1);
  line-height: var(--lineheight_body1);
  color: var(--text_body1);
  word-break: keep-all;
}
.autodriving .howtouse__step .step__wrap .step__cont .step__desc > strong {
  font-weight: 700;
  font-size: var(--font_title2);
  line-height: var(--lineheight_title2);
}
.autodriving .howtouse__step .step__wrap .step__cont .step__desc > sub {
  font-weight: 400;
  font-size: var(--font_body3);
  line-height: var(--lineheight_body3);
  color: var(--text_caption);
}
.autodriving .howtouse__step .step__wrap .step__cont .step__desc br {
  display: none;
}
.autodriving .howtouse__step .step__wrap .step__cont .step__btn {
  display: flex;
  gap: 0.8rem;
  margin-top: 0.8rem;
}
.autodriving .howtouse__step .step__wrap .step__cont .step__btn > button {
  display: inline-block;
  position: relative;
  padding: 0.85rem 3.6rem 0.85rem 1.6rem;
  border-radius: 99.9rem;
  border: 1px solid var(--outline_heavy);
  font-weight: 700;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_body1);
}
.autodriving .howtouse__step .step__wrap .step__cont .step__btn > button > img {
  display: none;
}
.autodriving .howtouse__step .step__wrap .step__cont .step__btn > button::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 1.6rem;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  background: url(../images/icons/icon-chevron_right_gray.svg) center no-repeat;
}
.autodriving .howtouse__step .step__wrap .step__cont > img {
  display: block;
  margin: 1.6rem auto 0;
  width: 100%;
  max-width: 24rem;
  height: auto;
}
.autodriving .howtouse__step .step__condition {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-top: 4rem;
  margin-bottom: 4rem;
  padding: 1.6rem 2rem 2rem;
  border-radius: 1.6rem;
  background-color: var(--container_gray-light);
}
.autodriving .howtouse__step .step__condition--head {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.autodriving .howtouse__step .step__condition--head .headline {
  font-weight: 700;
  font-size: var(--font_title3);
  line-height: var(--lineheight_title3);
  color: var(--text_title);
}
.autodriving .howtouse__step .step__condition--head .desc {
  font-size: var(--font_body3);
  line-height: var(--lineheight_body1);
  color: var(--text_body1);
}
.autodriving .howtouse__step .step__condition--body .dotted {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.autodriving .howtouse__step .step__condition--body .dotted > p {
  position: relative;
  padding-left: 2rem;
  font-weight: 400;
  font-size: var(--font_body2);
  line-height: var(--lineheight_body2);
  color: var(--text_body1);
  word-break: keep-all;
}
.autodriving .howtouse__step .step__condition--body .dotted > p strong {
  display: block;
  width: 100%;
}
.autodriving .howtouse__step .step__condition--body .dotted > p::before {
  content: "";
  position: absolute;
  top: 0.8rem;
  left: 0.6rem;
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  line-height: var(--lineheight_caption);
  border-radius: 50%;
  background-color: var(--primary_normal);
}

@media (min-width: 768px) {
  .header {
    /* 로고 */
  }
  .header__inner {
    padding: 2.4rem 4rem;
  }
  .header__logo a > img {
    height: 3.2rem;
  }
  .header__nav ul li a::after {
    content: "";
    inline-size: 4rem;
    block-size: 4rem;
  }
  .header__nav .nav__submenu li a.external::after {
    content: "";
    inline-size: 2.4rem;
    block-size: 2.4rem;
  }
  .header ul li a {
    padding: 3.15rem 0;
  }
  .header .nav__util {
    margin-top: 2.2rem;
  }
  .header__nav.nav--mobile.active {
    padding: 0 4rem;
  }
  .header .nav-toggle {
    inline-size: 4.8rem;
    block-size: 4.8rem;
    padding: 0.4rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header .nav-toggle > span {
    position: absolute;
    left: 0.8rem;
    right: 0.8rem;
    height: 0.4rem;
    background: var(--gray_50);
    border-radius: 0.2rem;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .header .nav-toggle > span:nth-child(1) {
    top: 1.2rem;
  }
  .header .nav-toggle > span:nth-child(2) {
    top: 2.2rem;
  }
  .header .nav-toggle > span:nth-child(3) {
    top: 3.2rem;
  }
  .header .nav-toggle[aria-expanded=true] > span:nth-child(1) {
    top: 2.2rem;
    transform: rotate(45deg);
  }
  .header .nav-toggle[aria-expanded=true] > span:nth-child(2) {
    opacity: 0;
  }
  .header .nav-toggle[aria-expanded=true] > span:nth-child(3) {
    top: 2.2rem;
    transform: rotate(-45deg);
  }
}
@media (min-width: 1280px) {
  .header__inner {
    height: 8rem;
    padding: 0 4rem;
  }
  .header .nav-toggle {
    display: none;
  }
  .header__nav.nav--mobile {
    display: none; /* PC에서는 모바일 패널 제거 */
  }
  .header__nav.nav--pc {
    height: 100%;
    position: static; /* 상단 바 내부 배치 */
    z-index: 1000;
    display: flex;
    background: transparent;
    inset: auto;
    transform: none;
    pointer-events: auto;
  }
  .header__nav.nav--pc ul {
    flex-direction: row;
    height: auto;
    gap: 1.6rem;
  }
  .header__nav.nav--pc ul li {
    position: relative;
    flex-wrap: nowrap;
    border-bottom: 0;
    /* 드롭다운 (2depth) */
  }
  .header__nav.nav--pc ul li a {
    flex-shrink: 0;
    padding: 0 1.6rem;
    text-align: center;
    word-break: keep-all;
    font-size: var(--font_body1);
    line-height: var(--lineheight_body1);
  }
  .header__nav.nav--pc ul li a::after {
    display: none;
  }
  .header__nav.nav--pc ul li.nav__item > a::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    border-bottom: 2px solid var(--primary_normal, #005eae);
    transition: all 0.2s ease-in-out;
  }
  .header__nav.nav--pc ul li.nav__item > a:hover::before {
    left: 0;
    width: 100%;
  }
  .header__nav.nav--pc ul li.nav__item > a.is-hover::before {
    left: 0;
    width: 100%;
  }
  .header__nav.nav--pc ul li .nav__submenu {
    display: none;
    position: absolute;
    z-index: 2;
    top: 10.24rem;
    left: 50%;
    transform: translateX(-50%);
    min-inline-size: 20rem;
  }
  .header__nav.nav--pc ul li .nav__submenu li a {
    display: block;
    padding: 0.8rem 1.6rem;
    font-size: var(--font_body2);
    line-height: var(--lineheight_body2);
  }
  .header__nav.nav--pc ul li .nav__submenu li a:hover {
    color: var(--primary);
  }
  .header__nav.nav--pc:hover::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 0;
    right: 0;
    height: 20.8rem;
    width: 100%;
    border-top: 1px solid var(--outline_normal);
    background-color: var(--white);
    box-shadow: 0 10px 12px 0 rgba(9, 30, 66, 0.12);
  }
  .header__nav.nav--pc:hover ul li .nav__submenu {
    display: block;
  }
  .header .nav__util.nav--pc {
    display: flex;
    margin-top: 0;
  }
  .header .nav__util.nav--pc li a {
    padding: 0;
    font-size: var(--font_caption);
    line-height: var(--lineheight_caption);
  }
}
@media (min-width: 1920px) {
  .header__nav.nav--pc ul {
    gap: 1.6rem;
  }
  .header__nav.nav--pc ul li a {
    padding: 0 1.6rem;
    font-size: var(--font_body1);
    line-height: var(--lineheight_body1);
  }
}
@media (min-width: 768px) {
  .hero__controls {
    inset-inline-start: 4rem;
    inset-block-start: 20.4rem;
  }
  .hero__slider .swiper-slide {
    block-size: 60rem;
  }
  .main-contents {
    gap: 8rem;
    padding: 6.4rem 0 4.8rem;
  }
  .stats {
    padding: 0 4rem;
  }
  .stats .inner {
    gap: 2.4rem;
  }
  .stats__info .detail {
    flex-wrap: nowrap;
    gap: 1.6rem 0.8rem;
  }
  .news__tabs {
    gap: 2.4rem;
    margin-bottom: 2.4rem;
    padding: 0 4rem;
  }
  .news__tabs li.active a::after {
    right: -0.8rem;
    width: 0.6rem;
    height: 0.6rem;
  }
  .news .news__slider {
    padding: 0 4rem 3.2rem;
  }
  .news .news__slider .swiper-slide {
    display: flex;
    flex: 0 0 30.8rem;
    max-width: 30.8rem;
  }
  .news .news__slider .news__item {
    flex: 0 0 30.8rem;
    inline-size: 30.8rem;
    padding: 2.4rem;
  }
  .news .news__slider .news__item > div {
    gap: 1.6rem;
  }
  .news .news__slider .news__item > div .tx-badge {
    padding: 0.4rem 0.6rem;
    font-size: var(--font_caption);
    line-height: var(--lineheight_caption);
  }
  .news .news__slider .news__item:hover {
    border-color: var(--primary_normal);
    background-color: var(--primary_normal);
  }
  .news .news__slider .news__item:hover > div .tx-badge {
    color: var(--primary_normal);
    background-color: var(--white);
  }
  .news .news__slider .news__item:hover > div .tx-summary {
    color: var(--white);
  }
  .news .news__slider .news__item:hover .tx-date {
    color: var(--white);
  }
  .news .news__slider .swiper-pagination-bullet {
    margin: 0 0.8rem !important;
  }
  .reserved {
    padding: 0 4rem;
  }
  .reserved__tit {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .reserved__tit h3 br {
    display: none;
  }
  .reserved__tit .tx-date {
    line-height: var(--lineheight_caption);
    color: var(--gray_40);
  }
  .reserved__grid {
    flex-direction: row;
    gap: 1rem;
  }
  .reserved__grid .reserved__item {
    overflow: hidden;
    height: 44rem;
    border-radius: 1.6rem;
    transition: all 0.3s ease-in-out;
  }
  .reserved__grid .reserved__item::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 1.6rem;
    background-color: rgba(0, 0, 0, 0.36);
  }
  .reserved__grid .reserved__item--1 {
    background: url(../images/home/reserved-img1.png) no-repeat center/cover;
  }
  .reserved__grid .reserved__item--2 {
    background: url(../images/home/reserved-img2.png) no-repeat center/cover;
  }
  .reserved__grid .reserved__item .reserved__link::before {
    width: 16rem;
    height: 16rem;
  }
  .reserved__grid .reserved__item:hover {
    transition: all 0.3s ease-in-out;
    width: 490%;
  }
  .reserved__grid .reserved__item:hover::after {
    display: none;
  }
  .reserved__grid .reserved__item:hover .reserved__link::before {
    border-color: var(--primary_normal);
    background-color: var(--primary_normal);
    opacity: 0.9;
  }
  .community {
    padding-top: 8rem;
    padding-bottom: 9.6rem;
  }
  .community .inner {
    display: flex;
    overflow: hidden;
    gap: 2rem;
  }
  .community__tit {
    flex-shrink: 0;
    flex-basis: 30rem;
    padding: 0 0 0 4rem;
    word-break: keep-all;
  }
  .community__tit .tx-menu {
    margin-bottom: 0.8rem;
  }
  .community__tit h3 {
    margin-bottom: 1.6rem;
  }
  .community__list {
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
    width: calc(100% - 32.4rem);
  }
  .community__slider {
    overflow: visible;
    padding: 0 1.6rem 3.2rem 0 !important;
  }
  .community__slider .swiper-slide {
    display: flex;
    flex: 0 0 calc((100% - 32px) / 3);
    max-width: calc((100% - 32px) / 3);
  }
  .community__slider .community__item {
    flex: 0 0 100%;
    inline-size: 100%;
  }
  .community__slider .community__item > p {
    font-size: var(--font_body2);
    line-height: var(--lineheight_body2);
  }
  .community__slider .community__nav {
    display: none;
  }
  .bigdata {
    padding: 0 4rem;
  }
  .bigdata .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2.4rem;
    padding: 4rem;
  }
  .bigdata__top {
    max-width: 53.4rem;
  }
  .bigdata__tit {
    padding: 0;
    margin-bottom: 2.4rem;
  }
  .bigdata__list {
    gap: 0.8rem;
    margin-bottom: 3.2rem;
  }
  .bigdata__list > p {
    padding: 1.2rem 1.6rem;
  }
  .bigdata__link {
    width: 100%;
  }
  .bigdata__link > a {
    left: 0;
    transform: translateX(0);
    padding: 1.2rem 1.6rem;
  }
  .external {
    padding: 0 4rem;
  }
  .external__list {
    gap: 2.4rem;
  }
  .external__btn {
    flex: 1 1 calc(20% - 2.4rem);
    max-width: calc(20% - 2.4rem);
    height: 6.7rem;
  }
  .external__btn--1 {
    background: url(../images/externals/logo-1.png) no-repeat center;
    background-size: auto 4.25rem;
  }
  .external__btn--2 {
    background: url(../images/externals/logo-2.png) no-repeat center;
    background-size: auto 4.25rem;
  }
  .external__btn--3 {
    background: url(../images/externals/logo-3.png) no-repeat center;
    background-size: auto 4.25rem;
  }
  .external__btn--4 {
    background: url(../images/externals/logo-4.png) no-repeat center;
    background-size: auto 4.25rem;
  }
  .external__btn--5 {
    background: url(../images/externals/logo-5.png) no-repeat center;
    background-size: auto 4.25rem;
  }
}
@media (min-width: 1280px) {
  .hero {
    padding: 0;
  }
  .hero__controls {
    width: 1280px;
    transform: translateX(calc(-50% + 1.6rem));
    inset-inline-start: 50%;
    inset-inline-end: initial;
  }
  .quicks__btn {
    flex-direction: row;
    gap: 1.6rem;
    padding: 2.8rem 0;
  }
  .quicks__btn .icon {
    inline-size: 4rem;
    block-size: 4rem;
  }
  .quicks__btn p {
    display: flex;
    flex-direction: column;
    text-align: left;
  }
  .quicks__btn p > sub {
    display: block;
    font-size: var(--font_caption);
    line-height: var(--lineheight_caption);
  }
  .stats {
    padding: 0 4rem;
  }
  .stats .inner {
    flex-direction: row;
    gap: 4rem;
    align-items: center;
  }
  .stats__tit {
    flex: 1 0 60%;
    min-width: 0;
    max-width: 90.3rem;
  }
  .stats .bar {
    display: block;
    flex: 0 1 auto;
    width: 1px;
    height: 8rem;
    background-color: var(--divider_light);
  }
  .stats__info {
    flex: 0 1 auto;
    min-width: 29.6rem;
    max-width: 32rem;
    height: 100%;
  }
  .stats__info .detail {
    flex-wrap: wrap;
  }
  .stats__info .detail > div {
    gap: 0.8rem 1.2rem;
  }
  .news__more {
    display: block;
  }
  .news__tabs {
    display: flex;
    gap: 1.6rem;
    margin-bottom: 1.6rem;
    padding: 0;
  }
  .news .news__slider {
    margin: 0;
    padding: 0 0 3.2rem;
  }
  .news .news__slider .swiper-wrapper {
    width: 100%;
    padding: 0;
  }
  .news .news__slider .news__nav {
    display: block;
    opacity: 1;
    transition: all 0.15s ease-in-out;
  }
  .news .news__slider .news__nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    inline-size: 4rem;
    block-size: 4rem;
    font-size: 0;
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 4px 0 rgba(9, 30, 66, 0.08);
  }
  .news .news__slider .news__nav button:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }
  .news .news__slider .news__nav button.news__prev {
    left: 0;
    border-left: 0;
  }
  .news .news__slider .news__nav button.news__prev::after {
    content: "";
    width: 2rem;
    height: 2rem;
    background: url(../images/icons/icon-chevron_left.svg) no-repeat center;
  }
  .news .news__slider .news__nav button.news__next {
    right: 0;
    border-right: 0;
  }
  .news .news__slider .news__nav button.news__next::after {
    content: "";
    width: 2rem;
    height: 2rem;
    background: url(../images/icons/icon-chevron_right.svg) no-repeat center;
  }
  .community .inner {
    display: flex;
    overflow: visible;
    gap: 2rem;
  }
  .community__tit {
    flex-shrink: 0;
    flex-basis: 30rem;
    padding: 0;
    word-break: keep-all;
  }
  .community__tit .tx-menu {
    margin-bottom: 0.8rem;
  }
  .community__tit h3 {
    margin-bottom: 1.6rem;
  }
  .community__slider {
    padding: 0 0 3.2rem !important;
  }
  .community__slider .community__item > p {
    font-size: var(--font_body2);
    line-height: var(--lineheight_body2);
  }
  .community__slider .community__nav {
    display: block;
    opacity: 1;
  }
  .community__slider .community__nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 6.7rem;
    z-index: 100;
    inline-size: 4rem;
    block-size: 4rem;
    font-size: 0;
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 4px 0 rgba(9, 30, 66, 0.08);
  }
  .community__slider .community__nav button:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }
  .community__slider .community__nav button.community__prev {
    left: 0;
    border-left: 0;
  }
  .community__slider .community__nav button.community__prev::after {
    content: "";
    width: 2rem;
    height: 2rem;
    background: url(../images/icons/icon-chevron_left.svg) no-repeat center;
  }
  .community__slider .community__nav button.community__next {
    right: 0;
    border-right: 0;
  }
  .community__slider .community__nav button.community__next::after {
    content: "";
    width: 2rem;
    height: 2rem;
    background: url(../images/icons/icon-chevron_right.svg) no-repeat center;
  }
  .swiper-button-disabled {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .center-intro {
    flex-direction: row;
    gap: 4rem;
    padding: 0 4rem 8rem;
  }
  .center-intro .intro__text .headline {
    margin-top: 4rem;
    margin-bottom: 3.2rem;
  }
  .center-intro .intro-image img {
    overflow: hidden;
    border-radius: 1.6rem;
  }
  .center-system {
    gap: 4.8rem;
    position: relative;
  }
  .center-system::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 50%;
    z-index: 0;
    width: 100vw;
    min-width: 100vw;
    transform: translateX(-50%);
    background-color: var(--surface_low);
    z-index: -1;
  }
  .system__content {
    gap: 4.8rem;
    padding: 4rem;
  }
  .system__content--title {
    text-align: center;
  }
  .system__content--sector .system__content--box .system__list {
    gap: 2.4rem 1.6rem;
  }
  .system__content--sector .system__content--box .system__list > li {
    flex: 0 0 calc(33.33333% - 1.2rem);
  }
  .system__content--sector .system__content--box .system__list > li > img {
    margin-bottom: 0.8rem;
  }
  .system__content--sector .system__content--box .system__list > li p {
    min-height: 4rem;
    height: auto;
    padding: 0;
  }
  .system__content--sector .system__content--box .system__list > li p br {
    display: none;
  }
  .tabs__content.statistics .statistics--sector {
    gap: 6.4rem;
  }
  .center-location {
    gap: 4rem;
  }
  .center-location .map-wrap {
    aspect-ratio: 12.8/4.8;
  }
  .center-location .directions {
    gap: 4.8rem;
  }
  .center-location .directions__title {
    margin-bottom: 1.6rem;
  }
  .center-location .directions__badge {
    padding: 0.4rem 0.8rem;
  }
  .center-location .directions__info li:not(:last-child), .center-location .directions__list li:not(:last-child) {
    margin-bottom: 0.4rem;
  }
  .center-service {
    padding: 0 0 4rem;
  }
  .center-service .service {
    gap: 8rem;
  }
  .center-service .service__item {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
  }
  .center-service .service__img {
    width: 100%;
    aspect-ratio: 88/60.4;
  }
  .center-service .service__content {
    flex: 1;
  }
  .center-service .service__title {
    margin-bottom: 2.4rem;
  }
}
@media (min-width: 1280px) {
  .center-intro {
    padding: 0 0 8rem;
  }
  .center-intro .intro-image {
    flex-basis: 1 0 52.4rem;
    max-width: 52.4rem;
  }
  .tabs__content.record .record__year {
    flex-direction: row;
    margin-bottom: 12rem;
  }
  .tabs__content.record .record__year h3 {
    flex: 0 0 20rem;
  }
  .tabs__content.record .record__year .record__list > li .record__text::before {
    top: 1.2rem;
  }
  .tabs__content.record .record__year .record__list > li .record__crape {
    margin-top: 2.4rem;
  }
  .tabs__content.record .record__year .record__list > li .record__crape .record__card {
    width: 22rem;
    gap: 1.6rem;
  }
  .tabs__content.record .record__year .record__list > li .record__crape .record__card .img-wrap {
    width: 22rem;
    height: auto;
    aspect-ratio: 22/31.2;
  }
  .center-location .directions__icon {
    width: 8rem;
    height: 8rem;
  }
  .center-location .directions__icon img {
    width: 3.6rem;
    height: 3.6rem;
  }
  .center-service {
    padding: 0 0 4rem;
  }
  .center-service .service {
    gap: 8rem;
  }
  .center-service .service__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12.4rem;
  }
  .center-service .service__img {
    width: 100%;
    max-width: 52.4rem;
    aspect-ratio: 52.4/36;
  }
  .center-service .service__desc {
    margin-bottom: 4rem;
  }
}
@media (min-width: 768px) {
  .safety {
    gap: 8rem;
  }
  .safety-home-intro {
    gap: 4rem;
    padding: 0 4rem;
  }
  .safety-home-intro .intro__text {
    gap: 3.2rem;
  }
  .safety-home-info {
    position: relative;
    padding: 9.6rem 4rem;
  }
  .safety-home-info::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 50%;
    z-index: 0;
    width: 100vw;
    min-width: 100vw;
    transform: translateX(-50%);
    background-color: var(--container_primary-light);
    z-index: -1;
  }
  .safety-home-info .info__text {
    gap: 1.6rem;
    margin-bottom: 4.8rem;
  }
  .safety-home-info .info__icons {
    gap: 0;
    max-width: 56.2rem;
    margin: 0 auto;
  }
  .safety-home-step {
    padding: 0 4rem;
  }
  .safety-home-step .step__text {
    margin-bottom: 4rem;
  }
  .elderly {
    gap: 8rem;
  }
  .elderly-intro {
    gap: 4rem;
    padding: 0 4rem;
  }
  .elderly-intro .intro__text {
    gap: 3.2rem;
  }
  .elderly-info {
    position: relative;
    padding: 9.6rem 4rem;
  }
  .elderly-info::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 50%;
    z-index: 0;
    width: 100vw;
    min-width: 100vw;
    transform: translateX(-50%);
    background-color: var(--container_primary-light);
    z-index: -1;
  }
  .elderly-info .info__text {
    gap: 1.6rem;
    margin-bottom: 0;
  }
  .elderly-info .info__icons {
    gap: 0;
    max-width: 56.2rem;
    margin: 0 auto;
  }
  .elderly-info .info__imgs {
    justify-content: center;
    gap: 2.4rem 8rem;
    margin-top: 6.4rem;
  }
  .elderly-info .info__imgs .imgs__item {
    max-width: 20rem;
    gap: 2.4rem;
    padding: 0;
  }
  .elderly-step {
    padding: 0 4rem;
  }
  .elderly-step .step__text {
    margin-bottom: 4rem;
  }
  .elderly-step .step__condition {
    padding: 3.2rem 4rem 4rem;
  }
  .elderly-step .step__condition--body .dotted > p::before {
    top: 1rem;
  }
}
@media (min-width: 1280px) {
  .safety-home-intro {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3.2rem;
    padding: 0 4rem;
  }
  .safety-home-intro .intro__text .desc {
    max-width: 62.4rem;
  }
  .safety-home-intro .intro__text .desc--sub {
    max-width: 62.4rem;
  }
  .safety-home-intro .intro-image {
    flex: 0 0 52.4rem;
    max-width: 52.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  .safety-home-intro .intro-image > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
  }
  .safety-home-info .info__imgs {
    justify-content: center;
    gap: 2.4rem 8rem;
    margin-top: 6.4rem;
  }
  .safety-home-info .info__imgs .imgs__item {
    max-width: 20rem;
    gap: 2.4rem;
    padding: 0;
  }
  .safety-home-step {
    padding: 0;
  }
  .safety-home-step .step__text {
    margin-bottom: 4rem;
  }
  .safety-home-step .step__wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .safety-home-step .step__wrap .step__cont {
    display: flex;
    justify-content: space-between;
    gap: 2.8rem;
    padding-bottom: 4.8rem;
  }
  .safety-home-step .step__wrap .step__cont .step__badge {
    position: relative;
    z-index: 1;
    flex: 0 0 8.4rem;
    height: 3.6rem;
    margin-right: 2.8rem;
    padding: 0.7rem 0rem;
    border-radius: 99.9rem;
    text-align: center;
  }
  .safety-home-step .step__wrap .step__cont .step__badge::after {
    content: "";
    position: absolute;
    top: 1rem;
    right: -3.8rem;
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    border: 2px solid var(--primary_normal);
    background-color: var(--white);
  }
  .safety-home-step .step__wrap .step__cont .step__info {
    position: relative;
    z-index: 0;
    flex: 1 0 auto;
  }
  .safety-home-step .step__wrap .step__cont .step__info::before {
    content: "";
    position: absolute;
    display: block;
    top: 1rem;
    left: -2.8rem;
    width: 0.1rem;
    height: calc(100% + 5rem);
    background-color: var(--outline_normal);
  }
  .safety-home-step .step__wrap .step__cont .step__info .step__desc {
    display: flex;
    flex-direction: column;
    max-width: 56rem;
  }
  .safety-home-step .step__wrap .step__cont .step__info .step__btn {
    display: flex;
    gap: 1.6rem;
    margin-top: 2.4rem;
  }
  .safety-home-step .step__wrap .step__cont .step__info .step__btn > button {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    position: relative;
    padding: 0;
    border-radius: 0;
    border: 0;
    font-weight: 400;
    font-size: var(--font_caption);
    line-height: var(--lineheight_caption);
    color: var(--text_body2);
  }
  .safety-home-step .step__wrap .step__cont .step__info .step__btn > button > img {
    display: block;
    padding: 0.8rem;
    border: 1px solid var(--outline_normal);
  }
  .safety-home-step .step__wrap .step__cont .step__info .step__btn > button::after {
    display: none;
  }
  .safety-home-step .step__wrap .step__cont > img {
    flex: 0 0 20rem;
    display: block;
    margin: 1.6rem auto 0;
    width: 100%;
    max-width: 20rem;
    height: auto;
  }
  .safety-home-step .step__wrap .step__cont:last-child .step__info::before {
    display: none;
  }
  .elderly-intro {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3.2rem;
    padding: 0 4rem;
  }
  .elderly-intro .intro__text .desc {
    max-width: 62.4rem;
  }
  .elderly-intro .intro__text .desc--sub {
    max-width: 62.4rem;
  }
  .elderly-intro .intro-image {
    flex: 0 0 52.4rem;
    max-width: 52.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  .elderly-intro .intro-image > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
  }
  .elderly-step {
    padding: 0;
  }
  .elderly-step .step__text {
    margin-bottom: 4rem;
  }
  .elderly-step .step__wrap {
    gap: 0;
  }
  .elderly-step .step__wrap .step__cont {
    display: flex;
    justify-content: space-between;
    gap: 2.8rem;
    padding-bottom: 4.8rem;
  }
  .elderly-step .step__wrap .step__cont .step__badge {
    position: relative;
    z-index: 1;
    flex: 0 0 8.4rem;
    height: 3.6rem;
    margin-right: 2.8rem;
    padding: 0.7rem 0rem;
    text-align: center;
  }
  .elderly-step .step__wrap .step__cont .step__badge::after {
    content: "";
    position: absolute;
    top: 1rem;
    right: -3.8rem;
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    border: 2px solid var(--primary_normal);
    background-color: var(--white);
  }
  .elderly-step .step__wrap .step__cont .step__info {
    position: relative;
    z-index: 0;
    flex: 1 0 auto;
  }
  .elderly-step .step__wrap .step__cont .step__info::before {
    content: "";
    position: absolute;
    display: block;
    top: 1rem;
    left: -2.8rem;
    width: 0.1rem;
    height: calc(100% + 5rem);
    background-color: var(--outline_normal);
  }
  .elderly-step .step__wrap .step__cont .step__info .step__desc {
    max-width: 56rem;
  }
  .elderly-step .step__wrap .step__cont .step__info .terminal-list {
    margin-top: 2.4rem;
  }
  .elderly-step .step__wrap .step__cont .step__info .terminal-list > div {
    flex: 0 0 20rem;
    max-width: 20rem;
  }
  .elderly-step .step__wrap .step__cont .step__info .step__btn {
    gap: 1.6rem;
    margin-top: 2.4rem;
  }
  .elderly-step .step__wrap .step__cont .step__info .step__btn > button {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    position: relative;
    padding: 0;
    border-radius: 0;
    border: 0;
    font-weight: 400;
    font-size: var(--font_caption);
    line-height: var(--lineheight_caption);
    color: var(--text_body2);
  }
  .elderly-step .step__wrap .step__cont .step__info .step__btn > button > img {
    display: block;
    padding: 0.8rem;
    border: 1px solid var(--outline_normal);
  }
  .elderly-step .step__wrap .step__cont .step__info .step__btn > button::after {
    display: none;
  }
  .elderly-step .step__wrap .step__cont > img {
    flex: 0 0 41.6rem;
    display: block;
    margin: 1.6rem auto 0;
    width: 100%;
    max-width: 41.6rem;
    height: auto;
    max-height: 26rem;
  }
  .elderly-step .step__wrap .step__cont:last-child .step__info::before {
    display: none;
  }
}
@media (min-width: 768px) {
  .citymap .map-container {
    min-height: 45rem;
    max-height: 70rem;
    aspect-ratio: 128/70;
  }
  .citymap .map-container .map__btn--left {
    top: 1.6rem;
    left: auto;
    right: 1.6rem;
    display: flex;
    flex-direction: row;
    gap: 0.8rem;
  }
  .citymap .map-container .map__btn--right_1 {
    display: none;
  }
  .citymap .map-container .map__btn--right_2 {
    top: 6.8rem;
    right: 1.6rem;
    gap: 0;
  }
  .citymap .map-container .map__btn .btn {
    width: 4.8rem;
    height: 3.6rem;
  }
  .citymap .map-container .map__btn .btn--zoom {
    width: 3.8rem;
    height: 2.8rem;
  }
  .citymap .map-container .layer {
    display: none;
    position: absolute;
    bottom: 0.8rem;
    left: 0.8rem;
    right: 0.8rem;
    z-index: 10;
  }
  .citymap .map-container .layer--maptype {
    display: none !important;
  }
  .citymap .map-container .layer--facility {
    top: 1.6rem;
    left: auto;
    bottom: auto;
    right: 34rem;
    width: 36rem;
  }
  .citymap .map-container .layer--info {
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    max-width: 37.5rem;
  }
  .citymap .map-container .layer--info .layer__content {
    padding-bottom: 0.8rem;
    border-radius: 0.8rem;
    box-shadow: 4px 8px 12px 0 rgba(9, 30, 66, 0.12);
  }
}
@media (min-width: 768px) and (max-width: 768px) {
  .citymap .map-container .layer--info {
    left: 2rem;
    right: 2rem;
    margin: 0 auto;
  }
}
@media (min-width: 768px) {
  .citymap .map-container .layer__head {
    height: 4.8rem;
    padding: 1.5rem 4rem 1.5rem 1.6rem;
  }
  .citymap .map-container .layer__head > h3 {
    font-size: var(--font_body2);
    line-height: 1.8rem;
  }
  .citymap .map-container .layer__head .btn__close {
    top: 1.2rem;
    right: 1.6rem;
  }
  .citymap .map-container .layer__body {
    padding: 1.6rem;
  }
  .citymap .map-container .layer__body .btns {
    margin-top: 2.4rem;
  }
  .marker__select {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
  }
  .marker__select > li {
    flex: 1 0 calc(50% - 0.8rem);
  }
  .maptabs {
    display: flex !important;
    gap: 0.8rem;
    height: 3.8rem;
    padding: 0.4rem;
    border-radius: 0.4rem;
    border: 1px solid var(--outline_normal);
    background-color: var(--white);
    box-shadow: 0 3px 6px 0 rgba(9, 30, 66, 0.16);
  }
  .maptabs__item {
    flex: 1 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.45rem 1.6rem;
    border-radius: 0.4rem;
    font-size: var(--font_caption);
    line-height: var(--lineheight_caption);
    color: var(--text_body3);
  }
  .maptabs__item:hover {
    background-color: var(--surface_low);
  }
  .maptabs__item.active {
    background-color: var(--primary_normal);
    color: var(--white);
  }
  .markerinfo__list ul > li .title {
    flex: 1 0 11.6rem;
    min-width: 11.6rem;
    max-width: 11.6rem;
  }
  .markerinfo__list--elec ul > li {
    gap: 0.4rem;
  }
  .markerinfo__list--elec ul > li .title {
    flex-basis: 11.6rem;
  }
  .legend {
    position: absolute;
    bottom: 1.6rem;
    right: 3.2rem;
    z-index: 10;
    width: auto;
    padding: 1.2rem 1.6rem;
    border-radius: 0.4rem;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
  }
  .legend__item {
    flex: 1 0 6.4rem;
    max-width: 6.4rem;
    height: 100%;
  }
  .legend__labels {
    margin-top: -0.8rem;
  }
  .legend__labels span {
    flex: 1 0 6.4rem;
    max-width: 6.4rem;
  }
}
@media (min-width: 768px) {
  .board-search {
    margin: 2.4rem 4rem 0;
  }
  .board-search__form {
    flex-direction: row;
    justify-content: space-between;
    gap: 1.6rem;
    width: 100%;
    padding: 2.4rem 1.6rem;
    background: var(--container_gray-light);
  }
  .board-search__row {
    flex: 1 0 auto;
  }
  .board-search__label {
    display: flex;
    align-items: center;
    font-size: var(--font_body2);
    line-height: 2.4rem;
    font-weight: 700;
    flex: 0 0 auto;
    color: #222;
  }
  .board-search__fields {
    gap: 0.8rem;
  }
  .board-search__select {
    flex-basis: auto;
    width: 12rem;
  }
  .board-search__input {
    flex: 1 0 auto;
  }
  .board-list {
    padding: 4rem 4rem 8rem;
  }
  .board-list__body .table__list tr th,
  .board-list__body .table__list tr td {
    padding: 3.55rem 2.4rem;
  }
  .board-list__body .table__list tr td .info > p span {
    display: inline;
  }
  .board-list__body .gallery__list {
    gap: 2.4rem;
    width: 100%;
    justify-content: start;
  }
  .board-list__body .gallery__list .gallery__item {
    gap: 1.6rem;
    flex: 1 0 calc(33.33333% - 1.6rem);
    max-width: calc(33.33333% - 1.6rem);
  }
  .board-list__body .gallery__list .gallery__item .img-wrapper {
    padding-bottom: 56.25%;
  }
  .board-list__body .gallery__list .no-data {
    flex: 1 0 100%;
  }
  .board-view {
    gap: 4rem;
    padding: 1.6rem 4rem;
  }
  .board-view__head {
    padding: 4rem 0;
  }
  .board-view__head > p {
    font-weight: 800;
  }
  .board-view__head > p .attach {
    display: none;
  }
  .board-view__body .board-inner {
    padding: 0 0 4rem;
  }
  .board-view__body .board-attach {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--outline_normal);
  }
  .board-view__body .board-attach > label {
    padding-right: 2rem;
  }
  .board-view__body .borad-reply {
    margin-top: 2.4rem;
    padding: 1.6rem;
    border-radius: 0.8rem;
    background-color: var(--container_primary-light);
  }
  .board-view__body .borad-reply__head > h4 {
    font-weight: 700;
    font-size: var(--font_body1);
    color: var(--text_title);
    line-height: var(--lineheight_body1);
    word-break: keep-all;
  }
  .board-view__body .borad-reply__head > h4::before {
    content: "";
    display: inline-block;
    width: 2rem;
    height: 2rem;
    margin-right: 0.8rem;
    vertical-align: middle;
    background: url(../images/icons/icon-reply.svg) center no-repeat;
  }
  .board-view__body .borad-reply__head .info {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 3.3rem;
    overflow: hidden;
    margin-top: 0.8rem;
    font-size: var(--font_body3);
    color: var(--text_body2);
    line-height: normal;
  }
  .board-view__body .borad-reply__head .info > p + p {
    position: relative;
  }
  .board-view__body .borad-reply__head .info > p + p::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: -1.7rem;
    width: 1px;
    height: 1.4rem;
    background-color: var(--divider_normal);
  }
  .board-view__body .borad-reply__head .info > p span {
    margin-left: 0.8rem;
  }
  .board-view__body .borad-reply__body .board-inner {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .board-view__body .btn-back {
    margin: 4rem auto 0;
    padding: 1.2rem 3rem;
  }
  .paging {
    margin-top: 4rem;
  }
  .board-report {
    gap: 6.4rem;
    padding: 0 4rem;
  }
  .board-report__head .step .bar {
    max-width: 8rem;
  }
  .board-report__body {
    gap: 6.4rem;
  }
  .board-report__body .section__title .required::before {
    top: 0.4rem;
  }
  .board-report__body .section__complete {
    height: auto;
    padding: 5.6rem 1.6rem 7.2rem;
  }
  .board-report__body .section__complete .check {
    width: 8rem;
    height: 8rem;
    background-size: 4.8rem;
  }
  .board-report__body .section__complete .btn-back {
    width: 12rem;
    padding: 1.2rem 1.6rem;
  }
  .board-report__body .table-wrap .info-table th,
  .board-report__body .table-wrap .info-table td {
    padding: 1.6rem 1.2rem;
  }
  .board-report__body .agree {
    flex-direction: row;
    justify-content: space-between;
    padding: 1.6rem 2.4rem;
  }
  .board-report__body .agree__label {
    padding: 1.4rem 0;
  }
  .board-report__body .form {
    gap: 4rem;
  }
  .board-report__body .form .form__row label:not(.inp) {
    flex: 1 0 16rem;
    max-width: 16rem;
  }
  .board-report__body .form .form__row label:not(.inp) .star {
    position: relative;
    top: 0.4rem;
  }
  .board-report__body .form .form__row .column {
    width: calc(100% - 16rem - 1.6rem);
    /* 파일첨부 */
    /* 파일 목록 */
  }
  .board-report__body .form .form__row .column input:not([type=checkbox]):not([type=radio]),
  .board-report__body .form .form__row .column select {
    max-width: 25.6rem;
  }
  .board-report__body .form .form__row .column .address-find {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    flex: 1 0 auto;
  }
  .board-report__body .form .form__row .column .address-find input[type=text] {
    width: 100%;
    max-width: 64rem;
  }
  .board-report__body .form .form__row .column .address-find input[type=text]::placeholder {
    font-size: var(--font_body2);
    line-height: var(--lineheight_body2);
    color: var(--text_placeholder);
  }
  .board-report__body .form .form__row .column .address-find > div {
    display: flex;
    gap: 0.8rem;
  }
  .board-report__body .form .form__row .column .address-find > div input:read-only {
    max-width: 24rem;
  }
  .board-report__body .form .form__row .column .address-find .btn-find {
    flex: 0 0 auto;
  }
  .board-report__body .form .form__row .column .selects {
    display: flex;
    flex-direction: row;
    gap: 0.8rem;
    flex: 1 0 auto;
  }
  .board-report__body .form .form__row .column .selects > select {
    flex: 0 0 auto;
    max-width: 20rem;
    background-color: #fff;
  }
  .board-report__body .form .form__row .column .selects > input[type=text] {
    flex: 1 0 auto;
    max-width: 24rem;
  }
  .board-report__body .form .form__row .column .textareas {
    /* 글자수 카운터 */
  }
  .board-report__body .form .form__row .column .filebox__name {
    flex: 1 0 auto;
    max-width: 40rem !important;
  }
  .board-report__body .form .form__row .column .filebox__btn {
    flex: 0 0 auto;
  }
  .board-report__body .form .form__row .column .filebox__list {
    margin-top: 1.6rem;
  }
  .board-report__body .form .form__row .caution {
    flex: 1;
    border-radius: 1.6rem;
    padding: 3.2rem 4rem;
  }
  .board-report__body .form .form__row .caution li::before {
    left: 0.6rem;
    top: 0.9rem;
  }
}
@media (min-width: 1280px) {
  .board-search {
    margin: 2.4rem 0 0;
  }
  .board-list {
    padding: 4rem 0 8rem;
  }
  .board-list__body .gallery__list {
    gap: 4rem;
  }
  .board-list__body .gallery__list .gallery__item {
    gap: 1.6rem;
    flex: 1 0 calc(33.33333% - 2.8rem);
    max-width: calc(33.33333% - 2.8rem);
  }
  .board-view {
    padding: 1.6rem 0;
  }
}
@media (min-width: 768px) {
  .promotion {
    gap: 8rem;
  }
  .promotion .btns .btn {
    width: auto;
    padding: 1.4rem 2.4rem;
  }
  .promotion-intro {
    padding: 0 4rem;
  }
  .promotion-intro .video-hero {
    margin-bottom: 4rem;
  }
  .promotion-intro .intro__text {
    gap: 3.2rem;
    margin-bottom: 4.8rem;
  }
  .promotion .promoinfo__sector {
    gap: 6.4rem;
  }
  .promotion .promoinfo__box {
    gap: 4rem;
  }
  .promotion .promoinfo__img {
    max-width: 84.8rem;
    margin: 0 auto;
  }
  .promotion .promoslide__nav button {
    inline-size: 3rem;
    block-size: 3rem;
  }
  .promotion .visitrecord {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-top: 0;
  }
  .promotion .visitrecord__sector {
    display: flex;
    flex-direction: column;
    gap: 6.4rem;
  }
  .promotion .visitrecord__box {
    position: relative;
  }
  .promotion .visitrecord__box .headline {
    max-width: 80rem;
    margin: 0 auto 1.6rem;
    font-weight: 800;
    font-size: var(--font_title1);
    line-height: var(--lineheight_title1);
    color: var(--white);
    text-align: center;
  }
  .promotion .visitrecord__box--blue {
    padding: 4.8rem 1.6rem 5.4rem;
  }
  .promotion .visitrecord__box--blue::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 50%;
    z-index: 0;
    width: 100vw;
    min-width: 100vw;
    transform: translateX(-50%);
    background: radial-gradient(27.61% 33.45% at 49.32% 59.48%, #003766 0%, #001526 100%);
    z-index: -1;
  }
  .promotion .visitrecord__box--marquee {
    left: 50%;
    right: 50%;
    width: calc(100vh + 3.2rem);
    min-width: 100vw;
    transform: translateX(-50%);
  }
  .promotion .visitrecord__box--marquee .marquee-swiper {
    width: 100vw;
  }
  .promotion .visitrecord__box--marquee .marquee-swiper .swiper-wrapper {
    transition-timing-function: linear !important; /* 끊김 없이 */
  }
  .promotion .visitrecord__box--marquee .marquee-swiper .swiper-wrapper .swiper-slide {
    width: auto; /* 이미지 원본 비율 유지 */
  }
  .promotion .visitrecord__box--marquee .marquee-swiper .swiper-wrapper .swiper-slide img {
    display: block;
    object-fit: cover;
    aspect-ratio: 32/23;
    max-height: 6.9rem;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .promotion .visitrecord__box--marquee .marquee-swiper .swiper-wrapper .swiper-slide img {
    max-height: 20rem;
  }
}
@media (min-width: 768px) {
  .promotion .visitrecord__stats {
    gap: 4rem;
    padding: 1.6rem 0;
  }
  .promotion .visitrecord__stats > div p {
    font-size: var(--font_body2);
    line-height: var(--lineheight_body2);
  }
  .promotion .visitrecord__stats > div span {
    font-size: var(--font_heading1);
    line-height: var(--lineheight_heading1);
  }
  .promotion .visitrecord__stats .bar {
    height: 8rem;
  }
  .promotion .visitrecord__img {
    margin-top: 4rem;
    width: 100%;
    aspect-ratio: 629/280;
  }
  .promotion .reservation__step {
    padding: 0 4rem;
  }
  .promotion .reservation__step .step__text {
    margin-bottom: 4rem;
  }
  .promotion .reservation__step .step__wrap .step__cont .step__desc br {
    display: block;
  }
  .promotion .reservation__step .step__condition {
    padding: 3.2rem 4rem 4rem;
  }
  .promotion .reservation__step .step__condition--body .dotted > p::before {
    top: 1rem;
  }
}
@media (min-width: 1280px) {
  .promotion-intro {
    display: flex;
    align-items: center;
    gap: 8rem;
    padding: 0 4rem;
  }
  .promotion-intro .video-hero {
    flex: 1 0 auto;
    max-width: 63.2rem;
    aspect-ratio: 79/50;
    margin-bottom: 0;
  }
  .promotion-intro .intro__text {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 2.4rem;
    margin-bottom: 4.8rem;
  }
  .promotion-intro .intro__text .desc {
    text-align: left;
  }
  .promotion-intro .intro__text .btns {
    margin-top: 2.4rem;
  }
  .promotion .promoinfo__list {
    padding: 4rem 6.4rem;
  }
  .promotion .promoinfo__list > ul {
    flex-direction: column;
  }
  .promotion .promoinfo__list > ul > li {
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 1.6rem;
  }
  .promotion .promoinfo__list > ul > li .title {
    flex: 1 0 20rem;
    max-width: 20rem;
    line-height: var(--lineheight_body1);
  }
  .promotion .promoinfo__list > ul > li .dotted {
    flex: 1 0 auto;
  }
  .promotion .promoinfo__list > ul > li .dotted > li::before {
    content: "";
    position: absolute;
    top: 1.2rem;
    left: 0.6rem;
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    line-height: var(--lineheight_caption);
    border-radius: 50%;
    background-color: var(--primary_normal);
  }
  .promotion .reservation__step {
    padding: 0;
  }
  .promotion .reservation__step .step__text {
    margin-bottom: 4rem;
  }
  .promotion .reservation__step .step__wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .promotion .reservation__step .step__wrap .step__cont {
    display: flex;
    justify-content: space-between;
    gap: 2.8rem;
    padding-bottom: 4.8rem;
  }
  .promotion .reservation__step .step__wrap .step__cont .step__badge {
    position: relative;
    z-index: 1;
    flex: 0 0 8.4rem;
    height: 3.6rem;
    margin-right: 2.8rem;
    padding: 0.7rem 0rem;
    border-radius: 99.9rem;
    text-align: center;
  }
  .promotion .reservation__step .step__wrap .step__cont .step__badge::after {
    content: "";
    position: absolute;
    top: 1rem;
    right: -3.8rem;
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    border: 2px solid var(--primary_normal);
    background-color: var(--white);
  }
  .promotion .reservation__step .step__wrap .step__cont .step__info {
    position: relative;
    z-index: 0;
    flex: 1 0 auto;
  }
  .promotion .reservation__step .step__wrap .step__cont .step__info::before {
    content: "";
    position: absolute;
    display: block;
    top: 1rem;
    left: -2.8rem;
    width: 0.1rem;
    height: calc(100% + 5rem);
    background-color: var(--outline_normal);
  }
  .promotion .reservation__step .step__wrap .step__cont .step__info .step__desc {
    display: flex;
    flex-direction: column;
    max-width: 56rem;
  }
  .promotion .reservation__step .step__wrap .step__cont .step__info .step__btn {
    display: flex;
    gap: 1.6rem;
    margin-top: 2.4rem;
  }
  .promotion .reservation__step .step__wrap .step__cont .step__info .step__btn > button {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    position: relative;
    padding: 0;
    border-radius: 0;
    border: 0;
    font-weight: 400;
    font-size: var(--font_caption);
    line-height: var(--lineheight_caption);
    color: var(--text_body2);
  }
  .promotion .reservation__step .step__wrap .step__cont .step__info .step__btn > button > img {
    display: block;
    padding: 0.8rem;
    border: 1px solid var(--outline_normal);
  }
  .promotion .reservation__step .step__wrap .step__cont .step__info .step__btn > button::after {
    display: none;
  }
  .promotion .reservation__step .step__wrap .step__cont > img {
    flex: 0 0 30.8rem;
    display: block;
    margin: 1.6rem auto 0;
    width: 100%;
    max-width: 30.8rem;
    height: auto;
  }
  .promotion .reservation__step .step__wrap .step__cont:last-child .step__info::before {
    display: none;
  }
}
@media (min-width: 768px) {
  .autodriving {
    gap: 8rem;
  }
  .autodriving .btns .btn {
    width: auto;
    padding: 1.4rem 2.4rem;
  }
  .autodriving-intro {
    padding: 0 4rem;
  }
  .autodriving-intro .video-hero {
    margin-bottom: 4rem;
  }
  .autodriving-intro .intro__text {
    gap: 3.2rem;
    margin-bottom: 4.8rem;
  }
  .autodriving .businfo__sector {
    gap: 6.4rem;
  }
  .autodriving .businfo__box {
    gap: 4rem;
  }
  .autodriving .businfo__img {
    max-width: 84.8rem;
    margin: 0 auto;
  }
  .autodriving .promoslide__nav button {
    inline-size: 3rem;
    block-size: 3rem;
  }
  .autodriving .visitrecord {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-top: 0;
  }
  .autodriving .visitrecord__sector {
    display: flex;
    flex-direction: column;
    gap: 6.4rem;
  }
  .autodriving .visitrecord__box {
    position: relative;
  }
  .autodriving .visitrecord__box .headline {
    max-width: 80rem;
    margin: 0 auto 1.6rem;
    font-weight: 800;
    font-size: var(--font_title1);
    line-height: var(--lineheight_title1);
    color: var(--white);
    text-align: center;
  }
  .autodriving .visitrecord__box--blue {
    padding: 4.8rem 1.6rem 5.4rem;
  }
  .autodriving .visitrecord__box--blue::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 50%;
    z-index: 0;
    width: 100vw;
    min-width: 100vw;
    transform: translateX(-50%);
    background: radial-gradient(27.61% 33.45% at 49.32% 59.48%, #003766 0%, #001526 100%);
    z-index: -1;
  }
  .autodriving .visitrecord__box--marquee {
    left: 50%;
    right: 50%;
    width: calc(100vh + 3.2rem);
    min-width: 100vw;
    transform: translateX(-50%);
  }
  .autodriving .visitrecord__box--marquee .marquee-swiper {
    width: 100vw;
  }
  .autodriving .visitrecord__box--marquee .marquee-swiper .swiper-wrapper {
    transition-timing-function: linear !important; /* 끊김 없이 */
  }
  .autodriving .visitrecord__box--marquee .marquee-swiper .swiper-wrapper .swiper-slide {
    width: auto; /* 이미지 원본 비율 유지 */
  }
  .autodriving .visitrecord__box--marquee .marquee-swiper .swiper-wrapper .swiper-slide img {
    display: block;
    object-fit: cover;
    aspect-ratio: 32/23;
    max-height: 6.9rem;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .autodriving .visitrecord__box--marquee .marquee-swiper .swiper-wrapper .swiper-slide img {
    max-height: 20rem;
  }
}
@media (min-width: 768px) {
  .autodriving .visitrecord__stats {
    gap: 4rem;
    padding: 1.6rem 0;
  }
  .autodriving .visitrecord__stats > div p {
    font-size: var(--font_body2);
    line-height: var(--lineheight_body2);
  }
  .autodriving .visitrecord__stats > div span {
    font-size: var(--font_heading1);
    line-height: var(--lineheight_heading1);
  }
  .autodriving .visitrecord__stats .bar {
    height: 8rem;
  }
  .autodriving .visitrecord__img {
    margin-top: 4rem;
    width: 100%;
    aspect-ratio: 629/280;
  }
  .autodriving .reservation__step {
    padding: 0 4rem;
  }
  .autodriving .reservation__step .step__text {
    margin-bottom: 4rem;
  }
  .autodriving .reservation__step .step__wrap .step__cont .step__desc br {
    display: block;
  }
  .autodriving .reservation__step .step__condition {
    padding: 3.2rem 4rem 4rem;
  }
  .autodriving .reservation__step .step__condition--body .dotted > p::before {
    top: 1rem;
  }
}
@media (min-width: 1280px) {
  .autodriving-intro {
    display: flex;
    align-items: center;
    gap: 8rem;
    padding: 0;
  }
  .autodriving-intro .video-hero {
    flex: 1 0 auto;
    max-width: 63.2rem;
    aspect-ratio: 79/50;
    margin-bottom: 0;
  }
  .autodriving-intro .intro__text {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 2.4rem;
    margin-bottom: 4.8rem;
  }
  .autodriving-intro .intro__text .desc {
    text-align: left;
  }
  .autodriving-intro .intro__text .btns {
    margin-top: 2.4rem;
  }
  .autodriving .businfo__box {
    flex-direction: row;
    align-items: center;
    gap: 8rem;
  }
  .autodriving .businfo__box--time {
    flex-direction: column;
    width: 100%;
    gap: 4rem;
  }
  .autodriving .businfo__box .headline br {
    display: none;
  }
  .autodriving .businfo__box .dotted > p::before {
    top: 1.2rem;
  }
  .autodriving .businfo__text {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1.6rem;
  }
  .autodriving .businfo__img {
    width: 100%;
    max-width: 63.2rem;
    aspect-ratio: 63.2/48;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  .autodriving .businfo__img > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
  }
  .autodriving .businfo__list {
    width: 100%;
    padding: 4rem 6.4rem;
  }
  .autodriving .businfo__list > ul {
    flex-direction: column;
  }
  .autodriving .businfo__list > ul > li {
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 1.6rem;
  }
  .autodriving .businfo__list > ul > li .title {
    flex: 1 0 20rem;
    max-width: 20rem;
    line-height: var(--lineheight_body1);
  }
  .autodriving .businfo__list > ul > li .dotted {
    flex: 1 0 auto;
  }
  .autodriving .businfo__list > ul > li .dotted > li::before {
    content: "";
    position: absolute;
    top: 1.2rem;
    left: 0.6rem;
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    line-height: var(--lineheight_caption);
    border-radius: 50%;
    background-color: var(--primary_normal);
  }
  .autodriving .businfo .promoslide {
    margin-bottom: 1.6rem;
  }
  .autodriving .businfo .promoslide__main {
    position: relative;
    margin-bottom: 0.8rem;
  }
  .autodriving .businfo .promoslide__main .slide-inner {
    position: relative;
  }
  .autodriving .businfo .promoslide__main .slide-inner .img-wrapper {
    width: 100%;
    aspect-ratio: 343/193;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  .autodriving .businfo .promoslide__main .slide-inner .img-wrapper > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
  }
  .autodriving .businfo .promoslide__main .slide-inner .img-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    top: auto;
    height: 8rem;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
  }
  .autodriving .businfo .promoslide__main .slide-inner .slide-info {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    position: absolute;
    inset: 1.6rem;
    top: auto;
    z-index: 10;
    color: var(--white);
  }
  .autodriving .businfo .promoslide__main .slide-inner .slide-info .title {
    font-weight: 800;
    font-size: var(--font_title3);
    line-height: normal;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0px 2px rgba(0, 0, 0, 0.2), 0 0 0.15em #000;
  }
  .autodriving .businfo .promoslide__main .slide-inner .slide-info .desc {
    font-size: var(--font_body2);
    line-height: var(--lineheight_body2);
  }
  .autodriving .businfo .promoslide__main .slide-inner .slide-info .desc br {
    display: none;
  }
  .autodriving .businfo .promoslide__thumb .swiper-slide-thumb-active .img-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid var(--outline_heavy);
  }
  .autodriving .businfo .promoslide__thumb .img-wrapper {
    width: 100%;
    aspect-ratio: 343/193;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    z-index: 1;
    cursor: pointer;
  }
  .autodriving .businfo .promoslide__thumb .img-wrapper > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
  }
  .autodriving .businfo .promoslide__nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: none;
    border: none;
    inline-size: 2.8rem;
    block-size: 2.8rem;
    font-size: 0;
    cursor: pointer;
  }
  .autodriving .businfo .promoslide__nav button:hover {
    border-radius: 0.4rem;
    outline: 1px solid var(--white);
  }
  .autodriving .businfo .promoslide__nav button.promoslide__prev {
    left: 0;
    background: rgba(0, 0, 0, 0.7) url(../images/icons/icon-chevron_left.svg);
    background-size: cover;
  }
  .autodriving .businfo .promoslide__nav button.promoslide__next {
    right: 0;
    background: rgba(0, 0, 0, 0.7) url(../images/icons/icon-chevron_right.svg);
    background-size: cover;
  }
  .autodriving .busroute__box .headline {
    font-weight: 800;
  }
  .autodriving .busroute__box .busroute__img {
    padding: 5.1rem 11.2rem;
  }
  .autodriving .busroute__box .busroute__img > img {
    aspect-ratio: 176/83;
  }
  .autodriving .howtouse__step {
    padding: 0;
  }
  .autodriving .howtouse__step .step__text {
    margin-bottom: 4rem;
  }
  .autodriving .howtouse__step .step__wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .autodriving .howtouse__step .step__wrap .step__cont {
    display: flex;
    justify-content: space-between;
    gap: 2.8rem;
    padding-bottom: 4.8rem;
  }
  .autodriving .howtouse__step .step__wrap .step__cont .step__badge {
    position: relative;
    z-index: 1;
    flex: 0 0 8.4rem;
    height: 3.6rem;
    margin-right: 2.8rem;
    padding: 0.7rem 0rem;
    border-radius: 99.9rem;
    text-align: center;
  }
  .autodriving .howtouse__step .step__wrap .step__cont .step__badge::after {
    content: "";
    position: absolute;
    top: 1rem;
    right: -3.8rem;
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    border: 2px solid var(--primary_normal);
    background-color: var(--white);
  }
  .autodriving .howtouse__step .step__wrap .step__cont .step__info {
    position: relative;
    z-index: 0;
    flex: 1 0 auto;
  }
  .autodriving .howtouse__step .step__wrap .step__cont .step__info::before {
    content: "";
    position: absolute;
    display: block;
    top: 1rem;
    left: -2.8rem;
    width: 0.1rem;
    height: calc(100% + 5rem);
    background-color: var(--outline_normal);
  }
  .autodriving .howtouse__step .step__wrap .step__cont .step__info .step__desc {
    display: flex;
    flex-direction: column;
    max-width: 56rem;
  }
  .autodriving .howtouse__step .step__wrap .step__cont .step__info .step__btn {
    display: flex;
    gap: 1.6rem;
    margin-top: 2.4rem;
  }
  .autodriving .howtouse__step .step__wrap .step__cont .step__info .step__btn > button {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    position: relative;
    padding: 0;
    border-radius: 0;
    border: 0;
    font-weight: 400;
    font-size: var(--font_caption);
    line-height: var(--lineheight_caption);
    color: var(--text_body2);
  }
  .autodriving .howtouse__step .step__wrap .step__cont .step__info .step__btn > button > img {
    display: block;
    padding: 0.8rem;
    border: 1px solid var(--outline_normal);
  }
  .autodriving .howtouse__step .step__wrap .step__cont .step__info .step__btn > button::after {
    display: none;
  }
  .autodriving .howtouse__step .step__wrap .step__cont > img {
    flex: 0 0 20rem;
    display: block;
    margin: 1.6rem auto 0;
    width: 100%;
    max-width: 20rem;
    height: auto;
  }
  .autodriving .howtouse__step .step__wrap .step__cont:last-child .step__info::before {
    display: none;
  }
}