@charset "UTF-8";

/* 공통 */
/* default - Regular */
@font-face {
  font-family: "Pretendard";
  src:
    local("Pretendard-Regular"),
    url("../fonts/Pretendard-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

/* Medium */
@font-face {
  font-family: "Pretendard";
  src:
    local("Pretendard-Medium"),
    url("../fonts/Pretendard-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

/* Bold */
@font-face {
  font-family: "Pretendard";
  src:
    local("Pretendard-Bold"),
    url("../fonts/Pretendard-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: "Pretendard", sans-serif;
  color: #32353a;
  font-weight: 400;
  line-height: 1.5;
  word-break: keep-all;
  word-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.4rem;
  overflow-x: hidden;
}

::-moz-selection {
  background: #003675;
  color: #fff;
}

::selection {
  background: #003675;
  color: #fff;
}

body,
div,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
table,
th,
td,
form,
fieldset,
legend,
input,
textarea,
a,
button,
select,
ul,
li,
span,
em,
label,
i,
:before,
:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  font-family: inherit;
  line-height: 1.5;
  letter-spacing: inherit;
  word-break: break-all;
}

pre {
  font-family: inherit;
  margin: 0;
  white-space: pre-wrap;
}

input,
textarea,
a,
button,
select,
span,
label,
:before,
:after {
  font-size: inherit;
  font-weight: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong {
  font-weight: 700;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
  display: block;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img,
fieldset {
  border: 0;
}

fieldset {
  min-width: 100%;
}

img {
  max-width: 100%;
  vertical-align: top;
}

ul,
ol {
  list-style: none;
}

em,
address,
i {
  font-style: normal;
}

a,
a:hover,
a:active,
a:focus {
  color: inherit;
  text-decoration: none;
}

button,
input[type="submit"],
input[type="button"] {
  overflow: visible;
  margin: 0;
  background-color: transparent;
  border: none;
  -webkit-appearance: button;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

button,
input[type="checkbox"],
input[type="radio"],
select,
a {
  cursor: pointer;
}

button:disabled,
input[type="checkbox"]:disabled,
input[type="radio"]:disabled,
select:disabled,
a:disabled {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

textarea {
  resize: none;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[type="text"],
input[type="tel"],
input[type="password"],
input[type="file"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="search"],
textarea {
  -webkit-box-shadow: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

caption {
  position: static !important;
  margin: 0 !important;
}

table {
  table-layout: fixed;
  max-width: none;
  width: auto;
  min-width: 100%;
  border-collapse: collapse;
}

[role="button"] {
  cursor: pointer;
}

.img img {
  min-width: 100%;
  max-width: 100%;
}

.img.bg-img {
  background-size: cover;
}

.blind,
hr,
.sr-only,
legend,
caption {
  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;
}

::placeholder {
  font-weight: 400;
}
.mb15 {
  margin-bottom: 1.5rem;
}

/* ****  css 커스텀스크롤 : wrap, grid에 사용 **** */
/* ****  스크립트로 태그 상성 하는 커스텀스크롤  **** */
.table-layout,
.wrap-layout,
.scroll-area,
.bottom-content {
  position: relative;
  width: 100%;
  overflow: hidden !important;
}

.table-layout:hover > .custom-scrollbar,
.wrap-layout:hover > .custom-scrollbar,
.scroll-area:hover > .custom-scrollbar,
.bottom-content:hover > .custom-scrollbar {
  opacity: 1;
}

.table-layout:has(.scroll-container:hover) > .custom-scrollbar,
.table-layout:has(.table-layout:hover) > .custom-scrollbar,
.table-layout:has(.wrap-layout:hover) > .custom-scrollbar,
.wrap-layout:has(.scroll-container:hover) > .custom-scrollbar,
.wrap-layout:has(.table-layout:hover) > .custom-scrollbar,
.wrap-layout:has(.wrap-layout:hover) > .custom-scrollbar,
.scroll-area:has(.scroll-container:hover) > .custom-scrollbar,
.scroll-area:has(.table-layout:hover) > .custom-scrollbar,
.scroll-area:has(.wrap-layout:hover) > .custom-scrollbar,
.bottom-content:has(.scroll-container:hover) > .custom-scrollbar,
.bottom-content:has(.table-layout:hover) > .custom-scrollbar,
.bottom-content:has(.wrap-layout:hover) > .custom-scrollbar {
  opacity: 0;
}

.table-layout .scroll-content,
.wrap-layout .scroll-content,
.scroll-area .scroll-content,
.bottom-content .scroll-content {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  /* iOS에서 부드러운 스크롤 */
}

.table-layout .scroll-content::-webkit-scrollbar,
.wrap-layout .scroll-content::-webkit-scrollbar,
.scroll-area .scroll-content::-webkit-scrollbar,
.bottom-content .scroll-content::-webkit-scrollbar {
  display: none;
}

/* 스크롤바 */
.custom-scrollbar {
  position: absolute;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 10;
}

.custom-scrollbar.x {
  bottom: 2px;
  left: 0;
  height: 6px;
  width: 100%;
}

.custom-scrollbar.x .scrollbar-thumb {
  height: 100%;
}

.custom-scrollbar.y {
  top: 0;
  right: 2px;
  width: 6px;
  height: 100%;
}

.custom-scrollbar.y .scrollbar-thumb {
  width: 100%;
}

.scrollbar-thumb {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.3);
  background-color: #dadde2;
  border-radius: 3px;
}

.wrap-layout .custom-scrollbar {
  z-index: 101;
}

.send-list-box {
  max-height: 13.6rem;
  overflow-y: scroll;
  /*  */
}

/* 스크롤바의 폭 너비 */
.send-list-box::-webkit-scrollbar {
  width: 0.6rem;
}

.send-list-box::-webkit-scrollbar-thumb {
  background: #dadde2;
  /* 스크롤바 색상 */
  border-radius: 0.6rem;
  /* 스크롤바 둥근 테두리 */
}

.send-list-box::-webkit-scrollbar-track {
  background: #f8f9fa;
  /*스크롤바 뒷 배경 색상*/
}

/* **** 모바일 가로모드 :: 화면차단 메시지 **** */
body.is-mobile::before {
  display: none;
}

@media screen and (orientation: landscape) {
  body.is-mobile .wrap-layout {
    filter: blur(5px);
  }

  body.is-mobile::before {
    content: "";
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: rgba(0, 0, 0, 0.4) url(../images/common/landscape-160-mobile.svg) no-repeat center/16rem 16rem;
  }

  /* 실제 콘텐츠 숨기기 (선택) */
  body.is-mobile > *:not(:before) {
    display: none;
  }
}

/* **** 테블릿 세로모드 :: 화면차단 메시지 **** */
body.is-tablet::before {
  display: none;
}

@media (orientation: portrait) {
  body.is-tablet .wrap-layout {
    filter: blur(5px);
  }

  body.is-tablet::before {
    content: "";
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: rgba(0, 0, 0, 0.4) url(../images/common/landscape-160-mobile.svg) no-repeat center/16rem 16rem;
  }

  /* 실제 콘텐츠 숨기기 (선택) */
  body.is-tablet > *:not(:before) {
    display: none;
  }
}

/* **** mobile 레이아웃 순서 **** */
.is-mobile .m-order1 {
  order: 1;
}

.is-mobile .m-order2 {
  order: 2;
}

.is-mobile .m-w-full {
  min-width: unset;
  width: 100% !important;
  flex: 1;
}

/* **** mobile/tablet/pc 에 따른 레이아웃 **** */
.mo-only {
  display: none !important;
}

.is-tablet .mo-only {
  display: none !important;
}

.wrap-layout {
  visibility: hidden;
}

.is-mobile .wrap-layout,
.is-tablet .wrap-layout,
.is-pc .wrap-layout {
  visibility: visible;
}
.pc-hide {
  display: none;
}
.is-mobile .mo-hide {
  display: none !important;
}

.is-mobile .mo-only {
  display: block !important;
}

.is-mobile .mo-only.gnb {
  display: flex !important;
}

.is-mobile .mo-only.form-set {
  display: flex !important;
}

.is-mobile .mo-order1 {
  order: 1;
}

.is-mobile .mo-order2 {
  order: 2;
}

.is-mobile .wrap-layout:has(.before-login),
.is-mobile .wrap-layout:has(.main-dashboard) {
  background-color: #f8f9fa;
}

.is-mobile .wrap-layout:has(.before-login) .header-layout,
.is-mobile .wrap-layout:has(.main-dashboard) .header-layout {
  background-color: #f8f9fa;
}

/* **** 로딩바 **** */
.loader-wrapper {
  position: fixed;
  top: 5.6rem;
  left: 0;
  width: 100%;
  height: 0.6rem;
  background-color: #b0b8c1;
  z-index: 99;
}

.loader-bar {
  height: 100%;
  width: 0%;
  background-color: #e22d72;
}

.is-mobile .loader-wrapper {
  height: 0.2rem;
  background-color: #fff;
}

.is-mobile .loader-bar {
  background-color: #212266;
}

/* **** 간격과 높이 **** */
.h-full {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.h-100 {
  height: 100%;
}

section.mt24 {
  margin-top: 2.4rem;
}

.ml12 {
  margin-left: 1.2rem;
}

.d-block {
  display: block;
}

/* ** align ** */
.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

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

/* ** 텍스트 컬러 ** */
.col-primary {
  color: #212266;
}

.col-yellow {
  color: #fbf306;
}

.col-point {
  color: #e22d72;
}

.col-red {
  color: #fc1717;
}

.col-blue {
  color: #1c4fde;
}

.col-purple {
  color: #673fe0;
}

.col-warning {
  color: #e54d2d;
}
/* ** etc ** */
.sr-only {
  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;
}

.ellipsis1 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

/* ** 데이터 테이블 - 상태값 ** */
.status-hold {
  color: #32353a;
}

.status-done {
  color: #0ea833;
}

.status-ing {
  color: #9398a0;
}

.status-reject {
  color: #fc1717;
}

/* ** 데이터 테이블 - 상태값 :: 계약관리 ** */
.status-contract {
  color: #32353a;
}

.status-operate {
  color: #0ea833;
}

.status-canceling {
  color: #fc1717;
}

.status-cancel {
  color: #32353a;
}

/* ** 데이터 테이블 - 상승 하락 ** */
.status-up {
  color: #e22d72 !important;
}

.status-down {
  color: #1c4fde !important;
}

/* ** 매도/매수/리벨런스 따른 컬러 ** */
.status-buy {
  color: #e22d72 !important;
}

.status-sell {
  color: #1c4fde !important;
}

.status-rebalance {
  color: #673fe0 !important;
}

/* ** up/down 따른 컬러 ** */
.status-minus {
  color: #1c4fde !important;
}

.status-plus {
  color: #e22d72 !important;
}

/* ** 위험단계에 따른 컬러 ** */
.warning-level1 {
  color: #e54d2d;
}

.warning-level2 {
  color: #e54d2d;
}

.warning-level3 {
  color: #ff8433;
}

.warning-level4 {
  color: #ffc500;
}

.warning-level5 {
  color: #ffc500;
}

.warning-level6 {
  color: #a4ce51;
}

/* ** 위험단계에 따른 컬러 :: 바 타입 ** */
[class*="bar-level"] {
  background: url(../images/common/bar-empty.svg);
}

[class*="bar-level"].show.bar-level1 {
  background: #e54d2d;
}

[class*="bar-level"].show.bar-level2 {
  background: #e54d2d;
}

[class*="bar-level"].show.bar-level3 {
  background: #ff8433;
}

[class*="bar-level"].show.bar-level4 {
  background: #ffc500;
}

[class*="bar-level"].show.bar-level5 {
  background: #ffc500;
}

[class*="bar-level"].show.bar-level6 {
  background: #a4ce51;
}

/* ** 필수값 ** */
.require {
  position: relative;
}

.require::after {
  content: "*";
  display: inline-flex;
  margin-left: 0.4rem;
  color: #e22d72;
  font-size: 1.4rem;
  font-weight: 500;
}

/* ** 페이지 타이틀 ** */
.page-title-wrap {
  display: flex;
  margin-bottom: 2.4rem;
}

.page-title-wrap .tit-h2 {
  gap: 0.8rem;
}

.page-title-wrap .tit-h2::before,
.page-title-wrap .tit-h2::after {
  width: 3.2rem;
  height: 3.2rem;
}

.page-title {
  margin-bottom: 2.4rem;
  color: #151618;
  font-size: 2.2rem;
}

.head-title {
  color: #151618;
  font-size: 1.8rem;
  font-weight: 700;
}

.pop-h3 {
  font-size: 1.4rem;
  font-weight: 500;
}

.tit-h1 {
  color: #151618;
  font-size: 3.2rem;
  font-weight: 700;
}

.tit-h1 .fw-regular {
  font-weight: 400;
}

.tit-h2 {
  color: #151618;
  font-size: 2.4rem;
  font-weight: 700;
}

.tit-h3 {
  font-size: 2rem;
  font-weight: 700;
}

.tit-h4 {
  margin-bottom: 1.6rem;
  font-size: 1.6rem;
  font-weight: 700;
}

.tit-h4.dot {
  position: relative;
  padding-left: 1.2rem;
}

.tit-h4.dot::before {
  content: "";
  display: block;
  background-color: #32353a;
  width: 0.4rem;
  height: 0.4rem;
  position: absolute;
  top: 0.9rem;
  left: 0;
}

.tit-h4.fw-bold {
  font-weight: 700;
}

.is-mobile .tit-h4 {
  font-size: 1.4rem;
}

/* **** 뱃지 :: 사이즈 **** */
.kw-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.kw-badge.xs {
  height: 1.6rem;
  padding: 0.2rem 0.3rem;
  border-radius: 0.4rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6rem;
}

.kw-badge.sm {
  height: 1.8rem;
  padding: 0 0.8rem;
  font-size: 1.1rem;
  line-height: 1.8rem;
}

.kw-badge {
  height: 2rem;
  padding: 0 0.8rem;
  border-radius: 0.4rem;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 2rem;
}

/* **** 뱃지 :: 컬러 **** */
.kw-badge.pink {
  background-color: #fff4fa;
  color: #e22d72;
}

.kw-badge.gray {
  background-color: #f1f3f5;
  color: #616974;
}

.kw-badge.line-primary {
  border: 1px solid #396dfc;
  color: #396dfc;
}

.kw-badge.primary {
  background-color: #212266;
  border: 1px solid #212266;
  color: #fff;
}

.kw-badge.blue {
  background-color: #eef5ff;
  border: 1px solid #eef5ff;
  color: #151618;
}

.kw-badge.d-gray {
  background-color: #616974;
  color: #fff;
}

.kw-badge.purple {
  background-color: #f3f0fd;
  color: #673fe0;
}

.kw-badge.green {
  background-color: #e6f6ea;
  color: #0ea833;
}

/* **** 뱃지 :: 타입 **** */
.kw-badge.number {
  height: 2.8rem;
  border-radius: 100%;
}

.kw-badge.dot {
  width: 0.4rem;
  height: 0.4rem;
  padding: 0.2rem;
  border-radius: 100%;
}

.kw-badge.round {
  border-radius: 0.9rem;
}

.kw-badge[class*="grade"] {
  height: 1.8rem;
  padding: 0 0.8rem;
  border-radius: 0.9rem;
  font-size: 1.1rem;
  line-height: 1.7rem;
}

.kw-badge[class*="grade"].grade1,
.kw-badge[class*="grade"].grade2 {
  color: #e54d2d;
  border: 1px solid #e54d2d;
}

.kw-badge[class*="grade"].grade3,
.kw-badge[class*="grade"].grade4 {
  color: #ffc500;
  border: 1px solid #ffc500;
}

.kw-badge[class*="grade"].grade5 {
  color: #a4ce51;
  border: 1px solid #a4ce51;
}

.list-badge {
  display: flex;
  gap: 0.8rem;
}

/* **** 버튼 세트 **** */
.btn-box {
  display: flex;
  gap: 0.8rem;
}

.btn-box.mt8 {
  margin-top: 0.8rem;
}

.btn-box.mt16 {
  margin-top: 1.6rem;
}

.btn-box.mt20 {
  margin-top: 2rem;
}

.btn-box.mt24 {
  margin-top: 2.4rem;
}

.btn-box.bottom {
  position: relative;
  width: 100%;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 2.4rem;
}

.btn-box.bottom.mt0 {
  margin-top: 0;
}

.btn-box.bottom .btn {
  min-width: 12rem;
}

.btn-box.bottom .btn.w-xm {
  width: 15rem;
}

.btn-box.bottom .right {
  position: absolute;
  right: 0;
}

.btn-box.center {
  width: 100%;
  justify-content: center;
}

.btn-box.right {
  justify-content: flex-end;
}

.btn-box.col {
  flex-direction: column;
}

.btn-box.col:has(.btn.xl) {
  gap: 1.6rem;
}

.btn-box.full .btn {
  width: 100%;
}

.is-mobile .btn-box.bottom .btn {
  width: 100%;
  min-width: unset;
  flex: 1;
}

/* **** 버튼 **** */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle;
  flex-shrink: 0;
  transition: 0.3s ease-in-out;
  line-height: 1;
}

/* **** 버튼 :: color **** */
.btn {
  background-color: #212266;
  border: 1px solid #212266;
  color: #fff;
}

.btn:hover {
  background-color: #14153f;
  border-color: #14153f;
  color: #fff;
}

.btn:active {
  background-color: #14153f;
  border-color: #14153f;
}

.btn[disabled] {
  background-color: #d7d7e3;
  border-color: #d7d7e3;
  color: #a6a6c2;
}

.btn.secondary {
  background-color: #e1e4e9;
  border: 1px solid #e1e4e9;
  color: #32353a;
}

.btn.line-primary {
  background-color: #fff;
  border: 1px solid #212266;
  color: #212266;
}

.btn.line-primary:hover {
  background-color: #f2f2f6;
  border-color: #212266;
}

.btn.line-primary:active {
  background-color: #f2f2f6;
  border-color: #212266;
}

.btn.line-primary[disabled] {
  background-color: #d7d7e3;
  border-color: #a6a6c2;
  color: #a6a6c2;
}

.btn.line-gray {
  background-color: #fff;
  border: 1px solid #dadde2;
  color: #32353a;
}

.btn.line-gray:hover {
  background-color: #f8f9fa;
  border-color: #c3c9d0;
}

.btn.line-gray:active {
  background-color: #f2f2f6;
  border-color: #212266;
}

.btn.line-gray[disabled] {
  background-color: #f1f3f5;
  border-color: #dadde2;
  color: #b0b8c1;
}

.btn.no-bg {
  background-color: transparent;
  border-color: transparent;
}

.btn.no-bg:hover {
  background-color: transparent;
  border-color: transparent;
}

.btn.no-bg:active {
  background-color: transparent;
  border-color: transparent;
}

.btn.no-bg[disabled] {
  background-color: transparent;
  border-color: transparent;
  color: #b0b8c1;
}

.btn.point {
  background-color: #fc1717;
  border: 1px solid #fc1717;
  color: #fff;
}

.btn.point[disabled] {
  background-color: #d7d7e3;
  border-color: #d7d7e3;
  color: #a6a6c2;
}

.btn.line-point {
  background-color: #fff;
  border: 1px solid #fc1717;
  color: #fc1717;
}

.btn.line-point[disabled] {
  background-color: #d7d7e3;
  border-color: #d7d7e3;
  color: #a6a6c2;
}

/* **** 이벤트 비활성화 :: 버튼 스타일 disabled 처리 **** */
.event-disable .btn {
  background-color: #d7d7e3;
  border-color: #d7d7e3;
  color: #a6a6c2;
  pointer-events: none;
}

.event-disable .btn.line-primary {
  background-color: #d7d7e3;
  border-color: #a6a6c2;
  color: #a6a6c2;
}

.event-disable .btn.line-gray {
  background-color: #f1f3f5;
  border-color: #dadde2;
  color: #b0b8c1;
}

.event-able .btn {
  background-color: #212266;
  border: 1px solid #212266;
  color: #fff;
  pointer-events: initial;
}

.event-able .btn.line-primary {
  background-color: #fff;
  border: 1px solid #212266;
  color: #212266;
}

.event-able .btn.line-gray {
  background-color: #fff;
  border: 1px solid #dadde2;
  color: #32353a;
}

/* **** 버튼 :: size **** */
.btn.xs {
  min-width: unset;
  height: 2rem;
  padding: 0 0.8rem;
  border-radius: 0.4rem;
  font-size: 1.2rem;
  font-weight: 400;
}

.btn.sm {
  min-width: unset;
  height: 3rem;
  padding: 0 1.2rem;
  border-radius: 0.6rem;
  font-size: 1.3rem;
  font-weight: 400;
}

.btn {
  min-width: 8rem;
  height: 3.8rem;
  padding: 0 1.6rem;
  border-radius: 0.8rem;
  font-size: 1.4rem;
  font-weight: 400;
}

.btn.lg {
  height: 4.8rem;
  padding: 0 2.4rem;
  border-radius: 0.8rem;
  font-size: 1.6rem;
  font-weight: 500;
}

.btn.xl {
  height: 5.6rem;
  border-radius: 1.6rem;
  font-size: 1.6rem;
  font-weight: 700;
}

.btn.w-md {
  width: 13rem;
}

.is-mobile .btn {
  height: 4.8rem;
  padding: 0 2.4rem;
  border-radius: 0.8rem;
  font-size: 1.6rem;
  font-weight: 500;
}

.is-mobile .btn.lg {
  height: 5.6rem;
  border-radius: 1.6rem;
  font-size: 1.6rem;
  font-weight: 700;
}

.is-mobile .btn.xl {
  height: 5.6rem;
  border-radius: 1.6rem;
  font-size: 1.6rem;
  font-weight: 700;
}

/* **** 버튼 :: icon + text 조합 or only icon **** */
.btn[class*="ico-"][class*="ico-before"] {
  min-width: unset;
}

.btn[class*="ico-"][class*="ico-before"]::before {
  display: inline-flex;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.btn[class*="ico-"][class*="ico-after"] {
  min-width: unset;
}

.btn[class*="ico-"][class*="ico-after"]::after {
  display: inline-flex;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.btn[class*="ico-"][class*="ico-only"] {
  min-width: unset;
  padding: 0;
  background-repeat: no-repeat;
  background-position: center;
}

.btn[class*="ico-"][class*="ico-only"] {
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 0.8rem;
  background-size: 2.4rem 2.4rem;
}

.btn[class*="ico-"][class*="ico-only"].ico-only-search {
  background-image: url(../images/icon/btn-24-search-w.png);
}

.btn[class*="ico-"][class*="ico-only"].ico-only-search:disabled {
  background-image: url(../images/icon/btn-24-search-disable.png);
}

.btn[class*="ico-"][class*="ico-only"].ico-only-search.line-primary {
  background-image: url(../images/icon/btn-24-search-navy.png);
}

.btn[class*="ico-"][class*="ico-only"].ico-only-menu {
  background-image: url(../images/icon/btn-24-menu-w.png);
}

.btn[class*="ico-"][class*="ico-only"].ico-only-menu:hover {
  background-color: #212266;
  border-color: #212266;
}

.btn[class*="ico-"][class*="ico-only"].ico-only-calendar {
  background-image: url(../images/icon/btn-24-calendar.svg);
  background-color: transparent;
  border-color: transparent;
}

.btn[class*="ico-"][class*="ico-only"].ico-only-calendar:hover {
  background-color: transparent;
  border-color: transparent;
}

.btn[class*="ico-"][class*="ico-only"].ico-only-calendar:active {
  background-color: transparent;
  border-color: transparent;
}

.btn[class*="ico-"][class*="ico-only"].ico-only-calendar[disabled] {
  background-color: transparent;
  border-color: transparent;
  color: #b0b8c1;
}

.btn[class*="ico-"].xs {
  gap: 0.4rem;
}

.btn[class*="ico-"].xs::before,
.btn[class*="ico-"].xs::after {
  width: 1.2rem;
  height: 1.2rem;
}

.btn[class*="ico-"].ico-before-download::before,
.btn[class*="ico-"].ico-before-download::after,
.btn[class*="ico-"].ico-after-download::before,
.btn[class*="ico-"].ico-after-download::after {
  background-image: url(../images/icon/btn-12-download.svg);
}

.btn[class*="ico-"].ico-before-check::before,
.btn[class*="ico-"].ico-before-check::after,
.btn[class*="ico-"].ico-after-check::before,
.btn[class*="ico-"].ico-after-check::after {
  background-image: url(../images/icon/btn-12-check.png);
}

.btn[class*="ico-"].ico-before-edit::before,
.btn[class*="ico-"].ico-before-edit::after,
.btn[class*="ico-"].ico-after-edit::before,
.btn[class*="ico-"].ico-after-edit::after {
  background-image: url(../images/icon/btn-12-edit.png);
}

.btn[class*="ico-"].ico-before-edit[disabled]::before,
.btn[class*="ico-"].ico-before-edit[disabled]::after,
.btn[class*="ico-"].ico-after-edit[disabled]::before,
.btn[class*="ico-"].ico-after-edit[disabled]::after {
  background-image: url(../images/icon/btn-12-edit-disable.svg);
}

.btn[class*="ico-"].sm {
  gap: 0.4rem;
}

.btn[class*="ico-"].sm::before,
.btn[class*="ico-"].sm::after {
  width: 1.6rem;
  height: 1.6rem;
}

.btn[class*="ico-"].ico-before-modify::before,
.btn[class*="ico-"].ico-before-modify::after,
.btn[class*="ico-"].ico-after-modify::before,
.btn[class*="ico-"].ico-after-modify::after {
  background-image: url(../images/icon/btn-16-modify.svg);
}

.btn[class*="ico-"].ico-before-add::before,
.btn[class*="ico-"].ico-before-add::after,
.btn[class*="ico-"].ico-after-add::before,
.btn[class*="ico-"].ico-after-add::after {
  background-image: url(../images/icon/btn-16-plus-gray.svg);
}

.btn[class*="ico-"].ico-before-trash::before,
.btn[class*="ico-"].ico-before-trash::after,
.btn[class*="ico-"].ico-after-trash::before,
.btn[class*="ico-"].ico-after-trash::after {
  background-image: url(../images/icon/btn-16-trash.svg);
}

.btn[class*="ico-"].ico-before-trash:disabled::before,
.btn[class*="ico-"].ico-before-trash:disabled::after,
.btn[class*="ico-"].ico-after-trash:disabled::before,
.btn[class*="ico-"].ico-after-trash:disabled::after {
  background-image: url(../images/icon/btn-16-trash-disable.png);
}

.btn[class*="ico-"].ico-before-excel::before,
.btn[class*="ico-"].ico-before-excel::after,
.btn[class*="ico-"].ico-after-excel::before,
.btn[class*="ico-"].ico-after-excel::after {
  background-image: url(../images/icon/btn-16-excel.svg);
}

.btn[class*="ico-"].ico-before-refresh::before,
.btn[class*="ico-"].ico-before-refresh::after,
.btn[class*="ico-"].ico-after-refresh::before,
.btn[class*="ico-"].ico-after-refresh::after {
  background-image: url(../images/icon/btn-16-refresh.svg);
}

.is-mobile .btn[class*="ico-"][class*="ico-only"] {
  width: 4.8rem;
  height: 4.8rem;
}

.is-mobile .btn[class*="ico-"][class*="ico-only"].ico-only-menu {
  background-color: transparent;
  border-color: transparent;
  background-image: url(../images/icon/btn-24-menu.png);
}

.btn-clear {
  background-repeat: no-repeat;
  background-position: center;
  width: 3.8rem;
  height: 3.8rem;
  background-size: 1.6rem 1.6rem;
  background-image: url(../images/icon/btn-16-delete.png);
}

.btn-clear {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.btn-clear.visible {
  opacity: 1;
  pointer-events: auto;
}

/* **** 버튼 :: text 버튼 **** */
.btn-txt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  cursor: pointer;
  white-space: nowrap;
  color: #32353a;
  transition: 0.3s ease-in-out;
}

.btn-txt {
  gap: 0.4rem;
}

.btn-txt::before,
.btn-txt::after {
  width: 1.6rem;
  height: 1.6rem;
}

.btn-txt[disabled] {
  color: #b0b8c1;
}

.btn-txt[class*="ico-before"]::before {
  display: inline-flex;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.btn-txt[class*="ico-before"]::after {
  display: none;
}

.btn-txt[class*="ico-after"]::before {
  display: none;
}

.btn-txt[class*="ico-after"]::after {
  display: inline-flex;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.btn-txt.ico-after-arrow::after {
  background-image: url(../images/icon/btn-16-arrow-right.png);
}

.btn-txt.ico-after-arrow[disabled]::after {
  background-image: url(../images/icon/btn-16-arrow-right-gray.png);
}

.btn-txt.ico-after-more {
  height: 4rem;
  padding: 0 1.2rem;
}

.btn-txt.ico-after-more::after {
  background-image: url(../images/icon/btn-16-more.svg);
}

.btn-underline {
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}

.btn-underline:hover,
.btn-underline:focus,
.btn-underline:active {
  text-decoration: underline;
}

.btn-underline.center {
  width: 100%;
  text-align: center;
}

[class*="ico-only"]:not(.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s ease-in-out;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  flex-shrink: 0;
}

[class*="ico-only"]:not(.btn)::after {
  display: none;
}

[class*="ico-only"]:not(.btn) {
  width: 1.6rem;
  height: 1.6rem;
}

[class*="ico-only"]:not(.btn).md {
  width: 2.4rem;
  height: 2.4rem;
}

[class*="ico-only"]:not(.btn).lg {
  width: 3.2rem;
  height: 3.2rem;
}

[class*="ico-only"]:not(.btn).xl {
  width: 6.4rem;
  height: 6.4rem;
}

[class*="ico-only"]:not(.btn).xxl {
  width: 9.6rem;
  height: 9.6rem;
}

[class*="ico-only"]:not(.btn).ico-only-delete {
  width: 2.8rem;
  height: 100%;
  background-image: url(../images/icon/btn-16-delete.svg);
  background-size: 1.6rem 1.6rem;
}

[class*="ico-only"]:not(.btn).ico-only-edit {
  background-image: url(../images/icon/btn-24-edit.svg);
}

[class*="ico-only"]:not(.btn).ico-only-trash {
  background-image: url(../images/icon/btn-24-delete.svg);
}

[class*="ico-only"]:not(.btn).ico-only-move {
  background-image: url(../images/icon/btn-24-move.svg);
  cursor: move;
}

[class*="ico-only"]:not(.btn).ico-only-view {
  background-image: url(../images/icon/btn-24-view.svg);
}

[class*="ico-only"]:not(.btn).ico-only-equal {
  background-image: url(../images/icon/table-16-equal.svg);
}

[class*="ico-only"]:not(.btn).ico-only-menu1 {
  background-image: url(../images/common/gnb-32-menu1.svg);
}

[class*="ico-only"]:not(.btn).ico-only-menu2 {
  background-image: url(../images/common/gnb-32-menu2.svg);
}

[class*="ico-only"]:not(.btn).ico-only-menu3 {
  background-image: url(../images/common/gnb-32-menu3.svg);
}

[class*="ico-only"]:not(.btn).ico-only-menu4 {
  background-image: url(../images/common/gnb-32-menu4.svg);
}

[class*="ico-only"]:not(.btn).ico-only-menu {
  background-image: url(../images/common/gnb-32-menu.svg);
}

[class*="ico-only"]:not(.btn).ico-only-ing {
  background-image: url(../images/icon/modal-64-ing.svg);
}

[class*="ico-only"]:not(.btn).ico-only-noti {
  background-image: url(../images/icon/modal-64-notice.svg);
}

[class*="ico-only"]:not(.btn).ico-only-error {
  background-image: url(../images/icon/modal-64-error.svg);
}

[class*="ico-only"]:not(.btn).ico-only-done {
  background-image: url(../images/icon/modal-64-success.svg);
}

[class*="ico-only"]:not(.btn).ico-only-nodata {
  background-image: url(../images/icon/table-64-empty.svg);
}

[class*="ico-only"]:not(.btn).ico-only-empNoti {
  background-image: url(../images/icon/ic-64-empty-notice.svg);
}

[class*="ico-only"]:not(.btn).ico-only-approval {
  background-image: url(../images/icon/table-64-approval.svg);
}

[class*="ico-only"]:not(.btn).ico-only-noMp {
  background-image: url(../images/icon/table-64-noMp.svg);
}

[class*="ico-only"]:not(.btn).ico-only-advisor {
  background-image: url(../images/icon/table-64-advisor.svg);
}

[class*="ico-only"]:not(.btn).ico-only-add {
  background-image: url(../images/icon/list-64-plus.svg);
}

[class*="ico-only"]:not(.btn).ico-only-imposible {
  background-image: url(../images/icon/table-64-impossible.svg);
}

[class*="ico-only"]:not(.btn).ico-only-nouser {
  background-image: url(../images/icon/list-64-customer.svg);
}

[class*="ico-only"]:not(.btn).ico-only-protect {
  background-image: url(../images/icon/home-64-protect.png);
}

[class*="ico-only"]:not(.btn).ico-only-error404 {
  background-image: url(../images/icon/error-96-404.svg);
}

[class*="ico-only"]:not(.btn).ico-only-error500 {
  background-image: url(../images/icon/error-96-500.svg);
}

[class*="ico-only"]:not(.btn).ico-only-logout {
  background-image: url(../images/icon/error-96-logout.svg);
}

[class*="ico-only"]:not(.btn).ico-only-step {
  background-image: url(../images/icon/ic-96-step.svg);
}

[class*="ico-only"]:not(.btn).ico-only-step {
  background-image: url(../images/icon/ic-96-step.svg);
}

[class*="ico-only"]:not(.btn).ico-only-step.reject {
  background-image: url(../images/icon/ic-96-reject.svg);
}

[class*="ico-only"]:not(.btn).ico-only-new {
  width: 1.4rem;
  height: 1.4rem;
  background: #e22d72;
  border-radius: 0.4rem;
}

[class*="ico-only"]:not(.btn).ico-only-new::after {
  content: "N";
  display: block;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4rem;
}

[class*="ico-only"]:not(.btn).ico-only-file {
  display: flex;
  justify-self: center;
  width: 2.4rem;
  height: 2.4rem;
  background-image: url(../images/icon/table-16-file.svg);
  background-size: 1.6rem;
}

[class*="ico-only"]:not(.btn).ico-only-refresh {
  background-image: url(../images/icon/btn-72-refresh.png);
  background-size: 7.2rem 7.2rem;
}

.btn-bookmark [class*="ico-only-bookmark"] {
  width: 2.4rem;
  height: 2.4rem;
}

.btn-bookmark .menu {
  margin-top: 0.6rem;
  font-size: 1.1rem;
  word-break: break-word;
  text-align: center;
}

.btn-bookmark .ico-only-bookmark {
  background-image: url(../images/icon/bookmark-24-home.svg);
}

.btn-bookmark .ico-only-bookmark1 {
  background-image: url(../images/icon/bookmark-24-menu1.svg);
}

.btn-bookmark .ico-only-bookmark2 {
  background-image: url(../images/icon/bookmark-24-menu2.svg);
}

.btn-bookmark .ico-only-bookmark3 {
  background-image: url(../images/icon/bookmark-24-menu3.svg);
}

.btn-bookmark .ico-only-bookmark4 {
  background-image: url(../images/icon/bookmark-24-menu4.svg);
}

.btn-bookmark .ico-only-bookmark5 {
  background-image: url(../images/icon/bookmark-24-menu5.svg);
}

.btn-bookmark .ico-only-bookmark6 {
  background-image: url(../images/icon/bookmark-24-menu6.svg);
}

.btn-bookmark .ico-only-bookmark7 {
  background-image: url(../images/icon/bookmark-24-menu7.svg);
}

.btn-bookmark:hover .ico-only-bookmark {
  background-image: url(../images/icon/bookmark-24-home-on.svg);
}

.btn-bookmark:hover .ico-only-bookmark1 {
  background-image: url(../images/icon/bookmark-24-menu1-on.svg);
}

.btn-bookmark:hover .ico-only-bookmark2 {
  background-image: url(../images/icon/bookmark-24-menu2-on.svg);
}

.btn-bookmark:hover .ico-only-bookmark3 {
  background-image: url(../images/icon/bookmark-24-menu3-on.svg);
}

.btn-bookmark:hover .ico-only-bookmark4 {
  background-image: url(../images/icon/bookmark-24-menu4-on.svg);
}

.btn-bookmark:hover .ico-only-bookmark5 {
  background-image: url(../images/icon/bookmark-24-menu5-on.svg);
}

.btn-bookmark:hover .ico-only-bookmark6 {
  background-image: url(../images/icon/bookmark-24-menu6-on.svg);
}

.btn-bookmark:hover .ico-only-bookmark7 {
  background-image: url(../images/icon/bookmark-24-menu7-on.svg);
}

.bottom-gnb .li.active [class*="ico-only"]:not(.btn).ico-only-menu1 {
  background-image: url(../images/common/gnb-32-menu1-active.svg);
}

.bottom-gnb .li.active [class*="ico-only"]:not(.btn).ico-only-menu2 {
  background-image: url(../images/common/gnb-32-menu2-active.svg);
}

.bottom-gnb .li.active [class*="ico-only"]:not(.btn).ico-only-menu3 {
  background-image: url(../images/common/gnb-32-menu3-active.svg);
}

.bottom-gnb .li.active [class*="ico-only"]:not(.btn).ico-only-menu4 {
  background-image: url(../images/common/gnb-32-menu4-active.svg);
}

[class*="ico-before"]:not(.btn)::before {
  display: inline-flex;
  content: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

[class*="ico-after"]:not(.btn)::after {
  display: inline-flex;
  content: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

[class*="ico-before"]:not(.btn).xs,
[class*="ico-after"]:not(.btn).xs {
  font-size: 1.1rem;
}

[class*="ico-before"]:not(.btn).xs::before,
[class*="ico-before"]:not(.btn).xs::after,
[class*="ico-after"]:not(.btn).xs::before,
[class*="ico-after"]:not(.btn).xs::after {
  width: 1.2rem;
  height: 1.2rem;
}

[class*="ico-before"]:not(.btn),
[class*="ico-after"]:not(.btn) {
  display: inline-flex;
  align-items: center;
  background-size: contain;
  gap: 0.4rem;
  line-height: 1;
}

[class*="ico-before"]:not(.btn)::before,
[class*="ico-before"]:not(.btn)::after,
[class*="ico-after"]:not(.btn)::before,
[class*="ico-after"]:not(.btn)::after {
  width: 1.6rem;
  height: 1.6rem;
}

[class*="ico-before"]:not(.btn).sm,
[class*="ico-after"]:not(.btn).sm {
  gap: 0.6rem;
  font-size: 1.4rem;
}

[class*="ico-before"]:not(.btn).sm::before,
[class*="ico-before"]:not(.btn).sm::after,
[class*="ico-after"]:not(.btn).sm::before,
[class*="ico-after"]:not(.btn).sm::after {
  width: 2rem;
  height: 2rem;
}

[class*="ico-before"]:not(.btn).md,
[class*="ico-after"]:not(.btn).md {
  gap: 0.6rem;
}

[class*="ico-before"]:not(.btn).md::before,
[class*="ico-before"]:not(.btn).md::after,
[class*="ico-after"]:not(.btn).md::before,
[class*="ico-after"]:not(.btn).md::after {
  width: 2.4rem;
  height: 2.4rem;
}

[class*="ico-before"]:not(.btn).lg,
[class*="ico-before"]:not(.btn).tit-h2,
[class*="ico-after"]:not(.btn).lg,
[class*="ico-after"]:not(.btn).tit-h2 {
  gap: 0.8rem;
}

[class*="ico-before"]:not(.btn).lg::before,
[class*="ico-before"]:not(.btn).lg::after,
[class*="ico-before"]:not(.btn).tit-h2::before,
[class*="ico-before"]:not(.btn).tit-h2::after,
[class*="ico-after"]:not(.btn).lg::before,
[class*="ico-after"]:not(.btn).lg::after,
[class*="ico-after"]:not(.btn).tit-h2::before,
[class*="ico-after"]:not(.btn).tit-h2::after {
  width: 3.2rem;
  height: 3.2rem;
}

[class*="ico-before"]:not(.btn).ico-before-kor.xs::before,
[class*="ico-before"]:not(.btn).ico-before-kor.xs::after,
[class*="ico-after"]:not(.btn).ico-before-kor.xs::before,
[class*="ico-after"]:not(.btn).ico-before-kor.xs::after {
  background-image: url(../images/icon/graph-12-kor.svg);
}

[class*="ico-before"]:not(.btn).ico-before-usa.xs::before,
[class*="ico-before"]:not(.btn).ico-before-usa.xs::after,
[class*="ico-after"]:not(.btn).ico-before-usa.xs::before,
[class*="ico-after"]:not(.btn).ico-before-usa.xs::after {
  background-image: url(../images/icon/graph-12-usa.svg);
}

[class*="ico-before"]:not(.btn).ico-after-kor::before,
[class*="ico-before"]:not(.btn).ico-after-kor::after,
[class*="ico-after"]:not(.btn).ico-after-kor::before,
[class*="ico-after"]:not(.btn).ico-after-kor::after {
  background-image: url(../images/icon/table-16-kor.svg);
}

[class*="ico-before"]:not(.btn).ico-after-usa::before,
[class*="ico-before"]:not(.btn).ico-after-usa::after,
[class*="ico-after"]:not(.btn).ico-after-usa::before,
[class*="ico-after"]:not(.btn).ico-after-usa::after {
  background-image: url(../images/icon/table-16-usa.svg);
}

[class*="ico-before"]:not(.btn).ico-after-refresh::before,
[class*="ico-before"]:not(.btn).ico-after-refresh::after,
[class*="ico-after"]:not(.btn).ico-after-refresh::before,
[class*="ico-after"]:not(.btn).ico-after-refresh::after {
  background-color: #b0b8c1;
  border-radius: 50%;
  background-image: url(../images/icon/table-12-refresh.svg);
  background-size: 1.2rem 1.2rem;
}

[class*="ico-before"]:not(.btn).ico-before-mobile::before,
[class*="ico-before"]:not(.btn).ico-before-mobile::after,
[class*="ico-after"]:not(.btn).ico-before-mobile::before,
[class*="ico-after"]:not(.btn).ico-before-mobile::after {
  background-image: url(../images/icon/etc-16-mobile.png);
}

[class*="ico-before"]:not(.btn).ico-before-setAlarm::before,
[class*="ico-before"]:not(.btn).ico-before-setAlarm::after,
[class*="ico-after"]:not(.btn).ico-before-setAlarm::before,
[class*="ico-after"]:not(.btn).ico-before-setAlarm::after {
  background-image: url(../images/icon/etc-16-alarm.svg);
}

[class*="ico-before"]:not(.btn).ico-before-setEmail::before,
[class*="ico-before"]:not(.btn).ico-before-setEmail::after,
[class*="ico-after"]:not(.btn).ico-before-setEmail::before,
[class*="ico-after"]:not(.btn).ico-before-setEmail::after {
  background-image: url(../images/icon/etc-16-email.svg);
}

[class*="ico-before"]:not(.btn).ico-before-error,
[class*="ico-after"]:not(.btn).ico-before-error {
  color: #fc1717;
}

[class*="ico-before"]:not(.btn).ico-before-error::before,
[class*="ico-before"]:not(.btn).ico-before-error::after,
[class*="ico-after"]:not(.btn).ico-before-error::before,
[class*="ico-after"]:not(.btn).ico-before-error::after {
  background-image: url(../images/icon/form-16-notice-error.png);
}

[class*="ico-before"]:not(.btn).ico-before-attach::before,
[class*="ico-before"]:not(.btn).ico-before-attach::after,
[class*="ico-after"]:not(.btn).ico-before-attach::before,
[class*="ico-after"]:not(.btn).ico-before-attach::after {
  background-image: url(../images/icon/table-16-file.svg);
}

[class*="ico-before"]:not(.btn).ico-before-kor::before,
[class*="ico-before"]:not(.btn).ico-before-kor::after,
[class*="ico-after"]:not(.btn).ico-before-kor::before,
[class*="ico-after"]:not(.btn).ico-before-kor::after {
  background-image: url(../images/icon/tab-20-kor.svg);
}

[class*="ico-before"]:not(.btn).ico-before-usa::before,
[class*="ico-before"]:not(.btn).ico-before-usa::after,
[class*="ico-after"]:not(.btn).ico-before-usa::before,
[class*="ico-after"]:not(.btn).ico-before-usa::after {
  background-image: url(../images/icon/tab-20-usa.svg);
}

[class*="ico-before"]:not(.btn).ico-before-bond::before,
[class*="ico-before"]:not(.btn).ico-before-bond::after,
[class*="ico-after"]:not(.btn).ico-before-bond::before,
[class*="ico-after"]:not(.btn).ico-before-bond::after {
  background-image: url(../images/icon/tab-20-bond.svg);
}

[class*="ico-before"]:not(.btn).ico-before-otcBond::before,
[class*="ico-before"]:not(.btn).ico-before-otcBond::after,
[class*="ico-after"]:not(.btn).ico-before-otcBond::before,
[class*="ico-after"]:not(.btn).ico-before-otcBond::after {
  background-image: url(../images/icon/tab-20-otcBond.svg);
}

[class*="ico-before"]:not(.btn).ico-before-memo::before,
[class*="ico-before"]:not(.btn).ico-before-memo::after,
[class*="ico-after"]:not(.btn).ico-before-memo::before,
[class*="ico-after"]:not(.btn).ico-before-memo::after {
  background-image: url(../images/icon/label-20-memo.svg);
}

[class*="ico-before"]:not(.btn).ico-before-kakao::before,
[class*="ico-before"]:not(.btn).ico-before-kakao::after,
[class*="ico-after"]:not(.btn).ico-before-kakao::before,
[class*="ico-after"]:not(.btn).ico-before-kakao::after {
  background-image: url(../images/icon/title-20-kakao.svg);
}

[class*="ico-before"]:not(.btn).ico-before-calendar::before,
[class*="ico-before"]:not(.btn).ico-before-calendar::after,
[class*="ico-after"]:not(.btn).ico-before-calendar::before,
[class*="ico-after"]:not(.btn).ico-before-calendar::after {
  background-image: url(../images/icon/btn-24-calendar-solid.svg);
}

[class*="ico-before"]:not(.btn).ico-before-alarm::before,
[class*="ico-before"]:not(.btn).ico-before-alarm::after,
[class*="ico-after"]:not(.btn).ico-before-alarm::before,
[class*="ico-after"]:not(.btn).ico-before-alarm::after {
  background-image: url(../images/icon/tooltip-24-alarm@2x.png);
}

[class*="ico-before"]:not(.btn).ico-before-up,
[class*="ico-after"]:not(.btn).ico-before-up {
  color: #e22d72;
}

[class*="ico-before"]:not(.btn).ico-before-up::before,
[class*="ico-after"]:not(.btn).ico-before-up::before {
  background-size: 1.6rem;
  background-color: #fff4fa;
  background-image: url(../images/icon/rank-16-up.svg);
  border-radius: 50%;
}

[class*="ico-before"]:not(.btn).ico-before-down,
[class*="ico-after"]:not(.btn).ico-before-down {
  color: #1c4fde;
}

[class*="ico-before"]:not(.btn).ico-before-down::before,
[class*="ico-after"]:not(.btn).ico-before-down::before {
  background-size: 1.6rem;
  background-color: #eef5ff;
  background-image: url(../images/icon/rank-16-down.svg);
  border-radius: 50%;
}

[class*="ico-before"]:not(.btn).ico-before-stand,
[class*="ico-after"]:not(.btn).ico-before-stand {
  color: #9398a0;
}

[class*="ico-before"]:not(.btn).ico-before-stand::before,
[class*="ico-after"]:not(.btn).ico-before-stand::before {
  background-size: 1.6rem;
  background-color: #f1f3f5;
  background-image: url(../images/icon/rank-16-default.svg);
  border-radius: 50%;
}

[class*="ico-before"]:not(.btn).ico-before-person::before,
[class*="ico-before"]:not(.btn).ico-before-person::after,
[class*="ico-after"]:not(.btn).ico-before-person::before,
[class*="ico-after"]:not(.btn).ico-before-person::after {
  background-image: url(../images/icon/title-32-person.svg);
}

[class*="ico-before"]:not(.btn).ico-before-order::before,
[class*="ico-before"]:not(.btn).ico-before-order::after,
[class*="ico-after"]:not(.btn).ico-before-order::before,
[class*="ico-after"]:not(.btn).ico-before-order::after {
  background-image: url(../images/icon/title-32-order.svg);
}

[class*="ico-before"]:not(.btn).ico-before-mp::before,
[class*="ico-before"]:not(.btn).ico-before-mp::after,
[class*="ico-after"]:not(.btn).ico-before-mp::before,
[class*="ico-after"]:not(.btn).ico-before-mp::after {
  background-image: url(../images/icon/title-32-mp.svg);
}

[class*="ico-before"]:not(.btn).ico-before-contract::before,
[class*="ico-before"]:not(.btn).ico-before-contract::after,
[class*="ico-after"]:not(.btn).ico-before-contract::before,
[class*="ico-after"]:not(.btn).ico-before-contract::after {
  background-image: url(../images/icon/title-32-contract.svg);
}

[class*="ico-before"]:not(.btn).ico-before-company::before,
[class*="ico-before"]:not(.btn).ico-before-company::after,
[class*="ico-after"]:not(.btn).ico-before-company::before,
[class*="ico-after"]:not(.btn).ico-before-company::after {
  background-image: url(../images/icon/title-32-company.svg);
}

[class*="ico-before"]:not(.btn).ico-before-customer::before,
[class*="ico-before"]:not(.btn).ico-before-customer::after,
[class*="ico-after"]:not(.btn).ico-before-customer::before,
[class*="ico-after"]:not(.btn).ico-before-customer::after {
  background-image: url(../images/icon/title-32-customer.svg);
}

[class*="ico-before"]:not(.btn).ico-before-etc::before,
[class*="ico-before"]:not(.btn).ico-before-etc::after,
[class*="ico-after"]:not(.btn).ico-before-etc::before,
[class*="ico-after"]:not(.btn).ico-before-etc::after {
  background-image: url(../images/icon/title-32-etc.svg);
}

[class*="ico-before"]:not(.btn).ico-before-admin::before,
[class*="ico-before"]:not(.btn).ico-before-admin::after,
[class*="ico-after"]:not(.btn).ico-before-admin::before,
[class*="ico-after"]:not(.btn).ico-before-admin::after {
  background-image: url(../images/icon/title-32-admin.svg);
}

[class*="ico-before"]:not(.btn).ico-before-menu1::before,
[class*="ico-after"]:not(.btn).ico-before-menu1::before {
  background-image: url(../images/common/gnb-32-menu1.svg);
}

[class*="ico-before"]:not(.btn).ico-before-menu2::before,
[class*="ico-after"]:not(.btn).ico-before-menu2::before {
  background-image: url(../images/common/gnb-32-menu2.svg);
}

[class*="ico-before"]:not(.btn).ico-before-menu3::before,
[class*="ico-after"]:not(.btn).ico-before-menu3::before {
  background-image: url(../images/common/gnb-32-menu3.svg);
}

[class*="ico-before"]:not(.btn).ico-before-menu4::before,
[class*="ico-after"]:not(.btn).ico-before-menu4::before {
  background-image: url(../images/common/gnb-32-menu4.svg);
}

[class*="ico-before"]:not(.btn).ico-after-sortUp::before,
[class*="ico-before"]:not(.btn).ico-after-sortUp::after,
[class*="ico-after"]:not(.btn).ico-after-sortUp::before,
[class*="ico-after"]:not(.btn).ico-after-sortUp::after {
  width: 0.6rem;
  height: 0.6rem;
  margin-left: 0.6rem;
  background-image: url(../images/icon/ic-6-sort-up.svg);
}

[class*="ico-before"]:not(.btn).ico-after-sortDown::before,
[class*="ico-before"]:not(.btn).ico-after-sortDown::after,
[class*="ico-after"]:not(.btn).ico-after-sortDown::before,
[class*="ico-after"]:not(.btn).ico-after-sortDown::after {
  width: 0.6rem;
  height: 0.6rem;
  margin-left: 0.6rem;
  background-image: url(../images/icon/ic-6-sort-down.svg);
}

/* **** bar 형태 list ****/
.list-bar {
  display: flex;
  align-items: center;
}

.list-bar + .list-badge {
  margin-top: 1.2rem;
}

.list-bar .list {
  position: relative;
  font-size: 1.4rem;
  font-weight: 400;
}

.list-bar .list::after {
  height: 1.2rem;
  transform: translateY(-50%);
}

.list-bar .list:not(:first-child) {
  margin-left: 1.2rem;
  padding-left: 1.2rem;
}

.list-bar .list:not(:first-child)::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  background: #e1e4e9;
}

.list-bar.gray .list {
  color: #9398a0;
}

.list-bar.sm .list {
  color: #616974;
  font-size: 1.2rem;
}

.list-bar.sm + .list-between.gray-box {
  margin-top: 0.8rem;
}

.list-bar.md .list {
  font-size: 1.6rem;
}

.list-bar.md .list:not(:first-child) {
  margin-left: 0.8rem;
  padding-left: 0.8rem;
}

.list-bar.stats {
  margin: 2.4rem 0 3.8rem 0;
}

.list-bar.stats .list {
  flex: 1;
  height: 8.8rem;
}

.list-bar.stats .list .tit {
  font-size: 1.2rem;
  height: 1.7rem;
  display: flex;
  align-items: center;
  line-height: 1.2rem;
  gap: 1rem;
}
.list-bar.stats .list .tit span {
  display: inline-block;
  height: 1.7rem;
  border-radius: 10rem;

  color: #fff;
  font-size: 1rem;
  line-height: 1.7rem;
  padding: 0 1rem;
}
.list-bar.stats .list .tit span.icon-01 {
  background: rgba(33, 34, 102, 0.8);
}
.list-bar.stats .list .tit span.icon-02 {
  background: rgba(121, 122, 163, 0.8);
}
.list-bar.stats .list strong {
  color: #151618;
  font-size: 2.4rem;
  font-weight: 700;
}

.list-bar.stats .list [class*="ico-before"] {
  display: flex;
  margin-top: 0.4rem;
}

.list-bar.stats .list::after {
  height: 7.2rem;
}

.list-bar.stats .list:not(:first-child) {
  padding-left: 6.4rem;
}

.modal {
  /* **** bar 형태 list ****/
}

.modal .list-bar .list:not(:first-child) {
  margin-left: 0.8rem;
  padding-left: 0.8rem;
}

.modal .group-edit .list-bar .list:not(:first-child) {
  margin-left: 1.2rem;
  padding-left: 1.2rem;
}

/* **** dot 형태 list ****/
.list-dot {
  display: flex;
  align-items: center;
}

.list-dot .list {
  position: relative;
  color: #616974;
  font-size: 1.4rem;
  font-weight: 400;
}

.list-dot .list::after {
  margin-top: -0.1rem;
}

.list-dot .list:not(:first-child) {
  margin-left: 0.4rem;
  padding-left: 0.4rem;
}

.list-dot .list:not(:first-child)::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.2rem;
  height: 0.2rem;
  margin-left: -0.1rem;
  border-radius: 50%;
  background: #616974;
}

.list-dot.sm .list {
  font-size: 1.2rem;
}

/* **** noti ****/
.noti-wrap.center {
  text-align: center;
}

.noti-wrap.center .noti-title {
  display: inline-block;
}

.noti-title.sm {
  padding-left: 2rem;
  font-size: 1.2rem;
  background: url(../images/icon/info-16-notice.svg) no-repeat left 0.1rem/1.6rem;
}

.noti-title.sm.col-gray {
  color: #9398a0;
  background: url(../images/icon/info-16-notice-gray.svg) no-repeat left 0.1rem/1.6rem;
}

.noti-title.md {
  padding-left: 3.2rem;
  font-size: 1.6rem;
  font-weight: 700;
  background: url(../images/icon/info-24-notice.png) no-repeat left top/2.4rem;
}

.noti-title.md + .text-list {
  margin-top: 1.2rem;
}

/* **** text list ****/
.text-list.mt4 {
  margin-top: 0.4rem;
}

.text-list.mt8 {
  margin-top: 0.8rem;
}

.text-list.mt24 {
  margin-top: 2.4rem;
}

.text-list > li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 1.4rem;
  color: #616974;
}

.text-list > li + li {
  margin-top: 0.4rem;
}

.text-list > li::before {
  position: absolute;
  top: 0;
  left: 0;
}

.text-list.sm > li {
  color: #9398a0;
  padding-left: 0.9rem;
  font-size: 1.2rem;
}

.text-list.sm > li + li {
  margin-top: 0.2rem;
}

.text-list.dot > li::before {
  content: "";
  display: block;
  background-color: #616974;
  border-radius: 50%;
  width: 0.4rem;
  height: 0.4rem;
  top: 0.8rem;
}

.text-list.dot.sm > li::before {
  width: 0.2rem;
  height: 0.2rem;
}

.text-list.ordered > li {
  padding-left: 2.4rem;
  text-indent: -1.8rem;
}

.text-list.ordered > li::before {
  display: none;
}

.text-list.ordered > li > .ordered > li {
  padding-left: 2.4rem;
}

.text-list.ordered > li > .ordered > li > .ordered > li {
  padding-left: 1.6rem;
}

.text__date_type-01 {
  font-size: 1.2rem;
  color: #9398a0;
}

/* **** text list ****/
.list-between.mt24 {
  margin-top: 2.4rem;
}

.list-between .list {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.list-between .list {
  gap: 1.6rem;
  font-size: 1.4rem;
}

.list-between .list + li {
  margin-top: 0.8rem;
}

.list-between .list-result {
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid #e1e4e9;
}

.list-between.gray-box {
  padding: 2rem;
  background-color: #f8f9fa;
  border-radius: 1.6rem;
}

.list-between.gray-box .list {
  color: #32353a;
}

.list-between.gray-box .list + .list {
  margin-top: 1.2rem;
}

.list-between .tit {
  color: #616974;
  white-space: nowrap;
}

.list-between .result {
  font-weight: 500;
}

.list-between .result.point {
  color: #e22d72;
}

.list-between .result .sub {
  margin-left: 0.4rem;
  font-size: 1.2rem;
}

/* ****  팝업 :: 배경 **** */
.modal-back,
.modal {
  display: none;
  visibility: hidden;
  z-index: -1;
}

.modal-back.in,
.modal.in {
  visibility: visible;
}

.modal-back {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.25);
}

.modal-back.in {
  display: block;
  z-index: 1000;
}

/* ****  팝업 :: 구조  **** */
.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  visibility: hidden;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  opacity: 0;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  transition:
    visibility 0.15s 0.3s,
    z-index 0s 0.3s,
    opacity 0.2s;
}

.modal.in {
  z-index: 1010;
  transition-delay: 0s;
  opacity: 1;
}

.modal.shown {
  display: flex;
}

.modal.shown.in .modal-dialog {
  transform: translateY(0);
  opacity: 1;
}

.modal .btn-close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 3.6rem;
  height: 3.6rem;
  background: url(../images/icon/modal-24-close.svg) no-repeat center/2.4rem 2.4rem;
}

/* ****  팝업 :: 종류  **** */
.modal.bottom-popup {
  /*  바텀팝업 */
  justify-content: flex-end;
  overflow: hidden;
}

.modal.bottom-popup .modal-dialog {
  height: auto;
  transform: translateY(100%);
}

.modal.bottom-popup .modal-header {
  height: 8rem;
  padding: 0 2rem;
  align-items: center;
  font-size: 2rem;
  justify-content: flex-start;
}

.modal.bottom-popup .modal-content {
  border-radius: 2.4rem 2.4rem 0 0;
}

.modal.bottom-popup .modal-conts {
  margin-bottom: 0;
  padding: 0 2rem 1.2rem;
}

.modal.bottom-popup .modal-btn {
  padding: 2rem;
  padding-bottom: 2rem;
}

.modal.bottom-popup .modal-btn .btn {
  width: 100%;
  height: 5.6rem;
  border-radius: 1.6rem;
  font-size: 1.6rem;
  font-weight: 700;
}

.modal.bottom-popup .btn-close {
  top: 2.2rem;
  right: 2.2rem;
}

/* ****  팝업 :: 사이즈  **** */
.modal.alert {
  /*  얼럿팝업 */
}

.modal.alert .modal-dialog {
  width: 30.8rem;
  max-height: min(90%, 50rem);
}

.modal.alert .modal-conts {
  text-align: center;
  margin-bottom: 0;
  padding: 4rem 2.4rem;
}

.modal.alert .modal-conts .status-icon {
  display: flex;
  justify-content: center;
}

.modal.alert .modal-conts .status-icon + .modal-title {
  margin-top: 2.4rem;
}

.modal.alert .modal-conts .modal-title {
  color: #151618;
  font-size: 1.8rem;
  font-weight: 700;
}

.modal.alert .modal-conts .modal-title + .modal-msg {
  margin-top: 0.8rem;
}

.modal.alert .modal-conts .modal-desc {
  font-size: 1.6rem;
}

.modal.alert .modal-conts .modal-desc + .modal-quest {
  margin-top: 2rem;
}

.modal.alert .modal-conts .modal-desc + .modal-msg {
  margin-top: 3.2rem;
}

.modal.alert .modal-conts .modal-quest {
  margin-top: 2.8rem;
  font-size: 1.4rem;
}

.modal.alert .modal-conts .modal-quest + .text-box {
  margin-top: 1.2rem;
}

.modal.alert .modal-conts .text-box .txt-set + .txt-set {
  margin-top: 0.8rem;
}

.modal.alert .modal-conts .modal-msg {
  font-size: 1.4rem;
}

.modal.alert .modal-conts .status-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 1.2rem;
}

.modal.alert .modal-conts .status-icon + .modal-desc {
  margin-top: 2.4rem;
}

.modal.alert .modal-conts .text-box {
  text-align: left;
}

.modal.alert .modal-conts .modal-btn {
  gap: 0.8rem;
  padding: 3.2rem 0 0;
}

.modal.alert .modal-conts .modal-btn .btn {
  min-width: 8rem;
}

.modal.alert .modal-btn {
  gap: 0.8rem;
  padding: 3.2rem 2.4rem 0;
}

.modal.alert .modal-btn .btn {
  min-width: 8rem;
}

.modal.sm .modal-dialog {
  width: 41.6rem;
  max-height: min(90%, 60rem);
}

.modal.sm .modal-conts .search-box {
  margin-top: -1.6rem;
}

.modal.sm .modal-conts .modal-btn {
  gap: 0.8rem;
  padding: 4rem 0 0;
}

.modal.sm .modal-btn {
  gap: 0.8rem;
}

.modal.sm .modal-btn .btn {
  min-width: 8rem;
}

.modal.md .modal-dialog {
  width: 63.2rem;
  max-height: min(90%, 60rem);
}

.modal.md .modal-conts .modal-btn {
  padding: 4rem 0 0;
}

.modal.lg .modal-dialog {
  width: 84.8rem;
  max-height: min(90%, 70rem);
}

.modal.lg .modal-conts {
  margin-bottom: 0;
  padding: 1.2rem 2.4rem 3.2rem;
}

.modal.lg .modal-conts .form-set + .table-layout.data {
  margin-top: 1.6rem;
}

.modal.lg .modal-conts .modal-btn {
  padding: 4rem 0 0;
}

.modal.xl .modal-dialog {
  width: 106.4rem;
  max-height: min(90%, 70rem);
}

.modal.xl .modal-conts {
  margin-bottom: 3.2rem;
  padding: 0.4rem 2.4rem 0rem;
}

.modal.xl .modal-conts .form-set + .table-layout.data {
  margin-top: 1.6rem;
}

.modal.xl .modal-conts .modal-btn {
  padding: 3.2rem 0 0;
}

.modal.xl .table-group-set {
  gap: 2.4rem;
}

.modal.xl .modal-btn {
  gap: 0.8rem;
}

.modal.full {
  overflow: hidden;
}

.modal.full .modal-dialog {
  width: 100%;
  height: 100%;
  max-height: 100%;
  transform: translateY(0);
}

.modal.full .modal-header {
  align-items: center;
  justify-content: center;
}

.modal.full .modal-content {
  height: 100%;
  border-radius: 0;
}

.modal.full .modal-conts {
  margin-bottom: 0;
  flex: 1;
}

.modal.full .modal-btn {
  padding-top: 3.2rem;
  gap: 0.8rem;
}

.modal.fixed-height .modal-dialog {
  height: 100%;
}

.modal.fixed-height .modal-conts {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.modal.fixed-height .modal-conts .scroll-area {
  flex: 1;
}

.modal.fixed-height .table-group {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
}

.modal.fixed-height .table-group .table-layout {
  height: 100%;
}

.modal.fixed-height .fixed-con {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.modal.fixed-height .scroll-area.mt16 {
  margin-top: 1.6rem;
}

.modal.fixed-height .tab-panel {
  display: none;
}

.modal.fixed-height .tab-panel.active {
  display: flex;
}

.modal.fixed-height-short.md .modal-dialog {
  max-height: 44.4rem;
}

.modal.full-height .modal-dialog {
  max-height: 90%;
}

.is-mobile .modal.sm .modal-dialog {
  max-width: 32rem;
}

/* ****  팝업  **** */
.modal:not(.bottom-popup) .modal-dialog {
  transform: translateY(2rem);
}

.modal .modal-dialog {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  position: relative;
  z-index: 1020;
  width: 100%;
  max-width: 100%;
  max-height: 90%;
  transition: transform 0.3s ease-out;
  opacity: 0;
}

.modal .modal-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  max-height: 100%;
  background-color: #fff;
  border-radius: 1.2rem;
  outline-color: transparent;
  transition: outline-color 0.1s;
  box-shadow: 0 0 2.4rem 1.2rem rgba(0, 0, 0, 0.12);
}

.modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 6.4rem;
  padding: 0 2.4rem;
  flex-shrink: 0;
}

.modal .modal-header .modal-title {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  color: #151618;
  font-size: 1.8rem;
  font-weight: 700;
}

.modal .modal-conts {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  padding: 1.6rem 2.4rem 0;
  margin-bottom: 3.2rem;
}

.modal .modal-conts::-webkit-scrollbar {
  width: 0.8rem;
}

.modal .modal-conts::-webkit-scrollbar-thumb {
  background-color: #c6c6c6;
  border-radius: 0.8rem;
}

.modal .modal-conts::-webkit-scrollbar-track {
  background-color: #d8d8d8;
}

.modal .modal-conts .modal-btn {
  margin-top: auto;
}

.modal .modal-conts.pt0 {
  padding-top: 0;
}

.modal .modal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  width: 100%;
  padding: 0 2.4rem 4rem;
}

.modal .modal-btn.pt16 {
  padding-top: 1.6rem !important;
}

.is-mobile {
  /* ****  팝업 :: 사이즈  **** */
}

.is-mobile .modal.full .modal-header {
  align-items: center;
  justify-content: center;
}

.is-mobile .modal.full .modal-content {
  border-radius: 0;
}

.is-mobile .modal.full .modal-conts {
  padding: 0 2rem;
}

.is-mobile .modal.bottom-popup .modal-header {
  height: 8rem;
  padding: 0 2rem;
  align-items: center;
}

.is-mobile .modal.bottom-popup .modal-content {
  border-radius: 2.4rem 2.4rem 0 0;
}

.is-mobile .modal.bottom-popup .modal-conts {
  margin-bottom: 0;
  padding: 0 2rem 1.2rem;
}

.is-mobile .modal-dialog .modal-header {
  align-items: flex-end;
  justify-content: flex-start;
  height: 5.6rem;
}

.is-mobile .modal-dialog .modal-header .modal-title {
  font-size: 2rem;
}

.is-mobile .modal-dialog .modal-content {
  border-radius: 2.4rem;
}

.is-mobile .modal-dialog .modal-conts {
  padding: 2.4rem 2rem 2rem;
  margin-bottom: 0;
}

.is-mobile .modal-dialog .modal-conts:has(+ .modal-btn) {
  margin-bottom: 0;
}

.is-mobile .modal-dialog .modal-conts .modal-btn {
  padding: 2rem 0 0;
}

.is-mobile .modal-dialog .modal-btn {
  width: 100%;
  padding: 2rem 2rem 2rem;
}

.is-mobile .modal-dialog .modal-btn .btn {
  flex: 1;
  height: 5.6rem;
  border-radius: 1.6rem;
  font-size: 1.6rem;
  font-weight: 500;
}

.is-mobile .modal-dialog .btn {
  height: 4rem;
  padding: 0 1.6rem;
  border-radius: 0.8rem;
  font-size: 1.4rem;
  font-weight: 400;
}

/* ****  툴팁  **** */
.tooltip {
  position: absolute;
  display: none;
  z-index: 9999;
  white-space: nowrap;
  box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.08);
  transition: opacity 0.2s ease;
  /* 선택적 */
}

.tooltip.is-show {
  display: block;
}

.tooltip.sidebar {
  width: 26.6rem;
  background: #616974;
  color: #fff;
  padding: 1.6rem 4.4rem 1.6rem 1.6rem;
  border-radius: 0.8rem;
  font-size: 1.4rem;
}

.tooltip.header {
  display: none;
  top: 5.8rem;
  right: 10rem;
  height: 4rem;
  padding: 0.8rem 4rem 0.8rem 1.2rem;
  border-radius: 2rem;
  background: #6839ff;
  color: #fff;
  font-size: 1.3rem;
  z-index: 0;
}

.tooltip.header.show {
  display: block;
}

.tooltip.header::after {
  top: -1.1rem;
  right: 2.4rem;
  border-bottom-color: #6839ff;
}

.tooltip.password {
  display: none;
  top: 1rem;
  left: 50%;
  padding: 0.6rem 1.3rem 0.6rem 1.6rem;
  background: #151618;
  border-radius: 1.4rem;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 400;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
  transform: translate(-50%, 0);
  z-index: inherit;
}

.tooltip.password.show {
  display: block;
}

.tooltip.password::after {
  border-top-color: #151618;
  bottom: -1.1rem;
  left: 50%;
  transform: translateX(-50%);
}

.tooltip .personal-info {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 400;
}

.tooltip .personal-info .user {
  color: #fff;
  font-size: 1.4rem;
}

.tooltip .ico-before-phone::before {
  width: 1.2rem;
  height: 1.2rem;
  background-image: url(../images/icon/etc-12-mobile-w.png);
}

.tooltip .tooltip-con {
  font-size: 1.2rem;
  font-weight: 400;
}

.tooltip.header .tooltip-close {
  top: 0;
}

.tooltip .tooltip-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 4rem;
  height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: 1.6rem;
  background-position: center;
  flex-shrink: 0;
  background-image: url(../images/icon/tooltip-16-close.svg);
}

/* 기본 말풍선 꼬리 (top 방향 기준) */
.tooltip {
  /* top */
  /* bottom */
  /* left */
  /* right */
}

.tooltip::after {
  content: "";
  position: absolute;
  border: 6px solid transparent;
}

.tooltip[data-position="top"]::after {
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%);
}

.tooltip[data-position="bottom"]::after {
  top: -11px;
  left: 7.2rem;
  transform: translateX(-50%);
}

.tooltip[data-position="left"]::after {
  top: 50%;
  right: -11px;
  transform: translateY(-50%);
}

.tooltip[data-position="right"]::after {
  top: 50%;
  left: -11px;
  transform: translateY(-50%);
}

.tooltip.sidebar {
  /* top */
  /* bottom */
  /* left */
  /* right */
}

.tooltip.sidebar[data-position="top"]::after {
  border-top-color: #616974;
}

.tooltip.sidebar[data-position="bottom"]::after {
  left: 7.2rem;
  border-bottom-color: #616974;
}

.tooltip.sidebar[data-position="left"]::after {
  border-left-color: #616974;
}

.tooltip.sidebar[data-position="right"]::after {
  border-right-color: #616974;
}

.table-group {
  position: relative;
  width: 100%;
}

.table-group.mt12 {
  margin-top: 1.2rem;
}

.table-group.mt16 {
  margin-top: 1.6rem;
}

.table-group.mt24 {
  margin-top: 2.4rem;
}

.table-group.mt40 {
  margin-top: 4rem;
}

.func-check-data.has-data .table-top,
.func-check-data.has-data .table-layout,
.func-check-data.has-data .btn-box.bottom,
.func-search-data.has-data .table-top,
.func-search-data.has-data .table-layout,
.func-search-data.has-data .btn-box.bottom {
  display: flex;
}

.func-check-data.has-data .no-data,
.func-search-data.has-data .no-data {
  display: none;
}

.func-check-data .table-top,
.func-check-data .table-layout,
.func-check-data .btn-box.bottom,
.func-search-data .table-top,
.func-search-data .table-layout,
.func-search-data .btn-box.bottom {
  display: none;
}

.table-set {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: row;
  gap: 4rem;
}

.table-set.half .table-layout {
  width: calc(50% - 2rem);
}

.table-group-set {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: row;
  width: 100%;
  gap: 4rem;
}

.table-group-set.half .table-group {
  width: calc(50% - 2rem);
}

.table-group-set.mt24 {
  margin-top: 2.4rem;
}

.table-group-set.mt40 {
  margin-top: 4rem;
}

.table-top {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  flex-direction: row;
  margin-bottom: 0.8rem;
}

.table-top.type_01 {
  align-items: center;
  margin-bottom: 0.5rem;
}

.table-top .right-tip {
  color: #616974;
  font-size: 13px;
}

.table-top .right {
  margin-left: auto;
}

.table-top.mt40 {
  margin-top: 4rem;
}

.table-top.has-btn {
  align-items: flex-start;
}

.table-top.has-btn .desc {
  margin-left: 0;
}

.table-top .tit-h4 {
  margin-bottom: 0;
  font-weight: 400;
}

.table-top .tit-h4 .ico-before-edit {
  margin-bottom: 0.2rem;
}

.table-top .user-name {
  margin-right: 1.6rem;
  font-size: 1.6rem;
  font-weight: 700;
}

.table-top .desc {
  margin-left: 1.2rem;
  color: #616974;
  font-size: 1.2rem;
}

.table-top .desc.col-point {
  color: #e22d72;
}

.table-top .memo {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  margin-left: 1.6rem;
  margin-top: -0.4rem;
  padding: 1rem 2.4rem 1rem 3.2rem;
  background-color: #fff3f3;
  border-radius: 1.2rem;
  font-size: 1.2rem;
}

.table-top .memo::after {
  content: "";
  position: absolute;
  border: 0.8rem solid transparent;
  top: 0.8rem;
  left: -1.6rem;
  border-right-color: #fff3f3;
}

.table-top .memo .ico-before-error {
  margin-left: -2rem;
}

.table-top .memo .con {
  display: block;
}

.table-top.col-type {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.4rem;
}

.table-top.col-type .desc {
  margin-left: 0;
}

.table-top.between {
  align-items: center;
  justify-content: space-between;
}

.table-top[class*="ico-"] {
  padding-left: 5.2rem;
  padding-top: 0.4rem;
}

.table-top[class*="ico-"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}

.table-top.ico-calc .form-set {
  margin-left: 2.4rem;
}

.table-top.ico-calc::before {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: #f1f3f5 url(../images/icon/table-24-calcbg.svg) no-repeat center/2.4rem;
}

.table-top.ico-noti {
  min-height: 4.8rem;
}

.table-top.ico-noti::before {
  width: 4.8rem;
  height: 4.8rem;
  background: #fff url(../images/icon/table-48-notice.svg) no-repeat center/4.8rem;
}

.table-group:has(.error-wrap.is-error) {
  padding-bottom: 3rem;
}

.error-wrap {
  display: none;
  position: absolute;
  left: 0;
  width: 100%;
  margin-top: 0.8rem;
  text-align: center;
}

.error-wrap .txt {
  display: inline-block;
  padding-left: 2rem;
  color: #fc1717;
  font-size: 1.2rem;
  background: url(../images/icon/info-16-error.svg) no-repeat left 0.1rem/1.6rem;
}

.error-wrap.is-error {
  display: block;
}

.table-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 0.8rem;
}

.table-foot .btn-box.right {
  margin-left: auto;
}

.calc-set {
  position: relative;
}

.calc-set .tit {
  color: #9398a0;
  font-size: 1.2rem;
}

.calc-set .tit .kw-badge {
  margin-left: 0.8rem;
}

.calc-set .tit + .calc {
  margin-top: 0.2rem;
}

.calc-set .calc {
  font-size: 1.2rem;
}

.calc-set .calc > * {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

.calc-set .calc .total {
  font-size: 1.6rem;
}

.calc-set .calc .unit {
  margin-left: 0.4rem;
}

.sidebar-layout .table-layout.data table {
  table-layout: fixed;
}

.table-layout .danger-1 {
  color: #e91616;
}

.table-layout .danger-2 {
  color: #fb8800;
}

.table-layout .danger-3 {
  color: #ffc342;
}

.table-layout .danger-4 {
  color: #72c90f;
}

.table-layout .danger-5 {
  color: #34b0cc;
}

.table-layout .danger-6 {
  color: #173fac;
}

.table-layout table.h-100 {
  height: 100%;
}

.table-layout.mt16 {
  margin-top: 1.6rem;
}

.table-layout.mt24 {
  margin-top: 2.4rem;
}

.table-layout.mt40 {
  margin-top: 4rem;
}

.table-layout.default {
  border-top: 1px solid #9398a0;
}

.table-layout.default table {
  width: 100%;
}

.table-layout.default tr {
  border-bottom: 1px solid #e1e4e9;
}

.table-layout.default th,
.table-layout.default td {
  padding: 1.6rem;
  vertical-align: middle;
  font-size: 1.4rem;
  font-weight: 400;
  text-align: left;
}

.table-layout.default th .desc {
  font-size: 1.2rem;
}

.table-layout.default tbody th {
  background-color: #f8f9fa;
}

.table-layout.default tbody td {
  background-color: #fff;
}

.table-layout.data {
  overflow: auto;
  border-top: 1px solid #9398a0;
  /* 첫 번째 열 고정 */
  /* 두 번째 열 고정 */
  /* 헤더 z-index 보정 */
}

.table-layout.data.table-fixed table {
  table-layout: fixed;
}

.table-layout.data:has(.is-selected) td {
  color: #9398a0;
}

.table-layout.data:has(.is-selected) .is-selected td {
  background-color: #f4f9ff;
  color: #32353a;
}

.table-layout.data.sm th,
.table-layout.data.sm td {
  height: 3.6rem;
  padding: 0.6rem 0.8rem;
  font-size: 1.3rem;
}

.table-layout.data table {
  table-layout: auto;
  border-collapse: collapse;
  width: 100%;
}

.table-layout.data thead tr + tr {
  border-top: 1px solid #f1f3f5;
}

.table-layout.data thead th {
  position: sticky;
  top: 0;
  padding: 1rem 1.2rem;
  background: #f8f9fa;
  border-top: 0;
  border-bottom: 0;
  color: #616974;
  z-index: 2;
}

.table-layout.data tr th:first-child,
.table-layout.data tr td:first-child {
  border-left: none;
}

.table-layout.data tr th:last-child,
.table-layout.data tr td:last-child {
  border-right: none;
}

.table-layout.data tr.is-add td {
  background-color: #fff9fc;
}

.table-layout.data tr.is-new .tit .ico-only-new {
  display: block;
}

.table-layout.data tr .tit {
  display: flex;
  align-items: center;
}

.table-layout.data tr .tit span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-layout.data tr .tit .ico-only-new {
  display: none;
  margin-left: 0.6rem;
}

.table-layout.data tr:has(.form-check input:checked) td {
  background-color: #f4f9ff;
}

.table-layout.data tr:hover td {
  background-color: #f8f9fa;
}

.table-layout.data tr:has(.no-data):hover td {
  background-color: #fff;
}

.table-layout.data tr:has(.no-data) td {
  border-bottom: 0;
}

.table-layout.data th,
.table-layout.data td {
  height: 4rem;
  padding: 0.8rem 1.2rem;
  border: 1px solid #f1f3f5;
  white-space: nowrap;
  background: #fff;
  color: #32353a;
  font-size: 1.4rem;
  font-weight: 400;
  text-align: center;
}

.table-layout.data th.text-left,
.table-layout.data td.text-left {
  text-align: left;
}

.table-layout.data th.last,
.table-layout.data td.last {
  border-right: 1px solid #e1e4e9;
}

.table-layout.data td.masked {
  position: relative;
  color: transparent;
  /* 기본 텍스트 숨김 */
  background-color: transparent;
}

.table-layout.data td.masked::after {
  content: "****";
  /* 마스킹처럼 보이게 */
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-layout.data td.col-point {
  color: #e22d72;
}

.table-layout.data td.col-red {
  color: #fc1717;
}

.table-layout.data td.status-up {
  color: #e22d72;
}

.table-layout.data td.status-down {
  color: #1c4fde;
}

.table-layout.data td.status-done {
  color: #0ea833;
}

.table-layout.data td.status-hold {
  color: #32353a;
}

.table-layout.data td.status-reject {
  color: #fc1717;
}

.table-layout.data th[class*="sticky-col"],
.table-layout.data td[class*="sticky-col"] {
  position: sticky;
  border-bottom: 0;
  box-shadow: -1px -1px 0 #f1f3f5 inset;
  border-left: none;
}

.table-layout.data th[class*="sticky-col"].last,
.table-layout.data td[class*="sticky-col"].last {
  border-right: 0;
}

.table-layout.data th[class*="sticky-col"].last::after,
.table-layout.data td[class*="sticky-col"].last::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: -2.4rem;
  width: 2.4rem;
  height: 100%;
  object-fit: contain;
  background: url(../images/icon/table-frizon.png) repeat-y 0 0/2.4rem 100%;
  border-left: 1px solid #e1e4e9;
}

.table-layout.data th.sticky-col-1,
.table-layout.data td.sticky-col-1 {
  left: 0;
  z-index: 3;
}

.table-layout.data th.sticky-col-2,
.table-layout.data td.sticky-col-2 {
  left: 150px;
  /* 첫 번째 열의 너비만큼 offset */
  z-index: 3;
}

.table-layout.data thead th[class*="sticky-col"] {
  z-index: 4;
}

.table-layout.data tfoot td {
  background: #f8f9fa;
}

.table-layout.no-hover tr:hover td {
  background-color: #fff;
}

.table-layout.has-level [class*="bar-level"] {
  display: flex;
  height: 2.4rem;
  margin: 0 -1.25rem;
  position: absolute;
  top: 1.6rem;
  width: calc(100% + 0.2rem);
}

.table-layout.has-level .bar-level1 {
  justify-self: flex-end;
  width: calc(100% - 2.5rem);
  border-radius: 1.2rem 0 0 1.2rem;
}

.table-layout.has-level .bar-level6 {
  width: calc(100% - 2.5rem);
  border-radius: 0 1.2rem 1.2rem 0;
}

.table-layout.has-level td {
  position: relative;
  padding: 1.6rem 1.2rem;
  vertical-align: top;
}

.table-layout.has-level td .level-guide {
  margin-top: 4.2rem;
  white-space: normal;
}

.table-layout.has-level td .level-guide .sub {
  font-size: 1.1rem;
}

/* 워터마크 */
.has-watermark {
  position: relative;
}

.has-watermark .watermark-overlay {
  display: block;
}

.kw-grid .watermark-text {
  width: 192rem;
  transform: rotate(-4deg);
}

.watermark-overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.watermark-text {
  position: absolute;
  width: 65rem;
  color: #32353a;
  font-size: 1.2rem;
  white-space: nowrap;
  transform: rotate(-63deg);
  opacity: 0.2;
  z-index: 10;
  overflow: hidden;
}

.no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
}

.no-data.h-100 {
  height: 100%;
}

.no-data .txt {
  margin-top: 1.6rem;
  font-size: 1.4rem;
  font-weight: 400;
  text-align: center;
}

.tab-area {
  width: 100%;
}

.tab-area.mt24 {
  margin-top: 2.4rem;
}

.tab-area.mt40 {
  margin-top: 4rem;
}

.tab-area.fixed-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.tab.mt40 {
  margin-top: 4rem;
}

.tab > ul {
  display: flex;
  align-items: center;
  overflow-x: auto;
  width: 100%;
}

.tab li {
  flex-grow: 0;
}

.tab li,
.tab .btn-tab {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: row;
  white-space: nowrap;
}

.tab .btn-tab {
  position: relative;
  width: 100%;
  background-color: #fff;
  color: #616974;
  font-size: 1.6rem;
  font-weight: 400;
}

.tab.line {
  border-bottom: 1px solid #e1e4e9;
}

.tab.line > ul > li + li {
  margin-left: 3.2rem;
}

.tab.line .btn-tab {
  height: 3.2rem;
  font-size: 1.6rem;
}

.tab.line .btn-tab:before {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: "";
  width: 0;
  height: 0.2rem;
  background-color: #fff;
}

.tab.line .active .btn-tab {
  color: #212266;
  border-bottom: 2px solid #212266;
  font-weight: 700;
}

.tab.line .active .btn-tab:before {
  position: absolute;
  left: 0;
  width: 100%;
}

.tab.line.full {
  width: 100%;
}

.tab.line.full > ul > li {
  flex: 1;
}

.tab.line.full > ul > li + li {
  margin-left: 0rem;
}

.tab.round > ul > li + li {
  margin-left: 0.8rem;
}

.tab.round .btn-tab {
  align-items: center;
  height: 3.2rem;
  padding: 0 1.4rem;
  border: 1px solid #ddd;
  border-radius: 1.6rem;
  font-size: 1.3rem;
}

.tab.round .active .btn-tab {
  color: #fff;
  background-color: #212266;
  border: 1px solid #212266;
  font-weight: 500;
}

.tab.round.full {
  width: 100%;
}

.tab.switch ul {
  position: relative;
  width: 48rem;
  height: 5.6rem;
  padding: 0.4rem;
  border-radius: 2.8rem;
  background-color: #f1f3f5;
}

.tab.switch li {
  width: 50%;
}

.tab.switch .btn-tab {
  height: 4.8rem;
  font-size: 1.6rem;
  background-color: transparent;
}

.tab.switch .active .btn-tab {
  color: #fff;
  font-weight: 700;
}

.tab.switch .switch-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  left: 50%;
  width: calc(50% - 0.4rem);
  height: 4.8rem;
  border-radius: 2.4rem;
  background-color: #212266;
  transition: 0.3s ease-in-out;
}

.tab.switch .active .switch-toggle {
  left: 0;
}

.tab.switch:checked .switch-toggle > i {
  position: absolute;
  top: 0.2rem;
  left: 5.8rem;
}

.tab.switch:checked .txt .y {
  color: #9398a0;
}

.tab.switch:checked .txt .n {
  color: #32353a;
}

.tab.switch:disabled .switch-toggle > i {
  border-color: #dadde2;
  background-color: #f1f3f5;
}

.tab.switch:disabled .switch-toggle ~ label {
  color: #b0b8c1;
  cursor: inherit;
}

.tab-panel {
  display: none;
}

.tab-panel > form {
  display: flex;
  align-items: normal;
  justify-content: flex-start;
  flex-direction: column;
  gap: 4rem;
}

.tab-panel.active {
  display: block;
}

/* form */
/* **** input **** */
.input-wrap {
  display: inline-block;
  position: relative;
}

.input-wrap .btn-clear {
  position: absolute;
  right: 0.1rem;
  top: 50%;
  transform: translateY(-50%);
}

.input-wrap:has(.btn-clear.visible) .kw-input {
  padding-right: 3.6rem;
}

.input-wrap.full {
  width: 100%;
}

.input-wrap.mt24 {
  margin-top: 2.4rem;
}

.input-wrap.certi-wrap .kw-input {
  padding-right: 5.6rem;
}

.input-wrap.certi-wrap .kw-input:disabled ~ .time {
  display: none;
}

.input-wrap.certi-wrap .time {
  position: absolute;
  top: 0;
  right: 1.2rem;
  display: inline-flex;
  align-items: center;
  height: 100%;
  color: #fc1717;
  font-size: 1.2rem;
}

.input-wrap.certi-wrap .btn-clear {
  right: 4rem;
}

.input-wrap:has(.unit) {
  display: block;
  overflow: hidden;
}

.input-wrap:has(.unit) .kw-input.sm {
  padding-right: 2rem;
}

.input-wrap:has(.unit) .kw-input.sm + .unit {
  position: relative;
  z-index: 1;
  margin-left: -2.4rem;
  margin-right: 2.4rem;
}

.input-wrap.search-wrap .btn-search {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: 2.4rem;
  background-position: center;
  flex-shrink: 0;
  width: 3.8rem;
  height: 3.8rem;
  background-image: url(../images/icon/btn-24-search.png);
}

.input-wrap.search-wrap .btn-clear {
  right: 2.6rem;
}

.input-wrap.search:has(:disabled) .kw-input {
  background-color: #f1f3f5;
  background-image: url(../images/icon/input-24-search-gray-disable.svg);
}

.input-wrap.search .kw-input {
  padding-left: 3.6rem;
  background: #fff url(../images/icon/input-24-search-gray.svg) no-repeat 0.8rem center/2.4rem 2.4rem;
}

.input-wrap.search .kw-input[readonly] {
  background-color: #f1f3f5;
  background-image: url(../images/icon/input-24-search-gray-disable.svg);
}

.input-wrap.search .kw-input.sm {
  padding-left: 2.8rem;
  background: #fff url(../images/icon/input-16-search-gray.svg) no-repeat 0.8rem center/1.6rem 1.6rem;
}

.input-wrap.search .kw-input.sm[readonly] {
  background-image: url(../images/icon/input-16-search-gray-disable.svg);
}

.input-wrap.search .ico-search {
  flex-shrink: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* **** 이벤트 비활성화 :: input 스타일 readonly 처리 **** */
.event-disable .input-wrap.search .kw-input {
  background-color: #f1f3f5;
  background-image: url(../images/icon/input-24-search-gray-disable.svg);
}

/* **** input :: size **** */
.kw-input {
  position: relative;
  width: 100%;
  background-color: #fff;
  border: 1px solid #dadde2;
  color: #32353a;
  transition: border 0.3s ease-in-out;
}

.kw-input.xs {
  height: 2rem;
  padding: 0 0.8rem;
  border-radius: 0.4rem;
  font-size: 1.2rem;
  font-weight: 400;
}

.kw-input.sm {
  height: 2.8rem;
  padding: 0 0.8rem;
  border-radius: 0.6rem;
  font-size: 1.3rem;
  font-weight: 400;
}

.kw-input {
  height: 3.8rem;
  padding: 0 1.2rem;
  border-radius: 0.8rem;
  font-size: 1.4rem;
  font-weight: 400;
}

.kw-input.lg {
  height: 4.2rem;
  padding: 0 2.4rem;
  border-radius: 0.8rem;
  font-size: 1.4rem;
  font-weight: 500;
}

.kw-input.xl {
  height: 5.6rem;
  padding: 0 1.6rem;
  border-radius: 1.6rem;
  font-size: 1.6rem;
  font-weight: 400;
}

.kw-input.w-xs {
  width: 7rem;
}

.kw-input.w-sm {
  width: 8rem;
}

.kw-input.w-xsm {
  width: 14rem;
}

.kw-input.w-md {
  width: 16rem;
}

.kw-input.w-xm {
  width: 24rem;
}

.kw-input.w-lg {
  width: 32.8rem;
}

.kw-input.w-xl {
  width: 58.4rem;
}

.kw-input:focus,
.kw-input.focus {
  border-color: #32353a;
  border-width: 1px;
  outline: none;
  box-shadow: none;
}

.kw-input:focus::placeholder,
.kw-input.focus::placeholder {
  color: #32353a;
}

.kw-input[readonly] {
  background-color: #f1f3f5;
  border-color: #dadde2;
  color: #32353a;
}

.kw-input[readonly]::placeholder {
  color: #9398a0;
}

.kw-input[readonly][type="password"] {
  background-color: #fff;
}

.kw-input[disabled] {
  background-color: #f1f3f5;
  border-color: #dadde2;
  color: #b0b8c1;
}

.kw-input::placeholder {
  color: #9398a0;
}

.kw-input.click-able {
  cursor: pointer;
}

/* **** 이벤트 비활성화 :: input 스타일 readonly 처리 **** */
.event-disable .kw-input {
  background-color: #f1f3f5;
  border-color: #dadde2;
  color: #32353a;
  pointer-events: none;
}

.event-disable .kw-input::placeholder {
  color: #9398a0;
}

.event-disable .kw-input.click-able {
  pointer-events: unset;
}

.event-able .kw-input {
  background-color: #fff;
  border: 1px solid #dadde2;
  color: #32353a;
  pointer-events: initial;
}

.is-error .kw-input:not(:read-only) {
  border-color: #fc1717;
}

.is-mobile .kw-input {
  height: 4rem;
  padding: 0 1.2rem;
  font-size: 1.4rem;
  font-weight: 400;
}

.ui-datepicker {
  z-index: 100 !important;
}

/* **** textarea **** */
textarea.kw-input {
  height: 8rem;
  padding: 1.2rem;
  border-radius: 0.8rem;
  font-size: 1.4rem;
  font-weight: 400;
}

textarea.kw-input.sm {
  height: 12.2rem;
  padding: 1.2rem;
}

textarea.kw-input.lg {
  height: 40rem;
  padding: 1.2rem;
}

.textarea-wrap {
  position: relative;
  display: flex;
  align-items: normal;
  justify-content: flex-start;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
}

.textarea-wrap.mt8 {
  margin-top: 0.8rem;
}

.textarea-wrap.mt16 {
  margin-top: 1.6rem;
}

.textarea-wrap:has(.textarea-count) textarea.kw-input {
  padding-bottom: 3.6rem;
}

.textarea-wrap .textarea-con {
  padding: 1.2rem;
  padding-bottom: 3.6rem;
  color: #9398a0;
  border: 1px solid #dadde2;
  border-radius: 0.8rem;
  font-size: 1.4rem;
  font-weight: 500;
}

.textarea-wrap:has(.textarea-con) textarea.kw-input {
  padding: 1.2rem;
}

.textarea-wrap .textarea-count {
  position: absolute;
  bottom: 1.2rem;
  right: 1.2rem;
  width: calc(100% - 2.4rem);
}

.textarea-count {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row;
  width: 100%;
  font-size: 1.2rem;
}

.textarea-count .count-now {
  color: #32353a;
}

.textarea-count .count-total {
  color: #9398a0;
}

.is-mobile textarea.kw-input {
  height: 8rem;
  padding: 1.2rem;
  border-radius: 0.8rem;
  font-size: 1.4rem;
  font-weight: 400;
}

/* **** 달력 **** */
.calendar-input {
  display: inline-block;
  position: relative;
}

.calendar-input .kw-input {
  padding-right: 3.6rem;
}

.calendar-input .kw-input[disabled] ~ .ui-datepicker-trigger {
  background-image: url(../images/icon/btn-24-calendar-disable.svg);
  pointer-events: none;
}

.calendar-input .ui-datepicker-trigger {
  position: absolute;
  top: 50%;
  right: 0.4rem;
  width: 3.8rem;
  height: 100%;
  margin-top: -1.9rem;
  font-size: 0;
  background: url(../images/icon/btn-24-calendar.svg) no-repeat center/2.4rem 2.4rem;
}

.calendar-input {
  width: 16rem;
}

.calendar-input.w-md {
  width: 24rem;
}

/* **** 이벤트 비활성화 :: 달력버튼 스타일 readonly 처리 **** */
.event-disable.calendar-input .ui-datepicker-trigger,
.event-disable .calendar-input .ui-datepicker-trigger {
  background-image: url(../images/icon/btn-24-calendar-disable.svg);
  pointer-events: none;
}

.event-able.calendar-input .ui-datepicker-trigger,
.event-able .calendar-input .ui-datepicker-trigger {
  background-image: url(../images/icon/btn-24-calendar.svg);
  pointer-events: unset;
}

.is-mobile .calendar-input .ui-datepicker-trigger {
  margin-top: -2rem;
}

.is-mobile .calendar-input .ico-only-calendar {
  margin-top: -2.4rem;
}

/* **** 숫자 카운트 **** */
.number-input {
  position: relative;
}

.number-input .minus {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 2.8rem;
  height: 2.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease-in-out;
  background-repeat: no-repeat;
  background-size: 1.6rem;
  background-position: center;
  flex-shrink: 0;
  background-image: url(../images/icon/btn-16-minus.png);
  font-size: 0;
}

.number-input .kw-input {
  padding: 0 2.8rem;
  text-align: center;
  /* Chrome, Safari, Edge, Opera */
  /* Firefox  */
}

.number-input .kw-input::-webkit-outer-spin-button,
.number-input .kw-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.number-input .kw-input[type="number"] {
  -moz-appearance: textfield;
}

.number-input .plus {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 2.8rem;
  height: 2.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease-in-out;
  background-repeat: no-repeat;
  background-size: 1.6rem;
  background-position: center;
  flex-shrink: 0;
  background-image: url(../images/icon/btn-16-plus.png);
  font-size: 0;
}

/* ****  search control :: 페이지 조회 **** */
.search-control {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  width: 100%;
  padding: 2.4rem;
  background-color: #f8f9fa;
  border-radius: 0.8rem;
}

.search-control.mt24 {
  margin-top: 2.4rem;
}

.search-control.center {
  justify-content: center;
}

.search-control .line {
  display: flex;
  align-items: flex-end;
  width: 100%;
  flex-wrap: wrap;
  row-gap: 1.6rem;
}

.search-control .line.center {
  justify-content: center;
}

.search-control .line .form-group-wrap:not(:last-child) {
  margin-right: 2.4rem;
}

.search-control .line .form-group-wrap:has(+ .btn-box) {
  margin-right: 0.8rem;
}

.search-control .line .form-group-wrap .form-group:not(:last-child) {
  margin-right: 2.4rem;
}

.search-control .line > .form-group:not(:last-child) {
  margin-right: 2.4rem;
}

.search-control .line > .form-group:has(+ .btn-box) {
  margin-right: 0.8rem;
}

.search-control .line + .line {
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid #e1e4e9;
}

.search-control .form-group {
  width: auto;
  gap: 0.4rem;
}

.search-control .form-group:has(+ .btn-box) {
  margin-right: 0.8rem;
}

.search-control .form-group-wrap {
  display: flex;
}

.search-control .form-group-set {
  display: flex;
}

.is-mobile .form-tit label {
  font-size: 1.2rem;
}

.is-mobile .search-control .line .form-group-wrap {
  flex-direction: column;
  width: 100%;
  gap: 0.8rem;
  margin: 0;
}

.is-mobile .search-control .line .form-group-wrap .form-group {
  margin: 0;
}

.is-mobile .form-group-set,
.is-mobile .form-group {
  display: flex;
  width: 100%;
  gap: 0.8rem;
}

.is-mobile .search-control {
  padding: 0;
  background: none;
}

.is-mobile .search-control .line + .line {
  margin-top: 0;
  padding-top: 0;
  border: none;
}

.is-mobile .search-control .line {
  gap: 0.8rem;
  row-gap: 2.4rem;
}

.is-mobile .search-control .line .form-group {
  margin: 0;
}

.is-mobile .search-control .form-tit {
  display: none;
}

.is-mobile .search-control .form-set {
  width: 100%;
  flex-wrap: wrap;
}

.is-mobile .search-control .form-set > .input-wrap {
  flex: 1;
}

.is-mobile .search-control .form-set > .input-wrap .kw-input {
  width: 100%;
}

.is-mobile .search-control .form-set .kw-select {
  flex: 1;
}

.is-mobile .search-control .form-set .calendar-input {
  width: auto;
  flex: 1;
}

/* ****  sidebar :: 사이드바 조회  **** */
.search-box {
  display: flex;
  align-items: normal;
  justify-content: flex-start;
  flex-direction: column;
  width: 100%;
  gap: 0.8rem;
  padding: 1.6rem;
  background-color: #f8f9fa;
  border-radius: 0.8rem;
}

.search-box .form-set.has-bar {
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #e1e4e9;
}

/* ****  form group wrap :: form-group 을 묶을때 **** */
.form-group-wrap.row-type {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: row;
}

.form-group-wrap.row-type .form-group {
  width: auto;
}

.form-group-wrap.row-type.gap-40 {
  gap: 4rem;
}

/* ****  form set  **** */
.form-set {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 0.8rem;
}

.form-set.mt24 {
  margin-top: 2.4rem;
}

.form-set.full {
  width: 100%;
}

.form-set.flex-wrap {
  flex-wrap: wrap;
}

.form-set.col-type {
  flex-direction: column;
}

.form-set .text-list {
  margin-top: 1.6rem;
}

.form-set.half > * {
  width: calc(50% - 0.4rem);
}

.form-set.has-animation label {
  display: none;
}

.form-set.has-animation .input-wrap {
  width: 100%;
}

.form-set.form-period {
  gap: 0.4rem;
}

.form-set.form-period .form-chip input[type="radio"] ~ .form-chip-outline,
.form-set.form-period .form-chip input[type="checkbox"] ~ .form-chip-outline {
  min-width: 5.6rem;
}

.form-set.form-period .btn {
  min-width: 5.6rem;
}

.form-set.is-error + [class^="form-hint"] {
  display: block;
}

.form-set .file-input {
  display: none;
}

.is-mobile .form-set.form-period {
  gap: 0.8rem;
}

.is-mobile .form-set.has-animation {
  position: relative;
  height: 5.8rem;
}

.is-mobile .form-set.has-animation .input-wrap {
  width: 100%;
  height: 100%;
}

.is-mobile .form-set.has-animation .input-wrap .btn-clear {
  margin-top: 1rem;
}

.is-mobile .form-set.has-animation .kw-input {
  height: 100%;
  padding-top: 2rem;
  border-color: transparent;
}

.is-mobile .form-set.has-animation:has(.kw-input:focus) label,
.is-mobile .form-set.has-animation:has(.kw-input:valid) label {
  border-color: #32353a;
  border-width: 1px;
  outline: none;
  box-shadow: none;
}

.is-mobile .form-set.has-animation:has(.kw-input:focus) label::placeholder,
.is-mobile .form-set.has-animation:has(.kw-input:valid) label::placeholder {
  color: #32353a;
}

.is-mobile .form-set.has-animation:has(.kw-input:focus) label span,
.is-mobile .form-set.has-animation:has(.kw-input:valid) label span {
  transform: translateY(-1.2rem);
}

.is-mobile .form-set.has-animation:has(:placeholder-shown) {
  transform: translateY(0rem);
}

.is-mobile .form-set.has-animation:has([readonly]) label {
  background-color: #f1f3f5;
  border-color: #dadde2;
  color: #32353a;
}

.is-mobile .form-set.has-animation:has([disabled]) label {
  background-color: #f1f3f5;
  border-color: #dadde2;
  color: #b0b8c1;
}

.is-mobile .form-set.has-animation label {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border: 1px solid #dadde2;
}

.is-mobile .form-set.has-animation label {
  height: 100%;
  padding: 0 1.2rem;
  border-radius: 0.8rem;
  font-size: 1.4rem;
  font-weight: 400;
}

.is-mobile .form-set.has-animation label span {
  left: 1.2rem;
  bottom: 1.9rem;
  z-index: 1;
  transform: translateY(0rem);
}

.is-mobile .form-set.has-animation label span {
  position: absolute;
  transition: all 0.3s ease;
}

/* ****  option group :: 모바일 바텀팝업  **** */
.option-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.option-group:not(:first-child) {
  margin-top: 3.2rem;
}

/* ****  form group :: form-set을 묶을떼  **** */
.form-group {
  display: flex;
  align-items: normal;
  justify-content: flex-start;
  flex-direction: column;
  width: 100%;
  gap: 0.8rem;
}

.form-group.mt16 {
  margin-top: 1.6rem;
}

.form-group.mt24 {
  margin-top: 2.4rem;
}

.form-group.mt40 {
  margin-top: 4rem;
}

.form-group.control-box {
  flex-direction: row;
  padding: 1.6rem;
  background-color: #f8f9fa;
  border-radius: 0.8rem;
}

.form-group.control-box .btn {
  min-width: unset;
}

.form-group .form-tit {
  width: 100%;
}

.form-group .form-tit label {
  font-size: 1.2rem;
}

.form-group [class^="form-hint"] {
  margin-top: 0;
}

.form-group.is-error [class^="form-hint"] {
  display: block;
}

.form-group.is-error + [class^="form-hint"] {
  display: block;
}

/* ****  form hint  **** */
[class^="form-hint"] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  margin-top: 0.8rem;
  font-size: 1.2rem;
  color: #9398a0;
}

[class^="form-hint"].mt0 {
  margin-top: 0;
}

[class^="form-hint"]::before {
  display: inline-flex;
  width: 1.6rem;
  height: 1.6rem;
  content: "";
  margin-right: 0.4rem;
  vertical-align: top;
  background: url(../images/icon/form-16-notice.png) no-repeat center;
  background-size: contain;
}

[class^="form-hint"].success {
  color: #396dfc;
}

[class^="form-hint"].success::before {
  background-image: url(../images/icon/form-16-notice-success.png);
}

[class^="form-hint"].error {
  display: none;
  color: #fc1717;
}

[class^="form-hint"].error::before {
  background-image: url(../images/icon/form-16-notice-error.png);
}

/* **** 체크박스/라디오 **** */
.form-check input[type="radio"],
.form-check input[type="checkbox"],
.form-chip input[type="radio"],
.form-chip input[type="checkbox"],
.kw-switch input[type="radio"],
.kw-switch 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;
}

.form-check {
  display: inline-flex;
}

.form-check.single {
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-check input[type="radio"] ~ .label-box,
.form-check input[type="checkbox"] ~ .label-box {
  position: relative;
  display: inline-flex;
  font-size: 1.4rem;
}

.form-check input[type="radio"] ~ .label-box .check-icon + *,
.form-check input[type="checkbox"] ~ .label-box .check-icon + * {
  padding-left: 0.8rem;
}

.form-check input[type="radio"] ~ .label-box .check-icon:after,
.form-check input[type="checkbox"] ~ .label-box .check-icon:after {
  content: "";
  display: block;
  transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);
}

.form-check input[type="radio"]:disabled + label,
.form-check input[type="checkbox"]:disabled + label {
  color: #a6a6c2;
  cursor: default;
}

.form-check input[type="radio"] ~ .label-box .check-icon {
  display: flex;
  position: relative;
  width: 2rem;
  height: 2rem;
  background-color: #fff;
  border: 1px solid #b0b8c1;
  border-radius: 100%;
}

.form-check input[type="radio"] ~ .label-box .check-icon:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  background-color: #b0b8c1;
  border-radius: 100%;
  transform: translate(-50%, -50%);
}

.form-check input[type="radio"]:disabled ~ .label-box .check-icon {
  border-color: #dadde2;
  background-color: #f1f3f5;
}

.form-check input[type="radio"]:disabled ~ .label-box .check-icon:after {
  display: none;
  background-color: #dadde2;
}

.form-check input[type="radio"]:checked ~ .label-box .check-icon {
  border-color: #212266;
}

.form-check input[type="radio"]:checked ~ .label-box .check-icon:after {
  background-color: #212266;
}

.form-check input[type="radio"]:checked:disabled ~ .label-box .check-icon {
  border-color: #d7d7e3;
  background-color: #d7d7e3;
}

.form-check input[type="radio"]:checked:disabled ~ .label-box .check-icon:after {
  display: block;
  background-color: #fff;
}

.form-check input[type="checkbox"] ~ .label-box .check-icon {
  display: flex;
  position: relative;
  width: 2rem;
  height: 2rem;
  background-color: #fff;
  border: 1px solid #b0b8c1;
  border-radius: 100%;
}

.form-check input[type="checkbox"] ~ .label-box .check-icon:after {
  position: absolute;
  box-sizing: border-box;
  width: 0.5rem;
  height: 0.8rem;
  margin-top: -0.1rem;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotateZ(40deg);
  border-right: 0.18rem solid #b0b8c1;
  border-bottom: 0.18rem solid #b0b8c1;
}

.form-check input[type="checkbox"]:disabled ~ .label-box .check-icon {
  border-color: #b0b8c1;
  background-color: #f1f3f5;
}

.form-check input[type="checkbox"]:disabled ~ .label-box .check-icon:after {
  border-color: #b0b8c1;
}

.form-check input[type="checkbox"]:checked ~ .label-box .check-icon {
  border-color: #212266;
  background-color: #212266;
}

.form-check.caution input[type="checkbox"]:checked ~ .label-box .check-icon {
  border-color: #b43a6b;
  background-color: #b43a6b;
}

.form-check input[type="checkbox"]:checked ~ .label-box .check-icon:after {
  border-color: #fff;
}

.form-check input[type="checkbox"]:checked:disabled ~ .label-box .check-icon {
  border-color: #d7d7e3;
  background-color: #d7d7e3;
}

.form-check input[type="checkbox"]:checked:disabled ~ .label-box .check-icon:after {
  border-color: #fff;
}

/* **** 버튼 모양 체크박스/라디오 :: 사이즈 **** */
.form-chip {
  display: inline-flex;
}

.form-chip.sm input[type="radio"] ~ .form-chip-outline,
.form-chip.sm input[type="checkbox"] ~ .form-chip-outline {
  height: 3rem;
  font-size: 1.3rem;
  border-radius: 0.6rem;
}

.form-chip.lg input[type="radio"] ~ .form-chip-outline,
.form-chip.lg input[type="checkbox"] ~ .form-chip-outline {
  height: 4.2rem;
}

.form-chip.w-sm input[type="radio"] ~ .form-chip-outline,
.form-chip.w-sm input[type="checkbox"] ~ .form-chip-outline {
  width: 8.4rem;
  padding: 0;
}

.form-chip input[type="checkbox"] ~ .form-chip-outline::before {
  display: inline-flex;
  content: "";
  width: 1.6rem;
  height: 1.6rem;
  background: url(../images/icon/check-16-gray.svg) no-repeat 0 0;
}

.form-chip input[type="radio"] ~ .form-chip-outline {
  justify-content: center;
}

.form-chip input[type="radio"] ~ .form-chip-outline,
.form-chip input[type="checkbox"] ~ .form-chip-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 0.4rem;
  min-width: 7.2rem;
  height: 3.8rem;
  padding: 0 1rem;
  background-color: #fff;
  border: 1px solid #dadde2;
  border-radius: 0.8rem;
  color: #32353a;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
}

.form-chip input[type="radio"]:checked ~ .form-chip-outline,
.form-chip input[type="checkbox"]:checked ~ .form-chip-outline {
  border-color: #212266;
  color: #212266;
}

.form-chip input[type="radio"]:checked ~ .form-chip-outline::before,
.form-chip input[type="checkbox"]:checked ~ .form-chip-outline::before {
  background: url(../images/icon/check-16-navy.svg) no-repeat 0 0;
}

.form-chip input[type="radio"]:disabled ~ .form-chip-outline,
.form-chip input[type="checkbox"]:disabled ~ .form-chip-outline {
  border-color: #dadde2;
  background-color: #f1f3f5;
  color: #b0b8c1;
  cursor: default;
}

.form-chip input[type="radio"]:disabled ~ .form-chip-outline::before,
.form-chip input[type="checkbox"]:disabled ~ .form-chip-outline::before {
  background: url(../images/icon/check-16-disable.png) no-repeat 0 0;
}

.form-chip input[type="radio"]:disabled:checked ~ .form-chip-outline,
.form-chip input[type="checkbox"]:disabled:checked ~ .form-chip-outline {
  border-color: #d7d7e3;
  background-color: #d7d7e3;
  color: #a6a6c2;
  cursor: default;
}

.form-chip input[type="radio"]:disabled:checked ~ .form-chip-outline::before,
.form-chip input[type="checkbox"]:disabled:checked ~ .form-chip-outline::before {
  background: url(../images/icon/check-16-gray.svg) no-repeat 0 0;
}

.is-mobile .form-chip input[type="radio"] ~ .form-chip-outline,
.is-mobile .form-chip input[type="checkbox"] ~ .form-chip-outline {
  height: 4rem;
}

/* **** 이벤트 비활성화 :: checkbox 스타일 disabled 처리 **** */
.event-disable.form-chip input[type="radio"] ~ .form-chip-outline,
.event-disable.form-chip input[type="checkbox"] ~ .form-chip-outline,
.event-disable .form-chip input[type="radio"] ~ .form-chip-outline,
.event-disable .form-chip input[type="checkbox"] ~ .form-chip-outline {
  border-color: #dadde2;
  background-color: #f1f3f5;
  color: #b0b8c1;
  pointer-events: none;
}

.event-disable.form-chip input[type="radio"] ~ .form-chip-outline::before,
.event-disable.form-chip input[type="checkbox"] ~ .form-chip-outline::before,
.event-disable .form-chip input[type="radio"] ~ .form-chip-outline::before,
.event-disable .form-chip input[type="checkbox"] ~ .form-chip-outline::before {
  background: url(../images/icon/check-16-disable.png) no-repeat 0 0;
}

.event-disable.form-chip input[type="radio"]:checked ~ .form-chip-outline,
.event-disable.form-chip input[type="checkbox"]:checked ~ .form-chip-outline,
.event-disable .form-chip input[type="radio"]:checked ~ .form-chip-outline,
.event-disable .form-chip input[type="checkbox"]:checked ~ .form-chip-outline {
  border-color: #d7d7e3;
  background-color: #d7d7e3;
  color: #a6a6c2;
}

.event-disable.form-chip input[type="radio"]:checked ~ .form-chip-outline::before,
.event-disable.form-chip input[type="checkbox"]:checked ~ .form-chip-outline::before,
.event-disable .form-chip input[type="radio"]:checked ~ .form-chip-outline::before,
.event-disable .form-chip input[type="checkbox"]:checked ~ .form-chip-outline::before {
  background: url(../images/icon/check-16-gray.svg) no-repeat 0 0;
}

.event-able.form-chip input[type="radio"] ~ .form-chip-outline,
.event-able.form-chip input[type="checkbox"] ~ .form-chip-outline,
.event-able .form-chip input[type="radio"] ~ .form-chip-outline,
.event-able .form-chip input[type="checkbox"] ~ .form-chip-outline {
  border-color: #dadde2;
  background-color: #fff;
  color: #32353a;
  pointer-events: unset;
}

.event-able.form-chip input[type="radio"] ~ .form-chip-outline::before,
.event-able.form-chip input[type="checkbox"] ~ .form-chip-outline::before,
.event-able .form-chip input[type="radio"] ~ .form-chip-outline::before,
.event-able .form-chip input[type="checkbox"] ~ .form-chip-outline::before {
  background: url(../images/icon/check-16-gray.png) no-repeat 0 0;
}

.event-able.form-chip input[type="radio"]:checked ~ .form-chip-outline,
.event-able.form-chip input[type="checkbox"]:checked ~ .form-chip-outline,
.event-able .form-chip input[type="radio"]:checked ~ .form-chip-outline,
.event-able .form-chip input[type="checkbox"]:checked ~ .form-chip-outline {
  border-color: #212266;
  background-color: #fff;
  color: #212266;
}

.event-able.form-chip input[type="radio"]:checked ~ .form-chip-outline::before,
.event-able.form-chip input[type="checkbox"]:checked ~ .form-chip-outline::before,
.event-able .form-chip input[type="radio"]:checked ~ .form-chip-outline::before,
.event-able .form-chip input[type="checkbox"]:checked ~ .form-chip-outline::before {
  background: url(../images/icon/check-16-navy.svg) no-repeat 0 0;
}

.is-mobile .form-chip {
  flex: 1;
}

.is-mobile .form-chip input[type="radio"] ~ .form-chip-outline,
.is-mobile .form-chip input[type="checkbox"] ~ .form-chip-outline {
  flex: 1;
  height: 4rem;
}

/* **** 스위치 버튼 **** */
.kw-switch {
  display: inline-flex;
  position: relative;
}

.kw-switch.pos-right {
  position: absolute;
  right: 0;
}

.kw-switch label {
  position: relative;
  display: inline-flex;
}

.kw-switch label .txt {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 1.4rem;
  font-weight: 500;
}

.kw-switch label .txt .y,
.kw-switch label .txt .n {
  flex: 1;
  text-align: center;
  line-height: 3.8rem;
}

.kw-switch.round label .txt {
  font-size: 1.2rem;
}

.kw-switch.round label .y,
.kw-switch.round label .n {
  line-height: 3rem;
}

.kw-switch.round [type="checkbox"] ~ label .switch-toggle {
  width: 6rem;
  height: 3rem;
  border-radius: 1.5rem;
  background-color: #f1f3f5;
}

.kw-switch.round [type="checkbox"] ~ label .switch-toggle > i {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  width: 2.4rem;
  height: 2.4rem;
  border: none;
  border-radius: 1.2rem;
  background-color: #fff;
}

.kw-switch.round [type="checkbox"] ~ label .txt .y {
  color: #32353a;
  font-weight: 500;
}

.kw-switch.round [type="checkbox"] ~ label .txt .n {
  color: #9398a0;
  font-weight: 400;
}

.kw-switch.round [type="checkbox"]:checked ~ label .switch-toggle > i {
  position: absolute;
  top: 0.3rem;
  left: 3.3rem;
}

.kw-switch.round [type="checkbox"]:checked ~ label .txt .y {
  color: #9398a0;
  font-weight: 400;
}

.kw-switch.round [type="checkbox"]:checked ~ label .txt .n {
  color: #32353a;
  font-weight: 500;
}

.kw-switch.round [type="checkbox"]:checked:disabled ~ label .switch-toggle > i {
  background-color: #f8f9fa;
}

.kw-switch.round [type="checkbox"]:disabled ~ label .switch-toggle > i {
  background-color: #f8f9fa;
  color: #b0b8c1;
}

.kw-switch.round [type="checkbox"]:disabled ~ label .txt .y {
  color: #b0b8c1;
}

.kw-switch.round [type="checkbox"]:disabled ~ label .txt .n {
  color: #b0b8c1;
}

.kw-switch [type="checkbox"] ~ label {
  display: inline-flex;
  align-items: center;
}

.kw-switch [type="checkbox"] ~ label .switch-toggle {
  position: relative;
  width: 11.6rem;
  height: 3.8rem;
  border-radius: 0.8rem;
  background-color: #f1f3f5;
}

.kw-switch [type="checkbox"] ~ label .switch-toggle > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 5.6rem;
  height: 3.4rem;
  border: 1px solid #e1e4e9;
  border-radius: 0.8rem;
  background-color: #fff;
  transition: 0.3s ease-in-out;
}

.kw-switch [type="checkbox"] ~ label .txt .y {
  color: #32353a;
  font-weight: 500;
}

.kw-switch [type="checkbox"] ~ label .txt .n {
  color: #9398a0;
  font-weight: 400;
}

.kw-switch [type="checkbox"]:checked ~ label .switch-toggle > i {
  position: absolute;
  top: 0.2rem;
  left: 5.8rem;
}

.kw-switch [type="checkbox"]:checked ~ label .txt .y {
  color: #9398a0;
  font-weight: 400;
}

.kw-switch [type="checkbox"]:checked ~ label .txt .n {
  color: #32353a;
  font-weight: 500;
}

.kw-switch [type="checkbox"]:disabled ~ label .switch-toggle > i {
  border-color: #e1e4e9;
  background-color: #f8f9fa;
}

.kw-switch [type="checkbox"]:disabled ~ label .txt .y {
  color: #9398a0;
}

.kw-switch [type="checkbox"]:disabled ~ label .txt .n {
  color: #9398a0;
}

.event-disable .kw-switch [type="checkbox"] ~ label {
  pointer-events: none;
}

.event-disable .kw-switch [type="checkbox"] ~ label .switch-toggle > i {
  background: #f8f9fa;
}

.event-able .kw-switch [type="checkbox"] ~ label {
  pointer-events: none;
}

.kw-select {
  position: relative;
  width: 100%;
  border: 1px solid #dadde2;
  color: #9398a0;
  background: #fff url(../images/icon/select-16-down.svg) no-repeat calc(100% - 1.6rem) center/1.6rem 1.6rem;
  transition: 0.3s ease-in-out;
}

.kw-select:focus,
.kw-select.valid {
  color: #32353a;
}

.kw-select {
  height: 3.8rem;
  padding: 0 4rem 0 1.2rem;
  border-radius: 0.8rem;
  font-size: 1.4rem;
  font-weight: 400;
}

.kw-select.sm {
  height: 2.8rem;
  padding: 0 1.2rem;
  border-radius: 0.6rem;
  font-size: 1.3rem;
  font-weight: 400;
  background: #fff url(../images/icon/select-16-down.svg) no-repeat calc(100% - 1.2rem) center/1.6rem 1.6rem;
}

.kw-select.w-xs {
  width: 8rem;
  flex-shrink: 0;
}

.kw-select.w-sm {
  width: 13.6rem;
  flex-shrink: 0;
}

.kw-select.w-md {
  width: 16rem;
  flex-shrink: 0;
}

.kw-select:focus,
.kw-select.focus {
  border-color: #32353a;
  border-width: 1px;
  outline: none;
  box-shadow: none;
}

.kw-select[readonly] {
  background-color: #f1f3f5;
  border-color: #dadde2;
  color: #32353a;
  pointer-events: none;
}

.kw-select[disabled] {
  background-color: #f1f3f5;
  border-color: #dadde2;
  color: #b0b8c1;
  background-image: url(../images/icon/select-16-down-disable.svg);
}

/* **** 이벤트 비활성화 :: select 스타일 disabled 처리 **** */
.event-disable .kw-select {
  background-color: #f1f3f5;
  border-color: #dadde2;
  color: #b0b8c1;
  pointer-events: none;
  background-image: url(../images/icon/select-16-down-disable.svg);
}

.is-mobile .kw-select {
  height: 4rem;
  padding: 0 3.6rem 0 1.2rem;
  background-position: calc(100% - 1.2rem) center;
}

/*  */
body {
  width: 100%;
  min-height: 100%;
  overflow: hidden;
}

button.menu-burger {
  width: 2rem;
  height: 2rem;
  margin: 0.2rem;
  margin-left: 2.4rem;
  border: none;
  background: transparent;
  position: relative;
}

button.menu-burger:focus {
  outline: none;
}

/* ****  Layout  **** */
.wrap-layout {
  width: 100%;
  min-height: 100%;
  height: 100vh;
  height: 100dvh;
  height: calc(var(--vh, 1vh) * 100);
}

.wrap-layout > .scroll-content {
  display: flex;
  align-items: normal;
  justify-content: flex-start;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.wrap-layout:has(.sidebar-layout) {
  overflow-x: hidden;
}

.wrap-layout.bg-gray {
  background-color: #f8f9fa;
}

.wrap-layout.bg-gray .header-layout {
  background-color: #f8f9fa;
}

.wrap-layout.bg-gray .header-layout.before-login {
  background-color: #f8f9fa;
}

.wrap-layout .header-layout {
  min-width: 128rem;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 5.6rem;
  padding: 0 4rem;
  background: #212266;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  flex-shrink: 0;
}

.wrap-layout .header-layout.before-login {
  background-color: #fff;
}

.wrap-layout .side-menu {
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  visibility: hidden;
  opacity: 0;
  background-color: #fff;
  box-shadow: 0 0.8rem 1.6rem 0 rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  z-index: 102;
}

.wrap-layout .side-menu .logo {
  width: 9rem;
  height: 3.2rem;
  background: url(../images/common/ci-kiwoom-dark.svg);
  position: absolute;
  top: 1.2rem;
  left: 4rem;
}

.wrap-layout .side-menu .inner {
  width: 128rem;
  padding: 5.6rem 4rem;
}

.wrap-layout .side-menu .head {
  position: relative;
}

.wrap-layout .side-menu .tit-wrap {
  display: flex;
  align-items: flex-end;
}

.wrap-layout .side-menu .tit-wrap .tit {
  padding-left: 4.8rem;
  color: #151618;
  font-size: 2.4rem;
  font-weight: 700;
  background: url(../images/icon/sidemenu-24-tit-blue.svg) no-repeat left center/3.6rem;
}

.wrap-layout .side-menu .tit-wrap .desc {
  margin-left: 1.2rem;
  margin-bottom: 0.4rem;
  color: #616974;
  font-size: 1.3rem;
}

.wrap-layout .side-menu .side-close {
  position: absolute;
  top: 0;
  right: 0;
}

.wrap-layout .side-menu .side-close::after {
  display: inline-flex;
  content: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 2.4rem;
  height: 2.4rem;
  background-image: url(../images/icon/sidemenu-24-close.svg);
}

.wrap-layout .side-menu .menu-list {
  margin-top: 4rem;
  padding-top: 4rem;
  border-top: 1px solid #e1e4e9;
  display: flex;
  justify-content: center;
  gap: 8rem;
}

.wrap-layout .side-menu .mn {
  color: #151618;
  font-size: 2rem;
  font-weight: 700;
}

.wrap-layout .side-menu .sidemenu-sub {
  margin-top: 1.6rem;
}

.wrap-layout .side-menu .sidemenu-sub li a {
  display: block;
  height: 3.6rem;
  line-height: 3.6rem;
  color: #616974;
  font-size: 1.6rem;
}

.wrap-layout .side-menu .sidemenu-sub li a:hover {
  color: #e22d72;
}

.wrap-layout .side-menu.is-open {
  top: 0;
  opacity: 1;
  visibility: visible;
}

.wrap-layout .inner {
  width: 120rem;
  margin: 0 auto;
}

.wrap-layout .container-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 128rem;
  padding: 4rem 7.6rem 4rem 4rem;
}

.wrap-layout .container-layout:has(.bookmark-layout.round) {
  padding-right: 4rem;
}

.wrap-layout .content-wrap {
  display: flex;
  align-items: flex-start;
  flex: 1;
  margin-top: 2.4rem;
  gap: 3.2rem;
}

.wrap-layout .sidebar-layout {
  min-height: 60.6rem;
}

.wrap-layout .content {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  flex: 1;
  height: 100%;
  width: calc(100% - 35.2rem);
}

.wrap-layout .top-info + .control-box {
  margin-top: 2.4rem;
}

.wrap-layout .footer-layout {
  min-width: 128rem;
}

.is-mobile .wrap-layout .header-layout {
  min-width: unset;
  padding: 0 2rem;
  background-color: #fff;
}

.is-mobile .wrap-layout .inner {
  width: 100%;
}

.is-mobile .wrap-layout .container-layout {
  min-width: unset;
  min-height: calc(100% - 5.6rem);
  padding: 0rem 2rem 8.8rem;
  overflow: auto;
}

.is-mobile .wrap-layout .container-layout > form {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: auto;
}

.is-mobile .wrap-layout .container-layout.mo-no-scroll {
  overflow: hidden;
}

.is-mobile .wrap-layout .container-layout:has(.bookmark-layout.round) {
  padding-right: 2rem;
}

.is-mobile .wrap-layout .content-wrap {
  flex-direction: column;
  gap: 0;
}

.is-mobile .wrap-layout .content {
  width: 100%;
  height: auto;
  flex: unset;
  flex: 1;
}

.is-mobile .wrap-layout .top-info + .control-box {
  margin-top: 0.8rem;
}

.is-mobile .wrap-layout .bottom-content {
  margin-top: 2rem;
  flex-shrink: 0;
}

.is-mobile .wrap-layout .sidebar-layout {
  min-height: unset;
  height: auto !important;
}

.is-mobile .sidebar-layout {
  width: 100%;
}

.is-mobile .sidebar-layout.active {
  width: 100%;
}

.is-mobile .sidebar-layout .inner {
  padding-right: 0;
  border-right: 0;
  transform: translateX(0);
}

.is-mobile .btn-back {
  position: absolute;
  left: 2rem;
  width: 3.2rem;
  height: 3.2rem;
  background: url(../images/icon/header-32-back-m.png) no-repeat center/contain;
}

/* ****  header  **** */
.header-layout.before-login .logo {
  background: url(../images/common/header-ci-kiwoom.png) no-repeat center/contain;
}

.header-layout.before-login .gnb {
  display: none;
}

.header-layout.before-login .right {
  display: none;
}

.header-layout.before-join .gnb {
  display: none;
}

.header-layout .login-user {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.header-layout .logo {
  width: 9rem;
  height: 3.2rem;
  background: url(../images/common/header-ci-kiwoom-w.png) no-repeat center/contain;
  position: absolute;
  left: 4rem;
}

.header-layout .gnb {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  height: 100%;
  margin-left: -10rem;
}

.header-layout .gnb .li {
  height: inherit;
  position: relative;
}

.header-layout .gnb .li .mn {
  padding: 0 1.6rem;
  text-align: center;
  height: inherit;
  font-size: 1.6rem;
  font-weight: 700;
  color: #ffffff;
}

.header-layout .gnb .li .mn span {
  display: block;
  min-width: 8rem;
}

.header-layout .gnb .li .gnb-sub {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

.header-layout .gnb .li.active > .gnb-sub {
  /* 메뉴 열림 */
  opacity: 1;
  visibility: visible;
}

.header-layout .gnb:has(.active) .mn {
  color: #797aa3;
}

.header-layout .gnb:has(.active) .active .mn {
  color: #fff;
}

.header-layout .gnb .gnb-sub {
  position: absolute;
  top: 100%;
  left: 50%;
  background: #fff;
  padding: 2rem 0;
  margin: 0;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.08);
  border-radius: 1.6rem;
  transform: translate(-50%, 0);
  z-index: 10;
  visibility: hidden;
}

.header-layout .gnb .gnb-sub::after {
  content: "";
  display: block;
  position: absolute;
  top: -0.6rem;
  left: 50%;
  width: 1.2rem;
  height: 1.2rem;
  margin-left: -0.6rem;
  background: #e22d72;
  border-radius: 50%;
}

.header-layout .gnb .gnb-sub li a {
  display: block;
  height: 4.4rem;
  line-height: 4.4rem;
  white-space: nowrap;
  padding: 0 4rem;
  color: #333;
  text-decoration: none;
  font-size: 1.6rem;
}

.header-layout .gnb .gnb-sub li a:hover {
  color: #e22d72;
}

.header-layout .right {
  position: absolute;
  display: flex;
  align-items: center;
  right: 3.2rem;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 400;
}

.header-layout .btn-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.3s ease-in-out;
  height: 2rem;
  margin-left: 1.2rem;
  padding: 0 0.8rem;
  background-color: transparent;
  border-radius: 0.4rem;
  border: 1px solid #fff;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 400;
}

.header-layout .right .ico-only-menu {
  margin-left: 1.6rem;
}

.bottom-gnb {
  display: none;
  z-index: 100;
}

.is-mobile:has(.before-login) .container-layout {
  padding-bottom: 4rem;
}

.is-mobile:has(.before-login) .bottom-gnb {
  display: none;
}

.is-mobile .header-layout.before-login {
  background-color: #f8f9fa;
}

.is-mobile .header-layout .logo {
  left: 2rem;
  background: url(../images/common/header-ci-kiwoom.png) no-repeat center/contain;
}

.is-mobile .header-layout .right {
  right: 2rem;
}

.is-mobile .bottom-gnb {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6.4rem;
  padding: 0.8rem 2.4rem;
  background: #fff;
  border-top: 1px solid rgba(176, 184, 193, 0.3);
  justify-content: space-between;
}

.is-mobile .bottom-gnb .li {
  width: 4.8rem;
}

.is-mobile .bottom-gnb .li .mn {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  font-size: 1.1rem;
  font-weight: 500;
  color: #9398a0;
  margin: 0;
}

.is-mobile .bottom-gnb .li.active .mn {
  color: #212266;
}

/* ****  container  **** */
.wrap-layout .content {
  align-items: stretch;
}

.container-layout.before-search .pc-data {
  display: none;
}

.container-layout.before-search .mo-data {
  display: none;
}

.container-layout .mobile-search-box {
  display: none;
}

.container-layout .mo-data {
  display: none;
}

.container-layout .bottom-content {
  display: none;
}

.container-layout .page-title {
  display: none;
}

.is-mobile .container-layout.before-search .search-control {
  display: block;
}

.is-mobile .container-layout.before-search .search-box {
  display: flex;
}

.is-mobile .container-layout.before-search .mobile-search-box {
  display: none;
}

.is-mobile .container-layout.before-search .mo-data {
  display: none;
}

.is-mobile .container-layout.before-search .content .no-data {
  display: none;
}

.is-mobile .container-layout.before-search .bottom-content {
  display: block;
}

.is-mobile .container-layout.before-search .page-title {
  display: block;
}

.is-mobile .container-layout .page-title {
  display: none;
}

.is-mobile .container-layout .mobile-search-box {
  display: flex;
}

.is-mobile .container-layout .search-control {
  display: none;
}

.is-mobile .container-layout .control-box {
  display: none;
}

.is-mobile .container-layout .search-box {
  display: none;
}

.is-mobile .container-layout .mo-data {
  display: block;
}

/* ****  sidebar  **** */
.sidebar-layout {
  position: relative;
  width: 1.8rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

.sidebar-layout .inner {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  flex-shrink: 0;
  width: 32rem;
  height: 100%;
  overflow: hidden;
  padding-right: 1.8rem;
  position: relative;
  border-right: 1px solid #dadde2;
  transition: transform 0.3s ease;
  transform: translateX(calc(-100% + 1.8rem));
}

.sidebar-layout.active {
  width: 32rem;
}

.sidebar-layout.active .inner {
  transform: translateX(0);
}

.sidebar-layout .search-box {
  width: 100%;
}

.sidebar-layout .table-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.sidebar-layout .table-group .table-layout .tooltip-target.caution-row td {
  background: #fff9fc;
}

.sidebar-layout .table-group .table-layout.data td {
  padding: 0;
  border: none;
}

.sidebar-layout .table-group .table-layout.data td.icon-user {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}

.sidebar-layout .table-group .table-layout.data td .icon-user__current {
  width: 1.6rem;
  height: 1.6rem;
  display: none;
}
.sidebar-layout .table-group .table-layout.data td .icon-user__current.checked {
  display: block;
  background: url(../images/icon/ic-16-status-yes.png) no-repeat 0 0 / 100%;
}

.sidebar-layout .table-group .table-layout.data td .icon-user__current.caution {
  display: block;
  background: url(../images/icon/ic-16-status-no.png) no-repeat 0 0 / 100%;
}

.sidebar-layout .table-group .td-box {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}

.sidebar-layout .table-group .td-box::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 0.8rem;
}

.sidebar-layout .table-group .td-box .td {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid #f1f3f5;
  flex: none;
}

.sidebar-layout .table-group .td-box .td:not(:first-child) {
  border-left: 1px solid #f1f3f5;
}

.sidebar-layout .table-group .td-box .td:nth-child(1) {
  width: 46px;
}

.sidebar-layout .table-group .td-box .td:nth-child(2) {
  width: 80px;
}

.sidebar-layout .table-group .td-box .td:nth-child(3) {
  width: 66px;
}

.sidebar-layout .table-group .td-box .td:nth-child(4) {
  width: 68px;
}

.sidebar-layout .table-group tr.active {
  position: relative;
}

.sidebar-layout .table-group tr.active td {
  background-color: #f4f9ff;
}

.sidebar-layout .table-group tr.active .td-box::after {
  border: 1px solid #396dfc;
}

.sidebar-layout.active .btn-sidebar::after {
  transform: rotate(0);
  right: 0.1rem;
}

.sidebar-layout .btn-sidebar {
  position: absolute;
  top: 0;
  right: -1px;
  width: 1.8rem;
  height: 100%;
}

.sidebar-layout .btn-sidebar::before {
  content: "";
  width: 1.8rem;
  height: 2.8rem;
  position: absolute;
  top: 0.8rem;
  right: 0;
  background-color: #fff;
  border-radius: 0.4rem 0 0 0.4rem;
  border: 1px solid #dadde2;
}

.sidebar-layout .btn-sidebar::after {
  content: "";
  width: 1.6rem;
  height: 1.6rem;
  position: absolute;
  top: 1.4rem;
  right: 0rem;
  background: url(../images/icon/sidebar-16-arrow-right.png) no-repeat center/1.6rem;
  transform: rotate(180deg);
}

.is-mobile .sidebar-layout .search-box {
  gap: 0.8rem;
  padding: 0;
  background-color: #fff;
}

.is-mobile .sidebar-layout .form-set.half > * {
  width: 100%;
}

.table-group .table-layout:has(.no-data),
.table-group .table-layout:has(.no-data) table {
  height: 100%;
}

/* ****  bookmark  **** */
.bookmark-layout {
  position: fixed;
  top: 5.6rem;
  right: 0rem;
  width: 5.6rem;
  height: calc(100% - 5.6rem);
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
  background: #f1f3f5;
  z-index: 98;
}

.bookmark-layout .in {
  padding: 0 0.8rem;
}

.bookmark-layout .in .head {
  position: relative;
  margin-bottom: 0.8rem;
  padding-bottom: 0.8rem;
}

.bookmark-layout .in .head::after {
  content: "";
  position: absolute;
  left: 0.4rem;
  bottom: 0;
  display: block;
  width: 3.2rem;
  height: 1px;
  background: rgba(176, 184, 193, 0.3);
}

.bookmark-layout .in .btn-bookmark {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 1.6rem 0;
}

.bookmark-layout.round {
  top: 8rem;
  right: 2.4rem;
  width: 6.6rem;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  height: auto;
  border: 1px solid #e1e4e9;
  border-radius: 3.2rem;
  background-color: #fff;
}

.bookmark-layout.round .head {
  margin-bottom: 0.4rem;
  padding-bottom: 0.4rem;
}

.bookmark-layout.round .in {
  padding: 0 1.2rem;
}

.bookmark-layout.round .in .btn-bookmark {
  padding: 1.2rem 0;
}

/* ****  footer  **** */
.footer-layout .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.8rem 0;
  color: #616974;
  font-size: 1.2rem;
  font-weight: 400;
}

.footer-layout .info-cs {
  display: flex;
  align-items: center;
}

.footer-layout .info-cs li {
  position: relative;
  padding: 0 1.2rem;
}

.footer-layout .info-cs li + li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -0.6rem;
  display: block;
  width: 1px;
  height: 1.2rem;
  background: #e1e4e9;
}

.footer-layout .f-btm {
  margin-top: 0.8rem;
}

/* ****  공통 :: 에러 페이지, 로그아웃 페이지  **** */
.guide-page {
  align-items: center;
}

.guide-page .content-wrap {
  margin-top: 0;
}

.guide-page .content {
  justify-content: center;
}

.guide-page .btn-box.bottom {
  margin: 10rem auto 0;
  max-width: 40rem;
}

.guide-page.intro .content {
  justify-content: flex-start;
}

.guide-page.intro .guide-con {
  margin-top: 10rem;
}

.guide-con {
  margin: 0 auto;
  margin-top: -5.6rem;
  text-align: center;
}

.guide-con .status-icon {
  display: flex;
  justify-content: center;
}

.guide-con .tit-wrap {
  margin-top: 2rem;
}

.guide-con .tit-wrap .tit {
  color: #151618;
  font-size: 3.2rem;
  font-weight: 700;
}

.guide-con .tit-wrap .sub {
  color: #151618;
  font-size: 3.2rem;
}

.guide-con .desc {
  margin-top: 3.6rem;
  font-size: 1.6rem;
}

.guide-con .btn-box {
  justify-content: center;
  margin-top: 10rem;
}

.guide-con .btn-box .btn {
  width: 14.8rem;
}

.guide-con .btn-box .btn.w-md {
  width: 13rem;
}

.is-mobile .wrap-layout .container-layout.guide-page.intro {
  padding-bottom: 4rem;
}

.is-mobile .guide-page .logo {
  display: block;
  width: 12rem;
  height: 4rem;
  margin-top: 2.4rem;
  margin-bottom: 4rem;
  background: url(../images/common/header-ci-kiwoom.png);
  background-size: cover;
}

.is-mobile .guide-page .content-wrap {
  width: 100%;
}

.is-mobile .guide-page .btn-box.bottom {
  width: 100%;
  margin-top: 0;
}

.is-mobile .guide-page.intro .content {
  justify-content: flex-start;
}

.is-mobile .guide-page.intro .guide-con {
  margin-top: 4rem;
}

.is-mobile .guide-page.intro .guide-con .tit-wrap {
  text-align: left;
}

.is-mobile .guide-page.intro .guide-con .tit-wrap .tit {
  margin-top: 0.6rem;
  font-size: 2.8rem;
}

.is-mobile .guide-page.intro .guide-con .tit-wrap .sub {
  margin-top: 0;
  font-size: 2.4rem;
}

.is-mobile .guide-con {
  width: 100%;
  margin: 4rem 0 0;
  padding: 0 0 0 1.2rem;
  text-align: left;
  flex: 1;
}

.is-mobile .guide-con .content {
  overflow: auto;
  flex: 1;
}

.is-mobile .guide-con .status-icon {
  justify-content: flex-start;
}

.is-mobile .guide-con .status-icon + .tit-wrap {
  margin-top: 2.4rem;
}

.is-mobile .guide-con .ico-only-logout {
  width: 6.4rem;
  height: 6.4rem;
}

.is-mobile .guide-con .tit-wrap .tit {
  font-size: 2.4rem;
}

.is-mobile .guide-con .tit-wrap .sub {
  margin-top: 0.2rem;
  font-size: 2rem;
  letter-spacing: -0.077rem;
}

.is-mobile .guide-con .desc {
  margin-top: 2rem;
  color: #616974;
  font-size: 1.4rem;
}

/* ****  인트로 :: 설치 페이지  **** */
.install-page {
  width: 106.4rem;
  margin: 2.4rem auto 0;
}

.install-page .status-icon {
  display: flex;
  justify-content: center;
}

.install-page .tit-h1 {
  margin-top: 2.4rem;
  text-align: center;
  font-weight: 400;
}

.install-page .table-layout {
  margin-top: 6.4rem;
}

.install-page .btn-box {
  justify-content: center;
  margin-top: 4rem;
}

.install-page .line-box {
  margin-top: 6.4rem;
}

/* ****  메인 페이지 :: 최초로그인  **** */
.step-page {
  width: 106.4rem;
  margin: 0 auto;
}

.step-page .step-process {
  margin-top: 8rem;
  margin-bottom: 8.4rem;
  font-size: 3.2rem;
  color: #151618;
  text-align: center;
  padding-bottom: 9.8rem;
}

.step-page .step-process .ico-only-step {
  display: flex;
  justify-self: center;
}

.step-page .step-process .txt {
  margin-top: 2.4rem;
}

.step-page .step-process.step5 {
  background: url(../images/content/step-05.png) no-repeat center bottom 0/81.2rem auto;
}

.step-page .step-process.step6 {
  background: url(../images/content/step-06.png) no-repeat center bottom 0/81.2rem auto;
}

.step-page .table-layout {
  margin-top: 2.4rem;
}

.step-page .btn-box {
  justify-content: center;
  margin-top: 2.4rem;
}

/* **** 메인 페이지 :: 카드 **** */
.card-tit {
  position: relative;
  min-width: 22.4rem;
  max-width: 28.2rem;
  flex: 1;
}
.card-tit.type-01 {
  min-width: 16.8rem;
  max-width: 16.8rem;
}
.card-tit .user {
  font-weight: 500;
}

.card-tit .user > span {
  display: block;
}

.card-tit .desc {
  margin-top: 1.2rem;
  font-size: 2.4rem;
  font-weight: 700;
}

.card-tit .img-wrap.brand {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  overflow: hidden;
  background: url(../images/icon/ci-80-no-logo.svg) no-repeat center/contain;
}

.is-mobile .card-tit .user {
  display: flex;
  align-items: center;
  color: #616974;
  font-size: 1.2rem;
}

.is-mobile .card-tit .user > span {
  position: relative;
}

.is-mobile .card-tit .user > span:not(:first-child) {
  margin-left: 0.6rem;
  padding-left: 0.6rem;
}

.is-mobile .card-tit .user > span:not(:first-child)::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 1rem;
  transform: translateY(-50%);
  background: #e1e4e9;
}

.card-list {
  display: flex;
  flex: 1;
  gap: 1.6rem;
}

.card-list .card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 22.2rem;
  max-width: 28.2rem;
  height: 26.4rem;
  padding: 2.4rem;
  border-radius: 2.4rem;
  box-shadow: 0 0.8rem 1.6rem 0 rgba(0, 0, 0, 0.04);
  background-color: #fff;
}
.card-list .card.type-01 {
  min-width: 24.2rem;
}
.card-list .card .c-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e1e4e9;
  height: 4.8rem;
  padding-bottom: 1.6rem;
}

.card-list .card .c-head .unit {
  font-size: 1.4rem;
  font-weight: 400;
}
.card-list .card .c-head .sub-txt {
  font-size: 1.1rem;
  font-weight: 600;
  color: #e22d72;
  margin-top: 0.67rem;
}
.card-list .card .c-tit {
  color: #616974;
  font-size: 1.4rem;
  font-weight: 500;
}
.card-list .card .t-list {
  max-height: 17rem;
  padding-top: 1.6rem;
  font-size: 1.2rem;
  overflow-y: auto;
}
.card-list .card .t-list::-webkit-scrollbar {
  width: 5px;
  height: 20px;
}
.card-list .card .t-list::-webkit-scrollbar-thumb {
  background: #3222;
  border-radius: 6px 6px 6px 6px;
}
.card-list .card .t-list li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.6rem;
}

.card-list .card .t-list span {
  font-size: 1.2rem;
  line-height: 1.2rem;
  text-align: left;
  display: block;
}
.card-list .card .t-list span.item-01 {
  width: 4.2rem;
}
.card-list .card .t-list span.item-02 {
  width: 3.2rem;
  text-align: center;
}
.card-list .card .t-list span.item-03 {
  width: 3.3rem;
  text-align: center;
}
.card-list .card .t-list span.item-04 {
  width: 4.2rem;
  text-align: right !important;
  margin-right: 0.2rem;
}
.card-list .card .t-list span.item-05 {
  text-align: right !important;
  margin-right: 0.2rem;
  width: 5.5rem;
}
.card-list .card .t-list span.color-01 {
  color: #fb8800;
}
.card-list .card .t-list span.color-02 {
  color: #72c90f;
}
.card-list .card .t-list span.color-03 {
  color: #e22d72;
}

.card-list .card .t-list span.color-04 {
  color: #1c4fde;
}

.card-list .card .p-list {
  max-height: 17rem;
  padding-top: 1.6rem;
  font-size: 1.2rem;
  overflow: hidden;
}
.card-list .card .p-list .list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.6rem;
}
.card-list .card .p-list .list span {
  font-size: 1.2rem;
  line-height: 1.2rem;
}
.card-list .card .p-list .item-01 {
  width: 6rem;
}
.card-list .card .p-list .item-02 {
  width: 4.2rem;
}
.card-list .card .p-list .item-03 {
  width: 7rem;
  text-align: left;
}
.card-list .card .c-list {
  max-height: 17rem;
  padding-top: 1.6rem;
  font-size: 1.4rem;
  overflow: hidden;
}

.card-list .card .c-list .list {
  display: flex;
}

.card-list .card .c-list .list:not(:first-child) {
  margin-top: 1.6rem;
}

.card-list .card .c-list.txt .list {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.card-list .card .c-list.txt .list:not(:first-child) {
  margin-top: 1.2rem;
}

.card-list .card .c-list.txt .date {
  width: 8rem;
  flex-shrink: 0;
}

.card-list .card .c-list.txt .name {
  width: 4.8rem;
  flex-shrink: 0;
}

.card-list .card .c-list.txt .status {
  flex: 1;
  text-align: center;
}

.card-list .card .c-list .txt-set .img-wrap {
  border-radius: 1rem;
  background: url(../images/icon/ci-24-no-logo.png) no-repeat center/contain;
  overflow: hidden;
}

/* ****  메인 페이지  **** */
.main-approval {
  margin-right: -4rem;
  margin-left: -4rem;
  padding: 4rem 4rem;
  background: #f1f3f5;
}

.main-card-wrap {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
}

.main-dashboard {
  display: flex;
  justify-content: space-between;
}

.main-count .ico-before-calendar {
  color: #616974;
  font-size: 1.2rem;
}

.main-notice {
  margin: 5.6rem 0 11.4rem 0;
}

.main-notice .tit-h3 {
  margin-bottom: 2.4rem;
}

.main-notice .no-data {
  margin: 4.4rem 0;
}

.notice-list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 8rem;
  row-gap: 3.2rem;
}

.notice-list li {
  width: calc(50% - 4rem);
  border-bottom: 1px solid #e1e4e9;
}

.notice-list li .ico-only-new {
  display: none;
}

.notice-list li.is-new .ico-only-new {
  display: flex;
}

.notice-list a {
  display: block;
  height: 7.2rem;
}

.notice-list a .tit {
  display: flex;
  align-items: center;
  font-size: 1.6rem;
}

.notice-list a .tit span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notice-list a .tit .ico-only-new {
  margin-left: 0.6rem;
}

.notice-list .list-bar {
  margin-top: 1.2rem;
}
.is-mobile .pc-hide {
  display: block;
}
.is-mobile .main-approval {
  margin: 0;
  padding: 2.4rem 2rem;
  background-color: #fff;
  border-radius: 1.6rem;
  box-shadow: 0 0.8rem 1.6rem 0 rgba(0, 0, 0, 0.04);
}

.is-mobile .main-card-wrap {
  position: relative;
  display: block;
}

.is-mobile .main-card-wrap .btn-login {
  position: absolute;
  top: 3.2rem;
  right: 1.2rem;
  color: #32353a;
  font-size: 1.2rem;
  text-decoration: underline;
  z-index: 1;
}

.is-mobile .main-card-wrap .card-tit {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

.is-mobile .main-card-wrap .card-tit .user {
  order: 2;
  margin-top: 1.6rem;
  font-size: 1.3rem;
}

.is-mobile .main-card-wrap .card-tit .desc {
  order: 3;
  font-size: 2rem;
}

.is-mobile .main-card-wrap .card-tit .img-wrap.brand {
  position: relative;
  width: 5.2rem;
  height: 5.2rem;
}

.is-mobile .main-card-wrap .card-list {
  gap: 0;
  margin-top: 1.6rem;
  background-color: #f8f9fa;
  border-radius: 1.2rem;
}

.is-mobile .main-card-wrap .card-list .card {
  position: relative;
  flex: 1;
  min-width: unset;
  width: auto;
  height: auto;
  padding: 1.8rem 0.6rem;
  background-color: transparent;
  box-shadow: none;
}

.is-mobile .main-card-wrap .card-list .card:not(:last-child)::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 2.4rem;
  transform: translateY(-50%);
  background: #e1e4e9;
}

.is-mobile .main-card-wrap .card-list .c-head {
  flex-direction: column;
  height: unset;
  padding-bottom: 0;
  border-bottom: none;
}

.is-mobile .main-card-wrap .card-list .c-tit {
  color: #151618;
  font-size: 1.1rem;
  text-align: center;
}

.is-mobile .main-card-wrap .card-list .count-set .count {
  margin-top: 0.8rem;
  margin-left: 0;
  text-decoration: none;
  font-size: 1.8rem;
}

.is-mobile .main-card-wrap .card-list .unit {
  display: none;
}
.is-mobile .main-card-wrap .card-list .p-list,
.is-mobile .main-card-wrap .card-list .t-list,
.is-mobile .main-card-wrap .card-list .c-list {
  display: none;
}

.is-mobile .main-card-wrap .noti-wrap {
  margin-top: 0.8rem;
}

.is-mobile .main-dashboard {
  margin: 1.2rem 0 0;
  padding: 2.4rem 2rem;
  background-color: #fff;
  border-radius: 1.6rem;
  box-shadow: 0 0.8rem 1.6rem 0 rgba(0, 0, 0, 0.04);
}

.is-mobile .main-dashboard .list-bar {
  flex-direction: column;
  gap: 0.8rem;
  margin: 0.8rem 0 0;
}

.is-mobile .main-dashboard .list-bar .list {
  width: 100%;
  margin-left: 0;
  padding: 1.6rem;
  border-radius: 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.is-mobile .main-dashboard .list-bar .list::after {
  display: none;
}

.is-mobile .main-dashboard .list-bar .list:has(.ico-before-up) {
  background-color: #fff9fc;
}

.is-mobile .main-dashboard .list-bar .list:has(.ico-before-down) {
  background-color: #f4f9ff;
}

.is-mobile .main-dashboard .list-bar .list:has(.ico-before-stand) {
  background-color: #f8f9fa;
}

.is-mobile .main-dashboard .list-bar .list .tit {
  font-size: 1.1rem;
}

.is-mobile .main-dashboard .list-bar .list strong {
  font-size: 1.8rem;
}

.is-mobile .main-dashboard .list-bar .list strong.small {
  font-size: 1.6rem;
}

.is-mobile .main-count .ico-before-up,
.is-mobile .main-count .ico-before-down,
.is-mobile .main-count .ico-before-stand {
  font-size: 1.2rem;
}

.is-mobile .main-count .ico-before-up::before,
.is-mobile .main-count .ico-before-down::before,
.is-mobile .main-count .ico-before-stand::before {
  background-color: #fff;
}

/* ****  로그인 페이지  **** */
.login-page {
  width: 40rem;
  margin: 10.4rem auto 0;
}

.login-page .tit-h1 {
  margin-bottom: 4.8rem;
  text-align: center;
}

.login-page .fieldset .form-group + .form-group {
  margin-top: 1.6rem;
}

.login-page .fieldset .text-list {
  margin-top: 0.8rem;
}

.login-page .qr-wrap {
  margin-top: 4.8rem;
}

.login-page .tab-conts {
  padding-top: 4.8rem;
}

.login-page .btn-box {
  margin-top: 2.4rem;
}

.login-page .login-guide {
  margin-top: 2.4rem;
  font-size: 1.6rem;
  text-align: center;
}

.login-page .input-id,
.login-page .input-pw {
  padding-left: 5.2rem;
}

.login-page .input-id {
  background: url(../images/icon/input-24-id.svg) no-repeat 1.6rem center/2.4rem 2.4rem;
}

.login-page .input-pw {
  background: url(../images/icon/input-24-pw.svg) no-repeat 1.6rem center/2.4rem 2.4rem;
}

.login-page .agree-check {
  margin-top: 4rem;
  margin-bottom: -0.8rem;
  text-align: center;
}

.is-mobile .login-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  margin: 4rem 0 0;
}

.is-mobile .login-page .qr-wrap {
  margin-top: 0;
  padding: 0 1.2rem;
}

.is-mobile .login-page .qr-wrap .app-guide {
  margin-left: -1.2rem;
  margin-right: -1.2rem;
}

/* ****  로그인 페이지 :: 약관팝업 **** */
.terms-wrap {
  background-color: #f8f9fa;
  border-radius: 1.6rem;
}

.terms-wrap .scroll-content {
  padding: 3.2rem 2.4rem;
}

.terms-tit {
  color: #32353a;
  text-align: center;
}

.terms-tit h2 {
  font-weight: 2rem;
}

.terms-tit p {
  margin-top: 1.2rem;
  font-size: 1.4rem;
}

.terms-con {
  margin-top: 4rem;
  padding-left: 1.6rem;
  color: #616974;
  font-size: 1.3rem;
}

.terms-con h3 {
  margin-bottom: 1.2rem;
  color: #32353a;
  font-size: 1.6rem;
  text-indent: -1.6rem;
}

.terms-con h3 + .depth2-tit {
  margin-top: 1.2rem;
}

.terms-con h3 ~ h3 {
  margin-top: 4rem;
}

.terms-con .depth2-tit {
  margin-top: 2.4rem;
  margin-bottom: 0.8rem;
  color: #32353a;
  font-size: 1.4rem;
  font-weight: 500;
}

.terms-con .depth3-tit {
  margin-bottom: 0.8rem;
  color: #32353a;
  font-weight: 700;
}

.terms-con .tree {
  margin-top: 1.2rem;
}

.terms-con .tree > li {
  position: relative;
  padding-left: 1.4rem;
  color: #32353a;
  font-size: 1.4rem;
  font-weight: 500;
}

.terms-con .tree > li + li {
  margin-top: 1.2rem;
}

.terms-con .tree > li .desc {
  display: block;
  margin-top: 0.8rem;
  color: #616974;
  font-size: 1.3rem;
  font-weight: 400;
}

.terms-con .tree > li::before {
  content: "";
  display: block;
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  background: url(../images/icon/terms-12-depth.svg) no-repeat 0 0;
  top: 0.3rem;
  left: 0;
}

.terms-msg {
  margin-top: 1.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
}

/* ***** 로그인 페이지 :: qr 로그인 ***** */
.qr-wrap.is-timeout {
  position: relative;
}

.qr-wrap.is-timeout .qr-code {
  opacity: 0.04;
  border-color: #e1e4e9;
}

.qr-wrap.is-timeout .or {
  color: transparent;
}

.qr-wrap.is-timeout .ico-only-refresh {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-wrap.is-timeout .app-guide {
  margin-top: 4.8rem;
}

.qr-wrap.is-timeout .info {
  display: none;
}

.qr-wrap.is-timeout .timer-wrap {
  display: none;
}

.qr-wrap.is-timeout .timeout-wrap {
  display: block;
  margin-top: 1.6rem;
  text-align: center;
  font-size: 1.6rem;
}

.qr-wrap .ico-only-refresh {
  display: none;
}

.qr-wrap .info {
  color: #32353a;
  font-size: 1.6rem;
  text-align: center;
}

.qr-wrap .btn-underline {
  margin-top: 0.8rem;
  font-size: 1.4rem;
}

.qr-wrap .timeout-wrap {
  display: none;
}

.qr-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  position: relative;
  width: 100%;
}

.qr-area .qr-code {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  position: relative;
  width: 16rem;
  height: 16rem;
  padding: 1.5rem;
  border: 1px solid #e1e4e9;
  border-radius: 1.6rem;
}

.qr-area .qr-code .img {
  width: 13rem;
  height: 13rem;
  flex-shrink: 0;
}

.qr-area .qr-code .num {
  color: #151618;
  font-size: 2rem;
  font-weight: 700;
}

.qr-area .or {
  color: #616974;
}

.timer-wrap {
  margin-top: 1.6rem;
  text-align: center;
}

.timer-wrap .timer {
  display: inline-block;
  color: #32353a;
  font-size: 1.4rem;
  font-weight: 400;
  padding-left: 2.8rem;
  background: url(../images/icon/login-24-time.svg) no-repeat left center/2.4rem 2.4rem;
  text-align: center;
}

.timer-wrap + .info {
  margin-top: 4.8rem;
}

.is-mobile .qr-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.is-mobile .qr-wrap.is-timeout .qr-code {
  opacity: 1;
}

.is-mobile .qr-wrap.is-timeout .num {
  opacity: 0.04;
}

.is-mobile .qr-wrap.is-timeout .ico-only-refresh {
  background-size: 6.4rem 6.4rem;
}

.is-mobile .qr-wrap.is-timeout .app-guide {
  margin-top: auto;
}

.is-mobile .qr-wrap.is-timeout .timeout-wrap {
  margin-top: 1.2rem;
  font-size: 1.4rem;
}

.is-mobile .qr-wrap.is-timeout .info {
  display: block;
}

.is-mobile .qr-wrap.is-timeout .btn-underline {
  margin-top: 1.6rem;
}

.is-mobile .qr-area {
  margin-top: 3.2rem;
}

.is-mobile .qr-wrap .info {
  order: -1;
  margin-top: 0;
  padding-top: 6.4rem;
  font-size: 2.4rem;
  text-align: left;
  background: url(../images/icon/login-48-app@2x.png) no-repeat left top/4.8rem 4.8rem;
}

.is-mobile .qr-code {
  width: 100%;
  height: 11.2rem;
  box-shadow: 0 0.8rem 1.6rem 0 rgba(0, 0, 0, 0.04);
  border: none;
  background-color: #fff;
}

.is-mobile .qr-code .num {
  font-size: 2.4rem;
}

.is-mobile .qr-code:has(.img) {
  display: none;
}

.is-mobile .or {
  display: none;
}

.is-mobile .timer-wrap {
  margin-top: 1.2rem;
}

/* ***** 로그인 - app guide ***** */
.app-guide {
  margin: 1.6rem auto 0;
  padding: 2.4rem 2.4rem 2.4rem 8.4rem;
  background: #f8f9fa url(../images/icon/login-48-app@2x.png) no-repeat 2.4rem center/4.8rem 4.8rem;
  border-radius: 1.6rem;
  text-align: left;
}

.app-guide p {
  font-size: 1.4rem;
}

.app-guide .step {
  display: inline-flex;
  align-items: center;
  font-size: 1.4rem;
}

.app-guide .step li:not(:last-child) {
  padding-right: 2.4rem;
  background: url(../images/icon/step-12-next.png) no-repeat calc(100% - 0.6rem) center/1.2rem 1.2rem;
}

.app-guide .step li.active {
  font-weight: 700;
}

.app-guide.col-type {
  margin: 0.8rem 0 0;
  padding: 1.2rem;
  border-radius: 0.8rem;
  background: #f8f9fa;
}

.app-guide.col-type p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  font-size: 1.2rem;
}

.app-guide.col-type p::before {
  content: "";
  width: 3.2rem;
  height: 3.2rem;
  background: url(../images/icon/login-48-app@2x.png) no-repeat center/contain;
}

.app-guide.col-type .step {
  margin-top: 0.8rem;
  font-size: 1.2rem;
}

.app-guide.col-type .step li:not(:last-child) {
  padding-right: 1.6rem;
  background: url(../images/icon/step-12-next.png) no-repeat calc(100% - 0.2rem) center/1.2rem 1.2rem;
}

.is-mobile .app-guide {
  margin-top: auto;
  display: flex;
  align-items: center;
  height: 3.6rem;
  padding: 0.8rem 1rem 0.8rem 3.8rem;
  background: transparent url(../images/icon/login-22-app@3x.png) no-repeat 0.8rem center/2.2rem 2.2rem;
  border: 1px solid #dadde2;
  border-radius: 1.8rem;
}

.is-mobile .app-guide p {
  padding-right: 2.4rem;
  background: url(../images/icon/step-12-next.png) no-repeat calc(100% - 0.6rem) center/1.2rem 1.2rem;
}

.is-mobile .app-guide li.active {
  color: #e22d72;
}

/* ****  고객관리 페이지 :: 성과보고서 조회  **** */
.report-wrap {
  width: 80rem;
  margin: 4rem auto 0;
}

.report-wrap .tit-h3 {
  text-align: center;
}

.report-wrap .tit-h3 + .info {
  margin-top: 2.6rem;
}

.report-wrap .info {
  text-align: right;
  font-size: 1.2rem;
}

.report-wrap .info p + p {
  margin-top: 0.8rem;
}

.report-wrap .img-wrap {
  border-radius: 0.6rem;
}

.report-wrap .report-box {
  margin-top: 1.6rem;
}

.report-wrap .no-data {
  height: 20rem;
  background: #f8f9fa;
  border-radius: 1.6rem;
}

.report-wrap .list-bar {
  justify-content: center;
  margin-top: 1.6rem;
}

.report-box {
  padding: 4rem;
  border: 1px solid #e1e4e9;
  border-radius: 1.6rem;
}

.report-box .section + .section {
  margin-top: 6.4rem;
}

.report-box .section .desc {
  margin-bottom: 1.2rem;
  color: #616974;
  font-size: 1.3rem;
}

.report-info-box {
  display: flex;
  justify-content: space-between;
  padding: 2.4rem;
  background-color: #f8f9fa;
  border-radius: 1.6rem;
}

.report-info-box .list-between {
  width: 30rem;
}

.report-info-box .text-box {
  width: 33rem;
  padding: 2.4rem 2.4rem 1.8rem 5.6rem;
  background: #fff url(../images/icon/ic-24-light.png) no-repeat 2.4rem 2.4rem/2.4rem 2.4rem;
  border-radius: 1.6rem;
}

.report-info-box .text-box .tit {
  padding: 0.2rem 0;
  font-size: 1.4rem;
  font-weight: 700;
}

.report-info-box .text-box .tit + .desc {
  margin-top: 0.8rem;
}

.report-info-box .text-box .desc {
  color: #616974;
  font-size: 1.4rem;
}

.report-info-box .result.grade-1 {
  padding-left: 2.6rem;
  color: #e91616;
  background: url(../images/icon/ic-24-mp-1.png) no-repeat 0rem center/2.4rem 2.4rem;
}

/* ****  공지/기타 페이지 :: 상세페이지  **** */
.board-wrap {
  width: 80rem;
  margin: 0 auto;
}

.board-head {
  padding-top: 4rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid #e1e4e9;
}

.board-head .board-title {
  color: #151618;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}

.board-head .date {
  display: block;
  margin-top: 3.2rem;
  font-size: 1.2rem;
  text-align: right;
}

.board-con {
  padding: 4rem;
}

.board-con .txt {
  color: #616974;
  font-size: 1.3rem;
  white-space: pre-line;
}

.board-con .file-box {
  display: flex;
  align-items: center;
  height: 4rem;
  margin-top: 4rem;
  padding: 0 2rem;
  background: #f8f9fa;
  border-radius: 0.8rem;
}

.board-con .file-box .ico-before-attach {
  text-decoration: underline;
}

.board-list {
  border-top: 1px solid #e1e4e9;
}

.board-list .link-nav {
  width: 11.2rem;
  margin-left: 4rem;
}

.board-list .list {
  display: flex;
  align-items: center;
  height: 5rem;
  border-bottom: 1px solid #e1e4e9;
}

.board-list .list .tit:hover {
  text-decoration: underline;
}

/* ****  공지/기타 페이지 :: 1:1 문의 **** */
.accordion-content td {
  height: auto !important;
  padding: 0 !important;
}

.table-layout.data .accordion-content td {
  border: none;
}

.table-layout.data .inquiry-row ~ .inquiry-row td {
  border-top: none;
}

.inquiry-row {
  cursor: pointer;
}

.inquiry-row.is-open td {
  background-color: #f8f9fa;
}

.inquiry-text {
  white-space: pre-line;
}

.accordion-inner {
  display: none;
  padding: 2.4rem 3rem 2.4rem 21.2rem;
  background-color: #f8f9fa;
  border-bottom: 1px solid #f1f3f5;
  text-align: left;
}

.accordion-inner td {
  border: none;
}

.answer-form {
  padding-top: 2.4rem;
}

.answer-form .btn-box {
  margin-top: 1.2rem;
}

.answer-complete {
  display: flex;
  gap: 1rem;
  margin-top: 2.4rem;
  padding-top: 2.4rem;
  border-top: 1px solid #e1e4e9;
  color: #616974;
}

.answer-complete .answer-text {
  display: flex;
  justify-content: space-between;
  width: 100%;
  white-space: pre-line;
}

.answer-complete .answer-text .info {
  display: flex;
  align-items: flex-start;
  margin-right: -3rem;
  color: #32353a;
}

.answer-complete .answer-text .from {
  display: block;
  width: 20rem;
  text-align: center;
}

.answer-complete .answer-text .date {
  display: block;
  width: 20rem;
  text-align: center;
}

.answer-complete .btn-box {
  margin-top: 2.4rem;
}

/* ****  공지/기타 페이지 :: 자율형mp제안 조회/발송, 고객안내 **** */
.kakao-alarm {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.kakao-alarm::before {
  content: "";
  position: absolute;
  top: -1.6rem;
  right: 0;
  width: 4rem;
  height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: url(../images/icon/kakao-alarm.svg) no-repeat center/contain;
}

.kakao-alarm .head {
  height: 4.8rem;
  padding: 0 2rem;
  border-radius: 1.6rem 1.6rem 0 0;
  background: #fae100;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 4.8rem;
}

.kakao-alarm .content {
  width: 100%;
  border-radius: 0 0 1.6rem 1.6rem;
  border: 1px solid #dadde2;
  border-top: none;
  overflow: auto;
  flex: 1;
  white-space: pre-line;
}

.kakao-alarm .content .scroll-content {
  padding: 2rem;
}

.send-wrap {
  width: 100%;
  margin-top: 4rem;
}

.send-list-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-height: 5.2rem;
  max-height: 12.4rem;
  overflow: auto;
  padding: 1.2rem 2rem;
  border-radius: 0.8rem;
  color: #9398a0;
  background-color: #f8f9fa;
  font-size: 1.3rem;
}

.send-list-box .msg {
  width: 100%;
  text-align: center;
}

.send-list-box.has-badge .msg {
  display: none;
}

.send-list-box.has-badge .send-list {
  display: inline-flex;
}

.send-list {
  display: none;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.badge-delete {
  position: relative;
  height: 2.8rem;
  padding: 0 2.8rem 0 1.4rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 1.4rem;
  font-size: 1.3rem;
  line-height: 2.8rem;
}

.badge-delete .ico-only-delete {
  position: absolute;
  top: 0;
  right: 0;
}

/* ****  주문관리 :: mp진행현황 그래프  **** */
.progress-group {
  display: inline-flex;
  width: 100%;
  padding: 0 8.6rem 0 3rem;
  gap: 1.2rem;
}

.progress-group .total {
  margin-right: 3rem;
  position: absolute;
  right: 0;
  font-size: 1.4rem;
}

.progress-group .total strong {
  display: inline-block;
  width: 2.6rem;
  text-align: right;
}

.progress-box {
  margin-top: 0.8rem;
  padding: 2rem;
  border-radius: 0.8rem;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.progress-box .progress-set {
  width: calc(50% - 1rem);
}

.progress-list .total {
  margin-top: 0.8rem;
  text-align: right;
}

.progress-set {
  display: inline-flex;
  flex-direction: column;
  width: 100%;
}

.progress-set .bar-wrap {
  margin-top: 0.4rem;
}

.progress-set.mt16 {
  margin-top: 1.6rem;
}

.bar-wrap {
  position: relative;
  width: 100%;
  height: 0.6rem;
}

.bar-wrap .bar {
  position: absolute;
  top: -0.1rem;
  left: 0;
  height: 0.6rem;
  border-radius: 0.3rem;
}

.bar-wrap.status-buy {
  background-color: #fff4fa;
  border-radius: 0.3rem;
}

.bar-wrap.status-buy .bar {
  background: #e22d72;
}

.bar-wrap.status-sell {
  background-color: #f4f9ff;
  border-radius: 0.3rem;
}

.bar-wrap.status-sell .bar {
  background: #1c4fde;
}

/* ****  팝업 :: 그룹편집 **** */
.group-wrap {
  display: flex;
  gap: 2.4rem;
  height: 100%;
  overflow: hidden;
}

.group-list-set {
  display: flex;
  flex-direction: column;
  width: 29.6rem;
  height: 100%;
  padding: 1.6rem;
  border-radius: 0.8rem;
  border: 1px solid #dadde2;
  overflow: auto;
}

.group-list-set > .btn-box {
  padding-bottom: 1.2rem;
}

.group-list-set > .scroll-content {
  display: flex;
  flex-direction: column;
}

.group-list-set .group-con {
  flex: 1;
  height: calc(100% - 4.2rem);
}

.group-list > .list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.8rem;
  padding: 0 1.6rem;
  border-radius: 0.8rem;
}

.group-list > .list.ui-sortable-handle.ui-sortable-helper {
  background-color: #fff9fc;
}

.group-list > .list .tit {
  font-weight: 700;
}

.group-list > .list .btn-box {
  display: none;
}

.group-list > .list:not(:first-child) {
  margin-top: 0.8rem;
}

.group-list > .list.active {
  background-color: #f4f9ff;
}

.group-list > .list.active .btn-box {
  display: none;
}

.group-list > .list:hover {
  background-color: #f8f9fa;
}

.group-list > .list:hover .btn-box {
  display: flex;
}

.group-list .num {
  display: inline-block;
  margin-left: 0.8rem;
  font-size: 1.4rem;
  color: #666666;
  font-weight: 500;
}

.group-list .btn-box {
  gap: 0.4rem;
}

.is-tablet .group-list > .list {
  background-color: #f8f9fa;
}

.is-tablet .group-list > .list .btn-box {
  display: flex;
}

.group-edit-set {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  overflow: auto;
}

.group-edit-set > .scroll-content {
  display: flex;
  flex-direction: column;
}

.group-edit-set .group-con {
  flex: 1;
  height: calc(100% - 5.4rem);
}

.group-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
  padding: 0.8rem 1.6rem;
  background: #f8f9fa;
  border-radius: 0.8rem;
}

.group-title .btn-box {
  margin-left: auto;
}

.group-edit > .list {
  display: flex;
  align-items: center;
  height: 5.6rem;
  margin: 0 1.6rem;
  border-bottom: 1px solid #e1e4e9;
}

.group-edit > .list.ui-sortable-handle.ui-sortable-helper {
  position: relative;
}

.group-edit > .list.ui-sortable-handle.ui-sortable-helper::before {
  background-color: #fff9fc;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 -0.8rem;
}

.group-edit .btn-box {
  margin-left: auto;
  gap: 0.4rem;
}

/* ****  팝업 :: 주소검색 **** */
.address-guide {
  padding-left: 2rem;
  font-size: 1.2rem;
  color: #9398a0;
  background: url(../images/icon/info-16-notice-gray.svg) no-repeat left 0.1rem/1.6rem;
}

.address-result-wrap {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  margin-top: 1.6rem;
}

.address-result .tit {
  font-size: 1.2rem;
}

.address-list .list {
  border-bottom: 1px solid #f1f3f5;
}

.address-list .list:first-child {
  margin-top: 1rem;
}

.address-list .list:first-child > button {
  padding-bottom: 1rem;
}

.address-list .list .zip {
  font-size: 1.3rem;
  font-weight: 500;
}

.address-list .list .addr {
  margin-left: 0.6rem;
  font-size: 1.3rem;
  font-weight: 400;
}

.address-list .list > button {
  display: flex;
  align-items: center;
  width: 100%;
  height: 4.6rem;
  text-align: left;
  padding: 1rem 0;
}

.address-list .list > button:hover {
  background-color: #f4f9ff;
}

.detail-address {
  margin-top: 2.8rem;
}

.detail-address .tit {
  font-size: 1.3rem;
  font-weight: 700;
}

.detail-address .form-group {
  margin-top: 0.8rem;
}

/* ****  mp관리 :: 대표mp등록 **** */
.viewContent {
  display: none;
}

.viewContent.on {
  display: flex;
}

/* **** 버튼 :: 모바일 팝업 버튼 **** */
.select-list {
  width: 100%;
  overflow: auto;
}

.select-list .card-chip {
  position: relative;
  width: 100%;
  height: 7.4rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: row;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.6rem 2rem;
  border: 1px solid #e1e4e9;
  border-radius: 1.6rem;
}

.select-list .card-chip.active {
  border: 2px solid #396dfc;
}

.select-list .card-chip.active::after {
  content: "";
  position: absolute;
  right: 2rem;
  display: inline-flex;
  width: 2.4rem;
  height: 2.4rem;
  background: url(../images/icon/btn-24-check-blue.svg) no-repeat 0 0;
}

.select-list .card-chip:not(:first-child) {
  margin-top: 1.2rem;
}

.link-list {
  width: 100%;
  overflow: auto;
}

.link-list.mt16 {
  margin-top: 1.6rem;
}

.link-list .card-chip {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: row;
  flex-direction: column;
  padding: 1.4rem 0;
}

.link-list .card-chip::after {
  content: "";
  position: absolute;
  right: 0;
  display: inline-flex;
  width: 1.6rem;
  height: 1.6rem;
  background: url(../images/icon/list-16-link-gray.svg) no-repeat 0 0;
}

.link-list .card-chip .tit {
  font-size: 1.6rem;
  font-weight: 700;
}

.link-list .card-chip .list-dot {
  margin-top: 0.6rem;
}

.link-list .card-chip:first-child {
  padding-top: 0;
}

.is-mobile .mobile-search-box {
  position: relative;
  flex-direction: column;
  gap: 0.8rem;
  width: 100%;
  padding: 2rem;
  background-color: #f8f9fa;
  border-radius: 1.6rem;
}

.is-mobile .mobile-search-box .user {
  font-size: 1.4rem;
  font-weight: 500;
}

.is-mobile .mobile-search-box .date {
  font-size: 1.2rem;
  color: #616974;
}

.is-mobile .mobile-search-box .ico {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background-color: #b0b8c1;
}

.is-mobile .mobile-search-box .ico::after {
  content: "";
  display: inline-flex;
  width: 2.4rem;
  height: 2.4rem;
  background: url(../images/icon/mobile-24-search-white.svg) no-repeat center/2.4rem 2.4rem;
}

.is-mobile .mobile-result-group {
  width: 100%;
  margin-top: 2.4rem;
}

.menu-link {
  width: 100%;
  overflow: auto;
}

.menu-link .link {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  padding: 1.4rem 0;
  font-size: 1.4rem;
}

.menu-link .link::after {
  content: "";
  position: absolute;
  right: 0;
  display: inline-flex;
  width: 1.6rem;
  height: 1.6rem;
  background: url(../images/icon/list-16-link-gray.svg) no-repeat center;
}

.side-menu-mobile {
  position: fixed;
  right: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  padding: 0 2rem;
  background-color: #fff;
  box-shadow: 0 0.8rem 1.6rem 0 rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  z-index: 102;
}

.side-menu-mobile.is-open {
  right: 0;
  opacity: 1;
  visibility: visible;
}

.side-menu-mobile .menu-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.8rem;
  background-color: #fff;
}

.side-menu-mobile .company-info {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 0.8rem;
  padding: 2rem;
  background: #f8f9fa;
  border-radius: 1.6rem;
  gap: 1.2rem;
  color: #616974;
  font-size: 1.2rem;
}

.side-menu-mobile .company-info .img-wrap {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  overflow: hidden;
  background: url(../images/icon/ci-80-no-logo.svg) no-repeat center/contain;
}

.side-menu-mobile .company-info .txt-wrap .txt + .txt {
  margin-top: 0.2rem;
}

.side-menu-mobile .company-info .btn-login {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  font-size: 1.2rem;
  text-decoration: underline;
}

.side-menu-mobile .menu-link {
  margin-top: 2.4rem;
}

/* ** 박스 스타일 ** */
.line-box {
  padding: 4rem;
  border: 1px solid #e1e4e9;
  border-radius: 1.6rem;
}

/* box */
.text-box {
  padding: 2.4rem;
  border-radius: 0.8rem;
}

.text-box.bg-gray {
  background: #f8f9fa;
}

.img-wrap {
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
}

.txt-set {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}

.txt-set .img-wrap {
  width: 2.4rem;
  height: 2.4rem;
}

.txt-set .txt {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.txt-set .name {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  width: 5.6rem;
  flex-shrink: 0;
}

.txt-set .name.gray {
  color: #616974;
}

.txt-set.sm {
  gap: 0.4rem;
}

.txt-set.sm .img-wrap {
  width: 2rem;
  height: 2rem;
}

.txt-set.xs {
  gap: 0.4rem;
  font-size: 1.2rem;
}

.txt-set.xs .img-wrap {
  width: 1.6rem;
  height: 1.6rem;
}

/* ***** 페이지 내 개인정보  ***** */
.personal-info-set {
  margin-bottom: 1.6rem;
}

.personal-info {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 0.8rem;
}

.personal-info .user {
  color: #151618;
  font-size: 2rem;
  font-weight: 700;
}

.modal .personal-info-set {
  margin-bottom: 2.4rem;
}

/* ***** 카운드  ***** */
.count-set .count {
  margin-left: 0.4rem;
}

.count-set .count.point {
  color: #e22d72;
  font-size: 2rem;
  font-weight: 700;
  text-decoration: underline;
}

.count-set.sm {
  font-size: 1.2rem;
}

/* ****  업무 비밀번호 입력 **** */
.custom-password {
  margin-top: 4.5rem;
  text-align: center;
}

.fake-input {
  display: block;
  width: 7.8rem;
  height: 3rem;
  padding-bottom: 0.2rem;
  margin: 0 auto;
  cursor: pointer;
  color: #32353a;
  font-size: 2.4rem;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #32353a;
  outline: none;
  text-align: center;
  letter-spacing: -0.12rem;
}

.fake-input::placeholder {
  color: #32353a;
  font-size: 1.4rem;
  letter-spacing: 0;
}

.dot-img {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: #32353a;
  display: inline-block;
  margin: 0 0.2rem;
}

/*! jQuery UI - v1.13.2 - 2022-07-14
* http://jqueryui.com
* Includes: core.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, draggable.css, resizable.css, progressbar.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Arial%2CHelvetica%2Csans-serif&fsDefault=1em&fwDefault=normal&cornerRadius=3px&bgColorHeader=e9e9e9&bgTextureHeader=flat&borderColorHeader=dddddd&fcHeader=333333&iconColorHeader=444444&bgColorContent=ffffff&bgTextureContent=flat&borderColorContent=dddddd&fcContent=333333&iconColorContent=444444&bgColorDefault=f6f6f6&bgTextureDefault=flat&borderColorDefault=c5c5c5&fcDefault=454545&iconColorDefault=777777&bgColorHover=ededed&bgTextureHover=flat&borderColorHover=cccccc&fcHover=2b2b2b&iconColorHover=555555&bgColorActive=007fff&bgTextureActive=flat&borderColorActive=003eff&fcActive=ffffff&iconColorActive=ffffff&bgColorHighlight=fffa90&bgTextureHighlight=flat&borderColorHighlight=dad55e&fcHighlight=777620&iconColorHighlight=777620&bgColorError=fddfdf&bgTextureError=flat&borderColorError=f1a899&fcError=5f3f3f&iconColorError=cc0000&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=666666&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=5px&offsetTopShadow=0px&offsetLeftShadow=0px&cornerRadiusShadow=8px
* Copyright jQuery Foundation and other contributors; Licensed MIT */
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
  display: none;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.ui-helper-reset {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  line-height: 1.3;
  text-decoration: none;
  font-size: 100%;
  list-style: none;
}

.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
  content: "";
  display: table;
  border-collapse: collapse;
}

.ui-helper-clearfix:after {
  clear: both;
}

.ui-helper-zfix {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  -ms-filter: "alpha(opacity=0)";
  /* support: IE8 */
}

.ui-front {
  z-index: 100;
}

/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
  cursor: default !important;
  pointer-events: none;
}

/* Icons
----------------------------------*/
.ui-icon {
  display: inline-block;
  vertical-align: middle;
  margin-top: -0.25em;
  position: relative;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat;
}

.ui-widget-icon-block {
  left: 50%;
  margin-left: -8px;
  display: block;
}

/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ui-accordion .ui-accordion-header {
  display: block;
  cursor: pointer;
  position: relative;
  margin: 2px 0 0 0;
  padding: 0.5em 0.5em 0.5em 0.7em;
  font-size: 100%;
}

.ui-accordion .ui-accordion-content {
  padding: 1em 2.2em;
  border-top: 0;
  overflow: auto;
}

.ui-autocomplete {
  position: absolute;
  top: 0;
  left: 0;
  cursor: default;
}

.ui-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
  outline: 0;
}

.ui-menu .ui-menu {
  position: absolute;
}

.ui-menu .ui-menu-item {
  margin: 0;
  cursor: pointer;
  /* support: IE10, see #8844 */
  list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}

.ui-menu .ui-menu-item-wrapper {
  position: relative;
  padding: 3px 1em 3px 0.4em;
}

.ui-menu .ui-menu-divider {
  margin: 5px 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  border-width: 1px 0 0 0;
}

.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
  margin: -1px;
}

/* icon support */
.ui-menu-icons {
  position: relative;
}

.ui-menu-icons .ui-menu-item-wrapper {
  padding-left: 2em;
}

/* left-aligned */
.ui-menu .ui-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.2em;
  margin: auto 0;
}

/* right-aligned */
.ui-menu .ui-menu-icon {
  left: auto;
  right: 0;
}

.ui-button {
  padding: 0.4em 1em;
  display: inline-block;
  position: relative;
  line-height: normal;
  margin-right: 0.1em;
  cursor: pointer;
  vertical-align: middle;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Support: IE <= 11 */
  overflow: visible;
}

.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
  text-decoration: none;
}

/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
  width: 2em;
  box-sizing: border-box;
  text-indent: -9999px;
  white-space: nowrap;
}

/* no icon support for input elements */
input.ui-button.ui-button-icon-only {
  text-indent: 0;
}

/* button icon element(s) */
.ui-button-icon-only .ui-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: -8px;
}

.ui-button.ui-icon-notext .ui-icon {
  padding: 0;
  width: 2.1em;
  height: 2.1em;
  text-indent: -9999px;
  white-space: nowrap;
}

input.ui-button.ui-icon-notext .ui-icon {
  width: auto;
  height: auto;
  text-indent: 0;
  white-space: normal;
  padding: 0.4em 1em;
}

/* workarounds */
/* Support: Firefox 5 - 40 */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.ui-controlgroup {
  vertical-align: middle;
  display: inline-block;
}

.ui-controlgroup > .ui-controlgroup-item {
  float: left;
  margin-left: 0;
  margin-right: 0;
}

.ui-controlgroup > .ui-controlgroup-item:focus,
.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {
  z-index: 9999;
}

.ui-controlgroup-vertical > .ui-controlgroup-item {
  display: block;
  float: none;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  text-align: left;
}

.ui-controlgroup-vertical .ui-controlgroup-item {
  box-sizing: border-box;
}

.ui-controlgroup .ui-controlgroup-label {
  padding: 0.4em 1em;
}

.ui-controlgroup .ui-controlgroup-label span {
  font-size: 80%;
}

.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
  border-left: none;
}

.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
  border-top: none;
}

.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
  border-right: none;
}

.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
  border-bottom: none;
}

/* Spinner specific style fixes */
.ui-controlgroup-vertical .ui-spinner-input {
  /* Support: IE8 only, Android < 4.4 only */
  width: 75%;
  width: calc(100% - 2.4em);
}

.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
  border-top-style: solid;
}

.ui-checkboxradio-label .ui-icon-background {
  box-shadow: inset 1px 1px 1px #ccc;
  border-radius: 0.12em;
  border: none;
}

.ui-checkboxradio-radio-label .ui-icon-background {
  width: 16px;
  height: 16px;
  border-radius: 1em;
  overflow: visible;
  border: none;
}

.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
  background-image: none;
  width: 8px;
  height: 8px;
  border-width: 4px;
  border-style: solid;
}

.ui-checkboxradio-disabled {
  pointer-events: none;
}

.ui-datepicker {
  width: 17em;
  padding: 0.2em 0.2em 0;
  display: none;
}

.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: 0.2em 0;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 1.8em;
  height: 1.8em;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
  top: 1px;
}

.ui-datepicker .ui-datepicker-prev {
  left: 2px;
}

.ui-datepicker .ui-datepicker-next {
  right: 2px;
}

.ui-datepicker .ui-datepicker-prev-hover {
  left: 1px;
}

.ui-datepicker .ui-datepicker-next-hover {
  right: 1px;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -8px;
  top: 50%;
  margin-top: -8px;
}

.ui-datepicker .ui-datepicker-title {
  margin: 0 2.3em;
  line-height: 1.8em;
  text-align: center;
}

.ui-datepicker .ui-datepicker-title select {
  font-size: 1em;
  margin: 1px 0;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  width: 45%;
}

.ui-datepicker table {
  width: 100%;
  font-size: 0.9em;
  border-collapse: collapse;
  margin: 0 0 0.4em;
}

.ui-datepicker th {
  padding: 0.7em 0.3em;
  text-align: center;
  font-weight: bold;
  border: 0;
}

.ui-datepicker td {
  border: 0;
  padding: 1px;
}

.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  padding: 0.2em;
  text-align: right;
  text-decoration: none;
}

.ui-datepicker .ui-datepicker-buttonpane {
  background-image: none;
  margin: 0.7em 0 0 0;
  padding: 0 0.2em;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
  float: right;
  margin: 0.5em 0.2em 0.4em;
  cursor: pointer;
  padding: 0.2em 0.6em 0.3em 0.6em;
  width: auto;
  overflow: visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
  width: auto;
}

.ui-datepicker-multi .ui-datepicker-group {
  float: left;
}

.ui-datepicker-multi .ui-datepicker-group table {
  width: 95%;
  margin: 0 auto 0.4em;
}

.ui-datepicker-multi-2 .ui-datepicker-group {
  width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
  width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
  width: 25%;
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
  border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
  clear: left;
}

.ui-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
  direction: rtl;
}

.ui-datepicker-rtl .ui-datepicker-prev {
  right: 2px;
  left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next {
  left: 2px;
  right: auto;
}

.ui-datepicker-rtl .ui-datepicker-prev:hover {
  right: 1px;
  left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next:hover {
  left: 1px;
  right: auto;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane {
  clear: right;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button {
  float: left;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
  float: right;
}

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
  border-right-width: 0;
  border-left-width: 1px;
}

/* Icons */
.ui-datepicker .ui-icon {
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat;
  left: 0.5em;
  top: 0.3em;
}

.ui-dialog {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.2em;
  outline: 0;
}

.ui-dialog .ui-dialog-titlebar {
  padding: 0.4em 1em;
  position: relative;
}

.ui-dialog .ui-dialog-title {
  float: left;
  margin: 0.1em 0;
  white-space: nowrap;
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-dialog .ui-dialog-titlebar-close {
  position: absolute;
  right: 0.3em;
  top: 50%;
  width: 20px;
  margin: -10px 0 0 0;
  padding: 1px;
  height: 20px;
}

.ui-dialog .ui-dialog-content {
  position: relative;
  border: 0;
  padding: 0.5em 1em;
  background: none;
  overflow: auto;
}

.ui-dialog .ui-dialog-buttonpane {
  text-align: left;
  border-width: 1px 0 0 0;
  background-image: none;
  margin-top: 0.5em;
  padding: 0.3em 1em 0.5em 0.4em;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: right;
}

.ui-dialog .ui-dialog-buttonpane button {
  margin: 0.5em 0.4em 0.5em 0;
  cursor: pointer;
}

.ui-dialog .ui-resizable-n {
  height: 2px;
  top: 0;
}

.ui-dialog .ui-resizable-e {
  width: 2px;
  right: 0;
}

.ui-dialog .ui-resizable-s {
  height: 2px;
  bottom: 0;
}

.ui-dialog .ui-resizable-w {
  width: 2px;
  left: 0;
}

.ui-dialog .ui-resizable-se,
.ui-dialog .ui-resizable-sw,
.ui-dialog .ui-resizable-ne,
.ui-dialog .ui-resizable-nw {
  width: 7px;
  height: 7px;
}

.ui-dialog .ui-resizable-se {
  right: 0;
  bottom: 0;
}

.ui-dialog .ui-resizable-sw {
  left: 0;
  bottom: 0;
}

.ui-dialog .ui-resizable-ne {
  right: 0;
  top: 0;
}

.ui-dialog .ui-resizable-nw {
  left: 0;
  top: 0;
}

.ui-draggable .ui-dialog-titlebar {
  cursor: move;
}

.ui-draggable-handle {
  -ms-touch-action: none;
  touch-action: none;
}

.ui-resizable {
  position: relative;
}

.ui-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  display: block;
  -ms-touch-action: none;
  touch-action: none;
}

.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
  display: none;
}

.ui-resizable-n {
  cursor: n-resize;
  height: 7px;
  width: 100%;
  top: -5px;
  left: 0;
}

.ui-resizable-s {
  cursor: s-resize;
  height: 7px;
  width: 100%;
  bottom: -5px;
  left: 0;
}

.ui-resizable-e {
  cursor: e-resize;
  width: 7px;
  right: -5px;
  top: 0;
  height: 100%;
}

.ui-resizable-w {
  cursor: w-resize;
  width: 7px;
  left: -5px;
  top: 0;
  height: 100%;
}

.ui-resizable-se {
  cursor: se-resize;
  width: 12px;
  height: 12px;
  right: 1px;
  bottom: 1px;
}

.ui-resizable-sw {
  cursor: sw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  bottom: -5px;
}

.ui-resizable-nw {
  cursor: nw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  top: -5px;
}

.ui-resizable-ne {
  cursor: ne-resize;
  width: 9px;
  height: 9px;
  right: -5px;
  top: -5px;
}

.ui-progressbar {
  height: 2em;
  text-align: left;
  overflow: hidden;
}

.ui-progressbar .ui-progressbar-value {
  margin: -1px;
  height: 100%;
}

.ui-progressbar .ui-progressbar-overlay {
  background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
  height: 100%;
  -ms-filter: "alpha(opacity=25)";
  /* support: IE8 */
  opacity: 0.25;
}

.ui-progressbar-indeterminate .ui-progressbar-value {
  background-image: none;
}

.ui-selectable {
  -ms-touch-action: none;
  touch-action: none;
}

.ui-selectable-helper {
  position: absolute;
  z-index: 100;
  border: 1px dotted black;
}

.ui-selectmenu-menu {
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.ui-selectmenu-menu .ui-menu {
  overflow: auto;
  overflow-x: hidden;
  padding-bottom: 1px;
}

.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
  font-size: 1em;
  font-weight: bold;
  line-height: 1.5;
  padding: 2px 0.4em;
  margin: 0.5em 0 0 0;
  height: auto;
  border: 0;
}

.ui-selectmenu-open {
  display: block;
}

.ui-selectmenu-text {
  display: block;
  margin-right: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-selectmenu-button.ui-button {
  text-align: left;
  white-space: nowrap;
  width: 14em;
}

.ui-selectmenu-icon.ui-icon {
  float: right;
  margin-top: 0;
}

.ui-slider {
  position: relative;
  text-align: left;
}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: pointer;
  -ms-touch-action: none;
  touch-action: none;
}

.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: 0.7em;
  display: block;
  border: 0;
  background-position: 0 0;
}

/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
  filter: inherit;
}

.ui-slider-horizontal {
  height: 0.8em;
}

.ui-slider-horizontal .ui-slider-handle {
  top: -0.3em;
  margin-left: -0.6em;
}

.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}

.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
}

.ui-slider-horizontal .ui-slider-range-max {
  right: 0;
}

.ui-slider-vertical {
  width: 0.8em;
  height: 100px;
}

.ui-slider-vertical .ui-slider-handle {
  left: -0.3em;
  margin-left: 0;
  margin-bottom: -0.6em;
}

.ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 100%;
}

.ui-slider-vertical .ui-slider-range-min {
  bottom: 0;
}

.ui-slider-vertical .ui-slider-range-max {
  top: 0;
}

.ui-sortable-handle {
  -ms-touch-action: none;
  touch-action: none;
}

.ui-spinner {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 0;
  vertical-align: middle;
}

.ui-spinner-input {
  border: none;
  background: none;
  color: inherit;
  padding: 0.222em 0;
  margin: 0.2em 0;
  vertical-align: middle;
  margin-left: 0.4em;
  margin-right: 2em;
}

.ui-spinner-button {
  width: 1.6em;
  height: 50%;
  font-size: 0.5em;
  padding: 0;
  margin: 0;
  text-align: center;
  position: absolute;
  cursor: default;
  display: block;
  overflow: hidden;
  right: 0;
}

/* more specificity required here to override default borders */
.ui-spinner a.ui-spinner-button {
  border-top-style: none;
  border-bottom-style: none;
  border-right-style: none;
}

.ui-spinner-up {
  top: 0;
}

.ui-spinner-down {
  bottom: 0;
}

.ui-tabs {
  position: relative;
  /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
  padding: 0.2em;
}

.ui-tabs .ui-tabs-nav {
  margin: 0;
  padding: 0.2em 0.2em 0;
}

.ui-tabs .ui-tabs-nav li {
  list-style: none;
  float: left;
  position: relative;
  top: 0;
  margin: 1px 0.2em 0 0;
  border-bottom-width: 0;
  padding: 0;
  white-space: nowrap;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
  float: left;
  padding: 0.5em 1em;
  text-decoration: none;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  margin-bottom: -1px;
  padding-bottom: 1px;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
  cursor: text;
}

.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
  cursor: pointer;
}

.ui-tabs .ui-tabs-panel {
  display: block;
  border-width: 0;
  padding: 1em 1.4em;
  background: none;
}

.ui-tooltip {
  padding: 8px;
  position: absolute;
  z-index: 9999;
  max-width: 300px;
}

body .ui-tooltip {
  border-width: 2px;
}

/* Component containers
----------------------------------*/
.ui-widget {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}

.ui-widget .ui-widget {
  font-size: 1em;
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}

.ui-widget.ui-widget-content {
  border: 1px solid #c5c5c5;
}

.ui-widget-content {
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #333333;
}

.ui-widget-content a {
  color: #333333;
}

.ui-widget-header {
  border: 1px solid #dddddd;
  background: #e9e9e9;
  color: #333333;
  font-weight: bold;
}

.ui-widget-header a {
  color: #333333;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  border: 1px solid #c5c5c5;
  background: #f6f6f6;
  font-weight: normal;
  color: #454545;
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
  color: #454545;
  text-decoration: none;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
  border: 1px solid #cccccc;
  background: #ededed;
  font-weight: normal;
  color: #2b2b2b;
}

.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
a.ui-button:hover,
a.ui-button:focus {
  color: #2b2b2b;
  text-decoration: none;
}

.ui-visual-focus {
  box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  border: 1px solid #003eff;
  background: #007fff;
  font-weight: normal;
  color: #ffffff;
}

.ui-icon-background,
.ui-state-active .ui-icon-background {
  border: #003eff;
  background-color: #ffffff;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
  color: #ffffff;
  text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 1px solid #dad55e;
  background: #fffa90;
  color: #777620;
}

.ui-state-checked {
  border: 1px solid #dad55e;
  background: #fffa90;
}

.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
  color: #777620;
}

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
  border: 1px solid #f1a899;
  background: #fddfdf;
  color: #5f3f3f;
}

.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
  color: #5f3f3f;
}

.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
  color: #5f3f3f;
}

.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
  font-weight: bold;
}

.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
  opacity: 0.7;
  -ms-filter: "alpha(opacity=70)";
  /* support: IE8 */
  font-weight: normal;
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
  opacity: 0.35;
  -ms-filter: "alpha(opacity=35)";
  /* support: IE8 */
  background-image: none;
}

.ui-state-disabled .ui-icon {
  -ms-filter: "alpha(opacity=35)";
  /* support: IE8 - See #6059 */
}

/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
  width: 16px;
  height: 16px;
}

.ui-icon,
.ui-widget-content .ui-icon {
  background-image: url("images/ui-icons_444444_256x240.png");
}

.ui-widget-header .ui-icon {
  background-image: url("images/ui-icons_444444_256x240.png");
}

.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon {
  background-image: url("images/ui-icons_555555_256x240.png");
}

.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
  background-image: url("images/ui-icons_ffffff_256x240.png");
}

.ui-state-highlight .ui-icon,
.ui-button .ui-state-highlight.ui-icon {
  background-image: url("images/ui-icons_777620_256x240.png");
}

.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
  background-image: url("images/ui-icons_cc0000_256x240.png");
}

.ui-button .ui-icon {
  background-image: url("images/ui-icons_777777_256x240.png");
}

/* positioning */
/* Three classes needed to override `.ui-button:hover .ui-icon` */
.ui-icon-blank.ui-icon-blank.ui-icon-blank {
  background-image: none;
}

.ui-icon-caret-1-n {
  background-position: 0 0;
}

.ui-icon-caret-1-ne {
  background-position: -16px 0;
}

.ui-icon-caret-1-e {
  background-position: -32px 0;
}

.ui-icon-caret-1-se {
  background-position: -48px 0;
}

.ui-icon-caret-1-s {
  background-position: -65px 0;
}

.ui-icon-caret-1-sw {
  background-position: -80px 0;
}

.ui-icon-caret-1-w {
  background-position: -96px 0;
}

.ui-icon-caret-1-nw {
  background-position: -112px 0;
}

.ui-icon-caret-2-n-s {
  background-position: -128px 0;
}

.ui-icon-caret-2-e-w {
  background-position: -144px 0;
}

.ui-icon-triangle-1-n {
  background-position: 0 -16px;
}

.ui-icon-triangle-1-ne {
  background-position: -16px -16px;
}

.ui-icon-triangle-1-e {
  background-position: -32px -16px;
}

.ui-icon-triangle-1-se {
  background-position: -48px -16px;
}

.ui-icon-triangle-1-s {
  background-position: -65px -16px;
}

.ui-icon-triangle-1-sw {
  background-position: -80px -16px;
}

.ui-icon-triangle-1-w {
  background-position: -96px -16px;
}

.ui-icon-triangle-1-nw {
  background-position: -112px -16px;
}

.ui-icon-triangle-2-n-s {
  background-position: -128px -16px;
}

.ui-icon-triangle-2-e-w {
  background-position: -144px -16px;
}

.ui-icon-arrow-1-n {
  background-position: 0 -32px;
}

.ui-icon-arrow-1-ne {
  background-position: -16px -32px;
}

.ui-icon-arrow-1-e {
  background-position: -32px -32px;
}

.ui-icon-arrow-1-se {
  background-position: -48px -32px;
}

.ui-icon-arrow-1-s {
  background-position: -65px -32px;
}

.ui-icon-arrow-1-sw {
  background-position: -80px -32px;
}

.ui-icon-arrow-1-w {
  background-position: -96px -32px;
}

.ui-icon-arrow-1-nw {
  background-position: -112px -32px;
}

.ui-icon-arrow-2-n-s {
  background-position: -128px -32px;
}

.ui-icon-arrow-2-ne-sw {
  background-position: -144px -32px;
}

.ui-icon-arrow-2-e-w {
  background-position: -160px -32px;
}

.ui-icon-arrow-2-se-nw {
  background-position: -176px -32px;
}

.ui-icon-arrowstop-1-n {
  background-position: -192px -32px;
}

.ui-icon-arrowstop-1-e {
  background-position: -208px -32px;
}

.ui-icon-arrowstop-1-s {
  background-position: -224px -32px;
}

.ui-icon-arrowstop-1-w {
  background-position: -240px -32px;
}

.ui-icon-arrowthick-1-n {
  background-position: 1px -48px;
}

.ui-icon-arrowthick-1-ne {
  background-position: -16px -48px;
}

.ui-icon-arrowthick-1-e {
  background-position: -32px -48px;
}

.ui-icon-arrowthick-1-se {
  background-position: -48px -48px;
}

.ui-icon-arrowthick-1-s {
  background-position: -64px -48px;
}

.ui-icon-arrowthick-1-sw {
  background-position: -80px -48px;
}

.ui-icon-arrowthick-1-w {
  background-position: -96px -48px;
}

.ui-icon-arrowthick-1-nw {
  background-position: -112px -48px;
}

.ui-icon-arrowthick-2-n-s {
  background-position: -128px -48px;
}

.ui-icon-arrowthick-2-ne-sw {
  background-position: -144px -48px;
}

.ui-icon-arrowthick-2-e-w {
  background-position: -160px -48px;
}

.ui-icon-arrowthick-2-se-nw {
  background-position: -176px -48px;
}

.ui-icon-arrowthickstop-1-n {
  background-position: -192px -48px;
}

.ui-icon-arrowthickstop-1-e {
  background-position: -208px -48px;
}

.ui-icon-arrowthickstop-1-s {
  background-position: -224px -48px;
}

.ui-icon-arrowthickstop-1-w {
  background-position: -240px -48px;
}

.ui-icon-arrowreturnthick-1-w {
  background-position: 0 -64px;
}

.ui-icon-arrowreturnthick-1-n {
  background-position: -16px -64px;
}

.ui-icon-arrowreturnthick-1-e {
  background-position: -32px -64px;
}

.ui-icon-arrowreturnthick-1-s {
  background-position: -48px -64px;
}

.ui-icon-arrowreturn-1-w {
  background-position: -64px -64px;
}

.ui-icon-arrowreturn-1-n {
  background-position: -80px -64px;
}

.ui-icon-arrowreturn-1-e {
  background-position: -96px -64px;
}

.ui-icon-arrowreturn-1-s {
  background-position: -112px -64px;
}

.ui-icon-arrowrefresh-1-w {
  background-position: -128px -64px;
}

.ui-icon-arrowrefresh-1-n {
  background-position: -144px -64px;
}

.ui-icon-arrowrefresh-1-e {
  background-position: -160px -64px;
}

.ui-icon-arrowrefresh-1-s {
  background-position: -176px -64px;
}

.ui-icon-arrow-4 {
  background-position: 0 -80px;
}

.ui-icon-arrow-4-diag {
  background-position: -16px -80px;
}

.ui-icon-extlink {
  background-position: -32px -80px;
}

.ui-icon-newwin {
  background-position: -48px -80px;
}

.ui-icon-refresh {
  background-position: -64px -80px;
}

.ui-icon-shuffle {
  background-position: -80px -80px;
}

.ui-icon-transfer-e-w {
  background-position: -96px -80px;
}

.ui-icon-transferthick-e-w {
  background-position: -112px -80px;
}

.ui-icon-folder-collapsed {
  background-position: 0 -96px;
}

.ui-icon-folder-open {
  background-position: -16px -96px;
}

.ui-icon-document {
  background-position: -32px -96px;
}

.ui-icon-document-b {
  background-position: -48px -96px;
}

.ui-icon-note {
  background-position: -64px -96px;
}

.ui-icon-mail-closed {
  background-position: -80px -96px;
}

.ui-icon-mail-open {
  background-position: -96px -96px;
}

.ui-icon-suitcase {
  background-position: -112px -96px;
}

.ui-icon-comment {
  background-position: -128px -96px;
}

.ui-icon-person {
  background-position: -144px -96px;
}

.ui-icon-print {
  background-position: -160px -96px;
}

.ui-icon-trash {
  background-position: -176px -96px;
}

.ui-icon-locked {
  background-position: -192px -96px;
}

.ui-icon-unlocked {
  background-position: -208px -96px;
}

.ui-icon-bookmark {
  background-position: -224px -96px;
}

.ui-icon-tag {
  background-position: -240px -96px;
}

.ui-icon-home {
  background-position: 0 -112px;
}

.ui-icon-flag {
  background-position: -16px -112px;
}

.ui-icon-calendar {
  background-position: -32px -112px;
}

.ui-icon-cart {
  background-position: -48px -112px;
}

.ui-icon-pencil {
  background-position: -64px -112px;
}

.ui-icon-clock {
  background-position: -80px -112px;
}

.ui-icon-disk {
  background-position: -96px -112px;
}

.ui-icon-calculator {
  background-position: -112px -112px;
}

.ui-icon-zoomin {
  background-position: -128px -112px;
}

.ui-icon-zoomout {
  background-position: -144px -112px;
}

.ui-icon-search {
  background-position: -160px -112px;
}

.ui-icon-wrench {
  background-position: -176px -112px;
}

.ui-icon-gear {
  background-position: -192px -112px;
}

.ui-icon-heart {
  background-position: -208px -112px;
}

.ui-icon-star {
  background-position: -224px -112px;
}

.ui-icon-link {
  background-position: -240px -112px;
}

.ui-icon-cancel {
  background-position: 0 -128px;
}

.ui-icon-plus {
  background-position: -16px -128px;
}

.ui-icon-plusthick {
  background-position: -32px -128px;
}

.ui-icon-minus {
  background-position: -48px -128px;
}

.ui-icon-minusthick {
  background-position: -64px -128px;
}

.ui-icon-close {
  background-position: -80px -128px;
}

.ui-icon-closethick {
  background-position: -96px -128px;
}

.ui-icon-key {
  background-position: -112px -128px;
}

.ui-icon-lightbulb {
  background-position: -128px -128px;
}

.ui-icon-scissors {
  background-position: -144px -128px;
}

.ui-icon-clipboard {
  background-position: -160px -128px;
}

.ui-icon-copy {
  background-position: -176px -128px;
}

.ui-icon-contact {
  background-position: -192px -128px;
}

.ui-icon-image {
  background-position: -208px -128px;
}

.ui-icon-video {
  background-position: -224px -128px;
}

.ui-icon-script {
  background-position: -240px -128px;
}

.ui-icon-alert {
  background-position: 0 -144px;
}

.ui-icon-info {
  background-position: -16px -144px;
}

.ui-icon-notice {
  background-position: -32px -144px;
}

.ui-icon-help {
  background-position: -48px -144px;
}

.ui-icon-check {
  background-position: -64px -144px;
}

.ui-icon-bullet {
  background-position: -80px -144px;
}

.ui-icon-radio-on {
  background-position: -96px -144px;
}

.ui-icon-radio-off {
  background-position: -112px -144px;
}

.ui-icon-pin-w {
  background-position: -128px -144px;
}

.ui-icon-pin-s {
  background-position: -144px -144px;
}

.ui-icon-play {
  background-position: 0 -160px;
}

.ui-icon-pause {
  background-position: -16px -160px;
}

.ui-icon-seek-next {
  background-position: -32px -160px;
}

.ui-icon-seek-prev {
  background-position: -48px -160px;
}

.ui-icon-seek-end {
  background-position: -64px -160px;
}

.ui-icon-seek-start {
  background-position: -80px -160px;
}

/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first {
  background-position: -80px -160px;
}

.ui-icon-stop {
  background-position: -96px -160px;
}

.ui-icon-eject {
  background-position: -112px -160px;
}

.ui-icon-volume-off {
  background-position: -128px -160px;
}

.ui-icon-volume-on {
  background-position: -144px -160px;
}

.ui-icon-power {
  background-position: 0 -176px;
}

.ui-icon-signal-diag {
  background-position: -16px -176px;
}

.ui-icon-signal {
  background-position: -32px -176px;
}

.ui-icon-battery-0 {
  background-position: -48px -176px;
}

.ui-icon-battery-1 {
  background-position: -64px -176px;
}

.ui-icon-battery-2 {
  background-position: -80px -176px;
}

.ui-icon-battery-3 {
  background-position: -96px -176px;
}

.ui-icon-circle-plus {
  background-position: 0 -192px;
}

.ui-icon-circle-minus {
  background-position: -16px -192px;
}

.ui-icon-circle-close {
  background-position: -32px -192px;
}

.ui-icon-circle-triangle-e {
  background-position: -48px -192px;
}

.ui-icon-circle-triangle-s {
  background-position: -64px -192px;
}

.ui-icon-circle-triangle-w {
  background-position: -80px -192px;
}

.ui-icon-circle-triangle-n {
  background-position: -96px -192px;
}

.ui-icon-circle-arrow-e {
  background-position: -112px -192px;
}

.ui-icon-circle-arrow-s {
  background-position: -128px -192px;
}

.ui-icon-circle-arrow-w {
  background-position: -144px -192px;
}

.ui-icon-circle-arrow-n {
  background-position: -160px -192px;
}

.ui-icon-circle-zoomin {
  background-position: -176px -192px;
}

.ui-icon-circle-zoomout {
  background-position: -192px -192px;
}

.ui-icon-circle-check {
  background-position: -208px -192px;
}

.ui-icon-circlesmall-plus {
  background-position: 0 -208px;
}

.ui-icon-circlesmall-minus {
  background-position: -16px -208px;
}

.ui-icon-circlesmall-close {
  background-position: -32px -208px;
}

.ui-icon-squaresmall-plus {
  background-position: -48px -208px;
}

.ui-icon-squaresmall-minus {
  background-position: -64px -208px;
}

.ui-icon-squaresmall-close {
  background-position: -80px -208px;
}

.ui-icon-grip-dotted-vertical {
  background-position: 0 -224px;
}

.ui-icon-grip-dotted-horizontal {
  background-position: -16px -224px;
}

.ui-icon-grip-solid-vertical {
  background-position: -32px -224px;
}

.ui-icon-grip-solid-horizontal {
  background-position: -48px -224px;
}

.ui-icon-gripsmall-diagonal-se {
  background-position: -64px -224px;
}

.ui-icon-grip-diagonal-se {
  background-position: -80px -224px;
}

/* Misc visuals
----------------------------------*/
/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
  border-top-left-radius: 3px;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
  border-top-right-radius: 3px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
  border-bottom-left-radius: 3px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
  border-bottom-right-radius: 3px;
}

/* Overlays */
.ui-widget-overlay {
  background: #aaaaaa;
  opacity: 0.3;
  -ms-filter: Alpha(Opacity=30);
  /* support: IE8 */
}

.ui-widget-shadow {
  -webkit-box-shadow: 0px 0px 5px #666666;
  box-shadow: 0px 0px 5px #666666;
}

/* **** ag grid **** */
.ag-root {
  margin-bottom: -0.2rem;
  overflow: auto;
}

.ag-root-wrapper {
  border-radius: 0;
  border-top: 1px solid #9398a0;
  border-bottom: 1px solid #e1e4e9;
  border-left: none;
  border-right: none;
}

/*  header  */
.ag-header-group-cell:not(.ag-column-last) {
  border-right: 1px solid #e1e4e9;
}

.ag-header-group-cell:not(.ag-column-last).ag-column-last {
  border-right: none;
}

.ag-header {
  background-color: #f8f9fa;
  border-bottom: 1px solid #f1f3f5;
  color: #616974;
  font-family: "Pretendard", sans-serif;
  font-size: 1.4rem;
  font-weight: normal;
}

.ag-header-cell,
.ag-header-group-cell {
  padding: 0 1rem;
}

.ag-header-cell.border-right,
.ag-header-group-cell.border-right {
  border-right: 1px solid #e1e4e9;
}

.ag-header-cell-comp-wrapper {
  justify-content: center;
}

.ag-header-cell-label,
.ag-header-group-cell-label {
  justify-content: center;
}

.ag-header-cell-text {
  width: 100%;
  white-space: pre-wrap;
  text-align: center;
  justify-content: center;
}

.ag-layout-auto-height .ag-center-cols-container,
.ag-layout-auto-height .ag-center-cols-viewport,
.ag-layout-print .ag-center-cols-container,
.ag-layout-print .ag-center-cols-viewport {
  min-height: 0;
}

/*  row  */
.ag-row {
  border-bottom: none;
}

.ag-cell,
.ag-full-width-row .ag-cell-wrapper.ag-row-group {
  border: none;
}

.ag-row,
.ag-spanned-row {
  color: #32353a;
  font-size: 1.4rem;
  font-family: "Pretendard", sans-serif;
  text-align: center;
}

.ag-row-hover:before {
  background-color: #f8f9fa !important;
}

.ag-row-hover.row-transparent {
  background-color: transparent !important;
}

.ag-row-selected:before {
  background-color: #f4f9ff !important;
}

.ag-row-hover.ag-row-selected:before {
  background-color: #f8f9fa !important;
  background-image: none;
}

.ag-floating-top {
  border-bottom: none;
}

.ag-cell:has(.ag-cell:hover button),
.ag-cell:has(.ag-cell:hover input),
.ag-cell:has(.ag-cell:hover a),
.ag-cell:has(.ag-cell:hover select),
.ag-cell:has(.ag-cell:hover textarea),
.ag-cell:has(.ag-cell:hover label),
.ag-cell:has(.ag-cell:hover .ag-checkbox-input) {
  cursor: default !important;
}

.ag-row-hover:has(.ag-cell:hover button):hover,
.ag-row-hover:has(.ag-cell:hover input):hover,
.ag-row-hover:has(.ag-cell:hover a):hover,
.ag-row-hover:has(.ag-cell:hover select):hover,
.ag-row-hover:has(.ag-cell:hover textarea):hover,
.ag-row-hover:has(.ag-cell:hover label):hover,
.ag-row-hover:has(.ag-cell:hover .ag-checkbox-input):hover {
  background-color: transparent !important;
}

.kw-grid:has(.ag-cell:hover button) .ag-row-hover:before,
.kw-grid:has(.ag-cell:hover input) .ag-row-hover:before,
.kw-grid:has(.ag-cell:hover a) .ag-row-hover:before,
.kw-grid:has(.ag-cell:hover select) .ag-row-hover:before,
.kw-grid:has(.ag-cell:hover textarea) .ag-row-hover:before,
.kw-grid:has(.ag-cell:hover label) .ag-row-hover:before,
.kw-grid:has(.ag-cell:hover .ag-checkbox-input) .ag-row-hover:before {
  background-color: transparent !important;
}

/*  tbody 셀  */
.ag-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #f1f3f5;
  border-bottom: 1px solid #f1f3f5;
}

.ag-cell.text-left {
  justify-content: flex-start;
}

.ag-cell.text-left > span {
  justify-content: flex-start;
}

.ag-cell.text-right {
  justify-content: flex-end;
}

.ag-cell.text-right > span {
  justify-content: flex-end;
}

.ag-cell.event-disable {
  background-color: #e1e4e9;
  pointer-events: none;
}

.ag-cell > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.ag-cell.border-right {
  border-right: 1px solid #e1e4e9;
}

.ag-cell.error-cell {
  color: #fc1717;
}

.ag-cell .func-counter {
  display: inline-block;
  width: 100%;
}

.ag-cell .input-wrap {
  width: 100%;
}

.ag-ltr .ag-header-viewport .ag-header-cell-resize::after {
  left: 50%;
}

.ag-header-cell-resize {
  right: -3px;
}

.ag-header-cell-resize:after {
  content: "";
  background-color: #f1f3f5;
  width: 1px;
  height: 100%;
  top: 0px;
  position: absolute;
}

.ag-cell:not(.ag-cell-inline-editing),
.ag-full-width-row .ag-cell-wrapper.ag-row-group {
  padding: 0 1rem;
}

.ag-header-row:where(:not(:first-child))
  :where(
    .ag-header-cell:not(.ag-header-span-height.ag-header-span-total, .ag-header-parent-hidden),
    .ag-header-group-cell.ag-header-group-cell-with-group
  ) {
  border-top: 1px solid #f1f3f5;
}

.ag-chart,
.ag-dnd-ghost,
.ag-popup,
.ag-root-wrapper {
  font-family: "Pretendard", sans-serif;
}

/*  핀고정  */
.ag-pinned-left-header .ag-header-cell-resize {
  right: -0.5rem;
}

/*  체크박스  */
.ag-selection-checkbox {
  margin-right: 0;
}

:root {
  --ag-icon-size: var(--ag-inherited-icon-size, 20px);
}

.ag-checkbox-input-wrapper,
.ag-radio-button-input-wrapper {
  border-radius: 2rem;
}

.ag-checkbox-input-wrapper:where(.ag-indeterminate),
.ag-radio-button-input-wrapper:where(.ag-indeterminate) {
  background-color: #fff;
  border-color: #b0b8c1;
}

.ag-checkbox-input-wrapper:where(.ag-indeterminate):after,
.ag-radio-button-input-wrapper:where(.ag-indeterminate):after {
  background-color: #b0b8c1;
  mask-image: var(--ag-checkbox-checked-shape-image);
}

.ag-checkbox-input-wrapper:after,
.ag-radio-button-input-wrapper:after {
  background-color: #b0b8c1;
  mask-image: var(--ag-checkbox-checked-shape-image);
}

.ag-checkbox-input-wrapper:where(.ag-checked),
.ag-radio-button-input-wrapper:where(.ag-checked) {
  background-color: #212266;
  border-color: #212266;
}

.ag-checkbox-input-wrapper:where(.ag-checked):after,
.ag-radio-button-input-wrapper:where(.ag-checked):after {
  background-color: #fff;
}

.ag-checkbox-input-wrapper:where(:focus-within, :active),
.ag-radio-button-input-wrapper:where(:focus-within, :active) {
  box-shadow: none;
}

.ag-floating-bottom {
  border-top: 1px solid #e1e4e9;
  background-color: #f1f3f5;
}

.ag-pinned-left-floating-bottom {
  border-right: 1px solid #e1e4e9;
}

.ag-pinned-left-floating-bottom .ag-row {
  background-color: #f8f9fa;
}

.ag-floating-bottom-container .ag-row {
  background-color: #f8f9fa;
}

/*  클래스 추가 시  */
.centered .ag-header-cell-label {
  justify-content: center !important;
}

.centered .ag-checkbox-cell {
  justify-content: center;
}

.ag-row .centered {
  justify-content: center !important;
  text-align: center;
}

.ag-row .centered .ag-checkbox-cell {
  justify-content: center;
}

.ag-row.event-disable {
  background-color: #e1e4e9;
  pointer-events: none;
}

.ag-cell.wrap-cell {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.ag-cell.wrap-cell > span {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ag-cell.wrap-cell .double-cell {
  width: 100%;
  display: flex;
  align-items: center;
  height: 8rem;
  padding: 0 1rem;
}

.ag-cell.wrap-cell .double-cell.text-center {
  justify-content: center;
}

.ag-cell.wrap-cell .inner-cell {
  width: 100%;
  height: 4rem;
  padding: 0 1rem;
  line-height: 3.8rem;
}

.ag-cell.wrap-cell .inner-cell + .inner-cell {
  border-top: 1px solid #f1f3f5;
  border-bottom: 2px solid #dadde2;
}

.ag-cell.wrap-cell.text-left {
  align-items: flex-start;
}

.ag-cell.wrap-cell.text-left > span {
  align-items: flex-start;
}

.ag-cell.wrap-cell.text-right {
  align-items: flex-end;
}

.ag-cell.wrap-cell.text-right > span {
  align-items: flex-end;
}

.kw-grid.normal .ag-header-group-cell:not(.ag-column-last) {
  border-right: 0;
}

/*  소팅  */
.ag-sort-ascending-icon,
.ag-sort-descending-icon,
.ag-sort-none-icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.6rem 1.2rem;
  width: 0.6rem;
  height: 1.2rem;
  display: inline-block;
  content: "";
}

.ag-icon,
.ag-icon-asc::before,
.ag-icon-desc::before {
  display: none;
}

.ag-sort-ascending-icon {
  background-image: url(../images/icon/table-sort-up.svg);
}

.ag-sort-descending-icon {
  background-image: url(../images/icon/table-sort-down.svg);
}

.ag-sort-none-icon {
  background-image: url(../images/icon/table-sort-default.svg);
}

/* **** 하이차트 **** */
.chart-wrap {
  position: relative;
}

.chart-wrap.mt44 {
  margin-top: 4.4rem;
}

.chart-label {
  position: absolute;
  top: 0;
  left: 10.4rem;
  font-size: 1.2rem;
}

.chart-label .label {
  display: flex;
  align-items: center;
}

.chart-label .label::before {
  display: block;
  content: "";
  width: 1rem;
  height: 1rem;
  margin-right: 0.4rem;
  border-radius: 50%;
}

.chart-label .label + .label {
  margin-top: 0.4rem;
}

.chart-label .label.gray::before {
  border: 3px solid #707070;
}

.chart-label .label.pink::before {
  border: 3px solid #e22d72;
}

.ag-root-wrapper {
  height: 100%;
}

.ag-root-wrapper-body {
  height: 100%;
}

.ag-sum .ag-column-first {
  border-right: 1px solid #e1e4e9;
}

.kw-grid .no-data.has-bottom-row1 {
  padding: 0;
}

/* **** datepicker **** */
.ui-datepicker.ui-widget-content {
  width: 25.2rem;
  padding: 2.4rem 1.6rem 1.6rem;
  border-radius: 0.8rem;
  border: 1px solid #32353a;
}

.is-mobile .ui-datepicker.ui-widget-content {
  width: 32rem;
  padding: 2.2rem 2.4rem;
  border: none;
  border-radius: 2.4rem;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  border: none;
  width: 2.8rem;
  height: 2.8rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #32353a;
  font-weight: 500;
  border-radius: 50%;
  background-color: #fff;
  font-family: "Pretendard", sans-serif;
}

.is-mobile .ui-state-default,
.is-mobile .ui-widget-content .ui-state-default,
.is-mobile .ui-widget-header .ui-state-default {
  width: 3.6rem;
  height: 3.6rem;
}

.ui-datepicker .ui-datepicker-header {
  height: 8.2rem;
  margin-bottom: 0.8rem;
  padding: 0;
  background-color: #fff;
  border: none;
  border-bottom: 1px solid #f1f3f5;
  font-family: "Pretendard", sans-serif;
}

.is-mobile .ui-datepicker .ui-datepicker-header {
  height: 9.2rem;
}

.ui-datepicker th span {
  color: #32353a;
  font-size: 1.4rem;
  font-weight: 500;
}

.ui-datepicker th:first-child span {
  color: #fc1717;
}

.ui-datepicker td:first-child > * {
  color: #fc1717;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
  background-color: #f1f3f5;
  color: #32353a;
}

.ui-state-default.ui-state-active {
  background-color: #396dfc;
  color: #fff;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 1px solid #396dfc;
  background-color: #fff;
  color: #396dfc;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  font-size: 1.4rem;
  flex: 1;
  height: 3.8rem;
  border: 1px solid #dadde2;
  border-radius: 0.8rem;
  padding: 0 4rem 0 1.2rem;
  color: #32353a;
  font-size: 1.4rem;
  font-weight: 400;
  background: #fff url(../images/icon/select-16-down.svg) no-repeat calc(100% - 1.6rem) center/1.6rem 1.6rem;
  font-family: "Pretendard", sans-serif;
}

.is-mobile .ui-datepicker select.ui-datepicker-month,
.is-mobile .ui-datepicker select.ui-datepicker-year {
  height: 4rem;
}

.ui-datepicker .ui-datepicker-title {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  margin: 0;
  gap: 1.6rem;
}

.ui-custom-prev-year,
.ui-custom-next-year {
  position: absolute;
  top: unset;
  bottom: 0.8rem;
  width: 2.4rem;
  height: 2.4rem;
  background: url(../images/icon/calendar-24-prev-year.svg) no-repeat left 0 top 50%/2.4rem;
  z-index: 1;
}

.ui-custom-prev-year.ui-state-hover,
.ui-custom-next-year.ui-state-hover {
  background: url(../images/icon/calendar-24-prev-year.svg) no-repeat left 0 top 50%/2.4rem;
  border: none;
}

.ui-custom-prev-year {
  left: 0;
}

.ui-custom-next-year {
  right: 0;
  transform: rotate(180deg);
}

.current-month {
  position: absolute;
  bottom: 0.8rem;
  width: 100%;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  z-index: 0;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: unset;
  bottom: 0.8rem;
  width: 2.4rem;
  height: 2.4rem;
  background: url(../images/icon/calendar-24-prev.svg) no-repeat left 0 top 50%/2.4rem;
  z-index: 1;
}

.ui-datepicker .ui-datepicker-prev.ui-state-hover,
.ui-datepicker .ui-datepicker-next.ui-state-hover {
  background: url(../images/icon/calendar-24-prev.svg) no-repeat left 0 top 50%/2.4rem;
  border: none;
}

.ui-datepicker .ui-datepicker-prev {
  left: 2.8rem;
}

.ui-datepicker .ui-datepicker-next {
  right: 2.8rem;
}

.ui-datepicker .ui-datepicker-next {
  transform: rotate(180deg);
}

button.ui-datepicker-trigger {
  position: absolute;
  right: 1.2rem;
  top: 0.4rem;
  width: 3.2rem;
  height: 3.2rem;
}

.ui-widget-header .ui-icon {
  background: none;
}

.is-mobile .ui-datepicker {
  /* 달력 중앙 정렬 */
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 9999 !important;
}

/* 모바일용 dim */
.calendar-dim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
}
.icon__flag_type-01 {
  width: 6.5rem;
  height: 1.7rem;
  border-radius: 8rem;
  background: #e1e4e9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1.45;
  gap: 0.3rem;
  margin: 0 1rem;
}
.icon__flag_type-01::before {
  content: "";
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  background: url(../images/icon/icon_ko_12.svg) no-repeat 0 0;
}
.icon__flag_type-02 {
  width: 6.5rem;
  height: 1.7rem;
  border-radius: 8rem;
  background: #e1e4e9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1.45;
  gap: 0.3rem;
  margin: 0 1rem;
}
.icon__flag_type-02::before {
  content: "";
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  background: url(../images/icon/icon_us_12.svg) no-repeat 0 0;
}

/* loading */
.loading-wrap {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 150;
    width: 160px;
    height: 160px;
}

.loading-wrap .loading {
    position: relative;
    width: 160px;
    height: 160px;
    text-indent: -9999px;
}

.loading-wrap .loading:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: rgba(255, 255, 255, 0.5) url('../images/common/loading.gif') no-repeat 50% 50%;
    -webkit-transform: translate(-50%, -50%) scale(0.8);
    -ms-transform: translate(-50%, -50%) scale(0.8);
    transform: translate(-50%, -50%) scale(0.8);
}

.loading-wrap.is-active {
    display: block;
}

.columns-fixed {
    top : 0px;
    z-index : 97;
    position : sticky;
}

.table-title {
  height: 3.2rem;
  padding: 0 1.4rem;
  border: 1px solid #dadde2;
  border-radius: 8rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.3rem;
  line-height: 1.46;
  color: #616974;
}
.table-title::before{
  display: block;
  content: '';
  width: 2rem;
  height: 2rem;
  background-size: 2rem 2rem;
}

/* 0707 추가 */
.kw-switch.onOff [type="checkbox"] ~ label .switch-toggle {
  width: 5.9rem;
  height: 2.4rem;
  background-color: #212266;
  border: 1px solid transparent;
  border-radius: 1.2rem;
  
}
 .kw-switch.onOff [type="checkbox"] ~ label .switch-toggle > i {
  top: 0.2rem;
  left: 3.7rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 100%;
  border: 1px solid transparent;
}
.kw-switch.onOff [type="checkbox"]:checked ~ label .switch-toggle {
  background-color: #fff;
  border: 1px solid #b0b8c1;
}
 .kw-switch.onOff [type="checkbox"]:checked ~ label .switch-toggle > i {
  left: 0.3rem;
  background-color: #d7d7e3;
 }
.kw-switch.onOff label .txt .y, 
.kw-switch.onOff label .txt .n {
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: #fff;
  text-align: left;
  margin-left: 0.8rem;
}
.kw-switch.onOff label .txt .n {
  display: none;
}
.kw-switch.onOff [type="checkbox"]:checked ~ label .txt .y {
  display: none;
}
.kw-switch.onOff [type="checkbox"]:checked ~ label .txt .n {
  display: block;
  color: #9398a0;
  text-align: right;
  margin-right: 0.8rem;
}
.mb12 {
  margin-bottom: 1.2rem !important;
}
.table-title.kr::before{
  background: url(../images/icon/tab-20-kor.svg) no-repeat 0 0;
}
.table-title.en::before{
  background: url(../images/icon/tab-20-usa.svg) no-repeat 0 0;
}
.table-title.bonds::before{
  background: url(../images/icon/tab-20-bond.svg) no-repeat 0 0;
}
.table-title.cashBalance::before{
  background: url(../images/icon/tab-20-cashBalance.svg) no-repeat 0 0;
}
.flex-box {
  display: flex;
  align-items: center;
}
.between-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
}
.exchange-rate {
  font-size: 1.4rem;
  line-height: 1.5;
  color: #32353a;
}
.exchange-rate + .eval-amount {
  display: flex;
  align-items: center;
}
.exchange-rate + .eval-amount::before {
  display: block;
  content: '';
  width: 0.1rem;
  height: 1.2rem;
  background-color: #e1e4e9;
  margin: 0 1.6rem;
}
.eval-amount {
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.5;
  color: #32353a;
}
.kw-switch.round.currency [type="checkbox"] ~ label .switch-toggle {
  width: 7.6rem;
}
.kw-switch.round.currency [type="checkbox"] ~ label .switch-toggle > i {
  width: 3.4rem;
}
.kw-switch.round.currency [type="checkbox"]:checked ~ label .switch-toggle > i {
  left: 3.9rem;
}
.ag-header-cell-comp-wrapper .header-title{
  display: flex;
  align-items: center;
}
.ag-header-cell-comp-wrapper .header-sub {
  font-size: 1.3rem;
  line-height: 1.5;
  color: #9398a0;
  display: flex;
  align-items: center;
}
.ag-header-cell-comp-wrapper .header-sub::before {
  display: block;
  content: '';
  width: 0.1rem;
  height: 1.3rem;
  background-color: #e1e4e9;
  margin: 0 1.6rem;
}
.adjust-header {
  display: flex;
  align-items: center;
  gap: 1.2rem
}