@charset "UTF-8";
/* =======================================
   VARIABLES
   ======================================= */
/* 컬러 팔레트 */
/* 폰트 */
/* z-index */
/* 반응형 기준점 */
/* radius */
/* =======================================
   MIXINS & FUNCTIONS
   ======================================= */
/* =======================================
   반응형 대응 Mixin
   --------------------------------------- */
/* =======================================
   다중 줄 말줄임 (Ellipsis)
   --------------------------------------- */
/* =======================================
   중앙 정렬 (Flex)
   --------------------------------------- */
/* =======================================
   배경 이미지 커버
   --------------------------------------- */
/* =======================================
   px → rem 변환 함수
   --------------------------------------- */
/* =======================================
   px → vw 변환 함수
   --------------------------------------- */
/* =======================================
   트랜지션 Mixin
   --------------------------------------- */
/* =======================================
   폰트 Mixin
   --------------------------------------- */
.display--large {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .display--large {
    font-size: 4.2rem;
  }
}
.display--medium {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .display--medium {
    font-size: 3rem;
  }
}
.display--small {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .display--small {
    font-size: 2.4rem;
  }
}

.heading--xxlarge {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .heading--xxlarge {
    font-size: 3.2rem;
  }
}
.heading--xlarge {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .heading--xlarge {
    font-size: 2.8rem;
  }
}
.heading--large {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .heading--large {
    font-size: 2.6rem;
  }
}
.heading--medium {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .heading--medium {
    font-size: 2.2rem;
  }
}
.heading--small {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .heading--small {
    font-size: 1.8rem;
  }
}
.heading--xsmall {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .heading--xsmall {
    font-size: 1.6rem;
  }
}
.heading--xxsmall {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .heading--xxsmall {
    font-size: 1.4rem;
  }
}

.body--large {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .body--large {
    font-size: 2rem;
  }
}
.body--large-bold {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .body--large-bold {
    font-size: 2rem;
  }
}
.body--medium {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .body--medium {
    font-size: 1.8rem;
  }
}
.body--medium-bold {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .body--medium-bold {
    font-size: 1.8rem;
  }
}
.body--small {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .body--small {
    font-size: 1.6rem;
  }
}
.body--small-bold {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .body--small-bold {
    font-size: 1.6rem;
  }
}
.body--xsmall {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .body--xsmall {
    font-size: 1.4rem;
  }
}
.body--xsmall-bold {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .body--xsmall-bold {
    font-size: 1.4rem;
  }
}

.label--large {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .label--large {
    font-size: 2rem;
  }
}
.label--large-semibold {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .label--large-semibold {
    font-size: 2rem;
  }
}
.label--medium {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .label--medium {
    font-size: 1.8rem;
  }
}
.label--medium-semibold {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .label--medium-semibold {
    font-size: 1.8rem;
  }
}
.label--small {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .label--small {
    font-size: 1.6rem;
  }
}
.label--small-semibold {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .label--small-semibold {
    font-size: 1.6rem;
  }
}
.label--xsmall {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .label--xsmall {
    font-size: 1.4rem;
  }
}
.label--xsmall-semibold {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .label--xsmall-semibold {
    font-size: 1.4rem;
  }
}
.label--xsmall2 {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .label--xsmall2 {
    font-size: 1.4rem;
  }
}

.navigation--medium {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .navigation--medium {
    font-size: 1.7rem;
  }
}
.navigation--small {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .navigation--small {
    font-size: 1.6rem;
  }
}
.navigation--xlarge {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .navigation--xlarge {
    font-size: 2rem;
  }
}
.navigation--xlarge-bold {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .navigation--xlarge-bold {
    font-size: 2rem;
  }
}
.navigation--large {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .navigation--large {
    font-size: 1.8rem;
  }
}
.navigation--large-bold {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .navigation--large-bold {
    font-size: 1.8rem;
  }
}
.navigation--medium-bold {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .navigation--medium-bold {
    font-size: 2rem;
  }
}
.navigation--small-bold {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .navigation--small-bold {
    font-size: 1.6rem;
  }
}

/* ================================================
   RESET & BASE STYLES
   ================================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  line-height: 1.5;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  background-color: #ffffff;
  color: #1e2124;
  -webkit-font-smoothing: antialiased;
  overflow: auto;
}
body.m-on {
  overflow: hidden;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  border: none;
  outline: none;
  background: transparent;
}

a, button {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

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

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: normal;
  margin: 0;
}

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

caption {
  overflow: hidden;
  width: 100%;
  height: 1px;
  font-size: 0;
  line-height: 0;
  color: transparent;
}

input[type=radio],
input[type=checkbox] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.navi button:focus-visible {
  outline: 2px solid #0076DD;
  outline-offset: -2px;
  transition: none;
}

.swiper-button-prev:focus-visible,
.swiper-button-next:focus-visible {
  outline: 2px solid #0076DD;
  outline-offset: -2px;
  z-index: 10;
}

a.mainBannerLink:focus-visible,
button.mainBannerLink:focus-visible {
  border-radius: 20px;
  outline: auto;
  outline-color: #0c82e9;
  outline-offset: -2px;
}
a.gnb-main-trigger:focus-visible,
button.gnb-main-trigger:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 0px;
}
a.closeBtn:focus-visible,
button.closeBtn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  border-radius: 1000px;
}
a.year-dropbtn:focus-visible, a.month-dropbtn:focus-visible,
button.year-dropbtn:focus-visible,
button.month-dropbtn:focus-visible {
  outline: 2px solid #0076DD !important;
  outline-offset: 2px;
  z-index: 10;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid #0076DD;
  outline-offset: 2px;
  z-index: 10;
}

.error {
  width: 741px;
  margin: 0 auto;
  padding-top: 123px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
}

a.popularSearchKeyword:focus-visible {
  outline: 2px solid #0c82e9;
  outline-offset: 2px;
  border-radius: 4px;
}

/* =======================================
   TYPOGRAPHY
   ======================================= */
/* 폰트 기본값 */
body {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 62.5%;
  line-height: 150%;
  color: #1e2124;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

/* ===============================
   Heading (H1~H6)
   =============================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 32px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 19px;
}

h6 {
  font-size: 17px;
}

/* ===============================
   Text Utilities
   =============================== */
.text--center {
  text-align: center;
}
.text--right {
  text-align: right;
}
.text--left {
  text-align: left;
}
.text--bold {
  font-weight: 700;
}
.text--semibold {
  font-weight: 600;
}
.text--medium {
  font-weight: 400;
}
.text--light {
  font-weight: 300;
}

/* ===============================
   Links
   =============================== */
a, button {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  color: #0076DD;
  text-decoration: none;
  transition: color 0.2s ease;
  border: none;
  outline: none;
  cursor: pointer;
}

.link {
  display: inline;
  word-break: keep-all;
}
.link a {
  text-decoration: underline;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  color: #0076DD;
  text-decoration: none;
  transition: color 0.2s ease;
  border: none;
  cursor: pointer;
}
.link a .icon {
  vertical-align: text-top;
}

/* ===============================
   color
   =============================== */
.color_primary {
  color: #0076DD !important;
}
.color_primary.bold {
  font-weight: 600 !important;
}
.color_primary.bold::before {
  font-weight: 400;
}

.color_re {
  color: #D63D4A !important;
}

.cookie-guide {
  font-size: 13px;
  font-weight: 400;
  line-height: 150%;
  color: #D63D4A;
}

/* Screen reader only */
.hd-element {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.row {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.col {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.box {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  padding: 24px;
  border-radius: 20px;
  border: 1px solid #CDD1D5;
  background: #FFF;
}
.box p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .box p {
    font-size: 1.6rem;
  }
}
.box p .icon {
  display: inline-block;
  vertical-align: middle;
}
@media (max-width: 768px) {
  .box {
    max-width: 100%;
    gap: 0.8rem;
    padding: 1.2rem;
  }
  .box p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    word-wrap: break-word;
    word-break: break-all;
    display: inline-block;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .box p {
    font-size: 1.6rem;
  }
}

.tableWrap {
  position: relative;
  width: 100%;
  overflow: auto;
}
.tableWrap .contTable {
  width: 100%;
  border-top: 1px solid #6787C9;
}
.tableWrap .contTable.noLine tbody td {
  border-right: none;
}
.tableWrap .contTable th {
  padding: 9.5px 8px;
  border-bottom: 1px solid #cdd1d5;
  border-right: 1px solid #cdd1d5;
  background: #F9FAFB;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .tableWrap .contTable th {
    font-size: 1.4rem;
  }
}
.tableWrap .contTable th:last-child {
  border-right: none;
}
.tableWrap .contTable tbody tr {
  border-bottom: 1px solid #cdd1d5;
}
.tableWrap .contTable tbody tr.total:before {
  content: "";
  position: absolute;
  top: -2px;
  width: 100%;
  border-top: 1px solid #0076DD;
}
.tableWrap .contTable tbody tr.total {
  position: relative;
  border-top: 1px solid #0076DD;
  border-bottom: 1px solid #0076DD;
}
.tableWrap .contTable tbody tr.total th,
.tableWrap .contTable tbody tr.total td {
  height: 72px;
  border-top: none;
  border-bottom: none;
}
.tableWrap .contTable tbody tr.total th {
  background: linear-gradient(0deg, #ECF2FE 0%, #ECF2FE 100%), #FFFFFF !important;
  border-right: none !important;
}
.tableWrap .contTable tbody tr th {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .tableWrap .contTable tbody tr th {
    font-size: 1.6rem;
  }
}
.tableWrap .contTable tbody tr td {
  padding: 8px;
  text-align: center;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .tableWrap .contTable tbody tr td {
    font-size: 1.6rem;
  }
}
.tableWrap .contTable tbody tr td {
  border-right: 1px solid #cdd1d5;
}
.tableWrap .contTable tbody tr td:last-child {
  border-right: none;
}
.tableWrap .contTable tbody tr td.border-r {
  border-right: 1px solid #cdd1d5 !important;
}
.tableWrap .contTable tbody tr td.cgcalc-detail-cell > span {
  display: block;
}
.tableWrap .contTable tbody tr td.cgcalc-detail-cell .btn {
  margin: 0 auto;
}
.tableWrap .contTable tbody tr td .fileStatus {
  display: flex;
  justify-content: center;
}
.tableWrap .contTable tbody tr td a {
  color: #1e2124;
}
.tableWrap .contTable tbody tr td a:hover {
  color: #0076DD;
}
.tableWrap .contTable tbody tr td ul li {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .tableWrap .contTable tbody tr td ul li {
    font-size: 1.6rem;
  }
}
.tableWrap .contTable tbody tr td ul li:before {
  content: "•";
  padding: 0 10px;
  display: inline-block;
  text-indent: 0;
}
.tableWrap .contTable tbody tr td ul li.noDesc:before {
  content: "";
  padding: 0 14px;
}
.tableWrap .contTable tbody tr td ul li.color_re {
  color: #D63D4A;
}
.tableWrap .contTable tfoot td.totalCalc {
  background: #ECF2FE;
  border-top: 1px solid #0076DD;
  border-bottom: 1px solid #0076DD;
  padding: 10px 0;
  text-align: center;
}
.tableWrap .contTable tfoot td.totalCalc span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .tableWrap .contTable tfoot td.totalCalc span {
    font-size: 1.6rem;
  }
}
.tableWrap .contTable tfoot td.totalCalc span {
  text-align: center;
  word-wrap: break-word;
  word-break: break-word;
  gap: 8px;
}
.tableWrap .contTable tfoot td.totalCalc span strong {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #0076DD;
}
@media (max-width: 1024px) {
  .tableWrap .contTable tfoot td.totalCalc span strong {
    font-size: 1.6rem;
  }
}
.tableWrap .contTable.gc-day-ntce-table {
  table-layout: fixed;
}
.tableWrap .contTable.gc-day-ntce-table tbody tr td:nth-child(3) {
  text-align: left;
  vertical-align: top;
}
.tableWrap .contTable.gc-day-ntce-table tbody tr td:nth-child(3) .badgeWrap {
  display: block;
  width: 100%;
  max-width: 100%;
}
.tableWrap .contTable.gc-day-ntce-table tbody tr td:nth-child(3) .badgeWrap .gc-day-ntce-msg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 96px;
  box-sizing: border-box;
  overflow-y: auto;
  padding: 8px 10px;
  align-items: flex-start;
  justify-content: flex-start;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.tableWrap .contTable.gc-day-ntce-table tbody tr td:nth-child(3) .badgeWrap .gc-day-ntce-msg.badge--secondary {
  color: #000000;
}
@media (max-width: 1024px) {
  .tableWrap {
    width: 100%;
  }
  .tableWrap .contTable.maxTable {
    min-width: 76.9rem;
    table-layout: fixed;
  }
}
@media (max-width: 768px) {
  .tableWrap {
    width: 100%;
  }
  .tableWrap .contTable th {
    padding: 0.55rem 0.8rem;
  }
  .tableWrap .contTable th.chenapTitle {
    width: 100%;
    display: flex;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .tableWrap .contTable th.chenapTitle {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .tableWrap .contTable tbody tr th {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .tableWrap .contTable tbody tr th {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .tableWrap .contTable tbody tr td {
    padding: 0.4rem 0.8rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .tableWrap .contTable tbody tr td {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .tableWrap .contTable tbody tr td ul li.noDesc:before {
    content: "";
    padding: 0 0.5rem;
  }
  .tableWrap .contTable tbody tr td ul li p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .tableWrap .contTable tbody tr td ul li p {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .tableWrap .contTable tbody tr td p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .tableWrap .contTable tbody tr td p {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .tableWrap .contTable.gc-day-ntce-table tbody tr td:nth-child(3) {
    align-items: flex-start;
  }
  .tableWrap .contTable.gc-day-ntce-table tbody tr td:nth-child(3) .badgeWrap {
    flex: 1 1 auto;
    min-width: 0;
  }
  .tableWrap .contTable.gc-day-ntce-table tbody tr td:nth-child(3) .badgeWrap .gc-day-ntce-msg {
    margin: 0.4rem 0;
    max-height: 120px;
  }
  .tableWrap .contTable.responsiveTable {
    table-layout: fixed;
    width: 100%;
    position: relative;
    display: block;
    border-top: none;
  }
  .tableWrap .contTable.responsiveTable thead {
    display: none;
  }
  .tableWrap .contTable.responsiveTable tbody,
  .tableWrap .contTable.responsiveTable tfoot {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.8rem;
  }
  .tableWrap .contTable.responsiveTable tbody tr,
  .tableWrap .contTable.responsiveTable tfoot tr {
    display: block;
    width: 100%;
    border-top: 1px solid #6787C9;
    border-bottom: none;
  }
  .tableWrap .contTable.responsiveTable tbody tr td,
  .tableWrap .contTable.responsiveTable tfoot tr td {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.8rem;
    border-right: none;
    padding: 0;
    border-bottom: 1px solid #cdd1d5;
    text-align: left;
  }
  .tableWrap .contTable.responsiveTable tbody tr td > span,
  .tableWrap .contTable.responsiveTable tbody tr td > div,
  .tableWrap .contTable.responsiveTable tfoot tr td > span,
  .tableWrap .contTable.responsiveTable tfoot tr td > div {
    margin: 0.4rem 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .tableWrap .contTable.responsiveTable tbody tr td.noData,
  .tableWrap .contTable.responsiveTable tfoot tr td.noData {
    justify-content: center;
    padding: 0.4rem 0;
    text-align: center;
  }
  .tableWrap .contTable.responsiveTable tbody tr td.noData:before,
  .tableWrap .contTable.responsiveTable tfoot tr td.noData:before {
    display: none;
  }
  .tableWrap .contTable.responsiveTable tbody tr td:before,
  .tableWrap .contTable.responsiveTable tfoot tr td:before {
    content: attr(data-label);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex: 0 0 26%;
    width: 26%;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
    color: #1e2124;
    text-align: left;
    background: #F9FAFB;
    padding: 0.4rem 0.8rem;
    border-right: 1px solid #cdd1d5;
    word-wrap: break-word;
    word-break: break-all;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .tableWrap .contTable.responsiveTable tbody tr td:before,
  .tableWrap .contTable.responsiveTable tfoot tr td:before {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .tableWrap .contTable.responsiveTable tbody tr td.noList,
  .tableWrap .contTable.responsiveTable tfoot tr td.noList {
    background: url("../images/fo/icons/icon-arrow-drop-down.svg") no-repeat center right;
  }
  .tableWrap .contTable.responsiveTable tbody tr td.noList:before,
  .tableWrap .contTable.responsiveTable tfoot tr td.noList:before {
    width: 100%;
    flex: 0 0 100%;
  }
  .tableWrap .contTable.responsiveTable tfoot tr td.cgcalc-index-summary {
    justify-content: center;
  }
  .tableWrap .contTable.responsiveTable tfoot tr td.cgcalc-index-summary:before {
    display: none;
  }
  .tableWrap .contTable.maxTable {
    table-layout: fixed;
  }
}

.txt-l {
  text-align: left !important;
}

.txt-c {
  text-align: center !important;
}

.btn.center {
  margin: 0 auto;
}

col.num {
  width: 138px;
}
col.name {
  width: 138px;
}
col.address {
  width: 446px;
}
col.date {
  width: 260px;
}
guide01 col.inputValue {
  width: 100px;
}
col.detail {
  width: 100px;
}
col.auto {
  width: auto;
}
col.w-114 {
  width: 114px;
}
col.w-120 {
  width: 120px;
}
col.w-406 {
  width: 406px;
}
col.w-161 {
  width: 161px;
}
col.w-442 {
  width: 442px;
}
col.w-431 {
  width: 431px;
}
col.w-226 {
  width: 226px;
}
col.w-710 {
  width: 710px;
}
col.w-242 {
  width: 242px;
}

.width-64 {
  width: 64px;
}

.width-74 {
  width: 74px;
}

.width-106 {
  width: 106px;
}

.width-110 {
  width: 110px;
}

.width-135 {
  width: 135px;
}

.width-176 {
  width: 176px;
}

.width-189 {
  width: 189px;
}

.width-198 {
  width: 198px;
}

.width-202 {
  width: 202px;
}

.width-206 {
  width: 206px;
}

.width-212 {
  width: 212px;
}

.width-220 {
  width: 220px;
}

.width-240 {
  width: 240px;
}

.width-246 {
  width: 246px;
}

.width-274 {
  width: 274px;
}

.width-290 {
  width: 290px;
}

.width-353 {
  width: 353px;
}

.width-360 {
  width: 360px;
}

.width-484 {
  width: 484px;
}

.width-564 {
  width: 564px;
}

.w-100 {
  width: 100%;
}

.g-2 {
  gap: 2px;
}

.gx-2 {
  column-gap: 2px;
}

.gy-2 {
  row-gap: 2px;
}

.g-4 {
  gap: 4px;
}

.gx-4 {
  column-gap: 4px;
}

.gy-4 {
  row-gap: 4px;
}

.g-6 {
  gap: 6px;
}

.gx-6 {
  column-gap: 6px;
}

.gy-6 {
  row-gap: 6px;
}

.g-8 {
  gap: 8px;
}

.gx-8 {
  column-gap: 8px;
}

.gy-8 {
  row-gap: 8px;
}

.g-10 {
  gap: 10px;
}

.gx-10 {
  column-gap: 10px;
}

.gy-10 {
  row-gap: 10px;
}

.g-12 {
  gap: 12px;
}

.gx-12 {
  column-gap: 12px;
}

.gy-12 {
  row-gap: 12px;
}

.g-16 {
  gap: 16px;
}

.gx-16 {
  column-gap: 16px;
}

.gy-16 {
  row-gap: 16px;
}

.g-20 {
  gap: 20px;
}

.gx-20 {
  column-gap: 20px;
}

.gy-20 {
  row-gap: 20px;
}

.g-24 {
  gap: 24px;
}

.gx-24 {
  column-gap: 24px;
}

.gy-24 {
  row-gap: 24px;
}

.g-32 {
  gap: 32px;
}

.gx-32 {
  column-gap: 32px;
}

.gy-32 {
  row-gap: 32px;
}

.g-40 {
  gap: 40px;
}

.gx-40 {
  column-gap: 40px;
}

.gy-40 {
  row-gap: 40px;
}

.g-48 {
  gap: 48px;
}

.gx-48 {
  column-gap: 48px;
}

.gy-48 {
  row-gap: 48px;
}

.g-56 {
  gap: 56px;
}

.gx-56 {
  column-gap: 56px;
}

.gy-56 {
  row-gap: 56px;
}

.g-64 {
  gap: 64px;
}

.gx-64 {
  column-gap: 64px;
}

.gy-64 {
  row-gap: 64px;
}

.g-72 {
  gap: 72px;
}

.gx-72 {
  column-gap: 72px;
}

.gy-72 {
  row-gap: 72px;
}

.g-80 {
  gap: 80px;
}

.gx-80 {
  column-gap: 80px;
}

.gy-80 {
  row-gap: 80px;
}

.padding-LR-2 {
  padding: 0 2px;
}

.padding-TB-2 {
  padding: 2px 0;
}

.padding-LR-4 {
  padding: 0 4px;
}

.padding-TB-4 {
  padding: 4px 0;
}

.padding-LR-6 {
  padding: 0 6px;
}

.padding-TB-6 {
  padding: 6px 0;
}

.padding-LR-8 {
  padding: 0 8px;
}

.padding-TB-8 {
  padding: 8px 0;
}

.padding-LR-10 {
  padding: 0 10px;
}

.padding-TB-10 {
  padding: 10px 0;
}

.padding-LR-12 {
  padding: 0 12px;
}

.padding-TB-12 {
  padding: 12px 0;
}

.padding-LR-16 {
  padding: 0 16px;
}

.padding-TB-16 {
  padding: 16px 0;
}

.padding-LR-20 {
  padding: 0 20px;
}

.padding-TB-20 {
  padding: 20px 0;
}

.padding-LR-24 {
  padding: 0 24px;
}

.padding-TB-24 {
  padding: 24px 0;
}

.padding-LR-32 {
  padding: 0 32px;
}

.padding-TB-32 {
  padding: 32px 0;
}

.padding-LR-40 {
  padding: 0 40px;
}

.padding-TB-40 {
  padding: 40px 0;
}

.padding-LR-48 {
  padding: 0 48px;
}

.padding-TB-48 {
  padding: 48px 0;
}

.padding-LR-56 {
  padding: 0 56px;
}

.padding-TB-56 {
  padding: 56px 0;
}

.padding-LR-64 {
  padding: 0 64px;
}

.padding-TB-64 {
  padding: 64px 0;
}

.padding-LR-72 {
  padding: 0 72px;
}

.padding-TB-72 {
  padding: 72px 0;
}

.padding-LR-80 {
  padding: 0 80px;
}

.padding-TB-80 {
  padding: 80px 0;
}

.padding-LR-88 {
  padding: 0 88px;
}

.padding-TB-88 {
  padding: 88px 0;
}

.padding-LR-96 {
  padding: 0 96px;
}

.padding-TB-96 {
  padding: 96px 0;
}

.padding-LR-104 {
  padding: 0 104px;
}

.padding-TB-104 {
  padding: 104px 0;
}

.height-8 {
  height: 8px;
}

.height-10 {
  height: 10px;
}

.height-12 {
  height: 12px;
}

.height-16 {
  height: 16px;
}

.height-20 {
  height: 20px;
}

.height-24 {
  height: 24px;
}

.height-32 {
  height: 32px;
}

.height-40 {
  height: 40px;
}

.height-48 {
  height: 48px;
}

.height-56 {
  height: 56px;
}

.height-64 {
  height: 64px;
}

.height-72 {
  height: 72px;
}

.height-80 {
  height: 80px;
}

.height-88 {
  height: 88px;
}

.height-96 {
  height: 96px;
}

.height-104 {
  height: 104px;
}

.height-120 {
  height: 120px;
}

.height-144 {
  height: 144px;
}

/* 목록 상단 (건수 + 검색 공통) */
.listHead {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.listHead .listCount {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 2px;
}
.listHead .listCount span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .listHead .listCount span {
    font-size: 1.6rem;
  }
}
.listHead .listCount strong {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #0076DD;
}
@media (max-width: 1024px) {
  .listHead .listCount strong {
    font-size: 1.6rem;
  }
}
.listHead form {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}
.listHead .listSearch select {
  width: 100%;
}
.listHead .listSearch input[type=search] {
  width: 340px;
  max-width: 100%;
}
@media (max-width: 768px) {
  .listHead {
    gap: 0.8rem;
  }
  .listHead form {
    width: 100%;
    gap: 0.8rem;
  }
  .listHead form.listSearch.notice select {
    width: max-content;
    max-width: 100%;
    height: 3.8rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .listHead form.listSearch.notice select {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .listHead form.listSearch.notice select.faqJobSeL {
    flex: auto;
  }
  .listHead form.listSearch.notice input[type=search] {
    width: 100%;
    height: 3.8rem;
    max-height: 3.8rem;
    max-width: 100%;
    flex: auto;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .listHead form.listSearch.notice input[type=search] {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .listHead form.listSearch.notice button {
    height: 3.8rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .listHead form.listSearch.notice button {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .listHead form.listSearch.faq {
    flex-wrap: wrap;
  }
  .listHead form.listSearch.faq select {
    width: max-content;
    max-width: 100%;
    height: 3.8rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .listHead form.listSearch.faq select {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .listHead form.listSearch.faq select.faqJobSeL {
    flex: auto;
  }
  .listHead form.listSearch.faq input[type=search] {
    width: max-content;
    max-width: 100%;
    height: 3.8rem;
    max-height: 3.8rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    flex: auto;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .listHead form.listSearch.faq input[type=search] {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .listHead form.listSearch.faq button {
    height: 3.8rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .listHead form.listSearch.faq button {
    font-size: 1.6rem;
  }
}
@media (max-width: 375px) {
  .listHead form.listSearch.notice {
    flex-wrap: wrap;
  }
  .listHead form.listSearch.notice select,
  .listHead form.listSearch.notice button {
    width: 100%;
  }
  .listHead form.listSearch.faq select,
  .listHead form.listSearch.faq button {
    width: 100%;
  }
}

/* ============================
   실제 아이콘 클래스 정의
================================ */
.i_main_date {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  background-image: url("../images/fo/icons/icon_main_date.svg");
  background-repeat: no-repeat;
  background-size: 26px 26px;
  background-position: center center;
}

.i_main_number {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  background-image: url("../images/fo/icons/icon_main_number.svg");
  background-repeat: no-repeat;
  background-size: 26px 26px;
  background-position: center center;
}

.i_main_user {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  background-image: url("../images/fo/icons/icon_main_user.svg");
  background-repeat: no-repeat;
  background-size: 26px 26px;
  background-position: center center;
}

.i_menu_1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  background-image: url("../images/fo/icons/icon-graphic-monitor-setting-default.svg");
  background-repeat: no-repeat;
  background-size: 32px 32px;
  background-position: center center;
}

.i_menu_2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  background-image: url("../images/fo/icons/icon-graphic-water-default.svg");
  background-repeat: no-repeat;
  background-size: 32px 32px;
  background-position: center center;
}

.i_menu_3 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  background-image: url("../images/fo/icons/icon-graphic-water-ratate-default.svg");
  background-repeat: no-repeat;
  background-size: 32px 32px;
  background-position: center center;
}

.i_speaker {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-speaker.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_search-graph {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-search-graph.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_phone-alarm {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-phone-alarm.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_human-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-human-list.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_file-report-graph {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-file-report-graph.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_human-change {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-human-change.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_phone-mail {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-phone-mail.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_accessibility {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-accessibility.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_analytics {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-analytics.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_annotation {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-annotation.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_arrow-down {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-arrow-down.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_arrow-blue {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-arrow-blue.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_arrow-down-white {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-arrow-down-white.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_arrow-drop-down {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-arrow-drop-down.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_arrow-drop-down-primary {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-arrow-drop-down-selected.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_arrow-drop-up {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-arrow-drop-up.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_arrow-left-double {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-arrow-left-double.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_arrow-left {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-arrow-left.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_arrow-right {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-arrow-right.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_arrow-right-double {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-arrow-right-double.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_arrow-sort-both {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-arrow-sort-both.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_arrow-top {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-arrow-top.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_attach {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-attach.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_bookmarks {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-bookmarks.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_btn-more {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-btn-more.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_minis-line {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-minis-line.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_btn-more-green {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-btn-more-green.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_btn-shortcut {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-btn-shortcut.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_btn-calendar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-btn-calendar.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_btn-call {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-btn-call.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_call {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-call.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_certification_finanace {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-certification_finanace.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_certification_mobile {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-certification-mobile.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_certification_simple {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-certification_simple.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_certified {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-certified.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_calender {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-calendar.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_check_circle {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-check_circle.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_checked {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-checked.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_close {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-close.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_close-w {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-close-white.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_delete {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-delete.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_document {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-document.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_document-check {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-document-check.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_dot {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-ellipsis-horizontal.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_download {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-download.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_download-white {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-down-white.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_dummy {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-dummy.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_ecg_heart {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-ecg_heart.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_edit {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-edit.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_ellipsis_horizontal {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-ellipsis_horizontal.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_ellipsis_vertical {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-ellipsis_vertical.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_emergency {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-emergency.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_exclamation {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-exclamation.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_expand_less {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-expand_less.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_expand_more {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-expand_more.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_face_sad {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-face_sad.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_face_smile {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-face-smile.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_face_smile_gray {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-face-smile-gray.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_facebook {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-facebook.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_filter {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-filter.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_flag {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-flag.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_globe {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-globe.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_government {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-government.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_guide_check {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-guide_check.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_headphones {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-headphones.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_heart {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-heart.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_home {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-home.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_identity {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-identity.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_identity_white {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-identity-white.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_img {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-img.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_inquiry {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-inquiry.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_instagram {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-instagram.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_join {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-join.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_link {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-open-new-window.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_link_default {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-open-new-window_default.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_link_white {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-open-new-window_white.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_kakao_story {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-kakao_story.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_kakaotalk_channel {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-kakaotalk_channel.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_location_away {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-location_away.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_login {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-login.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_logout {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-logout.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_login_id_password {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-login_id_password.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_mail {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-mail.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_map {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-map.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_menu {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-menu.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_multi {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-multi.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_myinfo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-myinfo.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_naver_blog {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-naver_blog.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_play {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-play.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_point_static {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-point-static.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_printer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-printer.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_printer_white {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-printer-white.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_stop {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-stop.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_top {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-top.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_setting {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-setting.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_system-danger {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-system-danger.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_system-infomation {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-system-info.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_system-infomation-default {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-system-info-default.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_system-warning {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-system-warning.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_system-success {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-system-success.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_upload {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-upload.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_star_on {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-star-on.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_star {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-star.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_human-group {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-human-group.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_pen-board {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-pen-board.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_graph {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-graph.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_human-zoom {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-human-zoom.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_phone-wifi {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-phone-wifi.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_share {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-share.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_human-home {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-human-home.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_human-double-arrow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-human-double-arrow.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_visibility-off {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-visibility-off.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_visibility {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-visibility.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_search {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-search.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_search-w {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-search-white.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_search-primary {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-search-primary.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.i_reset {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: url("../images/fo/icons/icon-reset.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center center;
}

.icon--large {
  width: 24px;
  height: 24px;
  background-size: 24px 24px;
}
.icon--medium {
  width: 20px;
  height: 20px;
  background-size: 20px 20px;
}
.icon--small {
  width: 16px;
  height: 16px;
  background-size: 16px 16px;
}
.icon--xsmall {
  width: 12px;
  height: 12px;
  background-size: 12px 12px;
}
.icon--xxsmall {
  width: 8px;
  height: 8px;
  background-size: 8px 8px;
}
@media (max-width: 1024px) {
  .icon {
    flex: none;
  }
  .icon.i_system-infomation {
    margin-top: 0.2rem;
    width: 2rem;
    height: 2rem;
    background-size: 2rem 2rem;
  }
}

.btnWrap {
  width: 100%;
  height: auto;
}
.btnWrap .btnBox {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 0;
  outline: none;
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
  flex: none;
}
.btn span {
  transition: all 0.3s;
}
.btn:focus-visible {
  outline: 2px solid #0076DD;
  outline-offset: 2px;
}
.btn:disabled {
  cursor: default;
}
.btn--toggle {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 150%;
  color: #0076DD;
}
@media (max-width: 1024px) {
  .btn--toggle {
    font-size: 1.8rem;
  }
}
.btn--primary {
  background-color: #0076DD;
  color: #ffffff;
}
.btn--primary:hover {
  background-color: #2ab9ff;
}
.btn--primary:active {
  background-color: #0f68bc;
}
.btn--primary:disabled {
  background-color: #cdd1d5;
  color: #6d7882;
}
.btn--secondary {
  background-color: #0DA86C;
  color: #ffffff;
}
.btn--secondary:hover {
  background-color: #b5e7ec;
}
.btn--secondary:active {
  background-color: #2a9eaf;
}
.btn--secondary:disabled {
  background-color: #cdd1d5;
  color: #6d7882;
}
.btn--tertiary {
  background-color: #ffffff;
  border: 1px solid #58616a;
  color: #1e2124;
}
.btn--tertiary:hover {
  background-color: #f4f5f6;
  border: 1px solid #B1B8BE;
  color: #1e2124;
}
.btn--tertiary:active {
  background-color: #e6e8ea;
  border: 1px solid #B1B8BE;
  color: #1e2124;
}
.btn--tertiary:disabled {
  background-color: #cdd1d5;
  border: 1px solid #cdd1d5;
  color: #6d7882;
}
.btn--xlarge {
  min-width: 98px;
  min-height: 64px;
  padding: 0 24px;
  border-radius: 10px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .btn--xlarge {
    font-size: 2rem;
  }
}
.btn--large {
  min-width: 90px;
  min-height: 56px;
  padding: 0 20px;
  border-radius: 10px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .btn--large {
    font-size: 2rem;
  }
}
.btn--medium {
  min-width: 78px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 8px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .btn--medium {
    font-size: 1.8rem;
  }
}
.btn--small {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .btn--small {
    font-size: 1.6rem;
  }
}
.btn--xsmall {
  min-width: 60px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .btn--xsmall {
    font-size: 1.6rem;
  }
}
.btn--xxsmall {
  min-height: 28px;
  padding: 0 4px;
  border-radius: 8px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .btn--xxsmall {
    font-size: 1.4rem;
  }
}
.btn--xxsmall {
  border: 1px solid #C5CDE4;
  background: #F1F5FF;
}
.btn--xxxsmall {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .btn--xxxsmall {
    font-size: 1.4rem;
  }
}
.btn--xxxsmall span {
  color: #ffffff;
}
.btn--text {
  background-color: transparent;
  color: #1e2124;
}
.btn--text:hover {
  background-color: #f4f5f6;
}
.btn--text:active {
  background-color: #e6e8ea;
}
.btn--text:disabled {
  color: #6d7882;
}
.btn--text.btn--xlarge {
  min-width: 41px;
  min-height: 40px;
  padding: 0 4px;
  border-radius: 4px;
}
.btn--text.btn--large {
  min-width: 41px;
  min-height: 40px;
  padding: 0 4px;
  border-radius: 4px;
}
.btn--text.btn--medium {
  min-width: 38px;
  min-height: 32px;
  padding: 0 4px;
  border-radius: 4px;
}
.btn--text.btn--small {
  min-width: 34px;
  min-height: 24px;
  padding: 0 4px;
  border-radius: 4px;
}
.btn--text.btn--xsmall {
  min-width: 34px;
  min-height: 20px;
  padding: 0 4px;
  border-radius: 4px;
}
.btn--link {
  border-radius: 0;
}
.btn--link span.label {
  color: #0076DD;
  border-bottom: solid 1px #0076DD;
  font-size: 19px;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
}
.btn--link:hover span.label {
  color: #2ab9ff;
}
.btn--link:hover span.icon {
  background-image: url("../images/fo/icons/icon-open-new-window_hover.svg");
}
.btn--link:active span.label {
  border-bottom: 1px solid #000000;
  color: #0f68bc;
}
.btn--link:active span.icon {
  background-image: url("../images/fo/icons/icon-open-new-window_active.svg");
}
.btn--link.disabled {
  cursor: default;
}
.btn--link.disabled span.label {
  border-bottom: 1px solid #000000;
  color: #6d7882;
}
.btn--link.disabled span.icon {
  background-image: url("../images/fo/icons/icon-open-new-window_disabled.svg");
}
.btn--link span.icon {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("../images/fo/icons/icon-open-new-window.svg");
}
.btn--top {
  width: 64px;
  height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  border: 1px solid #cdd1d5;
  background: #ffffff;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.13);
}
.btn--top label {
  color: #1e2124;
  text-align: center;
}

.pagination {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
}
.pagination a {
  color: #464C53;
  transition: all 0.2s ease;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .pagination a {
    font-size: 1.6rem;
  }
}
.pagination a:hover {
  background: #f4f5f6;
}
.pagination a:active {
  background: #f4f5f6;
}
.pagination a.active {
  border: 1px solid #0076DD;
  color: #0076DD;
}
.pagination .pageNavi {
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .pagination .pageNavi {
    font-size: 1.6rem;
  }
}
.pagination .pageNavi.disabled {
  cursor: default;
  color: #8A949E;
}
.pagination .pageNavi.disabled span.i_arrow-left {
  background-image: url("../images/fo/icons/icon-arrow-left-disabled.svg");
}
.pagination .pageNavi.disabled span.i_arrow-right {
  background-image: url("../images/fo/icons/icon-arrow-right-disabled.svg");
}
.pagination .pageNavi.prev {
  padding: 0 8px 0 4px;
}
.pagination .pageNavi.next {
  padding: 0 4px 0 8px;
}
.pagination .pageLinks {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.pagination .pageLinks a {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .btnWrap {
    width: 100%;
    height: auto;
  }
  .btnWrap .btnBox {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
  }
  .btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .btn--toggle {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    color: #0076DD;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .btn--toggle {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .btn--xlarge {
    min-height: 5.2rem;
    padding: 0 1.2rem;
    border-radius: 0.8rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .btn--xlarge {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .btn--large {
    min-height: 4.4rem;
    padding: 0 1.2rem;
    border-radius: 0.8rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .btn--large {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .btn--medium {
    min-height: 3.8rem;
    padding: 0 1.2rem;
    border-radius: 0.4rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .btn--medium {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .btn--small {
    min-height: 3.2rem;
    border-radius: 4px;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .btn--small {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .btn--xsmall {
    min-height: 3.2rem;
    padding: 0 1.2rem;
    border-radius: 0.4rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .btn--xsmall {
    font-size: 1.4rem;
  }
}
.inputWrap {
  width: 100%;
  height: auto;
}
.inputWrap .inputBox {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.input {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 0;
  outline: none;
  cursor: pointer;
}
.input:disabled {
  cursor: default;
}
.input--text {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border: solid 1px #58616a;
  background-color: #ffffff;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  color: #1e2124;
}
.input--text.title {
  width: 962px;
}
.input--text::placeholder {
  color: #8a949e;
}
.input--text:focus:not(:disabled) {
  outline: 2px solid #0c82e9;
  outline-offset: 2px;
}
.input--text:disabled {
  color: #6d7882;
  border: solid 1px #58616a;
  background-color: #cdd1d5;
}
.input--text:disabled::placeholder {
  color: #6d7882;
}
.input--text:read-only:not(:disabled) {
  color: #464c53;
  border: solid 1px #58616a;
  background-color: #cdd1d5;
}
.input--text:read-only:not(:disabled)::placeholder {
  color: #464c53;
}
.input--text.error {
  border: solid 2px #de3412;
}
.input--text.error:focus {
  border: solid 2px #0076DD;
}
.input--large {
  max-height: 56px;
  padding: 13.5px 16px;
  border-radius: 10px;
  font-size: 19px;
  font-weight: 600;
}
.input--medium {
  max-height: 48px;
  padding: 11px 10px;
  border-radius: 8px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .input--medium {
    font-size: 1.8rem;
  }
}
.input--small {
  max-height: 40px;
  padding: 8.5px 10px;
  border-radius: 8px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .input--small {
    font-size: 1.6rem;
  }
}
.input--xsmall {
  width: 360px;
  max-height: 32px;
  padding: 0px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: normal;
}
.input--radio {
  width: 20px;
  height: 20px;
  border: solid 2px #58616a;
  border-radius: 50%;
  background-color: #ffffff;
  position: relative;
  margin-right: 8px;
}
.input--radio.checked {
  border: solid 6px #0076DD;
}
.input--radio:disabled {
  border: solid 2px #58616a;
  background-color: #cdd1d5;
  cursor: default;
}
.input--radio:disabled.checked {
  border: solid 6px #6d7882;
  background-color: #cdd1d5;
}
@media (max-width: 768px) {
  .input--medium {
    max-height: 3.8rem;
    padding: 0.7rem 1rem;
    border-radius: 4px;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .input--medium {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .input--small {
    max-height: 3.2rem;
    padding: 1rem;
    border-radius: 4px;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .input--small {
    font-size: 1.4rem;
  }
}

.radio input[type=radio] {
  position: absolute;
  opacity: 0;
}
.radio input[type=radio] + .radio-label {
  display: flex;
}
.radio input[type=radio] + .radio-label:before {
  content: "";
  position: relative;
  background: #ffffff;
  border-radius: 100%;
  border: 1px solid #58616a;
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  cursor: pointer;
  transition: all 0.3s ease;
}
.radio input[type=radio]:checked + .radio-label:before {
  background-color: #0076DD;
  box-shadow: inset 0 0 0 5px #ffffff;
  border-color: #0076DD;
}
.radio input[type=radio]:focus + .radio-label:before {
  outline: 2px solid #0c82e9;
  outline-offset: 2px;
  transition: none;
}
.radio input[type=radio]:disabled + .radio-label:before {
  box-shadow: inset 0 0 0 4px #cdd1d5;
  border-color: #6d7882;
  background: #6d7882;
}
.radio input[type=radio] + .radio-label:empty:before {
  margin-right: 0;
}
.radio--medium {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .radio--medium {
    font-size: 1.8rem;
  }
}
.radio--medium input[type=radio] + .radio-label:before {
  width: 20px;
  height: 20px;
}
.radio--medium input[type=radio]:checked + .radio-label:before {
  background-color: #0076DD;
  box-shadow: inset 0 0 0 3.5px #ffffff;
}
@media (max-width: 403px) {
  .radio--medium {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 403px) and (max-width: 1024px) {
  .radio--medium {
    font-size: 1.6rem;
  }
}

.checkBox input[type=checkbox] {
  position: absolute;
  opacity: 0;
}
.checkBox input[type=checkbox] + .checkbox-label {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.checkBox input[type=checkbox] + .checkbox-label:before {
  content: "";
  position: relative;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #58616a;
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  cursor: pointer;
  transition: all 0.3s ease;
  background-repeat: no-repeat;
  background-position: center;
  flex: none;
}
.checkBox input[type=checkbox]:checked + .checkbox-label:before {
  background-color: #0076DD;
  background-image: url("../images/icons/icon-check-on.svg");
  background-repeat: no-repeat;
  background-position: center;
  border-color: #0076DD;
}
.checkBox input[type=checkbox]:focus + .checkbox-label:before {
  outline: none;
  outline: 2px solid #0c82e9;
  outline-offset: 2px;
  transition: none;
}
.checkBox input[type=checkbox]:disabled + .checkbox-label:before {
  box-shadow: inset 0 0 0 0px #cdd1d5;
  border-color: #58616a;
  background: #cdd1d5;
  background-image: url("../images/icons/icon-check-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
}
.checkBox input[type=checkbox] + .checkbox-label:empty:before {
  margin-right: 0;
}
.checkBox--large input[type=checkbox] + .checkbox-label:before {
  width: 20px;
  height: 20px;
}
.checkBox--large input[type=checkbox] + .checkbox-label {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .checkBox--large input[type=checkbox] + .checkbox-label {
    font-size: 2rem;
  }
}
.checkBox--medium input[type=checkbox] + .checkbox-label:before {
  width: 20px;
  height: 20px;
}
.checkBox--medium input[type=checkbox] + .checkbox-label {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .checkBox--medium input[type=checkbox] + .checkbox-label {
    font-size: 1.8rem;
  }
}
.checkBox--small input[type=checkbox] + .checkbox-label:before {
  width: 14px;
  height: 14px;
  background-size: 8.5px;
}
.checkBox--small input[type=checkbox] + .checkbox-label {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .checkBox--small input[type=checkbox] + .checkbox-label {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .checkBox--medium input[type=checkbox] + .checkbox-label:before {
    width: 2rem;
    height: 2rem;
  }
  .checkBox--medium input[type=checkbox] + .checkbox-label {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: #131416;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .checkBox--medium input[type=checkbox] + .checkbox-label {
    font-size: 1.6rem;
  }
}
.chip {
  display: flex;
}
.chip.large {
  height: 56px;
}
.chip.large label {
  border-radius: 10px;
}
.chip.large label:before {
  width: 20px;
  height: 20px;
}
.chip.medium {
  height: 48px;
}
.chip.medium label {
  border-radius: 8px;
}
.chip.medium label:before {
  width: 16px;
  height: 16px;
}
.chip.small {
  height: 40px;
}
.chip.small label {
  border-radius: 8px;
}
.chip.small label:before {
  width: 12px;
  height: 12px;
}
.chip:has(input[type=radio]:focus-visible) {
  outline: 2px solid #0076DD;
  outline-offset: 2px;
}
.chip input[type=checkbox],
.chip input[type=radio] {
  position: absolute;
  opacity: 0;
}
.chip input[type=checkbox] + .chip-label,
.chip input[type=radio] + .chip-label {
  display: flex;
  border: 1px solid #58616a;
}
.chip input[type=checkbox] + .chip-label:before,
.chip input[type=radio] + .chip-label:before {
  content: "";
  position: relative;
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  transition: all 0.3s ease;
  background-image: url("../images/icons/icon-check-disabled-dark.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.chip input[type=checkbox]:checked + .chip-label,
.chip input[type=radio]:checked + .chip-label {
  color: #0076DD;
  border-color: #0076DD;
  background: #F4F6FA;
}
.chip input[type=checkbox]:checked + .chip-label:before,
.chip input[type=radio]:checked + .chip-label:before {
  background-image: url("../images/icons/icon-checked.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.chip input[type=checkbox]:focus + .chip-label:before,
.chip input[type=radio]:focus + .chip-label:before {
  outline: none;
  border-color: #0076DD;
}
.chip input[type=checkbox]:disabled + .chip-label,
.chip input[type=radio]:disabled + .chip-label {
  border: 1px solid #58616a;
  background: #cdd1d5;
  color: #6d7882;
}
.chip input[type=checkbox]:disabled + .chip-label:before,
.chip input[type=radio]:disabled + .chip-label:before {
  box-shadow: inset 0 0 0 0px #cdd1d5;
  border-color: #58616a;
  background: #cdd1d5;
  background-image: url("../images/icons/icon-check-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.chip input[type=checkbox] + .chip-label:empty:before,
.chip input[type=radio] + .chip-label:empty:before {
  margin-right: 0;
}

.btnCalender {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}

.btnDelete {
  display: none;
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}

.dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}
.dropdown .dropbtn {
  width: 100%;
  position: relative;
  max-width: 360px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #58616a;
  color: #8A949E;
  background: #ffffff;
  cursor: pointer;
  z-index: 1;
  transition: all 0.2s ease;
}
.dropdown .dropbtn.active {
  border: 2px solid #0076DD;
}
.dropdown .dropbtn.error {
  border: 2px solid #ff4d4f;
}
.dropdown .dropbtn.selected {
  color: #1e2124;
}
.dropdown .dropbtn.disabled {
  color: #6d7882;
  border: 1px solid #58616a;
  background: #cdd1d5;
  cursor: default;
}
.dropdown .dropbtn.disabled:hover {
  background: #cdd1d5;
}
.dropdown .dropbtn.view {
  color: #464C53;
  border: 1px solid #58616a;
  background: #cdd1d5;
  cursor: default;
}
.dropdown .dropbtn.view span {
  font-weight: 700;
}
.dropdown .dropbtn.view:hover {
  background: #cdd1d5;
}
.dropdown .dropbtn:hover {
  background: #f4f5f6;
}
.dropdown .dropbtn:active {
  background: #e6e8ea;
}
.dropdown .dropbtn--large {
  height: 56px;
  padding: 0 16px;
  border-radius: 10px;
}
.dropdown .dropbtn--medium {
  height: 48px;
  padding: 0 16px;
  border-radius: 8px;
}
.dropdown .dropbtn--small {
  height: 40px;
  padding: 0 16px;
  border-radius: 4px;
}
.dropdown .dropbtn--xsmall {
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
}
.dropdown .dropdownContent {
  width: 100%;
  display: none;
  border-radius: 8px;
  padding: 8px;
  overflow: scroll;
  border: 1px solid #cdd1d5;
  background: #ffffff;
}
.dropdown .dropdownContent.show {
  position: absolute;
  display: block;
  margin-top: 10px;
  z-index: 10;
}
.dropdown .dropdownContent::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}
.dropdown .dropdownContent::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background-color: rgb(194, 194, 194);
}
.dropdown .dropdownContent li {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: 48px;
  border-radius: 8px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .dropdown .dropdownContent li {
    font-size: 1.7rem;
  }
}
.dropdown .dropdownContent li {
  cursor: pointer;
  transition: all 0.2s ease;
}
.dropdown .dropdownContent li:hover {
  background-color: #F4F6FA;
  font-weight: 700;
}
.dropdown .dropdownContent li:active {
  background-color: #e6e8ea;
}

.toggleWrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.toggleWrap .toggleSwitch {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.toggleWrap .toggleSwitch--large [type=checkbox] ~ label .switch-toggle {
  width: 40px;
  height: 24px;
  padding: 2px;
}
.toggleWrap .toggleSwitch--large [type=checkbox] ~ label .switch-toggle > i {
  width: 20px;
  height: 20px;
  background-size: 10px;
  transform: translateX(0);
}
.toggleWrap .toggleSwitch--large [type=checkbox]:checked ~ label .switch-toggle > i {
  transform: translateX(16px);
}
.toggleWrap .toggleSwitch--medium [type=checkbox] ~ label .switch-toggle {
  width: 32px;
  height: 20px;
  padding: 0;
}
.toggleWrap .toggleSwitch--medium [type=checkbox] ~ label .switch-toggle > i {
  width: 16px;
  height: 20px;
  background-size: 8px;
  transform: translateX(2px);
}
.toggleWrap .toggleSwitch--medium [type=checkbox]:checked ~ label .switch-toggle > i {
  transform: translateX(14px);
}
.toggleWrap .toggleSwitch [type=checkbox] {
  position: absolute;
  opacity: 0;
}
.toggleWrap .toggleSwitch [type=checkbox] ~ label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.toggleWrap .toggleSwitch [type=checkbox] ~ label .switch-toggle {
  border-radius: 1000px;
  background-color: #6d7882;
  transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);
}
.toggleWrap .toggleSwitch [type=checkbox] ~ label .switch-toggle > i {
  display: inline-flex;
  border-radius: 50%;
  background-color: #ffffff;
  background-image: url("../images/icons/icon-toggle-default.svg");
  background-repeat: no-repeat;
  background-position: center;
  box-sizing: border-box;
  transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);
}
.toggleWrap .toggleSwitch [type=checkbox]:checked ~ label .switch-toggle {
  background-color: #0076DD;
}
.toggleWrap .toggleSwitch [type=checkbox]:checked ~ label .switch-toggle > i {
  border-color: #0076DD;
  background-color: #ffffff;
  background-image: url("../images/icons/icon-toggle-on.svg");
}
.toggleWrap .toggleSwitch [type=checkbox]:disabled ~ label {
  color: #8A949E;
  cursor: default;
}
.toggleWrap .toggleSwitch [type=checkbox]:disabled ~ label .switch-toggle {
  background-color: #cdd1d5;
}
.toggleWrap .toggleSwitch [type=checkbox]:disabled ~ label .switch-toggle > i {
  background-image: url("../images/icons/icon-toggle-default-disabled.svg");
  background-color: #8A949E;
}
.toggleWrap .toggleSwitch [type=checkbox]:disabled:checked ~ label .switch-toggle > i {
  background-image: url("../images/icons/icon-toggle-on-disabled.svg");
}

.textAreaBox {
  width: 100%;
}
.textAreaBox textarea {
  width: 100%;
  height: 144px;
  padding: 12px 16px;
  color: #1e2124;
  border-radius: 4px;
  border: 1px solid #58616a;
  background: #ffffff;
  resize: none;
}
.textAreaBox .textAreaInfo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.textAreaBox .textAreaInfo .message {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
}
.textAreaBox .textareaCount {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
}
.textAreaBox .textareaCount .countNow {
  color: #0076DD;
}
.textAreaBox--focus textarea {
  border: solid 2px #0076DD;
  outline: none;
}
.textAreaBox--focus .textAreaInfo .message p {
  color: #0076DD;
}
.textAreaBox--danger textarea {
  border: solid 2px #DE3412;
  outline: none;
}
.textAreaBox--danger .textAreaInfo .message p {
  color: #DE3412;
}
.textAreaBox--danger .textareaCount .countNow {
  color: #DE3412;
}
.textAreaBox--complete .textAreaInfo .message {
  color: #267337;
}
.textAreaBox--disabled textarea {
  color: #6d7882;
  border: 1px solid #58616a;
  background: #cdd1d5;
  cursor: default;
}
.textAreaBox--view textarea {
  border-radius: 8px;
  color: #464C53;
  border: 1px solid #58616a;
  background: #cdd1d5;
}

.selectBox--large {
  height: 56px;
  padding: 16px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .selectBox--large {
    font-size: 1.6rem;
  }
}
.selectBox--medium {
  height: 48px;
  padding: 0 16px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .selectBox--medium {
    font-size: 1.8rem;
  }
}
.selectBox--small {
  height: 40px;
  padding: 0 8px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .selectBox--small {
    font-size: 1.6rem;
  }
}
.selectBox--xsmall {
  height: 36px;
  padding: 0 8px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .selectBox--xsmall {
    font-size: 1.6rem;
  }
}
.selectBox {
  border-radius: 8px;
  border: 1px solid #58616a;
  background: #ffffff;
  background-image: url("../images/icons/icon-arrow-down.svg");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px 16px;
  appearance: none;
  padding-right: 32px;
}
.selectBox.disabled {
  border: 1px solid #B1B8BE;
  background: #CDD1D5;
  opacity: 1;
}
.selectBox:focus:not(:disabled) {
  outline: 2px solid #0c82e9;
  outline-offset: 2px;
}
@media (max-width: 768px) {
  .selectBox--large {
    height: 4.4rem;
    padding: 0 1rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .selectBox--large {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .selectBox--medium {
    max-height: 3.8rem;
    padding: 0.7rem 1rem;
    border-radius: 0.4rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .selectBox--medium {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .selectBox--small {
    border-radius: 0.4rem;
    height: 3.2rem;
    padding: 0 2.6rem 0 1rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .selectBox--small {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .selectBox--xsmall {
    border-radius: 0.4rem;
    height: 2.8rem;
    padding: 0 2.6rem 0 1rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .selectBox--xsmall {
    font-size: 1.4rem;
  }
}

.editor {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #58616A;
  background: #ffffff;
  overflow: hidden;
}

.error-message {
  color: #DE3412;
}

.success-message {
  color: #267337;
}

.info-message {
  color: #096AB3;
}

.dateWrap .dateBox,
.dateWrap .date-range {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.dateWrap .dateBox input[type=text],
.dateWrap .date-range input[type=text] {
  width: 150px;
  border: 1px solid #58616A;
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
  background-image: url("../images/icons/icon-calendar.svg");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.dateWrap .dateBox input[type=text]:focus,
.dateWrap .date-range input[type=text]:focus {
  outline: 2px solid #0c82e9;
  outline-offset: 2px;
}
@media (max-width: 768px) {
  .dateWrap .dateBox input[type=text],
  .dateWrap .date-range input[type=text] {
    width: 100%;
    border-radius: 4px;
    background-position: right 0.8rem center;
    background-size: 2rem 2rem;
  }
}

.flatpickr-calendar {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  min-width: 320px;
  min-height: max-content;
  padding: 20px 20px 88px !important;
  border-radius: 12px;
  border: solid 1px #cdd1d5;
  background-color: #ffffff;
  display: none;
}
.flatpickr-calendar:before, .flatpickr-calendar:after {
  content: none;
}
.flatpickr-calendar .flatpickr-months {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 56px;
}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month, .flatpickr-calendar .flatpickr-months .flatpickr-next-month {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: unset;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: solid 0.8px #cdd1d5;
  background-color: rgba(255, 255, 255, 0);
}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg {
  fill: #0076DD;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 40px;
  overflow: unset;
  z-index: 100;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month {
  padding-top: 0;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .flatpickr-year-select,
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .flatpickr-monthDropdown-months {
  width: 58px;
  height: 100%;
  padding: 0;
  margin: 0;
  font-size: 19px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  color: #1e2124;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .numInputWrapper {
  width: 80px;
  height: 100%;
  padding: 0;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .numInputWrapper input {
  height: 100%;
  font-size: 19px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  color: #1e2124;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .year-dropdown {
  position: relative;
  display: inline-block;
  width: 80px;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .year-dropdown .year-dropbtn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 40px;
  padding: 0 8px;
  border: none;
  background-color: transparent;
  font-size: 19px;
  font-weight: bold;
  color: #1e2124;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .year-dropdown .year-dropbtn:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .year-dropdown .year-dropbtn:active {
  background-color: #e6e8ea;
  border-radius: 4px;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .year-dropdown .year-dropbtn.focus {
  box-shadow: 0px 0px 0px 1px #0076DD;
  border-radius: 4px;
  border-radius: 4px;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .year-dropdown .year-dropbtn.focus span {
  color: #0076DD;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .year-dropdown .year-dropbtn.focus span.i_arrow-drop-down {
  background-image: url("../images/icons/icon-arrow-drop-down-selected.svg");
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .year-dropdown .year-dropbtn .year-dropbtn-content {
  display: block;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .year-dropdown .year-dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  max-height: 240px;
  overflow-y: auto;
  background-color: #ffffff;
  border: 1px solid #cdd1d5;
  border-radius: 8px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  margin-top: 4px;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .year-dropdown .year-dropdown-content::-webkit-scrollbar {
  width: 6px;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .year-dropdown .year-dropdown-content::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: #cbd5e1;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .year-dropdown .year-dropdown-content.show {
  display: block;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .year-dropdown .year-dropdown-content .year-item {
  padding: 10px 12px;
  font-size: 15px;
  color: #1e2124;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .year-dropdown .year-dropdown-content .year-item:hover {
  background-color: #f4f6fa;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .year-dropdown .year-dropdown-content .year-item.selected {
  background-color: #0076DD;
  color: #ffffff;
  font-weight: bold;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .month-dropdown {
  position: relative;
  display: inline-block;
  width: 58px;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .month-dropdown .month-dropbtn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 40px;
  padding: 0 8px;
  border: none;
  background-color: transparent;
  font-size: 19px;
  font-weight: bold;
  color: #1e2124;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .month-dropdown .month-dropbtn:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .month-dropdown .month-dropbtn:active {
  background-color: #e6e8ea;
  border-radius: 4px;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .month-dropdown .month-dropbtn.focus {
  box-shadow: 0px 0px 0px 1px #0076DD;
  border-radius: 4px;
  border-radius: 4px;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .month-dropdown .month-dropbtn.focus span {
  color: #0076DD;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .month-dropdown .month-dropbtn.focus span.i_arrow-drop-down {
  background-image: url("../images/icons/icon-arrow-drop-down-selected.svg");
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .month-dropdown .month-dropbtn .month-dropbtn-content {
  display: block;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .month-dropdown .month-dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  max-height: 200px;
  overflow-y: auto;
  background-color: #ffffff;
  border: 1px solid #cdd1d5;
  border-radius: 8px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  margin-top: 4px;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .month-dropdown .month-dropdown-content::-webkit-scrollbar {
  width: 6px;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .month-dropdown .month-dropdown-content::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: #cbd5e1;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .month-dropdown .month-dropdown-content.show {
  display: block;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .month-dropdown .month-dropdown-content .month-item {
  padding: 10px 12px;
  font-size: 15px;
  color: #1e2124;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .month-dropdown .month-dropdown-content .month-item:hover {
  background-color: #f4f6fa;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .month-dropdown .month-dropdown-content .month-item.selected {
  background-color: #0076DD;
  color: #ffffff;
  font-weight: bold;
}
.flatpickr-calendar .flatpickr-innerContainer {
  justify-content: center;
}
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-monthSelect-month {
  margin: 1.5% !important;
  width: 30% !important;
}
.flatpickr-calendar {
  /* YYYY-MM 월만 선택하는 달력 (납기년월/조회기간) - initMonthPickerRange 사용 시 */
  /* footer 영역 */
}
.flatpickr-calendar .flatpickr-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px 24px;
  border-top: solid 1px #cdd1d5;
  box-sizing: border-box;
}
.flatpickr-calendar .flatpickr-footer .today-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 24px;
  flex-grow: 0;
  gap: 2px;
  padding: 0 4px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0);
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  color: #1e2124;
  border: 0;
  outline: none;
  cursor: pointer;
}
.flatpickr-calendar .flatpickr-footer .buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.flatpickr-calendar .flatpickr-footer .buttons button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 40px;
  flex-grow: 0;
  padding: 0 12px;
  color: #1e2124;
  border-radius: 8px;
  border: solid 1px #B1B8BE;
  background-color: rgba(255, 255, 255, 0);
  cursor: pointer;
}
.flatpickr-calendar .flatpickr-footer .buttons button.apply-btn {
  color: #ffffff;
  border: solid 1px #0076DD;
  background-color: #0076DD;
}
.flatpickr-calendar.flatpickr-calendar--monthOnly {
  min-height: auto;
  padding: 20px !important;
}
.flatpickr-calendar.flatpickr-calendar--monthOnly .flatpickr-innerContainer {
  min-height: auto;
}
.flatpickr-calendar.flatpickr-calendar--monthOnly .flatpickr-weekdays,
.flatpickr-calendar.flatpickr-calendar--monthOnly .flatpickr-days {
  display: none;
}

.modalWrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 80;
}
.modalWrap.hidden {
  display: none;
}
.modalWrap .modal {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 1024px;
  max-height: 75%;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}
.modalWrap .modal.contents-1000 {
  width: 1000px;
  min-height: 296px;
}
.modalWrap .modal.contents {
  width: 560px;
  min-height: 296px;
}
.modalWrap .modal.contents.common {
  min-height: auto;
}
.modalWrap .modal.alerts {
  width: 400px;
  min-height: 296px;
}
.modalWrap .modal.alerts .textBox {
  text-align: center;
}
.modalWrap .modal div.textBox {
  width: 100%;
  height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 12px 24px;
  text-align: left;
  background: linear-gradient(180deg, #2972C9 0%, #4B8AD9 100%);
}
.modalWrap .modal div.textBox h4 {
  width: 100%;
  justify-content: space-between;
}
.modalWrap .modal div.textBox h4 span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #ffffff;
}
@media (max-width: 1024px) {
  .modalWrap .modal div.textBox h4 span {
    font-size: 2.2rem;
  }
}
.modalWrap .modal .modalContent {
  width: 100%;
  max-height: 728px;
  padding: 20px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
}
.modalWrap .modal .modalContent .tabWrap {
  gap: 12px;
}
.modalWrap .modal .modalContent .col {
  width: 100%;
}
.modalWrap .modal .modalContent .box {
  gap: 12px;
  padding: 24px;
}
.modalWrap .modal .modalContent .box.info-box {
  padding-left: 130px;
}
.modalWrap .modal .modalContent .box.noBorder {
  border: none;
  padding: 0;
}
.modalWrap .modal .modalContent .box h4,
.modalWrap .modal .modalContent .box h5 {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .modalWrap .modal .modalContent .box h4,
  .modalWrap .modal .modalContent .box h5 {
    font-size: 1.8rem;
  }
}
.modalWrap .modal .modalContent .box h5.title {
  width: 100%;
  justify-content: space-between;
}
.modalWrap .modal .modalContent .box h5.mnTitle {
  margin-bottom: 4px;
}
.modalWrap .modal .modalContent .box .alertTitle {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.modalWrap .modal .modalContent .box p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .modalWrap .modal .modalContent .box p {
    font-size: 1.6rem;
  }
}
.modalWrap .modal .modalContent .box .tabWrap {
  gap: 20px;
}
.modalWrap .modal .modalContent .box .info01 li {
  padding-left: 0;
}
.modalWrap .modal .modalContent .box .info01 li.color_primary {
  color: #0076DD;
}
.modalWrap .modal .modalContent .box .alertList {
  gap: 0;
}
.modalWrap .modal .modalContent .box .alertList li {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal .modalContent .box .alertList li {
    font-size: 1.4rem;
  }
}
.modalWrap .modal .modalContent .box > div {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
}
.modalWrap .modal .modalContent .box > div.row {
  flex-direction: row;
}
.modalWrap .modal .modalContent .box > div.pagination {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.modalWrap .modal .modalContent .box > div .bgMap {
  width: 100%;
  height: 300px;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.modalWrap .modal .modalContent .box .modalTable {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-top: 1px solid #6787C9;
}
.modalWrap .modal .modalContent .box .modalTable.maxTable th,
.modalWrap .modal .modalContent .box .modalTable.maxTable td {
  padding: 9.5px 8px;
}
.modalWrap .modal .modalContent .box .modalTable.center th,
.modalWrap .modal .modalContent .box .modalTable.center td {
  text-align: center;
  word-wrap: break-word;
}
.modalWrap .modal .modalContent .box .modalTable.hidden {
  display: none;
}
.modalWrap .modal .modalContent .box .modalTable tr {
  border-bottom: 1px solid #CDD1D5;
}
.modalWrap .modal .modalContent .box .modalTable tr.total th,
.modalWrap .modal .modalContent .box .modalTable tr.total td {
  border-top: 1px solid #0076DD;
  border-bottom: 1px solid #0076DD;
}
.modalWrap .modal .modalContent .box .modalTable tr.total th {
  background: linear-gradient(0deg, #ECF2FE 0%, #ECF2FE 100%), #FFFFFF !important;
  border-right: none !important;
}
.modalWrap .modal .modalContent .box .modalTable tr.total td {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #0076DD;
}
@media (max-width: 1024px) {
  .modalWrap .modal .modalContent .box .modalTable tr.total td {
    font-size: 1.6rem;
  }
}
.modalWrap .modal .modalContent .box .modalTable tr th,
.modalWrap .modal .modalContent .box .modalTable tr td {
  padding: 12px 16px;
}
.modalWrap .modal .modalContent .box .modalTable tr th:first-child {
  border-left: none;
}
.modalWrap .modal .modalContent .box .modalTable tr th:last-child {
  border-right: none;
}
.modalWrap .modal .modalContent .box .modalTable tr th {
  background: #F9FAFB;
  border-left: 1px solid #CDD1D5;
  border-right: 1px solid #CDD1D5;
  text-align: left;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .modalWrap .modal .modalContent .box .modalTable tr th {
    font-size: 1.4rem;
  }
}
.modalWrap .modal .modalContent .box .modalTable tr th.amountResult {
  background: #ECF2FE;
  color: #0076DD;
}
.modalWrap .modal .modalContent .box .modalTable tr td {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal .modalContent .box .modalTable tr td {
    font-size: 1.6rem;
  }
}
.modalWrap .modal .modalContent .box .modalTable tr td .divider {
  display: inline-block;
  width: 1px;
  height: 25px;
  background: #CDD1D5;
}
.modalWrap .modal .modalContent .box .modalTable tr td.amountResult {
  color: #0076DD;
}
.modalWrap .modal .modalContent .box .modalTable tr td.no-data {
  text-align: center;
}
.modalWrap .modal .modalContent .box .modalTable tr td {
  border-right: 1px solid #CDD1D5;
}
.modalWrap .modal .modalContent .box .modalTable tr td:last-child {
  border-right: none;
}
.modalWrap .modal .modalContent .box .modalTable.sudoResultTable th,
.modalWrap .modal .modalContent .box .modalTable.sudoResultTable td {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.modalWrap .modal .modalContent .box .serviceCheck {
  padding-bottom: 16px;
}
.modalWrap .modal .modalContent .box p.guidelines {
  display: flex;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #096AB3;
}
@media (max-width: 1024px) {
  .modalWrap .modal .modalContent .box p.guidelines {
    font-size: 1.4rem;
  }
}
.modalWrap .modal div.btnBox {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0 !important;
  flex-wrap: wrap;
}
.modalWrap .modal div.btnBox .m-trans {
  display: none;
}
.modalWrap .modal .calBtnBox {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.modalWrap .modal.redundancy {
  width: 560px;
}
.modalWrap .modal.redundancy .idCheck {
  width: 100%;
  display: flex;
  flex-direction: row !important;
  justify-content: flex-start;
  align-items: flex-start;
}
.modalWrap .modal.redundancy .idCheck input {
  flex: 1 0 0;
}
.modalWrap .modal.hmvCalcResult .checkBox {
  position: relative;
}
.modalWrap .modal.hmvCalcResult .checkBox input[type=checkbox] {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.modalWrap .modal.hmvCalcResult .userInfo {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px 8px 8px;
  gap: 8px;
}
.modalWrap .modal.hmvCalcResult .userInfo div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}
.modalWrap .modal.hmvCalcResult .userInfo div p,
.modalWrap .modal.hmvCalcResult .userInfo div label {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.hmvCalcResult .userInfo div p,
  .modalWrap .modal.hmvCalcResult .userInfo div label {
    font-size: 1.6rem;
  }
}
.modalWrap .modal.hmvCalcResult .box div .verification {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}
.modalWrap .modal.hmvCalcResult .box div .detailTitle {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.modalWrap .modal.hmvCalcResult .box div .detailTitle button {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 150%;
  color: #0076DD;
}
@media (max-width: 1024px) {
  .modalWrap .modal.hmvCalcResult .box div .detailTitle button {
    font-size: 1.8rem;
  }
}
.modalWrap .modal.hmvCalcResult .box div .detailTitle button.open::after {
  transform: rotate(180deg);
}
.modalWrap .modal.hmvCalcResult .box div .detailTitle button::after {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../images/fo/icons/icon-arrow-drop-down-selected.svg) no-repeat center right;
  display: flex;
  transition: all 0.2s;
}
.modalWrap .modal.hmvCalcResult .box div td .minwonBtnBox {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.modalWrap .modal.hmvCalcResult .box div td .serviceBox {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.modalWrap .modal.hmvCalcResult .hmvCalcResultWrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}
.modalWrap .modal.selBizTypeModal .bizTypeWrapPc {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.modalWrap .modal.SelfExamination .SelfExaminationWrap {
  display: flex;
  flex-direction: row !important;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 32px !important;
}
.modalWrap .modal.SelfExamination .exampleImg {
  display: flex;
  width: 386px;
  height: 290px;
  border-radius: 12px;
  overflow: hidden;
  background: url("../images/fo/owngc/bg_exampleImg.png") no-repeat top center;
  background-size: cover;
  flex: none;
}
.modalWrap .modal.SelfExamination .exampleImg > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 384px;
  padding: 12px 8px;
  background: rgba(35, 169, 112, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  margin-top: auto;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
}
.modalWrap .modal.SelfExamination .exampleImg > div strong {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #ffffff;
}
@media (max-width: 1024px) {
  .modalWrap .modal.SelfExamination .exampleImg > div strong {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.SelfExamination .exampleImg > div p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #ffffff;
}
@media (max-width: 1024px) {
  .modalWrap .modal.SelfExamination .exampleImg > div p {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.SelfExamination > button {
  margin: 0 auto;
}
.modalWrap .modal.guideARS .modalContent {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
}
.modalWrap .modal.guideARS .modalContent .info .infoWrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 48px;
}
.modalWrap .modal.guideARS .modalContent .info .infoWrap .number {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-right: 1px solid #BAC3D5;
  padding: 0 24px;
}
.modalWrap .modal.guideARS .modalContent .info .infoWrap .number strong {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #0076DD;
}
@media (max-width: 1024px) {
  .modalWrap .modal.guideARS .modalContent .info .infoWrap .number strong {
    font-size: 2.2rem;
  }
}
.modalWrap .modal.guideARS .modalContent .info .infoWrap .number p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #0076DD;
}
@media (max-width: 1024px) {
  .modalWrap .modal.guideARS .modalContent .info .infoWrap .number p {
    font-size: 1.6rem;
  }
}
.modalWrap .modal.guideARS .modalContent .info .infoWrap .number div {
  width: 72px;
  height: 72px;
  margin: 0 auto 4px;
  text-align: center;
  background: url("../images/fo/owngc/bg_ars.png") no-repeat center;
}
.modalWrap .modal.guideARS .modalContent .info .infoWrap .callGuide {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
}
.modalWrap .modal.guideARS .modalContent .info .infoWrap .callGuide span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #0DA86C;
}
@media (max-width: 1024px) {
  .modalWrap .modal.guideARS .modalContent .info .infoWrap .callGuide span {
    font-size: 1.6rem;
  }
}
.modalWrap .modal.guideARS .modalContent .option {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}
.modalWrap .modal.guideARS .modalContent .option > div {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.modalWrap .modal.guideARS .modalContent .option > div .type {
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.modalWrap .modal.guideARS .modalContent .option > div .type p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.guideARS .modalContent .option > div .type p {
    font-size: 1.6rem;
  }
}
.modalWrap .modal.guideARS .modalContent .option > div .type span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #0DA86C;
}
@media (max-width: 1024px) {
  .modalWrap .modal.guideARS .modalContent .option > div .type span {
    font-size: 1.6rem;
  }
}
.modalWrap .modal.guideARS .modalContent .option > div .ss {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.modalWrap .modal.guideARS .modalContent .option > div .detail {
  height: 228px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  word-break: break-all;
}
.modalWrap .modal.guideARS .modalContent .badge {
  height: 43px;
  padding: 8px 20px;
  border-radius: 1000px;
  border: 2px solid;
}
.modalWrap .modal.mainPopup {
  width: 100%;
  max-height: unset;
  box-sizing: border-box;
  background: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
}
.modalWrap .modal.mainPopup .todayHide {
  padding: 12px 24px;
  border-radius: 1000px;
  background: #ffffff;
}
.modalWrap .modal.mainPopup .todayHide label {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.modalWrap .modal.mainPopup .popupWrap {
  width: 100%;
  max-width: 1600px;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  border-radius: 20px;
}
.modalWrap .modal.mainPopup .popupWrap .surveryWrap,
.modalWrap .modal.mainPopup .popupWrap .popupMedium {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
}
.modalWrap .modal.mainPopup .popupWrap .surveryWrap .popupSwiper,
.modalWrap .modal.mainPopup .popupWrap .popupMedium .popupSwiper {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  overflow: hidden;
  transition: all 0.3s ease-out;
}
.modalWrap .modal.mainPopup .popupWrap .surveryWrap .popupSlides,
.modalWrap .modal.mainPopup .popupWrap .popupMedium .popupSlides {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.modalWrap .modal.mainPopup .popupWrap .surveryWrap .popupSlides.is-less-than-3,
.modalWrap .modal.mainPopup .popupWrap .popupMedium .popupSlides.is-less-than-3 {
  justify-content: center;
}
.modalWrap .modal.mainPopup .popupWrap .surveryWrap .popupSlides .swiper-slide,
.modalWrap .modal.mainPopup .popupWrap .popupMedium .popupSlides .swiper-slide {
  box-sizing: border-box;
  position: relative;
  padding: 16px 8px 16px 16px;
  border: 1px solid #b1b8be;
  background: #fff;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.13), 0 8px 16px 0 rgba(0, 0, 0, 0.16);
  border-radius: 20px !important;
  overflow: hidden;
  flex: 0 0 auto;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 132px);
}
.modalWrap .modal.mainPopup .popupWrap .surveryWrap .popupSlides .swiper-slide .mainPopupLink,
.modalWrap .modal.mainPopup .popupWrap .popupMedium .popupSlides .swiper-slide .mainPopupLink {
  display: block;
  width: 100%;
  height: 100%;
}
.modalWrap .modal.mainPopup .popupWrap .surveryWrap .popupSlides .swiper-slide .mainPopupImage,
.modalWrap .modal.mainPopup .popupWrap .popupMedium .popupSlides .swiper-slide .mainPopupImage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.modalWrap .modal.mainPopup .popupWrap .surveryWrap .popupSlides .swiper-slide .mainPopupText,
.modalWrap .modal.mainPopup .popupWrap .popupMedium .popupSlides .swiper-slide .mainPopupText {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  height: 100%;
  overflow-y: auto;
  padding-right: 8px;
}
.modalWrap .modal.mainPopup .popupWrap .surveryWrap .popupSlides .swiper-slide .mainPopupText .mainPopupItemList,
.modalWrap .modal.mainPopup .popupWrap .popupMedium .popupSlides .swiper-slide .mainPopupText .mainPopupItemList {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
.modalWrap .modal.mainPopup .popupWrap .surveryWrap .popupSlides .swiper-slide > .mainPopupItemList,
.modalWrap .modal.mainPopup .popupWrap .popupMedium .popupSlides .swiper-slide > .mainPopupItemList {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px;
  overflow-wrap: anywhere;
}
.modalWrap .modal.mainPopup .popupWrap .surveryWrap .popupSlides .swiper-slide.mainPopupSlide--has-items,
.modalWrap .modal.mainPopup .popupWrap .popupMedium .popupSlides .swiper-slide.mainPopupSlide--has-items {
  overflow-y: auto;
}
.modalWrap .modal.mainPopup .popupWrap .surveryWrap .popupSlides .swiper-slide.mainPopupSlide--has-items .mainPopupLink,
.modalWrap .modal.mainPopup .popupWrap .surveryWrap .popupSlides .swiper-slide.mainPopupSlide--has-items .mainPopupImage,
.modalWrap .modal.mainPopup .popupWrap .popupMedium .popupSlides .swiper-slide.mainPopupSlide--has-items .mainPopupLink,
.modalWrap .modal.mainPopup .popupWrap .popupMedium .popupSlides .swiper-slide.mainPopupSlide--has-items .mainPopupImage {
  height: auto;
}
.modalWrap .modal.mainPopup .popupWrap .surveryWrap .popupSlides .swiper-slide .mainPopupContents,
.modalWrap .modal.mainPopup .popupWrap .popupMedium .popupSlides .swiper-slide .mainPopupContents {
  width: 100%;
}
.modalWrap .modal.mainPopup .popupWrap .surveryWrap .navi,
.modalWrap .modal.mainPopup .popupWrap .popupMedium .navi {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 40px;
  margin-left: 0;
  transform: translate(-50%, -50%);
}
.modalWrap .modal.mainPopup .popupWrap .surveryWrap .navi .swiper-button-prev,
.modalWrap .modal.mainPopup .popupWrap .surveryWrap .navi .swiper-button-next,
.modalWrap .modal.mainPopup .popupWrap .popupMedium .navi .swiper-button-prev,
.modalWrap .modal.mainPopup .popupWrap .popupMedium .navi .swiper-button-next {
  width: 40px;
  height: 40px;
  margin-top: unset;
  top: 0;
}
.modalWrap .modal.mainPopup .popupWrap .surveryWrap .navi .swiper-button-prev,
.modalWrap .modal.mainPopup .popupWrap .popupMedium .navi .swiper-button-prev {
  left: 0;
}
.modalWrap .modal.mainPopup .popupWrap .surveryWrap .navi .swiper-button-next,
.modalWrap .modal.mainPopup .popupWrap .popupMedium .navi .swiper-button-next {
  right: 0;
}
.modalWrap .modal.mainPopup .popupWrap .surveryWrap .swiper-pagination,
.modalWrap .modal.mainPopup .popupWrap .popupMedium .swiper-pagination {
  top: unset;
  bottom: 0px;
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  position: absolute;
  width: 100% !important;
  height: max-content;
  margin-left: 0;
  transform: translate(-50%, 0%);
  z-index: 2;
  padding: 0;
}
.modalWrap .modal.mainPopup .popupWrap .surveryWrap .swiper-pagination span,
.modalWrap .modal.mainPopup .popupWrap .popupMedium .swiper-pagination span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.mainPopup .popupWrap .surveryWrap .swiper-pagination span,
  .modalWrap .modal.mainPopup .popupWrap .popupMedium .swiper-pagination span {
    font-size: 1.6rem;
  }
}
.modalWrap .modal.mainPopup .popupWrap .surveryWrap .swiper-pagination span,
.modalWrap .modal.mainPopup .popupWrap .popupMedium .swiper-pagination span {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #ffffff;
  background: #ffffff;
  border-radius: 1000px;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.13);
}
.modalWrap .modal.mainPopup .popupWrap .surveryWrap .swiper-pagination span.swiper-pagination-bullet-active,
.modalWrap .modal.mainPopup .popupWrap .popupMedium .swiper-pagination span.swiper-pagination-bullet-active {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: #0076DD;
  color: #ffffff;
}
.modalWrap .modal.mainPopup .popupWrap .surveryWrap > .swiper-button-toggle,
.modalWrap .modal.mainPopup .popupWrap .popupMedium > .swiper-button-toggle {
  position: absolute;
  right: 0;
  bottom: 0px;
  transform: translateX(-50%);
  display: flex;
  z-index: 90;
}
.modalWrap .modal.mainPopup .popupWrap .surveryWrap > .swiper-button-toggle::before,
.modalWrap .modal.mainPopup .popupWrap .popupMedium > .swiper-button-toggle::before {
  content: "";
  width: 24px;
  height: 24px;
  background-image: url("../../images/fo/icons/icon_main_stop.svg");
}
.modalWrap .modal.mainPopup .popupWrap .surveryWrap > .swiper-button-toggle.is-paused::before,
.modalWrap .modal.mainPopup .popupWrap .popupMedium > .swiper-button-toggle.is-paused::before {
  background-image: url("../../images/fo/icons/icon-play.svg");
}
.modalWrap .modal.mainPopup .popupWrap .popupMedium {
  padding-bottom: 60px;
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup {
  overflow: visible;
  justify-content: center;
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  width: 530px;
  max-width: calc(100vw - 32px);
  height: 470px;
  max-height: calc(100vh - 132px);
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: 999;
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper {
  flex: 1 1 auto;
  min-height: 0;
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  box-sizing: border-box;
  border-radius: 20px;
  gap: 16px;
  padding: 20px 8px;
  overflow: hidden;
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyIntro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex: 1 1 auto;
  gap: 18px;
  overflow-y: auto;
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyIntro .mainSurveyBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  gap: 24px;
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyIntro .mainSurveyBox .surveryTitle {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyIntro .mainSurveyBox .surveryTitle {
    font-size: 1.8rem;
  }
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyIntro .mainSurveyBox .surveryTitle {
  width: calc(100% - 48px);
  min-height: 46px;
  padding: 9px 22px;
  border-radius: 999px;
  background: #1f7fe5;
  color: #fff;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyIntro .mainSurveyBox .surveryContent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  padding: 0 6px;
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyIntro .mainSurveyBox .surveryContent > div {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyIntro .mainSurveyBox .surveryContent > div {
    font-size: 1.8rem;
  }
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyIntro .mainSurveyBox .surveryContent > div {
  white-space: pre-line;
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyIntro .btnBox {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyIntro .btnBox .mainSurveyStart {
  min-width: 104px;
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyForm {
  display: none;
  flex-direction: column;
  gap: 20px;
  min-height: 100%;
  overflow-y: scroll;
  padding: 0 8px;
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyForm .title {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  background: #eef5ff;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #0076DD;
}
@media (max-width: 1024px) {
  .modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyForm .title {
    font-size: 1.8rem;
  }
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyForm h5 {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyForm h5 {
    font-size: 1.8rem;
  }
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyForm .questionList {
  padding: 0 12px;
  border-radius: 20px;
  background: #f7f9fc;
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyForm .questionList .surveyQuestionRow {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid #e5ebf3;
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyForm .questionList .surveyQuestionRow:first-child {
  border-top: none;
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyForm .questionList .surveyQuestionRow label.qustSeq {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyForm .questionList .surveyQuestionRow label.qustSeq {
    font-size: 1.6rem;
  }
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyForm .questionList .surveyQuestionRow select {
  width: 100%;
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyForm .questionList .surveyQuestionRow .ansArea {
  width: 100% !important;
  height: 200px !important;
  min-height: 200px !important;
  resize: none !important;
  overflow-y: auto;
  border: 1px solid #cfd6e4;
  border-radius: 10px;
  background: #ffffff;
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyForm .mainSurveySubmit {
  align-self: center;
  width: auto;
  min-width: 104px;
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap > .navi {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 104px);
  height: 40px;
  margin-left: 0;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap > .navi .btnWrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap > .navi .btnWrap .swiper-button-prev,
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap > .navi .btnWrap .swiper-button-next {
  position: static;
  margin-top: 0;
  display: flex !important;
  pointer-events: auto;
  opacity: 1;
}
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap > .navi .btnWrap .swiper-button-disabled,
.modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap > .navi .btnWrap .swiper-button-lock {
  display: flex !important;
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.modalWrap .modal.mainSearch {
  width: 920px;
  background: none;
}
.modalWrap .modal.mainSearch .schForm {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.modalWrap .modal.mainSearch .schForm .inputSearch {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: 20px;
  background: #ffffff;
}
.modalWrap .modal.mainSearch .schForm .inputSearch .inputArea {
  position: relative;
  flex: 1;
  min-width: 0;
  margin: 0 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.modalWrap .modal.mainSearch .schForm .inputSearch .inputArea input {
  flex: 1;
  min-width: 0;
  width: auto;
  height: 48px;
  border: none;
}
.modalWrap .modal.mainSearch .schForm .inputSearch .inputArea input:focus-visible {
  outline: 2px solid #0c82e9;
  outline-offset: 2px;
}
.modalWrap .modal.mainSearch .schForm .inputSearch .inputArea .seoulSearchClearBtn {
  position: absolute;
  right: 0;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 1000px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.modalWrap .modal.mainSearch .schForm .inputSearch .inputArea .seoulSearchClearBtn:hover, .modalWrap .modal.mainSearch .schForm .inputSearch .inputArea .seoulSearchClearBtn:focus-visible {
  background: #f4f5f6;
}
.modalWrap .modal.mainSearch .schForm .inputSearch .inputArea .seoulSearchClearBtn[hidden] {
  display: none;
}
.modalWrap .modal.mainSearch .schForm .inputSearch .inputArea .seoulSearchClearBtn span.i_close {
  width: 20px;
  height: 20px;
  background-size: 20px 20px;
}
.modalWrap .modal.mainSearch .schForm .inputSearch span.i_search-primary {
  width: 40px;
  height: 40px;
  background-size: 40px 40px;
}
.modalWrap .modal.mainSearch .schForm .popularSearch {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border-radius: 20px;
  background: #ffffff;
}
.modalWrap .modal.mainSearch .schForm .popularSearch p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .modalWrap .modal.mainSearch .schForm .popularSearch p {
    font-size: 2.2rem;
  }
}
.modalWrap .modal.mainSearch .schForm .popularSearch ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.modalWrap .modal.mainSearch .schForm .popularSearch ul li {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.mainSearch .schForm .popularSearch ul li {
    font-size: 1.6rem;
  }
}
.modalWrap .modal.mainNoticePopupModal {
  width: min(640px, 100% - 40px);
  max-width: 640px;
  padding: 0;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
  align-items: stretch;
  gap: 0;
}
.modalWrap .modal.mainNoticePopupModal .mainNoticePopupPreview {
  width: 100%;
  padding: 32px;
  box-sizing: border-box;
}
.modalWrap .modal.mainNoticePopupModal .mainNoticePopupTitle {
  margin: 0 0 16px;
  color: #111;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  word-break: keep-all;
}
.modalWrap .modal.mainNoticePopupModal .mainNoticePopupSubTitle {
  margin: 0 0 20px;
  color: #0da86c;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  word-break: keep-all;
}
.modalWrap .modal.mainNoticePopupModal .mainNoticePopupItemList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modalWrap .modal.mainNoticePopupModal .mainNoticePopupItemWrap {
  width: 100%;
}
.modalWrap .modal.mainNoticePopupModal .mainNoticePopupItem,
.modalWrap .modal.mainNoticePopupModal .mainNoticePopupEmpty {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d5dde5;
  border-radius: 8px;
  background: #f8fafc;
  box-sizing: border-box;
  color: #005bac;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.modalWrap .modal.mainNoticePopupModal .popupItemStyled {
  display: block;
  max-width: 100%;
}
.modalWrap .modal.mainNoticePopupModal .mainNoticePopupEmpty {
  color: #555;
  text-align: center;
}
.modalWrap .modal.mainNoticePopupModal .mainNoticePopupActions {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
@media (max-width: 768px) {
  .modalWrap .modal.mainNoticePopupModal .mainNoticePopupPreview {
    padding: 24px 20px;
  }
  .modalWrap .modal.mainNoticePopupModal .mainNoticePopupTitle {
    font-size: 20px;
  }
}
.modalWrap .modal.calList .hmvDetailValueTable {
  table-layout: fixed;
}
.modalWrap .modal.calList .hmvDetailValueTable th,
.modalWrap .modal.calList .hmvDetailValueTable td {
  padding-left: 6px;
  padding-right: 6px;
}
.modalWrap .modal.calList .hmvDetailValueTable td {
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-word;
}
.modalWrap .modal.findNumber .inputBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
}
.modalWrap .modal.findNumber .inputBox .address {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
}
.modalWrap .modal.findNumber .inputBox .address.inputWrap .item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 32px;
}
.modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div input,
.modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div select,
.modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div p,
.modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div label {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div input,
  .modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div select,
  .modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div p,
  .modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div label {
    font-size: 1.6rem;
  }
}
.modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div .mkeyNumberInput {
  text-align: center;
}
.modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div.detail {
  gap: 20px;
}
.modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div.detail > div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.modalWrap .modal.findNumber .btn {
  margin: 4px auto;
}
.modalWrap .modal.findNumber .resultBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
}
.modalWrap .modal.findNumber .resultBox h4 {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.findNumber .resultBox h4 {
    font-size: 1.8rem;
  }
}
.modalWrap .modal.findNumber .resultBox table {
  width: 100%;
}
.modalWrap .modal.paymentInfo {
  width: 1024px;
}
.modalWrap .modal.paymentInfo .modalContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-height: calc(100vh - 77px);
  gap: 16px;
  padding: 32px;
}
.modalWrap .modal.paymentInfo .modalContent > div {
  width: 100%;
}
.modalWrap .modal.paymentInfo .modalContent .info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.modalWrap .modal.paymentInfo .modalContent .info > div {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.modalWrap .modal.paymentInfo .modalContent .info > div .customer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
}
.modalWrap .modal.paymentInfo .modalContent .info > div .customer p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #0076DD;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .info > div .customer p {
    font-size: 2.2rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .info > div .customer p.info {
  margin-top: auto;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .info > div .customer p.info {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .info > div .customer > ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 50px;
}
.modalWrap .modal.paymentInfo .modalContent .info > div .customer > ul li {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
}
.modalWrap .modal.paymentInfo .modalContent .info > div .customer > ul li p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .info > div .customer > ul li p {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .info > div .customer > ul li p.name {
  flex: 1;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #0076DD;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .info > div .customer > ul li p.name {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .info > div > ul {
  width: 526px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.modalWrap .modal.paymentInfo .modalContent .info > div > ul li {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #CDD1D5;
}
.modalWrap .modal.paymentInfo .modalContent .info > div > ul li p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .info > div > ul li p {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .info > div > ul li p span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .info > div > ul li p span {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .info > div > ul li span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .info > div > ul li span {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .info .napboo {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 0;
}
.modalWrap .modal.paymentInfo .modalContent .info .napboo .payInfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.modalWrap .modal.paymentInfo .modalContent .info .napboo .payInfo ul {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.modalWrap .modal.paymentInfo .modalContent .info .napboo .payInfo ul li {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 32px;
}
.modalWrap .modal.paymentInfo .modalContent .info .napboo .payInfo ul li p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .info .napboo .payInfo ul li p {
    font-size: 1.8rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .info .napboo .payInfo ul li strong {
  display: block;
}
.modalWrap .modal.paymentInfo .modalContent .info .napboo > ul {
  border-bottom: 2px solid #0076DD;
}
.modalWrap .modal.paymentInfo .modalContent .info .napboo > ul li {
  border-bottom: none;
}
.modalWrap .modal.paymentInfo .modalContent .info .napboo > ul li p,
.modalWrap .modal.paymentInfo .modalContent .info .napboo > ul li span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 150%;
  color: #0076DD;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .info .napboo > ul li p,
  .modalWrap .modal.paymentInfo .modalContent .info .napboo > ul li span {
    font-size: 2.8rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .paymentTable {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
}
.modalWrap .modal.paymentInfo .modalContent .paymentTable table {
  width: 100%;
  table-layout: fixed;
}
.modalWrap .modal.paymentInfo .modalContent .paymentTable table th {
  padding: 4px 16px;
  border-right: 1px solid #ffffff;
  background: #0076DD;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #ffffff;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .paymentTable table th {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .paymentTable table th:last-child {
  border-right: none;
}
.modalWrap .modal.paymentInfo .modalContent .paymentTable table td {
  padding: 4px 16px;
  border-right: 1px solid #CDD1D5;
  border-bottom: 1px solid #CDD1D5;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .paymentTable table td {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .paymentTable table td {
  text-align: center;
}
.modalWrap .modal.paymentInfo .modalContent .paymentTable table td.text {
  text-align: center;
}
.modalWrap .modal.paymentInfo .modalContent .paymentTable table td.total {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .paymentTable table td.total {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .paymentTable table td:last-child {
  border-right: none;
}
.modalWrap .modal.paymentInfo .modalContent .useInfo {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4px;
}
.modalWrap .modal.paymentInfo .modalContent .useInfo .table {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}
.modalWrap .modal.paymentInfo .modalContent .useInfo .table > div {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
}
.modalWrap .modal.paymentInfo .modalContent .useInfo .table > div .textInfo {
  height: 22px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .useInfo .table > div .textInfo {
    font-size: 1.6rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .useInfo .table > div .textInfo.color_re {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #D63D4A;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .useInfo .table > div .textInfo.color_re {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .useInfo .table > div table {
  width: 100%;
  table-layout: fixed;
}
.modalWrap .modal.paymentInfo .modalContent .useInfo .table > div table th {
  padding: 4px 16px;
  border-right: 1px solid #ffffff;
  background: #0076DD;
  color: #ffffff;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #ffffff;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .useInfo .table > div table th {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .useInfo .table > div table th p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}
.modalWrap .modal.paymentInfo .modalContent .useInfo .table > div table th span {
  width: 22px;
  height: 22px;
  display: inline-block;
  margin-left: 10px;
  color: #0076DD;
  background: #ffffff;
  border-radius: 999px;
}
.modalWrap .modal.paymentInfo .modalContent .useInfo .table > div table td {
  padding: 4px 16px;
  border-right: 1px solid #CDD1D5;
  border-bottom: 1px solid #CDD1D5;
  text-align: center;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .useInfo .table > div table td {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .useInfo .table > div table td.text {
  text-align: center;
}
.modalWrap .modal.paymentInfo .modalContent .useInfo .table > div table td:last-child {
  border-right: none;
}
.modalWrap .modal.paymentInfo .modalContent .useInfo .table > div.overdue th {
  background: #FBEFF0;
  color: #D63D4A;
}
.modalWrap .modal.paymentInfo .modalContent .useInfo .table > div.overdue td {
  text-align: center;
}
.modalWrap .modal.paymentInfo .modalContent .useInfo .table > div.overdue table {
  margin-bottom: 12px;
}
.modalWrap .modal.paymentInfo .modalContent .useInfo .table > div.overdue div {
  width: 100%;
  padding: 8px 16px;
  border: 1px solid #B1B8BE;
  background: #F9FAFB;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .useInfo .table > div.overdue div {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .useInfo ul {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0 16px;
}
.modalWrap .modal.paymentInfo .modalContent .useInfo ul li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: calc(50% - 8px);
  padding: 4px 8px;
  border-bottom: 1px solid #CDD1D5;
}
.modalWrap .modal.paymentInfo .modalContent .useInfo ul li p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .useInfo ul li p {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .useInfo ul li p:first-child {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .useInfo ul li p:first-child {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .useDetail {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}
.modalWrap .modal.paymentInfo .modalContent .useDetail div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.modalWrap .modal.paymentInfo .modalContent .useDetail div p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .useDetail div p {
    font-size: 1.6rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .useDetail div img {
  height: 145px;
}
.modalWrap .modal.paymentInfo .modalContent .useDetail div .js-usage-chart {
  position: relative;
  margin-top: 5px;
  width: 100%;
  min-height: 125px;
  overflow: hidden;
  border: 1px solid #cfcfcf;
  background: #fff;
}
.modalWrap .modal.paymentInfo .modalContent .useDetail div .cgGraphList {
  width: 100%;
  min-height: 125px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-size: 13px;
}
.modalWrap .modal.paymentInfo .modalContent .useDetail ul {
  width: 510px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .useDetail ul {
    font-size: 1.6rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .useDetail ul li {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #CDD1D5;
}
.modalWrap .modal.paymentInfo .modalContent .useDetail ul li p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .useDetail ul li p {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .useDetail ul li p:first-child {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .useDetail ul li p:first-child {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .account {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.modalWrap .modal.paymentInfo .modalContent .account > div.napgi {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 0 0 370px;
}
.modalWrap .modal.paymentInfo .modalContent .account > div.napgi .napgiInfo {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
}
.modalWrap .modal.paymentInfo .modalContent .account > div.napgi .napgiInfo ul {
  flex: 1;
}
.modalWrap .modal.paymentInfo .modalContent .account > div.napgi .napgiInfo ul li p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .account > div.napgi .napgiInfo ul li p {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .account > div.napgi .napgiInfo .barcode {
  width: 115px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}
.modalWrap .modal.paymentInfo .modalContent .account > div.napgi .napgiInfo .barcode p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .account > div.napgi .napgiInfo .barcode p {
    font-size: 1.6rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .account > div.napgi .napgiInfo .barcode p {
  text-align: center;
}
.modalWrap .modal.paymentInfo .modalContent .account > div.napgi .result {
  width: 370px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4px;
  padding: 10px;
  border: 2px solid #0076DD;
  background: #ECF2FE;
}
.modalWrap .modal.paymentInfo .modalContent .account > div.napgi .result p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .account > div.napgi .result p {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .account > div.napgi .result ul li {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .account > div.napgi .result ul li {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .account > div.napgi .result strong {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .account > div.napgi .result strong {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .account > div.tableBox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
.modalWrap .modal.paymentInfo .modalContent .account > div.tableBox table {
  width: 50%;
  height: 396px;
}
.modalWrap .modal.paymentInfo .modalContent .account > div.tableBox table.deposit th {
  border-right: 1px solid #ffffff;
}
.modalWrap .modal.paymentInfo .modalContent .account > div.tableBox table.deposit td ul li {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 28px;
  align-items: center;
  column-gap: 4px;
}
.modalWrap .modal.paymentInfo .modalContent .account > div.tableBox table.deposit td ul li > span:first-child {
  white-space: nowrap;
}
.modalWrap .modal.paymentInfo .modalContent .account > div.tableBox table.deposit td ul li .account-number {
  min-width: 0;
  text-align: left;
  white-space: nowrap;
}
.modalWrap .modal.paymentInfo .modalContent .account > div.tableBox table.deposit td ul li button {
  color: #1e2124;
  justify-self: end;
  padding-left: 0;
  padding-right: 0;
}
.modalWrap .modal.paymentInfo .modalContent .account > div.tableBox table.guide td {
  border-left: none;
}
.modalWrap .modal.paymentInfo .modalContent .account > div.tableBox table th {
  border: 1px solid #0076DD;
  padding: 4px 16px;
  background: #0076DD;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #ffffff;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .account > div.tableBox table th {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .account > div.tableBox table td {
  vertical-align: top;
  padding: 8px;
  border-left: 1px solid #CDD1D5;
  border-right: 1px solid #CDD1D5;
  border-bottom: 1px solid #CDD1D5;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .account > div.tableBox table td {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentInfo .modalContent .account > div.tableBox table td {
  text-align: left;
}
.modalWrap .modal.paymentSusiInfo {
  width: 1024px;
}
.modalWrap .modal.paymentSusiInfo .modalContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-height: calc(100vh - 77px);
  gap: 16px;
  padding: 32px;
}
.modalWrap .modal.paymentSusiInfo .modalContent > div {
  width: 100%;
}
.modalWrap .modal.paymentSusiInfo .modalContent .info > div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
.modalWrap .modal.paymentSusiInfo .modalContent .info > div .customer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
}
.modalWrap .modal.paymentSusiInfo .modalContent .info > div .customer p.title {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #0DA86C;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentSusiInfo .modalContent .info > div .customer p.title {
    font-size: 2.2rem;
  }
}
.modalWrap .modal.paymentSusiInfo .modalContent .info > div .customer ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
}
.modalWrap .modal.paymentSusiInfo .modalContent .info > div .customer ul li {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.modalWrap .modal.paymentSusiInfo .modalContent .info > div .customer ul li p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentSusiInfo .modalContent .info > div .customer ul li p {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentSusiInfo .modalContent .info > div .customer ul li p.name {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #0DA86C;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentSusiInfo .modalContent .info > div .customer ul li p.name {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentSusiInfo .modalContent .info > div .goji > p {
  padding: 8px 8px;
  border-radius: 12px;
  background: #0DA86C;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #ffffff;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentSusiInfo .modalContent .info > div .goji > p {
    font-size: 2.2rem;
  }
}
.modalWrap .modal.paymentSusiInfo .modalContent .info > div .goji > p {
  text-align: center;
  margin-bottom: 16px;
}
.modalWrap .modal.paymentSusiInfo .modalContent .info > div .goji ul {
  width: 526px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-bottom: 1px solid #CDD1D5;
}
.modalWrap .modal.paymentSusiInfo .modalContent .info > div .goji ul li {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #CDD1D5;
}
.modalWrap .modal.paymentSusiInfo .modalContent .info > div .goji ul li:last-child {
  border-bottom: none;
}
.modalWrap .modal.paymentSusiInfo .modalContent .info > div .goji ul li p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentSusiInfo .modalContent .info > div .goji ul li p {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentSusiInfo .modalContent .info > div .goji ul li p:first-child {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #0DA86C;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentSusiInfo .modalContent .info > div .goji ul li p:first-child {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentSusiInfo .modalContent .paymentTable {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}
.modalWrap .modal.paymentSusiInfo .modalContent .paymentTable .chenapMobileTable {
  display: none;
}
.modalWrap .modal.paymentSusiInfo .modalContent .paymentTable table {
  width: 100%;
  text-align: center;
}
.modalWrap .modal.paymentSusiInfo .modalContent .paymentTable table th {
  padding: 4px 16px;
  border-right: 1px solid #ffffff;
  background: #0DA86C;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #ffffff;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentSusiInfo .modalContent .paymentTable table th {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentSusiInfo .modalContent .paymentTable table th:last-child {
  border-right: none;
}
.modalWrap .modal.paymentSusiInfo .modalContent .paymentTable table td {
  padding: 4px 16px;
  border-right: 1px solid #CDD1D5;
  border-bottom: 1px solid #CDD1D5;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentSusiInfo .modalContent .paymentTable table td {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentSusiInfo .modalContent .paymentTable table td.right {
  text-align: right;
}
.modalWrap .modal.paymentSusiInfo .modalContent .paymentTable table td.right.total {
  color: #D63D4A;
}
.modalWrap .modal.paymentSusiInfo .modalContent .paymentTable table td:last-child {
  border-right: none;
}
.modalWrap .modal.paymentSusiInfo .modalContent .napbooAmount {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}
.modalWrap .modal.paymentSusiInfo .modalContent .napbooAmount ul {
  width: calc(100% - 236px);
  padding: 0 16px;
  border: 3px solid #0DA86C;
}
.modalWrap .modal.paymentSusiInfo .modalContent .napbooAmount ul li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #CDD1D5;
}
.modalWrap .modal.paymentSusiInfo .modalContent .napbooAmount ul li.title {
  justify-content: flex-start;
}
.modalWrap .modal.paymentSusiInfo .modalContent .napbooAmount ul li.period {
  justify-content: flex-end;
}
.modalWrap .modal.paymentSusiInfo .modalContent .napbooAmount ul li:last-child {
  padding: 12px 0;
  border-bottom: none;
}
.modalWrap .modal.paymentSusiInfo .modalContent .napbooAmount ul li p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentSusiInfo .modalContent .napbooAmount ul li p {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentSusiInfo .modalContent .napbooAmount ul li strong.amount {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 150%;
  color: #0DA86C;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentSusiInfo .modalContent .napbooAmount ul li strong.amount {
    font-size: 2.8rem;
  }
}
.modalWrap .modal.paymentSusiInfo .modalContent .napbooAmount ul li strong.date {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentSusiInfo .modalContent .napbooAmount ul li strong.date {
    font-size: 1.8rem;
  }
}
.modalWrap .modal.paymentSusiInfo .modalContent .napbooAmount div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 240px;
  height: 116px;
  padding: 24px 16px;
  border: 3px solid #0DA86C;
}
.modalWrap .modal.paymentSusiInfo .modalContent .napbooAmount div p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #D63D4A;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentSusiInfo .modalContent .napbooAmount div p {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentSusiInfo .modalContent .napbooAmount div strong {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentSusiInfo .modalContent .napbooAmount div strong {
    font-size: 2.2rem;
  }
}
.modalWrap .modal.paymentSusiInfo .modalContent .tableBox {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
.modalWrap .modal.paymentSusiInfo .modalContent .tableBox table {
  width: 50%;
  height: 343px;
}
.modalWrap .modal.paymentSusiInfo .modalContent .tableBox table.deposit td ul li {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 28px;
  align-items: center;
  column-gap: 4px;
}
.modalWrap .modal.paymentSusiInfo .modalContent .tableBox table.deposit td ul li .bank-name {
  white-space: nowrap;
}
.modalWrap .modal.paymentSusiInfo .modalContent .tableBox table.deposit td ul li .account-number {
  min-width: 0;
  text-align: left;
  white-space: nowrap;
}
.modalWrap .modal.paymentSusiInfo .modalContent .tableBox table.deposit td ul li button {
  justify-self: end;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
  color: #1e2124;
}
.modalWrap .modal.paymentSusiInfo .modalContent .tableBox table.guide th {
  border: none;
}
.modalWrap .modal.paymentSusiInfo .modalContent .tableBox table.guide td {
  border-left: none;
}
.modalWrap .modal.paymentSusiInfo .modalContent .tableBox table th {
  border-right: 1px solid #ffffff;
  padding: 12px 16px;
  background: #0DA86C;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #ffffff;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentSusiInfo .modalContent .tableBox table th {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentSusiInfo .modalContent .tableBox table td {
  vertical-align: top;
  padding: 12px 16px;
  border-left: 1px solid #CDD1D5;
  border-right: 1px solid #CDD1D5;
  border-bottom: 1px solid #CDD1D5;
  text-align: left;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentSusiInfo .modalContent .tableBox table td {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentChenapInfo {
  width: 1024px;
}
.modalWrap .modal.paymentChenapInfo .modalContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-height: calc(100vh - 77px);
  gap: 16px;
  padding: 32px;
}
.modalWrap .modal.paymentChenapInfo .modalContent > div {
  width: 100%;
}
.modalWrap .modal.paymentChenapInfo .modalContent .chenap-sms-guide {
  display: none;
}
.modalWrap .modal.paymentChenapInfo .modalContent .chenap-sms-guide img {
  display: block;
  min-width: 0;
  max-width: 100%;
  object-fit: contain;
}
.modalWrap .modal.paymentChenapInfo .modalContent .info > div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
.modalWrap .modal.paymentChenapInfo .modalContent .info > div .customer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
}
.modalWrap .modal.paymentChenapInfo .modalContent .info > div .customer p.title {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #9E6A00;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .info > div .customer p.title {
    font-size: 2.2rem;
  }
}
.modalWrap .modal.paymentChenapInfo .modalContent .info > div .customer ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
}
.modalWrap .modal.paymentChenapInfo .modalContent .info > div .customer ul li {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.modalWrap .modal.paymentChenapInfo .modalContent .info > div .customer ul li p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .info > div .customer ul li p {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentChenapInfo .modalContent .info > div .customer ul li p.name {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #9E6A00;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .info > div .customer ul li p.name {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentChenapInfo .modalContent .info > div .goji > p {
  padding: 8px 8px;
  border-radius: 12px;
  background: #9E6A00;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #ffffff;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .info > div .goji > p {
    font-size: 2.2rem;
  }
}
.modalWrap .modal.paymentChenapInfo .modalContent .info > div .goji > p {
  text-align: center;
  margin-bottom: 16px;
}
.modalWrap .modal.paymentChenapInfo .modalContent .info > div .goji ul {
  width: 526px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-bottom: 1px solid #CDD1D5;
}
.modalWrap .modal.paymentChenapInfo .modalContent .info > div .goji ul li {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #CDD1D5;
}
.modalWrap .modal.paymentChenapInfo .modalContent .info > div .goji ul li:last-child {
  border-bottom: none;
}
.modalWrap .modal.paymentChenapInfo .modalContent .info > div .goji ul li p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .info > div .goji ul li p {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentChenapInfo .modalContent .info > div .goji ul li p:first-child {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #9E6A00;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .info > div .goji ul li p:first-child {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentChenapInfo .modalContent .paymentTable {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}
.modalWrap .modal.paymentChenapInfo .modalContent .paymentTable table {
  width: 100%;
  text-align: center;
}
.modalWrap .modal.paymentChenapInfo .modalContent .paymentTable table.chenapPcTable {
  display: block;
}
.modalWrap .modal.paymentChenapInfo .modalContent .paymentTable table.chenapMobileTable {
  display: none;
}
.modalWrap .modal.paymentChenapInfo .modalContent .paymentTable table th {
  padding: 4px 16px;
  border-right: 1px solid #ffffff;
  background: #9E6A00;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #ffffff;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .paymentTable table th {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentChenapInfo .modalContent .paymentTable table th:last-child {
  border-right: none;
}
.modalWrap .modal.paymentChenapInfo .modalContent .paymentTable table td {
  padding: 4px 16px;
  border-right: 1px solid #CDD1D5;
  border-bottom: 1px solid #CDD1D5;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .paymentTable table td {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentChenapInfo .modalContent .paymentTable table td.right {
  text-align: right;
}
.modalWrap .modal.paymentChenapInfo .modalContent .paymentTable table td.right.total {
  color: #D63D4A;
}
.modalWrap .modal.paymentChenapInfo .modalContent .paymentTable table td:last-child {
  border-right: none;
}
.modalWrap .modal.paymentChenapInfo .modalContent .chenapAmount {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}
.modalWrap .modal.paymentChenapInfo .modalContent .chenapAmount ul {
  width: 100%;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 16px;
  border: 3px solid #9E6A00;
}
.modalWrap .modal.paymentChenapInfo .modalContent .chenapAmount ul li {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.modalWrap .modal.paymentChenapInfo .modalContent .chenapAmount ul li p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .chenapAmount ul li p {
    font-size: 1.6rem;
  }
}
.modalWrap .modal.paymentChenapInfo .modalContent .chenapAmount ul li strong {
  display: block;
  width: 100%;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .chenapAmount ul li strong {
    font-size: 1.6rem;
  }
}
.modalWrap .modal.paymentChenapInfo .modalContent .tableBox {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.modalWrap .modal.paymentChenapInfo .modalContent .tableBox table {
  width: 50%;
  height: 510px;
}
.modalWrap .modal.paymentChenapInfo .modalContent .tableBox table.deposit td ul li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 36px;
  align-items: center;
  column-gap: 8px;
}
.modalWrap .modal.paymentChenapInfo .modalContent .tableBox table.deposit td ul li button {
  padding: 4px;
  color: #1e2124;
}
.modalWrap .modal.paymentChenapInfo .modalContent .tableBox table.deposit td ul li .bank-name {
  white-space: nowrap;
}
.modalWrap .modal.paymentChenapInfo .modalContent .tableBox table.deposit td ul li .account-number {
  min-width: 0;
  text-align: left;
}
.modalWrap .modal.paymentChenapInfo .modalContent .tableBox table.deposit td ul li button {
  justify-self: end;
}
.modalWrap .modal.paymentChenapInfo .modalContent .tableBox table th {
  border-right: 1px solid #ffffff;
  padding: 12px 16px;
  background: #9E6A00;
  border: 1px solid #9E6A00;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #ffffff;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox table th {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentChenapInfo .modalContent .tableBox table td {
  vertical-align: top;
  padding: 12px 16px;
  border-left: 1px solid #CDD1D5;
  border-right: 1px solid #CDD1D5;
  border-bottom: 1px solid #CDD1D5;
  text-align: left;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox table td {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
}
.modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox ul {
  width: 100%;
  padding: 0 16px;
  border: 3px solid #D63D4A;
}
.modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox ul li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #CDD1D5;
}
.modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox ul li:last-child {
  padding: 12px 0;
  border-bottom: none;
}
.modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox ul li p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox ul li p {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox ul li strong.amount {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 150%;
  color: #D63D4A;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox ul li strong.amount {
    font-size: 2.8rem;
  }
}
.modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox ul li strong.date {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox ul li strong.date {
    font-size: 1.8rem;
  }
}
.modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 24px 16px;
  border: 3px solid #D63D4A;
}
.modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox div p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #D63D4A;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox div p {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox div strong {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox div strong {
    font-size: 2.2rem;
  }
}
.modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox p.info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox p.info {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox p.info strong {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox p.info strong {
    font-size: 1.8rem;
  }
}
.modalWrap .modal.findInfo {
  width: 560px;
}
.modalWrap .modal.findInfo .modalContent {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
}
.modalWrap .modal.findInfo .modalContent > div {
  width: 100%;
  padding: 16px;
  border-radius: 20px;
}
.modalWrap .modal.findInfo .modalContent > div.findResult {
  border: 1px solid #cdd1d5;
  background: #ECF2FE;
}
.modalWrap .modal.findInfo .modalContent > div.findResult p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.findInfo .modalContent > div.findResult p {
    font-size: 1.8rem;
  }
}
.modalWrap .modal.findInfo .modalContent > div.findResult p {
  text-align: center;
}
.modalWrap .modal.findInfo .modalContent > div.findResult ul li {
  text-align: center;
}
.modalWrap .modal.findInfo .modalContent > div.findResult ul li strong {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #0076DD;
}
@media (max-width: 1024px) {
  .modalWrap .modal.findInfo .modalContent > div.findResult ul li strong {
    font-size: 2.2rem;
  }
}
.modalWrap .modal.findInfo .modalContent > div.findInquiry ul li {
  padding-left: 24px;
  text-indent: -24px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.findInfo .modalContent > div.findInquiry ul li {
    font-size: 1.6rem;
  }
}
.modalWrap .modal.findInfo .modalContent > div.findInquiry ul li:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 3px;
  height: 3px;
  background: #1e2124;
  border-radius: 9999px;
  margin-left: 10px;
  margin-right: 10px;
}
.modalWrap .modal.findInfo .modalContent > div.findInquiry ul li.color_re {
  color: #D63D4A;
}
.modalWrap .modal.findInfo .modalContent > div.findInquiry ul li.color_re::before {
  background: #D63D4A;
}
.modalWrap .modal.findInfo .modalContent > div.findInquiry.hidden {
  display: none;
}
.modalWrap .modal.findInfo .modalContent .closeBtn {
  margin: 0 auto;
}
.modalWrap .modal.cgCalcPurpose .modalContent {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
}
.modalWrap .modal.cgCalcPurpose .modalContent .resultDetail {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
}
.modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem {
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
}
.modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
}
.modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul li {
  width: 25%;
  border-radius: 12px;
  border: 1px solid #B1B8BE;
  background: #FFFFFF;
  overflow: hidden;
  text-align: center;
}
.modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul li h4 {
  height: 40px;
  padding: 10px 0;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul li h4 {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul li p {
  height: 48px;
  padding: 12px 0;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul li p {
    font-size: 1.6rem;
  }
}
.modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul.amount h4 {
  background: #ECF2FE;
}
.modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul.reduction h4 {
  background: #ECFEF4;
}
.modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul.reduction li:last-child {
  flex: 1;
}
.modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .total {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 96px 0 0 0;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 12px;
  border: 1px solid #0076DD;
  background: url("../images/fo/cgcalc/bg_totalAmount.png") no-repeat top 28px center #fff;
}
.modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .total p {
  text-align: center;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .total p {
    font-size: 1.6rem;
  }
}
.modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .total p.amount {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 150%;
  color: #0076DD;
}
@media (max-width: 1024px) {
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .total p.amount {
    font-size: 2.6rem;
  }
}
.modalWrap .modal.mkeyInsert .modalContent form {
  width: 100%;
  margin-top: 16px;
}
.modalWrap .modal.mkeyInsert .modalContent form .searchCusNum {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.modalWrap .modal.mkeyInsert .modalContent form .searchCusNum div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}
.modalWrap .modal.mkeyInsert .modalContent form .searchCusNum div.entry {
  gap: 32px;
}
.modalWrap .modal.mkeyInsert .modalContent form .searchCusNum div.entry input.cusNo {
  width: 158px;
}
.modalWrap .modal.mkeyInsert .modalContent form .searchCusNum div.entry input.userName {
  width: 193px;
}
.modalWrap .modal.mkeyInsert .modalContent form .searchCusNum div label {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .modalWrap .modal.mkeyInsert .modalContent form .searchCusNum div label {
    font-size: 1.6rem;
  }
}
.modalWrap .modal.mkeyInsert .modalContent form .searchCusNum div label[for=cusNo] {
  margin-left: 12px;
}
.modalWrap .modal.mkeyInsert .modalContent p.title {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .modalWrap .modal.mkeyInsert .modalContent p.title {
    font-size: 1.8rem;
  }
}
.modalWrap .modal.mkeyInsert .modalContent .mkeyInsertResultTable th:nth-child(2),
.modalWrap .modal.mkeyInsert .modalContent .mkeyInsertResultTable td:nth-child(2) {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.modalWrap .modal.mkeyChoice {
  width: 702px;
}
.modalWrap .modal.mkeyChoice .modalContent {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.modalWrap .modal.mkeyChoice .modalContent .box {
  width: 50%;
  justify-content: center;
  align-items: center;
  padding: 20px 20px 24px 20px;
  text-align: center;
}
.modalWrap .modal.mkeyChoice .modalContent .box p {
  height: 195px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .modalWrap .modal.mkeyChoice .modalContent .box p {
    font-size: 2.2rem;
  }
}
.modalWrap .modal.mkeyChoice .modalContent .box span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.mkeyChoice .modalContent .box span {
    font-size: 1.4rem;
  }
}
.modalWrap .modal.mkeyChoice .modalContent .box button {
  width: 100%;
}
.modalWrap .modal.mkeyChoice .modalContent .box.numDel p {
  background: url("../images/fo/mypage/num_del.png") no-repeat top 68px center;
}
.modalWrap .modal.mkeyChoice .modalContent .box.numAdd p {
  background: url("../images/fo/mypage/num_add.png") no-repeat top 76px center;
}
.modalWrap .modal.myArisu .modalContent {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}
.modalWrap .modal.myArisu .modalContent form {
  width: 100%;
}
.modalWrap .modal.myArisu .modalContent form .searchBox {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.modalWrap .modal.myArisu .modalContent form .searchBox div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .modalWrap .modal.myArisu .modalContent form .searchBox div {
    font-size: 1.6rem;
  }
}
.modalWrap .modal.myArisu .modalContent form .searchBox div label {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .modalWrap .modal.myArisu .modalContent form .searchBox div label {
    font-size: 1.6rem;
  }
}
.modalWrap .modal.myArisu .modalContent p.title {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .modalWrap .modal.myArisu .modalContent p.title {
    font-size: 1.8rem;
  }
}
.modalWrap .modal.myArisu.contact.modal {
  width: 702px;
}
.modalWrap .modal.myArisu.contact.modal ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 8px;
}
.modalWrap .modal.myArisu.contact.modal ul li {
  width: calc(50% - 8px);
  padding: 14px 16px 14px 24px;
  border-radius: 12px;
  border: 1px solid #CDD1D5;
}
.modalWrap .modal.myArisu.contact.modal ul li button > span {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  cursor: default;
}
.modalWrap .modal.myArisu.contact.modal ul li button > span span.officeInfo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.modalWrap .modal.myArisu.contact.modal ul li button > span span.officeInfo span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.myArisu.contact.modal ul li button > span span.officeInfo span {
    font-size: 1.8rem;
  }
}
.modalWrap .modal.myArisu.contact.modal ul li button > span span.officeInfo span.contact {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #0076DD;
}
@media (max-width: 1024px) {
  .modalWrap .modal.myArisu.contact.modal ul li button > span span.officeInfo span.contact {
    font-size: 1.6rem;
  }
}
.modalWrap .modal.myArisu.contact.modal ul li button > span span.area {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .modalWrap .modal.myArisu.contact.modal ul li button > span span.area {
    font-size: 1.8rem;
  }
}
.modalWrap .modal.myArisu.contact.modal ul li button > span span.area {
  text-align: left;
}
.modalWrap .modal.myArisu.remoteMeterHistory .remoteMeterHistoryList > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
}
.modalWrap .modal.myArisu.remoteMeterHistory .remoteMeterHistoryList > div .remoteMeterHistoryCard .titleWrap {
  align-items: center;
}
.modalWrap .modal.myArisu.remoteMeterHistory .remoteMeterHistoryList .modalTable tr.remoteMeterHistoryDetailRow {
  background: #F9FAFB;
}
.modalWrap .modal.myArisu.remoteMeterHistory .remoteMeterHistoryList .modalTable tr td button {
  margin: 0 auto;
}
.modalWrap .modal.myArisu.remoteMeterDay .modalTable tr.napgiRow {
  background: #ffffff;
}
.modalWrap .modal.myArisu.remoteMeterDay .modalTable tr.napgiRow td {
  border: none;
  background: #ffffff;
}
.modalWrap .modal.myArisu.remoteMeterDay .modalTable tr.napgiRow td.napgi {
  border-right: 1px solid #cdd1d5;
}
.modalWrap .modal.myArisu.remoteMeterDay .modalTable tr.remoteMeterDayDetailRow {
  background: #F9FAFB;
}
.modalWrap .modal.myArisu.remoteMeterDay .modalTable tr td button {
  margin: 0 auto;
}
.modalWrap .modal.myArisu.reduceDetail .reduceDetailSectionList {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
}
@media (max-width: 1580px) {
  .modalWrap .modal.mainPopup .popupWrap {
    max-width: 100%;
  }
  .modalWrap .modal.mainPopup .popupWrap .popupMedium {
    width: max-content;
  }
  .modalWrap .modal.mainPopup .popupWrap .popupMedium .navi {
    width: calc(100% + 12rem);
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal {
    width: calc(100% - 42px) !important;
    max-height: 75% !important;
  }
  .modalWrap .modal.contents-1000 {
    width: calc(100% - 42px);
    min-height: 296px;
  }
  .modalWrap .modal.contents {
    width: calc(100% - 42px);
    min-height: 296px;
  }
  .modalWrap .modal.alerts {
    width: calc(100% - 42px);
    min-height: 296px;
  }
  .modalWrap .modal.redundancy .idCheck {
    width: 100%;
    display: flex;
    flex-direction: column !important;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .modalWrap .modal.redundancy .idCheck input,
  .modalWrap .modal.redundancy .idCheck button {
    width: 100%;
  }
  .modalWrap .modal.hmvCalcResult .userInfo {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px 8px 8px;
    gap: 8px;
  }
  .modalWrap .modal.hmvCalcResult .userInfo div {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
  }
  .modalWrap .modal.hmvCalcResult .userInfo div p,
  .modalWrap .modal.hmvCalcResult .userInfo div label {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal.hmvCalcResult .userInfo div p,
  .modalWrap .modal.hmvCalcResult .userInfo div label {
    font-size: 1.6rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal.hmvCalcResult .box div .verification {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
  }
  .modalWrap .modal.hmvCalcResult .hmvCalcResultWrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
  }
  .modalWrap .modal.SelfExamination .SelfExaminationWrap {
    display: flex;
    flex-direction: column !important;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 3.2rem;
  }
  .modalWrap .modal.SelfExamination .exampleImg {
    height: 38.6rem;
    margin: 0 auto;
  }
  .modalWrap .modal.guideARS .modalContent {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
  }
  .modalWrap .modal.guideARS .modalContent .info .infoWrap {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 48px;
  }
  .modalWrap .modal.guideARS .modalContent .info .infoWrap .number {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border-right: 1px solid #BAC3D5;
    padding: 0 24px;
  }
  .modalWrap .modal.guideARS .modalContent .info .infoWrap .number strong {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 150%;
    color: #0076DD;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal.guideARS .modalContent .info .infoWrap .number strong {
    font-size: 2.2rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal.guideARS .modalContent .info .infoWrap .number p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    color: #0076DD;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal.guideARS .modalContent .info .infoWrap .number p {
    font-size: 1.6rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal.guideARS .modalContent .info .infoWrap .number div {
    width: 72px;
    height: 72px;
    margin: 0 auto 4px;
    text-align: center;
    background: url("../images/fo/owngc/bg_ars.png") no-repeat center;
  }
  .modalWrap .modal.guideARS .modalContent .info .infoWrap .callGuide {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
  }
  .modalWrap .modal.guideARS .modalContent .info .infoWrap .callGuide span {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    color: #0DA86C;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal.guideARS .modalContent .info .infoWrap .callGuide span {
    font-size: 1.6rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal.guideARS .modalContent .option {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }
  .modalWrap .modal.guideARS .modalContent .option > div {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
  }
  .modalWrap .modal.guideARS .modalContent .option > div .type {
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }
  .modalWrap .modal.guideARS .modalContent .option > div .type p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal.guideARS .modalContent .option > div .type p {
    font-size: 1.6rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal.guideARS .modalContent .option > div .type span {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    color: #0DA86C;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal.guideARS .modalContent .option > div .type span {
    font-size: 1.6rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal.guideARS .modalContent .option > div .ss {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
  }
  .modalWrap .modal.guideARS .modalContent .option > div .detail {
    height: 228px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    word-break: break-all;
  }
  .modalWrap .modal.guideARS .modalContent .badge {
    height: 43px;
    padding: 8px 20px;
    border-radius: 1000px;
    border: 2px solid;
  }
  .modalWrap .modal.mainPopup {
    width: 100%;
    max-height: 100% !important;
    box-sizing: border-box;
    background: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 32px;
  }
  .modalWrap .modal.mainPopup .todayHide {
    padding: 12px 24px;
    border-radius: 1000px;
    background: #ffffff;
  }
  .modalWrap .modal.mainPopup .todayHide label {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  .modalWrap .modal.mainPopup .popupWrap {
    width: 50%;
  }
  .modalWrap .modal.mainPopup .popupWrap .surveryWrap,
  .modalWrap .modal.mainPopup .popupWrap .popupMedium {
    width: 100%;
    height: 50vh;
    padding-bottom: 0;
  }
  .modalWrap .modal.mainPopup .popupWrap .surveryWrap .navi,
  .modalWrap .modal.mainPopup .popupWrap .popupMedium .navi {
    display: none;
  }
  .modalWrap .modal.mainPopup .popupWrap .surveryWrap .popupSwiper,
  .modalWrap .modal.mainPopup .popupWrap .popupMedium .popupSwiper {
    width: 100% !important;
    transition: none;
  }
  .modalWrap .modal.mainPopup .popupWrap .surveryWrap .popupSwiper .popupSlides,
  .modalWrap .modal.mainPopup .popupWrap .popupMedium .popupSwiper .popupSlides {
    height: calc(100% - 5rem);
  }
  .modalWrap .modal.mainPopup .popupWrap .surveryWrap .popupSwiper .popupSlides .swiper-slide,
  .modalWrap .modal.mainPopup .popupWrap .popupMedium .popupSwiper .popupSlides .swiper-slide {
    width: 100% !important;
    height: 100% !important;
  }
  .modalWrap .modal.mainPopup .popupWrap .surveryWrap .popupSwiper .popupSlides .swiper-slide .mainPopupText,
  .modalWrap .modal.mainPopup .popupWrap .popupMedium .popupSwiper .popupSlides .swiper-slide .mainPopupText {
    overflow-y: scroll !important;
  }
  .modalWrap .modal.mainPopup .popupWrap .surveryWrap .popupSwiper .swiper-pagination,
  .modalWrap .modal.mainPopup .popupWrap .popupMedium .popupSwiper .swiper-pagination {
    display: flex;
    bottom: 10rem;
  }
  .modalWrap .modal.mainPopup .popupWrap .surveryWrap > .swiper-button-toggle,
  .modalWrap .modal.mainPopup .popupWrap .popupMedium > .swiper-button-toggle {
    left: unset;
    right: 0;
    transform: unset;
  }
  .modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .swiper-pagination {
    display: flex;
  }
  .modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper {
    height: calc(100% - 5rem);
  }
  .modalWrap .modal.mainSearch .schForm .inputSearch .inputArea {
    flex: 1;
    min-width: 0;
    width: auto;
  }
  .modalWrap .modal.mainSearch .schForm .inputSearch span.i_search-primary {
    flex: none;
  }
  .modalWrap .modal.mainSearch .schForm .inputSearch .seoulSearchClearBtn {
    flex: none;
  }
  .modalWrap .modal.findNumber .inputBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
  }
  .modalWrap .modal.findNumber .inputBox .address {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
  }
  .modalWrap .modal.findNumber .inputBox .address.inputWrap .item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 32px;
  }
  .modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div input,
  .modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div select,
  .modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div p,
  .modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div label {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div input,
  .modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div select,
  .modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div p,
  .modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div label {
    font-size: 1.6rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div.detail {
    gap: 20px;
  }
  .modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div.detail > div {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
  }
  .modalWrap .modal.findNumber .btn {
    margin: 0.4rem auto;
  }
  .modalWrap .modal.findNumber .resultBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
  }
  .modalWrap .modal.findNumber .resultBox h4 {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal.findNumber .resultBox h4 {
    font-size: 1.8rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal.findNumber .resultBox table {
    width: 100%;
  }
  .modalWrap .modal.paymentInfo .modalContent {
    padding: 1.2rem;
  }
  .modalWrap .modal.paymentInfo .modalContent .info > div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .modalWrap .modal.paymentInfo .modalContent .info > div .customer {
    width: 50%;
  }
  .modalWrap .modal.paymentInfo .modalContent .info > div > ul {
    width: 50%;
  }
  .modalWrap .modal.paymentInfo .modalContent .info .napboo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.8rem 0 0;
  }
  .modalWrap .modal.paymentInfo .modalContent .info .napboo .payInfo {
    width: 50%;
  }
  .modalWrap .modal.paymentInfo .modalContent .info .napboo > ul {
    width: 50%;
  }
  .modalWrap .modal.paymentInfo .modalContent .useInfo .table {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .modalWrap .modal.paymentInfo .modalContent .useInfo .table > div {
    width: 50%;
  }
  .modalWrap .modal.paymentInfo .modalContent .useInfo .table > div.overdue {
    width: 50%;
  }
  .modalWrap .modal.paymentInfo .modalContent .useInfo .table > div ul {
    width: 100%;
  }
  .modalWrap .modal.paymentInfo .modalContent .useDetail {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
  }
  .modalWrap .modal.paymentInfo .modalContent .useDetail div {
    width: 50%;
  }
  .modalWrap .modal.paymentInfo .modalContent .useDetail ul {
    width: 50%;
  }
  .modalWrap .modal.paymentInfo .modalContent .useDetail ul li {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #CDD1D5;
  }
  .modalWrap .modal.paymentInfo .modalContent .useDetail ul li p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .useDetail ul li p {
    font-size: 1.4rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .useDetail ul li p:first-child {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .useDetail ul li p:first-child {
    font-size: 1.4rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .account {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .modalWrap .modal.paymentInfo .modalContent .account > div.napgi {
    width: max-content;
    max-width: max-content;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex: none;
  }
  .modalWrap .modal.paymentInfo .modalContent .account > div.napgi .napgiInfo {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .modalWrap .modal.paymentInfo .modalContent .account > div.napgi .napgiInfo .barcode {
    margin: 0 auto;
  }
  .modalWrap .modal.paymentInfo .modalContent .account > div.tableBox {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
  }
  .modalWrap .modal.paymentInfo .modalContent .account > div.tableBox table {
    height: stretch;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent {
    gap: 1.6rem;
    padding: 1.2rem;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent > div {
    width: 100%;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .info > div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .info > div .goji {
    width: 38.3rem;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .info > div .goji ul {
    width: 100%;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .napbooAmount {
    height: 10.9rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.8rem;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .napbooAmount ul {
    width: 100%;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .napbooAmount div {
    width: 100%;
    padding: 0.8rem 1.6rem;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .tableBox {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.8rem;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .tableBox table {
    width: 100%;
    height: stretch;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .tableBox table.deposit th {
    border-left: 1px solid #0DA86C;
    border-right: 1px solid #0DA86C;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .tableBox table.deposit td ul li {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .tableBox table.deposit td ul li button {
    margin-left: auto;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .tableBox table.guide th {
    border-left: 1px solid #0DA86C;
    border-right: 1px solid #0DA86C;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .tableBox table.guide td {
    border-left: 1px solid #CDD1D5;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .tableBox table th {
    padding: 0.35rem 16px;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .tableBox table td {
    padding: 0.4rem 0.8rem;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent {
    gap: 1.6rem;
    padding: 1.2rem;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent > div {
    width: 100%;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .info > div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .info > div .goji {
    width: 38.3rem;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .info > div .goji ul {
    width: 100%;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .paymentTable table {
    width: 100%;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .paymentTable table.chenapMobileTable {
    display: none;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .chenapAmount ul {
    gap: 0.8rem;
    padding: 1.2rem;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .chenapAmount ul li {
    padding: 0;
    word-wrap: break-word;
    word-break: break-all;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .chenapAmount ul li:last-child {
    padding: 0;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox {
    width: 100%;
    gap: 0.8rem;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox div {
    padding: 0.8rem 1.6rem;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox p.info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox p.info {
    font-size: 1.4rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox p.info strong {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox p.info strong {
    font-size: 1.8rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox table {
    width: 100%;
    height: max-content;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox table th {
    padding: 0.35rem 1.6rem;
  }
  .modalWrap .modal.findInfo {
    width: 100%;
  }
  .modalWrap .modal.findInfo .modalContent {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
  }
  .modalWrap .modal.findInfo .modalContent > div {
    width: 100%;
    padding: 1.2rem;
  }
  .modalWrap .modal.findInfo .modalContent > div.findResult p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal.findInfo .modalContent > div.findResult p {
    font-size: 1.6rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal.findInfo .modalContent > div.findResult ul li strong {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal.findInfo .modalContent > div.findResult ul li strong {
    font-size: 1.8rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal.cgCalcPurpose .modalContent {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
  }
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
  }
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem {
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
  }
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
  }
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul li {
    width: 25%;
    border-radius: 12px;
    border: 1px solid #B1B8BE;
    background: #FFFFFF;
    overflow: hidden;
    text-align: center;
  }
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul li h4 {
    height: 40px;
    padding: 10px 0;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul li h4 {
    font-size: 1.4rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul li p {
    height: 48px;
    padding: 12px 0;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul li p {
    font-size: 1.6rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul.amount h4 {
    background: #ECF2FE;
  }
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul.reduction h4 {
    background: #ECFEF4;
  }
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul.reduction li:last-child {
    flex: 1;
  }
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .total {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 96px 0 0 0;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 12px;
    border: 1px solid #0076DD;
    background: url("../images/fo/cgcalc/bg_totalAmount.png") no-repeat top 28px center #fff;
  }
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .total p {
    text-align: center;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .total p {
    font-size: 1.6rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .total p.amount {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 150%;
    color: #0076DD;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .total p.amount {
    font-size: 2.6rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal.mkeyInsert .modalContent form {
    width: 100%;
  }
  .modalWrap .modal.mkeyInsert .modalContent form .searchCusNum {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.8rem;
    align-items: end;
  }
  .modalWrap .modal.mkeyInsert .modalContent form .searchCusNum div {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
  }
  .modalWrap .modal.mkeyInsert .modalContent form .searchCusNum div.entry {
    display: contents;
  }
  .modalWrap .modal.mkeyInsert .modalContent form .searchCusNum div.entry > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.2rem;
  }
  .modalWrap .modal.mkeyInsert .modalContent form .searchCusNum div.entry > div input.cusNo {
    width: 100%;
  }
  .modalWrap .modal.mkeyInsert .modalContent form .searchCusNum div.entry > div input.userName {
    width: 100%;
  }
  .modalWrap .modal.mkeyInsert .modalContent form .searchCusNum div.btn {
    width: 100%;
    display: contents;
  }
  .modalWrap .modal.mkeyInsert .modalContent form .searchCusNum div.btn button.btnFindNumber {
    grid-column: 1/-1;
    grid-row: 2;
  }
  .modalWrap .modal.mkeyInsert .modalContent form .searchCusNum div.btn button.view {
    grid-column: 3;
    grid-row: 1;
    text-indent: -9999px;
    min-width: unset;
    width: 3.8rem;
    height: 3.8rem;
    padding: 0.9rem;
  }
  .modalWrap .modal.mkeyInsert .modalContent p.title {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
    color: #131416;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal.mkeyInsert .modalContent p.title {
    font-size: 1.8rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal.mkeyChoice {
    width: 100%;
  }
  .modalWrap .modal.mkeyChoice .modalContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
  .modalWrap .modal.mkeyChoice .modalContent .box {
    width: 100%;
    padding: 1.2rem;
    gap: 0.8rem;
  }
  .modalWrap .modal.mkeyChoice .modalContent .box p {
    height: 10rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal.mkeyChoice .modalContent .box p {
    font-size: 1.8rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal.mkeyChoice .modalContent .box.numDel p {
    background: url("../images/fo/mypage/num_del.png") no-repeat top 35px center;
    background-size: 6rem;
  }
  .modalWrap .modal.mkeyChoice .modalContent .box.numAdd p {
    background: url("../images/fo/mypage/num_add.png") no-repeat top 40px center;
    background-size: 9rem;
  }
  .modalWrap .modal.mkeyChoice .modalContent .box button {
    margin-top: 1.6rem;
  }
  .modalWrap .modal.myArisu .modalContent {
    gap: 0.8rem;
  }
  .modalWrap .modal.myArisu .modalContent form {
    width: 100%;
  }
  .modalWrap .modal.myArisu .modalContent form .searchBox {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
    gap: 0.8rem;
  }
  .modalWrap .modal.myArisu .modalContent form .searchBox div {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
  }
  .modalWrap .modal.myArisu .modalContent form .searchBox div.remoteSearch {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .modalWrap .modal.myArisu .modalContent form .searchBox div.remoteSearch .date-range {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.8rem;
  }
  .modalWrap .modal.myArisu .modalContent form .searchBox button {
    min-width: unset;
  }
  .modalWrap .modal.myArisu .modalContent form .searchBox button span:not(.icon) {
    display: none;
  }
  .modalWrap .modal.myArisu .modalContent p.title {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
    color: #131416;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal.myArisu .modalContent p.title {
    font-size: 1.8rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal.myArisu.contact .modalContent {
    width: 100%;
  }
  .modalWrap .modal.myArisu.contact .modalContent .contactWrap {
    width: 100%;
  }
  .modalWrap .modal.myArisu.contact .modalContent .contactWrap ul li {
    padding: 1.2rem;
    border-radius: 1.6rem;
  }
  .modalWrap .modal.myArisu.contact .modalContent .contactWrap ul li button > span span.officeInfo {
    gap: 0.8rem;
  }
  .modalWrap .modal.myArisu.contact .modalContent .contactWrap ul li button > span span.officeInfo span {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal.myArisu.contact .modalContent .contactWrap ul li button > span span.officeInfo span {
    font-size: 1.6rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal.myArisu.contact .modalContent .contactWrap ul li button > span span.officeInfo span.contact {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal.myArisu.contact .modalContent .contactWrap ul li button > span span.officeInfo span.contact {
    font-size: 1.6rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal.myArisu.contact .modalContent .contactWrap ul li button > span span.area {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal.myArisu.contact .modalContent .contactWrap ul li button > span span.area {
    font-size: 1.6rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal.myArisu.remoteMeterDay .modalTable tr.napgiRow {
    background: #F9FAFB;
  }
  .modalWrap .modal.myArisu.remoteMeterDay .modalTable tr.napgiRow td {
    border: none;
  }
  .modalWrap .modal.myArisu.remoteMeterDay .modalTable tr.napgiRow td.napgi {
    border-right: 1px solid #cdd1d5;
  }
  .modalWrap .modal.myArisu.remoteMeterDay .modalTable tr td button {
    margin: 0 auto;
  }
  .modalWrap .modal div.textBox {
    height: 4.4rem;
    padding: 1rem 1.2rem;
  }
  .modalWrap .modal div.textBox h4 span {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal div.textBox h4 span {
    font-size: 1.6rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal .modalContent {
    max-height: 100dvh;
    padding: 2rem;
    gap: 0.8rem;
  }
  .modalWrap .modal .modalContent .tabWrap {
    gap: 0.8rem;
  }
  .modalWrap .modal .modalContent .remoteMeterHistoryList {
    width: 100%;
  }
  .modalWrap .modal .modalContent .remoteMeterHistoryList .remoteMeterHistoryCard {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
  }
  .modalWrap .modal .modalContent .box {
    padding: 2.4rem;
    gap: 0.8rem;
  }
  .modalWrap .modal .modalContent .box .info01 li {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    word-break: break-all;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal .modalContent .box .info01 li {
    font-size: 1.4rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal .modalContent .box .info01 li p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal .modalContent .box .info01 li p {
    font-size: 1.4rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal .modalContent .box .modalTable.maxTable {
    min-width: 86rem;
    width: max-content;
    border-collapse: collapse;
  }
  .modalWrap .modal .modalContent .box .modalTable tr.total td {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .modalWrap .modal .modalContent .box .modalTable tr.total td {
    font-size: 1.4rem;
  }
}
@media (max-width: 1024px) {
  .modalWrap .modal .modalContent .box .serviceCheck {
    padding-bottom: 16px;
  }
  .modalWrap .modal .modalContent .box > div {
    overflow-x: scroll;
  }
  .modalWrap .modal div.btnBox {
    padding: 0 !important;
  }
  .modalWrap .mainPopClose {
    position: absolute;
    right: 32px;
    top: 32px;
    padding: 12px;
    border-radius: 1000px;
    background: rgba(255, 255, 255, 0.8);
    z-index: 999;
  }
  .modalWrap .mainPopClose span {
    width: 32px;
    height: 32px;
    background-size: 32px;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal {
    width: calc(100% - 42px) !important;
    max-height: 75% !important;
  }
  .modalWrap .modal.contents-1000 {
    width: calc(100% - 42px);
    min-height: 296px;
  }
  .modalWrap .modal.contents {
    width: calc(100% - 42px);
    min-height: 296px;
  }
  .modalWrap .modal.alerts {
    width: calc(100% - 42px);
    min-height: 296px;
  }
  .modalWrap .modal.redundancy .idCheck {
    width: 100%;
    display: flex;
    flex-direction: column !important;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .modalWrap .modal.redundancy .idCheck input,
  .modalWrap .modal.redundancy .idCheck button {
    width: 100%;
  }
  .modalWrap .modal.hmvCalcResult .userInfo {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 8px 8px 8px;
    gap: 8px;
  }
  .modalWrap .modal.hmvCalcResult .userInfo div {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
  }
  .modalWrap .modal.hmvCalcResult .userInfo div p,
  .modalWrap .modal.hmvCalcResult .userInfo div label {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.hmvCalcResult .userInfo div p,
  .modalWrap .modal.hmvCalcResult .userInfo div label {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.hmvCalcResult .userInfo div select {
    width: 100%;
  }
  .modalWrap .modal.hmvCalcResult .userInfo button span:not(.icon) {
    display: none;
  }
  .modalWrap .modal.hmvCalcResult .box div .dateWrap {
    padding: 0.5rem 0;
  }
  .modalWrap .modal.hmvCalcResult .box div .verification {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
    padding: 0.5rem 0;
  }
  .modalWrap .modal.hmvCalcResult .box div .verification button {
    grid-column: 1/-1;
  }
  .modalWrap .modal.hmvCalcResult .box div .verification input {
    width: 100%;
  }
  .modalWrap .modal.hmvCalcResult .box div td select,
  .modalWrap .modal.hmvCalcResult .box div td input {
    width: 100%;
  }
  .modalWrap .modal.hmvCalcResult .box div td .minwonBtnBox {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0;
  }
  .modalWrap .modal.hmvCalcResult .box div td .serviceBox {
    width: 100%;
    padding: 0.8rem 0.8rem 0.8rem 0;
    gap: 0 0.8rem;
  }
  .modalWrap .modal.hmvCalcResult .box div td .serviceBox button {
    width: 100%;
    flex: auto;
    display: flex;
  }
  .modalWrap .modal.hmvCalcResult .hmvCalcResultWrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
  }
  .modalWrap .modal.selBizTypeModal .bizTypeWrapPc {
    display: none;
  }
  .modalWrap .modal.SelfExamination .SelfExaminationWrap {
    gap: 0.8rem !important;
  }
  .modalWrap .modal.SelfExamination .SelfExaminationWrap input {
    width: 100%;
  }
  .modalWrap .modal.SelfExamination .exampleImg {
    max-width: 100%;
  }
}
@media (max-width: 768px) and (max-width: 403px) {
  .modalWrap .modal.SelfExamination .exampleImg {
    width: 100%;
    height: 30rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.SelfExamination .exampleImg > div {
    text-align: center;
  }
  .modalWrap .modal.SelfExamination .exampleImg > div strong {
    padding: 0 6rem;
  }
  .modalWrap .modal.SelfExamination .exampleImg > div p {
    padding: 0 1.2rem;
  }
  .modalWrap .modal.guideARS .modalContent {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.8rem;
  }
  .modalWrap .modal.guideARS .modalContent .info .infoWrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.2rem;
  }
  .modalWrap .modal.guideARS .modalContent .info .infoWrap .number {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-right: none;
    border-bottom: 1px solid #BAC3D5;
    padding-bottom: 0.8rem;
  }
  .modalWrap .modal.guideARS .modalContent .info .infoWrap .number strong {
    text-align: center;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 150%;
    color: #0076DD;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.guideARS .modalContent .info .infoWrap .number strong {
    font-size: 2.2rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.guideARS .modalContent .info .infoWrap .number p {
    text-align: center;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    color: #0076DD;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.guideARS .modalContent .info .infoWrap .number p {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.guideARS .modalContent .info .infoWrap .number div {
    grid-row: span 2;
    margin: 0 auto;
  }
  .modalWrap .modal.guideARS .modalContent .info .infoWrap .callGuide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    text-align: center;
  }
  .modalWrap .modal.guideARS .modalContent .info .infoWrap .callGuide span {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    color: #0DA86C;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.guideARS .modalContent .info .infoWrap .callGuide span {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.guideARS .modalContent .info .infoWrap .callGuide p br {
    display: none;
  }
  .modalWrap .modal.guideARS .modalContent .option {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }
  .modalWrap .modal.guideARS .modalContent .option > div {
    width: 100%;
    border: 1px solid #CDD1D5;
    border-radius: 12px;
    padding: 1.2rem;
    gap: 0.8rem;
  }
  .modalWrap .modal.guideARS .modalContent .option > div .type p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.guideARS .modalContent .option > div .type p {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.guideARS .modalContent .option > div .type span {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    color: #0DA86C;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.guideARS .modalContent .option > div .type span {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.guideARS .modalContent .option > div .ss .icon {
    display: none;
  }
  .modalWrap .modal.guideARS .modalContent .option > div .ss .box {
    border: none;
    padding: 0;
  }
  .modalWrap .modal.guideARS .modalContent .option > div .box {
    border: none;
    padding: 0;
  }
  .modalWrap .modal.guideARS .modalContent .option > div .detail {
    height: max-content;
    gap: 0.8rem;
  }
  .modalWrap .modal.guideARS .modalContent .badge {
    height: 43px;
    padding: 8px 20px;
    border-radius: 1000px;
    border: 2px solid;
  }
  .modalWrap .modal.mainPopup {
    justify-content: flex-start;
    gap: 2.2rem;
  }
  .modalWrap .modal.mainPopup .popupWrap {
    width: 100%;
  }
  .modalWrap .modal.mainPopup .popupWrap .surveryWrap,
  .modalWrap .modal.mainPopup .popupWrap .popupMedium {
    width: 100%;
    height: 50vh;
    padding-bottom: 0;
  }
  .modalWrap .modal.mainPopup .popupWrap .surveryWrap .popupSwiper,
  .modalWrap .modal.mainPopup .popupWrap .popupMedium .popupSwiper {
    transition: none;
  }
  .modalWrap .modal.mainPopup .popupWrap .surveryWrap .popupSwiper .popupSlides,
  .modalWrap .modal.mainPopup .popupWrap .popupMedium .popupSwiper .popupSlides {
    width: 100%;
  }
  .modalWrap .modal.mainPopup .popupWrap .surveryWrap .popupSwiper .popupSlides .swiper-slide,
  .modalWrap .modal.mainPopup .popupWrap .popupMedium .popupSwiper .popupSlides .swiper-slide {
    width: 100% !important;
    height: 100% !important;
  }
  .modalWrap .modal.mainPopup .popupWrap .surveryWrap .navi,
  .modalWrap .modal.mainPopup .popupWrap .popupMedium .navi {
    width: 100%;
  }
  .modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap {
    width: 100%;
  }
  .modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyIntro .mainSurveyBox .surveryTitle {
    font-size: 1.4rem;
  }
  .modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyIntro .mainSurveyBox .surveryContent {
    padding: 0 2rem;
  }
  .modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap .surveySwiper .swiper-wrapper .swiper-slide .mainSurveyStepWrap .mainSurveyIntro .mainSurveyBox .surveryContent > div {
    padding: 0;
  }
  .modalWrap .modal.mainPopup .popupWrap.surveryPopup .surveryWrap > .navi {
    right: 0;
    width: calc(100% - 2rem);
  }
  .modalWrap .modal.mainSearch .schForm .inputSearch .inputArea {
    flex: 1;
    min-width: 0;
    width: auto;
  }
  .modalWrap .modal.mainSearch .schForm .inputSearch span.i_search-primary {
    flex: none;
  }
  .modalWrap .modal.mainSearch .schForm .inputSearch .seoulSearchClearBtn {
    flex: none;
  }
  .modalWrap .modal.findNumber .inputBox .address {
    gap: 0.8rem;
  }
  .modalWrap .modal.findNumber .inputBox .address.inputWrap .item {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.8rem;
  }
  .modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div input,
  .modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div select {
    width: 100%;
  }
  .modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div p,
  .modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div label {
    flex: none;
  }
  .modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div.detail {
    width: max-content;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.8rem;
    margin-left: 7.4rem;
  }
  .modalWrap .modal.findNumber .inputBox .address.inputWrap .item > div.detail > div input {
    width: 11rem;
  }
  .modalWrap .modal.findNumber .inputBox .address div {
    width: 100%;
  }
  .modalWrap .modal.findNumber .inputBox .address div > p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.findNumber .inputBox .address div > p {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.findNumber .btn {
    margin: 0 auto;
  }
  .modalWrap .modal.paymentInfo .modalContent {
    gap: 1.6rem;
    padding: 1.2rem;
  }
  .modalWrap .modal.paymentInfo .modalContent .info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .modalWrap .modal.paymentInfo .modalContent .info > div {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
  }
  .modalWrap .modal.paymentInfo .modalContent .info > div .customer {
    width: 100%;
  }
  .modalWrap .modal.paymentInfo .modalContent .info > div .customer p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
    word-break: break-all;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .info > div .customer p {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.paymentInfo .modalContent .info > div .customer p.info {
    margin-top: auto;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .info > div .customer p.info {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.paymentInfo .modalContent .info > div .customer > ul {
    margin-bottom: 0.2rem;
  }
  .modalWrap .modal.paymentInfo .modalContent .info > div .customer > ul li {
    gap: 0.8rem;
  }
  .modalWrap .modal.paymentInfo .modalContent .info > div > ul {
    width: 100%;
  }
  .modalWrap .modal.paymentInfo .modalContent .info > div > ul li span {
    text-align: right;
  }
  .modalWrap .modal.paymentInfo .modalContent .info .napboo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.8rem 0;
  }
  .modalWrap .modal.paymentInfo .modalContent .info .napboo .payInfo {
    width: 100%;
  }
  .modalWrap .modal.paymentInfo .modalContent .info .napboo > ul {
    width: 100%;
  }
  .modalWrap .modal.paymentInfo .modalContent .info .napboo > ul li {
    padding: 0;
  }
  .modalWrap .modal.paymentInfo .modalContent .paymentTable table th,
  .modalWrap .modal.paymentInfo .modalContent .paymentTable table td {
    padding: 4px;
    word-break: break-all;
  }
  .modalWrap .modal.paymentInfo .modalContent .useInfo .table {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
  }
  .modalWrap .modal.paymentInfo .modalContent .useInfo .table > div {
    width: 100%;
  }
  .modalWrap .modal.paymentInfo .modalContent .useInfo .table > div .textInfo {
    height: unset;
  }
  .modalWrap .modal.paymentInfo .modalContent .useInfo .table > div th,
  .modalWrap .modal.paymentInfo .modalContent .useInfo .table > div td {
    word-break: break-all;
  }
  .modalWrap .modal.paymentInfo .modalContent .useInfo .table > div.overdue {
    width: 100%;
  }
  .modalWrap .modal.paymentInfo .modalContent .useInfo ul {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0 16px;
  }
  .modalWrap .modal.paymentInfo .modalContent .useInfo ul li {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: calc(50% - 8px);
    padding: 4px 8px;
    border-bottom: 1px solid #CDD1D5;
  }
  .modalWrap .modal.paymentInfo .modalContent .useInfo ul li p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .useInfo ul li p {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.paymentInfo .modalContent .useInfo ul li p:first-child {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .useInfo ul li p:first-child {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.paymentInfo .modalContent .useDetail {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .modalWrap .modal.paymentInfo .modalContent .useDetail div {
    width: 100%;
  }
  .modalWrap .modal.paymentInfo .modalContent .useDetail ul {
    width: 100%;
    border-top: 1px solid #CDD1D5;
  }
  .modalWrap .modal.paymentInfo .modalContent .useDetail ul li {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #CDD1D5;
  }
  .modalWrap .modal.paymentInfo .modalContent .useDetail ul li p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .useDetail ul li p {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.paymentInfo .modalContent .useDetail ul li p:first-child {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .useDetail ul li p:first-child {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.paymentInfo .modalContent .account {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .modalWrap .modal.paymentInfo .modalContent .account > div.napgi {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.2rem;
    flex: none;
  }
  .modalWrap .modal.paymentInfo .modalContent .account > div.napgi .napgiInfo {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .modalWrap .modal.paymentInfo .modalContent .account > div.napgi .napgiInfo .barcode {
    width: max-content;
    gap: 1.2rem;
    margin: 0 auto;
  }
  .modalWrap .modal.paymentInfo .modalContent .account > div.napgi .result {
    width: 100%;
  }
  .modalWrap .modal.paymentInfo .modalContent .account > div.napgi .result ul li {
    word-break: break-all;
  }
  .modalWrap .modal.paymentInfo .modalContent .account > div.napgi .result ul li:first-child {
    margin-bottom: 0.4rem;
  }
  .modalWrap .modal.paymentInfo .modalContent .account > div.napgi .result ul li:last-child {
    margin-top: 0.4rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.paymentInfo .modalContent .account > div.napgi .result ul li:last-child {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.paymentInfo .modalContent .account > div.tableBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.6rem;
  }
  .modalWrap .modal.paymentInfo .modalContent .account > div.tableBox table {
    width: 100%;
    height: max-content;
  }
  .modalWrap .modal.paymentInfo .modalContent .account > div.tableBox table.deposit th {
    border-right: 1px solid #0076DD;
  }
  .modalWrap .modal.paymentInfo .modalContent .account > div.tableBox table.deposit td ul li button {
    margin-left: auto;
  }
  .modalWrap .modal.paymentInfo .modalContent .account > div.tableBox table.guide td {
    border-left: 1px solid #CDD1D5;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent {
    gap: 1.6rem;
    padding: 1.2rem;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent > div {
    width: 100%;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .info > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.2rem;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .info > div .goji {
    width: 100%;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .info > div .goji ul {
    width: 100%;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .napbooAmount {
    height: max-content;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0.8rem;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .napbooAmount ul {
    width: 100%;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .napbooAmount div {
    width: 100%;
    height: 10.9rem;
    padding: 0.8rem 1.6rem;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .tableBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.6rem;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .tableBox table {
    width: 100%;
    height: max-content;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .tableBox table.deposit td ul li {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .tableBox table.deposit td ul li button {
    margin-left: auto;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .tableBox table.guide td {
    border-left: 1px solid #CDD1D5;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .tableBox table th {
    padding: 0.35rem 16px;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .tableBox table td {
    padding: 0.4rem 0.8rem;
  }
  .modalWrap .modal.paymentChenapInfo {
    width: calc(100% - 24px);
  }
  .modalWrap .modal.paymentChenapInfo .modalContent {
    min-width: 0;
    gap: 1.6rem;
    padding: 1.2rem;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent > div {
    width: 100%;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .chenap-sms-guide {
    display: flex;
    justify-content: center;
    margin-top: 16px;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .info > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.2rem;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .info > div .goji {
    width: 100%;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .info > div .goji > p {
    margin-bottom: 0;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .info > div .goji ul {
    width: 100%;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .chenapAmount {
    flex-direction: column;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .chenapAmount ul {
    min-height: unset;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .chenapAmount ul li {
    flex-direction: column;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .chenapAmount ul li p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .chenapAmount ul li p {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .chenapAmount ul li strong {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .chenapAmount ul li strong {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .paymentTable {
    overflow-x: visible;
    padding: 0;
    min-height: max-content;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .paymentTable table {
    table-layout: fixed;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .paymentTable table.chenapPcTable {
    display: none;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .paymentTable table.chenapMobileTable {
    display: table;
    border: 1px solid #cdd1d5;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .paymentTable table.chenapMobileTable th {
    width: 12rem;
    padding: 0.4rem 0.8rem;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #CDD1D5;
    text-align: left;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .paymentTable table.chenapMobileTable td {
    padding: 0.4rem 0.8rem;
    text-align: left;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .paymentTable table.chenapMobileTable td.right {
    text-align: right;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .paymentTable table.chenapMobileTable tbody + tbody tr:first-child th,
  .modalWrap .modal.paymentChenapInfo .modalContent .paymentTable table.chenapMobileTable tbody + tbody tr:first-child td {
    border-top: 0.8rem solid #ffffff;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    align-items: flex-start;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox {
    width: 100%;
    gap: 0.8rem;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox ul li {
    flex-wrap: wrap;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox div {
    padding: 0.8rem 1.6rem;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox p.info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox p.info {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox p.info strong {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox .napgiBox p.info strong {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox table {
    width: 100%;
    height: max-content;
  }
  .modalWrap .modal.paymentChenapInfo .modalContent .tableBox table th {
    padding: 0.35rem 1.6rem;
  }
  .modalWrap .modal.findInfo {
    width: 100%;
  }
  .modalWrap .modal.findInfo .modalContent {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
  }
  .modalWrap .modal.findInfo .modalContent > div {
    width: 100%;
    padding: 1.2rem;
  }
  .modalWrap .modal.findInfo .modalContent > div.findResult p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.findInfo .modalContent > div.findResult p {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.findInfo .modalContent > div.findResult ul li strong {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.findInfo .modalContent > div.findResult ul li strong {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.cgCalcPurpose .modalContent {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
  }
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
  }
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem {
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
  }
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
  }
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul li {
    width: 25%;
    border-radius: 12px;
    border: 1px solid #B1B8BE;
    background: #FFFFFF;
    overflow: hidden;
    text-align: center;
  }
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul li h4 {
    height: 40px;
    padding: 10px 0;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul li h4 {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul li p {
    height: 48px;
    padding: 12px 0;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul li p {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul.amount h4 {
    background: #ECF2FE;
  }
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul.reduction h4 {
    background: #ECFEF4;
  }
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .resultItem ul.reduction li:last-child {
    flex: 1;
  }
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .total {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 96px 0 0 0;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 12px;
    border: 1px solid #0076DD;
    background: url("../images/fo/cgcalc/bg_totalAmount.png") no-repeat top 28px center #fff;
  }
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .total p {
    text-align: center;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .total p {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .total p.amount {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 150%;
    color: #0076DD;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.cgCalcPurpose .modalContent .resultDetail .total p.amount {
    font-size: 2.6rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.mkeyInsert .modalContent form {
    width: 100%;
  }
  .modalWrap .modal.mkeyInsert .modalContent form .searchCusNum {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.8rem;
    align-items: end;
  }
  .modalWrap .modal.mkeyInsert .modalContent form .searchCusNum div {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
  }
  .modalWrap .modal.mkeyInsert .modalContent form .searchCusNum div.entry {
    display: contents;
  }
  .modalWrap .modal.mkeyInsert .modalContent form .searchCusNum div.entry > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.2rem;
  }
  .modalWrap .modal.mkeyInsert .modalContent form .searchCusNum div.entry > div input.cusNo {
    width: 100%;
  }
  .modalWrap .modal.mkeyInsert .modalContent form .searchCusNum div.entry > div input.userName {
    width: 100%;
  }
  .modalWrap .modal.mkeyInsert .modalContent form .searchCusNum div.btn {
    width: 100%;
    display: contents;
  }
  .modalWrap .modal.mkeyInsert .modalContent form .searchCusNum div.btn button.btnFindNumber {
    grid-column: 1/-1;
    grid-row: 2;
  }
  .modalWrap .modal.mkeyInsert .modalContent form .searchCusNum div.btn button.view {
    grid-column: 3;
    grid-row: 1;
    text-indent: -9999px;
    min-width: unset;
    width: 3.8rem;
    height: 3.8rem;
    padding: 0.9rem;
  }
  .modalWrap .modal.mkeyInsert .modalContent p.title {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
    color: #131416;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.mkeyInsert .modalContent p.title {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.mkeyChoice {
    width: 100%;
  }
  .modalWrap .modal.mkeyChoice .modalContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
  .modalWrap .modal.mkeyChoice .modalContent .box {
    width: 100%;
    padding: 1.2rem;
    gap: 0.8rem;
  }
  .modalWrap .modal.mkeyChoice .modalContent .box p {
    height: 10rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.mkeyChoice .modalContent .box p {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.mkeyChoice .modalContent .box.numDel p {
    background: url("../images/fo/mypage/num_del.png") no-repeat top 35px center;
    background-size: 6rem;
  }
  .modalWrap .modal.mkeyChoice .modalContent .box.numAdd p {
    background: url("../images/fo/mypage/num_add.png") no-repeat top 40px center;
    background-size: 9rem;
  }
  .modalWrap .modal.mkeyChoice .modalContent .box button {
    margin-top: 1.6rem;
  }
  .modalWrap .modal.myArisu .modalContent {
    gap: 0.8rem;
  }
  .modalWrap .modal.myArisu .modalContent form {
    width: 100%;
  }
  .modalWrap .modal.myArisu .modalContent form .searchBox {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
    gap: 0.8rem;
  }
  .modalWrap .modal.myArisu .modalContent form .searchBox div {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.8rem;
  }
  .modalWrap .modal.myArisu .modalContent form .searchBox div.remoteSearch {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .modalWrap .modal.myArisu .modalContent form .searchBox div.remoteSearch .date-range {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.8rem;
  }
  .modalWrap .modal.myArisu .modalContent form .searchBox button {
    min-width: unset;
  }
  .modalWrap .modal.myArisu .modalContent form .searchBox button span:not(.icon) {
    display: none;
  }
  .modalWrap .modal.myArisu .modalContent p.title {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
    color: #131416;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.myArisu .modalContent p.title {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.myArisu.remoteMeterHistory .modalContent form .searchBox {
    flex-wrap: wrap;
  }
  .modalWrap .modal.myArisu.remoteMeterHistory .modalContent form .searchBox > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.8rem;
    flex-wrap: wrap;
  }
  .modalWrap .modal.myArisu.remoteMeterHistory .modalContent form .searchBox > div div {
    flex-wrap: wrap;
  }
  .modalWrap .modal.myArisu.remoteMeterHistory .modalContent form .searchBox > div div select {
    width: 100%;
  }
  .modalWrap .modal.myArisu.remoteMeterHistory .modalContent form .searchBox > div div .dateWrap .date-range input {
    max-width: calc(50% - 0.4rem);
  }
  .modalWrap .modal.myArisu.remoteMeterHistory .modalContent form .searchBox button {
    min-width: 100%;
  }
  .modalWrap .modal.myArisu.remoteMeterHistory .modalContent form .searchBox button span:not(.icon) {
    display: flex;
  }
  .modalWrap .modal.myArisu.contact .modalContent {
    width: 100%;
  }
  .modalWrap .modal.myArisu.contact .modalContent .contactWrap {
    width: 100%;
  }
  .modalWrap .modal.myArisu.contact .modalContent .contactWrap ul {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
  }
  .modalWrap .modal.myArisu.contact .modalContent .contactWrap ul li {
    width: 100%;
    padding: 1.2rem;
    border-radius: 1.6rem;
  }
  .modalWrap .modal.myArisu.contact .modalContent .contactWrap ul li button > span {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    cursor: default;
  }
  .modalWrap .modal.myArisu.contact .modalContent .contactWrap ul li button > span span.officeInfo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
  }
  .modalWrap .modal.myArisu.contact .modalContent .contactWrap ul li button > span span.officeInfo span {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.myArisu.contact .modalContent .contactWrap ul li button > span span.officeInfo span {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.myArisu.contact .modalContent .contactWrap ul li button > span span.officeInfo span.contact {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.myArisu.contact .modalContent .contactWrap ul li button > span span.officeInfo span.contact {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.myArisu.contact .modalContent .contactWrap ul li button > span span.area {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal.myArisu.contact .modalContent .contactWrap ul li button > span span.area {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal.myArisu.remoteMeterDay .modalTable tr.napgiRow {
    background: #F9FAFB;
  }
  .modalWrap .modal.myArisu.remoteMeterDay .modalTable tr.napgiRow td {
    border: none;
  }
  .modalWrap .modal.myArisu.remoteMeterDay .modalTable tr.napgiRow td.napgi {
    border-right: 1px solid #cdd1d5;
  }
  .modalWrap .modal.myArisu.remoteMeterDay .modalTable tr.napgiRow td:not(:last-child) {
    border-right: 1px solid #cdd1d5;
  }
  .modalWrap .modal.myArisu.remoteMeterDay .modalTable tr td button {
    margin: 0 auto;
  }
  .modalWrap .modal.myArisu.reduceDetail .reduceDetailSectionList {
    gap: 0.8rem;
  }
  .modalWrap .modal div.textBox {
    height: 4.4rem;
    padding: 1rem 1.2rem;
  }
  .modalWrap .modal div.textBox h4 span {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal div.textBox h4 span {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal .modalContent {
    max-height: 100dvh;
    padding: 1.2rem;
    gap: 0.8rem;
  }
  .modalWrap .modal .modalContent .tabWrap {
    gap: 0.8rem;
  }
  .modalWrap .modal .modalContent .remoteMeterHistoryList {
    width: 100%;
  }
  .modalWrap .modal .modalContent .box {
    padding: 1.2rem;
    gap: 0.8rem;
  }
  .modalWrap .modal .modalContent .box.info-box {
    padding: 1.2rem;
  }
  .modalWrap .modal .modalContent .box .info01.guideList li {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal .modalContent .box .info01.guideList li {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal .modalContent .box .info01.guideList li p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal .modalContent .box .info01.guideList li p {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal .modalContent .box .info01 li {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    word-break: break-all;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal .modalContent .box .info01 li {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal .modalContent .box .info01 li p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal .modalContent .box .info01 li p {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal .modalContent .box .modalTable.responsiveTable {
    table-layout: fixed;
    width: 100%;
    position: relative;
    display: block;
  }
  .modalWrap .modal .modalContent .box .modalTable.responsiveTable thead {
    display: none;
  }
  .modalWrap .modal .modalContent .box .modalTable.responsiveTable tbody {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
  }
  .modalWrap .modal .modalContent .box .modalTable.responsiveTable tbody tr {
    display: block;
    width: 100%;
    border-bottom: none;
  }
  .modalWrap .modal .modalContent .box .modalTable.responsiveTable tbody tr.total td {
    border-top: none;
  }
  .modalWrap .modal .modalContent .box .modalTable.responsiveTable tbody tr.total td::before {
    background: #ECF2FE;
    color: #0076DD;
  }
  .modalWrap .modal .modalContent .box .modalTable.responsiveTable tbody tr th {
    display: none;
  }
  .modalWrap .modal .modalContent .box .modalTable.responsiveTable tbody tr td {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.8rem;
    border-right: none;
    padding: 0;
    border-bottom: 1px solid #cdd1d5;
    text-align: left;
  }
  .modalWrap .modal .modalContent .box .modalTable.responsiveTable tbody tr td.w-50::before {
    flex: 0 0 50%;
    word-break: break-all;
    word-wrap: break-word;
    white-space: break-spaces;
  }
  .modalWrap .modal .modalContent .box .modalTable.responsiveTable tbody tr td.notes {
    flex-direction: column;
    gap: 0;
  }
  .modalWrap .modal .modalContent .box .modalTable.responsiveTable tbody tr td.notes::before {
    width: 100%;
    flex: 100%;
    text-align: center;
    justify-content: center;
    border-right: none;
    border-bottom: 1px solid #cdd1d5;
  }
  .modalWrap .modal .modalContent .box .modalTable.responsiveTable tbody tr td.notes div,
  .modalWrap .modal .modalContent .box .modalTable.responsiveTable tbody tr td.notes span {
    padding: 0 1.6rem;
  }
  .modalWrap .modal .modalContent .box .modalTable.responsiveTable tbody tr td.noData {
    justify-content: center;
    padding: 0.4rem 0;
    text-align: center;
  }
  .modalWrap .modal .modalContent .box .modalTable.responsiveTable tbody tr td.noData:before {
    display: none;
  }
  .modalWrap .modal .modalContent .box .modalTable.responsiveTable tbody tr td:before {
    content: attr(data-label);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex: 0 0 8.5rem;
    width: 8.5rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
    color: #1e2124;
    text-align: left;
    background: #F9FAFB;
    padding: 0.4rem 1.2rem;
    border-right: 1px solid #cdd1d5;
    word-break: break-all;
    white-space: break-spaces;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal .modalContent .box .modalTable.responsiveTable tbody tr td:before {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal .modalContent .box .modalTable.responsiveTable tbody tr td span,
  .modalWrap .modal .modalContent .box .modalTable.responsiveTable tbody tr td div {
    margin: 0.4rem 0;
  }
  .modalWrap .modal .modalContent .box .modalTable.center th,
  .modalWrap .modal .modalContent .box .modalTable.center td {
    padding: 0.55rem 0.8rem;
  }
  .modalWrap .modal .modalContent .box .modalTable.maxTable {
    min-width: 86rem;
    width: max-content;
    border-collapse: collapse;
  }
  .modalWrap .modal .modalContent .box .modalTable tr.total td {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal .modalContent .box .modalTable tr.total td {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal .modalContent .box .modalTable tr th {
    padding: 0.4rem 0.8rem;
  }
  .modalWrap .modal .modalContent .box .modalTable tr td {
    padding: 0.4rem 0.8rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal .modalContent .box .modalTable tr td {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal .modalContent .box .serviceCheck {
    padding-bottom: 16px;
  }
  .modalWrap .modal .modalContent .box p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .modalWrap .modal .modalContent .box p {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .modalWrap .modal div.btnBox {
    padding: 0 !important;
  }
  .modalWrap .modal div.btnBox .p-trans {
    display: none !important;
  }
  .modalWrap .modal div.btnBox .m-trans {
    display: inline-flex !important;
  }
  .modalWrap .modal .calBtnBox {
    gap: 0.4rem;
  }
  .modalWrap .mainPopClose {
    position: absolute;
    width: 4.8rem;
    height: 4.8rem;
    right: 2.1rem;
    top: 2.1rem;
    padding: 0.9rem;
    border-radius: 1000px;
    background: rgba(255, 255, 255, 0.8);
    z-index: 999;
  }
  .modalWrap .mainPopClose span {
    width: 32px;
    height: 32px;
    background-size: 32px;
  }
}
@media (max-width: 403px) {
  .modalWrap .modal.paymentSusiInfo .modalContent .paymentTable table {
    table-layout: fixed;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .paymentTable table th {
    padding: 4px 0;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .tableBox table.deposit td ul li {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .modalWrap .modal.paymentSusiInfo .modalContent .tableBox table.deposit td ul li button {
    margin-top: -2rem;
  }
}

.mainPopClose {
  position: absolute;
  right: 32px;
  top: 32px;
  padding: 12px;
  border-radius: 1000px;
  background: rgba(255, 255, 255, 0.8);
  z-index: 990;
}
.mainPopClose span {
  width: 32px;
  height: 32px;
  background-size: 32px;
}

.alertWrap {
  width: 100%;
}
.alertWrap .alerts {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  border-radius: 12px;
}
.alertWrap .alerts--warning {
  border: 1px solid #FFE0A3;
  background: #FFF3DB;
}
.alertWrap .alerts--warning .title p {
  color: #8A5C00;
}
.alertWrap .alerts--danger {
  border: 1px solid #FCDFD9;
  background: #FDEFEC;
}
.alertWrap .alerts--danger .title {
  color: #DE3412;
}
.alertWrap .alerts--success {
  border: 1px solid #D8EEDD;
  background: #EAF6EC;
}
.alertWrap .alerts--success .title {
  color: #267337;
}
.alertWrap .alerts--information {
  border: 1px solid #D3EBFD;
  background: #E7F4FE;
}
.alertWrap .alerts--information .title p.mainTitle {
  color: #096AB3;
}
.alertWrap .alerts--state {
  border: 1px solid #cdd1d5;
  background: #f4f5f6;
}
.alertWrap .alerts--state .title {
  color: #464C53;
}
.alertWrap .alerts .title {
  width: 100%;
  display: flex;
  flex-direction: row !important;
  justify-content: space-between;
  align-items: center !important;
  gap: 8px !important;
}
.alertWrap .alerts .title p {
  flex: auto;
  justify-content: flex-start !important;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .alertWrap .alerts .title p {
    font-size: 1.6rem;
  }
}
.alertWrap .alerts .body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 32px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .alertWrap .alerts .body {
    font-size: 1.6rem;
  }
}
.alertWrap .alerts .info01 {
  padding-left: 32px;
}
@media (max-width: 768px) {
  .alertWrap .alerts {
    padding: 1.2rem;
  }
  .alertWrap .alerts .title {
    display: flex;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center;
    gap: 8px !important;
    margin-bottom: 0 !important;
  }
  .alertWrap .alerts .info01 {
    gap: 0;
  }
  .alertWrap .alerts .info01 li p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .alertWrap .alerts .info01 li p {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .alertWrap .alerts .body {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .alertWrap .alerts .body {
    font-size: 1.4rem;
  }
}

.print-content .con {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
}

.ksign-install-wrap {
  position: fixed;
  inset: 0;
  z-index: 5000;
}
.ksign-install-wrap.hidden {
  display: none;
}
.ksign-install-wrap .ksign-install-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
}
.ksign-install-wrap .ksign-install-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(590px, 100vw - 32px);
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.ksign-install-wrap .ksign-install-panel.hidden {
  display: none;
}
.ksign-install-wrap .ksign-install-panel#ksignInstallCheckingPanel {
  width: min(520px, 100vw - 32px);
}
.ksign-install-wrap .ksign-install-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 26px;
}
.ksign-install-wrap .ksign-install-visual {
  position: relative;
  flex: 0 0 136px;
  height: 104px;
  border: 1px solid #d7e7f8;
  border-radius: 10px;
  background: linear-gradient(180deg, #eef6ff 0%, #f8fbff 100%);
}
.ksign-install-wrap .ksign-install-visual .ksign-install-screen {
  position: absolute;
  left: 20px;
  top: 18px;
  width: 72px;
  height: 48px;
  border: 3px solid #334d6e;
  border-radius: 6px;
  background: linear-gradient(180deg, #75c7f3 0%, #53addd 100%);
}
.ksign-install-wrap .ksign-install-visual .ksign-install-screen::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 10px;
  width: 30px;
  height: 28px;
  background: #f1f7ff;
  clip-path: polygon(50% 0, 86% 18%, 86% 52%, 50% 100%, 14% 52%, 14% 18%);
  border: 2px solid #33557d;
}
.ksign-install-wrap .ksign-install-visual .ksign-install-base {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 18px;
  height: 3px;
  background: #8ca6c2;
}
.ksign-install-wrap .ksign-install-visual .ksign-install-gear,
.ksign-install-wrap .ksign-install-visual .ksign-install-gear-sm {
  position: absolute;
  border-radius: 50%;
  background: #a8bfd9;
}
.ksign-install-wrap .ksign-install-visual .ksign-install-gear {
  width: 28px;
  height: 28px;
  right: 18px;
  bottom: 18px;
}
.ksign-install-wrap .ksign-install-visual .ksign-install-gear-sm {
  width: 16px;
  height: 16px;
  right: 10px;
  top: 22px;
}
.ksign-install-wrap .ksign-install-visual .ksign-install-download {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #7fc0ff;
}
.ksign-install-wrap .ksign-install-visual .ksign-install-download::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 8px;
  width: 6px;
  height: 14px;
  background: #fff;
}
.ksign-install-wrap .ksign-install-visual .ksign-install-download::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 18px;
  width: 16px;
  height: 12px;
  background: #fff;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.ksign-install-wrap .ksign-install-content {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 330px;
}
.ksign-install-wrap .ksign-install-content .ksign-install-loading {
  display: flex;
  gap: 5px;
  margin-bottom: 18px;
}
.ksign-install-wrap .ksign-install-content .ksign-install-loading span {
  width: 9px;
  height: 9px;
  background: #b6c9df;
  animation: ksignInstallPulse 1s infinite ease-in-out;
}
.ksign-install-wrap .ksign-install-content .ksign-install-loading span:nth-child(2) {
  animation-delay: 0.08s;
}
.ksign-install-wrap .ksign-install-content .ksign-install-loading span:nth-child(3) {
  animation-delay: 0.16s;
}
.ksign-install-wrap .ksign-install-content .ksign-install-loading span:nth-child(4) {
  animation-delay: 0.24s;
}
.ksign-install-wrap .ksign-install-content .ksign-install-loading span:nth-child(5) {
  animation-delay: 0.32s;
}
.ksign-install-wrap .ksign-install-content .ksign-install-loading span:nth-child(6) {
  animation-delay: 0.4s;
}
.ksign-install-wrap .ksign-install-content .ksign-install-loading span:nth-child(7) {
  animation-delay: 0.48s;
}
.ksign-install-wrap .ksign-install-content .ksign-install-loading span:nth-child(8) {
  animation-delay: 0.56s;
}
.ksign-install-wrap .ksign-install-content .ksign-install-loading span:nth-child(9) {
  animation-delay: 0.64s;
}
.ksign-install-wrap .ksign-install-content .ksign-install-loading span:nth-child(10) {
  animation-delay: 0.72s;
}
.ksign-install-wrap .ksign-install-content .ksign-install-loading span:nth-child(11) {
  animation-delay: 0.8s;
}
.ksign-install-wrap .ksign-install-content .ksign-install-loading span:nth-child(12) {
  animation-delay: 0.88s;
}
.ksign-install-wrap .ksign-install-content .ksign-install-loading span:nth-child(13) {
  animation-delay: 0.96s;
}
.ksign-install-wrap .ksign-install-content .ksign-install-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55;
  color: #173b68;
}
.ksign-install-wrap .ksign-install-content .ksign-install-desc {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.8;
  color: #2b2b2b;
}
.ksign-install-wrap .ksign-install-content .ksign-install-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.ksign-install-wrap .ksign-install-content .ksign-install-actions .ksign-install-btn {
  min-width: 90px;
  height: 40px;
  border: none;
  border-radius: 0;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.ksign-install-wrap .ksign-install-content .ksign-install-actions .ksign-install-btn.primary {
  background: #1990d8;
  color: #fff;
}
.ksign-install-wrap .ksign-install-content .ksign-install-actions .ksign-install-btn.secondary {
  background: #d8d8d8;
  color: #2d2d2d;
}
@media (max-width: 640px) {
  .ksign-install-wrap .ksign-install-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
  }
  .ksign-install-wrap .ksign-install-content .ksign-install-actions {
    width: 100%;
  }
  .ksign-install-wrap .ksign-install-content .ksign-install-actions .ksign-install-btn {
    flex: 1 1 0;
    min-width: 0;
  }
}

@keyframes ksignInstallPulse {
  0%, 100% {
    opacity: 0.28;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-2px);
  }
}
.badge {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 32px;
  padding: 0 8px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.badge--xsmall {
  height: 20px;
  padding: 0 4px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .badge--xsmall {
    font-size: 1.4rem;
  }
}
.badge--xsmall {
  margin-top: -2px;
  margin-left: 4px;
}
.badge--small {
  height: 24px;
  padding: 0 8px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .badge--small {
    font-size: 1.6rem;
  }
}
.badge--medium {
  height: 24px;
  padding: 0 8px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .badge--medium {
    font-size: 1.8rem;
  }
}
.badge--primary {
  color: #0076DD;
  border: 1px solid #0076DD;
}
.badge--primary.solid {
  background: #0076DD;
  color: #ffffff;
}
.badge--primary.pastel {
  border: none;
  background: #F4F6FA;
  color: #0076DD;
}
.badge--secondary {
  color: #0DA86C;
  border: 1px solid #0DA86C;
}
.badge--secondary.solid {
  background: #0DA86C;
  color: #ffffff;
}
.badge--secondary.pastel {
  border: none;
  background: #EFFBFC;
  color: #0DA86C;
}
.badge--tertiary {
  color: #B1B8BE;
  border: 1px solid #B1B8BE;
}
.badge--tertiary.solid {
  background: #6d7882;
  color: #ffffff;
}
.badge--tertiary.pastel {
  border: none;
  background: #e6e8ea;
  color: #464C53;
}
.badge--point {
  color: #AB2B36;
  border: none;
}
.badge--point.solid {
  background: #D63D4A;
  color: #ffffff;
}
.badge--point.pastel {
  border: none;
  background: #FBEFF0;
  color: #AB2B36;
}
.badge--danger {
  color: #DE3412;
  border: 1px solid #DE3412;
}
.badge--danger.solid {
  background: #DE3412;
  color: #ffffff;
}
.badge--danger.pastel {
  border: none;
  background: #FDEFEC;
  color: #DE3412;
}
.badge--warning {
  color: #8A5C00;
  border: 1px solid #9E6A00;
}
.badge--warning.solid {
  background: #FFB114;
  color: #1e2124;
}
.badge--warning.pastel {
  border: none;
  background: #FFF3DB;
  color: #8A5C00;
}
.badge--success {
  color: #267337;
  border: 1px solid #228738;
}
.badge--success.solid {
  background: #228738;
  color: #1e2124;
}
.badge--success.pastel {
  border: none;
  background: #EAF6EC;
  color: #267337;
}
.badge--info {
  color: #096AB3;
  border: 1px solid #0B78CB;
}
.badge--info.solid {
  background: #0B78CB;
  color: #1e2124;
}
.badge--info.pastel {
  border: none;
  background: #E7F4FE;
  color: #096AB3;
}
.badge--disabled {
  color: #8A949E;
  border: 1px solid #8A949E;
}
.badge--disabled.solid {
  background: #cdd1d5;
  color: #6d7882;
}
.badge--disabled.pastel {
  border: none;
  background: #cdd1d5;
  color: #6d7882;
}

.badgeNumber {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 20px;
  min-width: 26px;
  padding: 8px;
  border-radius: 1000px;
}
.badgeNumber--primary {
  background: #0076DD;
  color: #ffffff;
}
.badgeNumber--new {
  background: #D63D4A;
  color: #ffffff;
}

.num {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  border-radius: 10px;
  flex: 0 0 auto;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .num {
    font-size: 1.4rem;
  }
}
.num--primary {
  color: #0076DD;
  background: #E7F4FE;
  border: 1px solid #0076DD;
}
.num--secondary {
  color: #0DA86C;
  background: #ECFEF4;
  border: 1px solid #0DA86C;
}

.new-icon {
  display: inline-block;
  width: 32px;
  height: 15px;
  margin-left: 4px;
  vertical-align: -2px;
  background: url("../images/fo/icons/ico-new.gif") center/contain no-repeat;
}

@media (max-width: 768px) {
  .badge {
    height: 2rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .badge {
    font-size: 1.4rem;
  }
}
@media (max-width: 403px) {
  .num {
    width: 19px;
    height: 19px;
    font-size: 12px;
  }
}
.tabWrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
}
.tabWrap .tabMenuWrap .tabMenu {
  display: flex;
  flex-wrap: wrap;
}
.tabWrap .tabMenuWrap .tabMenu.line {
  border-bottom: 2px solid #B1B8BE;
}
.tabWrap .tabMenuWrap .tabMenu.line li {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 56px;
  min-width: 80px;
  padding: 0 8px;
  flex: auto;
}
.tabWrap .tabMenuWrap .tabMenu.line li:after {
  content: "";
  position: absolute;
  width: 0%;
  bottom: -2px;
  transition: all 0.3s ease;
  border-bottom: 4px solid transparent;
}
.tabWrap .tabMenuWrap .tabMenu.line li a,
.tabWrap .tabMenuWrap .tabMenu.line li button {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #464C53;
}
@media (max-width: 1024px) {
  .tabWrap .tabMenuWrap .tabMenu.line li a,
  .tabWrap .tabMenuWrap .tabMenu.line li button {
    font-size: 1.8rem;
  }
}
.tabWrap .tabMenuWrap .tabMenu.line li a,
.tabWrap .tabMenuWrap .tabMenu.line li button {
  text-align: center;
}
.tabWrap .tabMenuWrap .tabMenu.line li.active:after {
  width: 100%;
  bottom: -2px;
  border-bottom: 4px solid #0076DD;
}
.tabWrap .tabMenuWrap .tabMenu.line li.active a,
.tabWrap .tabMenuWrap .tabMenu.line li.active button {
  color: #0076DD;
}
.tabWrap .tabMenuWrap .tabMenu.lineSecondary {
  border-bottom: none;
  gap: 8px;
}
.tabWrap .tabMenuWrap .tabMenu.lineSecondary li {
  display: flex;
  height: 40px;
  max-width: 56px;
  min-width: 56px;
  padding: 0 4px;
  justify-content: center;
  align-items: center;
}
.tabWrap .tabMenuWrap .tabMenu.lineSecondary li:after {
  border-bottom: 4px solid transparent;
}
.tabWrap .tabMenuWrap .tabMenu.lineSecondary li.active:after {
  border-bottom: 4px solid #0076DD;
}
.tabWrap .tabMenuWrap .tabMenu.lineSecondary li.active button {
  color: #0076DD;
}
.tabWrap .tabMenuWrap .tabMenu.fill {
  width: 1200px;
  border-bottom: none;
  border-radius: 8px;
  overflow: hidden;
}
.tabWrap .tabMenuWrap .tabMenu.fill li {
  position: relative;
  display: flex;
  height: 56px;
  min-width: 80px;
  padding: 0 16px;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  border-right: 1px solid #B1B8BE;
  background: #ffffff;
  transition: all 0.3s ease;
}
.tabWrap .tabMenuWrap .tabMenu.fill li:last-child {
  border-right: none;
}
.tabWrap .tabMenuWrap .tabMenu.fill li:after {
  content: "";
  position: absolute;
  left: -1px;
  width: calc(100% + 2px);
  height: 56px;
  transition: all 0.3s ease;
}
.tabWrap .tabMenuWrap .tabMenu.fill li.active:after {
  background: #0076DD;
}
.tabWrap .tabMenuWrap .tabMenu.fill li.active button {
  color: #ffffff;
  z-index: 10;
}
.tabWrap .tabMenuWrap .tabMenu.fillLogin {
  border-bottom: 2px solid #B1B8BE;
}
.tabWrap .tabMenuWrap .tabMenu.fillLogin li {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 56px;
  min-width: 80px;
  flex: auto;
}
.tabWrap .tabMenuWrap .tabMenu.fillLogin li:after {
  content: "";
  position: absolute;
  width: 0%;
  bottom: -2px;
  transition: all 0.3s ease;
  border-bottom: 4px solid transparent;
}
.tabWrap .tabMenuWrap .tabMenu.fillLogin li a,
.tabWrap .tabMenuWrap .tabMenu.fillLogin li button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #464C53;
}
@media (max-width: 1024px) {
  .tabWrap .tabMenuWrap .tabMenu.fillLogin li a,
  .tabWrap .tabMenuWrap .tabMenu.fillLogin li button {
    font-size: 1.8rem;
  }
}
.tabWrap .tabMenuWrap .tabMenu.fillLogin li a,
.tabWrap .tabMenuWrap .tabMenu.fillLogin li button {
  text-align: center;
  color: #0076DD;
}
.tabWrap .tabMenuWrap .tabMenu.fillLogin li a:focus-visible,
.tabWrap .tabMenuWrap .tabMenu.fillLogin li button:focus-visible {
  outline-offset: -4px;
}
.tabWrap .tabMenuWrap .tabMenu.fillLogin li.active {
  top: 2px;
  background: #0076DD;
}
.tabWrap .tabMenuWrap .tabMenu.fillLogin li.active:after {
  width: 100%;
  bottom: -2px;
}
.tabWrap .tabMenuWrap .tabMenu.fillLogin li.active a,
.tabWrap .tabMenuWrap .tabMenu.fillLogin li.active button {
  color: #ffffff;
}
.tabWrap .tabMenuWrap .tabMenu.fillLogin li.active a:focus-visible,
.tabWrap .tabMenuWrap .tabMenu.fillLogin li.active button:focus-visible {
  outline: 2px solid #ffffff;
}
.tabWrap .tabMenuWrap .tabMenu.fillSecondary {
  border-bottom: none;
  border-radius: 8px;
  gap: 8px;
}
.tabWrap .tabMenuWrap .tabMenu.fillSecondary li.active button {
  background: #0076DD;
  border: 1px solid #0076DD;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #ffffff;
}
@media (max-width: 1024px) {
  .tabWrap .tabMenuWrap .tabMenu.fillSecondary li.active button {
    font-size: 1.6rem;
  }
}
.tabWrap .tabMenuWrap .tabMenu.fillSecondary li button {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #464C53;
}
@media (max-width: 1024px) {
  .tabWrap .tabMenuWrap .tabMenu.fillSecondary li button {
    font-size: 1.6rem;
  }
}
.tabWrap .tabMenuWrap .tabMenu.fillSecondary li button {
  display: flex;
  height: 40px;
  min-width: 56px;
  padding: 0 12px;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  border: 1px solid #CDD1D5;
}
.tabWrap .tabMenuWrap .tabMenu.fillSecondary li button:focus-visible {
  outline-offset: 2px;
}
.tabWrap .tabConts {
  display: none;
}
.tabWrap .tabConts.active {
  display: block;
}
@media (max-width: 768px) {
  .tabWrap {
    gap: 0.8rem;
  }
  .tabWrap .tabMenuWrap .tabMenu.line li {
    height: 4.2rem;
    min-width: 8rem;
    padding: 0 0.8rem;
  }
  .tabWrap .tabMenuWrap .tabMenu.line li a,
  .tabWrap .tabMenuWrap .tabMenu.line li button {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
    color: #464C53;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .tabWrap .tabMenuWrap .tabMenu.line li a,
  .tabWrap .tabMenuWrap .tabMenu.line li button {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .tabWrap .tabMenuWrap .tabMenu.lineSecondary {
    gap: 0.8rem;
  }
  .tabWrap .tabMenuWrap .tabMenu.lineSecondary li {
    height: 4rem;
    max-width: 5.6rem;
    min-width: 5.6rem;
    padding: 0 0.4rem;
  }
  .tabWrap .tabMenuWrap .tabMenu.fill {
    width: 100%;
    border-radius: 0.8rem;
  }
  .tabWrap .tabMenuWrap .tabMenu.fill li {
    height: 5.6rem;
    min-width: 8rem;
    padding: 0 1.6rem;
  }
  .tabWrap .tabMenuWrap .tabMenu.fill li:after {
    height: 5.6rem;
  }
  .tabWrap .tabMenuWrap .tabMenu.fillSecondary {
    border-radius: 0.8rem;
    gap: 0.8rem;
  }
  .tabWrap .tabMenuWrap .tabMenu.fillSecondary li.active button {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
    color: #ffffff;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .tabWrap .tabMenuWrap .tabMenu.fillSecondary li.active button {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .tabWrap .tabMenuWrap .tabMenu.fillSecondary li button {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
    color: #464C53;
    height: 4rem;
    min-width: 5.6rem;
    padding: 0 1.2rem;
    border-radius: 0.8rem;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .tabWrap .tabMenuWrap .tabMenu.fillSecondary li button {
    font-size: 1.4rem;
  }
}

.swiper,
.swiper2 {
  width: 600px;
  height: 300px;
}

.swiper-pagination-fraction {
  width: max-content;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin: 0 auto;
  padding: 14px 16px;
  border-radius: 1000px;
  border: 1px solid #cdd1d5;
  left: 50%;
  transform: translateX(-50%);
  color: #1e2124;
}
.swiper-pagination-fraction .swiper-pagination-current {
  color: #0076DD;
}

.swiper-pagination-bullets {
  width: max-content !important;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 16px;
  left: 50% !important;
  transform: translateX(-50%);
}
.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 !important;
  opacity: 1;
  background: #6d7882;
}
.swiper-pagination-bullets .swiper-pagination-bullet-active {
  width: 20px;
  height: 8px;
  border-radius: 10px;
  background: #0076DD;
}

.btnSwiper,
.swiper-button-toggle,
.swiper-button-prev,
.swiper-button-next {
  border-radius: 1000px;
  border: 1px solid #cdd1d5;
  background: #ffffff;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.2s ease;
}
.btnSwiper svg, .btnSwiper::after,
.swiper-button-toggle svg,
.swiper-button-toggle::after,
.swiper-button-prev svg,
.swiper-button-prev::after,
.swiper-button-next svg,
.swiper-button-next::after {
  display: none;
}
.btnSwiper:hover,
.swiper-button-toggle:hover,
.swiper-button-prev:hover,
.swiper-button-next:hover {
  border-color: #f4f5f6;
  background: #f4f5f6;
}
.btnSwiper:active,
.swiper-button-toggle:active,
.swiper-button-prev:active,
.swiper-button-next:active {
  border-color: #e6e8ea;
  background: #e6e8ea;
}

.swiper-button-prev::before {
  content: "";
  width: 24px;
  height: 24px;
  background-image: url("../images/icons/icon-arrow-left.svg");
}

.swiper-button-next::before {
  content: "";
  width: 24px;
  height: 24px;
  background-image: url("../images/icons/icon-arrow-right.svg");
}

.btnSwiper {
  position: absolute;
  z-index: 110;
  top: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.btnSwiper span {
  width: 24px;
  height: 24px;
}
.btnSwiper.stop {
  right: 50px;
}
.btnSwiper.more {
  right: 150px;
}

.stepWrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}
.stepWrap.mini {
  width: 330px;
}
.stepWrap > li {
  position: relative;
  flex: 1;
}
.stepWrap > li:after {
  content: "";
  position: absolute;
  top: 8px;
  width: 100%;
  height: 2px;
  background-color: #cdd1d5;
}
.stepWrap > li.done span:before {
  border-color: #6d7882;
  background-color: #6d7882;
  background-image: url("../images/icons/icon-check-on.svg");
}
.stepWrap > li.done:after {
  background-color: #6d7882;
}
.stepWrap > li.active span i {
  color: #0076DD;
}
.stepWrap > li.active span .stepTit {
  color: #0076DD;
}
.stepWrap > li.active span:before {
  border-color: #0076DD;
  background: #0076DD;
  background-image: url("../images/icons/icon-circle.svg");
  background-repeat: no-repeat;
  background-position: center center;
}
.stepWrap > li > span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  margin-top: 28px;
}
.stepWrap > li > span:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 20px;
  height: 20px;
  border-radius: 1000px;
  border: 1px solid #cdd1d5;
  background: #e6e8ea;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 50%;
}
.stepWrap > li > span i {
  font-style: normal;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #464C53;
}
@media (max-width: 1024px) {
  .stepWrap > li > span i {
    font-size: 1.4rem;
  }
}
.stepWrap > li > span .stepTit {
  margin-top: 0;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .stepWrap > li > span .stepTit {
    font-size: 1.6rem;
  }
}
.stepWrap > li > span .stepTit {
  padding: 0px 16px;
  word-wrap: break-word;
  word-break: break-all;
  text-align: center;
}
@media (max-width: 370px) {
  .stepWrap > li > span .stepTit {
    padding: 0px;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 370px) and (max-width: 1024px) {
  .stepWrap > li > span .stepTit {
    font-size: 1.4rem;
  }
}

.spinner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
}
.spinner--large:before {
  width: 44px;
  height: 44px;
}
.spinner--large:after {
  width: 44px;
  height: 44px;
  border: 6px solid #C2DFF9;
}
.spinner--medium:before {
  width: 29px;
  height: 29px;
  background-size: 14px;
}
.spinner--medium:after {
  width: 29px;
  height: 29px;
  border: 4px solid #C2DFF9;
}
.spinner--small:before {
  width: 18px;
  height: 18px;
  background-size: 10px;
}
.spinner--small:after {
  width: 18px;
  height: 18px;
  border: 3px solid #C2DFF9;
}
.spinner:before {
  content: "";
  display: inline-flex;
  border-radius: 100%;
  animation: spin 1000ms infinite linear;
  background-image: url("../images/icons/icon-spinner.svg");
  background-repeat: no-repeat;
  z-index: 100;
  position: absolute;
}
.spinner:after {
  content: "";
  display: inline-flex;
  z-index: -1;
  border-radius: 100%;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.toolTip {
  position: relative;
  display: inline-block;
}
.toolTip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  max-width: 360px;
  padding: 4px 12px;
  background-color: #1E2124;
  color: #ffffff;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1000;
}
.toolTip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #1E2124;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
.toolTip:hover::after, .toolTip:hover::before {
  opacity: 1;
  visibility: visible;
}
.toolTip:hover::after {
  transform: translateX(-50%) translateY(-1px);
}
.toolTip:hover::before {
  transform: translateX(-50%) translateY(-1px);
}
.toolTip[data-tooltip-position=bottom-left]::after {
  bottom: auto;
  top: calc(100% + 6px);
  left: 0px;
  transform: translateX(0%);
}
.toolTip[data-tooltip-position=bottom-left]::before {
  bottom: auto;
  top: 100%;
  left: 24px;
  transform: translateX(0%);
  border-top: none;
  border-bottom: 6px solid #1E2124;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
.toolTip[data-tooltip-position=bottom-left]:hover::after {
  transform: translateX(0%) translateY(6px);
}
.toolTip[data-tooltip-position=bottom-left]:hover::before {
  transform: translateX(0%) translateY(6px);
}
.toolTip[data-tooltip-position=bottom-center]::after {
  bottom: auto;
  top: calc(100% + 6px);
  transform: translateX(-50%);
}
.toolTip[data-tooltip-position=bottom-center]::before {
  bottom: auto;
  top: 100%;
  transform: translateX(-50%);
  border-top: none;
  border-bottom: 6px solid #1E2124;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
.toolTip[data-tooltip-position=bottom-center]:hover::after {
  transform: translateX(-50%) translateY(6px);
}
.toolTip[data-tooltip-position=bottom-center]:hover::before {
  transform: translateX(-50%) translateY(6px);
}
.toolTip[data-tooltip-position=bottom-right]::after {
  bottom: auto;
  top: calc(100% + 6px);
  right: 0px;
  left: unset;
  transform: translateX(0%);
}
.toolTip[data-tooltip-position=bottom-right]::before {
  bottom: auto;
  top: 100%;
  right: 24px;
  left: unset;
  transform: translateX(0%);
  border-top: none;
  border-bottom: 6px solid #1E2124;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
.toolTip[data-tooltip-position=bottom-right]:hover::after {
  transform: translateX(0%) translateY(6px);
}
.toolTip[data-tooltip-position=bottom-right]:hover::before {
  transform: translateX(0%) translateY(6px);
}
.toolTip[data-tooltip-position=top-left]::after {
  top: auto;
  bottom: 100%;
  left: 0px;
  transform: translateX(0%);
}
.toolTip[data-tooltip-position=top-left]::before {
  top: auto;
  bottom: 100%;
  left: 24px;
  transform: translateX(0%);
  border-top: none;
  border-top: 6px solid #1E2124;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
.toolTip[data-tooltip-position=top-left]:hover::after {
  transform: translateX(0%) translateY(-6px);
}
.toolTip[data-tooltip-position=top-left]:hover::before {
  transform: translateX(0%) translateY(0px);
}
.toolTip[data-tooltip-position=top-right]::after {
  top: auto;
  bottom: 100%;
  right: 0px;
  left: unset;
  transform: translateX(0%);
}
.toolTip[data-tooltip-position=top-right]::before {
  top: auto;
  bottom: 100%;
  right: 24px;
  left: unset;
  transform: translateX(0%);
  border-top: none;
  border-top: 6px solid #1E2124;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
.toolTip[data-tooltip-position=top-right]:hover::after {
  transform: translateX(0%) translateY(-6px);
}
.toolTip[data-tooltip-position=top-right]:hover::before {
  transform: translateX(0%) translateY(0px);
}
.toolTip[data-tooltip-position=left]::after {
  bottom: auto;
  top: 50%;
  left: auto;
  right: calc(100% + 6px);
  transform: translateY(-50%);
}
.toolTip[data-tooltip-position=left]::before {
  bottom: auto;
  top: 50%;
  left: auto;
  right: 100%;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #1E2124;
  border-right: none;
}
.toolTip[data-tooltip-position=left]:hover::after {
  transform: translateY(-50%) translateX(-6px);
}
.toolTip[data-tooltip-position=left]:hover::before {
  transform: translateY(-50%) translateX(-6px);
}
.toolTip[data-tooltip-position=right]::after {
  bottom: auto;
  top: 50%;
  left: calc(100% + 6px);
  transform: translateY(-50%);
}
.toolTip[data-tooltip-position=right]::before {
  bottom: auto;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #1E2124;
  border-left: none;
}
.toolTip[data-tooltip-position=right]:hover::after {
  transform: translateY(-50%) translateX(6px);
}
.toolTip[data-tooltip-position=right]:hover::before {
  transform: translateY(-50%) translateX(6px);
}
.toolTip--rich::after {
  padding: 24px;
  background: #ffffff;
  border: 1px solid #B1B8BE;
  border-radius: 12px;
  color: #1e2124;
  white-space: normal;
  width: 360px;
  text-align: left;
  z-index: 10;
}
.toolTip--rich::before {
  width: 22px;
  height: 16px;
  border: none !important;
  background-image: url(../images/icons/icon-tooltip-arrow.svg);
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  transform: translateX(0%) translateY(1px);
}
.toolTip--rich:hover::before {
  transform: translateX(0%) translateY(1px);
}
.toolTip--rich[data-tooltip-position=bottom-left]:hover::before, .toolTip--rich[data-tooltip-position=bottom-right]:hover::before {
  transform: translateX(0%) translateY(1px);
}
.toolTip--rich[data-tooltip-position=bottom-left]:hover::after, .toolTip--rich[data-tooltip-position=bottom-right]:hover::after {
  transform: translateX(0%) translateY(6px);
}
.toolTip--rich[data-tooltip-position=bottom-center]:hover::before {
  transform: translateX(-50%) translateY(1px);
}
.toolTip--rich[data-tooltip-position=bottom-center]:hover::after {
  transform: translateX(-50%) translateY(6px);
}
.toolTip--rich[data-tooltip-position=top-left]:hover::before, .toolTip--rich[data-tooltip-position=top-right]:hover::before {
  transform: translateX(0%) translateY(-6px) rotate(180deg);
}
.toolTip--rich[data-tooltip-position=top-left]:hover::after, .toolTip--rich[data-tooltip-position=top-right]:hover::after {
  transform: translateX(0%) translateY(-17px);
}
.toolTip--rich[data-tooltip-position=top-center]:hover::before {
  transform: translateX(-50%) translateY(-6px) rotate(180deg);
}
.toolTip--rich[data-tooltip-position=top-center]:hover::after {
  transform: translateX(-50%) translateY(-11px);
}

.krds-tooltip-popover {
  position: absolute;
  padding: 8px 12px;
  background-color: #1E2124;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.4;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 9999;
}
.krds-tooltip-popover.active {
  opacity: 1;
  visibility: visible;
}

.progressBox .progress {
  display: flex;
  width: 172px;
  height: 8px;
  overflow: hidden;
  background-color: #CDD1D5;
  border-radius: 4px;
}
.progressBox .progress .progressBar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background-color: #0C82E9;
  transition: width 0.6s ease;
}
.progressBox .progressText {
  color: #464C53;
}
.progressBox.success .progressBar {
  background-color: #267337;
}
.progressBox.success .progressText {
  color: #267337;
}
.progressBox.danger .progressBar {
  background-color: #DE3412;
}
.progressBox.danger .progressText {
  color: #DE3412;
}
.progressBox--medium .progress {
  height: 4px;
}
.progressBox--medium .progress .progressBar {
  height: 4px;
}

/* Header */
/* Skip Navigation */
.skip-nav {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000;
}
.skip-nav ul {
  margin: 0;
  padding: 0;
}
.skip-nav li {
  list-style: none;
}
.skip-nav a {
  position: absolute;
  top: -9999px;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  color: #0079c6;
  background-color: #fff;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  border: 1px solid #0079c6;
}
.skip-nav a:focus-visible, .skip-nav a:active {
  top: 32px;
  left: 8px;
  width: auto;
  height: auto;
  padding: 6px 12px;
  overflow: visible;
  z-index: 1001;
}

.commonGnb {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 70;
  transition: top 0.4s;
  background: #ffffff;
}
.commonGnb.is-scroll {
  top: -100%;
}
.commonGnb.is-scroll .gnb-main-list {
  top: 0px !important;
}
.commonGnb .commonGnbWrap {
  width: 100%;
  height: 36px;
  margin: 0 auto;
  border-bottom: 1px solid #cdd1d5;
}
.commonGnb .commonGnbWrap .seoul-gnb-holder {
  position: relative;
  max-width: 1440px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}
.commonGnb .commonGnbWrap .seoul-gnb-holder .seoul-gnb-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 0 0 0 8px;
}
.commonGnb .commonGnbWrap .seoul-gnb-holder .seoul-gnb-top .seoul-gnb-link a {
  display: block;
  width: 84px;
  height: 36px;
  background: url("../images/fo/common/seoul-logo.svg") no-repeat center;
  text-indent: -9999px;
}
.commonGnb .commonGnbWrap .seoul-gnb-holder .seoul-gnb-top .seoul-gnb-news dd a {
  width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .commonGnb .commonGnbWrap .seoul-gnb-holder .seoul-gnb-top .seoul-gnb-news dd a {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .commonGnb .commonGnbWrap .seoul-gnb-holder .seoul-gnb-top .seoul-gnb-news {
    display: none;
  }
}
.commonGnb .commonGnbWrap .seoul-gnb-holder .seoul-gnb-menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.commonGnb .commonGnbWrap .seoul-gnb-holder .seoul-gnb-menu > dt {
  position: absolute;
  left: -99px;
  top: -99px;
  width: 0;
  height: 0;
  overflow: hidden;
  text-indent: -9999px;
}
.commonGnb .commonGnbWrap .seoul-gnb-holder .seoul-gnb-menu > dd > a,
.commonGnb .commonGnbWrap .seoul-gnb-holder .seoul-gnb-menu > dd > button {
  padding: 4px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .commonGnb .commonGnbWrap .seoul-gnb-holder .seoul-gnb-menu > dd > a,
  .commonGnb .commonGnbWrap .seoul-gnb-holder .seoul-gnb-menu > dd > button {
    font-size: 1.4rem;
  }
}
@media (max-width: 403px) {
  .commonGnb .commonGnbWrap .seoul-gnb-holder .seoul-gnb-menu {
    gap: 0;
  }
  .commonGnb .commonGnbWrap .seoul-gnb-holder .seoul-gnb-menu > dd > a, .commonGnb .commonGnbWrap .seoul-gnb-holder .seoul-gnb-menu > dd button {
    padding: 0.2rem;
    font-size: 1.2rem;
  }
}
@media (max-width: 270px) {
  .commonGnb .commonGnbWrap .seoul-gnb-holder .seoul-gnb-menu {
    display: none;
  }
}

.gnb-group {
  height: 84px;
  padding: 11.5px 0;
  border-bottom: 1px solid #cdd1d5;
}
.gnb-group > div {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.gnb-group > div h1 {
  padding-left: 8px;
}
.gnb-group > div h1 a {
  display: block;
  width: 245px;
  height: 49px;
  background: url("../images/fo/common/header-logo.png") no-repeat;
  background-size: contain;
  text-indent: -9999px;
}
.gnb-group > div nav ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.gnb-group > div nav ul.gnb-menu {
  position: relative;
  left: 25px;
  padding: 4px;
  border-radius: 1000px;
  background: linear-gradient(180deg, #2972C9 0%, #4B8AD9 100%);
}
.gnb-group > div nav ul.gnb-menu li a,
.gnb-group > div nav ul.gnb-menu li button {
  width: 124px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 16px;
  color: #ffffff;
}
.gnb-group > div nav ul.gnb-menu li a span,
.gnb-group > div nav ul.gnb-menu li button span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
  color: #ffffff;
}
@media (max-width: 1024px) {
  .gnb-group > div nav ul.gnb-menu li a span,
  .gnb-group > div nav ul.gnb-menu li button span {
    font-size: 2rem;
  }
}
.gnb-group > div nav ul.gnb-menu li a span,
.gnb-group > div nav ul.gnb-menu li button span {
  background-size: contain;
}
.gnb-group > div nav ul.gnb-menu li .gnb-main-trigger {
  border-radius: 1000px;
}
.gnb-group > div nav ul.gnb-menu li .gnb-main-trigger.on, .gnb-group > div nav ul.gnb-menu li .gnb-main-trigger.active {
  background: rgba(0, 0, 0, 0.25);
}
.gnb-group > div nav ul.gnb-menu li .gnb-toggle-wrap {
  display: none;
}
.gnb-group > div nav ul.gnb-menu li .gnb-toggle-wrap.is-open {
  display: block;
}
.gnb-group > div nav ul.gnb-menu li .gnb-main-list {
  position: fixed;
  left: 0;
  top: 120px;
  width: 100%;
  z-index: 20;
}
.gnb-group > div nav ul.gnb-menu li .gnb-main-list .gnb-sub-list {
  height: 185px;
  background: #fff;
}
.gnb-group > div nav ul.gnb-menu li .gnb-main-list .gnb-sub-list .gnb-sub-content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 1440px;
  height: 100%;
  margin: 0 auto;
}
.gnb-group > div nav ul.gnb-menu li .gnb-main-list .gnb-sub-list .gnb-sub-content .subTitle {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  width: 384px;
  height: 100%;
  padding: 24px 24px 40px 24px;
  border-right: 1px solid #cdd1d5;
  border-left: 1px solid #cdd1d5;
}
.gnb-group > div nav ul.gnb-menu li .gnb-main-list .gnb-sub-list .gnb-sub-content .subTitle h2 {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .gnb-group > div nav ul.gnb-menu li .gnb-main-list .gnb-sub-list .gnb-sub-content .subTitle h2 {
    font-size: 2.6rem;
  }
}
.gnb-group > div nav ul.gnb-menu li .gnb-main-list .gnb-sub-list .gnb-sub-content .subTitle p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .gnb-group > div nav ul.gnb-menu li .gnb-main-list .gnb-sub-list .gnb-sub-content .subTitle p {
    font-size: 1.6rem;
  }
}
.gnb-group > div nav ul.gnb-menu li .gnb-main-list .gnb-sub-list .gnb-sub-content .subMenu {
  height: 100%;
  padding: 24px 24px 40px 24px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 32px;
}
.gnb-group > div nav ul.gnb-menu li .gnb-main-list .gnb-sub-list .gnb-sub-content .subMenu ul {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
}
.gnb-group > div nav ul.gnb-menu li .gnb-main-list .gnb-sub-list .gnb-sub-content .subMenu ul li a {
  width: max-content;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .gnb-group > div nav ul.gnb-menu li .gnb-main-list .gnb-sub-list .gnb-sub-content .subMenu ul li a {
    font-size: 1.8rem;
  }
}
.gnb-group > div nav ul.gnb-menu li .gnb-main-list .gnb-sub-list .gnb-sub-content .subMenu ul li a {
  text-align: left;
}
.gnb-group > div nav ul.gnb-menu li .gnb-main-list .gnb-sub-list .gnb-sub-content .subMenu ul li a:hover {
  color: #0076DD;
  background: #ECF2FE;
}
.gnb-group > div nav ul.gnb-util {
  gap: 12px;
}
.gnb-group > div nav ul.gnb-util li a,
.gnb-group > div nav ul.gnb-util li button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4px;
  gap: 4px;
  color: #1e2124;
}
.gnb-group > div nav ul.gnb-util li a span,
.gnb-group > div nav ul.gnb-util li button span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .gnb-group > div nav ul.gnb-util li a span,
  .gnb-group > div nav ul.gnb-util li button span {
    font-size: 1.6rem;
  }
}
.gnb-group > div {
  /* 랩탑  768px ~ 1024 */
}
@media (max-width: 1024px) {
  .gnb-group > div nav {
    display: none;
  }
}
@media (min-width: 1024px) and (max-width: 1280px) {
  .gnb-group > div h1 {
    padding-left: 0.625vw;
  }
  .gnb-group > div nav ul.gnb-menu {
    left: 1.953125vw;
    padding: 0.3125vw;
  }
  .gnb-group > div nav ul.gnb-menu li a,
  .gnb-group > div nav ul.gnb-menu li button {
    width: 9.6875vw;
    gap: 0.625vw;
    padding: 0.78125vw 0.78125vw 0.78125vw 1.25vw;
  }
  .gnb-group > div nav ul.gnb-menu li a span,
  .gnb-group > div nav ul.gnb-menu li button span {
    font-size: 1.5625vw;
  }
  .gnb-group > div nav ul.gnb-util {
    gap: 0.9375vw;
    margin-left: 0.9375vw;
  }
  .gnb-group > div nav ul.gnb-util li a,
  .gnb-group > div nav ul.gnb-util li button {
    padding: 0.3125vw;
    gap: 0.3125vw;
  }
  .gnb-group > div nav ul.gnb-util li a span,
  .gnb-group > div nav ul.gnb-util li button span {
    font-size: 1.25vw;
  }
}
.gnb-group > div {
  /* 모바일  0 ~ 403 */
}
@media (max-width: 403px) {
  .gnb-group > div h1 a {
    width: 20rem;
    height: 4rem;
  }
}
.gnb-group > div {
  /* 모바일  0 ~ 403 */
}
@media (max-width: 270px) {
  .gnb-group > div h1 a {
    width: 74.0740740741vw;
    background-position: center;
  }
}

.gnb-backdrop {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 60;
  background-color: rgba(0, 0, 0, 0.2509803922);
}
.gnb-backdrop.active {
  display: block;
}

.mobileBtn,
.mobileBg,
.mobileMenu {
  display: none;
}

/* 랩탑  768px ~ 1024 */
@media (max-width: 1024px) {
  .mobileBtn {
    display: block;
  }
  .mobileBtn button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
  }
  .mobileBtn button span {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .mobileBtn button span {
    font-size: 1.6rem;
  }
}
@media (max-width: 1024px) {
  .mobileBg,
  .mobileMenu {
    position: absolute;
  }
  .mobileMenu {
    top: 0;
    right: 0;
    max-width: 32.4rem;
    width: 100%;
    height: 100dvh;
    background: #ffffff;
  }
  .mobileMenu.on {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: auto;
  }
  .mobileMenu .shoutCut {
    height: 7.2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #58616a;
  }
  .mobileMenu .shoutCut ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .mobileMenu .shoutCut ul li {
    padding: 0.4rem;
  }
  .mobileMenu .shoutCut ul li button,
  .mobileMenu .shoutCut ul li a {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.2rem;
  }
  .mobileMenu .shoutCut ul li button span,
  .mobileMenu .shoutCut ul li a span {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .mobileMenu .shoutCut ul li button span,
  .mobileMenu .shoutCut ul li a span {
    font-size: 1.6rem;
  }
}
@media (max-width: 1024px) {
  .mobileMenu .shoutCut ul li button span.icon,
  .mobileMenu .shoutCut ul li a span.icon {
    width: 1.6rem;
    height: 1.6rem;
    background-size: contain;
  }
  .mobileMenu .shoutCut .mClose {
    width: 3rem;
    height: 3rem;
  }
  .mobileMenu .mMenuList {
    color: rgba(0, 0, 0, 0.2509803922);
    height: 100%;
  }
  .mobileMenu .mMenuList ul li {
    width: 100%;
    border-bottom: 1px solid #cdd1d5;
  }
  .mobileMenu .mMenuList ul li a.depth1 {
    width: 100%;
    display: block;
    padding: 1.6rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .mobileMenu .mMenuList ul li a.depth1 {
    font-size: 1.8rem;
  }
}
@media (max-width: 1024px) {
  .mobileMenu .mMenuList ul li a.depth1:before {
    content: "";
    width: 2.4rem;
    height: 2.4rem;
    position: absolute;
    right: 1.6rem;
    background: url("../images/fo/icons/icon-arrow-down.svg") no-repeat center right;
  }
  .mobileMenu .mMenuList ul li a.depth1.on:before {
    transform: rotate(180deg);
  }
  .mobileMenu .mMenuList ul li .depth1Menu {
    max-height: 0;
    overflow: hidden;
  }
  .mobileMenu .mMenuList ul li .depth1Menu.on {
    max-height: 50rem;
    transition: all 0.5s ease;
  }
  .mobileMenu .mMenuList ul li .depth1Menu li {
    border-bottom: 1px solid #cdd1d5;
    background: #F9FAFB;
  }
  .mobileMenu .mMenuList ul li .depth1Menu li:first-child {
    border-top: 1px solid #cdd1d5;
  }
  .mobileMenu .mMenuList ul li .depth1Menu li:last-child {
    border-bottom: none;
  }
  .mobileMenu .mMenuList ul li .depth1Menu li a {
    width: 100%;
    display: block;
    padding: 1rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .mobileMenu .mMenuList ul li .depth1Menu li a {
    font-size: 1.6rem;
  }
}
@media (max-width: 1024px) {
  .mobileMenu .mMenuList ul li .depth1Menu li a::before {
    content: "•";
    padding-right: 0.8rem;
    display: inline-block;
  }
  .mobileMenu .policy {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 1rem 1rem 2.4rem 1rem;
  }
  .mobileMenu .policy ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1.2rem;
  }
  .mobileMenu .policy ul li {
    padding: 0.4rem;
  }
  .mobileMenu .policy ul li a {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .mobileMenu .policy ul li a {
    font-size: 1.6rem;
  }
}
@media (max-width: 1024px) {
  .mobileBg.on {
    width: 100%;
    height: 100dvh;
    top: 0;
    left: 0;
    display: block;
    background: rgba(0, 0, 0, 0.5);
  }
}
.footer .btnTop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 72px;
  height: 72px;
  padding: 0;
  z-index: 10;
  border-radius: 1000px;
  overflow: hidden;
  background: #0076DD;
  /* shadow3 */
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.13), 0 8px 16px 0 rgba(0, 0, 0, 0.16);
}
.footer .btnTop:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 2px;
}
.footer .related-links {
  border-top: 1px solid #cdd1d5;
  border-bottom: 1px solid #cdd1d5;
}
.footer .related-links ul {
  max-width: 1440px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.footer .related-links ul li {
  width: 25%;
  border-right: 1px solid #cdd1d5;
}
.footer .related-links ul li:first-child {
  border-left: 1px solid #cdd1d5;
}
.footer .related-links ul li a {
  width: 100%;
  height: 48px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 16px 0 24px;
}
.footer .related-links ul li a span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .footer .related-links ul li a span {
    font-size: 1.6rem;
  }
}
.footer .related-links ul li.footerDropBox .dropCont {
  position: relative;
  display: none;
  transition: height 300ms ease;
}
.footer .related-links ul li.footerDropBox .dropCont .dropList {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(100% + 2px);
  max-width: unset;
  position: absolute;
  bottom: 48px;
  left: -1px;
  margin: unset;
  border: 1px solid #cdd1d5;
  background: #fff;
}
.footer .related-links ul li.footerDropBox .dropCont .dropList li {
  width: 100%;
  border: none;
}
.footer .related-links ul li.footerDropBox .dropCont .dropList li a {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .footer .related-links ul li.footerDropBox .dropCont .dropList li a {
    font-size: 1.6rem;
  }
}
.footer .footer-info {
  padding: 40px 0;
}
.footer .footer-info > div {
  max-width: 1440px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  margin: 0 auto;
}
.footer .footer-info > div .contact-info {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 80px;
}
.footer .footer-info > div .contact-info h2 a {
  display: block;
  width: 196px;
  height: 40px;
  background: url("../images/fo/common/header-logo.png") no-repeat;
  text-indent: -9999px;
  background-size: contain;
}
.footer .footer-info > div .contact-info > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
}
.footer .footer-info > div .contact-info > div div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.footer .footer-info > div .contact-info > div p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .footer .footer-info > div .contact-info > div p {
    font-size: 1.6rem;
  }
}
.footer .footer-info > div .contact-info > div p .divider {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: #6d7882;
}
.footer .footer-info > div .banner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 18px;
}
.footer .policy {
  max-width: 1440px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 16px 0 24px 0;
  border-top: 1px solid #cdd1d5;
}
.footer .policy ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.footer .policy ul li {
  padding: 4px;
}
.footer .policy ul li a {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .footer .policy ul li a {
    font-size: 1.6rem;
  }
}
.footer .policy ul li a:hover {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.footer .policy ul li a.point {
  color: #0076DD;
  font-weight: 600;
}
.footer .policy p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .footer .policy p {
    font-size: 1.4rem;
  }
}
.footer .policy p {
  text-align: center;
}
.footer {
  /* 랩탑  768px ~ 1024 */
}
@media (max-width: 1024px) {
  .footer .policy {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 1.6rem 2rem 2.4rem;
  }
}
.footer {
  /* 태블릿   403 ~ 768px */
}
@media (max-width: 768px) {
  .footer .btnTop {
    width: 4.8rem;
    height: 4.8rem;
    right: 1rem;
    bottom: 1rem;
  }
  .footer .related-links ul {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .footer .related-links ul li {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #CDD1D5;
    background: #F9FAFB;
  }
  .footer .related-links ul li:first-child {
    border-left: none;
  }
  .footer .related-links ul li:last-child {
    border-bottom: none;
  }
  .footer .related-links ul li a {
    gap: 0.8rem;
    padding: 0 1.6rem 0 2.4rem;
  }
  .footer .footer-info {
    padding: 1.6rem 0 1.2rem;
  }
  .footer .footer-info > div {
    max-width: 100%;
  }
  .footer .footer-info > div .contact-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.2rem;
  }
  .footer .footer-info > div .banner {
    display: none;
  }
  .footer .policy {
    gap: 1.6rem;
    padding: 1.6rem;
  }
  .footer .policy ul {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
@media (max-width: 403px) {
  .footer .policy p {
    text-align: left;
  }
}

.mo {
  display: none !important;
}
@media (max-width: 768px) {
  .mo {
    display: block !important;
  }
  table.mo {
    display: table !important;
  }
}

.pc {
  display: block;
}
table.pc {
  display: table !important;
}

@media (max-width: 768px) {
  .pc {
    display: none !important;
  }
  table.pc {
    display: none !important;
  }
}

.container .containerWrap {
  max-width: 1440px;
  min-height: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 28px;
  padding: 8px 0 64px;
}
.container .containerWrap.main {
  padding: 32px 0 64px;
}
.container .containerWrap.main .content {
  width: 100%;
}
.container .containerWrap .content {
  width: calc(100% - 268px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  padding-top: 12px;
}
.container .containerWrap .content .title {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}
.container .containerWrap .content .title h2 {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .container .containerWrap .content .title h2 {
    font-size: 3.2rem;
  }
}
.container .containerWrap .content .title .breadcrumb {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
}
.container .containerWrap .content .title .breadcrumb li a,
.container .containerWrap .content .title .breadcrumb li span {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  color: #1e2124;
  border-radius: 8px;
  transition: background 0.3s;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .container .containerWrap .content .title .breadcrumb li a,
  .container .containerWrap .content .title .breadcrumb li span {
    font-size: 1.6rem;
  }
}
.container .containerWrap .content .title .breadcrumb li a span:not(.icon):after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 2px;
  background: #000;
}
.container .containerWrap .content .title .breadcrumb li a span:not(.icon) {
  position: relative;
  border-radius: 0;
}
.container .containerWrap .content .title .breadcrumb li span.icon {
  width: 16px;
  height: 16px;
  background-size: 16px;
}
.container .containerWrap .content .title .breadcrumb li:hover a {
  background: #f4f5f6;
}
.container .containerWrap .content section {
  width: 100%;
}
.container .containerWrap .content section .con {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
}
.container .containerWrap .content section .con.main {
  gap: 24px;
}
.container .containerWrap .content section .con.alim {
  gap: 20px;
}
.container .containerWrap .content section .con .contentWrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
}
.container .containerWrap {
  /* 랩탑 ~ */
}
@media (max-width: 1024px) {
  .container .containerWrap {
    max-width: 100%;
    min-height: max-content;
    padding: 3.2rem 2rem 6.4rem;
    gap: 2.4rem;
  }
  .container .containerWrap.main {
    padding: 3.2rem 2rem 6.4rem;
  }
  .container .containerWrap .content {
    width: 100%;
    padding-top: 0;
    gap: 2rem;
  }
  .container .containerWrap .content section .con.main {
    gap: 2.4rem;
  }
}
.container .containerWrap {
  /* 태블릿 ~ */
}
@media (max-width: 768px) {
  .container .containerWrap .content {
    gap: 0.8rem;
  }
  .container .containerWrap .content section .con {
    gap: 0.8rem;
  }
  .container .containerWrap .content section .con.main {
    gap: 2rem;
  }
  .container .containerWrap .content section .con.alim {
    gap: 0.8rem;
  }
  .container .containerWrap .content section .con .contentWrap {
    gap: 0.8rem;
  }
}
@media (max-width: 550px) {
  .container .containerWrap.main {
    padding: 1.6rem 0.8rem 3.2rem;
  }
  .container .containerWrap .content {
    padding: 0;
  }
  .container .containerWrap .content .title {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: flex-start;
    gap: 1.6rem;
  }
  .container .containerWrap .content .title h2 {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 550px) and (max-width: 1024px) {
  .container .containerWrap .content .title h2 {
    font-size: 2.6rem;
  }
}
@media (max-width: 403px) {
  .container .containerWrap {
    padding: 1.6rem 1rem 3.2rem;
  }
}

.sidebar {
  width: 240px;
  flex: none;
}
.sidebar h2 {
  height: 64px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  align-self: stretch;
  gap: 8px;
  padding: 0 8px;
  border-bottom: 1px solid #8A949E;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .sidebar h2 {
    font-size: 2rem;
  }
}
.sidebar nav {
  width: 100%;
}
.sidebar .side-menu {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.sidebar .side-menu > li {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: stretch;
  background: #ffffff;
}
.sidebar .side-menu > li.on a .icon {
  transform: rotate(180deg);
}
.sidebar .side-menu > li.on ul {
  height: auto;
}
.sidebar .side-menu > li > button {
  width: 100%;
  border-bottom: 1px solid #CDD1D5;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .sidebar .side-menu > li > button {
    font-size: 1.8rem;
  }
}
.sidebar .side-menu > li > a {
  position: relative;
  width: 100%;
  height: 47px;
  padding: 10px 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #CDD1D5;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .sidebar .side-menu > li > a {
    font-size: 1.8rem;
  }
}
.sidebar .side-menu > li > a:focus-visible {
  outline-offset: -3px;
}
.sidebar .side-menu > li > a.on, .sidebar .side-menu > li > a[aria-current=page], .sidebar .side-menu > li > a:hover {
  background: #ECF2FE;
  color: #0076DD;
}
.sidebar .side-menu > li > a.on:before, .sidebar .side-menu > li > a[aria-current=page]:before, .sidebar .side-menu > li > a:hover:before {
  background: #0076DD;
}
.sidebar .side-menu > li > a.on:after, .sidebar .side-menu > li > a[aria-current=page]:after, .sidebar .side-menu > li > a:hover:after {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -1px;
  display: block;
  border-bottom: 2px solid #0076DD;
}
.sidebar .side-menu > li > a span.icon {
  width: 20px;
  height: 20px;
  background-size: 20px;
}
.sidebar .side-menu > li ul {
  width: 100%;
  height: 0px;
  overflow: hidden;
}
.sidebar .side-menu > li ul li a {
  width: 100%;
  display: block;
  border-bottom: none;
  justify-content: flex-start;
  padding: 8px 16px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .sidebar .side-menu > li ul li a {
    font-size: 1.6rem;
  }
}
.sidebar .side-menu > li ul li a.on, .sidebar .side-menu > li ul li a[aria-current=page], .sidebar .side-menu > li ul li a:hover {
  background: #ECF2FE;
  color: #0076DD;
}
.sidebar .side-menu > li ul li a.on:before, .sidebar .side-menu > li ul li a[aria-current=page]:before, .sidebar .side-menu > li ul li a:hover:before {
  background: #0076DD;
}
.sidebar .side-menu > li ul li a:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 4px;
  height: 4px;
  margin-top: -1px;
  margin-right: 8px;
  background: #33363D;
  border-radius: 50%;
}
.sidebar .side-menu > li ul li a:focus-visible {
  outline-offset: -3px;
}
.sidebar {
  /* 랩탑  768px ~ 1024 */
}
@media (max-width: 1024px) {
  .sidebar {
    display: none;
  }
}

.main {
  max-width: 1440px;
  margin: 0 auto;
}
.main .first {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
}
.main .first .mainSwiper {
  width: calc(100% - 529px);
  min-width: 0;
  height: 370px;
  overflow: hidden;
  position: relative;
  border-radius: 20px;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.13), 0 8px 16px 0 rgba(0, 0, 0, 0.16);
}
.main .first .mainSwiper .swiper-slide {
  width: 100% !important;
  height: 100%;
}
.main .first .mainSwiper .swiper-slide .mainBannerLink .mainBannerHtml {
  height: 100%;
}
.main .first .mainSwiper .swiper-slide .mainBannerLink .mainBannerHtml p {
  width: 100%;
  height: 100%;
}
.main .first .mainSwiper .swiper-slide .mainBannerLink .mainBannerHtml p img {
  width: 100%;
  height: 100%;
}
.main .first .mainSwiper .swiper-slide .mainBannerLink .mainBannerHtml img {
  width: 100%;
  height: 100%;
}
.main .first .mainSwiper .navi {
  width: max-content;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 16px;
  bottom: 24px;
  z-index: 10;
  height: 48px;
  padding: 0 8px 0 20px;
  border-radius: 1000px;
  border: 1px solid #CDD1D5;
  background: #ffffff;
  overflow: hidden;
}
.main .first .mainSwiper .navi .swiper-button-next,
.main .first .mainSwiper .navi .swiper-button-prev,
.main .first .mainSwiper .navi .swiper-button-toggle {
  position: relative;
  width: 32px;
  height: 40px;
  left: unset;
  right: unset;
  top: unset;
  bottom: unset;
  margin-top: unset;
  padding: 8px 4px;
  border: none;
  border-radius: 0;
}
.main .first .mainSwiper .navi .swiper-button-toggle::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto;
  background-image: url("../images/fo/icons/icon_main_stop.svg");
}
.main .first .mainSwiper .navi .swiper-button-toggle.is-paused::before {
  background-image: url("../images/fo/icons/icon-play.svg");
}
.main .first .mainSwiper .navi .custom-pagination {
  position: relative;
  left: unset;
  bottom: unset;
  top: unset;
  width: max-content;
  padding-right: 8px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .main .first .mainSwiper .navi .custom-pagination {
    font-size: 1.8rem;
  }
}
.main .first .mainSwiper .navi .custom-pagination {
  display: flex;
  gap: 8px;
}
.main .first .mainSwiper .navi .custom-pagination .current {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #0076DD;
}
@media (max-width: 1024px) {
  .main .first .mainSwiper .navi .custom-pagination .current {
    font-size: 1.8rem;
  }
}
.main .first form {
  flex: 0 0 529px;
}
.main .first form .chargeCheckBox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.main .first form .chargeCheckBox p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .main .first form .chargeCheckBox p {
    font-size: 2.2rem;
  }
}
.main .first form .chargeCheckBox .chargeCheck {
  width: 100%;
}
.main .first form .chargeCheckBox .chargeCheck .inputBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 9px;
}
.main .first form .chargeCheckBox .chargeCheck .inputBox > div {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
  height: 72px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid #CDD1D5;
}
.main .first form .chargeCheckBox .chargeCheck .inputBox > div .label {
  position: relative;
  width: 131px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex: none;
  padding: 0 0 0 12px;
}
.main .first form .chargeCheckBox .chargeCheck .inputBox > div .label span {
  margin-right: 10px;
}
.main .first form .chargeCheckBox .chargeCheck .inputBox > div .label label {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .main .first form .chargeCheckBox .chargeCheck .inputBox > div .label label {
    font-size: 1.8rem;
  }
}
.main .first form .chargeCheckBox .chargeCheck .inputBox > div .label:after {
  position: absolute;
  right: 0;
  content: "";
  width: 1px;
  height: 35px;
  background: #CDD1D5;
}
.main .first form .chargeCheckBox .chargeCheck .inputBox input {
  width: 100%;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .main .first form .chargeCheckBox .chargeCheck .inputBox input {
    font-size: 2rem;
  }
}
.main .first form .chargeCheckBox .chargeCheck .inputBox button {
  width: 24px;
  height: 24px;
  padding: 0 10px;
}
.main .first form .chargeCheckBox .chargeCheck .btnBox {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.main .first form .chargeCheckBox .chargeCheck .btnBox button {
  width: calc((100% - 16px) / 2);
}
.main .first #dataForm .chargeCheck .inputBox > div:has(input:disabled),
.main .first #dataForm .chargeCheck .inputBox input:disabled {
  background-color: #f0f0f0;
}
.main .first #dataForm .chargeCheck .inputBox input:disabled {
  color: #6d7882;
}
.main .first #searchNapgiYm:disabled + #searchNapgiYmBtn {
  display: none;
}
.main .second {
  width: 100%;
  overflow: hidden;
}
.main .second .tabWrap {
  width: 100%;
  margin: 0 auto 12px;
  gap: 0;
}
.main .second .tabWrap .tabMenuWrap {
  margin: 0 auto -1px;
}
.main .second .tabWrap .tabMenuWrap ul.tabMenu {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
}
.main .second .tabWrap .tabMenuWrap ul.tabMenu li {
  display: flex;
  justify-content: center;
  height: 48px;
  padding: 4px 24px 0 24px;
  border-radius: 20px 20px 0 0;
  border-top: 1px solid #CDD1D5;
  border-right: 1px solid #CDD1D5;
  border-left: 1px solid #CDD1D5;
  background: #F9FAFB;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .main .second .tabWrap .tabMenuWrap ul.tabMenu li {
    font-size: 1.8rem;
  }
}
.main .second .tabWrap .tabMenuWrap ul.tabMenu li.active {
  border-top: 1px solid #0076DD;
  border-right: 1px solid #0076DD;
  border-left: 1px solid #0076DD;
  background: #ffffff;
  z-index: 10;
}
.main .second .tabWrap .tabMenuWrap ul.tabMenu li button {
  color: #1e2124;
}
.main .second .tabWrap .tabContsWrap {
  width: 100%;
  margin: 0 auto;
  border-radius: 1000px;
  border: 1px solid #0076DD;
  background: #ffffff;
  /* shadow2 */
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.13);
}
.main .second .tabWrap .tabContsWrap section .shoutSwiper {
  width: 100%;
  position: relative;
  padding: 8px 70px;
  overflow: hidden;
}
.main .second .tabWrap .tabContsWrap section .shoutSwiper > p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .main .second .tabWrap .tabContsWrap section .shoutSwiper > p {
    font-size: 1.8rem;
  }
}
.main .second .tabWrap .tabContsWrap section .shoutSwiper > p {
  text-align: center;
}
.main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent {
  width: 100%;
  overflow: hidden;
}
.main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent.swiper-center-align .swiper-wrapper {
  justify-content: center;
}
.main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide {
  min-width: 0;
  margin: 4px 0;
}
.main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide a {
  width: 100%;
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0 20px 0 12px;
  gap: 8px;
  border-radius: 1000px;
}
.main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide a span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide a span {
    font-size: 2rem;
  }
}
.main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide a span.icon {
  width: 44px;
  height: 44px;
}
.main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide a span.icon.i_main_service01 {
  background: url("../images/fo/icons/icon_tab_mn01.svg") no-repeat center center;
  background-size: contain;
}
.main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide a span.icon.i_main_service02 {
  background: url("../images/fo/icons/icon_tab_mn02.svg") no-repeat center center;
  background-size: contain;
}
.main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide a span.icon.i_main_service03 {
  background: url("../images/fo/icons/icon_tab_mn03.svg") no-repeat center center;
  background-size: contain;
}
.main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide a span.icon.i_main_service04 {
  background: url("../images/fo/icons/icon_tab_mn04.svg") no-repeat center center;
  background-size: contain;
}
.main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide a span.icon.i_main_service05 {
  background: url("../images/fo/icons/icon_tab_mn05.svg") no-repeat center center;
  background-size: contain;
}
.main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide a span.icon.i_main_service06 {
  background: url("../images/fo/icons/icon_tab_mn06.svg") no-repeat center center;
  background-size: contain;
}
.main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide a span.icon.i_main_service07 {
  background: url("../images/fo/icons/icon_tab_mn07.svg") no-repeat center center;
  background-size: contain;
}
.main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide a span.icon.i_main_service08 {
  background: url("../images/fo/icons/icon_tab_mn08.svg") no-repeat center center;
  background-size: contain;
}
.main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide a.active, .main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide a:hover {
  border-radius: 1000px;
  background: linear-gradient(93deg, #E0F8F3 -2.68%, #DCE8FF 102.91%), linear-gradient(0deg, #ECF2FE 0%, #ECF2FE 100%), #DEE5F4;
}
.main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperControl {
  width: 100%;
  height: 48px;
  position: absolute;
  left: 0px;
  top: 16px;
}
.main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperControl .swiper-button-prev {
  width: 48px;
  height: 48px;
  left: 22px;
}
.main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperControl .swiper-button-next {
  width: 48px;
  height: 48px;
  right: 22px;
}
.main .third {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}
.main .third > div {
  width: calc((100% - 32px) / 2);
  min-height: 358px;
}
.main .third > div.notice {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 32px;
  border-radius: 20px;
  border: 1px solid #CDD1D5;
  background: #ECF2FE;
}
.main .third > div.notice .noticeHeader {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.main .third > div.notice .noticeHeader h3 {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .main .third > div.notice .noticeHeader h3 {
    font-size: 2.2rem;
  }
}
.main .third > div.notice ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}
.main .third > div.notice ul li {
  width: 100%;
  padding: 0 8px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .main .third > div.notice ul li {
    font-size: 1.8rem;
  }
}
.main .third > div.notice ul li:first-child {
  width: 100%;
  border: 1px solid #B1B8BE;
  padding: 0;
  background: #ffffff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  border-radius: 12px;
}
.main .third > div.notice ul li:first-child > span {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 24px;
}
.main .third > div.notice ul li:first-child a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 24px;
  border-radius: 12px;
  color: #1e2124;
}
.main .third > div.notice ul li:first-child a div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.main .third > div.notice ul li:first-child a div .badge {
  flex-shrink: 0;
  color: #fff;
}
.main .third > div.notice ul li:first-child a div .title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: normal;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .main .third > div.notice ul li:first-child a div .title {
    font-size: 1.8rem;
  }
}
.main .third > div.notice ul li:first-child a .date {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #464C53;
}
@media (max-width: 1024px) {
  .main .third > div.notice ul li:first-child a .date {
    font-size: 1.6rem;
  }
}
.main .third > div.notice ul li a {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: #1e2124;
}
.main .third > div.notice ul li a .title {
  width: 520px;
  display: block;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .main .third > div.notice ul li a .title {
    font-size: 1.8rem;
  }
}
.main .third > div.notice ul li a .title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.main .third > div.notice ul li a .date {
  flex: none;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #464C53;
}
@media (max-width: 1024px) {
  .main .third > div.notice ul li a .date {
    font-size: 1.6rem;
  }
}
.main .third > div.faq {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 24px 32px;
  gap: 16px;
  flex: 1 0 0;
  border-radius: 20px;
  border: 1px solid #CDD1D5;
  background: #ffffff;
}
.main .third > div.faq .faqHeader {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}
.main .third > div.faq .faqHeader h3 {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .main .third > div.faq .faqHeader h3 {
    font-size: 2.2rem;
  }
}
.main .third > div.faq .faqHeader .preview {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #0DA86C;
}
@media (max-width: 1024px) {
  .main .third > div.faq .faqHeader .preview {
    font-size: 1.6rem;
  }
}
.main .third > div.faq .faqHeader a {
  margin-left: auto;
}
.main .third > div.faq ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.main .third > div.faq ul li {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  border: 1px solid #B1B8BE;
  background: #ffffff;
  align-self: stretch;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .main .third > div.faq ul li {
    font-size: 1.8rem;
  }
}
.main .third > div.faq ul li > span {
  display: block;
  padding: 15px 19px;
}
.main .third > div.faq ul li a {
  width: 100%;
  padding: 15px 19px;
  display: block;
  background: url("../images/fo/icons/icon-arrow-right_hover.svg") no-repeat right 10px center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.main .third > div.faq ul li:hover {
  border: 1px solid #6787C9;
  background: linear-gradient(0deg, #F9FAFB 0%, #F9FAFB 100%), #F9FAFB;
}
.main .third > div.faq ul li:hover a {
  color: #0076DD;
}
.main .fourth {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  border-radius: 20px;
  border: 1px solid #CDD1D5;
  overflow: hidden;
}
.main .fourth div.officeMap {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 24px 32px;
  border-radius: 20px;
  overflow: hidden;
}
.main .fourth div.officeMap .officeMapHeader {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.main .fourth div.officeMap .officeMapHeader h3 {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .main .fourth div.officeMap .officeMapHeader h3 {
    font-size: 2.2rem;
  }
}
.main .fourth div.officeMap ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.main .fourth div.officeMap ul li {
  width: calc(50% - 0.4rem);
  height: stretch;
  border-radius: 12px;
  border: 1px solid #B1B8BE;
  background: url("../images/fo/icons/icon-arrow-right_hover.svg") no-repeat center right 20px;
}
.main .fourth div.officeMap ul li.active, .main .fourth div.officeMap ul li:hover {
  border: 1px solid #0076DD;
  background: #0076DD;
}
.main .fourth div.officeMap ul li.active .officeInfo span,
.main .fourth div.officeMap ul li.active .officeInfo span.contact, .main .fourth div.officeMap ul li:hover .officeInfo span,
.main .fourth div.officeMap ul li:hover .officeInfo span.contact {
  color: #ffffff;
}
.main .fourth div.officeMap ul li.active span.area, .main .fourth div.officeMap ul li:hover span.area {
  color: #ffffff;
}
.main .fourth div.officeMap ul li button {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;
}
.main .fourth div.officeMap ul li button .officeInfo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0px 12px;
  flex-wrap: wrap;
}
.main .fourth div.officeMap ul li button .officeInfo span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .main .fourth div.officeMap ul li button .officeInfo span {
    font-size: 1.8rem;
  }
}
.main .fourth div.officeMap ul li button .officeInfo span.contact {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #0076DD;
}
@media (max-width: 1024px) {
  .main .fourth div.officeMap ul li button .officeInfo span.contact {
    font-size: 1.6rem;
  }
}
.main .fourth div.officeMap ul li button span.area {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .main .fourth div.officeMap ul li button span.area {
    font-size: 1.8rem;
  }
}
.main .fourth div.officeMap ul li button span.area {
  text-align: left;
  white-space: break-spaces;
  word-break: auto-phrase;
}
.main .fourth div.officeMapDetail {
  width: 50%;
  background: #F9FAFB;
  height: 100%; /* -webkit-fill-available 미지원 브라우저 fallback */
  height: -webkit-fill-available;
  border-left: 1px solid #CDD1D5;
}
.main .fourth div.officeMapDetail .bgMap {
  width: calc(100% + 2px);
  height: 100%;
  background: url("../images/fo/map_bukbu.png") no-repeat center center;
  background-size: contain;
  transition: all 0.2s;
}
.main {
  /* 랩탑  768px ~ 1024 */
}
@media (max-width: 1024px) {
  .main {
    width: 100%;
    max-width: 100%;
  }
  .main .first {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2.4rem;
  }
  .main .first .mainSwiper {
    width: 100%;
    height: 35rem;
    border-radius: 2rem;
  }
  .main .first .mainSwiper .navi {
    right: 1.6rem;
    bottom: 2.4rem;
    height: 4.8rem;
    padding: 0 0.8rem 0 2rem;
    border-radius: 100rem;
  }
  .main .first .mainSwiper .navi .swiper-button-next,
  .main .first .mainSwiper .navi .swiper-button-prev,
  .main .first .mainSwiper .navi .swiper-button-toggle {
    width: 3.2rem;
    padding: 0.8rem 0.4rem;
  }
  .main .first .mainSwiper .navi .swiper-button-toggle::before {
    width: 2.4rem;
    height: 2.4rem;
  }
  .main .first .mainSwiper .navi .custom-pagination {
    padding-right: 0.8rem;
  }
  .main .first form {
    width: 100%;
    flex: none;
  }
  .main .first form .chargeCheckBox {
    gap: 1.6rem;
  }
  .main .first form .chargeCheckBox .chargeCheck .inputBox {
    gap: 1.2rem;
    margin-bottom: 0.8rem;
  }
  .main .first form .chargeCheckBox .chargeCheck .inputBox > div {
    gap: 2.4rem;
    height: 7.2rem;
    padding: 0 1.6rem;
    border-radius: 1.2rem;
  }
  .main .first form .chargeCheckBox .chargeCheck .inputBox > div .label {
    width: 13.1rem;
    padding: 0 0 0 1.2rem;
  }
  .main .first form .chargeCheckBox .chargeCheck .inputBox > div .label span {
    margin-right: 1rem;
  }
  .main .first form .chargeCheckBox .chargeCheck .inputBox > div .label:after {
    height: 3.5rem;
  }
  .main .first form .chargeCheckBox .chargeCheck .btnBox {
    gap: 1.6rem;
  }
  .main .second .tabWrap {
    margin: 0 auto 0;
  }
  .main .second .tabWrap .tabMenuWrap ul.tabMenu {
    gap: 0.6rem;
  }
  .main .second .tabWrap .tabMenuWrap ul.tabMenu li {
    width: 16.3rem;
    height: 4rem;
    padding: 0.4rem 0 0 0;
    border-radius: 1.2rem 1.2rem 0 0;
  }
  .main .second .tabWrap .tabContsWrap {
    border-radius: 1rem;
  }
  .main .second .tabWrap .tabContsWrap section .shoutSwiper {
    width: 100%;
    padding: 0.8rem;
  }
  .main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent {
    width: 100%;
    border-radius: 1rem;
  }
  .main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper {
    flex-wrap: wrap;
  }
  .main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide {
    width: 25% !important;
    margin: 0;
  }
  .main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide a {
    justify-content: flex-start;
    height: 5rem;
    padding: 0 0.8rem;
    gap: 0.4rem;
  }
  .main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide a:hover {
    background: none;
  }
  .main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide a span.icon {
    width: 3.6rem;
    height: 3.6rem;
  }
  .main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperControl {
    display: none;
  }
  .main .third {
    gap: 1.6rem;
  }
  .main .third > div {
    width: calc((100% - 16px) / 2);
    min-height: 37.5rem;
  }
  .main .third > div.notice {
    gap: 1.6rem;
    padding: 1.6rem;
    border-radius: 2rem;
  }
  .main .third > div.notice ul {
    gap: 1.2rem;
  }
  .main .third > div.notice ul li {
    padding: 0 0.8rem;
  }
  .main .third > div.notice ul li:first-child {
    margin-bottom: 0.8rem;
    border-radius: 1.2rem;
  }
  .main .third > div.notice ul li:first-child a {
    gap: 0.8rem;
    padding: 1.6rem 2.4rem;
    border-radius: 1.2rem;
  }
  .main .third > div.notice ul li:first-child a div {
    gap: 1rem;
  }
  .main .third > div.notice ul li a {
    gap: 1.6rem;
  }
  .main .third > div.notice ul li a .title {
    width: 100%;
    white-space: nowrap;
  }
  .main .third > div.faq {
    padding: 1.6rem;
    gap: 1.6rem;
    border-radius: 2rem;
  }
  .main .third > div.faq .faqHeader {
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .main .third > div.faq .faqHeader a {
    position: absolute;
    right: 0;
    top: 0;
  }
  .main .third > div.faq ul {
    gap: 0.8rem;
  }
  .main .third > div.faq ul li {
    gap: 1.2rem;
    border-radius: 1.2rem;
  }
  .main .third > div.faq ul li span,
  .main .third > div.faq ul li a {
    padding: calc(1.6rem - 1px) calc(2rem - 1px);
  }
  .main .fourth {
    flex-direction: column;
    gap: 1.2rem;
    border: none;
  }
  .main .fourth div.officeMap {
    width: 100%;
    gap: 1.6rem;
    padding: 1.6rem;
    border-radius: 2rem;
    border: 1px solid #CDD1D5;
  }
  .main .fourth div.officeMap ul {
    gap: 0.8rem 1.6rem;
  }
  .main .fourth div.officeMap ul li {
    width: calc(50% - 0.8rem);
    border-radius: 1.2rem;
    background-position: center right 1.4rem;
  }
  .main .fourth div.officeMap ul li button {
    padding: 2rem;
  }
  .main .fourth div.officeMap ul li button .officeInfo {
    gap: 1.2rem;
  }
  .main .fourth div.officeMapDetail {
    width: 100%;
    height: 52.4rem;
    border-radius: 2rem;
    border: 1px solid #CDD1D5;
  }
}
.main {
  /* 태블릿   403 ~ 768px */
}
@media (max-width: 768px) {
  .main {
    gap: 2rem;
  }
  .main .first {
    gap: 2rem;
  }
  .main .first .mainSwiper {
    height: 30rem;
  }
  .main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide {
    width: 50% !important;
  }
  .main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide a span {
    font-size: 1.8rem;
  }
  .main .third {
    flex-direction: column;
  }
  .main .third > div {
    width: 100%;
    min-height: max-content;
  }
  .main .third > div.notice ul {
    gap: 0.8rem;
  }
  .main .third > div.notice ul li > span {
    font-size: 1.6rem;
  }
  .main .third > div.notice ul li a {
    font-size: 1.6rem;
  }
  .main .third > div.notice ul li a .date {
    font-size: 1.4rem;
  }
  .main .third > div.notice ul li a .title {
    margin-bottom: 0;
    font-size: 1.6rem;
  }
  .main .third > div.faq ul li {
    font-size: 1.6rem;
  }
  .main .third > div.faq ul li span {
    padding: 1.6rem 2rem;
    font-size: 1.6rem;
  }
  .main .fourth div.officeMap ul {
    gap: 0.8rem;
  }
  .main .fourth div.officeMap ul li {
    width: calc(50% - 0.4rem);
  }
  .main .fourth div.officeMap ul li button {
    padding: 1rem;
  }
  .main .fourth div.officeMap ul li button .officeInfo {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .main .fourth div.officeMap ul li button .officeInfo span {
    font-size: 1.6rem;
  }
  .main .fourth div.officeMap ul li button .officeInfo span.contact {
    font-size: 1.4rem;
  }
  .main .fourth div.officeMap ul li button span.area {
    width: 12.3rem;
    font-size: 1.4rem;
  }
  .main .fourth div.officeMapDetail {
    display: none;
  }
}
.main {
  /* 모바일 화면  ~ 403 */
}
@media (max-width: 403px) {
  .main .first {
    gap: 1.2rem;
  }
  .main .first .mainSwiper .navi {
    left: 0;
    right: auto;
    bottom: 0;
    height: 4rem;
    padding: 0 0.4rem 0 1.2rem;
  }
  .main .first .mainSwiper .navi .custom-pagination {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    width: 3.8rem;
  }
}
@media (max-width: 403px) and (max-width: 1024px) {
  .main .first .mainSwiper .navi .custom-pagination {
    font-size: 1.4rem;
  }
}
@media (max-width: 403px) {
  .main .first .mainSwiper .navi .custom-pagination .current {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 403px) and (max-width: 1024px) {
  .main .first .mainSwiper .navi .custom-pagination .current {
    font-size: 1.4rem;
  }
}
@media (max-width: 403px) {
  .main .first .mainSwiper .navi .swiper-button-next,
  .main .first .mainSwiper .navi .swiper-button-prev,
  .main .first .mainSwiper .navi .swiper-button-toggle {
    width: 2.8rem;
    padding: 0.4rem 0.2rem;
  }
  .main .first .mainSwiper .navi .swiper-button-next::before,
  .main .first .mainSwiper .navi .swiper-button-prev::before,
  .main .first .mainSwiper .navi .swiper-button-toggle::before {
    background-size: 1.6rem;
    background-repeat: no-repeat;
    background-position: center;
  }
  .main .first form .chargeCheckBox {
    gap: 0.8rem;
  }
  .main .first form .chargeCheckBox .chargeCheck .inputBox {
    gap: 0.8rem;
    margin-bottom: 0.8rem;
  }
  .main .first form .chargeCheckBox .chargeCheck .inputBox > div {
    gap: 0.8rem;
    height: 5.6rem;
    padding: 0 0.4rem;
  }
  .main .first form .chargeCheckBox .chargeCheck .inputBox > div .label {
    width: 11.6rem;
  }
  .main .first form .chargeCheckBox .chargeCheck .inputBox > div .label label {
    font-size: 1.6rem;
  }
  .main .first form .chargeCheckBox .chargeCheck .inputBox input {
    font-size: 1.6rem;
  }
  .main .first form .chargeCheckBox .chargeCheck .btnBox {
    gap: 0.8rem;
  }
  .main .second .tabWrap .tabMenuWrap {
    width: 90%;
  }
  .main .second .tabWrap .tabMenuWrap ul.tabMenu li {
    width: 50%;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 403px) and (max-width: 1024px) {
  .main .second .tabWrap .tabMenuWrap ul.tabMenu li {
    font-size: 1.6rem;
  }
}
@media (max-width: 403px) {
  .main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide a {
    padding: 0;
  }
  .main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide a img {
    width: 3.6rem;
  }
  .main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide a span {
    font-size: 1.6rem;
  }
  .main .third > div.notice ul {
    gap: 0.8rem;
  }
  .main .third > div.notice ul li:first-child {
    margin-bottom: 1.2rem;
  }
  .main .third > div.notice ul li:first-child > span {
    padding: 1rem 1.2rem;
  }
  .main .third > div.notice ul li:first-child a {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 403px) and (max-width: 1024px) {
  .main .third > div.notice ul li:first-child a {
    font-size: 1.6rem;
  }
}
@media (max-width: 403px) {
  .main .third > div.notice ul li:first-child a .date {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 403px) and (max-width: 1024px) {
  .main .third > div.notice ul li:first-child a .date {
    font-size: 1.4rem;
  }
}
@media (max-width: 403px) {
  .main .third > div.notice ul li:first-child a div .badge {
    height: 1.8rem;
    padding: 0 0.6rem;
    font-size: 1.2rem;
  }
  .main .third > div.notice ul li a .title {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 403px) and (max-width: 1024px) {
  .main .third > div.notice ul li a .title {
    font-size: 1.6rem;
  }
}
@media (max-width: 403px) {
  .main .third > div.faq {
    gap: 1.2rem;
  }
  .main .third > div.faq ul li span,
  .main .third > div.faq ul li a {
    padding: 1rem 1.2rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 403px) and (max-width: 1024px) {
  .main .third > div.faq ul li span,
  .main .third > div.faq ul li a {
    font-size: 1.6rem;
  }
}
@media (max-width: 403px) {
  .main .fourth div.officeMap ul li button span.area {
    font-size: 1.4rem;
  }
}
.main {
  /* 모바일 화면  ~ 290px */
}
@media (max-width: 290px) {
  .main .second .tabWrap .tabMenuWrap {
    width: 90%;
  }
  .main .second .tabWrap .tabMenuWrap ul.tabMenu {
    flex-wrap: nowrap;
  }
  .main .second .tabWrap .tabMenuWrap ul.tabMenu li {
    width: 50%;
  }
  .main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide a img {
    width: 20%;
  }
  .main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide a span {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 290px) and (max-width: 1024px) {
  .main .second .tabWrap .tabContsWrap section .shoutSwiper .swiperContent .swiper-wrapper .swiper-slide a span {
    font-size: 1.4rem;
  }
}
@media (max-width: 290px) {
  .main .third > div.notice ul li:first-child a div {
    flex-wrap: wrap;
  }
  .main .fourth div.officeMap ul li {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .main .first .mainSwiper {
    height: 30rem;
  }
}
@media (max-width: 640px) {
  .main .first .mainSwiper {
    height: 26rem;
  }
}
@media (max-width: 530px) {
  .main .first .mainSwiper {
    height: 22rem;
  }
}
@media (max-width: 455px) {
  .main .first .mainSwiper {
    height: 18.8rem;
  }
}
@media (max-width: 375px) {
  .main .first .mainSwiper {
    height: 15.5rem;
  }
}
@media (max-width: 320px) {
  .main .first .mainSwiper {
    height: 13.5rem;
  }
}
.fixed {
  position: fixed;
  left: 0;
  top: 445px; /* TODO: 뷰포트 높이 무관 고정값 — 랩탑 이하 노출 재개 시 겹침 여부 확인 필요 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  z-index: 10;
}
.fixed li {
  border-radius: 0 12px 12px 0;
  /* shadow2 */
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.13);
}
.fixed li.popup {
  background: #0DA86C url("../images/fo/icons/icon_view_all_white.svg") no-repeat top 20px left 21px;
}
.fixed li.survey {
  background: #0076DD url("../images/fo/icons/icon_visibility_white.svg") no-repeat top 20px left 21px;
}
.fixed li button {
  padding: 20px 24px 20px 20px;
}
.fixed li button span {
  display: block;
  padding: 29px 0 0 0;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .fixed li button span {
    font-size: 1.6rem;
  }
}
.fixed li button span {
  color: #ffffff;
}
.fixed {
  /* 랩탑  768px ~ 1024 */
}
@media (max-width: 1024px) {
  .fixed {
    display: none; /* TODO(임시): 랩탑 이하 플로팅 버튼 숨김 — 모바일 대응 방안 확정 후 제거 또는 확정 처리 */
  }
}

/* write Layout */
.schBox {
  width: 100%;
  padding: 24px;
  border-radius: 20px;
  border: 1.4px solid #6787C9;
  background: #ECF2FE;
}
.schBox form {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
}
.schBox form ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
}
.schBox form ul li {
  width: 100%;
}
.schBox form ul li > div {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 12px 32px;
  flex-wrap: wrap;
}
.schBox form ul li > div.susi, .schBox form ul li > div.calcNapbu {
  justify-content: center;
}
.schBox form ul li > div.right {
  display: flex;
  justify-content: flex-end;
}
.schBox form ul li > div div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}
.schBox form ul li > div div label {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .schBox form ul li > div div label {
    font-size: 1.8rem;
  }
}
.schBox form .btnBox {
  flex-wrap: wrap;
  justify-content: center;
}
.schBox form .btnBox.right {
  margin: 0 0 0 auto;
  justify-content: flex-end;
  flex: none;
}
.schBox {
  /* 특이케이스 */
}
@media (max-width: 1280px) {
  .schBox form ul li > div.cgcalc-index-search > div {
    width: initial;
  }
  .schBox form ul li > div.cgcalc-index-search > div select {
    width: 100%;
  }
  .schBox form ul li > div.cgcalc-index-search .btnBox {
    margin: 0 auto;
  }
}
.schBox {
  /* 랩탑  768px ~ 1024 */
}
@media (max-width: 1024px) {
  .schBox {
    padding: 1.2rem;
  }
  .schBox form ul li > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.8rem;
  }
  .schBox form ul li > div.chenap, .schBox form ul li > div.selfInput {
    flex-direction: row;
  }
  .schBox form ul li > div.chenap > div, .schBox form ul li > div.selfInput > div {
    width: calc(50% - 0.4rem);
  }
  .schBox form ul li > div.chenap > div.btnBox, .schBox form ul li > div.selfInput > div.btnBox {
    width: 100%;
  }
  .schBox form ul li > div.cgcalc-index-search > div {
    width: 100%;
  }
  .schBox form ul li > div.cgcalc-index-search > div input,
  .schBox form ul li > div.cgcalc-index-search > div select {
    width: 100%;
  }
  .schBox form ul li > div.susi, .schBox form ul li > div.calcNapbu {
    justify-content: center;
    flex-direction: row;
  }
  .schBox form ul li > div.susi div, .schBox form ul li > div.calcNapbu div {
    width: max-content;
    justify-content: center;
  }
  .schBox form ul li > div div {
    width: 100%;
  }
  .schBox form ul li > div div label {
    width: 5.6rem;
    flex: none;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .schBox form ul li > div div label {
    font-size: 1.6rem;
  }
}
@media (max-width: 1024px) {
  .schBox form ul li > div div select {
    width: 100%;
  }
  .schBox form ul li > div div .input {
    width: 100%;
  }
  .schBox form ul li > div div .dateWrap .date-range input[type=text] {
    width: 100%;
  }
  .schBox form ul li > div div.radioBox {
    margin: 0 auto;
    justify-content: center;
  }
  .schBox form ul li > div div.radioBox label {
    width: 100%;
  }
  .schBox form ul li > div div.radioBox .radio {
    width: max-content;
  }
  .schBox form ul li > div div.btnBox button {
    margin: unset;
  }
}
.schBox {
  /* 태블릿   403 ~ 768px */
}
@media (max-width: 768px) {
  .schBox form ul li > div.chenap, .schBox form ul li > div.selfInput {
    flex-direction: column;
  }
  .schBox form ul li > div.chenap > div, .schBox form ul li > div.selfInput > div {
    width: 100%;
  }
  .schBox form ul li > div.susi, .schBox form ul li > div.calcNapbu {
    justify-content: flex-start;
  }
  .schBox form ul li > div.susi div, .schBox form ul li > div.calcNapbu div {
    width: 100%;
  }
  .schBox form ul li > div.susi div.btnBox, .schBox form ul li > div.calcNapbu div.btnBox {
    margin: 0 auto;
  }
}
.schBox {
  /* 모바일   0 ~ 403px */
}
@media (max-width: 403px) {
  .schBox form ul li > div.susi, .schBox form ul li > div.calcNapbu {
    flex-direction: column;
  }
  .schBox form ul li > div div {
    gap: 0.8rem;
  }
}

.list {
  width: 100%;
}
.list .listTop {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .list .listTop {
    font-size: 2.2rem;
  }
}
.list .listTop .btnDownBox {
  display: flex;
  gap: 8px;
}
@media (max-width: 403px) {
  .list .listTop {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 403px) and (max-width: 1024px) {
  .list .listTop {
    font-size: 1.8rem;
  }
}

.btnBox.center {
  display: block;
  margin: 0 auto;
}

.settlementWrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
}
.settlementWrap .minwonApply {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
}
.settlementWrap .minwonApply li button {
  margin: 0 0 16px;
}
@media (max-width: 768px) {
  .settlementWrap { /* 태블릿   403 ~ 768px */
    gap: 0.8rem;
  }
  .settlementWrap .minwonApply li button {
    margin: 0 0 0.8rem;
  }
}

.contents-mw {
  max-width: none !important;
  padding: 0 !important;
}

.box .head {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.box .head > p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .box .head > p {
    font-size: 2.2rem;
  }
}
.box .head > span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .box .head > span {
    font-size: 1.8rem;
  }
}
.box .head.billInfo strong {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .box .head.billInfo strong {
    font-size: 2.2rem;
  }
}
.box .head.billInfo p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .box .head.billInfo p {
    font-size: 1.6rem;
  }
}
.box .tabWrap {
  gap: 16px;
}
.box.info-box {
  padding-left: 130px;
}
.box.info-box.cgcalc {
  background: url("../images/fo/cgcalc/bg_cgcalc.png") no-repeat left 15px center;
}
.box.info-box.civilAppeal {
  height: 120px;
  justify-content: center;
  background: url("../images/fo/cvplsvc/bg_civilAppeal.svg") no-repeat left 40px center;
}
.box.info-box.cvplsvc {
  min-height: 120px;
  justify-content: center;
  padding-left: 110px;
  background: url("../images/fo/cvplsvc/bg_cvplsvc.png") no-repeat left 38px center;
}
.box.info-box.hmvsettle {
  justify-content: center;
  min-height: 100px;
  padding-left: 124px;
  background: url("../images/fo/hmvsettle/bg_hmvsettle.png") no-repeat left 38px center;
}
.box.info-box.hmvsettle > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
}
.box.info-box.owngc {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: url("../images/fo/owngc/bg_owngc.png") no-repeat left 38px center;
}
.box.info-box.notice {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: url("../images/fo/cm/bg_notice.svg") no-repeat left 38px center;
}
.box.info-box.faq {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: url("../images/fo/cm/bg_faq.svg") no-repeat left 38px center;
}
.box.info-box .title {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .box.info-box .title {
    font-size: 1.6rem;
  }
}
.box .smallTitle {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .box .smallTitle {
    font-size: 1.8rem;
  }
}
.box .tableTitle {
  padding-top: 8px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .box .tableTitle {
    font-size: 1.8rem;
  }
}
.box .tableCaption {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .box .tableCaption {
    font-size: 1.6rem;
  }
}
.box .tableCaption:before {
  content: "•";
  padding: 0 10px;
  display: inline-block;
  text-indent: 0;
}
@media (max-width: 768px) {
  .box .head > p { /* 태블릿   403 ~ 768px */
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .box .head > p {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .box .head.billInfo {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }
  .box .head.billInfo strong {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .box .head.billInfo strong {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .box .head.billInfo p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .box .head.billInfo p {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .box .head.billInfo p:before {
    content: "•";
    padding: 0 0.4rem;
    display: inline-block;
    text-indent: 0;
  }
  .box .tabWrap {
    gap: 0.8rem;
  }
  .box.info-box {
    padding-left: 1.2rem;
  }
  .box.info-box.cgcalc, .box.info-box.cvplsvc, .box.info-box.hmvsettle, .box.info-box.notice, .box.info-box.faq, .box.info-box.civilAppeal, .box.info-box.owngc {
    flex-direction: column;
    align-items: flex-start;
    min-height: unset;
    height: max-content;
    padding: 1.2rem;
    background: none;
  }
  .box.info-box.owngc button {
    margin-left: 1.2rem;
  }
  .box.info-box li {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .box.info-box li {
    font-size: 1.4rem;
  }
}
@media (max-width: 403px) {
  .box.info-box.hmvsettle .title {
    margin-bottom: 0;
  }
  .box.info-box.hmvsettle .info02 {
    flex-direction: column;
    gap: 0.4rem;
  }
}
@media (max-width: 270px) {
  .box .head {
    /* 270미만 모바일 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
}

.info01 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
}
.info01.civillAppeal {
  gap: 10px;
}
.info01 li {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .info01 li {
    font-size: 1.6rem;
  }
}
.info01 li {
  text-indent: 0px;
}
.info01 li:before {
  content: "•";
  padding: 0 10px;
  display: inline-block;
  text-indent: 0;
}
.info01 li.noDesc:before {
  content: "";
  padding: 0 12px;
}
.info01 li.color_re {
  color: #D63D4A;
}
.info01 li.color_primary {
  color: #0076DD;
}
@media (max-width: 403px) {
  .info01 li:before {
    padding: 0 0.4rem 0 0;
  }
  .info01 li.noDesc:before {
    content: "";
    padding: 0 0.5rem;
  }
}

.info02 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 32px;
}
.info02 ul {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
}
.info02 ul li {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .info02 ul li {
    font-size: 1.6rem;
  }
}
.info02 ul li span.num {
  display: inline-block;
  width: 22px;
  height: 22px;
  aspect-ratio: 1/1;
  border-radius: 70px;
  border: 1px solid #0DA86C;
  background: #ECFEF4;
  color: #0DA86C;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 21px */
}
@media (max-width: 403px) {
  .info02 {
    flex-direction: column;
    gap: 0.4rem;
  }
}

.info03 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
}
.info03 li {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .info03 li {
    font-size: 1.6rem;
  }
}
.info03 li {
  text-indent: 0px;
}
.info03 li.noDesc:before {
  content: "";
  padding: 0 0;
}

.sms-arrears-summary {
  display: inline-flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.sms-arrears-guide {
  margin: 8px 0;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.sms-arrears-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.sms-arrears-actions .sms-arrears-mobile {
  display: none;
}

@media (max-width: 768px) {
  .sms-arrears-actions .sms-arrears-pc {
    display: none;
  }
  .sms-arrears-actions .sms-arrears-mobile {
    display: inline-flex;
  }
}
.contact-info {
  width: 100%;
  display: inline-grid;
  row-gap: 12px;
  column-gap: 12px;
  flex: 1 0 0;
  grid-template-rows: repeat(2, fit-content(100%));
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.contact-info li > div {
  height: 100%;
  padding: 16px 24px;
  border-radius: 12px;
  border: 1px solid #B1B8BE;
  background: #FFFFFF;
}
.contact-info li > div .title {
  width: 100%;
  padding-bottom: 12px;
  justify-content: space-between;
  border-bottom: 1px solid #cdd1d5;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .contact-info li > div .title {
    font-size: 1.6rem;
  }
}
.contact-info li > div p {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .contact-info li > div p {
    font-size: 1.6rem;
  }
}
.contact-info li > div p.region {
  padding: 7px 0 4px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #0076DD;
}
@media (max-width: 1024px) {
  .contact-info li > div p.region {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .contact-info { /* 태블릿 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0.8rem;
    column-gap: 0.8rem;
  }
  .contact-info li > div {
    padding: 1rem;
    background: url("../images/fo/icons/icon-arrow-right_hover.svg") no-repeat center right 1rem;
  }
  .contact-info li > div .title {
    padding-bottom: 0;
    margin-bottom: 0 !important;
    border-bottom: none;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .contact-info li > div .title {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .contact-info li > div .title button {
    display: none;
  }
  .contact-info li > div > div {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .contact-info li > div > div p {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.4rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
    color: #0076DD;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .contact-info li > div > div p {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .contact-info li > div > div p.region {
    width: 90%;
    display: block;
    padding: 0;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .contact-info li > div > div p.region {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .contact-info li > div > div p .icon {
    display: none;
  }
}
@media (max-width: 320px) {
  .contact-info { /* 320 이하 모바일 */
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.simulationWrap .simulationBox1 {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 32px;
}
.simulationWrap .cal.simulation {
  width: 100%;
  border-radius: 20px;
  border: 1px solid #cdd1d5;
  background: #ffffff;
  overflow: hidden;
}
.simulationWrap .cal.simulation h3 {
  position: relative;
  width: 100%;
  padding: 23.5px 32px;
  background: linear-gradient(93deg, #E0F8F3 -2.68%, #F4F8FF 102.91%), linear-gradient(0deg, #ECF2FE 0%, #ECF2FE 100%), #DEE5F4;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .simulationWrap .cal.simulation h3 {
    font-size: 2.2rem;
  }
}
.simulationWrap .cal.simulation h3::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 194px;
  height: 77px;
  background: url("../images/fo/cgcalc/bg_simulation.png") center center no-repeat;
}
.simulationWrap .cal.simulation > div {
  width: 100%;
  padding: 0 32px 0 32px;
  justify-content: center;
}
.simulationWrap .cal.simulation > div.simulBox {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
}
.simulationWrap .cal.simulation > div.btnBox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 20px 40px 32px 40px;
}
.simulationWrap .cal.simulation > div > div {
  width: 100%;
  background: url("../images/fo/common/bg_borderDashed.png") left bottom repeat-x;
  padding-bottom: 16px;
}
.simulationWrap .cal.simulation .explain {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 16px 0;
  border-bottom: 1px solid #8A949E;
  background: none;
}
.simulationWrap .cal.simulation .explain p {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1E2124;
}
@media (max-width: 1024px) {
  .simulationWrap .cal.simulation .explain p {
    font-size: 1.6rem;
  }
}
.simulationWrap .cal.simulation .explain p span.icon {
  flex: none;
}
.simulationWrap .cal.simulation .beforeCal {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .simulationWrap .cal.simulation .beforeCal {
    font-size: 1.6rem;
  }
}
.simulationWrap .cal.simulation .beforeCal .info {
  color: #0C82E9;
}
.simulationWrap .cal.simulation .calItem {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.simulationWrap .cal.simulation .calItem h4 {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .simulationWrap .cal.simulation .calItem h4 {
    font-size: 1.8rem;
  }
}
.simulationWrap .cal.simulation .calItem h4 {
  margin-bottom: 16px;
}
.simulationWrap .cal.simulation .calItem .option01 {
  width: 140px;
}
.simulationWrap .cal.simulation .calItem .option01 div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.simulationWrap .cal.simulation .calItem .option01 div.meter {
  gap: 16px;
}
.simulationWrap .cal.simulation .calItem .hshldCntWrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.simulationWrap .cal.simulation .calItem .hshldCntWrap .inputInfo {
  align-items: flex-end;
}
.simulationWrap .cal.simulation .calItem .hshldCntWrap .inputInfo.hshldCnt {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
}
.simulationWrap .cal.simulation .calItem .hshldCntWrap .inputInfo.hshldCnt label {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #464C53;
}
@media (max-width: 1024px) {
  .simulationWrap .cal.simulation .calItem .hshldCntWrap .inputInfo.hshldCnt label {
    font-size: 1.6rem;
  }
}
.simulationWrap .cal.simulation .calItem .hshldCntWrap .inputInfo.hshldCnt div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
}
.simulationWrap .cal.simulation .calItem .hshldCntWrap .inputInfo.hshldCnt div select,
.simulationWrap .cal.simulation .calItem .hshldCntWrap .inputInfo.hshldCnt div input {
  width: 100px;
}
.simulationWrap .cal.simulation .calItem .hshldCntWrap .inputInfo.hshldCnt div span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .simulationWrap .cal.simulation .calItem .hshldCntWrap .inputInfo.hshldCnt div span {
    font-size: 1.8rem;
  }
}
.simulationWrap .cal.simulation .calItem .hshldCntWrap .inputInfo.num, .simulationWrap .cal.simulation .calItem .hshldCntWrap .inputInfo.usage {
  width: 140px;
}
.simulationWrap .cal.simulation .calItem .hshldCntWrap .inputInfo.gauge {
  width: 185px;
}
.simulationWrap .cal.simulation .calItem .hshldCntWrap .inputInfo input,
.simulationWrap .cal.simulation .calItem .hshldCntWrap .inputInfo select {
  width: 100%;
}
.simulationWrap .cal.simulation .calItem .hshldCntWrap .inputInfo > p {
  padding: 16px 0;
}
.simulationWrap .cal.simulation .calItem.reduction {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.simulationWrap .cal.simulation .calItem.reduction .option01 h4 {
  margin-bottom: 21px;
}
.simulationWrap .cal.simulation .calItem.reduction .livingReduce {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 12px;
}
.simulationWrap .cal.simulation .calItem.reduction .livingReduce:last-child {
  margin-bottom: 0;
}
.simulationWrap .cal.simulation .calItem.reduction .livingReduce .checkBox {
  width: 180px;
}
.simulationWrap .cal.simulation .calItem.reduction .livingReduce .reductionCount {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}
.simulationWrap .cal.simulation .calItem.reduction .livingReduce .reductionCount p,
.simulationWrap .cal.simulation .calItem.reduction .livingReduce .reductionCount label {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .simulationWrap .cal.simulation .calItem.reduction .livingReduce .reductionCount p,
  .simulationWrap .cal.simulation .calItem.reduction .livingReduce .reductionCount label {
    font-size: 1.6rem;
  }
}
.simulationWrap .cal.simulation .calItem.reduction .livingReduce .reductionCount input {
  width: 100px;
}
.simulationWrap .cal.rate {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
  width: 312px;
}
.simulationWrap .cal.rate .rateTable {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
  width: 312px;
}
.simulationWrap .cal.rate .rateTable button {
  position: relative;
  width: 100%;
  border-radius: 20px;
  border: 1px solid #BAC3D5;
  background: #FFFFFF;
  overflow: hidden;
  color: #1e2124;
  text-align: left;
}
.simulationWrap .cal.rate .rateTable button span.title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 16px 16px 16px 78px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .simulationWrap .cal.rate .rateTable button span.title {
    font-size: 1.6rem;
  }
}
.simulationWrap .cal.rate .rateTable button span.title {
  gap: 0;
}
.simulationWrap .cal.rate .rateTable button:after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  background: url("../images/fo/icons/icon-arrow-right.svg") no-repeat center center;
  width: 20px;
  height: 20px;
  right: 16px;
  display: block;
  background-size: 20px;
}
.simulationWrap .cal.rate .rateTable button.useAmount {
  background: url("../images/fo/cgcalc/bg_useAmount.png") no-repeat left 10px center;
}
.simulationWrap .cal.rate .rateTable button.gaugeAmount {
  background: url("../images/fo/cgcalc/bg_gaugeAmount.png") no-repeat left 10px center;
}
.simulationWrap .cal.rate .rateTable button.guide {
  background: url("../images/fo/cgcalc/bg_guide.png") no-repeat left 10px center;
}
.simulationWrap .cal.rate .rateTable button.example {
  background: url("../images/fo/cgcalc/bg_example.png") no-repeat left 10px top 3px;
}
.simulationWrap .cal.rate .rateTable button.example:after {
  transform: translateY(-47px);
}
.simulationWrap .cal.rate .rateTable button.example > .btnExampleDesc {
  display: block;
  width: 100%;
  padding: 16px 32px;
  text-align: left;
  background: #F9FAFB;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #0076DD;
}
@media (max-width: 1024px) {
  .simulationWrap .cal.rate .rateTable button.example > .btnExampleDesc {
    font-size: 1.4rem;
  }
}
.simulationWrap .cal.rate .rateInfo {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
}
.simulationWrap .cal.rate .rateInfo .calWaterRate {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
}
.simulationWrap .cal.rate .rateInfo .calWaterRate h3 {
  width: 100%;
  padding-bottom: 8px;
  border-bottom: 1px solid #B1B8BE;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .simulationWrap .cal.rate .rateInfo .calWaterRate h3 {
    font-size: 1.8rem;
  }
}
.simulationWrap .cal.rate .rateInfo .calWaterRate ul {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
}
.simulationWrap .cal.rate .rateInfo .calWaterRate ul li {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
}
.simulationWrap .cal.rate .rateInfo .calWaterRate ul li p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .simulationWrap .cal.rate .rateInfo .calWaterRate ul li p {
    font-size: 1.6rem;
  }
}
.simulationWrap .cal.rate .rateInfo .infomation p.title {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #096AB3;
}
@media (max-width: 1024px) {
  .simulationWrap .cal.rate .rateInfo .infomation p.title {
    font-size: 1.4rem;
  }
}
.simulationWrap .cal.rate .rateInfo .infomation p.title {
  padding-left: 0;
}
.simulationWrap .cal.rate .rateInfo .infomation p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .simulationWrap .cal.rate .rateInfo .infomation p {
    font-size: 1.4rem;
  }
}
.simulationWrap .cal.rate .rateInfo .infomation p {
  padding-left: 28px;
}
.simulationWrap .cal.rate .rateInfo .infomation p span {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.simulationWrap {
  /* 랩탑   769 ~ 1024px */
}
@media (max-width: 1024px) {
  .simulationWrap .simulationBox1 {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.8rem;
  }
  .simulationWrap .cal.simulation h3 {
    padding: 1.35rem 2rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .simulationWrap .cal.simulation h3 {
    font-size: 1.8rem;
  }
}
@media (max-width: 1024px) {
  .simulationWrap .cal.simulation h3::before {
    width: 13.3rem;
    height: 7.2rem;
    background: url("../images/fo/cgcalc/bg_simulation.png") bottom center no-repeat;
    background-size: contain;
  }
  .simulationWrap .cal.simulation > div {
    padding: 0 1.2rem;
  }
  .simulationWrap .cal.simulation > div.btnBox {
    gap: 0.8rem;
    padding: 2rem 4rem;
  }
  .simulationWrap .cal.simulation .explain p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .simulationWrap .cal.simulation .explain p {
    font-size: 1.4rem;
  }
}
@media (max-width: 1024px) {
  .simulationWrap .cal.simulation .beforeCal {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.8rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .simulationWrap .cal.simulation .beforeCal {
    font-size: 1.6rem;
  }
}
@media (max-width: 1024px) {
  .simulationWrap .cal.simulation .calItem {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.6rem;
  }
  .simulationWrap .cal.simulation .calItem h4 {
    margin-bottom: 0.8rem;
  }
  .simulationWrap .cal.simulation .calItem .option01 {
    width: 100%;
  }
  .simulationWrap .cal.simulation .calItem .option01 div.meter {
    gap: 0.4rem;
  }
  .simulationWrap .cal.simulation .calItem .hshldCntWrap {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1.2rem;
  }
  .simulationWrap .cal.simulation .calItem .hshldCntWrap .inputInfo.hshldCnt div span {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .simulationWrap .cal.simulation .calItem .hshldCntWrap .inputInfo.hshldCnt div span {
    font-size: 1.4rem;
  }
}
@media (max-width: 1024px) {
  .simulationWrap .cal.simulation .calItem.reduction {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .simulationWrap .cal.simulation .calItem.reduction .livingReduce {
    margin-bottom: 1.1rem;
    gap: 0;
  }
  .simulationWrap .cal.simulation .calItem.reduction .livingReduce .reductionCount {
    width: 50%;
  }
  .simulationWrap .cal.simulation .calItem.reduction .livingReduce .reductionCount input {
    width: 100%;
  }
  .simulationWrap .cal.simulation .calItem.reduction .livingReduce .checkBox {
    width: 100%;
  }
  .simulationWrap .cal.rate .rateTable {
    width: 100%;
    gap: 0.4rem;
  }
  .simulationWrap .cal.rate .rateTable button {
    min-height: 7rem;
  }
  .simulationWrap .cal.rate .rateTable button.example {
    background: url("../images/fo/cgcalc/bg_example.png") no-repeat left 10px top 10px;
  }
  .simulationWrap .cal.rate .rateTable button.example > .btnExampleDesc {
    padding: 1rem 2.6rem;
  }
  .simulationWrap .cal.rate .rateInfo .calWaterRate {
    gap: 1.2rem;
  }
  .simulationWrap .cal.rate .rateInfo .calWaterRate ul li p {
    width: 82%;
  }
  .simulationWrap .cal.rate .rateInfo .infomation {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.8rem;
  }
}
.simulationWrap {
  /* 태블릿   403 ~ 768px */
  /* 랩탑 블록과 중복되는 선언은 max-width 특성상 그대로 상속되므로 차이 나는 부분만 정의 */
}
@media (max-width: 768px) {
  .simulationWrap .simulationBox1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.8rem;
  }
  .simulationWrap .cal.rate {
    width: 100%;
  }
  .simulationWrap .cal.rate .rateInfo .calWaterRate {
    width: 100%;
  }
  .simulationWrap .cal.rate .rateInfo .calWaterRate ul {
    width: 100%;
  }
}

.gcCalc {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
}
.gcCalc form {
  width: 100%;
}
.gcCalc .cal.result .resultDetail {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
}
.gcCalc .cal.result .resultDetail .resultItem {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
}
.gcCalc .cal.result .resultDetail .resultItem ul {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
}
.gcCalc .cal.result .resultDetail .resultItem ul li {
  width: 25%;
  border-radius: 12px;
  border: 1px solid #B1B8BE;
  background: #FFFFFF;
  overflow: hidden;
  text-align: center;
}
.gcCalc .cal.result .resultDetail .resultItem ul li h4 {
  height: 40px;
  padding: 10px 0;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .gcCalc .cal.result .resultDetail .resultItem ul li h4 {
    font-size: 1.4rem;
  }
}
.gcCalc .cal.result .resultDetail .resultItem ul li p {
  height: 48px;
  padding: 12px 0;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .gcCalc .cal.result .resultDetail .resultItem ul li p {
    font-size: 1.6rem;
  }
}
.gcCalc .cal.result .resultDetail .resultItem ul li:last-child {
  flex: 1;
}
.gcCalc .cal.result .resultDetail .resultItem ul.amount h4 {
  background: #ECF2FE;
}
.gcCalc .cal.result .resultDetail .resultItem ul.reduction h4 {
  background: #ECFEF4;
}
.gcCalc .cal.result .resultDetail .total {
  width: 254px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 96px 0 0 0;
  flex: none;
  align-self: stretch;
  border-radius: 12px;
  border: 1px solid #0076DD;
  background: url("../images/fo/cgcalc/bg_totalAmount.png") no-repeat top 28px center #fff;
}
.gcCalc .cal.result .resultDetail .total p {
  text-align: center;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .gcCalc .cal.result .resultDetail .total p {
    font-size: 1.6rem;
  }
}
.gcCalc .cal.result .resultDetail .total p.amount {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 150%;
  color: #0076DD;
}
@media (max-width: 1024px) {
  .gcCalc .cal.result .resultDetail .total p.amount {
    font-size: 2.6rem;
  }
}
.gcCalc .cal.details .title {
  justify-content: flex-start !important;
  gap: 12px;
}
.gcCalc .cal.details .title span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #096AB3;
}
@media (max-width: 1024px) {
  .gcCalc .cal.details .title span {
    font-size: 1.6rem;
  }
}
.gcCalc .cal.details > ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}
.gcCalc .cal.details > ul > li {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .gcCalc .cal.details > ul > li {
    font-size: 1.6rem;
  }
}
.gcCalc .cal.details > ul > li h4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 223px;
  padding: 16px 4px;
  border-radius: 12px;
  border: 1px solid #B1B8BE;
  background: #F9FAFB;
  align-self: stretch;
  text-align: center;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .gcCalc .cal.details > ul > li h4 {
    font-size: 1.4rem;
  }
}
.gcCalc .cal.details > ul > li ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  padding: 16px 8px;
  border: 1px solid #B1B8BE;
  border-radius: 12px;
}
.gcCalc .cal.details > ul > li ul li:before {
  content: "•";
  display: inline-block;
  padding: 0 10px 0 16px;
}
.gcCalc .cal.printable .title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
.gcCalc .cal.printable .calc-equation-result {
  white-space: nowrap;
}
.gcCalc {
  /* 랩탑   769 ~ 1024px */
}
@media (max-width: 1024px) {
  .gcCalc .cal.result .resultDetail .resultItem {
    width: 100%;
  }
  .gcCalc .cal.result .resultDetail .resultItem ul li {
    width: 25%;
  }
  .gcCalc .cal.result .resultDetail .total {
    flex: none;
  }
}
.gcCalc {
  /* 태블릿   403 ~ 768px */
}
@media (max-width: 768px) {
  .gcCalc {
    gap: 0.8rem;
  }
  .gcCalc .cal.result .title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .gcCalc .cal.result .title {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .gcCalc .cal.result .resultDetail {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.8rem;
  }
  .gcCalc .cal.result .resultDetail .resultItem {
    width: 100%;
    gap: 0.4rem;
  }
  .gcCalc .cal.result .resultDetail .resultItem ul {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .gcCalc .cal.result .resultDetail .resultItem ul li {
    width: calc(50% - 0.2rem);
  }
  .gcCalc .cal.result .resultDetail .resultItem ul li h4 {
    padding: 0.95rem 0;
  }
  .gcCalc .cal.result .resultDetail .resultItem ul li p {
    height: max-content;
    padding: 0.4rem;
  }
  .gcCalc .cal.result .resultDetail .total {
    width: 100%;
    padding: 6.6rem 0 1.8rem 0;
    background: url("../images/fo/cgcalc/bg_totalAmount.png") no-repeat top 1.8rem center #fff;
    background-size: 3.2rem;
  }
  .gcCalc .cal.details > ul > li {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .gcCalc .cal.details > ul > li h4 {
    width: 100%;
  }
}
.gcCalc {
  /* 270 이하 모바일 */
}
@media (max-width: 270px) {
  .gcCalc .cal.result .title {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.8rem;
  }
}

.info-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.info-list .info-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}
.info-list .info-item .info-term {
  width: 215px;
  text-align: center;
  display: flex;
  flex: none;
  padding: 16px 4px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: 12px;
  border: 1px solid #B1B8BE;
  background: #F9FAFB;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .info-list .info-item .info-term {
    font-size: 1.6rem;
  }
}
.info-list .info-item .info-desc {
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #B1B8BE;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
}
.info-list .info-item .info-desc .head p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .info-list .info-item .info-desc .head p {
    font-size: 2.2rem;
  }
}
.info-list .info-item .info-desc ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.info-list .info-item .info-desc ul li {
  display: flex;
  width: 100%;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .info-list .info-item .info-desc ul li {
    font-size: 1.6rem;
  }
}
.info-list .info-item .info-desc ul li:before {
  content: "•";
  display: inline-block;
  padding: 0 10px 0 0;
}
.info-list .info-item .info-desc ul li strong {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .info-list .info-item .info-desc ul li strong {
    font-size: 1.6rem;
  }
}
.info-list .info-item .info-desc ul li.color_re {
  color: #D63D4A;
}
.info-list .info-item .info-desc ul li.noDesc:before {
  content: "";
  padding: 0;
}
.info-list {
  /* 태블릿 화면  ~ 768 */
}
@media (max-width: 768px) {
  .info-list {
    gap: 1.2rem;
  }
  .info-list .info-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .info-list .info-item .info-term {
    width: 100%;
    padding: 0.4rem;
    border-radius: 0.8rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .info-list .info-item .info-term {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .info-list .info-item .info-desc {
    padding: 0.4rem 0.8rem;
    border-radius: 0.8rem;
    gap: 0.2rem;
  }
  .info-list .info-item .info-desc .head p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .info-list .info-item .info-desc .head p {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .info-list .info-item .info-desc ul li:before {
    padding: 0 0.5rem;
  }
  .info-list .info-item .info-desc ul li p {
    width: 100%;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    word-break: break-all;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .info-list .info-item .info-desc ul li p {
    font-size: 1.4rem;
  }
}

.subVisual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  height: 160px;
  padding: 26.527px 42.505px 26.528px 80px;
  align-self: stretch;
  border-radius: 20px;
  background: linear-gradient(93deg, #E0F8F3 -2.68%, #EBF2FF 102.91%);
}
.subVisual p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .subVisual p {
    font-size: 2.6rem;
  }
}
.subVisual span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .subVisual span {
    font-size: 1.6rem;
  }
}
.subVisual:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.subVisual.oneStop::after {
  padding: 26.527px 42.505px 26.528px 80px;
  background: url(../images/fo/hmvsettle/bg_onestop.png) no-repeat center right 42.505px;
  background-size: 128px;
}
.subVisual.charge::after {
  padding: 26.527px 42.505px 26.528px 80px;
  background: url(../images/fo/hmvsettle/bg_charge.png) no-repeat center right 42.505px;
  background-size: 128px;
}
.subVisual.example::after {
  padding: 26.527px 42.505px 26.528px 80px;
  background: url(../images/fo/hmvsettle/bg_example.png) no-repeat center right 42.505px;
  background-size: 128px;
}
.subVisual.overdueCalInfo::after {
  padding: 26.527px 42.505px 26.528px 80px;
  background: url(../images/fo/cgcalc/bg_overdueCalInfo.png) no-repeat center right 42.505px;
  background-size: 128px;
}
.subVisual.overdueSimulation::after {
  padding: 26.527px 42.505px 26.528px 80px;
  background: url(../images/fo/cgcalc/bg_overdueSimulation.png) no-repeat center right 42.505px;
  background-size: 104px;
}
.subVisual.overdueExample::after {
  padding: 26.527px 42.505px 26.528px 80px;
  background: url(../images/fo/cgcalc/bg_overdueExample.png) no-repeat center right 42.505px;
  background-size: 145px;
}
.subVisual.chageReduce01::after {
  padding: 26.527px 42.505px 26.528px 80px;
  background: url(../images/fo/cgcalc/bg_chageReduce01.png) no-repeat center right 42.505px;
  background-size: 176px;
}
.subVisual.chageReduce02::after {
  padding: 26.527px 42.505px 26.528px 80px;
  background: url(../images/fo/cgcalc/bg_chageReduce02.png) no-repeat center right 42.505px;
  background-size: 98px;
}
.subVisual.chageReduce03::after {
  padding: 26.527px 42.505px 26.528px 80px;
  background: url(../images/fo/cgcalc/bg_chageReduce03.png) no-repeat center right 42.505px;
  background-size: 122px;
}
.subVisual.chageReduce04::after {
  padding: 26.527px 42.505px 26.528px 80px;
  background: url(../images/fo/cgcalc/bg_chageReduce04.png) no-repeat center right 42.505px;
  background-size: 145px;
}
.subVisual.chageReduce05::after {
  padding: 26.527px 42.505px 26.528px 80px;
  background: url(../images/fo/cgcalc/bg_chageReduce05.png) no-repeat center right 42.505px;
  background-size: 178px;
}
.subVisual.chageReduce06::after {
  padding: 26.527px 42.505px 26.528px 80px;
  background: url(../images/fo/cgcalc/bg_chageReduce06.png) no-repeat center right 42.505px;
  background-size: 158px;
}
.subVisual.chageReduce07::after {
  padding: 26.527px 42.505px 26.528px 80px;
  background: url(../images/fo/cgcalc/bg_chageReduce07.png) no-repeat center right 42.505px;
  background-size: 159px;
}
.subVisual.chageReduce08::after {
  padding: 26.527px 42.505px 26.528px 80px;
  background: url(../images/fo/cgcalc/bg_chageReduce08.png) no-repeat center right 42.505px;
  background-size: 120px;
}
.subVisual.chageReduce09::after {
  padding: 26.527px 42.505px 26.528px 80px;
  background: url(../images/fo/cgcalc/bg_chageReduce09.png) no-repeat center right 42.505px;
  background-size: 157px;
}
@media (max-width: 1024px) {
  .subVisual.chageReduce01, .subVisual.chageReduce02, .subVisual.chageReduce03, .subVisual.chageReduce04, .subVisual.chageReduce05, .subVisual.chageReduce06, .subVisual.chageReduce07, .subVisual.chageReduce08, .subVisual.chageReduce09 {
    padding: 0.5471rem 1.3442rem 0.7472rem 8rem;
  }
  .subVisual.chageReduce01:after, .subVisual.chageReduce02:after, .subVisual.chageReduce03:after, .subVisual.chageReduce04:after, .subVisual.chageReduce05:after, .subVisual.chageReduce06:after, .subVisual.chageReduce07:after, .subVisual.chageReduce08:after, .subVisual.chageReduce09:after {
    padding: 0.5471rem 1.3442rem 0.7472rem 8rem;
    background-position: center right;
    background-size: contain;
  }
}
.subVisual {
  /* 테블릿 화면  ~ 768px */
}
@media (max-width: 768px) {
  .subVisual {
    height: max-content;
    align-items: flex-start;
    border-radius: 1.2rem;
  }
  .subVisual p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .subVisual p {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .subVisual span {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    word-break: keep-all;
    white-space: pre;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .subVisual span {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .subVisual.overdueCalInfo, .subVisual.overdueSimulation, .subVisual.overdueExample {
    padding: 2.4rem 1.6rem;
  }
  .subVisual.overdueCalInfo::after, .subVisual.overdueSimulation::after, .subVisual.overdueExample::after {
    background: none;
  }
  .subVisual.overdueCalInfo span, .subVisual.overdueSimulation span, .subVisual.overdueExample span {
    word-break: break-all;
    white-space: normal;
  }
  .subVisual.oneStop, .subVisual.charge, .subVisual.example {
    padding: 1.6rem;
    height: 10.5rem;
  }
  .subVisual.oneStop span, .subVisual.charge span, .subVisual.example span {
    width: 25.8rem;
    word-break: break-all;
    white-space: normal;
  }
  .subVisual.oneStop:after, .subVisual.charge:after, .subVisual.example:after {
    padding: 1.6rem;
    background-position: center right 1.6rem;
    background-size: 7rem;
  }
  .subVisual.chageReduce01, .subVisual.chageReduce02, .subVisual.chageReduce03, .subVisual.chageReduce04, .subVisual.chageReduce05, .subVisual.chageReduce06, .subVisual.chageReduce07, .subVisual.chageReduce08, .subVisual.chageReduce09 {
    padding: 2.65rem 1.6rem;
  }
  .subVisual.chageReduce01 span, .subVisual.chageReduce02 span, .subVisual.chageReduce03 span, .subVisual.chageReduce04 span, .subVisual.chageReduce05 span, .subVisual.chageReduce06 span, .subVisual.chageReduce07 span, .subVisual.chageReduce08 span, .subVisual.chageReduce09 span {
    width: calc(100% - 7rem);
    word-break: break-all;
    white-space: normal;
  }
  .subVisual.chageReduce01:after, .subVisual.chageReduce02:after, .subVisual.chageReduce03:after, .subVisual.chageReduce04:after, .subVisual.chageReduce05:after, .subVisual.chageReduce06:after, .subVisual.chageReduce07:after, .subVisual.chageReduce08:after, .subVisual.chageReduce09:after {
    padding: 1.6rem;
    background-position: center right;
    background-size: 7rem;
  }
}

.taxPayTotalBankInfo {
  max-width: 1172px;
}
.taxPayTotalBankInfo .exampleSwiper {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid #BAC3D5;
  background: #F9FAFB;
}
.taxPayTotalBankInfo .exampleSwiper .swiper-wrapper {
  align-items: center;
}
.taxPayTotalBankInfo .exampleSwiper .swiper-wrapper .swiper-slide img {
  margin: 0 auto;
  object-fit: cover;
}
.taxPayTotalBankInfo .exampleSwiper .custom-pagination {
  position: absolute;
  right: 16px;
  bottom: 24px;
  width: max-content;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-left: auto;
  gap: 4px;
  height: 40px;
  padding: 8px 16px;
  border-radius: 1000px;
  border: 1px solid #BAC3D5;
  background: #ffffff;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .taxPayTotalBankInfo .exampleSwiper .custom-pagination {
    font-size: 1.8rem;
  }
}
.taxPayTotalBankInfo .exampleSwiper .custom-pagination .current {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #0076DD;
}
@media (max-width: 1024px) {
  .taxPayTotalBankInfo .exampleSwiper .custom-pagination .current {
    font-size: 1.8rem;
  }
}
.taxPayTotalBankInfo .exampleSwiper .navi {
  width: fit-content;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  align-self: stretch;
  margin-left: auto;
}
.taxPayTotalBankInfo .exampleSwiper .navi .swiper-button-prev,
.taxPayTotalBankInfo .exampleSwiper .navi .swiper-button-next {
  width: 40px;
  height: 40px;
  margin-top: unset;
}
.taxPayTotalBankInfo .thumbnailSwiper {
  width: 100%;
  margin: 0 auto;
  padding: 2px;
  overflow: hidden;
}
.taxPayTotalBankInfo .thumbnailSwiper .swiper-wrapper {
  justify-content: center;
}
.taxPayTotalBankInfo .thumbnailSwiper .swiper-wrapper.smartPhonePay {
  justify-content: flex-start;
}
.taxPayTotalBankInfo .thumbnailSwiper .swiper-wrapper .swiper-slide {
  width: 180px;
  height: 100px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 0 0 1px #CDD1D5;
  background: #F9FAFB;
  padding: 16px 10px 15px 10px;
}
.taxPayTotalBankInfo .thumbnailSwiper .swiper-wrapper .swiper-slide.swiper-slide-thumb-active {
  box-shadow: 0 0 0 2px #0076DD;
  background: #ECF2FE;
}
.taxPayTotalBankInfo .thumbnailSwiper .swiper-wrapper .swiper-slide img {
  margin: 0 auto;
  height: 100%;
  object-fit: cover;
}
.taxPayTotalBankInfo .store {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.taxPayTotalBankInfo .store div {
  width: calc(50% - (16px));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  flex: 1 0 0;
  padding: 20px 0;
  border-radius: 12px;
  border: 1px solid #B1B8BE;
  background: #F9FAFB;
}
.taxPayTotalBankInfo .store div img {
  margin: 0 auto;
  object-fit: cover;
  border-radius: 8px;
  border: 2.2px solid #B1B8BE;
  background: #ffffff;
}
.taxPayTotalBankInfo .store div p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .taxPayTotalBankInfo .store div p {
    font-size: 1.6rem;
  }
}
.taxPayTotalBankInfo {
  /* 태블릿 화면  ~ 768 */
}
@media (max-width: 768px) {
  .taxPayTotalBankInfo {
    /* .exampleSwiper는 기본 스타일과 동일하여 별도 재정의 불필요 */
  }
  .taxPayTotalBankInfo .thumbnailSwiper {
    display: none;
  }
  .taxPayTotalBankInfo .store div img {
    width: 50%;
  }
}

.paying {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 24px 0 0 0;
  border-top: 1px solid #B1B8BE;
}
.paying .payingBadge {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
.paying .payingBadge p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 40px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid #B1B8BE;
  text-align: center;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .paying .payingBadge p {
    font-size: 1.4rem;
  }
}
.paying .payingBadge p:first-child {
  background: #ECF2FE;
  color: #0076DD;
}
.paying .payingBadge p:last-child {
  background: #ECFEF4;
  color: #0DA86C;
}
.paying ul {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.paying ul:last-child {
  margin-bottom: 0;
}
.paying ul li {
  width: calc(25% - (16px) - 24px);
  border-radius: 8px;
  border: 1px solid #B1B8BE;
  background: #ffffff;
  overflow: hidden;
}
.paying ul li:nth-child(even) {
  width: 24px;
  height: 24px;
  padding: 4px;
  border: none;
  border-radius: 12px;
  background: #F4F5F6;
}
.paying ul li .step {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 8px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .paying ul li .step {
    font-size: 1.4rem;
  }
}
.paying ul li .step {
  text-align: center;
}
.paying ul li .step.customer {
  background: #ECF2FE;
  color: #0076DD;
}
.paying ul li .step.shop {
  background: #ECFEF4;
  color: #0DA86C;
}
.paying ul li div {
  height: 172px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 8px 0 16px;
}
.paying ul li div p {
  margin: 0 auto;
  padding: 0 18px;
  text-align: center;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .paying ul li div p {
    font-size: 1.6rem;
  }
}
.paying ul li div.step01 {
  background: url("../images/fo/cgcalc/NR_taxPayConvenienceStoreInfo01.png") no-repeat center 8px;
  background-size: 100px;
}
.paying ul li div.step02 {
  background: url("../images/fo/cgcalc/NR_taxPayConvenienceStoreInfo02.png") no-repeat center 8px;
  background-size: 100px;
}
.paying ul li div.step03 {
  background: url("../images/fo/cgcalc/NR_taxPayConvenienceStoreInfo03.png") no-repeat center 8px;
  background-size: 100px;
}
.paying ul li div.step04 {
  background: url("../images/fo/cgcalc/NR_taxPayConvenienceStoreInfo04.png") no-repeat center 8px;
  background-size: 100px;
}
.paying ul li div.step05 {
  background: url("../images/fo/cgcalc/NR_taxPayConvenienceStoreInfo05.png") no-repeat center 8px;
  background-size: 100px;
}
.paying ul li div.step06 {
  background: url("../images/fo/cgcalc/NR_taxPayConvenienceStoreInfo06.png") no-repeat center 8px;
  background-size: 100px;
}
.paying ul li div.step07 {
  background: url("../images/fo/cgcalc/NR_taxPayConvenienceStoreInfo07.png") no-repeat center 8px;
  background-size: 100px;
}
.paying ul li div.step08 {
  background: url("../images/fo/cgcalc/NR_taxPayConvenienceStoreInfo08.png") no-repeat center 8px;
  background-size: 100px;
}
@media (max-width: 1280px) {
  .paying ul {
    /* 특이케이스  ~ 1280 */
    flex-wrap: wrap;
  }
  .paying ul li {
    width: calc(50% - 0.4rem - 2.4rem);
  }
  .paying ul li:nth-child(4n) {
    display: none;
  }
}
@media (max-width: 768px) {
  .paying ul {
    /* 태블릿 화면  ~ 768 */
    flex-wrap: wrap;
  }
  .paying ul li div p {
    width: 100%;
    margin: 0 auto;
  }
}
@media (max-width: 403px) {
  .paying {
    /* 모바일 화면  ~ 403 */
    padding: 1.2rem 0 0 0;
  }
  .paying .payingBadge {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0.8rem;
  }
  .paying ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
  }
  .paying ul li {
    width: 100%;
  }
  .paying ul li:nth-child(even) {
    display: flex;
    transform: rotate(90deg);
  }
  .paying ul li .step {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    padding: 0 8px;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
    text-align: center;
  }
}
@media (max-width: 403px) and (max-width: 1024px) {
  .paying ul li .step {
    font-size: 1.4rem;
  }
}
@media (max-width: 403px) {
  .paying ul li .step.customer {
    background: #ECF2FE;
    color: #0076DD;
  }
  .paying ul li .step.shop {
    background: #ECFEF4;
    color: #0DA86C;
  }
  .paying ul li div {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  }
  .paying ul li div p {
    width: 100%;
    padding: 0 0.8rem;
  }
  .paying ul:after {
    content: "";
    width: 24px;
    height: 24px;
    padding: 4px;
    border: none;
    border-radius: 12px;
    background: #F4F5F6;
    background-image: url("../images/fo/icons/icon-arrow-right.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1.6rem;
    transform: rotate(90deg);
  }
  .paying ul:nth-of-type(2)::after {
    content: none;
  }
}

.arsFlow {
  /* 태블릿 화면  ~ 768 */
}
@media (max-width: 768px) {
  .arsFlow .imgWrap {
    width: 100%;
    overflow: scroll;
  }
  .arsFlow .imgWrap img {
    width: 1124px;
    max-width: max-content;
  }
}

.taxArrearCalculate {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
}
.taxArrearCalculate .box {
  gap: 32px;
}
.taxArrearCalculate .box .overdueCal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 0 auto;
}
.taxArrearCalculate .box .overdueCal li {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px 32px;
  flex-wrap: wrap;
}
.taxArrearCalculate .box .overdueCal li div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.taxArrearCalculate .box .overdueCal li div label {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .taxArrearCalculate .box .overdueCal li div label {
    font-size: 1.8rem;
  }
}
.taxArrearCalculate .box .overdueCal li div input {
  width: 100%;
}
.taxArrearCalculate .box .overdueCal li div input.input--date {
  max-width: 200px;
  width: 100%;
}
.taxArrearCalculate .box .overdueCal li div.amount-input-wrap {
  gap: 8px;
}
.taxArrearCalculate .box .overdueCal li div.amount-input-wrap .input {
  text-align: left;
}
.taxArrearCalculate .box .overdueCal li div.amount-input-wrap .amount-input-unit {
  color: #1e2124;
  display: inline-block;
  white-space: nowrap;
  word-break: keep-all;
}
.taxArrearCalculate .box .overdueCal li div.amount-input-wrap input {
  text-align: right;
}
.taxArrearCalculate .box table {
  display: table;
  width: 100%;
}
.taxArrearCalculate .box table th {
  padding: 16px 8px;
  background: linear-gradient(0deg, #ECF2FE 0%, #ECF2FE 100%), #FFFFFF;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .taxArrearCalculate .box table th {
    font-size: 1.6rem;
  }
}
.taxArrearCalculate .box table th {
  text-align: center;
  border-top: 1px solid #0076DD;
  border-bottom: 1px solid #0076DD;
}
.taxArrearCalculate .box table td {
  padding: 16px 8px;
  border-top: 1px solid #0076DD;
  border-bottom: 1px solid #0076DD;
}
.taxArrearCalculate .box table td p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #0076DD;
}
@media (max-width: 1024px) {
  .taxArrearCalculate .box table td p {
    font-size: 1.8rem;
  }
}
.taxArrearCalculate .box table td p {
  text-align: center;
}
.taxArrearCalculate {
  /* 태블릿 화면  ~ 768 */
}
@media (max-width: 768px) {
  .taxArrearCalculate {
    gap: 1rem;
  }
  .taxArrearCalculate .box {
    gap: 1.6rem;
  }
  .taxArrearCalculate .box .info01 li br {
    display: none;
  }
  .taxArrearCalculate .box .overdueCal {
    width: 100%;
  }
  .taxArrearCalculate .box .overdueCal li {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
  }
  .taxArrearCalculate .box .overdueCal li div {
    width: 100%;
    gap: 1.2rem;
  }
  .taxArrearCalculate .box .overdueCal li div label {
    width: 9rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .taxArrearCalculate .box .overdueCal li div label {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .taxArrearCalculate .box .overdueCal li div input.input--date {
    max-width: 100%;
  }
  .taxArrearCalculate .box .overdueCal li div.btnBox {
    gap: 0.8rem;
  }
  .taxArrearCalculate .box table td p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    white-space: nowrap;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .taxArrearCalculate .box table td p {
    font-size: 1.6rem;
  }
}

.box.minwonSamu, .box.civillAppeal {
  gap: 24px;
}
.box.minwonSamu > div, .box.civillAppeal > div {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
@media (max-width: 403px) {
  .box.minwonSamu, .box.civillAppeal {
    gap: 1.6rem;
  }
  .box.minwonSamu > div, .box.civillAppeal > div {
    gap: 0.8rem;
  }
}
.box.minwonSamu > div {
  gap: 4px;
}
.box.minwonSamu > div ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}
@media (max-width: 403px) {
  .box.minwonSamu > div ul {
    gap: 1.2rem;
  }
}
.box.civillAppeal > div {
  gap: 12px;
}
.box.civillAppeal > div.imposition {
  gap: 4px;
}
.box.civillAppeal > div > div {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
}
.box.civillAppeal > div > ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
}
.box.civillAppeal .print {
  margin: 0 auto;
}
@media (max-width: 403px) {
  .box.civillAppeal > div.imposition {
    gap: 0.8rem;
  }
  .box.civillAppeal > div > ul {
    gap: 0.4rem;
  }
}

.hmvsettleExampleTable {
  display: table;
  width: 100%;
}
.hmvsettleExampleTable th {
  padding: 12px 16px;
  border-right: 1px solid #cdd1d5;
  background: #F9FAFB;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .hmvsettleExampleTable th {
    font-size: 1.4rem;
  }
}
.hmvsettleExampleTable th {
  text-align: left;
}
.hmvsettleExampleTable th span.num {
  margin-right: 8px;
}
.hmvsettleExampleTable tbody tr:first-child th,
.hmvsettleExampleTable tbody tr:first-child td {
  border-top: 1px solid #6787C9;
}
.hmvsettleExampleTable tbody tr {
  border-bottom: 1px solid #cdd1d5;
  /* 주의: 마크업 행 수에 의존하는 셀렉터.
     의도는 .total 직전 행의 border 제거이므로, 행 추가/삭제 시 함께 확인 필요 */
}
.hmvsettleExampleTable tbody tr:nth-last-child(2) {
  border-bottom: none;
}
.hmvsettleExampleTable tbody tr.total {
  position: relative;
  border-top: 1px solid #0076DD;
  border-bottom: 1px solid #0076DD;
}
.hmvsettleExampleTable tbody tr.total th,
.hmvsettleExampleTable tbody tr.total td {
  height: 72px;
  border-top: none;
  border-bottom: none;
}
.hmvsettleExampleTable tbody tr.total th {
  color: #0076DD;
  background: linear-gradient(0deg, #ECF2FE 0%, #ECF2FE 100%), #FFFFFF !important;
}
.hmvsettleExampleTable tbody tr.total td .info03 li {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #096AB3;
}
@media (max-width: 1024px) {
  .hmvsettleExampleTable tbody tr.total td .info03 li {
    font-size: 1.6rem;
  }
}
.hmvsettleExampleTable tbody tr.total td .info03 li span.num {
  margin-right: 2px;
}
.hmvsettleExampleTable tbody tr td {
  padding: 8px;
  text-align: center;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .hmvsettleExampleTable tbody tr td {
    font-size: 1.6rem;
  }
}
.hmvsettleExampleTable tbody tr td {
  border-right: 1px solid #cdd1d5;
}
.hmvsettleExampleTable tbody tr td:last-child {
  border-right: none;
}
.hmvsettleExampleTable tbody tr td .fileStatus {
  display: flex;
  justify-content: center;
}
.hmvsettleExampleTable tbody tr td a {
  color: #1e2124;
}
.hmvsettleExampleTable tbody tr td .info03 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
  padding: 0 8px;
}
.hmvsettleExampleTable tbody tr td .info03 li {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .hmvsettleExampleTable tbody tr td .info03 li {
    font-size: 1.6rem;
  }
}
.hmvsettleExampleTable tbody tr td .info03 li:before {
  content: "•";
  display: inline-block;
  width: 22px;
}
.hmvsettleExampleTable tbody tr td .info03 li.noDesc:before {
  content: "";
  width: 0px;
}
.hmvsettleExampleTable tbody tr td .info03 li.sum {
  padding-left: 32px;
  text-align: center;
  color: #096AB3;
}
.hmvsettleExampleTable tbody tr td .info03 li.sum .num {
  margin-right: 0;
}
.hmvsettleExampleTable tbody tr td .info03 li span.num {
  margin-right: 8px;
}
@media (max-width: 768px) {
  .hmvsettleExampleTable th {
    /* 태블릿 화면  ~ 768 */
    text-align: center;
  }
  .hmvsettleExampleTable th span.num {
    margin-right: 0;
  }
  .hmvsettleExampleTable tbody tr td .info03 {
    padding: 0;
  }
  .hmvsettleExampleTable tbody tr td .info03 li {
    text-align: left;
    gap: 0.8rem;
    white-space: nowrap;
  }
  .hmvsettleExampleTable tbody tr td .info03 li.sum {
    text-align: left;
    display: inline;
  }
  .hmvsettleExampleTable tbody tr td .info03 li span.num {
    margin-right: 0.8rem;
    margin-top: 0.4rem;
  }
}

.info-item.office {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  border-radius: 20px;
  border: 1px solid #CDD1D5;
  overflow: hidden;
}
.info-item.office div.officeMapHeader {
  position: relative;
  width: 100%;
  height: 104px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0 32px;
  background: linear-gradient(0deg, #ECF2FE 0%, #ECF2FE 100%), #DEE5F4;
  border-bottom: 1px solid #cdd1d5;
}
.info-item.office div.officeMapHeader:before {
  content: "";
  position: absolute;
  right: 30px;
  width: 101px;
  height: 77px;
  background: url("../images/fo/hmvsettle/bg_officeMap.png") no-repeat center;
  background-size: contain;
}
.info-item.office div.officeMapHeader h4 {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .info-item.office div.officeMapHeader h4 {
    font-size: 2.2rem;
  }
}
.info-item.office div.officeMapDetail {
  width: 100%;
  padding: 14px 0;
  border-bottom: 1px solid #cdd1d5;
}
.info-item.office div.officeMapDetail .bgMap {
  width: 100%;
  height: 540px;
  background: url("../images/fo/map_bukbu.png") no-repeat center center;
  transition: all 0.2s;
}
.info-item.office div.officeMap {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 24px 32px;
  border-radius: 20px;
  overflow: hidden;
}
.info-item.office div.officeMap ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.info-item.office div.officeMap ul li {
  width: calc(50% - 6px);
  border-radius: 12px;
  border: 1px solid #B1B8BE;
  background: url("../images/fo/icons/icon-arrow-right.svg") no-repeat center right 20px;
}
.info-item.office div.officeMap ul li.active, .info-item.office div.officeMap ul li:hover {
  border: 1px solid #0076DD;
  background: url("../images/fo/icons/icon-arrow-right-white.svg") no-repeat center right 20px #0076DD;
}
.info-item.office div.officeMap ul li.active .officeInfo span,
.info-item.office div.officeMap ul li.active .officeInfo span.contact, .info-item.office div.officeMap ul li:hover .officeInfo span,
.info-item.office div.officeMap ul li:hover .officeInfo span.contact {
  color: #ffffff;
}
.info-item.office div.officeMap ul li.active span.area, .info-item.office div.officeMap ul li:hover span.area {
  color: #ffffff;
}
.info-item.office div.officeMap ul li button {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;
}
.info-item.office div.officeMap ul li button .officeInfo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0px 12px;
  flex-wrap: wrap;
}
.info-item.office div.officeMap ul li button .officeInfo span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .info-item.office div.officeMap ul li button .officeInfo span {
    font-size: 1.8rem;
  }
}
.info-item.office div.officeMap ul li button .officeInfo span.contact {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #0076DD;
}
@media (max-width: 1024px) {
  .info-item.office div.officeMap ul li button .officeInfo span.contact {
    font-size: 1.6rem;
  }
}
.info-item.office div.officeMap ul li button span.area {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .info-item.office div.officeMap ul li button span.area {
    font-size: 1.8rem;
  }
}
.info-item.office div.officeMap ul li button span.area {
  text-align: left;
  white-space: break-spaces;
  word-break: auto-phrase;
}
.info-item.office {
  /* 태블릿 화면  ~ 768 */
}
@media (max-width: 768px) {
  .info-item.office {
    padding: 1.2rem;
    gap: 0.8rem;
  }
  .info-item.office div.officeMapHeader {
    height: max-content;
    padding: 0;
    background: none;
    border-bottom: none;
    margin-bottom: 0.8rem;
  }
  .info-item.office div.officeMapHeader:before {
    display: none;
  }
  .info-item.office div.officeMapHeader h4 {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .info-item.office div.officeMapHeader h4 {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .info-item.office div.officeMapDetail {
    display: none;
  }
  .info-item.office div.officeMap {
    gap: 0.8rem;
    padding: 0;
    border-radius: 0;
  }
  .info-item.office div.officeMap ul {
    gap: 0.8rem;
  }
  .info-item.office div.officeMap ul li {
    width: calc(50% - 0.4rem);
    background: url("../images/fo/icons/icon-arrow-right_hover.svg") no-repeat center right 1rem;
    background-size: 2rem;
  }
  .info-item.office div.officeMap ul li:hover {
    background: url("../images/fo/icons/icon-arrow-right-white.svg") no-repeat center right 1rem #0076DD;
    background-size: 2rem;
  }
  .info-item.office div.officeMap ul li button {
    padding: 1rem;
  }
  .info-item.office div.officeMap ul li button .officeInfo {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .info-item.office div.officeMap ul li button .officeInfo span {
    font-size: 1.6rem;
  }
  .info-item.office div.officeMap ul li button .officeInfo span.contact {
    font-size: 1.4rem;
  }
  .info-item.office div.officeMap ul li button span.area {
    width: 12.3rem;
    font-size: 1.4rem;
  }
}
.info-item.office {
  /* ~403px 모바일 사이즈 */
}
@media (max-width: 403px) {
  .info-item.office div.officeMap ul li {
    min-height: 10.7rem;
  }
  .info-item.office div.officeMap ul li button span.area {
    font-size: 1.4rem;
  }
}
.info-item.office {
  /* 300 미만 모바일 기기 */
}
@media (max-width: 300px) {
  .info-item.office div.officeMap ul li {
    width: 100%;
    min-height: unset;
  }
  .info-item.office div.officeMap ul li button span.area {
    width: 100%;
  }
}

/* 공지사항 상세(view) */
.noticeView .noticeArticle {
  border-top: 1px solid #cdd1d5;
}
.noticeView .noticeHeader {
  padding: 24px 0;
  border-bottom: 1px solid #cdd1d5;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
}
.noticeView .noticeHeader .noticeTitle {
  width: 100%;
  margin: 0;
  word-break: keep-all;
}
.noticeView .noticeHeader .noticeMeta {
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #464C53;
}
@media (max-width: 1024px) {
  .noticeView .noticeHeader .noticeMeta {
    font-size: 1.6rem;
  }
}
.noticeView .noticeHeader .noticeMeta dd {
  margin: 0;
  white-space: nowrap;
}
.noticeView .noticeContent {
  padding: 40px 16px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .noticeView .noticeContent {
    font-size: 1.6rem;
  }
}
.noticeView .noticeContent p {
  margin: 0;
}
.noticeView .noticeContent p + p {
  margin-top: 16px;
}
.noticeView .noticeFiles {
  width: 100%;
  display: flex;
  padding: 24px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.noticeView .noticeFiles p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .noticeView .noticeFiles p {
    font-size: 1.6rem;
  }
}
.noticeView .noticeFiles p.noFile {
  color: #464C53;
}
.noticeView .noticeFiles .fileList {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.noticeView .noticeFiles .fileList li a {
  display: block;
  padding: 16px 24px;
  color: #0076DD;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: #F4F5F6;
}
.noticeView .noticeFiles .fileList li a:focus, .noticeView .noticeFiles .fileList li a:hover {
  text-decoration-thickness: 2px;
}

.btnArea {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* 뷰 하단 이전/다음 바(이미지 스타일) */
.viewNaviBar {
  width: 100%;
  border-top: 1px solid #cdd1d5;
}
.viewNaviBar .viewNaviBarList {
  margin: 0;
  padding: 0;
  list-style: none;
}
.viewNaviBar .viewNaviBarItem {
  border-bottom: 1px solid #cdd1d5;
}
.viewNaviBar .viewNaviBarItem .viewNaviBarLink {
  display: flex;
  align-items: center;
  gap: 40px;
  width: 100%;
  padding: 14.5px 24px;
  text-decoration: none;
  color: #1e2124;
}
.viewNaviBar .viewNaviBarItem .viewNaviBarLink .icon {
  flex: 0 0 auto;
}
.viewNaviBar .viewNaviBarItem .viewNaviBarLink .viewNaviBarText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .viewNaviBar .viewNaviBarItem .viewNaviBarLink .viewNaviBarText {
    font-size: 1.6rem;
  }
}
.viewNaviBar {
  /* 태블릿 화면  ~ 768 */
}
@media (max-width: 768px) {
  .viewNaviBar .viewNaviBarItem .viewNaviBarLink {
    padding: 0.95rem 0.8rem;
    gap: 2rem;
  }
  .viewNaviBar .viewNaviBarItem .viewNaviBarLink .viewNaviBarText {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .viewNaviBar .viewNaviBarItem .viewNaviBarLink .viewNaviBarText {
    font-size: 1.4rem;
  }
}

.viewMetaTable {
  width: 100%;
  margin: 0;
  padding: 0;
  border-top: 1px solid #6787C9;
}
.viewMetaTable .viewRow {
  display: grid;
  grid-template-columns: 190px 1fr;
  border-bottom: 1px solid #CDD1D5;
  word-wrap: break-word;
  word-break: break-all;
}
.viewMetaTable .viewRow.noData {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.viewMetaTable .viewRow dt,
.viewMetaTable .viewRow dd {
  margin: 0;
  padding: 16px;
}
.viewMetaTable .viewRow dt {
  display: flex;
  align-items: center;
  border-right: 1px solid #CDD1D5;
  background: #F9FAFB;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .viewMetaTable .viewRow dt {
    font-size: 1.4rem;
  }
}
.viewMetaTable .viewRow dt.border-l {
  border-left: 1px solid #CDD1D5;
}
.viewMetaTable .viewRow dd {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .viewMetaTable .viewRow dd {
    font-size: 1.6rem;
  }
}
.viewMetaTable .viewRow.is-quad {
  grid-template-columns: 190px 1fr 190px 1fr;
}
.viewMetaTable {
  /* 태블릿  ~ 768px */
}
@media (max-width: 768px) {
  .viewMetaTable {
    border-radius: 2rem;
    border: 1px solid #CDD1D5;
    padding: 1.2rem;
  }
  .viewMetaTable .viewRow {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.8rem 0 1.2rem;
  }
  .viewMetaTable .viewRow:first-child {
    padding: 0 0 1.2rem;
  }
  .viewMetaTable .viewRow:last-child {
    border-bottom: none;
  }
  .viewMetaTable .viewRow dt.border-l {
    border-left: none;
    border-top: 1px solid #CDD1D5;
    padding-top: 0.8rem;
  }
  .viewMetaTable .viewRow dt,
  .viewMetaTable .viewRow dd {
    width: 100%;
    padding: 0;
    background: none;
    border: none;
  }
}

.loginSub .tabWrap {
  margin-bottom: 24px;
}
.loginSub .loginWrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 24px;
}
.loginSub .loginWrap .idLogin,
.loginSub .loginWrap .certLogin,
.loginSub .loginWrap .mobileLogin {
  display: flex;
  width: 25%;
  max-width: 460px;
  height: 522px;
  padding: 20px 20px 24px 20px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1 0 0;
  border-radius: 20px;
  border: 1px solid #B1B8BE;
  background: #ffffff;
  /* shadow2 */
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.13);
}
.loginSub .loginWrap .idLogin h4,
.loginSub .loginWrap .certLogin h4,
.loginSub .loginWrap .mobileLogin h4 {
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .loginSub .loginWrap .idLogin h4,
  .loginSub .loginWrap .certLogin h4,
  .loginSub .loginWrap .mobileLogin h4 {
    font-size: 2.2rem;
  }
}
.loginSub .loginWrap .idLogin .loginDetail,
.loginSub .loginWrap .certLogin .loginDetail,
.loginSub .loginWrap .mobileLogin .loginDetail {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
}
.loginSub .loginWrap .idLogin .loginDetail > span,
.loginSub .loginWrap .certLogin .loginDetail > span,
.loginSub .loginWrap .mobileLogin .loginDetail > span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1E2124;
}
@media (max-width: 1024px) {
  .loginSub .loginWrap .idLogin .loginDetail > span,
  .loginSub .loginWrap .certLogin .loginDetail > span,
  .loginSub .loginWrap .mobileLogin .loginDetail > span {
    font-size: 1.4rem;
  }
}
.loginSub .loginWrap .idLogin .loginDetail > p,
.loginSub .loginWrap .certLogin .loginDetail > p,
.loginSub .loginWrap .mobileLogin .loginDetail > p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .loginSub .loginWrap .idLogin .loginDetail > p,
  .loginSub .loginWrap .certLogin .loginDetail > p,
  .loginSub .loginWrap .mobileLogin .loginDetail > p {
    font-size: 1.6rem;
  }
}
.loginSub .loginWrap .idLogin .loginDetail > a,
.loginSub .loginWrap .certLogin .loginDetail > a,
.loginSub .loginWrap .mobileLogin .loginDetail > a {
  width: 100%;
}
.loginSub .loginWrap .idLogin .loginDetail > div a,
.loginSub .loginWrap .certLogin .loginDetail > div a,
.loginSub .loginWrap .mobileLogin .loginDetail > div a {
  width: 100%;
}
.loginSub .loginWrap .idLogin h4 {
  background: url("../images/fo/login/bg_login_title01.png") no-repeat center right;
  background-size: contain;
}
.loginSub .loginWrap .idLogin .loginInput {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
}
.loginSub .loginWrap .idLogin .loginInput > div {
  width: 100%;
}
.loginSub .loginWrap .idLogin .loginInput > div label {
  display: block;
  margin-bottom: 4px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #464C53;
}
@media (max-width: 1024px) {
  .loginSub .loginWrap .idLogin .loginInput > div label {
    font-size: 1.6rem;
  }
}
.loginSub .loginWrap .idLogin .loginInput > div input {
  width: 100%;
}
.passwordInput input[type="password"]::-ms-reveal {
  display: none;
}
.loginSub .loginWrap .idLogin .loginInput > div .passwordInput {
  position: relative;
  width: 100%;
}
.loginSub .loginWrap .idLogin .loginInput > div .passwordInput input {
  padding-right: 56px;
}
.loginSub .loginWrap .idLogin .loginInput > div .passwordToggle {
  position: absolute;
  top: 50%;
  right: 8px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 1000px;
  background: transparent;
  transform: translateY(-50%);
}
.loginSub .loginWrap .idLogin .loginInput > div .passwordToggle:hover, .loginSub .loginWrap .idLogin .loginInput > div .passwordToggle:focus-visible {
  background: #F4F5F6;
}
.loginSub .loginWrap .idLogin .loginInput > div .passwordToggle .icon {
  flex: none;
}
.loginSub .loginWrap .idLogin .loginInput > div span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .loginSub .loginWrap .idLogin .loginInput > div span {
    font-size: 1.4rem;
  }
}
.loginSub .loginWrap .idLogin .loginInput > button {
  width: 100%;
}
.loginSub .loginWrap .idLogin .lostInfo {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
}
.loginSub .loginWrap .idLogin .lostInfo p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .loginSub .loginWrap .idLogin .lostInfo p {
    font-size: 1.6rem;
  }
}
.loginSub .loginWrap .certLogin h4 {
  background: url("../images/fo/login/bg_login_title03.png") no-repeat center right;
  background-size: contain;
}
.loginSub .loginWrap .certLogin .loginDetail .btnCertLogin {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 116px;
  min-width: 90px;
  padding: 0 16px;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid #BBB2A5;
  background: #F8F4EF;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 150%;
  color: #584322;
}
@media (max-width: 1024px) {
  .loginSub .loginWrap .certLogin .loginDetail .btnCertLogin {
    font-size: 1.8rem;
  }
}
.loginSub .loginWrap .certLogin .loginDetail .btnCertLogin:before {
  content: "";
  width: 28px;
  height: 28px;
  background: url("../images/fo/login/btn_cert_login.svg") no-repeat center center;
  background-size: contain;
}
.loginSub .loginWrap .certLogin .loginDetail div {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
}
.loginSub .loginWrap .certLogin .loginDetail div p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .loginSub .loginWrap .certLogin .loginDetail div p {
    font-size: 1.6rem;
  }
}
.loginSub .loginWrap .mobileLogin h4 {
  background: url("../images/fo/login/bg_login_title04.png") no-repeat center right;
  background-size: contain;
}
.loginSub .loginWrap .mobileLogin .loginDetail .btnMobileLogin {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 116px;
  min-width: 90px;
  padding: 0 16px;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid #9898C6;
  background: #F2F2FF;
  color: #31314F;
  /* TODO: 17px은 타이포 토큰에 없는 값 — @include font() 체계 우회 중, 디자인 확인 필요 */
  font-size: 17px;
  font-weight: 600;
}
.loginSub .loginWrap .mobileLogin .loginDetail .btnMobileLogin:before {
  content: "";
  width: 28px;
  height: 28px;
  background: url("../images/fo/login/btn_mobile_login.svg") no-repeat center center;
  background-size: contain;
}
.loginSub .joinBenefitWrap {
  padding-top: 32px;
}
.loginSub .joinBenefitWrap .joinBenefitBox {
  padding-top: 20px;
}
.loginSub .joinBenefitWrap .joinBenefitBox .title {
  margin-bottom: 8px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .loginSub .joinBenefitWrap .joinBenefitBox .title {
    font-size: 2.2rem;
  }
}
.loginSub .joinBenefitWrap .joinBenefitBox span:not(.badge) {
  display: block;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .loginSub .joinBenefitWrap .joinBenefitBox span:not(.badge) {
    font-size: 1.6rem;
  }
}
.loginSub .joinBenefitWrap .joinBenefitBox .tableBox {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.loginSub .joinBenefitWrap .joinBenefitBox .tableBox table {
  width: 100%;
  min-height: 220px;
  margin-top: 16px;
  border-top: 1px solid #6787C9;
  border-bottom: 1px solid #CDD1D5;
}
.loginSub .joinBenefitWrap .joinBenefitBox .tableBox table th {
  height: 40px;
  padding: 0 8px;
  border-right: 1px solid #CDD1D5;
  border-bottom: 1px solid #CDD1D5;
  background: #F9FAFB;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .loginSub .joinBenefitWrap .joinBenefitBox .tableBox table th {
    font-size: 1.4rem;
  }
}
.loginSub .joinBenefitWrap .joinBenefitBox .tableBox table th {
  text-align: center;
}
.loginSub .joinBenefitWrap .joinBenefitBox .tableBox table th:last-child {
  border-right: none;
}
.loginSub .joinBenefitWrap .joinBenefitBox .tableBox table td {
  padding: 8px;
}
.loginSub .joinBenefitWrap .joinBenefitBox .tableBox table td > span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .loginSub .joinBenefitWrap .joinBenefitBox .tableBox table td > span {
    font-size: 1.6rem;
  }
}
.loginSub .joinBenefitWrap .joinBenefitBox .tableBox table td > span {
  text-align: center;
}
.loginSub .joinBenefitWrap .joinBenefitBox .tableBox table td > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.loginSub .joinBenefitWrap .joinBenefitBox .tableBox table td .badgeWrap {
  text-align: center;
}
.loginSub .joinBenefitWrap .joinBenefitBox .tableBox table:last-child th {
  border-left: 1px solid #CDD1D5;
}
.loginSub .joinBenefitWrap .joinBenefitBox.goLogin {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-top: 0;
  padding-bottom: 20px;
}

.joinSub .stepWrap {
  margin-bottom: 24px;
}
.joinSub .joinBox.step01 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
}
.joinSub .joinBox.step01 > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 460px;
  max-width: 460px;
  padding: 20px 20px 24px 20px;
  gap: 12px;
  border-radius: 20px;
  border: 1px solid #B1B8BE;
  background: #ffffff;
  /* shadow2 */
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.13);
}
.joinSub .joinBox.step01 > div h4 {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .joinSub .joinBox.step01 > div h4 {
    font-size: 2.2rem;
  }
}
.joinSub .joinBox.step01 > div h4 {
  text-align: center;
}
.joinSub .joinBox.step01 > div div span {
  height: 63px;
  display: inline-block;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .joinSub .joinBox.step01 > div div span {
    font-size: 1.4rem;
  }
}
.joinSub .joinBox.step01 > div div span {
  text-align: center;
}
.joinSub .joinBox.step01 > div div button {
  width: 100%;
}
.joinSub .joinBox.step01 > div.joinGeneral > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding-top: 158px;
  background: url("../images/fo/login/bg_join01.png") no-repeat top center;
  background-size: 100%;
}
.joinSub .joinBox.step01 > div.joinCorp > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding-top: 158px;
  background: url("../images/fo/login/bg_joinCorp01.png") no-repeat top center;
  background-size: 100%;
}
.joinSub .joinBox.step01 > div.joinCorp > div button {
  background: #AC9C85;
  color: #ffffff;
}
.joinSub .joinBox.step02 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.joinSub .joinBox.step02 .joinAgreeBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 24px;
  gap: 16px;
  border-radius: 20px;
  border: 1px solid #CDD1D5;
  background: #ffffff;
}
.joinSub .joinBox.step02 .joinAgreeBox h3 {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .joinSub .joinBox.step02 .joinAgreeBox h3 {
    font-size: 2.2rem;
  }
}
.joinSub .joinBox.step02 .joinAgreeBox .agreeBox {
  height: 360px;
  overflow-y: auto;
  padding: 16px;
  border: 1px solid #BAC3D5;
  background: #F9FAFB;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .joinSub .joinBox.step02 .joinAgreeBox .agreeBox {
    font-size: 1.6rem;
  }
}
.joinSub .joinBox.step02 .joinAgreeBox .agreeBox b {
  color: #D63D4A;
}
.joinSub .joinBox.step02 .joinAgreeBox .agreeCheckBox {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
}
.joinSub .joinBox.step02 .joinAgreeBox .agreeCheckBox .checkBox .essential {
  color: #0076DD;
}
.joinSub .joinBox.step02 .joinAgreeBox .agreeCheckBox .checkBox .description {
  color: #6D7882;
}
.joinSub .joinBox.step02 .joinAgreeBox .agreeCheckBox .checkBox .description2 {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #464C53;
}
@media (max-width: 1024px) {
  .joinSub .joinBox.step02 .joinAgreeBox .agreeCheckBox .checkBox .description2 {
    font-size: 1.6rem;
  }
}
.joinSub .joinBox.step02 .joinAgreeBox .certifiedInfo ul li {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .joinSub .joinBox.step02 .joinAgreeBox .certifiedInfo ul li {
    font-size: 1.6rem;
  }
}
.joinSub .joinBox.step02 .joinAgreeBox .certifiedInfo ul li::before {
  content: "";
  width: 3px;
  height: 3px;
  background: #1e2124;
  border-radius: 9999px;
  margin-left: 10px;
  margin-right: 10px;
}
.joinSub .joinBox.step02 .btnBox {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}
.joinSub .joinBox.step02Corp {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
}
.joinSub .joinBox.step02Corp .joinInfo {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  border-radius: 20px;
  border: 1px solid #CDD1D5;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .joinSub .joinBox.step02Corp .joinInfo {
    font-size: 1.6rem;
  }
}
.joinSub .joinBox.step02Corp .joinInfo .essentialInfo {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.joinSub .joinBox.step02Corp .joinInfo .essentialInfo h4 {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .joinSub .joinBox.step02Corp .joinInfo .essentialInfo h4 {
    font-size: 2.2rem;
  }
}
.joinSub .joinBox.step02Corp .joinInfo .essentialInfo div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
}
.joinSub .joinBox.step02Corp .joinInfo .essentialInfo div span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #464C53;
}
@media (max-width: 1024px) {
  .joinSub .joinBox.step02Corp .joinInfo .essentialInfo div span {
    font-size: 1.6rem;
  }
}
.joinSub .joinBox.step02Corp .joinInfo table {
  width: 100%;
  border-top: 1px solid #6787C9;
}
.joinSub .joinBox.step02Corp .joinInfo table tr {
  border-bottom: 1px solid #CDD1D5;
}
.joinSub .joinBox.step02Corp .joinInfo table tr th {
  padding: 12px 16px;
  border-right: 1px solid #CDD1D5;
  background: #F9FAFB;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #1E2124;
}
@media (max-width: 1024px) {
  .joinSub .joinBox.step02Corp .joinInfo table tr th {
    font-size: 1.4rem;
  }
}
.joinSub .joinBox.step02Corp .joinInfo table tr th div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
}
.joinSub .joinBox.step02Corp .joinInfo table tr th label {
  text-align: left;
}
.joinSub .joinBox.step02Corp .joinInfo table tr td {
  padding: 12px 16px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1E2124;
}
@media (max-width: 1024px) {
  .joinSub .joinBox.step02Corp .joinInfo table tr td {
    font-size: 1.6rem;
  }
}
.joinSub .joinBox.step02Corp .joinInfo table tr td ul {
  margin-top: 12px;
  gap: 0;
}
.joinSub .joinBox.step02Corp .joinInfo table tr td ul li {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1E2124;
}
@media (max-width: 1024px) {
  .joinSub .joinBox.step02Corp .joinInfo table tr td ul li {
    font-size: 1.4rem;
  }
}
.joinSub .joinBox.step02Corp .joinInfo table tr td ul li .color_re {
  color: #D63D4A;
}
.joinSub .joinBox.step02Corp .joinInfo table tr td div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.joinSub .joinBox.step02Corp .joinInfo table tr td div .num1 {
  width: 120px;
}
.joinSub .joinBox.step02Corp .joinInfo table tr td div .num2 {
  width: 80px;
}
.joinSub .joinBox.step02Corp .joinInfo table tr td div .num3 {
  width: 144px;
}
.joinSub .joinBox.step02Corp .joinInfo table tr td div .userId {
  width: 322px;
}
.joinSub .joinBox.step02Corp .joinInfo ul {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
}
.joinSub .joinBox.step02Corp .joinInfo ul li {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.joinSub .joinBox.step02Corp .joinInfo ul li.noDesc::before {
  content: "";
  width: 0px;
  height: 0px;
  display: inline-block;
  margin: 0px;
  vertical-align: middle;
  flex: none;
}
.joinSub .joinBox.step02Corp .joinInfo ul li::before {
  content: "";
  width: 3px;
  height: 3px;
  display: inline-block;
  margin: 10px;
  vertical-align: middle;
  border-radius: 999px;
  background: #1e2124;
  flex: none;
}
.joinSub .joinBox.step02Corp .joinInfo ul li p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .joinSub .joinBox.step02Corp .joinInfo ul li p {
    font-size: 1.6rem;
  }
}
.joinSub .joinBox.step02Corp .joinInfo ul li span .color_re {
  padding-left: 0;
  color: #D63D4A;
}
.joinSub .joinBox.step02Corp .joinInfo button {
  margin-top: -2px;
  margin-left: 20px;
}
.joinSub .joinBox.step02Corp .btnBox {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  margin: 0 auto;
}
.joinSub .joinBox.step03 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
}
.joinSub .joinBox.step03 .joinInfo {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  border-radius: 20px;
  border: 1px solid #CDD1D5;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .joinSub .joinBox.step03 .joinInfo {
    font-size: 1.6rem;
  }
}
.joinSub .joinBox.step03 .joinInfo .essentialInfo {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.joinSub .joinBox.step03 .joinInfo .essentialInfo div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
}
.joinSub .joinBox.step03 .joinInfo .essentialInfo div span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #464C53;
}
@media (max-width: 1024px) {
  .joinSub .joinBox.step03 .joinInfo .essentialInfo div span {
    font-size: 1.6rem;
  }
}
.joinSub .joinBox.step03 .joinInfo table {
  width: 100%;
  border-top: 1px solid #6787C9;
  table-layout: fixed;
}
.joinSub .joinBox.step03 .joinInfo table tr {
  border-bottom: 1px solid #CDD1D5;
}
.joinSub .joinBox.step03 .joinInfo table tr th {
  padding: 12px 16px;
  border-right: 1px solid #CDD1D5;
  background: #F9FAFB;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: #1E2124;
}
@media (max-width: 1024px) {
  .joinSub .joinBox.step03 .joinInfo table tr th {
    font-size: 1.4rem;
  }
}
.joinSub .joinBox.step03 .joinInfo table tr th div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
}
.joinSub .joinBox.step03 .joinInfo table tr th label {
  text-align: left;
}
.joinSub .joinBox.step03 .joinInfo table tr td {
  padding: 12px 16px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1E2124;
}
@media (max-width: 1024px) {
  .joinSub .joinBox.step03 .joinInfo table tr td {
    font-size: 1.6rem;
  }
}
.joinSub .joinBox.step03 .joinInfo table tr td ul {
  margin-top: 12px;
}
.joinSub .joinBox.step03 .joinInfo table tr td ul li {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1E2124;
}
@media (max-width: 1024px) {
  .joinSub .joinBox.step03 .joinInfo table tr td ul li {
    font-size: 1.4rem;
  }
}
.joinSub .joinBox.step03 .joinInfo table tr td div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.joinSub .joinBox.step03 .joinInfo table tr td div.numWrap, .joinSub .joinBox.step03 .joinInfo table tr td div.tradeName {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.joinSub .joinBox.step03 .joinInfo table tr td div.tradeName {
  gap: 12px;
}
.joinSub .joinBox.step03 .joinInfo table tr td div.emailBox {
  flex-wrap: wrap;
}
.joinSub .joinBox.step03 .joinInfo table tr td div.numAdd > div {
  flex-wrap: wrap;
}
.joinSub .joinBox.step03 .joinInfo table tr td div .tel {
  width: 120px;
}
.joinSub .joinBox.step03 .joinInfo table tr td div .cusName {
  width: 170px;
}
.joinSub .joinBox.step03 .joinInfo table tr td div .email {
  width: 180px;
}
.joinSub .joinBox.step03 .joinInfo table tr td div .cusNum,
.joinSub .joinBox.step03 .joinInfo table tr td div .pw {
  width: 246px;
}
.joinSub .joinBox.step03 .joinInfo table tr td div.passwordInput {
  position: relative;
  width: 246px;
  max-width: 100%;
  display: block;
}
.joinSub .joinBox.step03 .joinInfo table tr td div.passwordInput .pw {
  width: 100%;
  padding-right: 56px;
}
.joinSub .joinBox.step03 .joinInfo table tr td div.passwordConfirmInput {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  gap: 8px;
}
.joinSub .joinBox.step03 .joinInfo table tr td div.passwordConfirmInput .passwordInput {
  flex: 0 1 246px;
}
.joinSub .joinBox.step03 .joinInfo table tr td div.passwordConfirmInput #pwdConfirmButton {
  flex: none;
}
.joinSub .joinBox.step03 .joinInfo table tr td div .passwordToggle {
  position: absolute;
  top: 50%;
  right: 8px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  transform: translateY(-50%);
}
.joinSub .joinBox.step03 .joinInfo table tr td div .passwordToggle:hover, .joinSub .joinBox.step03 .joinInfo table tr td div .passwordToggle:focus-visible {
  background: #F4F5F6;
}
.joinSub .joinBox.step03 .joinInfo table tr td div .passwordToggle .icon {
  flex: none;
}
.joinSub .joinBox.step03 .joinInfo table tr td div .userId {
  width: 322px;
}
.joinSub .joinBox.step03 .joinInfo .checkBox label .description {
  color: #6D7882;
}
.joinSub .joinBox.step03 .joinInfo .keeper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.joinSub .joinBox.step03 .joinInfo .keeper span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .joinSub .joinBox.step03 .joinInfo .keeper span {
    font-size: 1.6rem;
  }
}
.joinSub .joinBox.step03 .joinInfo .keeper span.essential {
  color: #D63D4A;
}
.joinSub .joinBox.step03 .joinInfo .keeper > div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
}
.joinSub .joinBox.step03 .btnBox {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  margin: 0 auto;
}
.joinSub .joinBox.step04 {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  margin: 0 auto;
}
.joinSub .joinBox.step04 .joinDone {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 288px;
  gap: 12px;
  padding: 19px;
  border-radius: 20px;
  border: 1px solid #B1B8BE;
}
.joinSub .joinBox.step04 .joinDone h4 {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .joinSub .joinBox.step04 .joinDone h4 {
    font-size: 2.2rem;
  }
}
.joinSub .joinBox.step04 .joinDone div {
  width: 100%;
  height: 128px;
  padding-top: 136px;
  background: url(../images/fo/login/bg_join04.png) no-repeat top 9.7px center;
  background-size: 87px;
  text-align: center;
}
.joinSub .joinBox.step04 .joinDone div span {
  display: block;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .joinSub .joinBox.step04 .joinDone div span {
    font-size: 1.4rem;
  }
}
.joinSub .joinBox.step04 .customerNumAdd {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 24px 20px;
  border-radius: 20px;
  border: 1px solid #6787C9;
  background: #ECF2FE;
}
.joinSub .joinBox.step04 .customerNumAdd h5 {
  width: 100%;
  text-align: center;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .joinSub .joinBox.step04 .customerNumAdd h5 {
    font-size: 1.4rem;
  }
}

.findBox {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
}
.findBox form {
  width: 100%;
}
.findBox form .loginSub {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}
.findBox form .loginSub > div {
  width: 460px;
  max-width: 460px;
  padding: 20px 20px 24px 20px;
  border-radius: 20px;
  border: 1px solid #B1B8BE;
  background: #ffffff;
  /* shadow2 */
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.13);
}
.findBox form .loginSub > div h4 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.findBox form .loginSub > div .client {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.findBox form .loginSub > div .client li {
  width: 50%;
}
.findBox form .loginSub > div .client li button {
  width: 100%;
  height: 56px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #464C53;
}
@media (max-width: 1024px) {
  .findBox form .loginSub > div .client li button {
    font-size: 1.8rem;
  }
}
.findBox form .loginSub > div .client li button {
  border-bottom: 2px solid #B1B8BE;
}
.findBox form .loginSub > div .client li.on button {
  color: #0076DD;
  border-bottom: 4px solid #0076DD;
}
.findBox form .loginSub > div .contentsFind {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  padding-top: 12px;
}
.findBox form .loginSub > div .contentsFind div {
  width: 100%;
}
.findBox form .loginSub > div .contentsFind div ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
}
.findBox form .loginSub > div .contentsFind div ul li {
  width: 100%;
}
.findBox form .loginSub > div .contentsFind div ul li label {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #464C53;
}
@media (max-width: 1024px) {
  .findBox form .loginSub > div .contentsFind div ul li label {
    font-size: 1.6rem;
  }
}
.findBox form .loginSub > div .contentsFind div ul li label {
  display: block;
  margin-bottom: 4px;
}
.findBox form .loginSub > div .contentsFind div ul li input {
  width: 100%;
}
.findBox form .loginSub > div .contentsFind div ul li button.btn {
  width: 100%;
}
.findBox form .loginSub > div .contentsFind div ul li span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .findBox form .loginSub > div .contentsFind div ul li span {
    font-size: 1.4rem;
  }
}
.findBox form .loginSub > div .contentsFind div ul li span {
  margin-top: 12px;
  display: inline-block;
}
.findBox form .loginSub > div .contentsFind div ul li.send.last {
  margin-top: 4px;
}
.findBox form .loginSub > div .contentsFind div ul li.send ul {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
}
.findBox form .loginSub > div .contentsFind div ul li.send ul li {
  width: max-content;
}
.findBox form .loginSub > div .contentsFind div ul li.send ul li button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 40px;
  padding: 0 32px;
  gap: 4px;
  border-radius: 8px;
  border: 1px solid #B1B8BE;
  background: #ffffff;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .findBox form .loginSub > div .contentsFind div ul li.send ul li button {
    font-size: 1.6rem;
  }
}
.findBox form .loginSub > div .contentsFind div ul li.send ul li.on button {
  border: 1.4px solid #0C82E9;
  background: #F4F6FA;
}
.findBox form .loginSub > div .contentsFind div ul li.mail1 div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .findBox form .loginSub > div .contentsFind div ul li.mail1 div {
    font-size: 1.6rem;
  }
}
.findBox form .loginSub > div .contentsFind.contents_enterprise div {
  width: 100%;
}
.findBox form .loginSub > div .contentsFind.contents_enterprise div ul {
  width: 100%;
}
.findBox .notice {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  margin-right: auto;
}
.findBox .notice h4 {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .findBox .notice h4 {
    font-size: 2.2rem;
  }
}
.findBox .notice ul li {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .findBox .notice ul li {
    font-size: 1.6rem;
  }
}
.findBox .notice ul li:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 3px;
  height: 3px;
  background: #1e2124;
  border-radius: 9999px;
  margin-left: 10px;
  margin-right: 10px;
}

@media (max-width: 1024px) {
  .loginSub .loginWrap {
    gap: 1.6rem;
  }
  .loginSub .loginWrap .idLogin,
  .loginSub .loginWrap .certLogin,
  .loginSub .loginWrap .mobileLogin {
    height: stretch; /* 비표준 값: 미지원 브라우저는 무시하고 기본(522px) 유지 */
  }
  .loginSub .loginWrap .idLogin h4,
  .loginSub .loginWrap .certLogin h4,
  .loginSub .loginWrap .mobileLogin h4 {
    background-size: 5.6rem;
  }
  .loginSub .loginWrap .certLogin h4 {
    background: url("../images/fo/login/bg_login_title03.png") no-repeat center right -1.4rem;
    background-size: 5.6rem;
  }
  .loginSub .loginWrap .certLogin .loginDetail .btnCertLogin {
    text-align: center;
    word-wrap: break-word;
    white-space: nowrap;
  }
  .loginSub .loginWrap .certLogin .loginDetail > span {
    height: 8.4rem;
  }
  .loginSub .loginWrap .mobileLogin h4 {
    background: url("../images/fo/login/bg_login_title04.png") no-repeat center right -0.8rem;
    background-size: 5.6rem;
  }
  .loginSub .loginWrap .mobileLogin .loginDetail > span {
    height: 8.4rem;
  }
  /* 기본(전역) 스타일과 동일한 선언은 max-width 특성상 그대로 적용되므로 차이 나는 부분만 정의 */
  .joinSub .stepWrap {
    margin-bottom: 2.4rem;
  }
  .joinSub .joinBox.step03 .joinInfo table tr td div {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .loginSub .tabWrap {
    margin-bottom: 1.6rem;
  }
  .loginSub .tabWrap li {
    width: 50%;
  }
  .loginSub .loginWrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.8rem;
    margin-bottom: 1.6rem;
  }
  .loginSub .loginWrap .idLogin,
  .loginSub .loginWrap .certLogin,
  .loginSub .loginWrap .mobileLogin {
    display: flex;
    width: 100%;
    max-width: unset;
    height: fit-content;
    padding: 1.2rem;
    gap: 0.4rem;
    flex: 1 0 0;
    margin: 0 auto;
  }
  .loginSub .loginWrap .idLogin h4,
  .loginSub .loginWrap .certLogin h4,
  .loginSub .loginWrap .mobileLogin h4 {
    height: 4.2rem;
    display: flex;
    align-items: center;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
    color: #131416;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .loginSub .loginWrap .idLogin h4,
  .loginSub .loginWrap .certLogin h4,
  .loginSub .loginWrap .mobileLogin h4 {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .loginSub .loginWrap .idLogin .loginDetail,
  .loginSub .loginWrap .certLogin .loginDetail,
  .loginSub .loginWrap .mobileLogin .loginDetail {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.6rem;
  }
  .loginSub .loginWrap .idLogin .loginDetail > span,
  .loginSub .loginWrap .certLogin .loginDetail > span,
  .loginSub .loginWrap .mobileLogin .loginDetail > span {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    color: #1E2124;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .loginSub .loginWrap .idLogin .loginDetail > span,
  .loginSub .loginWrap .certLogin .loginDetail > span,
  .loginSub .loginWrap .mobileLogin .loginDetail > span {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .loginSub .loginWrap .idLogin .loginDetail > p,
  .loginSub .loginWrap .certLogin .loginDetail > p,
  .loginSub .loginWrap .mobileLogin .loginDetail > p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    color: #131416;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .loginSub .loginWrap .idLogin .loginDetail > p,
  .loginSub .loginWrap .certLogin .loginDetail > p,
  .loginSub .loginWrap .mobileLogin .loginDetail > p {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .loginSub .loginWrap .idLogin .loginInput {
    gap: 0.8rem;
  }
  .loginSub .loginWrap .idLogin .loginInput > div label {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: #464C53;
    margin-bottom: 0.4rem;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .loginSub .loginWrap .idLogin .loginInput > div label {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .loginSub .loginWrap .idLogin .lostInfo {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .loginSub .loginWrap .idLogin .lostInfo p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
    color: #131416;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .loginSub .loginWrap .idLogin .lostInfo p {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .loginSub .loginWrap .certLogin .loginDetail .btnCertLogin {
    height: 8rem;
    padding: 0 1.6rem;
    gap: 0.8rem;
    border-radius: 0.4rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 150%;
    color: #584322;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .loginSub .loginWrap .certLogin .loginDetail .btnCertLogin {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .loginSub .loginWrap .certLogin .loginDetail div {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.8rem;
  }
  .loginSub .loginWrap .certLogin .loginDetail div p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
    color: #131416;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .loginSub .loginWrap .certLogin .loginDetail div p {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .loginSub .loginWrap .mobileLogin .loginDetail span {
    height: unset;
  }
  .loginSub .loginWrap .mobileLogin .loginDetail .btnMobileLogin {
    height: 8rem;
    padding: 0 1.6rem;
    gap: 0.8rem;
    border-radius: 0.4rem;
  }
  .loginSub .joinBenefitWrap {
    padding-top: 0.8rem;
  }
  .loginSub .joinBenefitWrap .joinBenefitBox .tableBox {
    flex-wrap: wrap;
  }
  .loginSub .joinBenefitWrap .joinBenefitBox .tableBox table:last-child th {
    border-left: none;
  }
  .loginSub .joinBenefitWrap .joinBenefitBox .title {
    margin-bottom: 0.8rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
    color: #131416;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .loginSub .joinBenefitWrap .joinBenefitBox .title {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .loginSub .joinBenefitWrap .joinBenefitBox table {
    margin-top: 2rem;
  }
  .loginSub .joinBenefitWrap .joinBenefitBox.goLogin {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    border-bottom: 1px solid #CDD1D5;
  }
  .loginSub .joinBenefitWrap .joinBenefitBox.goLogin a {
    width: 100%;
  }
  .joinSub .stepWrap {
    margin-bottom: 1.6rem;
  }
  .joinSub .joinBox.step01 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
  }
  .joinSub .joinBox.step01 > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 1.2rem;
  }
  .joinSub .joinBox.step01 > div h4 {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
    color: #131416;
    height: 3rem;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .joinSub .joinBox.step01 > div h4 {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .joinSub .joinBox.step01 > div div span {
    height: unset;
  }
  .joinSub .joinBox.step01 > div div span br {
    display: none;
  }
  .joinSub .joinBox.step01 > div.joinGeneral > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 2.4rem;
    padding-top: 10rem;
    background-size: 30rem;
  }
  .joinSub .joinBox.step01 > div.joinCorp > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 2.4rem;
    padding-top: 10rem;
    background-size: 30rem;
  }
  .joinSub .joinBox.step02 {
    gap: 2rem;
  }
  .joinSub .joinBox.step02 .joinAgreeBox {
    padding: 2.4rem;
    gap: 1.6rem;
  }
  .joinSub .joinBox.step02Corp {
    gap: 1.6rem;
  }
  .joinSub .joinBox.step02Corp .joinInfo {
    padding: 1.2rem;
    gap: 0.8rem;
  }
  .joinSub .joinBox.step02Corp .joinInfo .essentialInfo {
    flex-direction: column;
    align-items: flex-start;
  }
  .joinSub .joinBox.step02Corp .joinInfo .essentialInfo h4 {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .joinSub .joinBox.step02Corp .joinInfo .essentialInfo h4 {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .joinSub .joinBox.step02Corp .joinInfo .essentialInfo div span {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .joinSub .joinBox.step02Corp .joinInfo .essentialInfo div span {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .joinSub .joinBox.step02Corp .joinInfo table tr th {
    display: flex;
    padding: 0.8rem 0 0 0;
    border-right: none;
    background: none;
  }
  .joinSub .joinBox.step02Corp .joinInfo table tr th div {
    display: flex;
  }
  .joinSub .joinBox.step02Corp .joinInfo table tr th label {
    text-align: left;
  }
  .joinSub .joinBox.step02Corp .joinInfo table tr td {
    display: inline-block;
    padding: 0.2rem 0 1.2rem 0;
  }
  .joinSub .joinBox.step02Corp .joinInfo table tr td div .num1 {
    width: 100%;
  }
  .joinSub .joinBox.step02Corp .joinInfo table tr td div .num2 {
    width: 100%;
  }
  .joinSub .joinBox.step02Corp .joinInfo table tr td div .num3 {
    width: 100%;
  }
  .joinSub .joinBox.step02Corp .joinInfo table tr td div .userId {
    width: 100%;
  }
  .joinSub .joinBox.step02Corp .joinInfo ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px;
  }
  .joinSub .joinBox.step02Corp .joinInfo ul li p {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .joinSub .joinBox.step02Corp .joinInfo ul li p {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .joinSub .joinBox.step02Corp .joinInfo ul li span {
    display: contents;
  }
  .joinSub .joinBox.step02Corp .joinInfo ul li span .color_re {
    padding-left: 0;
    color: #D63D4A;
  }
  .joinSub .joinBox.step02Corp .joinInfo button {
    margin-bottom: 1.2rem;
  }
  .joinSub .joinBox.step02Corp .btnBox {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    margin: 0 auto;
  }
  .joinSub .joinBox.step03 {
    gap: 1.6rem;
  }
  .joinSub .joinBox.step03 .joinInfo {
    padding: 1.2rem;
    gap: 0.8rem;
  }
  .joinSub .joinBox.step03 .joinInfo .essentialInfo {
    flex-direction: column;
    align-items: flex-start;
  }
  .joinSub .joinBox.step03 .joinInfo .essentialInfo h4 {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .joinSub .joinBox.step03 .joinInfo .essentialInfo h4 {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .joinSub .joinBox.step03 .joinInfo .essentialInfo div span {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    color: #464C53;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .joinSub .joinBox.step03 .joinInfo .essentialInfo div span {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .joinSub .joinBox.step03 .joinInfo table col {
    display: none;
  }
  .joinSub .joinBox.step03 .joinInfo table tr:last-child {
    border-bottom: none;
  }
  .joinSub .joinBox.step03 .joinInfo table tr:last-child td {
    padding-bottom: 0;
  }
  .joinSub .joinBox.step03 .joinInfo table tr th {
    display: flex;
    padding: 0.8rem 0 0 0;
    border-right: none;
    background: none;
  }
  .joinSub .joinBox.step03 .joinInfo table tr th div {
    display: flex;
  }
  .joinSub .joinBox.step03 .joinInfo table tr th label {
    text-align: left;
  }
  .joinSub .joinBox.step03 .joinInfo table tr td {
    display: inline-block;
    padding: 0.2rem 0 1.2rem 0;
  }
  .joinSub .joinBox.step03 .joinInfo table tr td div.emailBox {
    flex-wrap: wrap;
  }
  .joinSub .joinBox.step03 .joinInfo table tr td div.emailBox input.email {
    width: 100%;
    flex: 1;
  }
  .joinSub .joinBox.step03 .joinInfo table tr td div.emailBox select {
    width: auto;
    flex-basis: 100%;
  }
  .joinSub .joinBox.step03 .joinInfo table tr td div .cusNum,
  .joinSub .joinBox.step03 .joinInfo table tr td div .pw,
  .joinSub .joinBox.step03 .joinInfo table tr td div .userId {
    width: 100%;
  }
  .joinSub .joinBox.step03 .joinInfo table tr td div.passwordInput {
    width: 100%;
  }
  .joinSub .joinBox.step03 .joinInfo table tr td div.passwordInput input {
    width: 100%;
  }
  .joinSub .joinBox.step03 .joinInfo table tr td div.passwordInput .pw {
    padding-right: 5.6rem;
  }
  .joinSub .joinBox.step03 .joinInfo table tr td div.passwordConfirmInput {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    gap: 0.8rem;
  }
  .joinSub .joinBox.step03 .joinInfo table tr td div.passwordConfirmInput .passwordInput {
    flex: 1 1 auto;
  }
  .joinSub .joinBox.step03 .joinInfo table tr td div.passwordConfirmInput .passwordInput input {
    width: 100%;
  }
  .joinSub .joinBox.step03 .joinInfo table tr td div.passwordConfirmInput #pwdConfirmButton {
    flex: none;
  }
  .joinSub .joinBox.step03 .joinInfo table tr td div .passwordToggle {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
  }
  .joinSub .joinBox.step03 .joinInfo table tr td div .CsNmBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .joinSub .joinBox.step03 .joinInfo table tr td div .CsNmBox .cusNum,
  .joinSub .joinBox.step03 .joinInfo table tr td div .CsNmBox .pw {
    width: 50%;
  }
  .joinSub .joinBox.step03 .joinInfo table tr td div .tel {
    width: 100%;
  }
  .joinSub .joinBox.step03 .joinInfo table tr td div .userId {
    width: 100%;
  }
  .joinSub .joinBox.step03 .joinInfo .checkBox.numAgree .checkbox-label {
    align-items: flex-start;
  }
  .joinSub .joinBox.step03 .joinInfo .checkBox.numAgree .checkbox-label:before {
    margin-top: 3px;
  }
  .joinSub .joinBox.step03 .joinInfo .checkBox label .description {
    color: #6D7882;
  }
  .joinSub .joinBox.step03 .joinInfo .keeper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
  }
  .joinSub .joinBox.step03 .joinInfo .keeper span {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .joinSub .joinBox.step03 .joinInfo .keeper span {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .joinSub .joinBox.step03 .joinInfo .keeper span.essential {
    color: #D63D4A;
  }
  .joinSub .joinBox.step03 .joinInfo .keeper div {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.8rem;
  }
  .joinSub .joinBox.step04 .joinDone {
    height: max-content;
    padding: 1.2rem;
    gap: 0.8rem;
  }
  .joinSub .joinBox.step04 .joinDone h4 {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .joinSub .joinBox.step04 .joinDone h4 {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .joinSub .joinBox.step04 .joinDone div {
    height: fit-content;
    background: url(../images/fo/login/bg_join04.png) no-repeat top center;
    background-size: 20%;
  }
  .joinSub .joinBox.step04 .customerNumAdd {
    height: fit-content;
    padding: 1.2rem;
    gap: 0.8rem;
    text-align: center;
  }
  .findBox {
    gap: 1.6rem;
  }
  .findBox form {
    width: 100%;
  }
  .findBox form .loginSub {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.8rem;
  }
  .findBox form .loginSub > div {
    width: 100%;
    max-width: 100%;
    padding: 1.2rem;
  }
  .findBox form .loginSub > div h4 {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
    margin-bottom: 0.8rem;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .findBox form .loginSub > div h4 {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .findBox form .loginSub > div .client li button {
    height: 4.2rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .findBox form .loginSub > div .client li button {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .findBox form .loginSub > div .contentsFind {
    padding-top: 2rem;
  }
  .findBox form .loginSub > div .contentsFind div ul li .emailFindBox {
    flex-wrap: wrap;
  }
  .findBox form .loginSub > div .contentsFind div ul li .emailFindBox input {
    flex: 1;
    min-width: 0;
  }
  .findBox form .loginSub > div .contentsFind div ul li .emailFindBox select {
    flex-basis: 100%;
  }
  .findBox form .loginSub > div .contentsFind.contents_enterprise div {
    width: 100%;
  }
  .findBox form .loginSub > div .contentsFind.contents_enterprise div ul {
    width: 100%;
  }
  .findBox form .loginSub > div .contentsFind.contents_enterprise div ul li.name {
    margin-bottom: 16px;
  }
  .findBox .notice {
    padding-top: 0.8rem;
    gap: 0.4rem;
  }
  .findBox .notice h4 {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
    margin-bottom: 0.4rem;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .findBox .notice h4 {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .findBox .notice ul li {
    text-indent: -2.4rem;
    margin-left: 2.4rem;
  }
}
@media (max-width: 403px) {
  /* 태블릿 블록과 동일한 선언은 max-width 특성상 그대로 적용되므로 차이 나는 부분만 정의 */
  .loginSub .joinBenefitWrap .joinBenefitBox .tableBox {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .loginSub .joinBenefitWrap .joinBenefitBox .tableBox:last-child th {
    border-left: none;
  }
  .joinSub .joinBox.step01 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .joinSub .joinBox.step01 > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .joinSub .joinBox.step01 > div.joinGeneral > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: unset;
    padding-top: 7rem;
    background: url("../images/fo/login/bg_join01.png") no-repeat center -2.5rem;
    background-size: 30rem;
  }
  .joinSub .joinBox.step01 > div.joinCorp > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: unset;
    padding-top: 7rem;
    background: url("../images/fo/login/bg_joinCorp01.png") no-repeat center -1.2rem;
    background-size: 24rem;
  }
  .joinSub .joinBox.step01 > div h4 {
    height: unset;
  }
  .joinSub .joinBox.step01 > div div span {
    height: unset;
  }
  .joinSub .joinBox.step02 .joinAgreeBox {
    padding: 1.2rem;
    gap: 0.8rem;
  }
  .joinSub .joinBox.step02 .joinAgreeBox h3 {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
    color: #131416;
  }
}
@media (max-width: 403px) and (max-width: 1024px) {
  .joinSub .joinBox.step02 .joinAgreeBox h3 {
    font-size: 1.8rem;
  }
}
@media (max-width: 403px) {
  .joinSub .joinBox.step02 .joinAgreeBox .agreeBox {
    width: 100%;
    height: 15.4rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 403px) and (max-width: 1024px) {
  .joinSub .joinBox.step02 .joinAgreeBox .agreeBox {
    font-size: 1.4rem;
  }
}
@media (max-width: 403px) {
  .joinSub .joinBox.step02 .joinAgreeBox .agreeCheckBox .checkBox .description2 {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 403px) and (max-width: 1024px) {
  .joinSub .joinBox.step02 .joinAgreeBox .agreeCheckBox .checkBox .description2 {
    font-size: 1.4rem;
  }
}
@media (max-width: 403px) {
  .joinSub .joinBox.step02Corp .joinInfo ul li br {
    display: none;
  }
  .joinSub .joinBox.step02Corp .joinInfo ul li span {
    display: block;
  }
  .joinSub .joinBox.step03 .joinInfo table tr td div.telBox {
    flex-wrap: wrap;
  }
  .joinSub .joinBox.step03 .joinInfo table tr td div.telBox .tel {
    flex: 1;
    min-width: 0;
  }
  .joinSub .joinBox.step03 .joinInfo table tr td div.telBox button {
    width: 100%;
    flex-wrap: wrap;
  }
  .joinSub .joinBox.step04 .joinDone div {
    background: url(../images/fo/login/bg_join04.png) no-repeat top center;
    background-size: 8.7rem;
  }
}
@media (max-width: 403px) {
  /* 정보찾기(.findBox)는 태블릿 블록과 동일하여 별도 재정의 불필요 */
}
.myPageSub {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
}
.myPageSub.mainMypage .box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 20px 20px 20px 20px;
  gap: 16px;
  flex: 1 0 0;
  margin: 0 auto;
  box-shadow: 0 0 2px 0 var(--alpha-shadow1, rgba(0, 0, 0, 0.1)), 0 4px 8px 0 var(--alpha-shadow2, rgba(0, 0, 0, 0.13));
}
.myPageSub.mainMypage .box.selected {
  border: 2px dashed #0076DD;
}
.myPageSub.mainMypage .box p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .box p {
    font-size: 2.2rem;
  }
}
.myPageSub.mainMypage .box div label {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #464c53;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .box div label {
    font-size: 1.6rem;
  }
}
.myPageSub.mainMypage .box div label.checkbox-label {
  margin: 0 auto;
  justify-content: center;
}
.myPageSub.mainMypage .box div input {
  width: 100%;
  margin-bottom: 8px;
}
.myPageSub.mainMypage .box.myInfo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-shadow: none;
  flex-wrap: wrap;
}
.myPageSub.mainMypage .box.myInfo.mp {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.myPageSub.mainMypage .box.myInfo .infoBox {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 32px;
  padding-left: 48px;
  background: url("../images/fo/mypage/mypage.svg") no-repeat left top;
}
.myPageSub.mainMypage .box.myInfo .infoBox .cusName {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
}
.myPageSub.mainMypage .box.myInfo .infoBox .cusName p {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .box.myInfo .infoBox .cusName p {
    font-size: 1.8rem;
  }
}
.myPageSub.mainMypage .box.myInfo .infoBox .cusName p span {
  color: #0076DD;
  margin-right: 4px;
}
.myPageSub.mainMypage .box.myInfo .infoBox .cusName.sub:after {
  content: "";
  position: absolute;
  right: -16px;
  top: 3px;
  width: 1px;
  height: 24px;
  background: #B1B8BE;
}
.myPageSub.mainMypage .box.myInfo .infoBox .office {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding-top: 1px;
}
.myPageSub.mainMypage .box.myInfo .infoBox .office p,
.myPageSub.mainMypage .box.myInfo .infoBox .office span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .box.myInfo .infoBox .office p,
  .myPageSub.mainMypage .box.myInfo .infoBox .office span {
    font-size: 1.6rem;
  }
}
.myPageSub.mainMypage .box.myInfo .infoBtn {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu {
  gap: 8px;
}
.myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu div > div input {
  width: 123px;
  margin-bottom: 0;
}
.myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu div > div p label {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu div > div p label {
    font-size: 1.6rem;
  }
}
.myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu div > div .userName {
  margin-right: 16px;
}
.myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu div > div.myName {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  min-width: 2rem;
}
.myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu div > div.myName span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu div > div.myName span {
    font-size: 1.6rem;
  }
}
.myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu div > div.myName p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu div > div.myName p {
    font-size: 1.6rem;
  }
}
.myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu div > div.myName p {
  height: 40px;
  line-height: 38px;
  padding: 0 10px;
  color: #131416;
  border-radius: 8px;
  border: 1px solid #58616A;
  background: #ffffff;
  flex: unset;
  overflow: hidden;
}
.myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu div.dateWrap span.label {
  display: none;
}
.myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu div.dateWrap button span {
  display: none;
}
.myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu div.dateWrap button span.icon {
  display: flex;
}
.myPageSub.mainMypage .box.myInfo .infoBtn > div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.myPageSub.mainMypage .box.myInfo .infoBtn > div.userInfo {
  position: relative;
  margin-right: 12px;
}
.myPageSub.mainMypage .box.myInfo .infoBtn > div.userInfo > div {
  flex-wrap: wrap;
}
.myPageSub.mainMypage .box.myInfo .infoBtn > div button {
  width: max-content;
}
.myPageSub.mainMypage .box.myInfo .infoBtn > div .cusNumBox {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}
.myPageSub.mainMypage .box.myInfo .infoBtn > div .userName {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin-right: 0;
}
.myPageSub.mainMypage .box.myInfo .infoBtn > div .userName p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn > div .userName p {
    font-size: 1.6rem;
  }
}
.myPageSub.mainMypage .box.myInfo .infoBtn > div .userName p {
  flex: none;
}
.myPageSub.mainMypage .box.myInfo .infoBtn > div .userName p.myName {
  height: 40px;
  line-height: 38px;
  padding: 0 10px;
  color: #131416;
  border-radius: 8px;
  border: 1px solid #58616A;
  background: #ffffff;
  flex: unset;
  overflow: hidden;
}
.myPageSub.mainMypage .box.myInfo .infoBtn > div .userName:after {
  content: "";
  position: absolute;
  right: -12px;
  top: 9px;
  width: 1px;
  height: 24px;
  background: #B1B8BE;
  display: none;
}
.myPageSub.mainMypage .box.myInfo .infoBtn > div .office {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding-top: 1px;
}
.myPageSub.mainMypage .box.myInfo .infoBtn > div .office p,
.myPageSub.mainMypage .box.myInfo .infoBtn > div .office span,
.myPageSub.mainMypage .box.myInfo .infoBtn > div .office label {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn > div .office p,
  .myPageSub.mainMypage .box.myInfo .infoBtn > div .office span,
  .myPageSub.mainMypage .box.myInfo .infoBtn > div .office label {
    font-size: 1.6rem;
  }
}
.myPageSub.mainMypage .box.myInfo .infoBtn > div .office p,
.myPageSub.mainMypage .box.myInfo .infoBtn > div .office span,
.myPageSub.mainMypage .box.myInfo .infoBtn > div .office label {
  flex: none;
}
.myPageSub.mainMypage .box.myInfo .infoBtn > div .userBtn {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
}
.myPageSub.mainMypage .myPageBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
}
.myPageSub.mainMypage .myPageBox .boxWrap {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox {
  flex-wrap: wrap;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox.mainUse .box:nth-child(6), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.mainUse .box:nth-child(7) {
  width: calc((100% - 20px) / 2);
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box {
  flex: unset;
  margin: unset;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.moving {
  border: 2px dashed #0076DD;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:first-child, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(2), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(3) {
  width: calc((100% - 40px) / 3);
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(4), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(5) {
  width: calc((100% - 20px) / 2);
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(6).myMinwon {
  width: 100%;
  flex: none;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(7), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(8) {
  width: calc((100% - 20px) / 2);
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.statementBox .statementInfo p {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.statementBox .statementInfo p {
    font-size: 2.6rem;
  }
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.statementBox .statementInfo p span {
  color: #0076DD;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.statementBox .statement {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.statementBox .statement .statementState {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.statementBox .statement .statementState .cusNumBox {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.statementBox .statement .statementState .cusNumBox label {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.statementBox .statement .statementState .cusNumBox label {
    font-size: 1.6rem;
  }
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.statementBox .statement .statementState .amount {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 15px 0;
  border-top: 1px solid #CDD1D5;
  border-bottom: 1px solid #CDD1D5;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.statementBox .statement .statementState .amount div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.statementBox .statement .statementState .amount div p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.statementBox .statement .statementState .amount div p {
    font-size: 2.2rem;
  }
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.statementBox .statement .statementState .amount div p.result {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  color: #0076DD;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.statementBox .statement .statementState .amount div p.result {
    font-size: 1.6rem;
  }
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.statementBox .statement .statementState .amount div .badgeWrap {
  margin-top: 0;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.statementBox .statement .statementState .amount strong {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 150%;
  color: #0076DD;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.statementBox .statement .statementState .amount strong {
    font-size: 3.2rem;
  }
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.statementBox .statement .statementState p.summary {
  word-break: break-all;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.statementBox .statement .statementState p.summary {
    font-size: 1.4rem;
  }
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.statementBox .statement .statementState p.summary strong {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #0DA86C;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.statementBox .statement .statementState p.summary strong {
    font-size: 1.4rem;
  }
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.paymentStatus .payment {
  width: 100%;
  height: calc(100% - 36px);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.paymentStatus .payment a {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
  width: calc((100% - 8px) / 2);
  height: calc((100% - 8px) / 2);
  padding: 16px 0 15px 30px;
  border-radius: 12px;
  border: 1px solid #BAC3D5;
  background: #FFFFFF;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.paymentStatus .payment a p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.paymentStatus .payment a p {
    font-size: 1.6rem;
  }
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.paymentStatus .payment a p.result {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.paymentStatus .payment a p.result {
    font-size: 2.4rem;
  }
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.paymentStatus .payment a p.result.emphasis {
  color: #0076DD;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.complaint .complaintBox {
  width: 100%;
  height: calc(100% - 36px);
  min-height: 200px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  overflow: hidden;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.complaint .complaintBox a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc((100% - 8px) / 2);
  height: calc((100% - 8px) / 2);
  border-radius: 12px;
  border: 1px solid #BAC3D5;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.complaint .complaintBox a > span {
  width: 44px;
  height: 44px;
  display: inline-block;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.complaint .complaintBox a > span.bill {
  background: url("../images/fo/mypage/icon_tab_mn02.svg") no-repeat center center;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.complaint .complaintBox a > span.move {
  background: url("../images/fo/mypage/icon_tab_mn03.svg") no-repeat center center;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.complaint .complaintBox a > span.account {
  background: url("../images/fo/mypage/icon_tab_mn05.svg") no-repeat center center;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.complaint .complaintBox a > span.card {
  background: url("../images/fo/mypage/icon_tab_mn07.svg") no-repeat center center;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.complaint .complaintBox a p {
  justify-content: center;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.complaint .complaintBox a p {
    font-size: 1.6rem;
  }
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.complaint .complaintBox .noData {
  text-align: center;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter:first-child .remoteMeter, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter:nth-child(2) .remoteMeter, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter:nth-child(3) .remoteMeter {
  height: max-content;
  flex-direction: column;
  gap: 0;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter:first-child .remoteMeter .remoteMeterBox > div, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter:nth-child(2) .remoteMeter .remoteMeterBox > div, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter:nth-child(3) .remoteMeter .remoteMeterBox > div {
  width: 120px;
  height: 120px;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter:first-child .remoteMeter .remoteMeterBox > div .inner, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter:nth-child(2) .remoteMeter .remoteMeterBox > div .inner, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter:nth-child(3) .remoteMeter .remoteMeterBox > div .inner {
  width: 100px;
  height: 100px;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter:first-child .remoteMeter .updateTimeBox, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter:nth-child(2) .remoteMeter .updateTimeBox, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter:nth-child(3) .remoteMeter .updateTimeBox {
  gap: 8px;
  padding-left: 24px;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter:first-child .remoteMeter .updateTimeBox.noPaddingLeft, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter:nth-child(2) .remoteMeter .updateTimeBox.noPaddingLeft, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter:nth-child(3) .remoteMeter .updateTimeBox.noPaddingLeft {
  padding-left: 0;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter:first-child .remoteMeter .updateTimeBox .updateTime, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter:nth-child(2) .remoteMeter .updateTimeBox .updateTime, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter:nth-child(3) .remoteMeter .updateTimeBox .updateTime {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter:first-child .remoteMeter .updateTimeBox .updateTime, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter:nth-child(2) .remoteMeter .updateTimeBox .updateTime, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter:nth-child(3) .remoteMeter .updateTimeBox .updateTime {
    font-size: 1.4rem;
  }
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter:first-child .remoteMeter .updateTimeBox .updateTime, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter:nth-child(2) .remoteMeter .updateTimeBox .updateTime, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter:nth-child(3) .remoteMeter .updateTimeBox .updateTime {
  margin-bottom: 10px;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
  margin: 0 auto;
  text-align: center;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter .remoteMeterBox {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter .remoteMeterBox > div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
  aspect-ratio: 1/1;
  border-radius: 999px;
  overflow: hidden;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter .remoteMeterBox > div .inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 130px;
  height: 130px;
  aspect-ratio: 1/1;
  background: #fff;
  border-radius: 999px;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter .remoteMeterBox > div .inner span {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter .remoteMeterBox > div .inner span {
    font-size: 1.6rem;
  }
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter .remoteMeterBox > div .inner strong {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter .remoteMeterBox > div .inner strong {
    font-size: 2.2rem;
  }
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter .remoteMeterBox > div.risk {
  background: linear-gradient(222deg, #267337 0.46%, #34A24C 35.18%, #97E4A4 105.67%);
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter .remoteMeterBox > div.risk strong.safe {
  color: #0DA86C;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter .remoteMeterBox > div.risk strong.warning {
  color: #8A5C00;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter .remoteMeterBox > div.risk strong.danger {
  color: #DE3412;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter .remoteMeterBox > div.usage {
  background: linear-gradient(222deg, #0C82E9 0.46%, #2E8EE3 34.93%, #5BBBE6 105.67%);
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter .remoteMeterBox > div.usage strong {
  color: #0076DD;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter .updateTimeBox {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding-left: 24px;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter .updateTimeBox.noPaddingLeft {
  padding-left: 0;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter .updateTimeBox .updateTime {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter .updateTimeBox .updateTime {
    font-size: 1.4rem;
  }
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter .updateTimeBox .updateTime {
  margin-bottom: 10px;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter .updateTimeBox .btnBox {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary:nth-child(1) .selfTest .monthState .monthBox p, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary:nth-child(2) .selfTest .monthState .monthBox p, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary:nth-child(3) .selfTest .monthState .monthBox p {
  flex-direction: column;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .title div {
  width: 100%;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest {
  width: 100%;
  height: calc(100% - 36px);
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState .monthBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState .monthBox p {
  width: calc(16.6% - 7px);
  height: calc(50% - 4px);
  border-radius: 10px;
  border: 1px solid #cdd1d5;
  gap: 4px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState .monthBox p {
    font-size: 1.6rem;
  }
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState .monthBox p {
  flex-wrap: wrap;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState .label {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState .label p {
  gap: 8px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState .label p {
    font-size: 1.4rem;
  }
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState .label p span.state {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState .label p span.state--input {
  background: #0C82E9;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState .label p span.state--empty {
  background: #CDD1D5;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState .label p span.state--none {
  border: 1px solid #B1B8BE;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState .label p span.state--scheduled {
  background: #0DA86C;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState p.state span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState p.state--input {
  border: 1px solid #0C82E9;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState p.state--input span {
  background: #0C82E9;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState p.state--empty {
  border: 1px solid #CDD1D5;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState p.state--empty span {
  background: #CDD1D5;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState p.state--none {
  border: 1px solid #CDD1D5;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState p.state--none span {
  border: 1px solid #B1B8BE;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState p.state--scheduled {
  border: 1px solid #0DA86C;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState p.state--scheduled span {
  background: #0DA86C;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.reduceDetail .pagination {
  gap: 4px;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.reduceDetail .pagination .pageLinks {
  gap: 4px;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.reduceDetail .pagination .pageLinks a {
  width: 36px;
  height: 36px;
  font-size: 14px;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.reduceDetail .pagination .pageNavi {
  height: 36px;
  font-size: 14px;
}
.myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.reduceDetail .title div {
  width: 100%;
}
@media (min-width: 1024px) and (max-width: 1358px) {
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:first-child, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(2), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(3), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(4) {
    width: calc((100% - 20px) / 2);
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(5), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(6) {
    width: 100%;
    flex: none;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(7), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(8) {
    width: calc((100% - 20px) / 2);
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(3) .remoteMeter, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(4) .remoteMeter, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(7) .remoteMeter, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(8) .remoteMeter {
    flex-direction: column;
    gap: 1rem;
    height: max-content;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(3) .remoteMeter .remoteMeterBox, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(4) .remoteMeter .remoteMeterBox, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(7) .remoteMeter .remoteMeterBox, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(8) .remoteMeter .remoteMeterBox {
    width: 100%;
    justify-content: space-around;
    gap: 0;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(3) .remoteMeter .remoteMeterBox > div, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(4) .remoteMeter .remoteMeterBox > div, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(7) .remoteMeter .remoteMeterBox > div, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(8) .remoteMeter .remoteMeterBox > div {
    width: 130px;
    height: 130px;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(3) .remoteMeter .remoteMeterBox > div .inner, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(4) .remoteMeter .remoteMeterBox > div .inner, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(7) .remoteMeter .remoteMeterBox > div .inner, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(8) .remoteMeter .remoteMeterBox > div .inner {
    width: 110px;
    height: 110px;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(3) .remoteMeter .updateTimeBox, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(4) .remoteMeter .updateTimeBox, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(7) .remoteMeter .updateTimeBox, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(8) .remoteMeter .updateTimeBox {
    gap: 0.4rem;
    padding-left: 0;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(3) .remoteMeter .updateTimeBox .btnBox, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(4) .remoteMeter .updateTimeBox .btnBox, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(7) .remoteMeter .updateTimeBox .btnBox, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(8) .remoteMeter .updateTimeBox .btnBox {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(3) .remoteMeter .updateTimeBox .btnBox button, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(4) .remoteMeter .updateTimeBox .btnBox button, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(7) .remoteMeter .updateTimeBox .btnBox button, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(8) .remoteMeter .updateTimeBox .btnBox button {
    font-size: 1.3rem;
    width: auto;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(1) .selfTest .monthState .monthBox p, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(2) .selfTest .monthState .monthBox p, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.myPageArisu .box:nth-child(3) .selfTest .monthState .monthBox p {
    flex-direction: row;
  }
}
.myPageSub.mainMypage .myPageBox .boxWrap .box .title {
  height: 36px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.myPageSub.mainMypage .myPageBox .boxWrap .box .title div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.myPageSub.mainMypage .myPageBox .boxWrap .box .title div p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .myPageBox .boxWrap .box .title div p {
    font-size: 1.8rem;
  }
}
.myPageSub.mainMypage .myPageBox .boxWrap .box .title div p {
  flex: none;
}
.myPageSub.mainMypage .myPageBox .boxWrap .box .title div .titleBoxWrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
}
.myPageSub.mainMypage .myPageBox .boxWrap .box .title div .titleBoxWrap button {
  padding: 0 10px;
  border: 1px solid #C5CDE4;
  background: #F1F5FF;
}
.myPageSub.mainMypage .myPageBox .boxWrap .box .title div.btnBox {
  margin-left: auto;
  justify-content: flex-end;
  gap: 12px;
}
.myPageSub.mainMypage .myPageBox .boxWrap .box .title div.btnBox select {
  display: block;
}
.myPageSub.mainMypage .myPageBox .boxWrap .box .title .selfNumBox {
  gap: 8px;
}
.myPageSub.mainMypage .myPageBox .boxWrap .box .title > button {
  width: 32px;
  height: 32px;
}
.myPageSub.mainMypage .myPageBox .boxWrap .box .contTable {
  table-layout: fixed;
  width: 100%;
  min-width: 51.2rem;
}
.myPageSub.mainMypage .myPageBox .boxWrap .box .contTable td {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .myPageBox .boxWrap .box .contTable td {
    font-size: 1.4rem;
  }
}
.myPageSub.mainMypage .myPageBox .boxWrap .box .contTable td {
  word-wrap: break-word;
}
.myPageSub.mainMypage .myPageBox .boxWrap .box .contTable td.notice {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .myPageBox .boxWrap .box .contTable td.notice {
    font-size: 1.6rem;
  }
}
.myPageSub.mainMypage .myPageBox .boxWrap .box .contTable td.notice {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.myPageSub.mainMypage .myPageBox .boxWrap .box .contTable td button {
  margin: 0 auto;
}
.myPageSub.mainMypage .myPageBox .boxWrap .box .contTable td div {
  word-break: keep-all;
  word-wrap: break-word;
}
.myPageSub.subPage .box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 20px 20px 20px 20px;
  gap: 12px;
  flex: 1 0 0;
  margin: 0 auto;
}
.myPageSub.subPage .box p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .myPageSub.subPage .box p {
    font-size: 2.2rem;
  }
}
.myPageSub.subPage .box div label {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #464c53;
}
@media (max-width: 1024px) {
  .myPageSub.subPage .box div label {
    font-size: 1.6rem;
  }
}
.myPageSub.subPage .box div label.checkbox-label {
  margin: 0 auto;
  justify-content: center;
}
.myPageSub.subPage .box div input {
  width: 100%;
  margin-bottom: 8px;
}
.myPageSub.subPage .box div .passwordInput {
  position: relative;
  width: 100%;
  margin-bottom: 8px;
}
.myPageSub.subPage .box div .passwordInput input {
  padding-right: 56px;
  margin-bottom: 0;
}
.myPageSub.subPage .box div .passwordToggle {
  position: absolute;
  top: 50%;
  right: 8px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 1000px;
  background: transparent;
  transform: translateY(-50%);
}
.myPageSub.subPage .box div .passwordToggle:hover, .myPageSub.subPage .box div .passwordToggle:focus-visible {
  background: #F4F5F6;
}
.myPageSub.subPage .box div .passwordToggle .icon {
  flex: none;
}
.myPageSub.subPage .box div .passwordConfirmInput {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  gap: 8px;
}
.myPageSub.subPage .box div .passwordConfirmInput .passwordInput {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}
.myPageSub.subPage .box div .passwordConfirmInput .passwordInput input {
  width: 100%;
}
.myPageSub.subPage .box div .passwordConfirmInput #pwdConfirmBtn {
  width: auto;
  flex: none;
}
.myPageSub.subPage .box.check {
  max-width: 460px;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.13);
}
.myPageSub.subPage .box.check > div {
  width: 100%;
}
.myPageSub.subPage .box.check > div button {
  width: 100%;
}
.myPageSub.subPage .box.check > div .passwordInput {
  margin-bottom: 0.8rem;
}
.myPageSub.subPage .box.check > div .passwordInput input {
  padding-right: 5.6rem;
  margin-bottom: 0;
}
.myPageSub.subPage .box.check > div .passwordToggle {
  width: 4rem;
  min-width: 4rem;
  height: 4rem;
}
.myPageSub.subPage .box.check > div .passwordConfirmInput {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0.8rem;
}
.myPageSub.subPage .box.check > div .passwordConfirmInput .passwordInput {
  margin-bottom: 0;
}
.myPageSub.subPage .box.check > div .passwordConfirmInput #pwdConfirmBtn {
  width: auto;
  flex: none;
}
.myPageSub.subPage .box.secession {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.myPageSub.subPage .box.secession .secessionAgreeWrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
  margin-left: 48px;
}
@media (max-width: 1024px) {
  .myPageSub.subPage .box.secession .secessionAgreeWrap {
    width: 90%;
    margin: 0 auto;
  }
}
.myPageSub.subPage .box.secession .secessionAgreeWrap .secessionAgree .checkbox-label {
  align-items: flex-start;
  justify-content: flex-start;
  margin: 0;
}
.myPageSub.subPage .box.secession .secessionAgreeWrap .secessionAgree .checkbox-label:before {
  margin-top: 3px;
}
.myPageSub.subPage .box.secession label {
  margin-bottom: 0;
}
.myPageSub.subPage .box.secession .visualImage {
  width: 172px;
  height: 143px;
  background: url("../images/fo/mypage/bg_secession.png") no-repeat center;
}
.myPageSub.subPage .box.ogcrMng {
  gap: 16px;
}
.myPageSub.subPage .box.ogcrMng .stepWrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.myPageSub.subPage .box.ogcrMng .stepWrap ul {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.myPageSub.subPage .box.ogcrMng .stepWrap ul:last-child {
  margin-bottom: 0;
}
.myPageSub.subPage .box.ogcrMng .stepWrap ul li {
  width: calc(33% - (16px) - 20px);
  border-radius: 8px;
  border: 1px solid #B1B8BE;
  background: #ffffff;
  overflow: hidden;
}
.myPageSub.subPage .box.ogcrMng .stepWrap ul li:nth-child(even) {
  width: 24px;
  height: 24px;
  padding: 4px;
  border: none;
  border-radius: 12px;
  background: #F4F5F6;
}
.myPageSub.subPage .box.ogcrMng .stepWrap ul li .step {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 8px;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #0076DD;
}
@media (max-width: 1024px) {
  .myPageSub.subPage .box.ogcrMng .stepWrap ul li .step {
    font-size: 1.6rem;
  }
}
.myPageSub.subPage .box.ogcrMng .stepWrap ul li .step {
  text-align: center;
  background: #ECF2FE;
}
.myPageSub.subPage .box.ogcrMng .stepWrap ul li div {
  height: 172px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 8px 0 16px;
}
.myPageSub.subPage .box.ogcrMng .stepWrap ul li div p {
  text-align: center;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .myPageSub.subPage .box.ogcrMng .stepWrap ul li div p {
    font-size: 1.6rem;
  }
}
.myPageSub.subPage .box.ogcrMng .stepWrap ul li div p {
  margin: 0 auto;
}
.myPageSub.subPage .box.ogcrMng .stepWrap ul li div.step01 {
  background: url("../images/fo/mypage/step01.png") no-repeat center 10px;
  background-size: auto;
}
.myPageSub.subPage .box.ogcrMng .stepWrap ul li div.step02 {
  background: url("../images/fo/mypage/step02.png") no-repeat center 10px;
  background-size: auto;
}
.myPageSub.subPage .box.ogcrMng .stepWrap ul li div.step03 {
  background: url("../images/fo/mypage/step03.png") no-repeat center 10px;
  background-size: auto;
}
.myPageSub.subPage .box.ogcrMng .stepWrap ul li div.step04 {
  background: url("../images/fo/mypage/step04.png") no-repeat center 10px;
  background-size: auto;
}
.myPageSub.subPage .box.ogcrMng .stepWrap ul li div.step05 {
  background: url("../images/fo/mypage/step05.png") no-repeat center 10px;
  background-size: auto;
}
.myPageSub.subPage .box.ogcrMng button {
  margin: 0 auto;
}
.myPageSub.subPage .box.ogcrMng .ogcrDesc {
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}
.myPageSub.subPage .box.simpleAuth {
  gap: 16px;
}
.myPageSub.subPage .box.simpleAuth .stepWrap ul {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px 0;
}
.myPageSub.subPage .box.simpleAuth .stepWrap ul li {
  width: 33%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.myPageSub.subPage .box.simpleAuth .stepWrap ul li img {
  width: 50%;
}
.myPageSub.subPage .box.simpleAuth .stepWrap ul li .step {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.myPageSub.subPage .box.simpleAuth .stepWrap ul li .step .num {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 1000px;
  border: 1px solid #0076DD;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: #0076DD;
}
@media (max-width: 1024px) {
  .myPageSub.subPage .box.simpleAuth .stepWrap ul li .step .num {
    font-size: 1.6rem;
  }
}
.myPageSub.subPage .box.simpleAuth .stepWrap ul li .step div {
  text-align: center;
}
.myPageSub.subPage .box.simpleAuth .stepWrap ul li .step div strong {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .myPageSub.subPage .box.simpleAuth .stepWrap ul li .step div strong {
    font-size: 1.8rem;
  }
}
.myPageSub.subPage .box.simpleAuth .stepWrap ul li .step div p {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .myPageSub.subPage .box.simpleAuth .stepWrap ul li .step div p {
    font-size: 1.6rem;
  }
}
.myPageSub.subPage .box.simpleAuth button {
  margin: 0 auto;
}
.myPageSub.subPage .box.info-box {
  padding-left: 130px;
  flex: 0 0 auto;
}
.myPageSub.subPage .box.mkeyList .listTop {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.myPageSub.subPage .box.mkeyList .contTable tbody tr.is-search-excluded td:not(:first-child):not(:last-child) {
  color: #9ca3af;
}
.myPageSub {
  /* 랩탑  768px ~ 1024 */
}
@media (max-width: 1024px) {
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.mainUse .box:nth-child(5) {
    width: 100%;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.mainUse .box:nth-child(6), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.mainUse .box:nth-child(7) {
    width: calc((100% - 2rem) / 2);
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.mainUse .box.smartRemoteMeter .remoteMeter {
    flex-direction: column;
    gap: 1rem;
    height: max-content;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.mainUse .box.smartRemoteMeter .remoteMeter .remoteMeterBox {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2.4rem;
    flex-wrap: wrap;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.mainUse .box.smartRemoteMeter .remoteMeter .remoteMeterBox > div {
    width: 13rem;
    height: 13rem;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.mainUse .box.smartRemoteMeter .remoteMeter .remoteMeterBox > div .inner {
    width: 11rem;
    height: 11rem;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.mainUse .box.smartRemoteMeter .remoteMeter .updateTimeBox {
    gap: 0.4rem;
    padding-left: 0;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.mainUse .box.smartRemoteMeter .remoteMeter .updateTimeBox .btnBox {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.mainUse .box.smartRemoteMeter .remoteMeter .updateTimeBox .btnBox button {
    max-width: 32.4rem;
    font-size: 1.3rem;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:first-child, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(2), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(3), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(4), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(7), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(8) {
    width: calc((100% - 2rem) / 2);
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(5), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(6) {
    width: 100%;
    flex: none;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(3).smartRemoteMeter .remoteMeter, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(4).smartRemoteMeter .remoteMeter, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(7).smartRemoteMeter .remoteMeter, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(8).smartRemoteMeter .remoteMeter {
    flex-direction: column;
    gap: 1rem;
    height: max-content;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(3).smartRemoteMeter .remoteMeter .remoteMeterBox, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(4).smartRemoteMeter .remoteMeter .remoteMeterBox, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(7).smartRemoteMeter .remoteMeter .remoteMeterBox, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(8).smartRemoteMeter .remoteMeter .remoteMeterBox {
    width: 100%;
    justify-content: space-around;
    gap: 0;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(3).smartRemoteMeter .remoteMeter .remoteMeterBox > div, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(4).smartRemoteMeter .remoteMeter .remoteMeterBox > div, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(7).smartRemoteMeter .remoteMeter .remoteMeterBox > div, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(8).smartRemoteMeter .remoteMeter .remoteMeterBox > div {
    width: 130px;
    height: 130px;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(3).smartRemoteMeter .remoteMeter .remoteMeterBox > div .inner, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(4).smartRemoteMeter .remoteMeter .remoteMeterBox > div .inner, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(7).smartRemoteMeter .remoteMeter .remoteMeterBox > div .inner, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(8).smartRemoteMeter .remoteMeter .remoteMeterBox > div .inner {
    width: 110px;
    height: 110px;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(3).smartRemoteMeter .remoteMeter .updateTimeBox, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(4).smartRemoteMeter .remoteMeter .updateTimeBox, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(7).smartRemoteMeter .remoteMeter .updateTimeBox, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(8).smartRemoteMeter .remoteMeter .updateTimeBox {
    gap: 0.4rem;
    padding-left: 0;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(3).smartRemoteMeter .remoteMeter .updateTimeBox .btnBox, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(4).smartRemoteMeter .remoteMeter .updateTimeBox .btnBox, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(7).smartRemoteMeter .remoteMeter .updateTimeBox .btnBox, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(8).smartRemoteMeter .remoteMeter .updateTimeBox .btnBox {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(3).smartRemoteMeter .remoteMeter .updateTimeBox .btnBox button, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(4).smartRemoteMeter .remoteMeter .updateTimeBox .btnBox button, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(7).smartRemoteMeter .remoteMeter .updateTimeBox .btnBox button, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(8).smartRemoteMeter .remoteMeter .updateTimeBox .btnBox button {
    font-size: 1.3rem;
    width: auto;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap .box .contTable {
    min-width: 51.2rem;
  }
}
.myPageSub {
  /* 태블릿 403 ~ 768px */
}
@media (max-width: 768px) {
  .myPageSub {
    gap: 2rem;
  }
  .myPageSub.mainMypage .box {
    padding: 1.2rem;
    gap: 0.8rem;
  }
  .myPageSub.mainMypage .box div label {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    color: #464c53;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .myPageSub.mainMypage .box div label {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .myPageSub.mainMypage .box div label.checkbox-label {
    margin: 0 auto;
    justify-content: center;
  }
  .myPageSub.mainMypage .box div input {
    width: 100%;
    margin-bottom: 8px;
  }
  .myPageSub.mainMypage .box.myInfo {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1.2rem;
  }
  .myPageSub.mainMypage .box.myInfo .infoBox {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding-left: 0;
    background: url("../images/fo/mypage/mypage.svg") no-repeat right top;
    background-size: 3.3rem;
  }
  .myPageSub.mainMypage .box.myInfo .infoBox .cusName {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    word-break: break-all;
  }
  .myPageSub.mainMypage .box.myInfo .infoBox .cusName:after {
    display: none;
  }
  .myPageSub.mainMypage .box.myInfo .infoBox .cusName p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
    color: #1e2124;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .myPageSub.mainMypage .box.myInfo .infoBox .cusName p {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .myPageSub.mainMypage .box.myInfo .infoBox .cusName p span {
    color: #0076DD;
    margin-right: 4px;
  }
  .myPageSub.mainMypage .box.myInfo .infoBox .office {
    padding: 0;
  }
  .myPageSub.mainMypage .box.myInfo .infoBox .office p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
    color: #131416;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .myPageSub.mainMypage .box.myInfo .infoBox .office p {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .myPageSub.mainMypage .box.myInfo .infoBox .office span {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    color: #131416;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .myPageSub.mainMypage .box.myInfo .infoBox .office span {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn {
    width: 100%;
    gap: 0.8rem;
    flex-direction: column;
  }
  .myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu > div div {
    width: 100%;
  }
  .myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu > div div select,
  .myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu > div div input {
    width: 100%;
  }
  .myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu > div div p {
    flex: none;
  }
  .myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu > div div p label {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: #1E2124;
    flex: none;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu > div div p label {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu > div div.myName {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.8rem;
  }
  .myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu > div div.myName span {
    display: flex;
    flex: none;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: #1E2124;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu > div div.myName span {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu > div div.myName p {
    width: 100%;
    height: 3.2rem;
    padding: 0 1rem;
    border-radius: 4px;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
    line-height: 3rem;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu > div div.myName p {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu > div.dateWrap div {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.8rem;
  }
  .myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu > div.dateWrap span.label {
    display: inline-flex;
    flex: none;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    color: #1E2124;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu > div.dateWrap span.label {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu > div.dateWrap .date-range {
    width: 100%;
  }
  .myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu > div.dateWrap button {
    width: 100%;
  }
  .myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu > div.dateWrap button span {
    display: flex;
  }
  .myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu > div.dateWrap button span.icon {
    display: flex;
  }
  .myPageSub.mainMypage .box.myInfo .infoBtn > div {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.8rem;
    flex: 1 0 0;
  }
  .myPageSub.mainMypage .box.myInfo .infoBtn > div.userInfo {
    margin-right: 0;
  }
  .myPageSub.mainMypage .box.myInfo .infoBtn > div.userInfo p {
    flex: none;
  }
  .myPageSub.mainMypage .box.myInfo .infoBtn > div .userName {
    width: 100%;
    margin-right: 0;
  }
  .myPageSub.mainMypage .box.myInfo .infoBtn > div .userName p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    color: #131416;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn > div .userName p {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn > div .userName p.myName {
    width: 100%;
    height: 3.2rem;
    padding: 0 1rem;
    border-radius: 4px;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
    line-height: 3rem;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn > div .userName p.myName {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn > div .userName:after {
    content: unset;
  }
  .myPageSub.mainMypage .box.myInfo .infoBtn > div button {
    width: calc(33.3% - 0.4rem);
  }
  .myPageSub.mainMypage .box.myInfo .infoBtn .cusNum {
    width: 100%;
    gap: 0.8rem;
  }
  .myPageSub.mainMypage .box.myInfo .infoBtn .cusNum p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn .cusNum p {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn .cusNum span {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn .cusNum span {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn .cusNum label {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: #1E2124;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn .cusNum label {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn .cusNum select {
    width: 100%;
  }
  .myPageSub.mainMypage .box.myInfo .infoBtn .userName {
    width: 100%;
    margin-right: 0;
  }
  .myPageSub.mainMypage .box.myInfo .infoBtn .userName p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: #1E2124;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn .userName p {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn .userName p.myName {
    width: 100%;
    height: 3.2rem;
    padding: 0 1rem;
    border-radius: 4px;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%;
    line-height: 3rem;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn .userName p.myName {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn .userName:after {
    content: unset;
  }
  .myPageSub.mainMypage .box.myInfo .infoBtn .userBtn {
    width: 100%;
    flex-direction: row;
  }
  .myPageSub.mainMypage .box .title {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap {
    gap: 0.8rem;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.mainUse .box:first-child, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.mainUse .box:nth-child(2), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.mainUse .box:nth-child(3), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.mainUse .box:nth-child(4), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.mainUse .box:nth-child(5), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.mainUse .box:nth-child(6), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox.mainUse .box:nth-child(7) {
    width: 100%;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:first-child, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(2), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(3), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(4), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(5), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(6), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(7), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(8) {
    width: 100%;
    flex: 0 0 100%;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box .statement .statementState {
    gap: 1.2rem;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box .statement .statementState .amount {
    padding: 1rem 0;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box .statement .statementState .cusNumBox label {
    word-wrap: break-word;
    word-break: break-all;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box .payment a {
    height: calc((100% - 0.8rem) / 2);
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.complaint .complaintBox a {
    height: calc((100% - 0.8rem) / 2);
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.complaint .complaintBox a p {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState {
    height: max-content;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState .monthBox {
    height: max-content;
    gap: 0.4rem;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState .monthBox p {
    width: calc(25% - 0.4rem);
    height: 4.6rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState .label {
    width: 100%;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter {
    flex-direction: column;
    gap: 1rem;
    height: max-content;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter .remoteMeterBox {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2.4rem;
    flex-wrap: wrap;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter .remoteMeterBox > div {
    width: 13rem;
    height: 13rem;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter .remoteMeterBox > div .inner {
    width: 11rem;
    height: 11rem;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter .updateTimeBox {
    gap: 0.4rem;
    padding-left: 0;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter .updateTimeBox .btnBox {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter .updateTimeBox .btnBox button {
    max-width: 32.4rem;
    font-size: 1.3rem;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap .box .contTable {
    table-layout: unset;
    min-width: unset;
  }
  .myPageSub.subPage .box {
    padding: 1.2rem;
    gap: 0.8rem;
  }
  .myPageSub.subPage .box div label {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: #464c53;
    margin-bottom: 4px;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .myPageSub.subPage .box div label {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .myPageSub.subPage .box div label.checkbox-label {
    margin: 0 auto;
    justify-content: center;
  }
  .myPageSub.subPage .box div input {
    width: 100%;
    margin-bottom: 8px;
  }
  .myPageSub.subPage .box div button {
    width: 100%;
  }
  .myPageSub.subPage .box.check {
    max-width: 100%;
  }
  .myPageSub.subPage .box.secession {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
  }
  .myPageSub.subPage .box.secession div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .myPageSub.subPage .box.secession div .secessionAgree .checkbox-label {
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0;
  }
  .myPageSub.subPage .box.secession div .secessionAgree .checkbox-label:before {
    margin-top: 3px;
  }
  .myPageSub.subPage .box.secession p {
    width: 60%;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
    text-align: center;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .myPageSub.subPage .box.secession p {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .myPageSub.subPage .box.secession .visualImage {
    width: 11rem;
    height: 9.2rem;
    background: url("../images/fo/mypage/bg_secession.png") no-repeat center;
    background-size: contain;
  }
  .myPageSub.subPage .box.ogcrMng .stepWrap {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
  }
  .myPageSub.subPage .box.ogcrMng .stepWrap ul {
    width: 100%;
    display: contents;
    margin-bottom: 0;
  }
  .myPageSub.subPage .box.ogcrMng .stepWrap ul:last-child {
    margin-bottom: 0;
  }
  .myPageSub.subPage .box.ogcrMng .stepWrap ul li {
    width: 100%;
  }
  .myPageSub.subPage .box.ogcrMng .stepWrap ul li:nth-child(even) {
    display: none;
  }
  .myPageSub.subPage .box.ogcrMng .stepWrap ul li div {
    height: 19.6rem;
  }
  .myPageSub.subPage .box.ogcrMng .stepWrap ul li div p {
    word-break: break-all;
    padding: 0 1rem;
  }
  .myPageSub.subPage .box.ogcrMng .stepWrap ul li div p br.hidden {
    display: none;
  }
  .myPageSub.subPage .box.ogcrMng .stepWrap ul li.last {
    width: calc(200% + 0.8rem);
  }
  .myPageSub.subPage .box.simpleAuth .stepWrap ul {
    gap: 2rem;
  }
  .myPageSub.subPage .box.simpleAuth .stepWrap ul li {
    width: 100%;
  }
  .myPageSub.subPage .box.simpleAuth .stepWrap ul li .step div {
    text-align: center;
  }
  .myPageSub.subPage .box.simpleAuth .stepWrap ul li .step div strong {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .myPageSub.subPage .box.simpleAuth .stepWrap ul li .step div strong {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .myPageSub.subPage .box.simpleAuth .stepWrap ul li .step div p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .myPageSub.subPage .box.simpleAuth .stepWrap ul li .step div p {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .myPageSub.subPage .box.info-box {
    padding: 1.2rem;
  }
  .myPageSub.subPage .box.mkeyList .listTop {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.myPageSub {
  /* 특이사항 */
}
@media (max-width: 550px) {
  .myPageSub.mainMypage .myPageBox {
    gap: 0.8rem;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap {
    flex-wrap: wrap;
    gap: 0.8rem;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:first-child, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(2) {
    width: 100%;
    flex: none;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(3), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(4), .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(5) {
    width: 100%;
    flex: none;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.complaint .complaintBox a p {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .remoteMeter {
    width: 100%;
    height: max-content;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState .label {
    gap: 0.4rem;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState p {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
}
.myPageSub {
  /* 모바일 ~ 403px */
}
@media (max-width: 403px) {
  .myPageSub.mainMypage .box.myInfo .infoBtn {
    flex-wrap: wrap;
  }
  .myPageSub.mainMypage .box.myInfo .infoBtn > div button:first-child {
    width: 100%;
  }
  .myPageSub.mainMypage .box.myInfo .infoBtn > div button {
    width: calc(50% - 0.4rem);
  }
  .myPageSub.mainMypage .box.myInfo .userBtn {
    flex-wrap: wrap;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box .title {
    width: 100%;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(3).smartRemoteMeter .remoteMeter .updateTimeBox, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(4).smartRemoteMeter .remoteMeter .updateTimeBox {
    width: 100%;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(3).smartRemoteMeter .remoteMeter .updateTimeBox .btnBox, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(4).smartRemoteMeter .remoteMeter .updateTimeBox .btnBox {
    width: 100%;
    flex-direction: column;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(3).smartRemoteMeter .remoteMeter .updateTimeBox .btnBox button, .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box:nth-child(4).smartRemoteMeter .remoteMeter .updateTimeBox .btnBox button {
    width: 100%;
  }
}
@media (max-width: 290px) {
  .myPageSub.mainMypage .box.myInfo .infoBox .cusName p span {
    display: block;
  }
  .myPageSub.mainMypage .box.myInfo .infoBtn > div button:first-child {
    width: 100%;
  }
  .myPageSub.mainMypage .box.myInfo .infoBtn > div button {
    width: 100%;
  }
  .myPageSub.mainMypage .box.myInfo .infoBtn.nrArisu button {
    width: 100%;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box .title {
    height: max-content;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.statementBox .title {
    position: relative;
    height: max-content;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.statementBox .title div.btnBox {
    width: 100%;
    justify-content: flex-start;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.statementBox .title div.btnBox .positionCustom {
    position: absolute;
    top: 0;
    right: 0;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.statementBox .statement .statementState .amount div {
    flex-wrap: wrap;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.paymentStatus .title {
    position: relative;
    height: max-content;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.paymentStatus .title div.btnBox {
    margin-left: unset;
    justify-content: flex-start;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.paymentStatus .title div.btnBox .positionCustom {
    position: absolute;
    top: 0;
    right: 0;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.paymentStatus .payment a {
    padding: 1.5rem;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.complaint .complaintBox a p {
    word-wrap: break-word;
    word-break: keep-all;
    text-align: center;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.complaint .complaintBox a p span.icon {
    display: none;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .title {
    position: relative;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .title div p {
    flex: unset;
    word-wrap: break-word;
    word-break: keep-all;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.smartRemoteMeter .title div.btnBox {
    position: absolute;
    top: 0;
    right: 0;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState .monthBox p {
    width: calc(33.3% - 0.4rem);
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState .label {
    width: calc(100% - 0.4rem);
    gap: 0.4rem;
    flex-wrap: wrap;
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.ownGcSummary .selfTest .monthState .label p {
    width: calc(50% - 0.4rem);
  }
  .myPageSub.mainMypage .myPageBox .boxWrap.moveBox .box.reduceDetail .title div {
    width: 100%;
  }
}

.logged_in {
  width: 100%;
}
.logged_in .remoteMeterBox .usage .meterUsageText {
  white-space: nowrap;
}
@media (min-width: 769px) {
  .logged_in .myPageSub.mainMypage .mainMypage .box.myInfo {
    justify-content: space-between;
  }
  .logged_in .myPageSub.mainMypage .mainMypage .box.myInfo .infoBox {
    margin-right: 0;
  }
  .logged_in .myPageSub.mainMypage .mainMypage .box.myInfo .infoBox .cusName:after {
    display: block;
    top: 50%;
    height: 24px;
    transform: translateY(-50%);
  }
  .logged_in .myPageSub.mainMypage .mainMypage .box.myInfo .userInfo .office:not(.cusNum)::before {
    display: block;
    top: 50%;
    height: 24px;
    transform: translateY(-50%);
  }
}

.container > div .content section .con.sitemapWrap {
  gap: 20px;
}
.container > div .content section .con.sitemapWrap .box ul.sitemap {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
}
.container > div .content section .con.sitemapWrap .box ul.sitemap li {
  width: calc(33.3% - 24px);
}
.container > div .content section .con.sitemapWrap .box ul.sitemap li dl dt {
  margin-bottom: 4px;
  padding: 8px;
  border-radius: 10px;
  background: #ECF2FE;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #131416;
}
@media (max-width: 1024px) {
  .container > div .content section .con.sitemapWrap .box ul.sitemap li dl dt {
    font-size: 1.8rem;
  }
}
.container > div .content section .con.sitemapWrap .box ul.sitemap li dl dt {
  text-align: center;
}
.container > div .content section .con.sitemapWrap .box ul.sitemap li dl dd ul li {
  width: 100%;
  padding: 8px 16px;
}
.container > div .content section .con.sitemapWrap .box ul.sitemap li dl dd ul li a:before {
  content: "•";
  padding: 0 10px 0 0;
  display: inline-block;
  text-indent: 0;
}
.container > div .content section .con.sitemapWrap .box ul.sitemap li dl dd ul li a {
  height: 22px;
  display: inline-block;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .container > div .content section .con.sitemapWrap .box ul.sitemap li dl dd ul li a {
    font-size: 1.6rem;
  }
}
.container > div .content section .con .box.guide01 {
  width: 100%;
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #1e2124;
}
@media (max-width: 1024px) {
  .container > div .content section .con .box.guide01 {
    font-size: 1.6rem;
  }
}
.container > div .content section .con .box.guide01 > div {
  width: 100%;
}
.container > div .content section .con .box.guide01 > div .smallTitle {
  margin-bottom: 4px;
}
.container > div .content section .con .box.guide01 > div .textarea {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin: 10px 0;
  padding: 12px;
  border: 1px solid #B1B8BE;
  background: #F9FAFB;
}
.container > div .content section .con .box.guide01 > div ul li {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .container > div .content section .con .box.guide01 > div ul li {
    font-size: 1.6rem;
  }
}
.container > div .content section .con .box.guide01 > div ul li.mb-4 {
  margin-bottom: 4px;
}
@media (max-width: 768px) {
  .container > div .content section .con.sitemapWrap {
    gap: 0.8rem;
    padding: 1.2rem;
    border: 1px solid #CDD1D5;
    border-radius: 20px;
  }
  .container > div .content section .con.sitemapWrap .box {
    border: none;
    padding: 0;
  }
  .container > div .content section .con.sitemapWrap .box ul.sitemap {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.8rem;
  }
  .container > div .content section .con.sitemapWrap .box ul.sitemap li {
    width: 100%;
  }
  .container > div .content section .con.sitemapWrap .box ul.sitemap li dl dt {
    padding: 0.4rem 0.8rem;
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .container > div .content section .con.sitemapWrap .box ul.sitemap li dl dt {
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .container > div .content section .con .box.guide01 > div .smallTitle {
    margin-bottom: 0.8rem;
  }
  .container > div .content section .con .box.guide01 > div .textarea p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    word-wrap: break-word;
    word-break: break-all;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .container > div .content section .con .box.guide01 > div .textarea p {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .container > div .content section .con .box.guide01 > div ul li.mb-4 {
    margin-bottom: 0.8rem;
  }
  .container > div .content section .con .box.guide01 > div p {
    font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
  }
}
@media (max-width: 768px) and (max-width: 1024px) {
  .container > div .content section .con .box.guide01 > div p {
    font-size: 1.6rem;
  }
}

.research {
  width: 100%;
  border-radius: 20px;
  border: 1px solid #cdd1d5;
  overflow: hidden;
}
.research .satisfaction {
  padding: 16px 24px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid #CDD1D5;
}
.research .satisfaction h3 {
  font-family: "Pretendard GOV", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #464C53;
}
@media (max-width: 1024px) {
  .research .satisfaction h3 {
    font-size: 1.8rem;
  }
}
.research .satisfaction .choiceGroup {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.research .satisfaction .choiceGroup li .chip {
  padding: 0 10px;
}
.research .satisfaction .choiceGroup li .chip input[type=checkbox],
.research .satisfaction .choiceGroup li .chip input[type=radio] {
  position: absolute;
  opacity: 0;
}
.research .satisfaction .choiceGroup li .chip input[type=checkbox] + .chip-label,
.research .satisfaction .choiceGroup li .chip input[type=radio] + .chip-label {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2px;
  border: none;
}
.research .satisfaction .choiceGroup li .chip input[type=checkbox] + .chip-label::before,
.research .satisfaction .choiceGroup li .chip input[type=radio] + .chip-label::before {
  content: "";
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  vertical-align: middle;
  cursor: pointer;
  transition: all 0.3s ease;
  background-image: url("../images/fo/icons/icon-face-smile-gray.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.research .satisfaction .choiceGroup li .chip input[type=checkbox] + .chip-label:empty::before,
.research .satisfaction .choiceGroup li .chip input[type=radio] + .chip-label:empty::before {
  margin-right: 0;
}
.research .satisfaction .choiceGroup li .chip input[type=checkbox]:checked + .chip-label,
.research .satisfaction .choiceGroup li .chip input[type=radio]:checked + .chip-label {
  color: #0076DD;
  border-color: #0076DD;
  background: #F4F6FA;
}
.research .satisfaction .choiceGroup li .chip input[type=checkbox]:checked + .chip-label::before,
.research .satisfaction .choiceGroup li .chip input[type=radio]:checked + .chip-label::before {
  background-image: url("../images/fo/icons/icon-face-smile.svg");
}
.research .satisfaction .choiceGroup li .chip input[type=checkbox]:focus-visible + .chip-label::before,
.research .satisfaction .choiceGroup li .chip input[type=radio]:focus-visible + .chip-label::before {
  outline: none;
  border-color: #0076DD;
}
.research .satisfaction .choiceGroup li .chip input[type=checkbox]:disabled + .chip-label,
.research .satisfaction .choiceGroup li .chip input[type=radio]:disabled + .chip-label {
  border: 1px solid #58616a;
  background: #cdd1d5;
  color: #6d7882;
}
.research .satisfaction .choiceGroup li .chip input[type=checkbox]:disabled + .chip-label::before,
.research .satisfaction .choiceGroup li .chip input[type=radio]:disabled + .chip-label::before {
  box-shadow: inset 0 0 0 0px #cdd1d5;
  border-color: #58616a;
  background: #cdd1d5;
  background-image: url("../images/icons/icon-check-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.research .satisfaction .utilActions {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding-left: 16px;
}
.research .assessment {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background: #F9FAFB;
}
.research .assessment .score {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.research .assessment .score li .radio label {
  gap: 2px;
}
.research .assessment .score li .radio label::before {
  margin-right: 8px;
}
@media (max-width: 768px) {
  .research .satisfaction {
    flex-direction: column;
    gap: 0.8rem;
    text-align: center;
  }
  .research .assessment {
    flex-direction: column;
  }
  .research .assessment .score {
    gap: 0.8rem;
  }
  .research .assessment .score li .radio label::before {
    margin-right: 1rem;
  }
  .research .assessment .score li .radio label .icon {
    width: 1.6rem;
    height: 1.6rem;
    background-size: 1.6rem;
  }
}