/*

  ! 주의 !
  본 파일은 "EUC-KR"로 인코딩 되어있습니다.
  "UTF-8"로 설정하면 본 주석의 텍스트가 깨져 보입니다.
  작업 전 반드시 인코딩 모드 "EUC-KR"로 변경 후 작업해주세요.

  ! Warning !
  This file is encoded in "EUC-KR".
  If you set it To "UTF-8", the text in this comment will appear corrupted.
  Before Proceeding, be sure to change the encoding mode to "EUC-KR"
  
 */

/* input */
.ui-input-block {
  position: relative;
  box-sizing: border-box;
}
.ui-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid var(--gray-30);
  border-radius: 0;
  background: #fff;
  font-size: 1.7rem;
  line-height: 2.6rem;
}
textarea.ui-input {
  overflow: hidden;
  height: 54px;
  padding: 16px 15px;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
  line-height: 22px;
  resize: none;
}
.ui-input::-webkit-input-placeholder {
  color: var(--gray-70);
  opacity: 1;
  -webkit-text-fill-color: var(--gray-70);
}
.ui-input::-moz-placeholder {
  color: var(--gray-70);
  opacity: 1;
  -webkit-text-fill-color: var(--gray-70);
}
.ui-input:-ms-input-placeholder {
  color: var(--gray-70);
  opacity: 1;
  -webkit-text-fill-color: var(--gray-70);
}
.ui-input:-moz-placeholder {
  color: var(--gray-70);
  opacity: 1;
  -webkit-text-fill-color: var(--gray-70);
}
.ui-input:focus {
  border-color: var(--basic);
  outline: none;
}
.ui-input[readonly],
.ui-input[disabled],
.ui-input-block.type-disabled .ui-input {
  color: var(--gray-80);
  opacity: 1;
  -webkit-text-fill-color: var(--gray-80);
}
textarea.ui-input[readonly],
textarea.ui-input[disabled],
textarea.ui-input-block.type-disabled .ui-input {
  border-color: var(--gray-30);
  background-color: var(--gray-20);
  color: var(--gray-80);
}
.ui-input.align-right {
  padding-right: 5px;
}
.ui-input-delete {
  position: absolute;
  top: 13px;
  right: 0;
  display: none;
  width: 16px;
  height: 16px;
  border-radius: 100%;
  /* [24.06.27 : lyr] 웹 접근성 컬러 조정 */
  background-color: var(--gray-70);
}
.ui-input-delete::before,
.ui-input-delete::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 1px;
  background-color: #fff;
}
.ui-input-delete::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.ui-input-delete::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.ui-timer {
  color: var(--wrong);
  font-size: 1.2rem;
  line-height: 20px;
}
.ui-input-block .ui-timer {
  position: absolute;
  top: 10px;
  right: 0;
}

/* ui-input-block type-use-delete */
.ui-input-block.type-use-delete.is-focus .ui-input {
  padding-right: 24px;
}
.ui-input-block.type-use-delete.is-focus .ui-input:not([readonly]):not([disabled]) ~ .ui-input-delete {
  display: block;
}

/* ui-input-block type-button */
.ui-input-block.type-button .ui-input {
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ui-input-block type-search */
.ui-input-block.type-search .ui-input {
  height: 48px;
  padding-right: 47px;
  padding-left: 15px;
  border: 1px solid var(--basic);
  border-radius: 15px;
  box-shadow: 1.5px 3px 5px 0 rgba(217, 223, 235, 0.3);
  font-size: 1.6rem; /* [2025-11-11 KEJ] [WPM-12947] ios 확대 방지 */
  text-align: left;
}
/* [2025-11-11 KEJ] [WPM-12947] ios 확대 방지 */
.ui-input-block.type-search .ui-input::placeholder{
  transform: scale(0.875);
  transform-origin: left center;
}
/* //[2025-11-11 KEJ] [WPM-12947] ios 확대 방지 */
.ui-input-block.type-search .ui-input::-webkit-input-placeholder,
.ui-input-block.type-form-search .ui-input::-webkit-input-placeholder {
  color: var(--basic);
  -webkit-text-fill-color: var(--basic);
}
.ui-input-block.type-search .ui-input::-moz-placeholder,
.ui-input-block.type-form-search .ui-input::-moz-placeholder {
  color: var(--basic);
  -webkit-text-fill-color: var(--basic);
}
.ui-input-block.type-search .ui-input:-ms-input-placeholder,
.ui-input-block.type-form-search .ui-input::-ms-input-placeholder {
  color: var(--basic);
  -webkit-text-fill-color: var(--basic);
}
.ui-input-block.type-search .ui-input:-moz-placeholder,
.ui-input-block.type-form-search .ui-input::-moz-placeholder {
  color: var(--basic);
  -webkit-text-fill-color: var(--basic);
}
.ui-input-block.type-search.is-focus .ui-input {
  padding-right: 71px;
}
.ui-input-block.type-search .ui-input-delete {
  top: 16px;
  right: 45px;
}
.ui-input-search {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 48px;
  background: url("../images/icon/ic-header-search.svg") no-repeat 5px 50%;
}
/* 22.12.15 type-line */
.ui-input-block.type-search.type-line .ui-input {
  height: 48px;
  padding-right: 37px;
  padding-left: 5px;
  border: 1px solid var(--basic);
  border-width: 0 0 1px 0;
  border-radius: 0px;
  box-shadow: none;
  font-size: 1.3rem;
  text-align: left;
}
.ui-input-block.type-search.type-line .ui-input-search {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 48px;
  background: url("../images/icon/ic-header-search.svg") no-repeat 50% 50%;
}

/* 23.01.12 type-shadow */
.ui-input-block.type-search.type-shadow .ui-input {
  height: 48px;
  padding-right: 47px;
  padding-left: 15px;
  border: 1px solid var(--gray-30);
  border-radius: 15px;
  box-shadow: 1.5px 3px 5px 0 rgba(217, 223, 235, 0.3);
  font-size: 1.3rem;
  text-align: left;
}
.ui-input-block.type-search.type-shadow .ui-input::-webkit-input-placeholder {
  color: var(--gray-60);
  -webkit-text-fill-color: var(--gray-60);
}
.ui-input-block.type-search.type-shadow .ui-input::-moz-placeholder {
  color: var(--gray-60);
  -webkit-text-fill-color: var(--gray-60);
}
.ui-input-block.type-search.type-shadow .ui-input:-ms-input-placeholder {
  color: var(--gray-60);
  -webkit-text-fill-color: var(--gray-60);
}
.ui-input-block.type-search.type-shadow .ui-input:-moz-placeholder {
  color: var(--gray-60);
  -webkit-text-fill-color: var(--gray-60);
}

.ui-easy-pw {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 54px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  background-color: #f8f8f8;
}
/* 230706 접근성 색에무관한인식 수정 */
.ui-easy-pw li {
  width: 18px;
  height: 4px;
  border-radius: 4px;
  background-color: #999999;
}
.ui-easy-pw li.on {
  height: 18px;
  border-radius: 50%;
  background-color: #00a49d;
}
.ui-easy-pw li + li {
  margin-left: 18px;
}

.ui-easy-pw.type-no-box {
  height: auto;
  border: none;
  background-color: transparent;
}

/*
---------------------------
검색바 UI 변경 관련 내용 asis, tobe 스타일 둘 다 공존 할 수 있도록 하기 위한 임시 스타일
tobe가 모두 반영 되면 삭제 예정
*/
.ui-input-block.type-search.type-no-button .ui-input {
  padding-right: 39px;
  padding-left: 47px;
  background-image: url("../images/icon/ic-header-search.svg");
  background-position: 15px 50%;
  background-repeat: no-repeat;
}
.ui-input-block.type-search.type-no-button .ui-input-delete {
  right: 15px;
}
/* --------------------------- */

/* ui-input-block type-form-search */
.ui-input-block.type-form-search .ui-input {
  height: 48px;
  padding-left: 36px;
  background: url("../images/icon/ic-header-search.svg") no-repeat 4px 50% / auto 20px #fff;
  font-size: 1.3rem;
  text-align: left;
}
.ui-input-block.type-form-search .ui-input-delete {
  top: 16px;
}

/* ui-input-block type-date */
.ui-input-block.type-date {
  overflow: hidden;
}
.ui-input-block.type-date::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: url("../images/common/ic-calendar.svg") no-repeat 50% 50% / 100% auto;
}
.ui-input-block.type-date.is-disabled:before {
  background-image: url("../images/common/ic-calendar-d.svg");
}

/* form-flex type-id */
.form-flex.type-id .ui-range-dash {
  width: 37px;
}

/* ui-input-block type-masking */
.ui-input-block.type-masking {
  position: relative;
}
.ui-input-block.type-masking::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 7px;
  height: 8px;
  margin-top: -4px;
  background: radial-gradient(ellipse at center, var(--basic) 0%, var(--basic) 35%, transparent 45%) repeat-x 0 center /
    14px 14px;
}
.ui-input-block.type-masking.digit-2 {
  padding-right: 43px;
}
.ui-input-block.type-masking.digit-2::after {
  width: 28px;
}
.ui-input-block.type-masking.digit-6 {
  padding-right: 98px;
}
.ui-input-block.type-masking.digit-6::after {
  width: 83px;
}

/* ui-input-block type-has-counting */
.ui-input-block.type-has-counting textarea.ui-input {
  padding-bottom: 36px;
}

/* ui-input-block type-textarea */
.ui-input-block.type-textarea .ui-counting {
  position: absolute;
  right: 15px;
  bottom: 15px;
  color: var(--gray-60);
  font-size: 1.2rem;
  line-height: 17px;
}

/* ui-input-arrow */
.ui-input-arrow-set {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  margin-left: 7px;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.ui-input-arrow {
  width: 25px;
  height: 20px;
  font-size: 0;
}
.ui-input-arrow.up-arrow {
  background: url("../images/icon/ic-up-g.svg") center center no-repeat;
}
.ui-input-arrow.down-arrow {
  border-top: 1px solid var(--gray-30);
  background: url("../images/icon/ic-down-g.svg") center center no-repeat;
}

/* select */
.ui-select-block {
  position: relative;
  z-index: 0;
  background: #fff;
}
.ui-select-block::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 0;
  display: block;
  width: 15px;
  height: 15px;
  margin-top: -7px;
  background: url("../images/common/ic-select-arrow.png") no-repeat 50% 50% / 100% auto; /* 22.12.15 이미지 확장자 변경 */
}
.ui-select {
  position: relative;
  z-index: 10;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 6px 28px 6px 0;
  border-bottom: 1px solid var(--gray-30);
  background: transparent;
  font-size: 1.7rem;
  line-height: 2.6rem;
  text-align: left;
}
.ui-button.ui-select {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-select-small {
  position: relative;
  padding-right: 20px;
}
.ui-select-small:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: url("../images/icon/btn-selectbox.svg") center center no-repeat;
}
.ui-select-block.type-card::before {
  right: 15px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: url("../images/icon/btn-more.png") no-repeat 100% 50% / auto 10px; /* 22.12.15 이미지 확장자 변경 */
  transform: none;
}
.ui-select-block.type-card.is-disabled::before {
  background-image: url("../images/icon/btn-more-d.svg");
}
/* 24.03.14 보더컬러 수정 */
.ui-select-block.type-card .ui-select {
  height: auto;
  padding-top: 19px;
  padding-bottom: 19px;
  padding-left: 15px;
  border: 1px solid var(--gray-40);
  border-radius: 6px;
  color: var(--basic);
  line-height: 26px;
}
.ui-select-block.type-card .ui-select[disabled] {
  color: var(--gray-70);
}
/* 240223 - 화살표 없는 클래스 추가 (lyr) */
.ui-select-block.type-card-arrow-none::before {
  display: none;
}
.ui-select .card-image {
  display: inline-block;
  vertical-align: top;
  width: 40px;
  margin-right: 20px;
}
.ui-select::-ms-expand {
  display: none;
}
.ui-select:focus {
  border-color: var(--basic) !important;
}
.is-invalid .ui-select {
  border-color: var(--wrong) !important;
}
.ui-select[readonly],
.ui-select[disabled],
.ui-select-block.type-disabled .ui-select {
  border-bottom-color: var(--gray-30);
  color: var(--gray-80);
  opacity: 1;
}
.ui-select-block.type-placeholder .ui-select {
  color: var(--gray-70);
}
.ui-select-block.type-disabled::before,
.ui-select-block.is-disabled::before,
.ui-select-block.is-readonly::before {
  background-image: url("../images/common/ic-select-arrow-disabled.svg");
}

/* ui-select-block type-benefit-card */
.ui-select-block.type-benefit-card::before {
  right: 14px;
  width: 11px;
  height: 11px;
  margin-top: -5px;
  background-image: url("../images/icon/btn-more.svg");
}
.ui-select-block.type-benefit-card .ui-select {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  height: auto;
  padding-top: 13px;
  padding-bottom: 13px;
  padding-left: 14px;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
  font-size: 1.5rem;
  line-height: 2.4rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.ui-select-benefit-card-info {
  display: block;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.ui-select-benefit-card-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ui-date-picker */
.ui-date-picker {
  position: relative;
  box-sizing: border-box;
}
.ui-date-picker .duet-date,
.ui-date-picker .duet-date__input,
.ui-date-picker .duet-date__day {
  font-family: "SpoqaHanSansNeo", "맑은고딕", "Malgun Gothic", "돋움", Dotum, "Apple Gothic", sans-serif;
}
.ui-date-picker .duet-date__select select:focus + .duet-date__select-label,
.ui-date-picker .duet-date__prev:focus,
.ui-date-picker .duet-date__next:focus,
.ui-date-picker .duet-date__close:focus {
  box-shadow: none;
  outline: 1px dotted;
}
.ui-date-picker .duet-date__input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid var(--gray-30);
  border-radius: 0;
  background: #fff;
  font-size: 1.7rem;
  line-height: 2.6rem;
}
.ui-date-picker .duet-date__input::-webkit-input-placeholder {
  color: var(--gray-50);
  opacity: 1;
  -webkit-text-fill-color: var(--gray-50);
}
.ui-date-picker .duet-date__input::-moz-placeholder {
  color: var(--gray-50);
  opacity: 1;
  -webkit-text-fill-color: var(--gray-50);
}
.ui-date-picker .duet-date__input:-ms-input-placeholder {
  color: var(--gray-50);
  opacity: 1;
  -webkit-text-fill-color: var(--gray-50);
}
.ui-date-picker .duet-date__input:-moz-placeholder {
  color: var(--gray-50);
  opacity: 1;
  -webkit-text-fill-color: var(--gray-50);
}
.ui-date-picker .duet-date__input:focus {
  border-color: var(--basic);
  box-shadow: none;
  outline: none;
}
.ui-date-picker .duet-date__input[disabled],
.ui-date-picker.type-disabled .duet-date__input {
  color: var(--gray-70);
  opacity: 1;
  -webkit-text-fill-color: var(--gray-70);
}
.ui-date-picker .duet-date__toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: url("../images/common/ic-calendar.svg") no-repeat 100% 50%;
  box-shadow: none;
}
.ui-date-picker .duet-date__toggle-icon {
  display: none;
}
.ui-date-picker .duet-date__toggle[disabled],
.ui-date-picker.type-disabled .duet-date__toggle {
  background-image: url("../images/common/ic-calendar-d.svg");
}
.ui-date-picker .duet-date__dialog {
  position: fixed;
  left: -100%;
}
html.is-date-picker-animated .ui-date-picker .duet-date__dialog,
.ui-date-picker .duet-date__dialog.is-active {
  position: absolute;
  left: 0;
  z-index: 1010;
}
.ui-date-picker .duet-date__dialog-content {
  max-width: 280px;
  padding: 15px 14px;
  border: none;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
}
.ui-date-picker .duet-date__header {
  margin-bottom: 10px;
}
.ui-date-picker .duet-date__header > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.ui-date-picker .duet-date__select {
  display: block;
  margin-top: 0;
}
.ui-date-picker .duet-date__select ~ .duet-date__select {
  margin-left: 10px;
}
.ui-date-picker .duet-date__select-label {
  padding: 0 18px 0 5px;
  background: url("../images/icon/btn-unfold-s.svg") no-repeat 100% 50%;
  font-weight: 500;
  font-size: 2rem;
  line-height: 2.8rem;
}
.ui-date-picker .duet-date__select-label span {
  margin: 0;
}
.ui-date-picker .duet-date__select-label svg {
  display: none;
}
.ui-date-picker .duet-date__prev,
.ui-date-picker .duet-date__next {
  display: block;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  border: 1px solid #e6e9ef;
  border-radius: 50%;
  background: no-repeat 50% 50% #fff;
}
.ui-date-picker .duet-date__prev {
  background-image: url("../images/icon/date-prev.svg");
}
.ui-date-picker .duet-date__next {
  background-image: url("../images/icon/date-next.svg");
}
.ui-date-picker .duet-date__prev svg,
.ui-date-picker .duet-date__next svg {
  display: none;
}
.ui-date-picker .duet-date__table-header {
  height: 36px;
  padding: 0;
  color: var(--basic);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.ui-date-picker .duet-date__day {
  position: relative;
  z-index: 10;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 0;
  color: var(--basic);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.ui-date-picker .duet-date__day:not(.is-month),
.ui-date-picker .duet-date__day[aria-disabled="true"] {
  color: var(--gray-70);
  font-weight: 300;
  opacity: 1;
}
.ui-date-picker .duet-date__day.is-today,
.ui-date-picker .duet-date__day:active {
  box-shadow: none;
}
.ui-date-picker .duet-date__day[aria-pressed="true"] {
  color: var(--basic);
}
.ui-date-picker .duet-date__day[aria-pressed="true"],
.ui-date-picker .duet-date__day:focus,
.ui-date-picker .duet-date__day:active {
  background: none;
}
.ui-date-picker .duet-date__day[aria-pressed="true"]::before,
.ui-date-picker .duet-date__day:hover::before,
.ui-date-picker .duet-date__day.is-today::before {
  content: "";
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  z-index: -1;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--primary);
  opacity: 1;
}
.ui-date-picker .duet-date__day[aria-pressed="false"].is-today::before {
  border: 1px solid var(--primary);
  background-color: transparent;
}
.ui-date-picker .duet-date__day[aria-pressed="false"]:hover::before {
  background-color: var(--primary-light);
}
.ui-date-picker .duet-date__mobile {
  position: static;
  display: block;
  overflow: visible;
  width: auto;
  margin: 0;
  padding: 0;
  border: none;
}
.ui-date-picker .duet-date__mobile-heading {
  position: absolute;
  display: block;
  overflow: hidden;
  width: 1px;
  max-width: none;
  height: 1px;
  margin-top: -10px;
  color: transparent;
}
.ui-date-picker .duet-date__close {
  position: absolute;
  top: 27px;
  right: 24px;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 0;
  background: url("../images/icon/date-close.svg") no-repeat 100% 50%;
}
.ui-date-picker .duet-date__close svg {
  display: none;
}
.ui-date-picker.is-invalid .duet-date__input,
.form-group.is-invalid .ui-date-picker .duet-date__input {
  border-color: var(--wrong);
}
@media (min-width: 36em) {
  .ui-date-picker .duet-date__mobile {
    position: absolute;
    top: -16px;
    right: -16px;
  }
  .ui-date-picker .duet-date__close {
    top: 0;
    right: 0;
    background-position: 50% 50%;
  }
}
@media (max-width: 35.9375em) {
  html.is-date-picker-animated .ui-layer__body,
  html.is-date-picker-opened .ui-layer__body {
    overflow: hidden;
  }
  .ui-date-picker .duet-date__dialog {
    background: rgba(0, 0, 0, 0.65);
  }
  html.is-date-picker-animated .ui-date-picker .duet-date__dialog,
  .ui-date-picker .duet-date__dialog.is-active {
    position: fixed;
  }
  .ui-date-picker .duet-date__dialog-content {
    max-width: none;
    padding: 26px 24px 30px;
    border-radius: 15px 15px 0 0;
    box-shadow: none;
  }
  .ui-date-picker .duet-date__select-label {
    padding: 0 24px 0 6px;
    background-image: url("../images/icon/btn-unfold.svg");
    font-size: 2.4rem;
    line-height: 3.3rem;
  }
  .ui-date-picker .duet-date__select ~ .duet-date__select {
    margin-left: 14px;
  }
  .ui-date-picker .duet-date__nav {
    padding-right: 35px;
  }
  .ui-date-picker .duet-date__prev {
    background-image: url("../images/icon/date-prev-l.svg");
  }
  .ui-date-picker .duet-date__next {
    background-image: url("../images/icon/date-next-l.svg");
  }
  .ui-date-picker .duet-date__table-header {
    font-size: 1.4rem;
    line-height: 1.9rem;
  }
  .ui-date-picker .duet-date__cell {
    padding-top: 10px;
  }
  .ui-date-picker .duet-date__day {
    font-size: 1.4rem;
    line-height: 1.9rem;
  }
}

/* invalid */
.ui-invalid {
  display: none;
  margin-top: 8px;
  padding: 0 10px;
  color: var(--wrong);
  font-size: 1.3rem;
  line-height: 1.7rem;
}
.is-invalid .ui-input,
.is-invalid textarea.ui-input {
  border-color: var(--wrong);
}
.is-invalid .ui-invalid {
  display: block;
}

/* ui-button-add */
.ui-button-add {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary) url("../images/common/btn-openbank-add.svg") no-repeat center/18px;
}

/* ui-button-reload */
.ui-button-reload {
  padding: 0 7px 0 25px;
  border-radius: 50px;
  background: #cdd1d8 url("../images/icon/ic-loading.svg") no-repeat 7px 50% / auto;
  color: #fff;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 26px;
}

/* ui-button-download-img */
.ui-button-download-img {
  width: 24px;
  height: 24px;
  background: url("../images/icon/ic-imgdownload.svg") no-repeat 50% 50% / auto 100%;
}

/* ui-icon-download */
.ui-icon-download {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  margin-top: -2px;
  background: url("../images/icon/ic-download-s.svg") no-repeat 50% 50% / auto 100%;
}

/* ui-icon-refresh */
.ui-icon-refresh {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  margin-top: -2px;
  background: url("../images/common/btn-reload.png") no-repeat 50% 50% / auto 100%;
}

/* ui-icon-lock */
.ui-icon-lock {
  display: inline-block;
  vertical-align: middle;
  width: 17px;
  height: 17px;
  margin-top: -2px;
  background: url("../images/icon/ic-lock.svg") no-repeat 50% 50% / auto 100%;
}

/* ui-unlock-img */
.ui-unlock-img {
  display: block;
  height: 1.5rem;
}
.ui-unlock-img .img {
  height: 100%;
}

/* ui-button-copy */
.ui-button-copy {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  background: url("../images/icon/ic-copy.svg") no-repeat 50% 50% / auto 100%;
}

/* ui-tab */
.ui-tab-list {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0 24px;
  box-shadow: 0 -1px 0 var(--gray-30) inset;
  white-space: nowrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.ui-tab-list.type-wide {
  margin: 0 -24px;
}
.ui-tab-list.type-flex {
  display: flex;
  align-items: flex-end;
  padding: 0;
}
.ui-tab-item {
  list-style-type: none;
}
.ui-tab-list.type-flex .ui-tab-item {
  flex: 1;
}
.ui-tab-item + .ui-tab-item {
  margin-left: 28px;
}
.ui-tab-list.type-flex .ui-tab-item + .ui-tab-item {
  margin-left: 0;
}
/* [2025-07-09 kjy] [WPM-11558] 접근성 1차 심사 수정 */  
.ui-tab-link {
  position: relative;
  display: block;
  padding: 16px 0;
  color: var(--gray-80);
  font-size: 1.5rem;
  line-height: 22px;
}
.ui-tab-list.type-flex .ui-tab-link {
  padding-left: 16px;
  padding-right: 16px;
  text-align: center;
}
.ui-tab-link.js-tabpanel-active,
.ui-tab-link.is-active,
.ui-tab-item .ui-radio-block .ui-radio:checked + .ui-label .ui-tab-link {
  color: var(--basic);
  font-weight: 500;
}
.ui-tab-link.js-tabpanel-active::after,
.ui-tab-link.is-active::after,
.ui-tab-item .ui-radio-block .ui-radio:checked + .ui-label .ui-tab-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background-color: var(--basic);
}
/* 22.11.28 */
.ui-tab-link.type-icon-benefit {
  width: 32px;
  height: 32px;
  padding: 11px 0;
  background: url("../images/icon/ic-all-benefit.svg") no-repeat 50% 50%;
}
.ui-tab-link.type-icon-benefit.is-active {
  background: url("../images/icon/ic-all-benefit-on.svg") no-repeat 50% 50%;
}
.ui-tab-link.type-new.is-active { /* [2025-05-12 kho] [WPM-11084] 추가 */
  color: #00907f;
}

/* ui-tab type-nav */
.ui-tab.type-nav {
  margin: -30px -24px 35px;
}

/* ui-tab type-full */
.ui-tab.type-full {
  margin-right: -24px;
  margin-left: -24px;
}

/* ui-tab type-bottom-margin-none */
.ui-tab.type-bottom-margin-none {
  margin-bottom: 0;
}

/* ui-tab type-stretch */
.ui-tab.type-stretch .ui-tab-list {
  align-items: stretch;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
}
.ui-tab.type-stretch .ui-tab-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: stretch;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
}
.ui-tab.type-stretch .ui-tab-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}

/* ui-tab type-section */
.ui-tab.type-section .ui-tab-list {
  padding-right: 0;
  padding-left: 0;
  box-shadow: none;
}
.ui-tab.type-section .ui-tab-link {
  padding-top: 6px;
  padding-bottom: 8px;
}
.ui-tab.type-section .ui-tab-item + .ui-tab-item {
  margin-left: 20px;
}

/* ui-tab type-side-blur */
.ui-tab.type-side-blur {
  position: relative;
}
.ui-tab.type-side-blur:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 24px;
  background: -moz-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 5%,
    rgba(255, 255, 255, 1) 95%,
    rgba(255, 255, 255, 1) 100%
  );
  background: -webkit-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 5%,
    rgba(255, 255, 255, 1) 95%,
    rgba(255, 255, 255, 1) 100%
  );
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 5%,
    rgba(255, 255, 255, 1) 95%,
    rgba(255, 255, 255, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
}

/* ui-tab type-full2 */
.ui-tab.type-full2 .ui-tab-item {
  flex: 1;
  text-align: center;
}

.page-tab-panel.type-login .ui-tab-list {
  overflow-x: visible;
  margin: 0;
  padding: 0;
  box-shadow: 0;
}
.page-tab-panel.type-login .ui-tab-item {
  flex: 1;
}
.page-tab-panel.type-login .ui-tab-item + .ui-tab-item {
  margin-left: 0;
}
.page-tab-panel.type-login .ui-tab-link {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 51px;
  padding: 0;
  border-radius: 15px 15px 0 0;
  background-color: #ebebeb;
  text-align: center;
}
.page-tab-panel.type-login .ui-tab-link.js-tabpanel-active {
  background-color: #fff;
}
.page-tab-panel.type-login .ui-tab-link:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -20px;
  z-index: 0;
  display: block;
  width: 100%;
  height: 20px;
  background-color: #ebebeb;
}
.page-tab-panel.type-login .ui-tab-link.js-tabpanel-active:after {
  background-color: #fff;
}
.page-tab-panel.type-login .ui-tab-panel {
  position: relative;
  z-index: 1;
  padding: 44px 20px;
  border-radius: 15px 15px 15px 15px;
  background-color: #fff;
  box-shadow: 0 2px 10px 0 rgba(217, 223, 235, 0.3);
}

/* menu-nav */
.menu-nav-bar {
  position: relative;
  padding-right: 44px;
  border-bottom: 1px solid var(--gray-30);
  background-color: #fff;
}
.menu-nav-bar-scroller {
  position: relative;
  overflow: hidden;
  margin-bottom: -1px;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
}
.menu-nav-bar-scroller .swiper::before,
.menu-nav-bar-scroller .swiper::after {
  content: "";
  position: absolute;
  right: 0;
  z-index: 10;
  display: block;
  width: 26px;
}
.menu-nav-bar-scroller .swiper::before {
  top: 0;
  bottom: 1px;
  background: -moz-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 5%,
    rgba(255, 255, 255, 1) 95%,
    rgba(255, 255, 255, 1) 100%
  );
  background: -webkit-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 5%,
    rgba(255, 255, 255, 1) 95%,
    rgba(255, 255, 255, 1) 100%
  );
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 5%,
    rgba(255, 255, 255, 1) 95%,
    rgba(255, 255, 255, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
}
.menu-nav-bar-scroller .swiper::after {
  bottom: 0;
  height: 1px;
  background: -moz-linear-gradient(
    left,
    rgba(229, 229, 229, 0) 0%,
    rgba(229, 229, 229, 0) 5%,
    rgba(229, 229, 229, 1) 95%,
    rgba(229, 229, 229, 1) 100%
  );
  background: -webkit-linear-gradient(
    left,
    rgba(229, 229, 229, 0) 0%,
    rgba(229, 229, 229, 0) 5%,
    rgba(229, 229, 229, 1) 95%,
    rgba(229, 229, 229, 1) 100%
  );
  background: linear-gradient(
    to right,
    rgba(229, 229, 229, 0) 0%,
    rgba(229, 229, 229, 0) 5%,
    rgba(229, 229, 229, 1) 95%,
    rgba(229, 229, 229, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e5e5e5', endColorstr='#e5e5e5',GradientType=1 );
}
.menu-nav-bar-list,
.menu-nav-bar-item,
.menu-nav-bar-link {
  display: inline-block;
  vertical-align: top;
}
.menu-nav-bar-list {
  display: flex;
  overflow-x: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  scroll-snap-type: x proximity;
}
.menu-nav-bar-list::-webkit-scrollbar {
  display: none;
}
.menu-nav-bar-item {
  width: auto;
  scroll-snap-align: start;
}
.menu-nav-bar-link {
  position: relative;
  margin-left: 24px;
  padding: 16px 2px 17px;
  color: var(--gray-70);
  font-size: 1.5rem;
  line-height: 2.1rem;
  text-decoration: none;
}
.menu-nav-bar-link.is-active {
  color: var(--basic);
  font-weight: 500;
}
.menu-nav-bar-link.is-active::before {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 0;
  left: 2px;
  display: block;
  height: 3px;
  background-color: var(--basic);
}
.menu-nav-bar-item:first-child .menu-nav-bar-link {
  margin-left: 22px;
}
.menu-nav-bar-item:last-child .menu-nav-bar-link {
  margin-right: 24px;
}
.menu-nav-bar-opener {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 44px;
  height: 100%;
}
.menu-nav-bar-opener::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  display: block;
  width: 15px;
  height: 14px;
  margin-top: -7px;
  background: url("../images/icon/btn-unfold.svg") no-repeat 50% 50%;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}
.menu-nav-bar-opener .close-text {
  display: none;
}
.menu-nav.is-opened .menu-nav-bar-opener::before {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.menu-nav.is-opened .menu-nav-bar-opener .open-text {
  display: none;
}
.menu-nav.is-opened .menu-nav-bar-opener .close-text {
  display: inline;
}
.menu-nav-layer-wrap {
  position: fixed;
  top: 150px;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: none;
  overflow: hidden;
  width: 100%;
  opacity: 0;
}
.menu-nav-layer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-height: 100%;
  background-color: #fff;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
.menu-nav.is-opened .menu-nav-layer {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.menu-nav-layer-doc {
  padding: 20px 24px;
}
.menu-nav-layer-doc::before {
  content: "";
  display: table;
}
.menu-nav-dim {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
}
.menu-nav-layer-list {
  margin: -18px 0 0 -24px;
  padding: 0;
  list-style: none;
  font-size: 0;
  line-height: 0;
}
.menu-nav-layer-item {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  width: 33.333333%;
  padding: 18px 0 0 24px;
}
.menu-nav-layer-link {
  display: block;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.menu-nav-layer-link.is-active {
  color: var(--basic);
  font-weight: 700;
}

/* menu-bottom */
.menu-bottom {
  background-color: #f4f6f8;
}
.menu-bottom.type-white {
  background-color: #ffff;
}

/* menu-top */
.menu-top {
  margin: 0 -24px 35px;
  padding: 35px 24px;
  background-color: #f4f6f8;
}
.menu-top .search-word-area {
  margin-bottom: 15px;
}
.menu-top .slide-banner {
  margin: 10px -24px -35px;
}

/* menu-top type-top-padding-none */
.menu-top.type-top-padding-none {
  padding-top: 0;
}

/* menu-top type-bottom-padding */
.menu-top.type-bottom-padding {
  padding-bottom: 25px;
}

/* menu-top type-first */
.menu-top.type-first {
  margin-top: -30px;
}

/* slide-top */
.slide-top {
  margin: 0 -24px;
}

/* menu-top type-banner-only */
/* menu-bottom type-banner-only */
.menu-top.type-banner-only,
.menu-bottom.type-banner-only {
  padding-top: 0;
  padding-bottom: 0;
}
.menu-top.type-banner-only .slide-banner,
.menu-bottom.type-banner-only .slide-banner {
  margin-top: 0;
  margin-bottom: 0;
}

/* round-box-tab */
.round-box-tab {
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 3px 5px 0 rgba(217, 223, 235, 0.3);
}
.round-box-tab-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--gray-30);
  list-style: none;
}
.round-box-tab-item {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.round-box-tab-link {
  position: relative;
  display: block;
  margin-bottom: -1px;
  padding: 16px 10px 17px;
  color: var(--gray-70);
  font-size: 1.5rem;
  line-height: 2rem;
  text-align: center;
  text-decoration: none;
}
.round-box-tab-link.is-active,
.round-box-tab-link.js-tabpanel-active {
  color: var(--basic);
  font-weight: 500;
}
.round-box-tab-link.is-active::before,
.round-box-tab-link.js-tabpanel-active::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: 2px;
  background-color: var(--basic);
}
.round-box-tab-panel {
  padding: 20px 24px;
}

/* latest-menu */
.latest-menu {
  position: relative;
  min-height: 96px;
}
.latest-menu-none {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  font-size: 1.5rem;
  line-height: 22px;
  text-align: center;
  transform: translateY(-50%);
}
.latest-menu::before {
  content: "";
  display: table;
}
.latest-menu-list {
  margin: -21px 0 0 -48px;
  padding: 0;
  list-style: none;
  font-size: 0;
  line-height: 0;
}
.latest-menu-item {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  width: 50%;
  padding: 21px 0 0 48px;
}
.latest-menu-link {
  display: block;
  overflow: hidden;
  color: inherit;
  font-size: 1.3rem;
  line-height: 1.8rem;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* postcard */
.postcard {
  margin: 0 -24px;
}
.postcard-thumbs {
  position: relative;
}
.postcard-thumbs::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  display: block;
  width: 24px;
  height: 100%;
  background: -moz-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 5%,
    rgba(255, 255, 255, 1) 95%,
    rgba(255, 255, 255, 1) 100%
  );
  background: -webkit-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 5%,
    rgba(255, 255, 255, 1) 95%,
    rgba(255, 255, 255, 1) 100%
  );
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 5%,
    rgba(255, 255, 255, 1) 95%,
    rgba(255, 255, 255, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
}
.postcard-thumbs-inner {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
}
.postcard-list,
.postcard-item {
  display: inline-block;
  vertical-align: top;
}
.postcard-list {
  margin-left: -8px;
  padding: 0 24px;
}
.postcard-item {
  padding-left: 8px;
  font-size: medium;
  line-height: normal;
  white-space: normal;
}
.postcard-block {
  width: 57px;
}
.postcard-block .ui-radio-block .ui-radio {
  z-index: 1;
  cursor: pointer;
}
.postcard-block .ui-label {
  position: relative;
  display: block;
  pointer-events: none; /* [2026-08-13 KEJ] 송금 공유 접근성 추가 */
}
.postcard-block .ui-label::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 2px solid var(--secondary);
  border-radius: 4px;
  opacity: 0;
}
.postcard-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.postcard-block .ui-radio:checked + .ui-label::after {
  opacity: 1;
}
.postcard-preview {
  margin: 15px 35px 0;
}
.postcard-preview-image {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
}
.postcard.is-area-disabled .postcard-list,
.postcard.is-area-disabled .postcard-preview {
  opacity: 0.3;
}

/* service-nav */
.service-nav {
  margin-top: 15px;
}
.service-nav::before {
  content: "";
  display: table;
}
.service-nav-list {
  margin: -15px 0 0 -30px;
  padding: 0;
  list-style: none;
  font-size: 0;
  line-height: 0;
}
.service-nav-item {
  display: inline-block;
  vertical-align: top;
  padding: 15px 0 0 30px;
}
.service-nav-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.service-nav-icon {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  border: solid 1px var(--gray-30);
  border-radius: 12px;
  background: no-repeat 50% 50% #fff;
  background-size: 100% 100%;
}
.service-nav-text {
  margin: 8px -15px 0;
  font-size: 1.2rem;
  line-height: 1.7rem;
  text-align: center;
}
.service-nav-icon.type-1 {
  background-image: url("../images/icon/ic-glab.png");
}
/* [25-05-29] */
.service-nav-icon.type-2 {
  background-image: url("/images/icon/ic-member.png");
  background-image: image-set(
    url("/images/icon/ic-member.webp") type("image/webp"),
    url("/images/icon/ic-member.png") type("image/png")
  );
  border: 0;
}
.service-nav-icon.type-3 {
  background-image: url("/images/icon/ic-bank.png");
  background-image: image-set(
    url("/images/icon/ic-bank.webp") type("image/webp"),
    url("/images/icon/ic-bank.png") type("image/png")
  );
}
.service-nav-icon.type-4 {
  background-image: url("/images/icon/ic-hana-next.png");
  background-image: image-set(
    url("/images/icon/ic-hana-next.webp") type("image/webp"),
    url("/images/icon/ic-hana-next.png") type("image/png")
  );
}

/* sns-nav */
.sns-nav {
  margin-top: 15px;
}
.sns-nav::before {
  content: "";
  display: table;
}
.sns-nav-list {
  margin: -10px 0 0 -10px;
  padding: 0;
  list-style: none;
  font-size: 0;
  line-height: 0;
}
.sns-nav-item {
  display: inline-block;
  vertical-align: top;
  padding: 10px 0 0 10px;
}
.sns-nav-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.sns-nav-icon {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: no-repeat 50% 50% var(--gray-60);
}
.sns-nav-icon.type-1 {
  background-image: url("../images/icon/ic-menu-sns1.svg");
}
.sns-nav-icon.type-2 {
  background: no-repeat 50% 50% #ffdd00;
  background-image: url("../images/icon/ic-menu-sns2.svg");
}
.sns-nav-icon.type-3 {
  background: no-repeat 50% 50% #3c5a99;
  background-image: url("../images/icon/ic-menu-sns3.svg");
}
/* 22.10.11 .sns-nav-icon.type-4 {
background: no-repeat 50% 50% #fff;
background-image: url('../images/icon/ic-menu-sns4.svg');
} */
.sns-nav-icon.type-4 {
  background: no-repeat 50% 50% #ed3023;
  background-image: url("../images/icon/ic-menu-sns4-2.svg");
  background-size: 60% auto;
}

/* GNB */
.layer-gnb {
  overflow: hidden;
  -webkit-overflow-scrolling: auto;
}
.layer-gnb::before {
  display: none;
}
.layer-gnb .layer-container {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
.layer-gnb.js-layer-opened .layer-container {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.gnb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
}
.gnb-head {
  -ms-flex: none;
  flex: none;
  -webkit-box-flex: 0;
}
.gnb-body {
  -ms-flex: 1;
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  -webkit-box-flex: 1;
}
.gnb-body-doc {
  padding: 0 24px;
}

/* gnb-name-card */
.gnb-name-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  padding: 10px 24px;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.gnb-name-card-left {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.gnb-name-card-right {
  -ms-flex: none;
  flex: none;
  -webkit-box-flex: 0;
}
.gnb-name-card-user {
  overflow: hidden;
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 2.6rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gnb-name-card-link {
  display: block;
  color: inherit;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.8rem;
  text-decoration: none;
}

/* page-buttons */
.page-buttons.type-fixed {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  padding-top: 15px;
  padding-bottom: 15px;
  border-top: 1px solid var(--gray-20);
  background-color: #fff;
}
.page-buttons.type-full-contents {
  padding-top: 15px;
  padding-bottom: 15px;
  border-top: 1px solid var(--gray-20);
  background-color: #fff;
}
.page-buttons,
.page-buttons.is-bottom {
  padding: 0 24px 30px;
  border-top-width: 0;
}
.page-buttons.is-bottom {
  position: static;
  z-index: auto;
}
.page-buttons.is-bottom ~ .js-fake-button {
  display: none;
}

.page-buttons,
.page-buttons.is-bottom2 {
  padding: 0 24px 30px;
  border-top-width: 0;
  background: #fff; /* 22.12.05 여백 수정 */
}
.page-buttons.is-bottom2 {
  position: static;
  z-index: auto;
}
.page-buttons.is-bottom2 ~ .js-fake-button {
  display: none;
}

/* page-title */
.page-title-section.form-flex.type-align-top .type-icon-tel {
  margin-top: 2px;
}
.page-title {
  margin-bottom: 35px;
  font-weight: 400;
  font-size: 2.1rem;
  line-height: 3rem;
}
.page-title-sort {
  display: block;
  color: #76C1B9;
  font-style: normal;
  font-size: 17px;
}
/* 250513 */
.page-title2 {
  margin-bottom: 24px;
  font-size: 1.7rem;
  line-height: 2.4rem
}
/* 23.02.03 추가 */
.page-title.font-weight-medium {
  font-weight: 500;
}
/* 23.04.11 추가 */
.page-title.font-weight-bold {
  font-weight: 700;
}
/* //23.02.03 추가 */
.page-title-sub {
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 18px;
}
.page-title-info {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  color: var(--gray-70);
  font-size: 1.3rem;
}
.page-title .ui-tooltip-wrap {
  height: 3rem;
  margin-left: 10px;
}
.page-title .icon.type-trans-right {
  display: inline-block;
  vertical-align: top;
  width: 22px;
  height: 22px;
  margin-top: 4px;
  background: url("../images/icon/ic-trans-right.svg") no-repeat;
}

/* page-info */
.page-info {
  margin-top: 14px;
  color: var(--gray-70);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 21px;
}
.page-info .page-info-title {
  display: block;
  margin-top: 35px;
  margin-bottom: 10px;
  color: var(--basic);
  font-size: 1.7rem;
}
/* 220713 스타일 추가 */
.page-info .page-info-title .num {
  margin-right: 8px;
  color: var(--secondary);
}
/* //220713 스타일 추가 */
.page-info .page-info-title.type-icon-bulb {
  position: relative;
  box-sizing: border-box;
  padding-left: 23px;
  background: url("../images/icon/ic-bulb.svg") 0 center no-repeat;
  font-weight: 400;
  font-size: inherit;
  line-height: 22px;
}
.page-info:first-child {
  margin-top: 0;
}
.page-info .page-info-text + .ui-arrow {
  margin-top: 10px;
}
.page-info .page-info-text + .ui-arrow.type-right {
  margin-left: auto;
}
.page-title + .page-info {
  margin-top: -21px;
}
.page-title + .page-tab-panel {
  margin-top: 20px;
}
/* 220713 스타일 추가 */
.page-info .page-info-title.inline-block {
  display: inline-block;
}
.type-title .page-info .ui-button-aside {
  text-decoration: none;
}
/* //220713 스타일 추가 */
/* title-step */
.title-step {
  display: block;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 18px;
}

/* page-contents type */
.type-step .page-title {
  margin-bottom: 0;
}
.type-step .page-title + .page-info {
  margin-top: 10px;
}
.type-step .page-progress + .page-info {
  margin-top: 35px;
}
.page-info .page-info-text + .page-info-text2 {
  margin-top: 10px;
}
.page-info .page-info-text2 {
  font-size: 1.3rem;
}

.type-step .page-progress + .page-section {
  margin-top: 35px;
}
.type-tab .page-title {
  margin-bottom: 20px;
}
/* [2026-07-07 YJY] 접근성 추가 */
.stepOneDiv .ui-checkbox-block .ui-checkbox {
  z-index: 0;
}

/* page-guide-link */
.page-guide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  padding: 20px;
  border: 1px solid var(--primary);
  border-radius: 15px;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.page-guide:not(:last-child) {
  margin-bottom: 35px;
}
.page-guide .guide-title {
  display: block;
  margin-bottom: 2px;
  color: var(--basic);
  font-weight: 500;
}
.page-guide .guide {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  color: #111;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 18px;
  -webkit-box-flex: 1;
}
.page-guide .link {
  width: auto;
}
/* page-guide-link type-npay */
.page-guide.type-npay {
  border-color: #00c73c;
}
.page-guide.type-npay .ui-basic-button.type-primary {
  border-color: #00c73c;
  background-color: #00c73c;
}
.page-guide.type-npay .ui-basic-button.type-primary .symbol {
  margin-right: 3px;
}

/* page-section */
.page-section {
  position: relative;
}
.page-section.type-line {
  margin-top: 35px;
  padding-top: 45px;
}
.page-section.type-line::before {
  content: "";
  position: absolute;
  top: 0;
  right: -24px;
  left: -24px;
  height: 10px;
  background-color: var(--gray-10);
}
/* 22.07.27 type-receipt */
.page-section.type-receipt {
  margin-bottom: 40px;
  padding-bottom: 60px;
}
.page-section.type-receipt::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: 0px;
  left: -24px;
  width: calc(100% + 48px);
  height: 55px;
  background: var(--gray-30) url("../images/common/layer-receipt.png") repeat-X 50% 0%;
  background-size: auto 51px;
  box-shadow: 0px 10px 10px 0px var(--gray-30);
}
.page-section.type-line.type-large-margin {
  margin-top: 45px;
  padding-top: 55px;
}
.page-section.type-line .form-detail-head:first-child {
  margin-top: 0;
}
.page-section.type-only-title {
  margin-bottom: -10px;
  padding-top: 35px;
}
.ui-radio-group.type-set .ui-radio-block.type-box .ui-label .ui-label-text {
  font-size: 1.5rem;
  line-height: 2rem;
}
.ui-radio-group.type-set .ui-radio-block.type-box .ui-radio:checked + .ui-label {
  color: var(--primary);
}
.page-section-group:not(:first-child) {
  margin-top: 35px;
}
.page-section-group.type-line {
  padding-top: 35px;
  border-top: 1px solid var(--gray-30);
}
.page-section-group.type-margin-reset {
  margin-top: -35px;
  padding-top: 35px;
}
/* [2025-06-26] 이벤트 위치 변경 */
.page-section-group.type-bottom-line {
  margin-bottom: 35px;
  padding-bottom: 35px;
  border-bottom: 1px solid var(--gray-30);
}
.page-section-title {
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 24px;
}
.page-section-title.type-line {
  display: block;
  padding-bottom: 12px;
  border-bottom: 1px solid #e9ecef;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 18px;
}
.page-section-title + .page-section-group {
  margin-top: 35px;
}
.page-section-title.type-line + .page-section-group {
  margin-top: 25px;
}
.page-section-sub-title {
  margin-top: 4px;
  color: var(--gray-70);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.8rem;
}
.section-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.section-title.type-block {
  display: block;
}
.section-title.type-align-top {
  align-items: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
}
.section-title.type-line {
  margin-bottom: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gray-30);
}
.section-title.type-tooltip {
  position: relative;
}
/* 22.11.11 */
.ui-button-tooltip.type-move {
  position: absolute;
}
.ui-button-tooltip.type-move .ui-button-tooltip-text {
  animation: tooltip-move 0.5s infinite alternate;
}
@keyframes tooltip-move {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(3px);
  }
}
/* 240223 - 툴팁 가운데 정렬용 클래스 추가 (lyr) */
.ui-button-tooltip.type-move-center {
  position: absolute;
}
.ui-button-tooltip.type-move-center .ui-button-tooltip-text {
  transform: translateX(-50%);
  animation: tooltip-move-center 0.5s infinite alternate;
}
@keyframes tooltip-move-center {
  0% {
    transform: translate(-50%, 0);
  }
  100% {
    transform: translate(-50%, 3px);
  }
}

.section-title.type-tooltip .ui-button-tooltip-text {
  left: 0;
  -webkit-transform: none;
  transform: none;
}
.section-title.type-tooltip .ui-button-tooltip-text::after {
  left: 54px;
  margin-left: 0;
}
.section-title .ui-button-question {
  margin-left: 5px;
}
.section-title .ui-tooltip-wrap {
  margin-left: 5px;
}
.section-title + .section-contents .form-list:first-child {
  margin-top: 25px;
}
.section-contents .type-none {
  padding-top: 35px;
  padding-bottom: 0;
  color: var(--gray-70);
  font-size: 1.5rem;
  line-height: 20px;
}
.section-title .ui-arrow.type-black,
.section-title-right {
  margin-left: auto;
}
.section-title .title {
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 24px;
}
.section-title.ty02 .title {
  font-weight: 300;
}
/* 250515 */
.section-title.ty03 .title {
  font-weight: 500;
}
.section-title .title.type-flexible {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.section-title .title.type-white {
  color: #fff;
}
.section-title .date {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 18px;
}
.section-title .section-title-right .date {
  margin-top: 0;
  color: var(--gray-70);
  font-weight: 300;
}
.section-title .section-title-right .slash {
  margin-right: 5px;
  margin-left: 5px;
}
.section-title .title + .ui-arrow:not(.type-default-align) {
  align-self: flex-start;
  line-height: 24px;
  -ms-flex-item-align: start;
}
.section-title .sub {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 2rem;
}
.section-title .sub.default-text {
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.section-title-info {
  margin-top: 25px;
  color: var(--gray-70);
  font-size: 1.5rem;
  line-height: 22px;
}
.section-title-text {
  margin-top: 3px;
  color: var(--gray-70);
  font-size: 1.4rem;
  line-height: 1.9rem;
}
.section-contents-title {
  margin-top: 25px;
}
.section-contents-title .title {
  margin-bottom: 10px;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 18px;
}
.section-contents-title .title.type-basic {
  color: var(--basic);
  font-weight: normal;
  font-size: 1.5rem;
  line-height: 24px;
}
.section-contents-title .title.font-weight-medium {
  font-weight: 500;
}
.section-contents-info {
  color: var(--gray-80);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 18px;
}
.page-section.type-term .ui-select-multiple-list {
  margin-top: 5px;
}
.page-section.type-term .ui-select-multiple-list:last-child {
  margin-bottom: -10px;
}

/* page-section type-accordion */
.page-section.type-accordion .section-title {
  position: relative;
  margin-bottom: 0;
}
.section-title-opener.section-title-opener {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.section-title-opener.section-title-opener::after {
  background-image: url("../images/icon/btn-select-l.svg");
}
.section-accordion-layer::before {
  content: "";
  display: table;
}
.section-accordion-layer .section-contents {
  margin-top: 10px;
}

/* page-section type-fill-black */
.page-section.type-fill-black {
  margin-right: -24px;
  margin-left: -24px;
  padding: 45px 24px 40px;
  background-color: #242424;
}

/* page-section type-round-white */
.page-section.type-round-white {
  padding: 35px 20px;
  border: 1px solid var(--gray-30);
  border-radius: 10px;
  background-color: #fff;
}

/* page-section-group type-fill-gray */
.page-section-group.type-fill-gray {
  margin-right: -24px;
  margin-left: -24px;
  padding: 35px 24px;
  background-color: var(--gray-20);
}

/* page-section-group type-light-line */
.page-section-group.type-light-line {
  margin-right: -24px;
  margin-left: -24px;
  padding-top: 35px;
  border-top: 1px solid var(--gray-20);
}

/* page-step-section */
.page-step-section.type-ing + .page-step-section {
  margin-top: 35px;
}
.step-section-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 -24px;
  padding: 15px 24px;
  background-color: var(--gray-20);
}
.step-section-title .title {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  padding-left: 32px;
  color: var(--gray-70);
  font-size: 1.5rem;
  line-height: 2.2rem;
  -webkit-box-flex: 1;
}
.title-text {
  font-size: 1.4rem;
  line-height: 2.2rem;
}
.step-section-title .ui-numbering {
  background-color: var(--gray-70);
}
.step-section-title .progress {
  display: none;
  width: 22px;
  height: 22px;
  margin-left: 10px;
  background: url("../images/common/ic-checkbox-l-c.svg") no-repeat 100% 50%;
}
.step-section-contents::before {
  content: "";
  display: block;
  padding-top: 35px;
}
.page-step-section.type-completion .step-section-title {
  border-bottom: 1px solid var(--gray-30);
}
.page-step-section.type-ing .step-section-title .title,
.page-step-section.type-completion .step-section-title .title {
  color: var(--basic);
}
.page-step-section.type-ing .step-section-title .ui-numbering,
.page-step-section.type-completion .step-section-title .ui-numbering {
  background-color: var(--basic);
}
.page-step-section.type-completion .step-section-title .progress {
  display: block;
}
.section-title + .panel-2fa {
  margin-top: 25px;
}
.section-title-right {
  margin-left: auto;
}

/* section-title type-medium */
.section-title.type-medium .title {
  font-size: 1.5rem;
  line-height: 2.2rem;
}
.section-title.type-medium .title-text {
  font-size: 1.5rem;
  line-height: 2.2rem;
}

/* section-title type-large */
.section-title.type-large .title {
  font-size: 2.1rem;
  line-height: 3rem;
}
.section-title.type-large .title-text {
  font-size: 2.1rem;
  line-height: 3rem;
}

/* none */
.type-none {
  padding: 25px 0;
  text-align: center;
}
.type-none::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  min-height: 150px;
}
.type-none.type-line {
  border-top: 1px solid var(--gray-30);
  border-bottom: 1px solid var(--gray-30);
}
.type-none.type-bottom-line {
  border-bottom: 1px solid var(--gray-30);
}
.check-range + .type-none.type-line {
  border-top: none;
}
.type-none.type-no-padding {
  padding-top: 0;
  padding-bottom: 0;
}
.type-none .item-text {
  display: inline-block;
  vertical-align: middle;
  font-size: 1.5rem;
  line-height: 22px;
}
.type-none.type-insert {
  margin: 35px 0;
  padding: 0;
}
.type-none.type-insert::after {
  min-height: 130px;
}
.type-none.type-height-220 {
  box-sizing: border-box;
  min-height: 220px;
}
.type-none .ui-button-reload:not(:first-child) {
  margin-top: 5px;
}

/* notice */
.ui-notice {
  position: relative;
  margin-top: 15px;
  padding-left: 23px;
  color: var(--gray-70);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 18px;
}
.ui-notice + .ui-notice {
  margin-top: 5px;
}
.ui-notice::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  background: url("../images/icon/ic-notice.svg") no-repeat 50% 50% / 100% auto;
}
.ui-notice.basic-text {
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 22px;
}
.ui-notice.basic-text:before {
  top: 2px;
}
.ui-notice.type-line {
  margin-top: 35px;
  padding-top: 35px;
  border-top: 1px solid var(--gray-30);
}
.ui-notice.type-line:before {
  top: 35px;
}
/* ui-notice type-no-icon */
.ui-notice.type-no-icon {
  margin-top: 7px;
  padding-left: 10px;
}
.ui-notice.type-no-padding {
  margin-top: 15px;
  padding-left: 0;
}
.ui-notice.type-no-padding::before,
.ui-notice.type-no-icon::before {
  display: none;
}

.ui-notice.color-wrong::before {
  background-image: url("../images/icon/ic-notice-wrong.svg");
}
.ui-notice.color-basic::before {
  background-image: url("../images/icon/ic-notice-dark.svg");
}
.ui-notice-text:not(:first-of-type) {
  margin-top: 5px;
}
.ui-notice .ui-arrow {
  display: inline-block;
  margin-top: 5px;
}
.ui-notice .ui-arrow::after {
  width: 12px;
}
.ui-notice > .ui-button-question {
  vertical-align: top;
  margin-top: 2px;
}
.sub-ui-notice {
  margin-top: 5px;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 17px;
}
.ui-notice.type-small {
  margin-top: 10px;
  padding-left: 17px;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 18px;
}
.ui-notice.type-small:before {
  top: 2px;
  width: 14px;
  height: 14px;
  background: url("../images/icon/ic-notice-small.svg") no-repeat 50% 50% / 100% auto;
}
.ui-notice.type-small.type-inside {
  margin-left: 12px;
  font-weight: 300;
}

/* ui-notice-icon */
.ui-notice-icon {
  display: inline-block;
  vertical-align: top;
  width: 18px;
  height: 18px;
  background: url("../images/icon/ic-notice.svg") no-repeat 50% 50%;
}
.ui-notice-icon.type-small {
  width: 14px;
  height: 14px;
  margin: 2px 5px 0 0;
  background: url("../images/icon/ic-notice-small.svg") no-repeat 50% 50% / 100% auto;
}
.ui-notice-icon.type-warning {
  width: 24px;
  height: 40px;
  background: url("../images/icon/ic-warming.svg") no-repeat 0 50% / auto 100%;
}

/* domain */
.domain-auto {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 2;
  display: none;
  margin-top: 10px;
  padding: 12px 0;
  border: 1px solid var(--basic);
  border-radius: 6px;
  background-color: #fff;
}
.domain-auto-button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 20px;
  font-size: 1.7rem;
  line-height: 24px;
  text-align: left;
}
.domain-auto-button .domain {
  color: var(--gray-70);
}

/* ui-button-down */
.ui-button-down {
  display: inline-block;
  vertical-align: top;
  width: auto;
  padding-right: 19px;
}
/* 22.07.27 ui-button-filter */
.ui-button-filter {
  display: inline-block;
  vertical-align: top;
  width: auto;
  padding-right: 19px;
}
.more-button-block {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
}
/* [2024-05-09 : LHJ] 더보기 버튼 스타일 클래스 추가 */
.ui-button-more,
.more-button-block {
  margin: 20px 0 -5px;
  padding: 5px 0;
  font-size: 1.3rem;
  line-height: 1.8rem;
  text-align: center;
}
/* [2024-05-09 : LHJ] 더보기 버튼 스타일 클래스 추가 */
.ui-button-down::after,
.js-ui-accordion__opener::after,
.ui-button-filter::after /*22.07.27*/ {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -6px; /* 220719 */
}
.ui-button-down::after,
.ui-button-more::after,
.more-button-block::after,
.js-ui-accordion__opener::after,
.ui-arrow-opener {
  display: inline-block;
  vertical-align: middle;
  width: 12px;
  height: 12px;
  background: url("../images/common/ic-select-arrow.svg") no-repeat 100% 50% / 100% auto; /* 250117 22.12.15 이미지 확장자 변경 */
}
/* [2024-05-09 : LHJ] 더보기 버튼 스타일 클래스 추가 */

/* 22.10.19 ty_btn_merge */
.js-ui-accordion__opener.ty_btn_merge {
  left: 0;
  width: 50%;
}
.js-ui-accordion__opener.ty_btn_merge::after {
  left: 75px;
}

/* 22.07.26 ui-button-filter::after */
.ui-button-filter::after {
  display: inline-block;
  vertical-align: middle;
  width: 12px;
  height: 12px;
  background: url("../images/common/ic-filter.png") no-repeat 100% 50% / 100% auto;
}
.ui-button-more-close-text {
  display: none;
}
.ui-button-more.is-opened .ui-button-more-open-text {
  display: none;
}
.ui-button-more.is-opened .ui-button-more-close-text {
  display: inline;
}
.ui-button-down[disabled] {
  color: #ccc;
}
.ui-button-down[disabled]::after {
  background-image: url("../images/common/ic-select-arrow-disabled.svg");
}
.ui-button-more::after,
.more-button-block::after {
  content: "";
  vertical-align: top;
  height: 1.8rem;
  margin-left: 5px;
}
/* [2024-05-09 : LHJ] 더보기 버튼 스타일 클래스 추가 */
.js-ui-accordion__opener.js-accordion-active::after,
.js-accordion-opened .ui-arrow-opener,
.ui-button-more.is-opened::after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.ui-button-question {
  display: inline-block;
  vertical-align: middle;
  width: 15px;
  height: 15px;
  background: url("../images/icon/ic-question.svg") no-repeat 50% 50%;
}
.ui-button-question:not(:first-child) {
  margin-left: 5px;
}
.ui-button-question.type-block {
  display: block;
}
.ui-button-change {
  width: 28px;
  height: 28px;
  border-radius: 100%;
  background: var(--gray-10) url("../images/icon/btn-change.svg") no-repeat 50% 50%;
}

/* ui-button-question type-gray */
.ui-button-question.type-gray {
  background-image: url("../images/icon/ic-question-gray.svg");
}

/* ui-button-question type-default-align */
.ui-button-question.type-default-align {
  vertical-align: top;
  height: 1.8rem;
}

/* ui-button-question type-left-margin */
.ui-button-question.type-left-margin {
  margin-left: 5px;
}

/* ui-arrow-change */
.ui-arrow-change {
  display: inline-block;
  vertical-align: middle;
  width: 12px;
  height: 12px;
  background: url("../images/icon/ic-change.svg") no-repeat 50% 50% / 100% auto;
}
.ui-arrow-change:not(:last-child) {
  margin-right: 5px;
}

/* ui-arrow-change type-center */
.ui-arrow-change.type-center {
  margin-right: 5px;
  margin-left: 5px;
}

/* tel */
.ui-tel-link {
  padding-left: 16px;
  border-bottom: 1px solid var(--gray-70);
  background: url("../images/icon/ic-phone.svg") no-repeat 0 50% / 14px auto;
  font-size: 1.2rem;
  white-space: nowrap;
}

/* homepage */
.ui-homepage-link {
  padding-left: 16px;
  border-bottom: 1px solid var(--gray-70);
  background: url("../images/icon/ic-home-g.svg") no-repeat 0 50% / 14px auto;
  font-size: 1.2rem;
  white-space: nowrap;
}

/* tag */
.ui-tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 1px 8px 0;
  border-radius: 9px;
  background-color: var(--vip);
  color: #fff;
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 17px;
}

/* badge */
/* 230629 .ui-badge 수정 */
/* 230710 원복 */
.ui-badge {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  min-width: 49px;
  padding: 0 8px;
  border-radius: 13px;
  background-color: var(--gray-20);
  color: var(--gray-70);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 26px;
  text-align: center;
}
.ui-badge.font-weight-regular {
  font-weight: 400;
}
.ui-badge.color-primary {
  background-color: var(--primary-light);
}
.ui-badge.color-primary-dark {
  background-color: var(--primary-light);
}
.ui-badge.color-secondary {
  background-color: #d8f3f2;
  color: #00907f !important;
}
.ui-badge.color-wrong {
  background-color: var(--wrong-light);
}
.ui-badge.color-gray {
  background-color: var(--gray-30);
}
.ui-badge.color-pink {
  background-color: #fee7ec;
  color: #f14a76 !important;
}
.ui-badge.type-point {
  background-color: var(--point);
  color: #fff;
}
.ui-badge.type-vip {
  background-color: var(--vip);
  color: #fff;
}
.ui-badge.type-vvip {
  background-color: #977c4d;
  color: #fff;
}
.ui-badge.type-basic {
  background-color: var(--basic);
  color: #fff;
}
/* 250513 */
.ui-badge.type-complete {
  background-color: #248BD9;
  color: #fff;
}
.ui-badge.type-error-1 {
  background-color: #E13C41;
  color: #fff;
}
.ui-badge.type-error-2 {
  background-color: #E66000;
  color: #fff;
}
.ui-badge.color-primary-fill {
  background-color: var(--primary);
  color: #fff;
}
.ui-badge.color-coupon-1 {
  background-color: #ff39a4;
  color: #fff;
}
.ui-badge.color-coupon-2 {
  background-color: #ff223c;
  color: #fff;
}
.ui-badge.type-small {
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 23px;
}
.ui-badge.type-xsmall {
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 18px;
}
.ui-badge.type-vip.ui-arrow::after,
.ui-badge.type-basic.ui-arrow::after,
.ui-badge.color-primary-fill.ui-arrow::after {
  background-image: url("../images/icon/btn-more-w-s.svg");
}
.ui-badge.ui-arrow::after {
  vertical-align: top;
  width: 12px;
  height: 26px;
}
.ui-badge.type-right-icon::after,
.ui-badge.type-icon-more::after,
.ui-badge.type-icon-share::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-left: 2px;
  background: no-repeat 50% 50%;
}
.ui-badge.type-icon-more::after {
  width: 10px;
  height: 10px;
  background-image: url("../images/icon/btn-more-b.svg");
}
.ui-badge.type-icon-more.is-active::after {
  background-image: url("../images/icon/btn-more-1-b.svg");
}
.ui-badge.type-icon-share::after {
  width: 15px;
  height: 15px;
  background-image: url("../images/icon/btn-share.svg");
}
.ui-badge.type-right-icon.type-icon-card-delete::after {
  width: 15px;
  height: 15px;
  background-image: url("../images/icon/ic-cardrelease.svg");
}

/* form required */
.ui-required {
  display: inline-block;
  vertical-align: top;
  width: 4px;
  height: 4px;
  margin-left: 2px;
  border-radius: 100%;
  background-color: var(--point);
}

/* form */
.form-list:not(:first-child) {
  margin-top: 35px;
}
.form-list.type-box {
  padding: 20px;
  border-radius: 6px;
  background-color: var(--gray-20);
}
.form-list.type-box .ui-select-block {
  background-color: transparent;
}
.form-list.type-box.type-border {
  border: 1px solid var(--gray-30);
}
.form-list.type-line {
  border-top: 1px solid #e9ecef;
}
.form-list.type-line .form-item:first-child {
  padding-top: 35px;
}
.form-detail-head + .form-list {
  margin-top: 0;
}
.form-item:not(:first-child) {
  margin-top: 25px;
}
.form-title {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 2px;
}
.form-title.flex-col {
  flex-direction: column;
}
.form-title.type-wrap {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.form-title.type-wrap .sub-ui-notice {
  width: 100%;
  margin-top: 4px;
}
.form-title .title {
  color: var(--gray-80);
  font-size: 1.3rem;
  line-height: 18px;
}
.form-title .title-exp {
  margin-left: 4px;
  color: var(--gray-80);
  font-weight: 300;
}
.form-title .sub-title {
  margin-top: 4px;
  color: var(--gray-60);
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 17px;
}
.form-title.type-big {
  margin-bottom: 26px;
}
.form-title.type-big .title {
  color: #111;
  font-size: 1.7rem;
}
.form-title.has-tooltip .title + .ui-tooltip-wrap {
  margin-left: 3px;
}

.form-title .ui-arrow.type-black,
.form-title .form-title-right {
  margin-left: auto;
}
.form-title .form-title-right .ui-arrow {
  color: var(--gray-70);
}
.form-title .form-title-right .ui-arrow:disabled {
  color: var(--gray-40);
}
.form-title .form-title-right .ui-arrow:disabled::after {
  background-image: url("../images/icon/btn-more-d.svg");
}
.form-title .sub {
  margin-left: 5px;
  color: var(--gray-60);
  font-weight: 400;
  font-size: 1.2rem;
}
.form-title-sub {
  margin-block: 4px 2px;
  color: var(--gray-60);
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 17px;
}
.form-item .type-textarea:first-child,
.form-item .ui-checkbox-group:first-child,
.form-item .ui-radio-group:first-child {
  margin-top: 10px;
}

/* form detail */
.form-detail-wrap {
  padding: 12px 0;
  border-top: 1px solid var(--gray-30);
  border-bottom: 1px solid var(--gray-30);
}
.form-detail-wrap .form-detail:not(:first-child) {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-30);
}
.form-detail-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 35px 0 25px;
  color: var(--basic);
}
.form-detail-head .title {
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 2rem;
}
.form-detail-head .title .sub {
  margin-left: 4px;
  font-weight: 300;
  font-size: 1.5rem;
}
.form-detail-head > .ui-arrow,
.form-detail-head .ui-badge.ui-arrow,
.form-detail-head .icon.type-scroll-x,
.form-detail-head .status-tag,
.form-detail-head .text {
  margin-left: auto;
}
.form-detail-head .icon.type-scroll-x {
  display: inline-block;
  vertical-align: top;
  width: 22px;
  height: 22px;
  background: url("../images/icon/ic-trans.svg");
}
.form-detail-head.type-flex-center {
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.form-detail-head .title.type-flexible {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.form-detail-block-title {
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 18px;
}
.form-detail-block {
  overflow: hidden;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
}
.form-detail-block + .form-detail-block {
  margin-top: 10px;
}
.form-detail.type-bg .form-detail-block {
  padding: 21px 20px;
  background-color: var(--gray-20);
}
/* 2022.11.22 */
.form-detail.type-tooltip {
  position: relative;
}
.form-detail-block-head {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 60px;
  padding: 0 20px;
  background-color: var(--gray-20);
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.form-detail-block-head::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background-color: var(--gray-30);
}
.form-detail-block-head.type-white {
  background: #fff;
  font-size: 1.5rem;
}
.form-detail-block-head.type-white::after {
  right: 20px;
  left: 20px;
}
.form-detail-block-head .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
  flex: 1;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-flex: 1;
}
.form-detail-block-head .title .title-right {
  margin-left: auto;
  font-weight: 700;
}
.form-title-wrap {
  margin-top:35px;
  padding-top:35px;
  border-top:1px solid #e5e5e5;
}
.form-title-wrap:nth-child(2) {
  border-top:0;
  padding-top:0;
  margin-top:0;
}
.form-title-wrap .form-detail-title {
  color:#888;
}
.form-title {
  font-size: 17px;
  font-weight: 500;
  color:#111;
}
.form-detail-list {
  font-weight: 500; /* 폰트스타일 수정 */
  font-size: 1.5rem;
  line-height: 22px;
}
.form-detail-list.type-full {
  overflow: hidden;
  width: 100%;
}
.form-detail-list.font-weight-light {
  font-weight: 300;
}
.form-detail-list .type-none {
  display: block;
  margin-top: 35px;
  padding: 0;
  font-size: 1.8rem;
  line-height: 26px;
}
.form-detail-list .type-none:after {
  min-height: 214px;
}
.form-detail-list .type-none .item-text {
  font-size: inherit;
  line-height: inherit;
}
.form-detail-list-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 20px; /* 22.12.14 여백 수정 */
  font-weight: 500;
  font-size: 1.5rem;
}
.form-detail-list-title.type-small {
  font-size: 1.3rem;
  line-height: 18px;
}
.form-detail-list-title .title-left {
  -ms-flex: 1;
  flex: 1;
  -webkit-box-flex: 1;
}
/* 2022-08-18 */
.form-detail-list-title.type-flex-end {
  justify-content: flex-end;
}
.form-detail-list-title.type-xsmall {
  font-size: 1.2rem;
  line-height: 18px;
}

.form-detail-block .form-detail-list.type-text-default {
  padding: 0 20px 20px 20px; /* 22.12.05 여백 수정 */
  font-size: 1.3rem;
}
/* 22.12.14 여백 수정 */
/*
.form-detail-list.type-text-default .form-detail-item:not(:first-child) {
margin-top: 20px;
}
*/
.form-detail-block .form-detail-list.type-text-medium {
  font-size: 1.5rem;
  line-height: 2.2rem;
}
.form-detail-block .form-detail-list.type-line {
  position: relative;
  margin-top: 5px;
  padding: 0 20px 20px 20px; /* 22.12.05 여백 수정 */
}
.form-detail-block .form-detail-list.type-line:before {
  content: "";
  position: absolute;
  top: 0;
  right: 20px;
  left: 20px;
  height: 1px;
  background: var(--gray-30);
}
.form-detail-block-foot {
  margin-top: 5px;
  padding: 25px 20px 20px;
  border-top: 1px solid var(--gray-30);
  background: var(--gray-20);
}
.form-detail-block-foot .ui-select-block,
.form-detail-block-foot .ui-input {
  background: inherit;
}
.form-detail-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 35px 0 25px;
  color: var(--basic);
}
.form-detail-head .title {
  font-size: 1.7rem;
  line-height: 2rem;
}
.form-detail-head .ui-arrow.type-black {
  margin-left: auto;
  font-size: 1.3rem;
}
.form-detail-head-sub {
  font-weight: 300;
  font-size: 1.5rem;
}
.form-detail-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  margin-top: 20px; /* 22.12.05 여백 수정 */
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
}
.form-detail-item .form-detail-item-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 400;
}
/* 22.12.14 여백 수정 */
/*
.form-detail-item-wrap:not(:first-child),
.form-detail-item:not(:first-child) {
margin-top: 25px;
}
*/
/* /22.12.14 여백 수정 */
.form-detail-title {
  position: relative;
  padding-right: 30px;
  color: #888; /* 폰트스타일 수정 */
}
.form-detail-title.type-ellipsis {
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-box-flex: 1;
}
.form-detail-title.type-ellipsis + .form-detail-group {
  -ms-flex: initial;
  flex: initial;
  white-space: nowrap;
  -webkit-box-flex: initial;
}
.form-detail-title.type-reply {
  padding-left: 19px;
  background: url("../images/icon/ic-reply.svg") no-repeat 0 50%;
  color: var(--secondary);
}
.form-detail-title.type-reply.type-vip {
  background-image: url("../images/icon/ic-reply-vip.svg");
  color: var(--vip);
}
.form-detail-title .ui-tooltip-wrap {
  height: 22px;
  margin-left: 5px;
}
.form-detail-title .ui-icon-lock {
  margin-right: 3px;
}
.form-detail-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
  text-align: right;
  word-break: break-all;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-box-flex: 1;
}
/* [2024-08-27 : shj] 단어단위로 줄바꿈 */
.form-detail-group.word-break-keep {
  word-break: keep-all;
  overflow-wrap: break-word;
}

.form-detail-group.type-block {
  display: block;
}
.form-detail-group.type-flex-column {
  -ms-flex-direction: column;
  flex-direction: column;
  align-items: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-align: end;
  -ms-flex-align: end;
}
.form-detail-group.type-block .default-text.color-blur {
  margin-top: 2px;
}
.form-detail-group .ui-arrow-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.form-detail-group .ui-arrow-item + .ui-arrow-item {
  margin-top: 15px;
}
.form-detail-group .ui-arrow-list .ui-arrow {
  margin-left: auto;
}
.form-detail-group .ui-arrow-change {
  vertical-align: top;
  height: 2.2rem;
}
.form-detail-group .type-align-top .ui-input-block input {
  height: 32px;
  padding-top: 0;
}
.form-detail-group .type-align-top .form-unit.medium-text {
  margin-left: 5px;
}
.form-detail-group .global-card-brand.type-regular {
  margin-top: -7px;
  margin-bottom: -7px;
}
.form-detail-group .form-detail-des{
  position: relative;
  padding-right: 1.3rem;
  color: var(--gray-70);
}
.form-detail-group .form-detail-des::after{
  position: absolute;
  content: '';
  top: 50%;
  transform: translateY(-50%);
  right: 0.6rem;
  width: 1px;
  height: 10px;
  background: #d9d9d9;
}
.form-detail.type-line {
  margin-top: 35px;
  padding-top: 45px;
  border-top: 1px solid var(--gray-30);
}
.form-detail.type-line.type-narrow {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-30);
}
.form-detail.type-line .form-detail-head {
  margin-top: 0;
}
.form-detail.type-block.type-line {
  margin-top: 25px;
  padding-top: 25px;
}
.form-detail-item.type-block,
.form-detail.type-block .form-detail-item {
  display: block;
}
.form-detail.type-block .form-detail-title,
.form-detail-item.type-block .form-detail-title {
  padding-right: 0;
}
.form-detail.type-block .form-detail-title {
  margin-bottom: 10px;
}
.form-detail.type-block .form-detail-group {
  display: block;
  text-align: left;
}
.form-detail-group-item + .form-detail-group-item {
  margin-top: 4px;
}
.form-detail.type-box {
  padding: 0 20px 20px 20px; /* 22.12.05 여백 수정 */
  border: 1px solid var(--gray-30);
  border-radius: 6px;
}
.form-detail.type-box.type-fill-white {
  background-color: #fff;
}
.form-detail.type-box .form-detail-list {
  font-size: 1.3rem;
  line-height: 22px;
}
.form-detail.type-box .form-detail-list .form-detail-title .ui-tooltip-wrap {
  height: 22px;
}
.form-detail.type-box .form-detail-item:not(:first-child) {
  margin-top: 20px;
}

.form-detail-item-40 {
  justify-content: space-between;
  margin-top: 28px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
}

.form-detail-list.type-usage-date .form-detail-item-40:not(:first-of-type) {
  margin-top: 40px;
}

.form-detail-item.type-block .form-detail-group {
  display: block;
  text-align: left;
}
.form-detail-info-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.form-detail-info {
  position: relative;
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}
.form-detail-info:after {
  content: "";
  display: block;
  clear: both;
}
.form-detail-info .form-info-item {
  position: relative;
  float: left;
}
.form-detail-info .form-info-item + .form-info-item {
  margin-left: 7px;
  padding-left: 8px;
}
.form-detail-info .form-info-item + .form-info-item::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 9px;
  margin-top: -5px;
  background-color: var(--gray-60);
}
/* 230905 접근성 수정 */
.detail-history-area .form-detail .form-detail-block .form-detail-list {
  padding: 20px;
}
.detail-history-area .form-detail .form-detail-block .form-detail-list .form-detail-list-title {
  margin-top: 0;
}
/* //230905 접근성 수정 */
/* .form-detail-list .ui-arrow-block .ui-checkbox-block .ui-checkbox {z-index: 0} //230906 접근성 수정 */

/* form-detail-box */
.form-detail-box {
  border-radius: 6px;
  background-color: var(--gray-20);
}
.form-detail-box .form-detail-item {
  position: relative;
  margin: 0;
  padding: 20px;
}
.form-detail-box .form-detail-item + .form-detail-item::before {
  content: "";
  position: absolute;
  top: 0;
  right: 20px;
  left: 20px;
  height: 1px;
  background: var(--gray-30);
}
.form-detail-box .form-detail-title {
  color: var(--basic);
}
.form-detail-box .form-detail-group {
  font-weight: 700;
  font-size: 1.7rem;
}

/* form-detail-list type-text-default */
.form-detail-list.type-text-default {
  font-size: 1.3rem;
  line-height: 18px;
}
.form-detail-list.type-text-default .form-detail-title .ui-tooltip-wrap {
  height: 18px;
}

/* form-detail-item type-align-middle */
.form-detail-item.type-align-middle {
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
/* form-detail-item type-code(유효기간) */
.form-detail-item.type-code {
  position: relative;
  padding: 20px;
  border: 1px solid var(--gray-30);
}
.form-detail-item.type-code .ui-icon-refresh {
  margin-top: 0;
  margin-left: 10px;
}
.form-detail-item.type-code .ui-code-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
}
.form-detail-item.type-code .ui-code-progress-bar {
  display: block;
  height: 100%;
  background-color: var(--primary);
}

/* 2022-09-01 form-detail-item.type-info-list */
.form-detail-item.type-info-list .info-list {
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 18px;
}
.form-detail-item.type-info-list .info-list .info-item:not(:first-child) {
  margin-top: 10px;
}
.form-detail-item.type-info-list .info-list .form-detail-title {
  padding-right: 30px;
  color: var(--gray-70);
}
.form-detail-item.type-info-list .info-list .form-detail-group {
  display: flex;
  color: var(--basic);
  text-align: right;
}
.form-detail-item.type-info-list .info-list .form-detail-group.type-block {
  display: block;
}

/* 2022-09-01 form-detail-item.type-limit-input */
.form-detail-item.type-limit-input .form-detail-title {
  padding-right: 30px;
}
.form-detail-item.type-limit-input .form-detail-group {
  display: flex;
  text-align: right;
}
.form-detail-item.type-limit-input .form-detail-group.type-block {
  display: block;
}

/* form-detail-head type-no-margin-top */
.form-detail-head.type-no-margin-top {
  margin-top: 0;
}
/* form-detail-head type-block */
.form-detail-head.type-block {
  display: block;
}

/* form-detail-list type-auto */
.form-detail-list.type-auto .form-detail-item {
  justify-content: flex-start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
}
.form-detail-list.type-auto .form-detail-title {
  padding-right: 9px;
}
.form-detail-list.type-auto .form-detail-group {
  justify-content: flex-start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
}

.form-detail-notice {
  margin: 90px 0;
  font-size: 18px;
  line-height: 26px;
  text-align: center;
}

/* [2026-07-14 KJH] [WPM-14640] mpi 네이버페이 결제 관련 안내페이지 */
.mpi-simplepay .form-detail {
  margin-top: 25px;
}
.mpi-simplepay .form-detail .form-detail-list {
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
}
.mpi-simplepay .form-detail .form-detail-item {
  margin-top: unset;
}
.mpi-simplepay .form-detail .form-detail-item + .form-detail-item {
  margin-top: 11px;
}
.mpi-simplepay .form-detail .form-detail-title {
  color: #111;
}
/* // [2026-07-14 KJH] [WPM-14640] mpi 네이버페이 결제 관련 안내페이지 */

/* check-range */
.check-range {
  margin: -15px 0 25px;
  border-bottom: 1px solid var(--gray-30);
}
.check-range.type-border-none {
  border: none;
}
.check-range.type-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
}
.check-range.type-flex .ui-button-down {
  width: auto;
}
.check-range .ui-button-down {
  width: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: right;
}
/* 22.07.27 ui-button-filter */
.check-range .ui-button-filter {
  width: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: right;
}
.check-detail-list .type-none {
  border-bottom: 1px solid var(--gray-30);
}
.check-detail-list:first-child .type-none {
  border-top: 1px solid var(--gray-30);
}
.check-range + .check-detail-list .type-none {
  margin-top: -25px;
  font-size: 1.5rem;
  line-height: 20px;
}

/* 2023.05.12 */
.check-range.pos-relative {
  position: relative;
}

.check-detail-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 1.7rem; /* 폰트스타일 수정 */
}
.check-detail-title .sub {
  margin-left: 5px;
  font-weight: 300;
  font-size: 1.5rem;
}
.check-detail-title .total-text {
  margin-left: auto;
  font-size: 1.7rem;
  line-height: 21px;
}
.check-detail-title.type-line {
  margin-bottom: 25px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-30);
}
.check-detail-title-button {
  margin: -3px 0 -4px;
}
.check-area .form-detail {
  font-size: 1.3rem;
  line-height: 18px;
}
#searchList .check-area .form-detail-list {
  padding: 0 20px 20px 20px;
} /* 여백수정 */
#divCardDetailBody .page-section.type-line {
  padding-top: 15px;
}
#divCardDetailBody .form-detail.type-line {
  padding-top: 15px;
}
#divCardDetailBody .page-section.type-line .form-detail-head:first-child {
  margin-top: 20px;
}
#divCardSlipDetail .page-section.type-line {
  padding-top: 15px;
}
#divCardSlipDetail .form-detail.type-line {
  padding-top: 15px;
} /* 여백수정 */
.check-area .form-detail-list {
  padding: 20px;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
  font-size: inherit;
  line-height: inherit;
}
.check-area .form-detail-list + .form-detail-list {
  margin-top: 10px;
}
.check-area .form-detail-item:not(:first-child) {
  margin-top: 20px;
}
.check-area .form-detail-block .form-detail-list {
  border: none;
}
.check-area .form-detail-list.type-line {
  position: relative;
  margin-top: -1px;
}
.check-area .form-detail-list .form-detail-group {
  font-weight: 500;
}
.form-detail-list.type-usage-date {
  padding: 0;
  border: none;
  border-radius: 0;
}
.form-detail-list.type-usage-date .form-detail-item {
  display: block;
}
.form-detail-list.type-usage-date .form-detail-item:not(:first-of-type) {
  margin-top: 35px;
}
.form-detail-list.type-usage-date .form-detail-date {
  margin-bottom: 10px;
  color: var(--gray-70);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 17px;
}
.form-detail-list.type-usage-date .form-detail-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: var(--basic);
  font-size: 17px;
  line-height: 21px;
}
.form-detail-list.type-usage-date .form-detail-text + .form-detail-text,
.form-detail-list.type-usage-date .form-detail-contents + .form-detail-contents {
  margin-top: 25px;
}
.form-detail-contents .form-detail-button {
  display: block;
  width: 100%;
}
.form-detail-list.type-usage-date .form-detail-title {
  color: inherit;
}
.form-detail-list.type-usage-date.type-usage-flex {
  display: flex;
  align-items: center;
}
.form-detail-list.type-usage-date .form-detail-flag {
  position: relative;
  margin-left: 1rem;
  font-size: 1.3rem;
}
.form-detail-list.type-usage-date .form-detail-flag::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background-color: var(--gray-70);
}
.form-detail-list.type-usage-date.gov-store-list li,
.form-detail-list.type-usage-date.consumption-store-list li {
  padding: 0;
  border: none;
}
.form-detail-list.type-usage-date .form-detail-flag.cancel {
  color: #ce2d2d;
}
.form-detail-contents.has-logo .form-detail-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.form-detail-contents.has-logo .icon-logo {
  width: 36px;
  height: 36px;
  margin-right: 10px;
  background: no-repeat 50% 50%;
  background-size: 100% 100%;
}
.form-detail-contents.has-logo .text-box {
  flex: 1;
}

.form-detail-list.type-has-detail .form-detail-item {
  align-items: center;
}
.form-detail-list.type-has-detail .form-detail-title .date {
  display: flex;
  color: #888;
  font-weight: 300;
  font-size: 1.4rem;
}
.form-detail-list.type-has-detail .form-detail-title .date span {
  display: inline-block;
}
.form-detail-list.type-has-detail .form-detail-title .date span + span {
  margin-left: 13px;
}
.form-detail-list.type-has-detail .form-detail-title .tit {
  color: #000;
  font-size: 1.7rem;
}
.form-detail-list.type-has-detail .form-detail-title .form-detail-group {
  font-size: 1.7rem;
}
.form-detail-list.type-has-detail .form-detail-title .detail-info {
  display: flex;
  margin-top: 5px;
}
.form-detail-list.type-has-detail .form-detail-title .detail-info li {
  color: #888;
  font-size: 1.3rem;
}
.form-detail-list.type-has-detail .form-detail-title .detail-info li + li:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 9px;
  margin: 0 8px;
  background-color: #a2a2a2;
}

/* sorting-bar-list */
.sorting-bar-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.sorting-bar-item {
  position: relative;
}
.sorting-bar-item + .sorting-bar-item {
  margin-left: 8px;
  padding-left: 9px;
}
.sorting-bar-item + .sorting-bar-item:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 12px;
  margin: auto;
  background: var(--gray-60);
}

/* info deatil */
.info-detail:not(:first-child) {
  margin-top: 35px;
}
.info-detail.type-line {
  padding-top: 35px;
  border-top: 1px solid var(--gray-30);
}
.info-detail-item:not(:first-child) {
  margin-top: 35px;
}
.info-detail-item.type-line {
  margin-top: 25px;
  padding-top: 25px;
  border-top: 1px solid var(--gray-30);
}
.info-detail-title {
  position: relative;
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 24px;
}
.info-detail-group,
.info-detail-text {
  color: var(--gray-70);
  font-size: 1.5rem;
  line-height: 21px;
}
.info-detail-text + .ui-buttons {
  margin-top: 14px;
}
.info-detail-title + .info-detail-contents .form-list {
  margin-top: 25px;
}
.info-detail-contents .form-detail-list {
  font-size: 1.5rem;
  line-height: 22px;
}
.info-detail-contents .form-detail-list:first-child {
  margin-top: 25px;
}
.info-detail-contents > .ui-buttons:first-child,
.info-detail-contents > .ui-basic-button:first-child {
  margin-top: 14px;
}

/* select-list */
.ui-select-list.type-scroll {
  max-height: 250px;
  overflow-y: auto;
}
.ui-select-list .ui-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 15px 0;
}
.ui-select-list .ui-label.type-block {
  display: block;
}
.ui-select-list .ui-label::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 0;
  width: 22px;
  height: 22px;
  background: url("../images/common/ic-checkbox-l-s.svg") no-repeat 100% 50%;
  opacity: 0;
}
.ui-select-list input:checked + .ui-label,
.ui-select-list .ui-radio-block.is-checked .ui-label {
  padding-right: 30px;
  color: var(--primary);
}
.ui-select-list input:checked + .ui-label::after,
.ui-select-list .ui-radio-block.is-checked .ui-label::after {
  opacity: 1;
}
.ui-select-list .ui-label-text {
  margin-left: 0;
  font-size: 1.5rem;
  line-height: 20px;
}
.ui-select-list .ui-label-text-sub {
  margin-top: 2px;
  color: var(--gray-70);
  font-size: 1.2rem;
  line-height: 18px;
}
/* ui-select-item type-cancel */
.ui-select-item.type-cancel .logo-image {
  opacity: 0.4;
}
.ui-select-item.type-cancel .card-name,
.ui-select-item.type-cancel .card-number {
  color: #ccc;
}

/* multi-select-list */
.ui-select-multiple-item.type-all .ui-label,
.ui-select-multiple-item .ui-checkbox-block,
.ui-select-multiple-item .ui-radio-block,
.ui-select-multiple-item .ui-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.ui-select-multiple-item.type-all .ui-label.type-block,
.ui-select-multiple-item .ui-label.type-block {
  display: block;
}
.ui-layer__body-inner .ui-select-multiple-list:last-child {
  margin-bottom: -10px;
}
.ui-select-multiple-item.type-all {
  margin-bottom: 15px;
}
.ui-select-multiple-item.type-all .ui-label {
  padding: 12px;
  border: 1px solid var(--gray-30);
}
.ui-select-multiple-item.type-all .ui-label .ui-arrow {
  margin-left: auto;
}

.ui-select-multiple-item.type-all.type-box .ui-label {
  border-color: #f1f1f1;
  background-color: #f1f1f1;
}
.ui-select-multiple-item.type-all.type-box .ui-checkbox:checked + .ui-label {
  border-color: #f1f1f1;
}
.ui-select-multiple-item.type-all.type-box .ui-label-text {
  font-weight: 700;
  font-size: 1.5rem;
}

.ui-select-multiple-item.type-all .ui-checkbox:checked + .ui-label {
  border-color: var(--basic);
}

.ui-select-multiple-item.has-tooltip {
  position: relative;
  z-index: 1;
}
.ui-select-multiple-item.has-tooltip .ui-tooltip-wrap {
  position: absolute;
  top: 50%;
  right: 12px;
  margin-top: -9px;
}

.ui-select-multiple-item .ui-checkbox-block,
.ui-select-multiple-item .ui-radio-block {
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.ui-select-multiple-item .ui-checkbox-block.type-align-top,
.ui-select-multiple-item .ui-radio-block.type-align-top {
  align-items: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
}
.ui-select-multiple-item .ui-label {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  -webkit-box-flex: 1;
}
.ui-select-multiple-item .ui-arrow-button {
  -ms-flex: none;
  flex: none;
  margin-right: 16px;
  -webkit-box-flex: 0;
}
.ui-select-multiple-item.type-all + .ui-checkbox-group.type-wrap .ui-checkbox-block {
  padding-left: 12px;
}

.ui-select-multiple-item.type-big .ui-label {
  padding: 12px 12px;
}
.ui-select-multiple-item.type-big .ui-label .ui-label-text {
  font-size: 15px;
}
.ui-select-multiple-item.type-big .ui-label .ui-label-text .ui-arrow-button {
  position: relative;
  z-index: 10;
}

/* ui-select-multiple-item type-has-button */
.ui-select-multiple-item.type-all.type-has-button {
  padding: 13px 12px;
  border: 1px solid var(--gray-30);
}
.ui-select-multiple-item.type-all.type-has-button .ui-label {
  -ms-flex: initial;
  flex: initial;
  padding: 0;
  border: none;
  -webkit-box-flex: initial;
}

/* ui-select-multiple-list type-fit */
.ui-select-multiple-list.type-fit .ui-select-multiple-item + .ui-select-multiple-item {
  margin-top: 10px;
}
.ui-select-multiple-list.type-fit .ui-select-multiple-item .ui-label {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
}
.ui-select-multiple-list.type-fit .ui-select-multiple-item .ui-arrow-button {
  margin-right: 0;
}

.ui-select-multiple-list.form-detail-list .ui-select-multiple-item .ui-label .form-detail-item {
  -ms-flex: 1;
  flex: 1;
  margin-top: 0;
  -webkit-box-flex: 1;
}
.ui-select-multiple-list.form-detail-list .ui-select-multiple-item:not(.type-all) .ui-label {
  align-items: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
}
/* 220713 스타일 추가 */
.ui-select-multiple-list.type-title .page-info .page-info-title {
  margin-top: 4px;
}
.ui-select-multiple-list.type-title .ui-button-aside {
  margin-bottom: 0;
}
.ui-select-multiple-list.type-title .form-item {
  margin-top: 0;
}
.ui-select-multiple-list.type-title .form-item + .page-info {
  margin-top: 35px;
}
/* //220713 스타일 추가 */
.ui-select-terms {
  margin: 0 12px;
}
.ui-select-terms.type-no-margin {
  margin: 0;
}
.ui-select-terms-list-group + .ui-select-terms-list-group {
  margin-top: 25px;
}
.ui-select-terms-list-title {
  padding-bottom: 12px;
  border-bottom: 1px solid #e9ecef;
  color: var(--gray-70);
  font-size: 1.3rem;
}
.ui-select-terms-list {
  margin-top: 25px;
}
.ui-select-terms-item {
  box-sizing: border-box;
}
.ui-select-terms-item .ui-select-terms-item {
  padding-left: 10px;
}
.ui-select-terms-item .ui-select-terms-item::before {
  content: "";
  display: block;
  height: 18px;
}
.ui-select-terms-item .ui-select-terms-item .ui-select-terms-item {
  color: var(--gray-70);
}
.ui-select-terms-item .ui-select-terms-item .ui-select-terms-item::before {
  height: 10px;
}
/* 23.05.17 폰트사이즈, 굵기 수정 */
.ui-select-terms-item .ui-select-terms-item .ui-select-terms-item .ui-select-terms-item .ui-label-text {
  font-weight: 400;
  font-size: 1.4rem;
}
.ui-select-terms-item .ui-select-terms-item .ui-select-terms-item .ui-select-terms-item::before {
  height: 6px;
}
.ui-select-terms-item .ui-select-terms-item .ui-select-terms-item .ui-checkbox-block + .ui-select-terms-item::before {
  height: 10px;
}
.ui-select-terms .ui-checkbox-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
}
.ui-select-terms .ui-checkbox-block.type-large .ui-label-text {
  line-height: 21px;
}
.ui-select-terms .ui-checkbox-block .ui-label-text:first-child {
  margin-left: 26px;
}
.ui-select-terms .ui-checkbox-block.type-large .ui-label-text:first-child {
  margin-left: 28px;
}
.ui-select-terms .ui-checkbox-block.type-large + .ui-select-terms-layer .paragraph,
.ui-select-terms .ui-checkbox-block.type-large + .ui-select-terms-layer .ranking-tag-list {
  margin-left: 24px;
}
.ui-select-terms .ui-checkbox-block.type-large + .ui-select-terms-layer .paragraph::before {
  content: "";
  display: block;
  height: 18px;
}
.ui-select-terms .ui-checkbox-block.type-large .ranking-tag {
  margin: 3px 0 0 8px;
}
.ui-select-terms .ui-checkbox-block.type-all {
  box-sizing: border-box;
  padding: 12px 15px;
  border: 1px solid var(--gray-30);
}
.ui-select-terms .ui-checkbox-block.type-all + .ui-select-terms-layer .ui-select-terms-contents {
  margin: 25px 16px 0 12px;
}
/* 23.05.17 폰트사이즈 수정 */
.ui-select-terms .paragraph {
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 18px;
}
.ui-select-terms .ui-select-terms-opener {
  -ms-flex: 0 0 22px;
  flex: 0 0 22px;
  height: 22px;
  margin-left: auto;
  -webkit-box-flex: 0;
}
.ui-select-terms .ui-select-terms-opener::after {
  width: 14px;
  height: 14px;
  background-image: url("../images/icon/btn-dropdown-xl-b.svg");
}
.ui-select-terms .ui-checkbox-block .ui-label {
  align-items: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
}
.ui-select-terms .ui-checkbox-block .ui-label:not(:last-child) {
  margin-right: 10px;
  /* 24.08.29 약관등급관련 뱃지 마지막으로 붙게 작업 width:100%; 추가. S_notify_p002_240826.html - sayho */
  width: 100%;
}
.ui-select-terms .ui-checkbox-block-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: auto;
}
.ui-select-terms .ui-checkbox-block .ranking-tag,
.ui-select-terms .ui-checkbox-block .ui-arrow {
  margin-left: auto;
}
.ui-select-terms .ui-checkbox-block .ranking-tag {
  margin-top: 1px;
  margin-bottom: 1px;
}
.ui-select-terms .ui-checkbox-block .ranking-tag + .ui-arrow {
  margin-left: 0;
}
.ui-select-terms .ui-checkbox-block .ui-arrow:last-child {
  margin-right: 4px;
}
.ui-select-terms .ui-checkbox-block .ui-arrow.type-big {
  margin-left: -10px;
}
.ui-select-terms .ui-checkbox-block .ui-arrow.type-big:not(:last-child) {
  margin-right: 10px;
}
.ui-select-terms .ui-checkbox-block .ui-arrow.type-big:last-child {
  margin-left: auto;
}
.ui-select-terms-item-group::after {
  content: "";
  display: block;
  clear: both;
}
.ui-select-terms-item-group .ui-select-terms-item {
  float: left;
}
.ui-select-terms-item-group.type-col2 .ui-select-terms-item {
  width: 50%;
}
.ui-select-terms-item-group.type-col2 .ui-select-terms-item.type-full {
  width: 100%;
}
.ui-select-terms-item-group.type-col3 .ui-select-terms-item {
  width: 33.3333%;
}
.ui-select-terms-item
  .ui-select-terms-item
  .ui-select-terms-item
  .ui-select-terms-item-group
  .ui-select-terms-item::before {
  height: 11px;
}
.ui-select-terms-item-group.type-col2.type-narrow .ui-select-terms-item.type-full::before {
  height: 10px;
}

/* terms-area */
.terms-area {
  margin-top: 15px;
}
.terms-area.type-indent {
  padding-left: 12px;
}
.terms-item {
  position: relative;
}
.terms-item.agree-row {
  display: flex;align-items: center;gap:10px
}
.terms-item + .terms-item {
  margin-top: 15px;
}
.terms-item .ui-checkbox-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.terms-item .ui-checkbox-block .ui-label {
  -ms-flex: 1;
  flex: 1;
  -webkit-box-flex: 1;
}
/* 230706 웹접근성 수정 */
.terms-item .ui-checkbox-block .ui-checkbox {
  width: 94%;
  z-index: revert; /* [2026-07-09 kho] 접근성. 추가. */
}
.terms-item .ui-checkbox-block .ui-label.type-flex-auto {
  -ms-flex: none;
  flex: none;
  -webkit-box-flex: 0;
}
.terms-item .ui-checkbox-block + .ui-arrow {
  margin-top: 10px;
  margin-left: 26px;
}
.terms-item .ui-checkbox-block .ui-arrow {
  align-items: flex-start;
}
.terms-item.js-ui-accordion__item .ui-checkbox-block {
  padding-right: 18px;
}
.terms-opener {
  position: absolute;
  top: 0;
  right: 0;
  width: 18px;
  height: 18px;
}
.terms-detail {
  padding-left: 13px;
}
.terms-detail.type-no-indent {
  padding-left: 0;
}
.terms-detail::before {
  content: "";
  display: block;
  height: 15px;
}

/* 22.07.05 */
.terms-area.js-ui-accordion.type-block .terms-item.js-ui-accordion__item .ui-checkbox-block.type-large {
  padding: 12px;
  border: 1px solid var(--gray-30);
}
.terms-area.js-ui-accordion.type-block
  .terms-item.js-ui-accordion__item.js-accordion-opened
  .ui-checkbox-block.type-large {
  border: 1px solid var(--basic);
}
.terms-area.js-ui-accordion.type-block
  .terms-item.js-ui-accordion__item
  .ui-checkbox-block.type-large
  .ui-checkbox-object {
  margin-right: 4px;
}
.terms-area.js-ui-accordion.type-block .terms-item.js-ui-accordion__item .ui-checkbox-block.type-large + .terms-opener {
  top: 14px;
  right: 12px;
}
.terms-area.js-ui-accordion.type-block .terms-detail {
  padding: 0;
}
.terms-area.js-ui-accordion.type-block .terms-detail::before,
.terms-area.js-ui-accordion.type-block .terms-item:not(:last-child) .terms-detail::after {
  display: none;
}
.terms-area.js-ui-accordion.type-block .terms-detail {
  padding: 20px 0;
}

/* 약관 상세 영역 미확정(추후 수정 예정) */
.terms-detail-inner {
  font-weight: 300;
}
.terms-detail-inner-scroll {
  overflow-y: auto;
  box-sizing: border-box;
  height: 100px;
  margin-left: -13px;
  padding: 20px;
  border-radius: 6px;
  background-color: var(--gray-20);
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 18px;
}
/* //약관 상세 영역 미확정(추후 수정 예정) */
.terms-item:not(:last-child) .terms-detail::after {
  content: "";
  display: block;
  height: 8px;
}
.terms-item > .type-none {
  padding: 0;
  text-align: left;
}
.terms-item > .type-none::after {
  display: none;
}
.ui-radio-group-area {
  margin-top: 15px;
  font-size: 0;
  line-height: 1;
}
.info-item:not(:last-child) .ui-radio-group-area {
  margin-bottom: 10px;
}
.ui-radio-group.type-yes-or-no {
  display: inline-block;
  line-height: 1;
}
.ui-radio-group.type-yes-or-no .ui-radio-block {
  display: inline-block;
}
.ui-radio-group.type-yes-or-no .ui-radio-block + .ui-radio-block {
  margin-top: 0;
  margin-left: 60px;
}
.ui-radio-group.type-yes-or-no .ui-radio-object + .ui-label-text {
  margin-left: 8px;
}

.ui-radio-group.type-narrow {
  display: inline-block;
  line-height: 1;
}
.ui-radio-group.type-narrow .ui-radio-block {
  display: inline-block;
}
.ui-radio-group.type-narrow .ui-radio-block + .ui-radio-block {
  margin-top: 0;
  margin-left: 16px;
}
.ui-radio-group.type-narrow .ui-radio-block.type-circle.type-small .ui-radio-object + .ui-label-text,
.ui-radio-group.type-narrow .ui-radio-block.type-circle.type-small .ui-label-text + .ui-radio-object {
  margin-left: 4px;
}

/* progress */
.page-progress {
  margin: 10px 0 20px;
}
.progress-tracker {
  display: flex;
  align-items: center;
}
.progress-step {
  position: relative;
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border: 0.15rem solid var(--secondary);
  border-radius: 3px;
  background-color: var(--secondary);
}
.progress-step.is-active {
  width: 14px;
  height: 14px;
  border: 0.15rem solid var(--secondary);
  border-radius: 5px;
  background-color: #fff;
}
.progress-step.is-active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background-color: var(--secondary);
  transform: translate(-50%, -50%);
}
.progress-step.is-active ~ .progress-step {
  border-color: var(--gray-60);
  background-color: #fff;
}

/* tab-panel */
.page-tab-panel .ui-tab-list {
  margin: 0 -24px;
}
.page-tab-panel .ui-tab-panel {
  padding-top: 35px;
}
/* [2025-08-04 kjy] [WPM-11777] 1차APP접근성수정: 결제계좌 Tab 구조 변경 */
.page-tab-panel + .ui-tab-panel {
  padding-top: 35px;
}
.page-tab-panel .panel-2fa {
  padding-top: 0;
}
/* tab-panel type-certificate */
.page-tab-panel.type-certificate .ui-select-multiple-list {
  margin-bottom: 35px;
}
.certificate-notice {
  margin: 90px 0;
  font-size: 1.8rem;
  line-height: 26px;
  text-align: center;
}
.certificate-notice:first-child {
  margin-top: 55px;
}
.certificate-notice:last-child {
  margin-bottom: 55px;
}

/* menu */
.menu-group {
  margin-top: 35px;
}
.menu-title {
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e9ecef;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.menu-item {
  color: #000;
  font-size: 1.7rem;
  line-height: 2.4rem;
}
.menu-item + .menu-item {
  margin-top: 18px;
}
.menu-button {
  display: block;
  font-weight: 500;
}
.menu-button .ui-tag {
  vertical-align: top;
  margin-top: 3px;
}
.menu-image {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: top;
  align-items: center;
  height: 2.4rem;
  margin-left: 5px;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.menu-image.is-error {
  display: none;
}
.menu-image img {
  display: block;
  width: auto;
  height: 20px;
}

/* menu-list type-line */
.menu-list.type-line .menu-item + .menu-item {
  padding-top: 18px;
  border-top: 1px solid var(--gray-30);
}
.menu-guide-text {
  display: block;
  margin-top: 4px;
  color: var(--gray-70);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.8rem;
}

/* menu-sub-list */
.menu-sub-list {
  padding: 25px 10px 17px;
}
.menu-sub-item + .menu-sub-item {
  margin-top: 20px;
}
.menu-sub-button {
  display: block;
  color: var(--gray-70);
  font-size: 1.5rem;
  line-height: 2.2rem;
}

/* menu-group type-bg-gray */
.menu-group.type-bg-gray {
  margin-right: -24px;
  margin-left: -24px;
  padding: 35px 24px;
  background-color: var(--gray-20);
}

/* sub-menu-link */
.sub-menu-link-list {
  padding: 0 15px 10px;
}
.sub-menu-link-button {
  padding: 10px 0;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 18px;
}

/* menu-banner */
.menu-banner-area.type-line {
  margin-top: 35px;
  border-top: 1px solid var(--gray-30);
}
.menu-banner-list {
  margin: 0 -24px;
  padding: 29px 18px;
  background-color: #f4f6f8;
}
.menu-banner-list::after {
  content: "";
  display: block;
  clear: both;
}
.menu-banner-item {
  float: left;
  box-sizing: border-box;
  width: 50%;
  padding: 6px;
}
.menu-banner-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 73px;
  padding: 0 20px;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 3px 5px 0 rgba(217, 223, 235, 0.3);
  font-size: 1.5rem;
  line-height: 20px;
  text-align: right;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
}
.menu-banner-icon {
  -ms-flex: none;
  flex: none;
  width: 36px;
  height: 36px;
  margin-right: 6px;
  background: no-repeat 50% 50% / auto 100%;
  -webkit-box-flex: 0;
}
.menu-banner-icon.type-01 {
  background-image: url("../images/icon/ic-short-01.svg");
}
.menu-banner-icon.type-02 {
  background-image: url("../images/icon/ic-short-02.svg");
}
.menu-banner-icon.type-03 {
  background-image: url("../images/icon/ic-short-03.svg");
}
.menu-banner-icon.type-04 {
  background-image: url("../images/icon/ic-short-04.svg");
}
.menu-banner-icon.type-05 {
  background-image: url("../images/icon/ic-short-05.svg");
}
.menu-banner-icon.type-06 {
  background-image: url("../images/icon/ic-revolving-01.svg");
}
.menu-banner-icon.type-07 {
  background-image: url("../images/icon/ic-revolving-02.svg");
}
.menu-banner-icon.type-08 {
  background-image: url("../images/icon/ic-revolving-03.svg");
}
.menu-banner-icon.type-09 {
  background-image: url("../images/icon/ic-revolving-04.svg");
}
.menu-banner-icon.type-10 {
  background-image: url("../images/icon/ic-creditloan-01.svg");
}
.menu-banner-icon.type-11 {
  background-image: url("../images/icon/ic-creditloan-02.svg");
}
.menu-banner-icon.type-12 {
  background-image: url("../images/icon/ic-creditloan-03.svg");
}
.menu-banner-icon.type-13 {
  background-image: url("../images/icon/ic-creditloan-04.svg");
}
.menu-banner-icon.type-14 {
  background-image: url("../images/icon/ic-overseas-purchase.svg");
}
.menu-banner-icon.type-15 {
  background-image: url("../images/icon/ic-travel-card.svg");
}
.menu-banner-icon.type-16 {
  background-image: url("../images/icon/ic-travel.svg");
}
.menu-banner-icon.type-17 {
  background-image: url("../images/icon/ic-internet.svg");
}
.menu-banner-icon.type-18 {
  background-image: url("../images/icon/ic-goverment-tax.svg");
}
.menu-banner-icon.type-19 {
  background-image: url("../images/icon/ic-tax.svg");
}
.menu-banner-icon.type-20 {
  background-image: url("../images/icon/ic-rental.svg");
}
.menu-banner-icon.type-21 {
  background-image: url("../images/icon/ic-insurance.svg");
}
.menu-banner-icon.type-22 {
  background-image: url("../images/icon/ic-hanamoney-notice-01.svg");
}
.menu-banner-icon.type-23 {
  background-image: url("../images/icon/ic-coupon.svg");
}
.menu-banner-icon.type-24 {
  background-image: url("../images/icon/ic-hanamoney-notice-03.svg");
}
.menu-banner-icon.type-25 {
  background-image: url("../images/icon/ic-hanamoney-notice-04.svg");
}
.menu-banner-icon.type-26 {
  background-image: url("../images/icon/ic-hanamoney-notice-05.svg");
}
.menu-banner-icon.type-27 {
  background-image: url("../images/icon/ic-hanamoney-notice-06.svg");
}
.menu-banner-icon.type-28 {
  background-image: url("../images/icon/ic-hanamoney-notice-07.svg");
}
.menu-banner-icon.type-29 {
  background-image: url("../images/icon/ic-gift.svg");
}
.menu-banner-icon.type-30 {
  background-image: url("../images/icon/ic-card-02.svg");
}
.menu-banner-icon.type-31 {
  background-image: url("../images/icon/ic-hipass.svg");
}
/* 22.06.21 */
.menu-banner-icon.type-32 {
  background-image: url("../images/icon/ic-card-size36.svg");
}
/* 22.06.28 */
.menu-banner-icon.type-33 {
  background-image: url("../images/icon/ic-travel-3.svg");
}
/* 23.04.19 */
.menu-banner-icon.type-34 {
  background-image: url("../images/icon/ic-save-tax.svg");
}
/* 23.12.07 */
.menu-banner-icon.type-35 {
  background-image: url("../images/icon/ic-loan-search.svg");
}
/* 23.12.07 */
.menu-banner-icon.type-36 {
  background-image: url("../images/icon/ic-loan-submit.svg");
}
/* [2025-11-17 KEJ] 추가 */
.menu-banner-icon.type-37 {
  background-image: url("../images/icon/ic-hanamoney-point.svg");
}
.menu-banner-item.type-full {
  width: 100%;
}
.menu-banner-item.type-full .menu-banner-link {
  justify-content: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}

/* menu-banner-list type-border */
.menu-banner-list.type-border {
  background: none;
}
.menu-banner-list.type-border .menu-banner-link {
  justify-content: flex-start;
  border: 1px solid var(--gray-30);
  box-shadow: none;
  text-align: left;
}
.menu-banner-list.type-border .menu-banner-icon {
  margin-right: 20px;
}

/* list */
.form-item .info-area {
  margin-top: 15px;
}
.info-area-title {
  box-sizing: border-box;
  margin-top: 25px;
  color: var(--basic);
  font-size: 1.5rem;
  line-height: 20px;
}
.info-list {
  color: var(--gray-80);
  font-weight: 400; /* 폰트스타일 수정 */
  font-size: 1.4rem;
  line-height: 2rem;
}
.info-area-title + .info-list {
  padding-top: 25px;
}
.type-text-large .info-list {
  font-size: inherit;
  line-height: 18px;
}
.info-list .info-list:not(:first-child) {
  margin-top: 10px;
}
.info-list.type-inherit {
  color: inherit;
  line-height: inherit;
  /*font-size: inherit;*/ /* 폰트스타일 수정 */
  /*font-weight: inherit;*/ /* 폰트스타일 수정 */
}

.accordion-item .info-item {
  font-weight: 400;
  font-size: 1.4rem;
}

.info-list.type-inherit .info-item:not(.type-presa)::before {
  background-color: var(--basic);
}
.info-list.type-default {
  font-weight: 400; /* 폰트스타일 수정 */
  font-size: 1.4rem;
  line-height: 1.8rem;
}
.info-list.color-blur {
  color: var(--gray-70);
}
.info-list.color-blur .info-item::before,
.info-list.type-inherit.color-blur .info-item::before {
  background-color: var(--gray-70);
}
.info-list.type-outside .info-item:not(.type-side-no-padding) {
  /* padding-left: 7px; CHO */
}

.info-list.type-outside .info-item:not(.type-presa) {
  padding-left: 7px;
}
.info-list.type-outside .info-item::before {
  left: 0;
}
.info-list.type-inside {
  padding-left: 18px;
}
.info-list.type-box {
  padding: 20px;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
  color: var(--basic);
  font-size: 1.5rem;
  line-height: 20px;
}
.info-list.type-box .info-item::before {
  background-color: var(--basic);
}
.info-item {
  position: relative;
  padding-left: 13px;
  font-weight: 400;
  text-align: left;
}
.info-item + .info-item {
  margin-top: 10px;
}
.info-item::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 6px;
  width: 2px;
  height: 2px;
  background-color: var(--gray-70);
}
/* 2023.10.25 list symbol '※' 추가 */
.info-item.type-presa {
  padding-left: 1.3em;
}
.info-item.type-presa::before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  background-color: transparent;
}
.info-item.color-basic::before {
  background-color: var(--basic);
  color: var(--basic);
}
.info-item.color-wrong::before {
  background-color: var(--wrong);
  color: var(--wrong);
}
.info-item.color-primary::before {
  background-color: var(--primary);
  color: var(--primary);
}
.info-item.color-vip::before {
  background-color: var(--vip);
  color: var(--vip);
}
.info-item.type-no-padding {
  padding-left: 0;
}
.info-item.type-presa {
  padding-left: 16px;
}
/* 230704 수정 */ /* [2025-06-11 kho] type-asterisk 추가 */
.info-item.type-presa::before,
.info-item.type-hyphen::before,
.info-item.type-asterisk::before {
  top: 0;
  width: auto;
  height: auto;
  background-color: transparent !important;
}
.info-item.type-presa::before {
  content: "※";
  left: 0;
}
.info-item.type-hyphen::before {
  content: "-";
  left: 3px;
}
.info-item.type-asterisk::before {
  content: "*";
  left: 3px;
}

.info-item.type-check {
  padding-left: 20px;
}
.info-item.type-check::before {
  content: "";
  top: 3px;
  left: 0;
  width: 18px;
  height: 18px;
  background: url("../images/common/ic-checkbox-c.svg") no-repeat;
}

.info-item.type-indent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-left: 0;
}
.info-item.type-indent::before {
  display: none;
}
.info-item.type-indent-block {
  padding-left: 0;
}
.info-item.type-indent-block::before {
  display: none;
}
.info-item.type-indent-block .info-indent-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.info-item.type-indent .indent,
.info-item.type-indent-block .indent {
  margin-right: 5px;
}
.info-item.type-indent .ui-arrow,
.info-item.type-indent-block .ui-arrow {
  margin-top: 10px;
}
.info-item.type-indent .ui-arrow::after,
.info-item.type-indent-block .ui-arrow::after {
  width: 10px;
}
.info-item .indent-block + .indent-block {
  margin-top: 10px;
}
.info-item.type-none-symbol {
  padding-left: 6px;
}
.info-item.type-none-symbol::before {
  display: none;
}
.info-area-section:not(:first-child) {
  margin-top: 25px;
}
.info-list-title {
  margin-bottom: 10px;
  color: var(--basic);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2rem;
}
.info-list.type-line {
  box-sizing: border-box;
  margin-top: 35px;
  padding-top: 35px;
  border-top: 1px solid var(--gray-30);
}
.info-list.type-text-large {
  color: var(--basic);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 2rem;
}
.info-list.type-text-large:first-child {
  margin-top: -5px;
}
.info-list.type-text-large .info-item:not(:first-child) {
  margin-top: 15px;
}
.info-list.type-text-large .info-item .indent {
  margin-right: 12px;
}
.info-list.type-text-large.type-indent-number .info-item .indent {
  margin-right: 8px;
}
.info-list.type-default .info-item .indent {
  margin-right: 5px;
}
.info-list.type-text-large .ui-label-text,
.ui-radio-group-area.type-text-large .ui-label-text {
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 20px;
}
.info-list.type-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.info-list.type-flex .info-item {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.info-list.type-flex .info-item + .info-item {
  margin-top: 0;
}
.info-list.type-medium-margin .info-item + .info-item {
  margin-top: 25px;
}

/* info-list type-color-basic */
.info-list.type-color-basic {
  color: var(--basic);
}
.info-list.type-color-basic > .info-item::before {
  background-color: var(--basic);
  color: var(--basic);
}

.has-numbering {
  position: relative;
  margin-top: 15px;
  padding-left: 30px;
  line-height: 22px;
}
.has-numbering:first-child {
  margin-top: 0;
}
.has-numbering.type-sub {
  padding-left: 26px;
}
.ui-numbering {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background-color: var(--basic);
  color: #fff;
  font-weight: 500;
  font-size: 1.3rem;
  text-align: center;
}
.has-numbering.type-sub {
  margin-top: 10px;
  font-size: 1.3rem;
  line-height: 18px;
}
.has-numbering.type-sub:first-child {
  margin-top: 15px;
}
.has-numbering.type-sub:last-child {
  margin-bottom: 25px;
}
.has-numbering:last-child .has-numbering.type-sub:last-child {
  margin-bottom: 0;
}
.has-numbering.type-sub .ui-numbering {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background-color: var(--gray-30);
  color: var(--basic);
  font-size: 1.1rem;
}

.info-list.type-line {
  box-sizing: border-box;
  margin-top: 35px;
  padding-top: 35px;
  border-top: 1px solid var(--gray-30);
}
.info-list.type-text-large {
  color: var(--basic);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 20px;
}
.info-list.type-text-large:first-child {
  margin-top: -5px;
}
.info-list.type-text-large .info-item:not(:first-child) {
  margin-top: 15px;
}
.info-list.type-text-large .info-item .indent {
  margin-right: 12px;
}
.info-list.type-text-large.type-indent-number .info-item .indent {
  margin-right: 8px;
}
.info-list.type-default .info-item .indent {
  margin-right: 5px;
}
.info-list.type-text-large .ui-label-text,
.ui-radio-group-area.type-text-large .ui-label-text {
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 20px;
}
/* 220713 스타일 추가 */
.info-list .info-item .info-item-sub {
  margin: 10px 0;
}
.info-list .info-item .info-item-sub li {
  position: relative;
  margin-top: 10px;
  padding-left: 10px;
}
.info-list .info-item .info-item-sub li:before {
  content: "(new)";
  position: absolute;
  top: 8px;
  left: 0px;
  overflow: hidden;
  width: 2px;
  height: 2px;
  border-radius: 100%;
  background: #666;
  color: transparent;
  font-size: 1px;
}
/* //220713 스타일 추가 */
/* list-link */
.link-item:first-child {
  border-top: 1px solid var(--gray-30);
}
.link-item {
  border-bottom: 1px solid var(--gray-30);
}
.link-item .item-block {
  padding-top: 25px;
  padding-bottom: 25px;
}
.link-item .item-title {
  font-size: 1.5rem;
  line-height: 21px;
}
.link-item .item-title.is-new {
  position: relative;
  display: inline-block;
}
.link-item .item-title.is-new:after {
  content: "(new)";
  position: relative;
  display: inline-block;
  vertical-align: super;
  top: -3px;
  right: auto;
  overflow: hidden;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background: #ff4775;
  color: transparent;
  font-size: 1px;
}
.link-item .item-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  margin-top: 12px;
  color: var(--gray-70);
  line-height: 18px;
  -webkit-box-align: center;
  -ms-flex-align: center;
}

/* info-area type-line-box */
.info-area.type-line-box {
  box-sizing: border-box;
  margin-top: 0;
  padding: 20px 15px;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
}
.form-item .info-area.type-line-box:not(:first-child) {
  margin-top: 25px;
}
.info-area.type-line-box .info-area-title {
  display: block;
  margin: 10px 5px;
}
.info-area.type-line-box .info-area-title:first-child {
  margin-top: 0;
}
.info-area.type-line-box .info-area-title + .info-list {
  padding-top: 0;
}

/* info-item type-large */
.info-item.type-large {
  font-size: 1.5rem;
  line-height: 20px;
}
.info-list .info-item.type-large .indent {
  margin-right: 12px;
}

/* info-item type-medium */
.info-item.type-medium {
  font-size: 1.3rem;
  line-height: 18px;
}
.info-list .info-item.type-medium .indent {
  margin-right: 5px;
}

/* info-item type-small */
.info-item.type-small {
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.7rem;
}

/* info-item type-flex-box */
.info-item.type-flex-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.info-item.type-flex-box .info-left {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  margin-right: 5px;
  -webkit-box-flex: 0;
}

/* info-list type-child */
.info-list.type-child .info-item {
  padding-left: 3px;
}
.info-list.type-child > .info-item.type-presa {
  padding-left: 16px;
}
.info-list.type-child > .info-item.type-presa::before {
  left: 1px;
}
/*.info-list.type-child .info-item::before {
left: 3px;
}
.info-list.type-child .info-item.type-presa {
padding-left: 19px;
}
.info-list.type-child .info-item.type-hyphen {
padding-left: 13px;
}*/

/* [2025-06-25] type-big */
.info-item.type-big {
  font-size: 1.7rem;
  line-height: 2.4rem;
}
.info-item.type-big::before {
  top: 10px;
  left: 3px;
  width: 4px;
  height: 4px;
}

/* link-item type-no-line */
.link-item.type-no-line {
  border: none;
}

/* link-item type-none type-flex */
.link-item.type-none.type-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  min-height: 250px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.link-item.type-none.type-flex::after {
  display: none;
}
.link-item.type-none.type-flex .item-text {
  display: block;
}
.link-item.type-none.type-flex.type-height-auto {
  min-height: auto;
  padding: 0;
}
.link-item.type-none.type-line {
  border-top: 1px solid var(--gray-30);
}

/* detail */
.detail-area.type-line {
  margin-top: 35px;
  padding-top: 35px;
  border-top: 1px solid var(--gray-30);
}
/* 2022.11.22 */
.detail-area.type-tooltip {
  position: relative;
}
.detail-title {
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 30px;
}
.detail-title .category {
  display: block;
}
.detail-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  margin-top: 12px;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 18px;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.detail-contents {
  margin-top: 35px;
  padding-top: 35px;
  border-top: 1px solid var(--gray-30);
  font-size: 1.6rem;
  line-height: 21px;
}
.detail-button {
  margin-top: 35px;
  color: var(--gray-70);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 18px;
}
.detail-button::after {
  width: 12px;
}

/* completion icon */
.has-com-icon::after {
  margin-top: 35px;
}
.has-com-icon::after {
  content: "";
  display: block;
  height: 90px;
  background: no-repeat 100% 0 / auto 100%;
}
.type-icon-email::after {
  background-image: url("../images/illustration/ic-com-email.svg");
}
.type-icon-suggest::after {
  background-image: url("../images/illustration/ic-com-suggest.svg");
}
.type-icon-card-service::after {
  background-image: url("../images/illustration/ic-card-service.svg");
}
.type-icon-auth::after {
  background-image: url("../images/illustration/ic-com-lockopen.svg");
}
.type-icon-error::after {
  background-image: url("../images/illustration/ic-com-error.svg");
}
.type-icon-error-access::after {
  background-image: url("../images/illustration/ic-com-error-access.svg");
}
.type-icon-fail::after {
  background-image: url("../images/illustration/ic-com-fail.svg");
}
.type-icon-id::after {
  background-image: url("../images/illustration/ic-com-id.svg");
}
.type-icon-id-fail::after {
  background-image: url("../images/illustration/ic-com-id-fail.svg");
}
.type-icon-member-fail::after {
  background-image: url("../images/illustration/ic-com-member-fail.svg");
}
.type-icon-signing::after {
  background-image: url("../images/illustration/ic-com-signing.svg");
}
.type-icon-voucher::after {
  background-image: url("../images/illustration/ic-com-gorvermentvoucher.svg");
}
.type-icon-voucher-register::after {
  background-image: url("../images/illustration/ic-com-voucher-register.svg");
}
.type-icon-pay::after {
  background-image: url("../images/illustration/ic-com-pay.svg");
}
.type-icon-pay-fail::after {
  background-image: url("../images/illustration/ic-com-pay-fail.svg");
}
.type-icon-abroad::after {
  background-image: url("../images/illustration/ic-com-abroad.svg");
}
.type-icon-abroad-02::after {
  background-image: url("../images/illustration/ic-com-abroad-02.svg");
}
.type-icon-camera-fail::after {
  background-image: url("../images/illustration/ic-com-camera-fail.svg");
}
.type-icon-alarm::after {
  background-image: url("../images/illustration/ic-com-alarmservice.svg");
}
.type-icon-alarm-fail::after {
  background-image: url("../images/illustration/ic-com-alarmservice-fail.svg");
}
.type-icon-talk::after {
  background-image: url("../images/illustration/ic-com-talk.svg");
}
.type-icon-deposit::after {
  background-image: url("../images/illustration/ic-com-deposit.svg");
}
.type-icon-deposit-cancel::after {
  background-image: url("../images/illustration/ic-com-deposit-cancel.svg");
}
.type-icon-send-money::after {
  background-image: url("../images/illustration/ic-com-send-money.svg");
}
.type-icon-pay-making::after {
  background-image: url("../images/illustration/ic-pay-making.svg");
}
.type-icon-congratulation::after {
  background-image: url("../images/illustration/ic-congratulation-com.svg");
}
.type-icon-glab::after {
  background-image: url("../images/illustration/img-logo-glab.png");
}
.type-icon-tmoney::after {
  background-image: url("../images/illustration/img-info-tmoney.png");
}
/* 220916 */
.type-icon-support::after {
  background-image: url("../images/illustration/img-info-support.svg");
}
.type-icon-zeropayqr1::after {
  background-image: url("../images/illustration/ic-zero-error-1.png");
}
.type-icon-zeropayqr2::after {
  background-image: url("../images/illustration/ic-zero-error-2.png");
}
.type-icon-zeropayqr3::after {
  background-image: url("../images/illustration/ic-zero-error-3.png");
}
.type-icon-zeropayqr4::after {
  background-image: url("../images/illustration/ic-zero-error-4.png");
}
.type-icon-zeropayqr5::after {
  background-image: url("../images/illustration/ic-zero-error-5.png");
}
.type-icon-long-card-loans::after {
  background-image: url("../images/illustration/ic-com-long-card-loans.png");
}
/* 240412 */
.type-icon-statement::after {
  background-image: url("../images/illustration/ic-com-statement.svg");
}

/* img */
.img-area {
  position: relative;
  margin: 0 auto;
}
.img-area .img {
  display: block;
  width: 100%;
}
/* type size */
.img-area.type-150 {
  max-width: 150px;
}
.img-area.type-240 {
  max-width: 240px;
}
.img-area.type-260 {
  max-width: 260px;
}
.img-area.type-276 {
  max-width: 276px;
}
/* 220615 */
.img-area.type-h120 {
  overflow: hidden;
  height: 120px;
}
/* type-register-id */
.img-area.type-register-id {
  overflow: hidden;
  box-sizing: border-box;
  width: 160px;
  height: 190px;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
}
.img-area.type-register-id.is-empty {
  border: none;
  background: url("../images/illustration/img-picture-faceonly.png") no-repeat 50% 50% / auto 100%;
}
.img-area.type-register-id .img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* type-register-document */
.img-area.type-register-document {
  overflow: hidden;
  box-sizing: border-box;
  width: 160px;
  height: 231px;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
}
.img-area.type-register-document.is-empty {
  border: none;
  background: url("../images/illustration/img-picture-documentsonly.png") no-repeat 50% 50% / auto 100%;
}
.img-area.type-register-document .img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  max-height: 100%;
  transform: translate(-50%, -50%);
}

/* gray-box */
.gray-box {
  box-sizing: border-box;
  margin-top: 35px;
  padding: 14px;
  background: var(--gray-20);
  font-size: 1.5rem;
  line-height: 22px;
  text-align: center;
}
.gray-box.type-union {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  padding: 9.5px 25px;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.type-union .img {
  height: 56px;
}
.gray-item + .gray-item {
  margin-left: 14px;
}

/* use notice */
.use-notice-area {
  margin-top: 30px;
}
.use-notice-area:first-child {
  margin-top: 0;
}
.use-notice-title,
.use-notice-opener {
  width: 100%;
  padding: 4px 0 4px 23px;
  background: url("../images/icon/ic-notice-dark.svg") no-repeat 0 5px;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2rem;
}
.use-notice-opener.js-ui-accordion__opener::after {
  position: static;
  top: auto;
  right: auto;
  vertical-align: top;
  height: 2rem;
  margin-top: 0;
  margin-left: 6px;
}
.use-notice-title.type-paragraph {
  padding-top: 5px;
  line-height: 18px;
}
.use-notice-contents {
  color: var(--gray-70);
  font-weight: 300;
  font-size: 1.6rem; /* 폰트스타일 수정 */
  line-height: 2rem;
}
.use-notice-contents::before {
  content: "";
  display: block;
  height: 7px;
}
.use-notice-area > .use-notice-contents:first-child::before {
  display: none;
}
.use-notice-paragraph:not(:last-child) {
  margin-bottom: 10px;
}
.use-notice-contents .info-item.type-presa {
  padding-left: 22px;
}
.use-notice-contents .info-item.type-presa::before {
  left: 4px;
}
.use-notice-contents strong {
  font-weight: 400;
}
.use-notice-contents .sub-title {
  margin-top: 10px;
  color: var(--basic);
  font-weight: 400;
}
.use-notice-contents .tel-info {
  margin-top: 10px;
  padding: 0 6px;
}
.use-notice-section + .use-notice-section {
  margin-top: 10px;
}
.use-notice-section.type-line {
  padding: 12px 15px;
  border-top: 1px solid var(--gray-30);
  border-bottom: 1px solid var(--gray-30);
}
.use-notice-section.type-line + .use-notice-section.type-line {
  margin-top: 0;
  border-top: none;
}
.use-notice-text + .use-notice-section {
  margin-top: 25px;
}
.use-notice-section .section-title {
  position: relative;
  display: block;
  margin-bottom: 11px;
  color: var(--basic);
}
.use-notice-section .section-title.type-presa {
  padding-left: 16px;
}
.use-notice-section .section-title.type-presa::before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}

#tabpanel-credit-card-gC71zsb5fw .use-notice-group .group-title {
  margin: 20px 0 5px 0;
}
#tabpanel-debit-card-yMJvh2e3eG .use-notice-group .group-title {
  margin: 20px 0 5px 0;
}
.accordion-list .use-notice-group .group-title {
  margin: 20px 0 5px 0;
}

.use-notice-group:not(:first-child) {
  margin-top: 10px;
}
.use-notice-group .group-title {
  margin: 20px 0; /* 폰트스타일 수정 */
  color: var(--basic);
  font-weight: 500;
}
.use-notice-group .group-title:first-child {
  margin-top: 20px; /* 폰트스타일 수정 */
}
.use-notice-group .group-title.font-weight-light {
  font-weight: 300;
}
.use-notice-group .group-title.type-indent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.use-notice-group .group-title.type-indent:not(:first-child) {
  margin-top: 25px;
}
.use-notice-group .group-title.type-indent .indent {
  padding-right: 3px;
}
.use-notice-group.type-text-large {
  margin-top: -5px;
}
.use-notice-group.type-text-large .group-title {
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 18px;
}
.use-notice-group.type-light {
  font-weight: 300;
}
.use-notice-group.type-light .group-title {
  font-weight: inherit;
}
.use-notice-group.type-bold .group-title {
  font-weight: 700;
}
.use-notice-group + .use-notice-group {
  margin-top: 25px;
}
.use-notice-group .group-contents-title {
  margin: 10px 0;
  font-weight: 400;
}
.use-notice-group .group-contents-inner {
  padding-left: 7px;
}
.use-notice-group.type-big .group-title {
  margin: 30px 0 10px;
  font-weight: 700;
  font-size: 1.7rem;
}
.use-notice-group.type-big .group-title:first-child {
  margin-top: 0;
}
.use-notice-group.type-big .group-contents {
  font-weight: 400;
  font-size: 1.5rem;
}
.use-notice-link-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  margin-top: 10px;
  font-weight: 400;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.use-notice-contents > .use-notice-link-list {
  padding: 0 6px;
}
.use-notice-link-item {
  padding-right: 10px;
  background: url("../images/common/ic-button-arrow-s.svg") no-repeat 100% 50% / auto 8px;
}
.use-notice-link-item + .use-notice-link-item {
  margin-left: 10px;
}
/* use-notice-area type-inner */
.use-notice-area.type-inner .use-notice-paragraph,
.use-notice-area.type-inner .group-title {
  color: #000;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 20px;
}
.use-notice-area.type-inner .use-notice-paragraph:not(:last-child) {
  margin-bottom: 35px;
}
.use-notice-area.type-inner .group-title {
  font-weight: 500;
}
.use-notice-area.type-inner .group-title:not(:first-child) {
  margin-top: 25px;
}
.use-notice-area.type-inner .group-title .indent {
  padding-right: 8px;
}
.use-notice-area.type-inner .img-area {
  margin: 0 6px;
}
.use-notice-area.type-inner .img-area:not(:last-child) {
  margin-bottom: 35px;
}
.use-notice-area.type-inner .info-list {
  font-size: 1.3rem;
  line-height: 18px;
}
.info-list-group + .info-list-group {
  margin-top: 10px;
}
.use-notice-law {
  padding: 2rem 2.4rem 3.4rem;
  color: #666;
  font-size: 1.3rem;
  line-height: 1.8rem;
}

/* support notice */
.support-notice-area {
  margin-top: 35px;
  font-size: 1.3rem;
}
.support-notice-title {
  margin-bottom: 10px;
  padding-left: 23px;
  background: url("../images/icon/ic-notice-dark.svg") no-repeat 0 0;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 2rem;
}
.support-notice-title.title-center {
  /* 2023. 06. 16 추가 .mj */
  display: table;
  margin: 0 auto 10px;
}
.support-notice-contents .info-list {
  margin-left: 18px;
}
.support-notice-contents .info-item .text-underline {
  font-weight: 400;
}

/* search */
.search-word-area {
  margin-bottom: 35px;
}

/* sorting */
.sorting-area {
  margin: 10px -24px;
}
.sorting-inner {
  position: relative;
  padding-right: 48px;
}
.sorting-inner::before {
  content: "";
  position: absolute;
  top: 0;
  right: 48px;
  z-index: 10;
  display: block;
  width: 24px;
  height: 100%;
  background: -moz-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 5%,
    rgba(255, 255, 255, 1) 95%,
    rgba(255, 255, 255, 1) 100%
  );
  background: -webkit-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 5%,
    rgba(255, 255, 255, 1) 95%,
    rgba(255, 255, 255, 1) 100%
  );
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 5%,
    rgba(255, 255, 255, 1) 95%,
    rgba(255, 255, 255, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
}
.sorting-opener {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 48px;
  height: 100%;
}
.sorting-opener::before {
  content: "";
  position: absolute;
  top: 29px;
  left: 12px;
  display: block;
  width: 13px;
  height: 12px;
  background: url("../images/icon/btn-tab-open.svg") no-repeat 50% 50%;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}
.sorting-opener::after {
  display: none;
}
.sorting-layer {
  display: block;
  height: 70px;
}
.sorting-contents:not(.is-init) {
  opacity: 0;
}
.sorting-contents {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
  -ms-overflow-style: none; /* IE and Edge */
  crollbar-width: none; /* Firefox */
}
.sorting-contents::before {
  content: "";
  display: table;
}
.sorting-contents::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera*/
  width: 0; /* Remove scrollbar space */
  height: 0;
  background: transparent; /* Optional: just make scrollbar invisible */
  -webkit-appearance: none;
}
.sorting-list,
.sorting-item {
  display: inline-block;
  vertical-align: top;
}
.sorting-list {
  margin: -4px 0 0 -4px;
  padding: 20px 24px;
}
.sorting-item {
  padding: 4px 0 0 4px;
}
.sorting-inner.js-accordion-opened::before {
  display: none;
}
.sorting-inner.js-accordion-opened .sorting-opener::before {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.sorting-inner.js-accordion-opened .sorting-contents {
  white-space: normal;
}
.sorting-inner.js-accordion-opened .sorting-list {
  display: block;
  padding-right: 0;
}
.sorting-count {
  color: var(--gray-60);
}

/* sorting-area type-none-accordion */
.sorting-area.type-none-accordion .sorting-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-right: 0;
}
.sorting-area.type-none-accordion .sorting-layer {
  -ms-flex: 1;
  flex: 1;
  order: 0;
  min-width: 0;
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  -webkit-box-flex: 1;
}
.sorting-area.type-none-accordion .sorting-inner::before {
  position: relative;
  top: auto;
  right: auto;
  order: 1;
  height: auto;
  margin-left: -24px;
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
}
.sorting-area.type-none-accordion .sorting-right {
  order: 2;
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
}
.sorting-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: none;
  flex: none;
  align-items: center;
  padding: 0 24px 0 5px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-flex: 0;
}
.sorting-right-cell + .sorting-right-cell {
  margin-left: 10px;
}

/* sorting-area type-top */
.sorting-area.type-top {
  margin-top: -20px;
}

/* sorting-area type-wrap */
.sorting-area.type-wrap .sorting-contents {
  overflow: visible;
  -webkit-overflow-scrolling: auto;
  white-space: normal;
}

/* 22.12.15 sorting-area--fixed */
.sorting-area--fixed.is-fixed {
  position: sticky;
  top: 50px;
  left: 0;
  z-index: 1000;
  height: 70px;
  background: #fff;
}
.sorting-area--fixed.is-fixed .sorting-area {
  margin: 0;
}
.sorting-area--fixed.is-fixed .sorting-inner {
  background: #fff;
}

/* table */
.info-table {
  margin-top: 15px;
  font-size: 1.4rem; /* 폰트스타일 수정 */
  line-height: 18px;
  text-align: left;
}
.form-detail-head + .info-table-area {
  margin-top: -10px;
}
.section-title + .section-contents .info-table-area:first-child {
  margin-top: 15px;
}
.info-table-area:first-child .info-table {
  margin-top: 0;
}
.info-table-area > .info-list:not(:first-child) {
  margin-top: 15px;
}
.info-table-title {
  margin-bottom: 15px;
  font-size: 1.5rem;
  line-height: 22px;
}
.info-table thead th {
  padding: 16px 10px;
  background-color: var(--gray-20);
  color: var(--gray-70);
  font-weight: 400; /* 폰트스타일 수정 */
  text-align: center;
}
.info-table thead th.align-left,
.info-table thead th.align-right {
  padding-right: 14px;
  padding-left: 15px;
}
.info-table tbody th,
.info-table tbody td,
.info-table tfoot td {
  height: 18px;
  padding: 12px 15px;
  border-right: 1px solid var(--gray-30);
  border-bottom: 1px solid var(--gray-30);
}
.info-table tbody th + td {
  border-left: 1px solid var(--gray-30);
}
.info-table tbody td {
  font-weight: 400;
}
.info-table tbody tr:first-child th,
.info-table tbody tr:first-child td {
  border-top: 1px solid var(--gray-30);
}
.info-table thead ~ tbody tr:first-child th,
.info-table thead ~ tbody tr:first-child td {
  border-top: none;
}
.info-table tbody th:last-child,
.info-table tbody td:last-child,
.info-table tfoot td:last-child {
  border-right: none;
}
.info-table tfoot th {
  height: 18px;
  padding: 12px 15px;
  border-right: 1px solid var(--gray-30);
  border-bottom: 1px solid var(--gray-30);
  background: var(--gray-20);
  font-weight: 400;
}
.info-table tfoot td {
  background: var(--gray-20);
  color: var(--primary);
  font-weight: 400;
  text-align: right;
}
.info-table .type-side-no-padding {
  padding-right: 0;
  padding-left: 0;
}
.info-table .info-list.type-inherit > .info-item {
  padding-left: 7px;
}
.info-table .info-list.type-inherit > .info-item::before {
  left: 0;
}
.info-table .info-list.type-inherit > .info-item.type-indent {
  padding-left: 0;
}
.info-table-area + .info-table-area {
  margin-top: 25px;
}
.info-table-area.type-scroll-x {
  overflow-x: auto;
  white-space: nowrap;
}
/* .info-table-area.type-scroll-x::-webkit-scrollbar {
  display: none;
} */
.info-table-area.type-scroll-x .info-table {
  margin-top: 0;
  table-layout: auto;
}

/* [WPM-13018] CC_income_p004.html */
.info-table-area .info-table.type-fixed {
  table-layout: fixed;
}
.info-table-area .info-table.type-fixed th, 
.info-table-area .info-table.type-fixed td {
  padding: 13px 8px;
  font-size: 13px;
}
.info-table-area .info-table.type-fixed thead th {
  border: 1px solid var(--gray-30);
}
.info-table-area .info-table.type-fixed thead th:first-child {
  border-left: 0;
}
.info-table-area .info-table.type-fixed thead th:last-child {
  border-right: 0;
}
.info-table-area .info-table.type-fixed tfoot td {
  color: var(--basic);
}
.info-table-area .info-table.type-fixed tbody .th {
  background-color: var(--gray-20);
  color: var(--gray-70);
  font-weight: 400;
}

.info-table > thead > tr > .info-table-vertical-line,
.info-table > tbody > tr > .info-table-vertical-line {
  border-right: 1px solid var(--gray-30);
}
.info-table-heading-width {
  width: 78px;
}
.info-table > tbody > tr.type-total > td {
  background-color: var(--gray-20);
}
.info-table > tbody > tr.type-no-vertical-line > td {
  border-right-width: 0;
}
.info-table > thead > tr > .info-table-top-line,
.info-table > tbody > tr > .info-table-top-line {
  border-top: 1px solid var(--gray-30);
}
.info-table > thead > tr > .info-table-left-line,
.info-table > tbody > tr > .info-table-left-line {
  border-left: 1px solid var(--gray-30);
}

/* info-table type-thead-line */
.info-table.type-thead-line > thead > tr > th {
  border-bottom: 1px solid var(--gray-30);
}

/* info-table type-tbody-heading */
.info-table.type-tbody-heading > tbody > tr > th {
  background-color: var(--gray-20);
  color: var(--gray-70);
  font-weight: 500;
  text-align: center;
}

/* info-table type-big */
.info-table.type-big thead th {
  padding: 40px 10px;
  border-left: 1px solid var(--gray-30);
  font-size: 1.5rem;
}
.info-table.type-big thead th:first-child {
  border-left: 0;
}
.info-table.type-big tbody td {
  padding: 22px 10px;
  font-size: 1.5rem;
}

.info-table.type-medium {
  font-size: 1.3rem;
}
.info-table.type-medium thead th {
  padding: 17px;
  font-weight: 300;
}
.info-table.type-medium tbody td {
  padding: 16px 14px;
}

/* [2024-07-23 : shj] info-table type-small */
.info-table.type-small tbody td {
  padding: 12px 3px;
  font-size: 1.2rem;
  text-align: center;
}

/* card */
.card-list-area:not(:first-child) {
  margin-top: 35px;
}
.card-list-area.type-default,
.card-list-area.type-default .card-item:not(:first-child) {
  margin-top: 25px;
}
.card-list {
  display: block;
}
.card-list .card-item {
  position: relative;
  display: block;
}
.card-list .card-item:not(:first-child) {
  margin-top: 35px;
}
.card-list .ui-checkbox-block .ui-label .ui-label-all {
  font-size: 1.7rem;
}
.card-list.type-has-btn .card-item:not(:first-child) {
  margin-top: 25px;
}
.card-list .card-item.type-none::after {
  min-height: 60px;
}
.card-list .card-item.js-ui-accordion__item:not(:first-child) {
  margin-top: 25px;
}
.card-list .card-item.js-ui-accordion__item .ui-checkbox-block {
  padding-right: 35px;
}
.card-list .card-item .ui-checkbox-block .ui-label {
  display: block;
}
.card-list .card-item .ui-radio-block .ui-label { /* [2026-04-02 kho] [WPM-238179765] 추가 */
  display: block;
}
.card-list .card-layer-opener {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 35px;
}
.ui-checkbox-block.type-large + .card-layer-contents {
  padding-left: 32px;
}
.card-layer-contents::before {
  content: "";
  display: block;
  height: 15px;
}
/* card-list - type-line */
.card-list .type-line .card-block {
  padding: 20px 48px 20px 15px;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
}
.card-list .type-line .ui-arrow-block::after {
  right: 15px;
}
.card-list .type-line .card-image {
  margin-top: 0;
}
.card-list .type-line .card-name {
  margin-bottom: 0;
}
.card-list .type-line .card-number {
  margin-top: 2px;
}
/* card-list -type-narrow */
.card-list .type-narrow .card-block {
  align-items: center;
  padding: 12px 48px 12px 15px;
  -webkit-box-align: center;
  -ms-flex-align: center;
}

.card-list .card-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: left; /* 231130_추가 : 이화정 */
}
.card-list .card-block.type-align-middle {
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.card-list .card-block .ui-radio-object,
.card-list .card-block .ui-checkbox-object {
  align-self: center;
  margin-right: 4px;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
}
.card-list .type-circle .card-block .ui-radio-object,
.card-list .type-large .card-block .ui-checkbox-object {
  margin-right: 10px;
}
.card-list .card-image {
  width: 40px;
  margin: 9px 20px 0 0;
}
.card-list .ui-label .card-image {
  align-self: center;
  margin-top: 0;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
}
.card-list .logo-image {
  margin: 4px 10px 0 0;
}
.card-list .card-button-add {
  display: block;
  margin: 10px auto 0;
  padding-right: 12px;
  background: url("../images/icon/btn-more-b.svg") no-repeat 100% 50%;
}
.card-list .card-button-add.is-active {
  background-image: url("../images/icon/btn-more-1-b.svg");
}
.card-list .card-info {
  display: block;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.card-list .card-info-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
  flex: 1;
  align-items: center;
  min-width: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-flex: 1;
}
.card-list .card-info-group.type-has-opener {
  position: relative;
  z-index: 0;
  padding-right: 35px;
}
.card-list .card-info-group.type-align-stretch {
  align-items: stretch;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
}
.card-list .card-info-group .ui-basic-button {
  width: auto;
  margin-left: 15px;
}
.card-list .card-info-group .card-info .type-half {
  justify-content: flex-end;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
}
.card-list .card-info-group .card-info .type-half .ui-buttons-item {
  flex: initial;
  box-sizing: border-box;
  width: 50%;
  padding-left: 4px;
}
.card-list .card-info-group .card-info .ui-basic-button {
  width: 100%;
  margin-left: 0;
}
.card-list .card-name {
  display: block;
  overflow: hidden;
  margin-bottom: 2px;
  font-size: 1.7rem;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#openBnkLstPop .ui-select-list.type-box-kind {
  margin-top: 20px;
}
#openBnkLstPop .card-list .card-name {
  overflow: hidden !important;
  padding-left: 0 !important;
} /* 230829 즉시결제 계좌목록 레이아웃 깨짐 수정 */
.card-list .card-name.type-gray {
  color: var(--gray-70);
}
.card-list .card-name:last-child {
  margin-bottom: 0;
}
.card-list .card-name.type-no-ellipsis {
  overflow: auto;
  text-overflow: initial;
  white-space: inherit;
}
.card-list .card-name.basic-text {
  font-size: 1.5rem;
  line-height: 22px;
}
.card-list .card-number {
  position: relative;
  display: block;
  color: var(--gray-70);
  font-weight: 400; /* 폰트스타일 수정 */
  font-size: 1.2rem;
  line-height: 17px;
}
.card-list .card-number.font-weight-regular {
  font-weight: 400;
}
.card-list .card-number:after {
  content: "";
  display: block;
  clear: both;
}
.card-list .card-number-item {
  position: relative;
  float: left;
}
.card-list .card-number-item:not(:last-of-type) {
  margin-right: 7px;
  padding-right: 8px;
}
.card-list .card-number-item:not(:last-of-type)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 1px;
  height: 9px;
  margin-top: -5px;
  background-color: var(--gray-60);
}
.card-list .card-number-item .ui-button-copy {
  margin-top: -1px;
  margin-left: 2px;
}
.card-list .card-status {
  margin-top: 10px;
  line-height: 18px;
}
.card-list .card-item > .ui-basic-button,
.card-list .card-item > .ui-buttons {
  margin-top: 15px;
}
.card-list .card-price {
  margin-top: 2px;
  font-weight: 500;
  font-size: 1.9rem; /* 폰트스타일 수정 */
  line-height: 24px;
}
.card-badges.type-card-info,
.card-list .card-badges {
  display: block;
  font-size: 0;
  line-height: 0;
}
.card-list .card-badges {
  margin-top: 8px;
}
.card-badges.type-card-info .ui-badge,
.card-list .card-badges .ui-badge {
  min-width: auto;
  font-size: 1.1rem;
  line-height: 23px;
}
.card-badges.type-card-info .ui-badge + .ui-badge,
.card-list .card-badges .ui-badge + .ui-badge {
  margin-left: 5px;
}
.card-list .card-link-etc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  width: 76px;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.card-list .card-link-etc .card-link-etc-btn {
  margin-left: auto;
}
.card-list .card-item .card-item-btn {
  margin-left: 14px;
}

.card-add-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.card-add-block .logo-image {
  margin: 0;
}
.card-add-text {
  margin-left: 10px;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 19px;
}

.card-list.type-line2 li.card-item {
  padding: 20px 15px 20px 15px;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
}
.card-list.type-line2 li.card-item.type-none {
  padding: 25px 0;
  border: none;
}
.card-list.type-line2 li.card-item:not(:first-child) {
  margin-top: 15px;
}
.card-list.type-line2 li.card-item .ui-arrow-block::after {
  top: 20px;
}

/* simple ver */
.card-info-simple .card-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.card-info-simple .card-image + .card-info {
  margin-top: 35px;
}
.card-info-simple .card-info .card-txt {
  margin-top: 5px;
}
.card-info-simple .card-info .card-nm {
  font-weight: 500;
  font-size: 2.1rem;
}

/* card-info-group type-arrow-link */
.card-list .card-info-group.type-arrow-link {
  position: relative;
}
.card-list .card-info-group.type-arrow-link .ui-arrow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: block;
  width: 100%;
  height: 100%;
}
.card-list .card-info-group.type-arrow-link .ui-button {
  position: relative;
  z-index: 20;
}

/* card list - type flex center */
.card-list .card-block.type-flex-center {
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.card-list .card-block.type-flex-center .card-image,
.card-list .card-block.type-flex-center .logo-image {
  margin-top: 0;
}

/* card-block type-flexible */
.card-list .card-block.type-flexible {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}

/* card-list type-box */
.card-list.type-box {
  padding: 0 15px;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
}
.card-list.type-box .card-item {
  padding: 15px 0;
}
.card-list.type-box .card-item + .card-item {
  margin-top: 0;
  border-top: 1px solid var(--gray-30);
}
/* card-list type-inner-box */
.card-list.type-inner-box .card-item {
  padding: 15px;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
}
.card-list.type-inner-box .card-item:not(:first-child) {
  margin-top: 10px;
}
.card-list.type-inner-box .ui-arrow.type-small {
  color: var(--gray-70);
}

.card-list.type-line .card-item:not(:first-child) {
  margin-top: 25px;
  padding-top: 25px;
  border-top: 1px solid var(--gray-30);
}

/* card-item type-buttons-margin */
.card-item.type-buttons-margin > .ui-buttons,
.card-item.type-buttons-margin > .point-progress {
  margin-left: 60px;
}
.card-item.type-buttons-margin > .point-progress {
  margin-top: 8px;
}

/* card-item type-cancel */
.card-item.type-cancel .logo-image {
  opacity: 0.4;
}
.card-item.type-cancel .card-name,
.card-item.type-cancel .card-number {
  color: #ccc;
}

/* card-list- type-input */
.card-list.type-input label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.card-list.type-input .card-block {
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.card-list.type-input .ui-checkbox-object {
  margin-right: 14px;
  background-size: 100% auto;
}

/* card-block type-align-top */
.card-list .card-block.type-align-top {
  align-items: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
}
.card-list .card-block.type-align-top .ui-checkbox-object,
.card-list .card-block.type-align-top .card-image {
  align-self: start;
  -ms-flex-item-align: start;
  -ms-grid-row-align: start;
}
.card-list .card-block.type-align-top .ui-checkbox-object {
  margin-top: 2px;
}
.card-list .card-block.type-align-top .card-info {
  margin-top: 1px;
}

/* card-info type-has-change */
.card-info.type-has-change {
  position: relative;
}
.card-info.type-has-change .card-name {
  margin-right: 30px;
}
.card-change {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 22px;
  height: 2.2rem;
  background: url("../images/icon/btn-change-2.svg") no-repeat 50% 50%;
}
.card-change::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px;
}
/* card-info type-simple */
.card-info.type-simple {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* card-list- type-check-detail */
.detail-history-area {
  margin-top: 25px;
}
.detail-history-list .type-medium .ui-radio-object {
  margin-top: 3px;
  margin-right: 8px;
}
.detail-history-list .type-large .ui-checkbox-object {
  margin-top: 3px;
  margin-right: 4px;
}
.detail-history-list .form-detail-list-title .ui-checkbox-object {
  margin-top: 0;
  margin-right: 6px;
}
/* 230905 접근성 수정 */
.detail-history-list .ui-radio-block,
.detail-history-list .ui-checkbox-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.detail-history-list .ui-radio-block.type-large .ui-radio,
.detail-history-list .ui-checkbox-block.type-large .ui-checkbox {
  z-index: 1;
  width: 22px;
  height: 22px;
}
.detail-history-list .ui-radio-block.type-medium .ui-radio,
.detail-history-list .ui-checkbox-block.type-medium .ui-checkbox,
.detail-history-list .ui-radio-block.type-small .ui-radio,
.detail-history-list .ui-checkbox-block.type-small .ui-checkbox {
  z-index: 1;
  width: 18px;
  height: 18px;
}
/* //230905 접근성 수정 */
.detail-history-list .ui-radio-block .ui-label:not(.type-inline),
.detail-history-list .ui-checkbox-block .ui-label:not(.type-inline) {
  display: block;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
  min-width: 0;
  -webkit-box-flex: 1;
}
.detail-history-list.type-active-disabled .ui-checkbox[disabled] + .ui-label,
.detail-history-list.type-active-disabled .ui-radio[disabled] + .ui-label {
  color: #ccc;
}
.detail-history-item:not(:first-child) {
  margin-top: 25px;
}
.detail-history-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex: 1;
  font-size: 1.7rem;
  line-height: 24px;
}
.detail-history-info {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.detail-history-info:not(:last-child) {
  margin-right: 10px;
}
.detail-history-name {
  display: block;
  overflow: hidden;
  margin-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail-history-sub {
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 22px;
}
.detail-history-name.type-no-ellipsis {
  overflow: auto;
  text-overflow: initial;
  white-space: normal;
}
.detail-history-etc {
  position: relative;
  margin-top: 2px;
  color: var(--gray-70);
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 17px;
}
.detail-history-etc:after {
  content: "";
  display: block;
  clear: both;
}
.detail-history-etc-item {
  position: relative;
  float: left;
}
.detail-history-etc-item:not(:last-of-type) {
  margin-right: 7px;
  padding-right: 8px;
}
.detail-history-etc-item:not(:last-of-type)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 1px;
  height: 9px;
  margin-top: -5px;
  background-color: var(--gray-60);
}
.detail-history-opener {
  display: block;
  width: 35px;
  height: 24px;
}
.detail-history-layer-contents::before {
  content: "";
  display: block;
  height: 15px;
}
.ui-radio-block.type-medium + .detail-history-layer-contents,
.ui-checkbox-block.type-large + .detail-history-layer-contents {
  padding-left: 26px;
}
.js-accordion-opened .detail-history-total .amount-num {
  color: var(--primary);
}

/* details of use list */
.usage-area:not(:first-child) {
  margin-top: 35px;
}
.usage-area.type-line {
  padding-top: 35px;
  border-top: 1px solid var(--gray-30);
}
.usage-item:not(:first-child) {
  margin-top: 25px;
}
.usage-area-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--gray-30);
  font-size: 1.3rem;
  line-height: 1.8rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.usage-area-head.type-has-total {
  padding-bottom: 12px;
}
.usage-area-head.type-no-line {
  margin-bottom: 10px;
  padding-bottom: 0;
  border-bottom: none;
}
.usage-area-head .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: 300;
}
.usage-area-head .sub-title {
  margin-left: 5px;
}
.usage-area-head .total {
  margin-left: auto;
  font-size: 1.7rem;
  line-height: 21px;
}
.usage-area-head .ui-arrow {
  margin-left: auto;
  color: var(--gray-70);
}
.usage-item .ui-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.usage-item .ui-checkbox-object {
  margin-right: 4px;
}
.usage-item .ui-label-text {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  font-weight: 400;
  -webkit-box-flex: 1;
}
.usage-item.type-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.usage-item.type-flex .usage-box {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.usage-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  font-size: 17px;
  line-height: 24px;
  white-space: nowrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
}
.usage-top.type-block {
  display: block;
  white-space: normal;
}
.usage-top .title {
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  -webkit-box-flex: 1;
}
.usage-top .name {
  font-size: 1.5rem;
  line-height: 22px;
}
.usage-top .store {
  display: block;
  font-size: 1.8rem;
  line-height: 26px;
}
.usage-top:not(.type-block) > *:not(:first-child) {
  margin-left: 14px;
}
.usage-info {
  margin-top: 2px;
  color: var(--gray-70);
  font-size: 12px;
  line-height: 17px;
}
.usage-info-item {
  position: relative;
}
.usage-info-item + .usage-info-item {
  margin-left: 8px;
  padding-left: 9px;
}
.usage-info-item + .usage-info-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 9px;
  margin-top: -5px;
  background-color: var(--gray-70);
}
.ui-checkbox:disabled + .ui-label .usage-info {
  color: inherit;
}
.ui-checkbox:disabled + .ui-label .usage-info-item::before {
  background-color: #ccc;
}
.type-cancel .usage-top .value {
  text-decoration: line-through;
}
.usage-item.type-none::after {
  min-height: 80px;
}
.usage-total {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 35px;
  padding: 18px 15px;
  border-radius: 6px;
  background-color: var(--gray-20);
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.usage-total.type-has-arrow {
  justify-content: flex-start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
}
.usage-total.type-has-arrow .type-flexible {
  -ms-flex: 1;
  flex: 1;
  -webkit-box-flex: 1;
}
.form-detail-list + .usage-total {
  margin-top: 25px;
}
.usage-total-title {
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
}
.usage-total-title .ui-button-question {
  margin-top: 1.5px;
}
.usage-total-title .sub {
  margin-left: 4px;
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 19px;
}
.usage-total-value {
  font-weight: 700;
  font-size: 17px;
  line-height: 24px;
  text-align: right;
  word-break: break-all;
}
.usage-total-value-etc {
  display: block;
  margin-top: 4px;
  color: var(--gray-70);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 18px;
}
.usage-total-opener {
  width: 12px;
  height: 12px;
  margin-left: 12px;
  text-align: right;
}
.usage-total-accordion-contents {
  margin: 0 20px;
  padding: 20px 0;
  border-top: 1px solid var(--gray-30);
}
.usage-area .info-list {
  margin-top: 10px;
}
.usage-total-wrap {
  margin-top: 15px;
  border-radius: 6px;
  background-color: var(--gray-20);
}
.usage-total-wrap.type-fixed.is-active {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  box-shadow: 0 -5px 20px 0 rgba(0, 0, 0, 0.1);
}
.usage-total-wrap .usage-total {
  position: relative;
  margin-top: 0;
  padding: 21px 20px;
  border: none;
  background: none;
}
#frm .usage-total-wrap .usage-total-title {
  font-weight: 500;
} /* 폰트스타일 수정 */
.usage-total-wrap .usage-total-title {
  font-weight: inherit;
}
.usage-total-wrap .usage-total + .usage-total:before {
  content: "";
  position: absolute;
  top: 0;
  right: 20px;
  left: 20px;
  height: 1px;
  background: var(--gray-30);
}
.usage-total.type-align-top {
  align-items: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
}
.usage-total.type-block {
  display: block;
}
.usage-total.type-block .usage-total-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.usage-total.type-block .form-detail-list.type-line {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-30);
}
.usage-icon {
  width: 36px;
  height: 36px;
  margin: 6px 14px 0 0;
  background: no-repeat 50% 50% / auto 100%;
}
.usage-icon.type-pc {
  background-image: url("../images/icon/ic-pc.svg");
}
.usage-icon.type-mobile {
  background-image: url("../images/icon/ic-mobile.svg");
}

/* info-area type-cvv */
.info-area.type-cvv {
  padding-top: 140px;
  background: url("../images/illustration/img-cvv.png") no-repeat 50% 0 / auto 110px;
}

/* layer-terms */
.layer-terms {
  color: var(--gray-70);
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 18px;
}
.layer-terms-title {
  margin-bottom: 10px;
  color: var(--basic);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 20px;
}
.layer-terms-section:not(:first-child) {
  margin-top: 25px;
}

/* layer-ars-auth */
.ars-auth-group {
  text-align: center;
}
.ars-auth-notice {
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 20px;
}
.ars-auth-number {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  margin: 25px auto 0;
  padding: 7px 26px 11px 76px;
  border-radius: 35px;
  background: var(--gray-20) url("../images/illustration/img-ars.png") no-repeat 6px 50% / 57px 57px;
  font-weight: 500;
  font-size: 3.6rem;
  line-height: 51px;
  letter-spacing: 0.54rem;
}
.ars-auth-timer {
  margin-top: 14px;
  color: var(--primary);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 18px;
}
.ars-auth-timer::before {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 12px;
  height: 12px;
  margin: 3px 3px 0 0;
  background: url("../images/icon/ic-clock.svg") no-repeat;
}
.ars-auth-group .info-area {
  margin-top: 14px;
}

/* choose-link */
.choose-link {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 15px 22px 15px 0;
  background: url("../images/common/ic-checkbox-l-c.svg") no-repeat -100% 50%;
  color: inherit;
  font-size: 1.5rem;
  line-height: 2rem;
  text-align: left;
  text-decoration: none;
}
.choose-link:active {
  background-position: 100% 50%;
  color: var(--primary);
}

/* referen-item */
.referen-item {
  margin: 0;
  padding: 0;
}
.referen-item-key {
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.referen-item-val {
  margin: 5px 0 0;
  color: var(--gray-70);
  font-size: 1.2rem;
  line-height: 1.7rem;
}

/* summary-item */
.summary-item,
.summary-item-val {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
}
.summary-item {
  margin: 0;
  padding: 0;
  text-align: center;
}
.summary-item-key {
  -ms-flex: none;
  flex: none;
  margin-bottom: 10px;
  color: #111;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.7rem;
  -webkit-box-flex: 0;
}
.summary-item-val {
  -ms-flex: 1;
  flex: 1;
  justify-content: center;
  min-height: 0;
  margin: 0;
  font-weight: 300;
  font-size: 2rem;
  line-height: 2.7rem;
  -webkit-box-flex: 1;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.summary-item-val.type-medium-text {
  margin-top: -5px;
  font-size: 1.6rem;
}
.summary-item-unit {
  display: inline-block;
  vertical-align: top;
  margin-left: 2px;
  padding: 0.6rem 0 0.3rem;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.summary-item-unit.type-wave {
  margin-right: 5px;
  margin-left: 5px;
}
.summary-item-arrow {
  display: inline-block;
  vertical-align: top;
  width: 12px;
  height: 2.7rem;
  margin-right: 5px;
  background: url("../images/icon/ic-change.svg") no-repeat 50% 59.259259%;
}

.form-detail.type-narrow .form-detail-head {
  margin-bottom: 10px;
}
.form-detail.type-narrow .summary-item-key {
  margin-bottom: 8px;
}
.form-detail.type-narrow .summary-item-val.type-medium-text {
  line-height: 2.1rem;
}
.form-detail.type-narrow .summary-item-val.type-medium-text strong {
  display: inline-block;
  vertical-align: top;
  padding: 0 0 0.3rem;
  font-size: 2rem;
  line-height: 2.8rem;
}
.form-detail.type-narrow .bottom-info {
  margin-top: 10px;
}

/* summary-group */
.summary-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.summary-group .summary-item {
  position: relative;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.summary-group .summary-item + .summary-item {
  padding-left: 1px;
}
.summary-group .summary-item + .summary-item::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  display: block;
  border-left: 1px solid var(--gray-30);
}

/* bottom-info */
.bottom-info {
  margin-top: 25px;
}

/* status-tag */
.status-tag {
  display: block;
  box-sizing: border-box;
  padding: 3px 7px 4px;
  border: 1px solid var(--point);
  border-radius: 13px;
  background-color: var(--point);
  color: #fff;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.7rem;
  text-align: center;
}
.status-tag.type-primary {
  border-color: var(--primary);
  background-color: var(--primary);
}
.status-tag.type-secondary {
  border-color: var(--secondary);
  background-color: var(--secondary);
}
.status-tag.type-tertiary {
  border-color: var(--tertiary);
  background-color: var(--tertiary);
}
.status-tag.type-pastel-point {
  border-color: #fee9ee;
  background-color: #fee9ee;
  color: var(--point);
}
.status-tag.type-gray {
  border-color: var(--gray-20);
  background-color: var(--gray-20);
  color: var(--gray-70);
}
.status-tag.type-gray-secondary {
  border-color: var(--gray-80);
  background-color: var(--gray-80);
}
.status-tag.type-secondary-light {
  border-color: var(--secondary-light);
  background: var(--secondary-light);
  color: var(--secondary);
}
.status-tag.type-warning {
  border-color: var(--warning);
  background-color: var(--warning);
}
.status-tag.type-orange {
  border-color: var(--orange);
  background-color: var(--orange);
}
/* type-line 22.12.30 */
.status-tag.type-pastel-point.type-line {
  border-color: var(--point);
  background-color: #fff;
}
.status-tag.type-gray {
  border-color: var(--gray-40);
  background-color: #fff;
}
/* [2024-05-17 : lyr] 컬러 추가 */
.status-tag.type-darkgray {
  border-color: #141515;
  background-color: #141515;
}
.status-info {
  font-size: 1.3rem;
  line-height: 2.6rem;
}
.status-info .status-tag {
  display: inline-block;
  vertical-align: top;
  min-width: 49px;
  margin-right: 6px;
}

/* status-tag type-small */
.status-tag.type-small {
  padding: 1px 6px 0;
  border-radius: 10px;
}

/* status-tag type-xsmall 2023.03.21 제목 라벨 버튼 추가*/

.status-tag.type-xsmall {
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 1.1rem;
  letter-spacing: 0.33px;
}

/* ranking-tag */
.ranking-tag {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  min-width: 30px;
  padding: 0 6px;
  border-radius: 50px;
  color: #ffffff;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.6rem;
}
.ranking-tag.ranking-01 {
  /* background: #59b0f1; */
  background: #248bd9; /* 24.08.29 접근성 수정 */
}
.ranking-tag.ranking-02 {
  min-width: 48px;
  background: #18a55d; /* 2023-08-10 웹접근성 수정 */
  /* background: #5cc990; */
}
.ranking-tag.ranking-03 {
  /* background: #f4c142; */
  background: #af8c00; /* 24.08.29 접근성 수정 */
}
.ranking-tag.ranking-04 {
  /* background: #e27f39; */
  background: #e66000; /* 24.08.29 접근성 수정 */
}
.ranking-tag.ranking-05 {
  /* background: #eb5658; */
  background: #e13c41; /* 24.08.29 접근성 수정 */
}
/* ranking-tag-list */
.ranking-tag-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  border-radius: 8px;
  text-align: center;
}
.ranking-tag-item {
  -ms-flex: 1;
  flex: 1;
  -webkit-box-flex: 1;
}
.ranking-tag-list .ranking-tag {
  display: block;
  border-radius: 0;
}

/* not-agree */
.not-agree {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  align-items: center;
  margin: 60px 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.not-agree-text {
  font-size: 1.5rem;
  line-height: 2.1rem;
}
.not-agree-button {
  width: auto;
  min-height: 0;
  margin-top: 14px;
  padding: 3px 9px;
  border-radius: 13px;
  font-size: 1.3rem;
  line-height: 1.8rem;
}

/* more-link */
.more-link {
  display: inline-block;
  vertical-align: top;
  padding-right: 12px;
  background: url("../images/icon/btn-more-p.svg") no-repeat 100% 50%;
  color: var(--secondary);
  font-size: 1.3rem;
  line-height: 1.8rem;
}

/* bottom-more */
.bottom-more {
  margin-top: 25px;
  font-size: 0;
  line-height: 0;
  text-align: right;
}

/* products */
.products-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.products-item + .products-item {
  margin-top: 35px;
  padding-top: 35px;
  border-top: 1px solid var(--gray-30);
}
.products-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  padding-right: 18px;
  background: url("../images/icon/btn-more.svg") no-repeat 100% 50%;
  color: inherit;
  text-decoration: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.products-icon {
  -ms-flex: none;
  flex: none;
  width: 60px;
  height: 60px;
  margin-right: 20px;
  background: no-repeat 50% 50%;
  -webkit-box-flex: 0;
}
.products-icon.type-1 {
  background-image: url("../images/icon/ic-autoinstallment.svg");
}
.products-icon.type-2 {
  background-image: url("../images/icon/ic-autoloan.svg");
}
.products-icon.type-3 {
  background-image: url("../images/icon/ic-autocashback.svg");
}
.products-icon.type-4 {
  background-image: url("../images/icon/ic-manage.svg");
}
.products-icon.type-5 {
  background-image: url("../images/icon/ic-manage-01.svg");
}
.products-icon.type-6 {
  background-image: url("../images/icon/ic-manage-02.svg");
}
.products-icon.type-7 {
  background-image: url("../images/icon/ic-manage-03.svg");
}
.products-icon.type-8 {
  background-image: url("../images/icon/ic-manage-04.svg");
}
/* 22.05.17 */
.products-icon.type-9 {
  background-image: url("../images/icon/ic-autocardinstallment.svg");
}
.products-info {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.products-title {
  margin: 0;
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 2.1rem;
}
.products-discription {
  margin: 10px 0 0;
  color: var(--gray-70);
  font-size: 1.4rem;
  line-height: 1.8rem;
}
/* products-list type-small */
.products-list.type-small .products-item + .products-item {
  margin-top: 25px;
  padding-top: 25px;
}
.products-list.type-small .products-icon {
  width: 36px;
  height: 36px;
  margin-right: 10px;
}

/* step-detail */
.step-detail {
  box-sizing: border-box;
  margin-top: 35px;
  padding-top: 35px;
  border-top: 1px solid var(--gray-30);
}
.step-detail-title {
  font-size: 1.7rem;
  line-height: 21px;
}
.step-detail-item {
  position: relative;
  margin-top: 25px;
  padding-left: 52px;
}
.step-detail-item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  background-position: center center;
  background-repeat: no-repeat;
}
.step-detail-item.type-info:before {
  background-image: url("../images/icon/ic-customer-connecting.svg");
}
.step-detail-item.type-fax:before {
  background-image: url("../images/icon/ic-fax.svg");
}
.step-detail-item.type-sms:before {
  background-image: url("../images/icon/ic-sms.svg");
}
.step-detail-item.type-contract:before {
  background-image: url("../images/icon/ic-contract.svg");
}
.step-detail-item.type-recommend-url:before {
  background-image: url("../images/icon/ic-browser.svg");
}
.step-detail-item.type-url:before {
  background-image: url("../images/icon/ic-url.svg");
}
.step-detail-item.type-card:before {
  background-image: url("../images/icon/ic-card-xs.svg");
}
.step-detail-item.type-cashback:before {
  background-image: url("../images/icon/ic-cashback-xs.svg");
}
.step-detail-item.type-joinstep-1:before {
  background-image: url("../images/icon/ic-joinstep-1.svg");
}
.step-detail-item.type-joinstep-2:before {
  background-image: url("../images/icon/ic-joinstep-2.svg");
}
.step-detail-item.type-joinstep-3:before {
  background-image: url("../images/icon/ic-joinstep-3.svg");
}
.step-detail-item.type-joinstep-4:before {
  background-image: url("../images/icon/ic-joinstep-4.svg");
}
.step-num {
  display: block;
  color: var(--secondary);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 18px;
}
.step-txt {
  margin-top: 4px;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 22px;
}

/* ui-illust */
.ui-illust {
  height: 100px;
  margin: 25px 0 35px;
  background: no-repeat 100% 50%;
  background-size: auto 100%;
}
.ui-illust.type-1 {
  background-image: url("../images/illustration/img-autoinstallment.png");
}
.ui-illust.type-2 {
  background-image: url("../images/illustration/img-autoloan.png");
}
.ui-illust.type-3 {
  background-image: url("../images/illustration/img-autocashback.png");
}
.ui-illust.type-4 {
  height: 128px;
  margin-top: 35px;
  background-image: url("../images/illustration/img-payplanner.png");
}
.ui-illust.type-5 {
  height: 80px;
  background-image: url("../images/illustration/img-pay.png");
}
.ui-illust.type-6 {
  height: 80px;
  background-image: url("../images/illustration/img-hanamoney.png");
}
.ui-illust.type-7 {
  height: 80px;
  background-image: url("../images/illustration/img-airplane.png");
}
.ui-illust.type-8 {
  height: 80px;
  background-image: url("../images/illustration/img-giftcupon.png");
}
.ui-illust.type-9 {
  height: 93px;
  background-image: url("../images/illustration/life-illust.gif");
  background-size: auto 100%;
}
/* 22.05.17 */
.ui-illust.type-10 {
  background-image: url("../images/illustration/img-autocardinstallment.png");
}
/* 22.07.07 */
.ui-illust.type-11 {
  background-image: url("../images/illustration/img-autocashback-02.png");
}
/* ui-page-logo */
.ui-page-logo {
  height: 90px;
  margin: 35px 0;
  text-align: right;
}
.ui-page-logo .img {
  height: 100%;
}

/* box-arrow-link */
.box-arrow-link {
  position: relative;
  display: block;
  padding: 14px 32px 14px 14px;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
  color: inherit;
  font-size: 1.5rem;
  line-height: 2rem;
  text-decoration: none;
}
.box-arrow-link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  display: block;
  width: 11px;
  height: 11px;
  margin-top: -6px;
  background: url("../images/icon/btn-more.svg") no-repeat 50% 50%;
}

/* benefit */
.benefit-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.benefit-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.benefit-item.type-align-top {
  align-items: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
}
.benefit-item + .benefit-item {
  margin-top: 35px;
}
.benefit-item .process-item + .process-item {
  margin-top: 16px;
}
.benefit-item .process-text {
  font-size: 1.3rem
}
.benefit-info {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.benefit-title {
  margin: 0;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 2.1rem;
}
.benefit-discription {
  margin: 4px 0 0;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.benefit-discription .text-slide {
  margin-right: -54px;
}
/* 231025 금융 한눈에 보기 수정 */
.products-list.type-narrow .products-item .benefit-discription {
  margin-top: 10px;
  margin-left: 80px;
  color: var(--basic);
}
.products-list.type-narrow .products-item .benefit-discription .text-slide {
  justify-content: space-between;
  width: 100%;
}
.products-list.type-narrow .products-item + .products-item {
  margin-top: 20px;
  padding-top: 20px;
}
/* //231025 금융 한눈에 보기 수정 */
.benefit-icon {
  -ms-flex: none;
  flex: none;
  width: 44px;
  height: 44px;
  margin-left: 10px;
  background: no-repeat 50% 50%;
  -webkit-box-flex: 0;
}
.benefit-icon.type-1 {
  background-image: url("../images/icon/ic-interest-rate.svg");
}
.benefit-icon.type-2,
.benefit-icon.type-4 {
  background-image: url("../images/icon/ic-cashback.svg");
}
.benefit-icon.type-3 {
  background-image: url("../images/icon/ic-limit.svg");
}
.benefit-icon.type-5 {
  background-image: url("../images/icon/ic-car.svg");
}
.benefit-icon.type-6 {
  background-image: url("../images/icon/ic-monthly.svg");
}
.benefit-icon.type-7 {
  background-image: url("../images/icon/ic-contract-l.svg");
}
.benefit-icon.type-8 {
  background-image: url("../images/icon/ic-account-02.svg");
}
.benefit-icon.type-9 {
  background-image: url("../images/icon/ic-affiliated.svg");
}
.benefit-icon.type-10 {
  background-image: url("../images/icon/ic-package-01.svg");
}
.benefit-icon.type-11 {
  background-image: url("../images/icon/ic-package-02.svg");
}
.benefit-icon.type-12 {
  background-image: url("../images/icon/ic-package-03.svg");
}
.benefit-icon.type-13 {
  background-image: url("../images/icon/ic-phonecare-01.svg");
}
.benefit-icon.type-14 {
  background-image: url("../images/icon/ic-phonecare-02.svg");
}
.benefit-icon.type-15 {
  background-image: url("../images/icon/ic-lock-1.svg");
}
.benefit-icon.type-16 {
  background-image: url("../images/icon/ic-check.svg");
}
.benefit-icon.type-17 {
  background-image: url("../images/icon/ic-warning.svg");
}
.benefit-icon.type-18 {
  background-image: url("../images/icon/ic-date-l.svg");
}
/* 22.05.17 */
.benefit-icon.type-19 {
  background-image: url("../images/icon/ic-interest-commission.svg");
}
.benefit-icon.type-20 {
  background-image: url("../images/icon/ic-interest-record.svg");
}
.benefit-icon.type-21 {
  background-image: url("../images/icon/ic-package_trip.svg");
}
.benefit-icon.type-22 {
  background-image: url("../images/icon/ic-hotel_dc.svg");
}
.benefit-icon.type-23 {
  background-image: url("../images/icon/ic-travel_insurance.svg");
}
.benefit-icon.type-24 {
  background-image: url("../images/icon/ic-hurtz_rent.svg");
}
.benefit-icon.type-25 {
  background-image: url("../images/icon/ic-ktx_coupon.svg");
}
.benefit-icon.type-26 {
  background-image: url("../images/icon/ic-load.svg");
}
.benefit-icon.type-27 {
  background-image: url("../images/icon/ic-e-magazine.svg");
}
.benefit-icon.type-28 {
  /* 250117 background-image: url("../images/icon/ic-low-commission.png"); */
  background-image: url("../images/icon/ic-low-commission.svg");
}
/* 22.08.31 */
.benefit-icon.type-29 {
  background-image: url("../images/icon/ic-carprice.svg");
}
.benefit-icon.type-30 {
  background-image: url("../images/icon/ic-carwassh.svg");
}
.benefit-icon.type-31 {
  background-image: url("../images/icon/ic-cgv.svg");
}
/* 23.02.28 추가 */
.benefit-icon.type-32 {
  width: 34px;
  height: 34px;
  margin: 5px 5px 5px 15px;
  background-image: url("../images/icon/ic-golf.svg");
}
/* //23.02.28 추가 */
/* 23.07.04 */
.benefit-icon.type-33 {
  background-image: url("../images/icon/ic-mart-coupon.svg");
}
.benefit-icon.type-34 {
  background-image: url("../images/icon/ic-pet-mall-coupon.svg");
}
.benefit-icon.type-35 {
  background-image: url("../images/icon/ic-pet-food.svg");
}
.benefit-icon.type-36 {
  background-image: url("../images/icon/ic-pet-insurance.svg");
}
.benefit-icon.type-37 {
  background-image: url("../images/icon/ic-pet-health.svg");
}
.benefit-icon.type-38 {
  background-image: url("../images/icon/ic-pet-bone.svg");
}
.benefit-icon.type-39 {
  background-image: url("../images/icon/ic-pet-magazine.svg");
}
/* 24.04.12 피싱케어 추가 */
.benefit-icon.type-40 {
  background-image: url("../images/icon/ic-phishing-01.svg");
}
.benefit-icon.type-41 {
  background-image: url("../images/icon/ic-phishing-02.svg");
}
.benefit-icon.type-42 {
  background-image: url("../images/icon/ic-phishing-03.svg");
}
.benefit-icon.type-43 {
  background-image: url("../images/icon/ic-phishing-04.svg");
}
.benefit-icon.type-44 {
  background-image: url("../images/icon/ic-phishing-05.svg");
}
/* //23.07.04 */
/* 24.09.03 스마트할인팩 혜택 아이콘 추가 - sayho */
.benefit-icon.type-45 {
  background-image: url("../images/icon/ic-smart-pack-01.svg");
}
.benefit-icon.type-46 {
  background-image: url("../images/icon/ic-smart-pack-02.svg");
}
.benefit-icon.type-47 {
  background-image: url("../images/icon/ic-smart-pack-03.svg");
}
.benefit-icon.type-48 {
  background-image: url("../images/icon/ic-smart-pack-04.svg");
}
/* //24.09.03 스마트할인팩 혜택 아이콘 추가 - sayho */

/* [2024-11-08: KJH] '스마트할인팩' 상품 상세 아이콘 추가 */
/* [2025-01-17 아이콘 svg로 수정 : HDH] */
.benefit-icon.type-36 {
  background-image: url("../images/icon/life_ic_01.svg");
}
.benefit-icon.type-37 {
  background-image: url("../images/icon/life_ic_02.svg");
}
.benefit-icon.type-38 {
  background-image: url("../images/icon/life_ic_03.svg");
}
.benefit-icon.type-39 {
  background-image: url("../images/icon/life_ic_04.svg");
}
.benefit-icon.type-40 {
  background-image: url("../images/icon/life_ic_05.svg");
}
.benefit-icon.type-41 {
  background-image: url("../images/icon/life_ic_06.svg");
}
.benefit-icon.type-42 {
  background-image: url("../images/icon/life_ic_07.svg");
}
.benefit-icon.type-43 {
  background-image: url("../images/icon/life_ic_08.svg");
}
.benefit-icon.type-44 {
  background-image: url("../images/icon/life_ic_09.svg");
}
.benefit-icon.type-45 {
  background-image: url("../images/icon/life_ic_10.svg");
}
.benefit-icon.type-46 {
  background-image: url("../images/icon/life_ic_11.svg");
}
.benefit-icon.type-47 {
  background-image: url("../images/icon/life_ic_12.svg");
}
.benefit-icon.type-48 {
  background-image: url("../images/icon/life_ic_13.svg");
}
.benefit-icon.type-49 {
  background-image: url("../images/icon/life_ic_14.svg");
}
.benefit-icon.type-50 {
  background-image: url("../images/icon/life_ic_15.svg");
}
.benefit-icon.type-51 {
  background-image: url("../images/icon/life_ic_16.svg");
}
.benefit-icon.type-52 {
  background-image: url("../images/icon/life_ic_17.svg");
}
.benefit-icon.type-53 {
  background-image: url("../images/icon/life_ic_18.svg");
}
.benefit-icon.type-54 {
  background-image: url("../images/icon/life_ic_19.svg");
}
.benefit-icon.type-55 {
  background-image: url("../images/icon/life_ic_20.svg");
}
.benefit-icon.type-56 {
  background-image: url("../images/icon/life_ic_21.svg");
}
.benefit-icon.type-57 {
  background-image: url("../images/icon/life_ic_22.svg");
}

/* //[2025-01-17 아이콘 svg로 수정 : HDH] */
/* // [2024-11-08: KJH] '스마트할인팩' 아이콘 추가 */

.benefit.type-box {
  padding: 20px;
  border-radius: 6px;
  background-color: var(--gray-20);
}
.benefit.type-box .benefit-title {
  font-size: 1.5rem;
}
.benefit.type-box .benefit-item + .benefit-item {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-30);
}

/* benefit-type */
.benefit-type-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.benefit-type-group + .benefit-type-group {
  margin-top: 10px;
}
.benefit-type-item {
  -ms-flex: 1;
  flex: 1;
  box-sizing: border-box;
  min-width: 0;
  padding: 20px;
  border-radius: 6px;
  background-color: var(--gray-20);
  -webkit-box-flex: 1;
}
.benefit-type-item.form-flex {
  padding: 15px;
}
.benefit-type-item + .benefit-type-item {
  margin-left: 10px;
}
.benefit-type-item.type-icon {
  position: relative;
  padding-bottom: 69px;
}
.benefit-type-item.type-icon::after {
  content: "";
  position: absolute;
  right: 15px;
  bottom: 15px;
  display: block;
  width: 44px;
  height: 44px;
  margin-left: 10px;
  background: no-repeat 50% 50%;
}
.benefit-type-item.type-icon.type-icon-1::after {
  background-image: url("../images/icon/ic-cardcashback.svg");
}
.benefit-type-item.type-icon.type-icon-2::after {
  background-image: url("../images/icon/ic-lowrate.svg");
}
.benefit-type-title {
  margin-bottom: 4px;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2rem;
}
.benefit-type-text {
  font-size: 1.2rem;
  line-height: 1.7rem;
}
.benefit-type-discription {
  margin: 10px 0 0;
  color: var(--gray-70);
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.7rem;
}
.benefit-type-icon {
  margin: 10px -5px -5px auto;
}
.benefit-type-value {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-weight: 400;
  font-size: 1.3rem;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.benefit-type-value:not(.form-flex-cell):last-child {
  margin-bottom: -5px;
}
.benefit-type-value .value {
  margin-right: 6px;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 33px;
}
.benefit-type-value .unit {
  padding-top: 1px;
}
.benefit-type-notice {
  margin-top: 10px;
  color: var(--gray-70);
  text-align: center;
}

/* process */
.process-list {
  position: relative;
}
.process-list::before {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 0;
  left: 8px;
  display: block;
  width: 1px;
  background: url("../images/etc/ic-stepline.svg") repeat-y 0 0;
}
.process-item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.process-item + .process-item {
  margin-top: 20px;
}
.process-item .down-arrow-link {
  background-color: #fff;
  margin: 1px 10px 1px 0;
  padding-right: 18px;
  background-position: center;
}
.process-num {
  position: relative;
  -ms-flex: none;
  flex: none;
  box-sizing: border-box;
  min-width: 18px;
  margin: 1px 10px 1px 0;
  padding: 2px 3px;
  border-radius: 100%;
  background-color: var(--basic);
  color: #fff;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4rem;
  text-align: center;
  -webkit-box-flex: 0;
}
.process-question {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 20px;
}
.process-question .process-num {
  height: 18px;
  margin: 0 10px 0 0;
}
.process-question .process-num:before,
.process-question .process-num:after {
  display: none;
}
.process-item:first-child::before,
.process-item:last-child::before,
.process-num::before,
.process-num::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  background-color: #fff;
}
.process-item:first-child::before,
.process-item:last-child::before {
  height: 50%;
}
.process-item:first-child::before {
  top: 0;
}
.process-item:last-child::before {
  bottom: 0;
}
.process-num::before,
.process-num::after {
  height: 6px;
}
.process-num::before {
  top: -6px;
}
.process-num::after {
  bottom: -6px;
}
.process-text {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2rem;
  -webkit-box-flex: 1;
}
.process-text .sub {
  display: block;
  margin-top: 4px;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 18px;
}

/* accordion-list */
.accordion-section + .accordion-section {
  margin-top: 35px;
}
.accordion-section.type-line {
  padding-top: 35px;
  border-top: 1px solid var(--gray-30);
}
.accordion-section-head {
  margin-bottom: 10px;
}
.accordion-section-head .title {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 18px;
}

.accordion-list {
  overflow: hidden;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
}
.accordion-opener {
  display: block;
  box-sizing: border-box;
  padding: 19px 20px;
  background: var(--gray-20);
}
.accordion-opener:after {
  right: 20px;
}
.accordion-item .accordion-opener:before {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 0;
  left: 20px;
  box-sizing: border-box;
  height: 1px;
  background: var(--gray-30);
}
.accordion-item.js-accordion-opened:not(:last-child) {
  border-bottom: 1px solid var(--gray-30);
}
.accordion-item:not(.js-accordion-opened):last-child .accordion-opener:before {
  display: none;
}
.accordion-opener.js-accordion-active:before {
  right: 0;
  left: 0;
}
.accordion-opener-title {
  display: block;
  box-sizing: border-box;
  padding-right: 20px;
  color: var(--basic);
  font-size: 1.6rem;
  line-height: 22px;
}
.accordion-opener-title.type-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.accordion-opener-key {
  display: block;
  font-weight: 500;
}
.accordion-opener-value {
  display: block;
  margin-left: auto;
  font-weight: 500;
}
.accordion-opener-text {
  display: block;
  box-sizing: border-box;
  margin-top: 5px;
  padding-right: 20px;
  color: var(--gray-70);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 18px;
}
.accordion-contents {
  box-sizing: border-box;
  padding: 25px 20px;
  font-weight: 400;
  line-height: 18px;
}
.accordion-contents .ui-notice:first-child {
  margin-top: 0;
}
.accordion-contents .ui-notice + .accordion-section {
  margin-top: 25px;
}
.accordion-list .form-detail-head {
  margin-top: 0;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gray-30);
}
.accordion-list .form-detail-head {
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 22px;
}
.accordion-list .form-detail-head .title {
  -ms-flex: 1;
  flex: 1;
  font-size: inherit;
  line-height: inherit;
  -webkit-box-flex: 1;
}
/* accordion-contents - type-narrow */
.accordion-contents.type-narrow {
  padding: 0 20px 20px 20px; /* 22.12.05 여백 수정 */
  font-size: 1.3rem;
  line-height: 18px;
}
.accordion-contents.type-narrow .form-detail {
  margin-top: 20px;
}
.accordion-contents.type-narrow .form-detail.type-line {
  padding: 0;
}
.accordion-contents.type-narrow .form-detail-list {
  font-size: inherit;
  line-height: inherit;
}
.accordion-contents.type-narrow .form-detail-item-wrap:not(:first-child),
.accordion-contents.type-narrow .form-detail-item:not(:first-child) {
  margin-top: 20px;
}

/* accordion-opener type-no-button */
.accordion-opener.type-no-button .accordion-opener-title {
  padding-right: 0;
}

/* accordion-step-list */
.accordion-step-opener:after {
  right: 0;
}
.accordion-step-opener:before {
  display: none;
}
.accordion-step-opener-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-right: 40px;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 21px;
}
.accordion-step-opener-title .num {
  margin-right: 8px;
  color: var(--secondary);
}
.accordion-step-item:not(:last-child) {
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid var(--gray-30);
}
.accordion-step-contents {
  padding-top: 25px;
}

/* 2023.10.20. 카드상세 리뉴얼 용 심플 아코디언 추가 */
.accordion-list.simple-type {
  border: 0;
}
.accordion-list.simple-type .accordion-item {
}
.accordion-list.simple-type .accordion-item .accordion-opener {
  padding-right: 0;
  padding-left: 0;
  background-color: #ffffff;
}
.accordion-list.simple-type .accordion-item .accordion-opener::before {
  right: 0;
  left: 0;
}
.accordion-list.simple-type .accordion-item .accordion-opener::after {
  right: 0;
}
.accordion-list.simple-type .accordion-item.js-accordion-opened {
}
.accordion-list.simple-type .accordion-item.js-accordion-opened:not(:last-child) {
  border: 0;
}
.accordion-list.simple-type .accordion-item.js-accordion-opened .accordion-opener::before,
.accordion-list.simple-type.no-header-border .accordion-item .accordion-opener::before {
  display: none;
}
.accordion-list.simple-type .accordion-item .js-ui-accordion__layer .accordion-contents {
  padding: 0 0 22px;
  word-wrap: break-word;
  word-break: keep-all;
}
.accordion-list.simple-type.no-header-border.contents-border-box .accordion-contents {
  overflow-y: auto;
  max-height: 400px;
  padding: 20px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
}

/* openbanking-list */
.openbanking-list + .openbanking-list {
  margin-top: 35px;
}
.openbanking-opener-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  padding-right: 20px;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 20px;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.openbanking-opener-key {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.openbanking-opener-value {
  margin-left: auto;
}
.openbanking-contents {
  padding-top: 25px;
}
.openbanking-contents .card-list.type-has-btn .card-item:not(:first-child) {
  margin-top: 10px;
}

/* card brand */
.ui-card-brand {
  display: inline-block;
  vertical-align: middle;
  height: 20px;
}
.ui-card-brand .img {
  vertical-align: top;
  height: 100%;
}

.menu-icon-item + .menu-icon-item {
  margin-top: 25px;
}
.menu-icon-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.menu-icon {
  width: 36px;
  height: 36px;
  margin-right: 20px;
  background: no-repeat 50% 50% / auto 100%;
}
.menu-icon.type-smartshopping-01 {
  background-image: url("../images/icon/ic-smartshopping-01.svg");
}
.menu-icon.type-smartshopping-02 {
  background-image: url("../images/icon/ic-smartshopping-02.svg");
}
.menu-icon.type-smartshopping-03 {
  background-image: url("../images/icon/ic-smartshopping-03.svg");
}
.menu-icon.type-smartshopping-04 {
  background-image: url("../images/icon/ic-smartshopping-04.svg");
}
.menu-icon.type-smartshopping-05 {
  background-image: url("../images/icon/ic-smartshopping-05.svg");
}
.menu-icon-text {
  font-size: 1.7rem;
  line-height: 24px;
}

/* ui-label-car */
.ui-label-car {
  display: inline-block;
  vertical-align: top;
  width: 104px;
  height: 50px;
}
.ui-label-car .img {
  width: auto;
  height: 100%;
}
.ui-label-car + .ui-label-text {
  margin-top: 10px;
}

/* payment-car */
.payment-car {
  width: 250px;
  margin: 0 auto;
}
.payment-car .img {
  width: 100%;
  height: auto;
}

/* app-version */
.app-version {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  margin-top: 35px;
  padding: 17px 15px 19px;
  border-radius: 6px;
  background-color: var(--gray-10);
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.app-version > .ui-basic-button {
  width: auto;
  margin-left: auto;
  border-color: #fff;
}
.app-version-title {
  font-size: 14px;
  line-height: 24px;
}
.app-version-title .value {
  margin-left: 6px;
  font-size: 17px;
}
.app-update-status .desc {
  color: #888;
  font-weight: 500;
  font-size: 12px;
}
.app-version-text {
  margin-top: 3px;
  color: var(--gray-70);
  font-size: 1.2rem;
  line-height: 17px;
}

/* profile */
.profile-area {
  text-align: center;
}
.profile-area .ui-buttons {
  margin-top: 22px;
}
.profile-image {
  position: relative;
  display: block;
  width: 80px;
  margin: 0 auto;
}
.profile-image-inner {
  position: relative;
  display: block;
  padding-top: 100%;
  border-radius: 100%;
}
.profile-image-inner:empty::before,
.profile-image-inner.is-error::before {
  content: "";
  background: url("../images/common/profile-default.svg") no-repeat 50% 50% #fff;
  background-size: cover;
}
.profile-image-inner:empty::before,
.profile-image-inner.is-error::before,
.profile-image-inner img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 1px solid var(--gray-10);
  border-radius: 100%;
}
.profile-image-inner.is-error img {
  display: none;
}
.profile-image .ui-button-change {
  position: absolute;
  right: -8px;
  bottom: -2px;
  z-index: 10;
}
.profile-register-img {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-color: #fff;
}
.profile-register-img:not(.is-active) {
  display: none;
}
.ui-radio-group.type-select-profile {
  flex-wrap: wrap;
  margin-top: 23px;
}
.ui-radio-group.type-select-profile .ui-radio-block {
  flex: 0 0 25%;
  margin: 17px 0 0;
}
.ui-profile-img {
  position: relative;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  margin: 0 auto;
  border-radius: 15px;
  background-color: var(--gray-20);
}
.ui-profile-img .img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 60px;
  max-height: 60px;
  transform: translate(-50%, -50%);
}
.ui-radio:checked + .ui-label .ui-profile-img {
  border: 2px solid var(--primary);
}

/* accordion-info-list */
.accordion-info-item:first-child {
  border-top: 1px solid var(--gray-30);
}
.accordion-info-item:not(.js-accordion-opened) {
  border-bottom: 1px solid var(--gray-30);
}
.accordion-info-opener {
  padding-top: 25px;
  padding-bottom: 25px;
}
.accordion-info-title {
  display: block;
  font-size: 1.5rem;
  line-height: 22px;
}
.accordion-info-detail {
  margin: 0 -24px;
}
.accordion-info-detail-inner {
  padding: 25px 24px;
  background-color: #f4f6f8;
}

/* accordion-info-list */
.accordion-info-item:first-child {
  border-top: 1px solid var(--gray-30);
}
.accordion-info-item:not(.js-accordion-opened) {
  border-bottom: 1px solid var(--gray-30);
}
.accordion-info-opener {
  padding-top: 25px;
  padding-bottom: 25px;
}
.accordion-info-title {
  display: block;
  font-size: 1.5rem;
  line-height: 22px;
}
.accordion-info-detail {
  margin: 0 -24px;
}
.accordion-info-detail-inner {
  padding: 25px 24px;
  background-color: #f4f6f8;
}

/* issue-accordion-list */
.issue-accordion-item:first-child {
  border-top: 1px solid var(--gray-30);
}
.issue-accordion-item:not(.js-accordion-opened) {
  border-bottom: 1px solid var(--gray-30);
}
.issue-accordion-opener {
  padding-top: 25px;
  padding-bottom: 25px;
}
.issue-accordion-item .ui-badge {
  margin-bottom: 8px;
}
.issue-accordion-title {
  display: block;
  padding-right: 24px;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 22px;
}
.issue-accordion-detail {
  margin: 0 -24px;
}
.issue-accordion-detail-inner {
  padding: 35px 24px;
  background-color: #f4f6f8;
}
.issue-accordion-detail-inner .form-detail-list {
  margin-top: 25px;
  padding-top: 25px;
  border-top: 1px solid var(--gray-30);
  font-size: 1.3rem;
  line-height: 22px;
}
.issue-accordion-detail-inner .form-detail-item:not(:first-child) {
  margin-top: 20px;
}
.issue-accordion-detail-inner .form-detail-group {
  font-weight: 500;
}
.issue-accordion-detail-inner > .ui-basic-button {
  margin-top: 25px;
}
.issue-progress-notice {
  margin-bottom: 20px;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 24px;
}
.issue-progress-list {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.issue-progress-list::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 0;
  width: 100%;
  border-top: 1px dashed var(--gray-40);
}
.issue-progress-item {
  position: relative;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  text-align: center;
  -webkit-box-flex: 1;
}
.issue-progress-item:first-child::before,
.issue-progress-item:last-child::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background-color: #f4f6f8;
}
.issue-progress-item:first-child::before {
  left: 0;
}
.issue-progress-item:last-child::before {
  right: 0;
}
.issue-progress-step {
  position: relative;
  padding-top: 56px;
  color: rgba(136, 136, 136, 0.7);
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  font-size: 12px;
  line-height: 1.17;
  letter-spacing: -0.3px;
}
.issue-progress-icon {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50px;
  height: 50px;
  margin-left: -25px;
}
.issue-progress-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border: 2px solid var(--gray-60);
  border-radius: 3px;
  background-color: #f4f6f8;
}
.issue-progress-icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  border-radius: 17px;
}
.issue-progress-icon.type-01::after {
  background-image: url("../images/illustration/ic_cardissuance_1.png");
}
.issue-progress-icon.type-02::after {
  background-image: url("../images/illustration/ic_cardissuance_2.png");
}
.issue-progress-icon.type-03::after {
  background-image: url("../images/illustration/ic_cardissuance_3.png");
}
.issue-progress-icon.type-04::after {
  background-image: url("../images/illustration/ic_cardissuance_4.png");
}
.issue-progress-icon.type-05::after {
  background-image: url("../images/illustration/ic_cardissuance_5.png");
}
.issue-progress-icon.type-06::after {
  background-image: url("../images/illustration/ic_cardissuance_6.png");
}
.issue-progress-icon.type-07::after {
  background-image: url("../images/illustration/ic_cardissuance_7.png");
}
.issue-progress-icon.type-08::after {
  background-image: url("../images/illustration/ic_cardissuance_8.png");
}
.issue-progress-icon.type-09::after {
  background-image: url("../images/illustration/ic_cardissuance_9.png");
}
.issue-progress-icon.type-10::after {
  background-image: url("../images/illustration/ic_cardissuance_10.png");
}
.issue-progress-item.is-active .issue-progress-step {
  color: var(--secondary);
}
.issue-progress-item.is-active .issue-progress-icon::after {
  display: block;
  /* box-shadow: 0 0 0 2px var(--secondary) inset; */
  background-color: #fff;
  background-size: contain;
  box-shadow: 0 0 8px 0 var(--gray-30);
}

/* toggle-search */
.toggle-search {
  margin: -30px -24px 0;
}
.toggle-search-tab {
  position: relative;
  padding-right: 44px;
  box-shadow: 0 1px 0 var(--gray-30);
}
.toggle-search-tab::before {
  content: "";
  position: absolute;
  top: 0;
  right: 44px;
  z-index: 10;
  display: block;
  width: 24px;
  height: 100%;
  background: -moz-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 5%,
    rgba(255, 255, 255, 1) 95%,
    rgba(255, 255, 255, 1) 100%
  );
  background: -webkit-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 5%,
    rgba(255, 255, 255, 1) 95%,
    rgba(255, 255, 255, 1) 100%
  );
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 5%,
    rgba(255, 255, 255, 1) 95%,
    rgba(255, 255, 255, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
}
.toggle-search-tab .ui-tab-list {
  box-shadow: none;
}
.toggle-search-tab .ui-buttons.type-scroll {
  margin-right: 0;
  margin-left: 0;
}
.toggle-search-button {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 44px;
  height: 100%;
  background: no-repeat 0 50%;
}
.toggle-search-button.type-open {
  background-image: url("../images/icon/ic-header-search.svg");
}
.toggle-search-button.type-close {
  right: auto;
  left: 24px;
  width: 45px;
  background-image: url("../images/icon/ic-searchback-b.svg");
  background-position: 15px 50%;
}
.toggle-search-form {
  position: relative;
  display: none;
  padding: 3px 24px;
}
.toggle-search-form .search-word-area {
  margin: 0;
}
.toggle-search-form .ui-input-block.type-search .ui-input {
  padding-left: 44px;
  background-image: none;
}
.toggle-search.is-opened .toggle-search-tab {
  display: none;
}
.toggle-search.is-opened .toggle-search-form {
  display: block;
}
/* toggle-search type-no-line */
.toggle-search.type-no-line .toggle-search-tab {
  box-shadow: none;
}
/* toggle-search-tab type-no-side-button */
.toggle-search-tab.type-no-side-button {
  padding-right: 0;
}
.toggle-search-tab.type-no-side-button::before {
  display: none;
}

/* page-gnb-head toggle-search */
.page-gnb-head .toggle-search {
  margin: 0;
}

/* coupons */
.coupons-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.coupons-item + .coupons-item {
  margin-top: 10px;
}
.coupons-item.js-ui-accordion__item.js-accordion-opened .coupon-card,
.coupons-item.js-ui-accordion__item.js-accordion-animated .coupon-card {
  border-bottom-width: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.coupons-item.js-ui-accordion__item.js-accordion-opened .coupon-card-right,
.coupons-item.js-ui-accordion__item.js-accordion-animated .coupon-card-right {
  border-bottom-right-radius: 0;
}

/* coupons type-top-margin */
.coupons.type-top-margin {
  margin-top: 25px;
}

/* coupon-card */
.coupon-card,
.coupon-card-right,
.coupon-card-action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.coupon-card-left,
.coupon-card-right .coupon-card-action {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.coupon-card {
  border: 1px solid var(--gray-60);
  border-radius: 20px;
  background-color: #fff;
}
.coupon-card-left {
  position: relative;
}
.coupon-card-right {
  position: relative;
  z-index: 1;
  -ms-flex: none;
  flex: none;
  width: 70px;
  border-radius: 0 19px 19px 0;
  background-color: var(--gray-10);
  -webkit-box-flex: 0;
}
.coupon-card-right::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -1px;
  z-index: 0;
  display: block;
  width: 9px;
  height: 28px;
  margin-top: -14px;
  background: url("../images/etc/img-couponeline.png") no-repeat 100% 50%;
}
.coupon-card-link,
.coupon-card-action {
  color: inherit;
  text-decoration: none;
}
.coupon-card-info {
  padding: 20px;
}
.coupon-card-info .logo-image {
  margin-bottom: 10px;
}
.coupon-card-brand,
.coupon-card-name {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  word-break: break-all;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.coupon-card-brand {
  max-height: 3.6rem;
  margin-bottom: 2px;
  color: var(--gray-70);
  font-size: 1.2rem;
  line-height: 1.8rem;
}
.coupon-card-name {
  max-height: 4.2rem;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2.1rem;
}
.coupon-card-date {
  margin-top: 10px;
  color: var(--gray-60);
  font-size: 1.2rem;
  line-height: 1.8rem;
}
.coupon-card-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: block;
  width: 100%;
  height: 100%;
}
.coupon-card-direct-link {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 11;
  display: none;
}
.coupon-card-action {
  position: relative;
  z-index: 10;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: no-repeat 50% 50%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.coupon-card-action.type-download {
  background-image: url("../images/icon/ic-download.svg");
}
.coupon-card-action.type-bar-code {
  background-image: url("../images/icon/ic-barcord.svg");
}
.coupon-card-action.type-code {
  background-image: url("../images/icon/ic-online.svg");
}
.coupon-card-action.type-link {
  background-image: url("../images/icon/ic-link.svg");
}
.coupon-card-action.type-ncnc {
  background-image: url("../images/icon/ic_coupon_ncnc.png");
  background-size: 30px;
} /* // 2023.09.13 니콘내콘 케이스 추가 */
/* 2022.08.10 */
.coupon-card-action.type-complete {
  background-image: url("../images/icon/ic-check2.svg");
  background-size: 35px auto;
}
.coupon-card-action.type-expire {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.coupon-card-action.type-pick::before {
  content: "";
  display: block;
  width: 36px;
  height: 18px;
  margin: 0 auto;
  background: url("../images/icon/ic-pick.svg") no-repeat 50% 50%;
}
.coupon-card-action.type-pick[disabled]::before,
.coupon-card-action.type-pick.type-disabled::before {
  background-image: url("../images/icon/ic-pick-d.svg");
}
.coupon-card-action.type-opener::after {
  position: static;
  display: block;
  width: 17px;
  height: 16px;
  margin: 0 auto;
  background-image: url("../images/icon/btn-dropdown-xxl-b.svg");
}
.coupon-card-action-text {
  display: block;
  color: var(--gray-70);
  font-size: 1.2rem;
  line-height: 1.4rem;
}
.coupon-card-status {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.coupon-card-status .status-tag {
  min-width: 50px;
}
.coupon-card-accordion-layer {
  border: 1px solid var(--gray-30);
  border-top-style: dashed;
  border-radius: 0 0 20px 20px;
  background-color: #fff;
}
.coupon-card-accordion-layer::before {
  content: "";
  display: table;
}
.coupon-card-accordion-contents {
  padding: 20px;
}

/* coupon-card type-accordion */
.coupon-card.type-accordion {
  display: block;
  overflow: hidden;
}

/* coupon-card type-direct */
.coupons-item.type-direct .coupon-card-direct-link {
  display: flex;
}
.coupons-item.type-direct .coupon-card-brand {
  padding-right: 87px;
}

/* coupon-card is-expire */
.coupon-card.is-expire .logo-image {
  opacity: 0.3;
}
.coupon-card.is-expire .coupon-card-brand,
.coupon-card.is-expire .coupon-card-name,
.coupon-card.is-expire .coupon-card-date {
  color: var(--gray-50);
}
.coupon-card.is-expire .stamp {
  opacity: 0.8;
}

/* coupons-list type-grid 22.12.30 */
.coupons-list.type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 12px 10px;
  align-items: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
}
.coupons-list.type-grid .coupons-item {
  height: 100%;
}
.coupons-list.type-grid .coupons-item + .coupons-item {
  margin-top: 0px;
}
.coupons-list.type-grid .coupon-card {
  position: relative;
  display: block;
  height: 100%;
}
.coupons-list.type-grid .coupon-card-info {
  padding: 27px 12px 47px 12px;
}
.coupons-list.type-grid .coupon-card-status {
  position: absolute;
  top: 12px;
  right: 12px;
  justify-content: flex-end;
  margin: 0;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
}
.coupons-list.type-grid .coupon-card-date {
  position: absolute;
  bottom: 15px;
  left: 12px;
  line-height: 15px;
}

/* empty-buttons */
.empty-buttons {
  margin-top: 14px;
}
.empty-buttons::before {
  content: "";
  display: table;
}
.empty-buttons-list {
  margin: -4px 0 0 -4px;
  font-size: 0;
  line-height: 0;
  text-align: center;
}
.empty-buttons-item {
  display: inline-block;
  vertical-align: top;
  padding: 4px 0 0 4px;
  font-size: 1rem;
  line-height: normal;
}

/* empty-button */
.empty-button {
  display: block;
  padding: 4px 10px;
  font-size: 1.3rem;
  line-height: 1.8rem;
}

/* coupon-detail */
.coupon-detail {
  margin-bottom: 35px;
  padding-bottom: 35px;
  border-bottom: 1px solid var(--gray-30);
}
.coupon-detail-info {
  position: relative;
}
.coupon-detail-info .logo-image {
  margin-bottom: 10px;
}
.coupon-detail-brand {
  display: flex; /* 22.09.08 */
  margin-bottom: 5px;
  color: var(--gray-70);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.2rem;
}
/* 22.09.08 */
.coupon-detail-brand .coupon-detail-link {
  margin-left: auto;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 2.2rem;
  text-decoration: underline;
}
.coupon-detail-name {
  font-weight: 500;
  font-size: 2.1rem;
  line-height: 3rem;
}
.coupon-detail-name.font-weight-medium {
  font-weight: 500;
}
.coupon-detail-date {
  display: flex; /* 22.09.08 */
  margin-top: 12px;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 1.8rem;
}
/* 22.09.08 */
.coupon-detail-date .ui-badge.type-xsmall {
  margin-left: 5px;
}
.coupon-detail-date .coupon-detail-count {
  margin-left: auto;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 1.8rem;
}

.coupon-detail-buttons {
  position: absolute;
  right: 0;
  bottom: 0;
}
.coupon-detail-button {
  display: block;
  float: left;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: no-repeat 50% 50% var(--gray-10);
}
.coupon-detail-button + .coupon-detail-button {
  margin-left: 10px;
}
.coupon-detail-button.type-share {
  background-image: url("../images/icon/btn-share.svg");
}
.coupon-detail-button.type-heart {
  background-image: url("../images/icon/btn-heart.svg");
}
.coupon-detail-button.type-heart.is-active {
  background-image: url("../images/icon/btn-heart-s.svg");
}
.coupon-detail .coupon-code,
.coupon-detail-go-link {
  margin-top: 35px;
}
.coupon-detail-buttons .ui-badge.type-icon-share {
  display: block;
  padding-right: 12px;
  padding-left: 12px;
  color: inherit;
  font-weight: 400;
  font-size: 1.3rem;
}

/* coupon-detail type-no-line */
.coupon-detail.type-no-line {
  margin-bottom: 0;
  border-bottom: none;
}

/* coupon-detail type-layer-head */
.coupon-detail.type-layer-head {
  position: relative;
  padding-top: 20px;
}
.coupon-detail.type-layer-head .header__button--close {
  position: absolute;
  top: 20px;
  right: 0;
  z-index: 10;
}
.coupon-detail.type-layer-head .coupon-detail-brand {
  padding-right: 24px;
}

/* type-layer-head fix */
.coupon-body-inner .coupon-detail.type-layer-head {
  position: absolute;
  top: 0;
  right: 24px;
  left: 24px;
  z-index: 3;
  margin-bottom: 0;
  background: #fff;
  /* 20240123 나만의 pick 이용안내/타이틀 겹침현상 수정 */
}
.coupon-info-box {
  margin-top: 138px;
}

/* coupon-detail-buttons type-only */
.coupon-detail-buttons.type-only {
  position: relative;
  right: auto;
  bottom: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-end;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
}
.coupon-detail-buttons.type-only .coupon-detail-button {
  -ms-flex: none;
  flex: none;
  float: none;
  -webkit-box-flex: 0;
}

/* coupon-detail-button type-inline-block */
.coupon-detail-button.type-inline-block {
  display: inline-block;
  vertical-align: top;
  float: none;
}

/* image-only */
.image-only {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
}

/* stamp */
.stamp {
  position: relative;
  width: 44px;
  height: 44px;
  background: url("../images/etc/img-stamp-s.svg") no-repeat 50% 50%;
}
.stamp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--secondary);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.1rem;
  -webkit-transform: translate(-50%, -50%) rotate(-25deg);
  transform: translate(-50%, -50%) rotate(-25deg);
}

/* stamp type-large */
.stamp.type-large {
  width: 80px;
  height: 80px;
  background-image: url("../images/etc/img-stamp-l.svg");
}
.stamp.type-large .stamp-text {
  font-size: 1.8rem;
  line-height: 2rem;
}

/* stamp type-vip */
.stamp.type-vip {
  background-image: url("../images/etc/img-stamp-s-vip.svg");
}
.stamp.type-vip .stamp-text {
  color: var(--vip);
}
.stamp.type-vip.type-large {
  background-image: url("../images/etc/img-stamp-l-vip.svg");
}
.stamp.type-vip.type-large .stamp-text {
  font-size: 1.8rem;
  line-height: 2rem;
}

/* coupon-code */
.coupon-code {
  position: relative;
  z-index: 0;
  border: 1px solid #a5a4a7; /* var(--secondary-dark) */
  border-radius: 20px;
  background-color: #fff;
}
.coupon-code::before,
.coupon-code::after {
  content: "";
  position: absolute;
  bottom: 49px;
  z-index: 10;
  display: block;
  width: 9px;
  height: 28px;
  margin-bottom: -14px;
  background: no-repeat 50% 50%;
}
.coupon-code::before {
  left: -1px;
  background-image: url("../images/etc/img-couponeline-l.svg");
}
.coupon-code::after {
  right: -1px;
  background-image: url("../images/etc/img-couponeline-r.svg");
}
.coupon-code-top {
  padding: 29px;
}
/* type-new 22.09.08 */
.coupon-code-top.type-new::before {
  content: "";
  position: absolute;
  bottom: 37%;
  left: 13%;
  display: block;
  width: 20px;
  height: 75px;
  background: url("../images/etc/img-coupon-particle-l.png") no-repeat 50% 50% / 100% auto;
}
.coupon-code-top.type-new::after {
  content: "";
  position: absolute;
  right: 10%;
  bottom: 60%;
  display: block;
  width: 74px;
  height: 73px;
  background: url("../images/etc/img-coupon-particle-r.png") no-repeat 50% 50% / 100% auto;
}
.coupon-code-top.type-new.type-02::before {
  content: "";
  position: absolute;
  bottom: 49px;
  left: 50%;
  display: block;
  width: 100%;
  height: 180px;
  background: url("../images/event/img-pollen.gif") no-repeat 50% 0 / 120% auto;
  transform: translateX(-50%);
}
.coupon-code-top.type-new.type-02::after {
  content: "";
  display: none;
}
.coupon-code-info {
  margin: 0;
  padding: 0;
  text-align: center;
}
.coupon-code-info-key {
  margin-bottom: 2px;
  color: var(--gray-70);
  font-size: 1.2rem;
  line-height: 1.8rem;
}
.coupon-code-info-val {
  margin: 0;
  font-size: 1.7rem;
  line-height: 2.1rem;
  word-wrap: break-word;
  word-break: keep-all;
}
/* 22.09.08 */
.coupon-code-info-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 41px;
  color: #808080;
  font-size: 1.5rem;
  line-height: 2rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.coupon-code-info-text span {
  color: #4d4d4d;
}

.coupon-code-bottom {
  border-top: 1px dashed var(--secondary-dark);
}
.coupon-code-button {
  border-radius: 0 0 19px 19px;
}
.coupon-code-barcode {
  max-width: 640px;
  margin: 0 auto;
}
.coupon-code-barcode-inner {
  position: relative;
  padding-bottom: 26.923077%;
}
.coupon-code-barcode-image {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.coupon-code-barcode-num {
  margin-top: 6px;
  font-size: 1.6rem;
  line-height: 2.3rem;
  text-align: center;
  word-wrap: break-word;
  word-break: keep-all;
}
.coupon-code .stamp {
  position: absolute;
  top: 13px;
  right: 13px;
}

/* coupon-code type-barcode */
.coupon-code.type-barcode {
  padding: 27px 25px;
}

/* coupon-code type-expire */
.coupon-code.type-expire {
  border-color: #f0edfa;
}
.coupon-code.type-expire::before {
  background-image: url("../images/etc/img-couponeline-l-disabled.svg");
}
.coupon-code.type-expire::after {
  background-image: url("../images/etc/img-couponeline-r-disabled.svg");
}
.coupon-code.type-expire .coupon-code-barcode,
.coupon-code.type-expire .coupon-code-barcode-num,
.coupon-code.type-expire .coupon-code-top,
.coupon-code.type-expire .coupon-code-bottom {
  opacity: 0.1;
}
.coupon-code.type-expire .stamp {
  opacity: 0.8;
}
.coupon-code.type-expire .coupon-code-button[disabled] {
  border-color: var(--secondary);
  background-color: var(--secondary);
  color: #fff;
}

/* coupon-code type-vip */
.coupon-code.type-vip {
  border-color: var(--vip-dark);
}
.coupon-code.type-vip::before {
  background-image: url("../images/etc/img-couponeline-vip-l.svg");
}
.coupon-code.type-vip::after {
  background-image: url("../images/etc/img-couponeline-vip-r.svg");
}
.coupon-code.type-vip .coupon-code-bottom {
  border-top-color: var(--vip-dark);
}
.coupon-code.type-vip.type-expire {
  border-color: #f3f0eb;
}
.coupon-code.type-vip.type-expire::before {
  background-image: url("../images/etc/img-couponeline-vip-l-disabled.svg");
}
.coupon-code.type-vip.type-expire::after {
  background-image: url("../images/etc/img-couponeline-vip-r-disabled.svg");
}
.coupon-code.type-vip.type-expire .coupon-code-button[disabled] {
  border-color: var(--vip);
  background-color: var(--vip);
}

/* type-gray 22.09.08 */
.layer-wrap--dropdown .coupon-detail {
  position: relative;
  min-height: 267px;
  padding-bottom: 0;
}
.layer-wrap--dropdown .coupon-detail .ui-buttons--coupon {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.coupon-detail-info.type-vip,
.coupon-detail-info.type-con,
.coupon-detail-info.type-blue {
  position: relative;
  min-height: 200px;
}
.coupon-detail-info.type-02:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 30px;
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 100%;
  background: #f9f9f9;
}
.coupon-detail-info.type-con:after {
  content: "";
  position: absolute;
  top: 0;
  right: -24px;
  display: block;
  width: 215px;
  height: 186px;
  background: url("../images/coupon/img-coupon-con.png") no-repeat center / auto 100%;
}
.coupon-detail-info.type-vip:after {
  content: "";
  position: absolute;
  top: 0;
  right: -24px;
  display: block;
  width: 215px;
  height: 186px;
  background: url("../images/coupon/img-coupon-vip.png") no-repeat center / auto 100%;
}
.coupon-detail-info.type-con.type-02:after {
  content: "";
  position: absolute;
  top: auto;
  right: 0px;
  bottom: 45px;
  display: block;
  width: 134px;
  height: 93px;
  background: url("../images/coupon/img-coupon-con-2.png") no-repeat center / 100% auto;
}
.coupon-detail-info.type-vip.type-02:after {
  content: "";
  position: absolute;
  top: auto;
  right: 10px;
  bottom: 35px;
  display: block;
  width: 125px;
  height: 98px;
  background: url("../images/coupon/img-coupon-vip-2.png") no-repeat center / 100% auto;
}
.coupon-detail-info.type-blue.type-02:after {
  content: "";
  position: absolute;
  top: auto;
  right: 0;
  bottom: 22px;
  display: block;
  width: 118px;
  height: 112px;
  background: url("../images/coupon/img-coupon-blue-2.png") no-repeat center / 100% auto;
}
.layer-wrap--dropdown .coupon-detail .coupon-code-barcode-inner {
  position: inherit;
  padding-bottom: 0;
  text-align: center;
}
.layer-wrap--dropdown .coupon-detail .coupon-code-barcode-image {
  position: inherit;
  display: block;
  width: auto;
  height: 65px;
  margin: 0 auto;
}
.coupon-code.type-gray {
  position: relative;
  z-index: 0;
  margin-top: 25px;
  border: 1px solid #c1c1c1;
  border-radius: 20px;
  background-color: #fff;
}
.coupon-code.type-gray .coupon-code-bottom {
  border-top: 1px dashed #c1c1c1;
}
.coupon-code.type-gray::before {
  background-image: url("../images/etc/img-couponeline-gray-l.svg");
}
.coupon-code.type-gray::after {
  background-image: url("../images/etc/img-couponeline-gray-r.svg");
}

/* coupon-button-blnad 22.09.08 */
.coupon-button-brand.type-line {
  padding-top: 15px;
  border-top: 1px solid var(--gray-30);
}
.coupon-button-brand .sorting-inner {
  padding-right: 0;
}
.coupon-button-brand .sorting-inner::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  display: block;
  width: 50px;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 1) 95%,
    rgba(255, 255, 255, 1) 100%
  );
}
.coupon-button-brand .sorting-inner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: block;
  width: 24px;
  height: 100%;
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 1) 95%,
    rgba(255, 255, 255, 1) 100%
  );
}
.coupon-button-brand .sorting-layer {
  display: block;
  height: auto;
}
.coupon-button-brand .sorting-list {
  margin: 0 -5px;
  padding: 0px 24px 10px;
}
.coupon-button-brand .sorting-item {
  position: relative;
  padding: 0 5px 5px;
}
.coupon-button-brand .sorting-item .ui-badge {
  position: absolute;
  bottom: -5px;
  left: 50%;
  z-index: 5; /* 23-08-18 접근성 수정 */
  transform: translateX(-50%);
}
.coupon-button-brand .ui-radio-block.type-tab .ui-label {
  position: relative;
  display: block;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 15px;
}
.coupon-button-brand .ui-radio-block.type-tab .ui-label img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 15px;
}
.coupon-button-brand .ui-radio-block.type-tab .ui-radio:checked + .ui-label {
  z-index: 0;
}
.coupon-button-brand .ui-radio-block.type-tab .ui-radio:checked + .ui-label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background: rgba(256, 256, 256, 0.6) url("../images/common/ic-radio-c.svg") no-repeat 50% 50%;
  box-shadow: inset 0 0 0 3px var(--primary);
}
.coupon-button-brand .ui-radio-block.type-tab .ui-radio:checked ~ .ui-label + .ui-badge {
  display: none;
}
.coupon-button-brand .ui-radio-block.type-tab .ui-radio ~ .ui-label + .ui-badge {
  display: block;
}

/* usage-count */
.usage-count {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 25px;
  border: 1px solid var(--gray-30);
  border-radius: 15px;
}
/* [2024.05.13] 쿠폰 상세 쿠폰 사용 부가설명 영역 상단 여백 추가 : FREEST */
.ITG_APP_CPON_CN {
  margin-top: 20px;
}
.usage-count-item {
  position: relative;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 20px;
  -webkit-box-flex: 1;
}
.usage-count-item + .usage-count-item {
  margin-left: 1px;
}
.usage-count-item + .usage-count-item::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: -1px;
  display: block;
  border-left: 1px solid var(--gray-30);
}
.usage-count-key {
  margin-bottom: 7px;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.usage-count-val {
  margin: 0;
  font-size: 0;
  line-height: 0;
  text-align: right;
}
.usage-count-num,
.usage-count-unit {
  display: inline-block;
  vertical-align: top;
}
.usage-count-num {
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 3.3rem;
}
.usage-count-unit {
  margin-left: 5px;
  padding: 0.8rem 0 0.7rem;
  font-size: 1.3rem;
  line-height: 1.8rem;
}

/* store */
.store::before {
  content: "";
  display: table;
}
.store-list {
  margin: -8px 0 0 -8px;
  padding: 0;
  list-style: none;
  font-size: 0;
  line-height: 0;
}
.store-item {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  width: 50%;
  padding: 8px 0 0 8px;
  font-size: 1rem;
  line-height: normal;
}
.store-link {
  display: block;
  height: 48px;
  border-radius: 6px;
  background: no-repeat 15px 50% var(--gray-10);
}
.store-link.type-google {
  background-image: url("../images/etc/store-google.svg");
}
.store-link.type-apple {
  background-image: url("../images/etc/store-apple.svg");
}

/* down-arrow-link */
.down-arrow-link {
  display: inline-block;
  vertical-align: top;
  min-height: 1.8rem;
  padding-right: 21px;
  background: url("../images/icon/btn-select-l.svg") no-repeat 100% 50%;
  font-size: 1.3rem;
  line-height: 1.8rem;
}

/* down-arrow-link type-icon-only */
.down-arrow-link.type-icon-only {
  padding-right: 12px;
}
.down-arrow-link.type-icon-only {
  position: relative;
}
.down-arrow-link.type-icon-only::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px;
}

/* down-arrow-link type-white */
.down-arrow-link.type-white {
  background-image: url("../images/icon/btn-select-l-white.svg");
}

/* down-arrow-link type-black */
.down-arrow-link.type-black {
  background-image: url("../images/icon/btn-select-l-black.svg");
}

/* down-arrow-link-wrap */
.down-arrow-link-wrap {
  margin-bottom: 15px;
  font-size: 0;
  line-height: 0;
  text-align: right;
}

/* usage-history */
.usage-history::before {
  content: "";
  display: table;
}
.usage-history-list {
  margin: -10px 0 0;
  padding: 0;
  list-style: none;
}
.usage-history-item {
  padding-top: 10px;
}
.usage-history-block {
  border: 1px solid var(--gray-30);
  border-radius: 6px;
}
.usage-history-top {
  position: relative;
  display: block;
  padding: 20px;
  color: inherit;
  text-decoration: none;
}
.usage-history-top.type-link {
  padding-right: 48px;
}
.usage-history-top.type-link::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  display: block;
  width: 11px;
  height: 11px;
  margin-top: -5px;
  background: url("../images/icon/btn-more.svg") no-repeat 50% 50%;
}
.usage-history-category,
.usage-history-title {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.usage-history-category {
  max-height: 3.4rem;
  margin-bottom: 2px;
  color: var(--gray-70);
  font-size: 1.2rem;
  line-height: 1.7rem;
}
.usage-history-title {
  max-height: 4.8rem;
  font-size: 1.7rem;
  line-height: 2.4rem;
}
.usage-history-body {
  padding: 0 20px 20px;
}
.usage-history-body::before {
  content: "";
  display: block;
  margin: 0 auto 20px;
  border-top: 1px solid var(--gray-30);
}
.usage-history-body .form-detail-item:not(:first-child) {
  margin-top: 20px;
}

/* rating-info */
.rating-info {
  display: block;
  margin: 0 0 15px;
  padding: 20px;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 3px 5px 0 rgba(217, 223, 235, 0.3);
  font-weight: 300;
  font-size: 1.7rem;
  line-height: 2.4rem;
}
.rating-info-text {
  display: block;
  padding-right: 24px;
  background: url("../images/icon/btn-more.svg") no-repeat 100% 50%;
}

/* benefit-nav */
.benefit-nav {
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 3px 5px 0 rgba(217, 223, 235, 0.3);
}
.benefit-nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.benefit-nav-item + .benefit-nav-item::before {
  content: "";
  display: block;
  margin: 0 20px;
  border-top: 1px solid #e9ecef;
}
.benefit-nav-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  padding: 15px 20px;
  color: inherit;
  text-decoration: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.benefit-nav-block.type-link::after {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  margin-left: 13px;
  background: url("../images/icon/btn-more.svg") no-repeat 100% 50%;
}
.benefit-nav-icon {
  width: 36px;
  height: 36px;
  margin-right: 10px;
  background: no-repeat 50% 50%;
}
.benefit-nav-icon.type-1 {
  background-image: url("../images/icon/ic-coupon.svg");
}
.benefit-nav-icon.type-2 {
  background-image: url("../images/icon/ic-benefit.svg");
}
.benefit-nav-title {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  font-size: 1.5rem;
  line-height: 2.1rem;
  -webkit-box-flex: 1;
}
.benefit-nav-count {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2.2rem;
}
/* 22.11.28 benefit-nav type-2 */
.benefit-nav.type-2 {
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}
.benefit-nav.type-2 .benefit-nav-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-x: auto;
  margin-bottom: 20px;
  background-color: #f4f6f8;
}
.benefit-nav.type-2 .benefit-nav-item {
  flex: auto;
}
.benefit-nav.type-2 .benefit-nav-item + .benefit-nav-item {
  margin-left: 12px;
}
.benefit-nav.type-2 .benefit-nav-item + .benefit-nav-item::before {
  display: none;
}
.benefit-nav.type-2 .benefit-nav-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 7px 12px 8px;
  border-radius: 37px;
  background-color: #fff;
  color: inherit;
  box-shadow: 0 3px 5px 0 rgba(217, 223, 235, 0.3);
  font-weight: 500;
  text-decoration: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.benefit-nav.type-2 .benefit-nav-icon {
  width: 21px;
  height: 21px;
  margin-right: 3px;
  background: no-repeat 50% 0% / 100% auto;
}
.benefit-nav.type-2 .benefit-nav-icon.type-1 {
  width: 22px;
  height: 22px;
  background-image: url("../images/icon/ic-all-benefit-coupon.png");
}
.benefit-nav.type-2 .benefit-nav-icon.type-2 {
  background-image: url("../images/icon/ic-all-benefit-entry.png");
}
.benefit-nav.type-2 .benefit-nav-icon.type-3 {
  background-image: url("../images/icon/ic-all-benefit-heart.png");
}
.benefit-nav.type-2 .benefit-nav-title {
  flex: none;
  min-width: 0;
  font-size: 1.5rem;
  line-height: 20px;
}
.benefit-nav.type-2 .benefit-nav-count {
  margin-left: 4px;
  font-size: 1.4rem;
  line-height: 20px;
}

/* counting-nav */
.counting-nav::before {
  content: "";
  display: table;
}
.counting-nav-list {
  margin: -35px 0 0;
  padding: 0;
  list-style: none;
}
/* 23.01.04 추가 */
.counting-nav-list.type-line-big > li {
  position: relative;
}
.counting-nav-list.type-line-big > li + li {
  margin-top: 35px;
  padding-top: 45px;
}
.counting-nav-list.type-line-big > li + li::before {
  content: "";
  position: absolute;
  top: 0;
  right: -24px;
  left: -24px;
  height: 10px;
  background-color: var(--gray-10);
}
/* //23.01.04 추가 */
.counting-nav-item {
  padding-top: 25px; /* 22.08.25 혜택 간격 조정 */
}
.counting-nav-head,
.counting-nav-child-link,
.counting-nav-right {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.counting-nav-head,
.counting-nav-child-link {
  color: inherit;
  text-decoration: none;
}
.counting-nav-right,
.counting-nav-new,
.counting-nav-head-count2,
.counting-nav-head-logo {
  -ms-flex: none;
  flex: none;
  -webkit-box-flex: 0;
}
.counting-nav-new {
  display: block;
  height: 2.1rem;
  margin-left: 2px;
}
.counting-nav-new::before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  margin-top: 2px;
  border-radius: 100%;
  background-color: #ff4775;
}
.counting-nav-head.type-link {
  padding-right: 24px;
  background: url("../images/icon/btn-more-l.svg") no-repeat 100% 50%;
}
/* 23.01.04 추가 */
.counting-nav-head.type-link.pos {
  background: none;
}
.counting-nav-head.type-link.pos::after {
  content: "전체보기";
  position: absolute;
  right: 0;
  display: block;
  margin-left: 15px;
  padding-right: 12px;
  /* width: 12px;
height: 12px; */
  background: url("../images/icon/btn-more-l.svg") no-repeat right 1px;
}
/* //23.01.04 추가 */
.counting-nav-child-link {
  padding-right: 18px;
  background: url("../images/icon/btn-more.svg") no-repeat 100% 50%;
}
.counting-nav-head-title {
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 2.1rem;
}
.counting-nav-head-count {
  position: relative;
  margin-left: 6px;
  padding: 1px 7px 2px;
  border-radius: 10px;
  background-color: #2d3239;
  color: #fff;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.7rem;
}
.counting-nav-head-logo {
  display: block;
  height: 2.1rem;
  margin-left: 5px;
  background: no-repeat 50% 50%;
}
.counting-nav-head-logo.type-pick {
  width: 36px;
  background-image: url("../images/icon/ic-pick.svg");
}
.counting-nav-head-count2 {
  margin-left: auto;
  padding-left: 12px;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.9rem;
}
.counting-nav-child-text {
  display: block;
}
.counting-nav-child-list {
  margin: 25px 0 0;
  padding: 0 10px;
  list-style: none;
}
.counting-nav-child-item + .counting-nav-child-item {
  margin-top: 20px;
}
.counting-nav-child-text {
  color: var(--gray-70);
  font-size: 1.5rem;
  line-height: 2.1rem;
}
.counting-nav-right {
  margin-left: auto;
}
.counting-nav-right .counting-nav-new,
.counting-nav-right .counting-nav-head-count2 {
  margin-left: 0;
}

/* counting-nav type-group */
.counting-nav.type-group > .counting-nav-list > .counting-nav-item:not(:first-child) {
  margin-top: 25px; /* 22.08.25 혜택 간격 조정 */
  border-top: 1px solid var(--gray-30);
}

/* date-head */
.date-head {
  margin: 25px 0 15px;
}

/* map-area */
.map-area {
  position: relative;
  height: 120px;
  margin-top: 20px;
  background: var(--gray-20);
  color: var(--gray-60);
  text-align: center;
}

/* date-head */
.date-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 25px 0 15px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.date-head-button {
  display: block;
  padding: 5px 8px;
}
.date-head-button::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: no-repeat 50% 50%;
}
.date-head-button.type-prev {
  margin-right: 4px;
  padding-right: 2px;
}
.date-head-button.type-prev::before {
  background-image: url("../images/icon/btn-prevarrow-l.svg");
}
.date-head-button.type-next {
  margin-left: 4px;
  padding-left: 2px;
}
.date-head-button.type-next::before {
  background-image: url("../images/icon/btn-nextarrow-l.svg");
}
.date-head-title {
  margin: 0;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 2.4rem;
}

/* total-amount */
.total-amount {
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid var(--gray-30);
}
.total-amount.type-narrow {
  margin-bottom: 20px;
  padding-bottom: 0;
}
.total-amount .logo-image {
  margin-bottom: 10px;
}
.total-amount-head {
  margin-bottom: 5px;
}
.total-amount-head.type-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.total-amount-head.type-flex .type-flexible {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.total-amount-head.type-flex .ui-select-small-block {
  margin-right: 14px;
}
.total-amount-head.type-text-large {
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 17px;
}
.total-amount-head.type-text-large .total-amount-title {
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}
.total-amount-head .reload-button {
  margin-left: 1px;
}
.total-amount-title {
  margin: 0;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2.2rem;
}
.total-amount-title.type-flex,
.total-amount-val-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
/* [2025-09-08 oh] 12444-216744440 하나Pay및 LMS명세서 문구 디자인 요청 */
.total-base-date {
  line-height: 2.2rem;
  margin-left: 0.6rem;
  font-weight: 400;
  font-size: 1.2rem;
  color: #666;
}
/*
.total-amount-val {
font-size: 1.7rem;
line-height: 2.4rem;
font-weight: 700;
color: var(--secondary);
}
22.11.16 운영이랑 동일하게 변경 */
.total-amount-val {
  color: var(--secondary);
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 3.5rem;
}
/* 22.07.27 */
.total-amount-val.small-text {
  font-size: 1.7rem;
  line-height: 2.4rem;
}
.total-amount-val.big-text {
  font-size: 2.8rem;
  line-height: 3.6rem;
}
.total-amount-val-group .ui-basic-button {
  margin-left: 15px;
}
.total-amount-date,
.total-amount-discription {
  margin-top: 4px;
  color: var(--gray-70);
  font-size: 1.2rem;
  line-height: 1.7rem;
}
.total-amount-discription {
  margin-top: 3px;
}
.total-amount-info {
  margin-top: 15px;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 1.8rem;
}

/* total-amount type-no-line */
.total-amount.type-no-line {
  margin-bottom: 35px;
  padding-bottom: 0;
  border-bottom: none;
}

/* 23.01.13 추가, 23.02.07 수정 */
.data-food-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.total-amount .data-food-wrap .logo-image {
  margin-bottom: 0;
}
.total-amount .data-food {
  position: relative;
  top: -7px;
  width: auto;
  padding-left: 14px;
  animation: data_food 0.4s cubic-bezier(0.5, -0.75, 0.7, 2) both;
}
.total-amount .data-food::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 5px;
  display: block;
  clear: both;
  border-top: 0 solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #cbf9ff;
  border-left: 7px solid transparent;
  border-radius: 5px;
  transform: rotate(-90deg);
}
.total-amount .data-food > a {
  padding: 5px 14px 6px 7px;
  border-radius: 30px;
  background: linear-gradient(45deg, #cbf9ff, #f1dcff);
  color: #000;
  font-size: 1.4rem;
  line-height: 18px;
}
.total-amount .data-food > a::before {
  content: "";
  position: relative;
  top: 5px;
  display: inline-block;
  clear: both;
  width: 30px;
  height: 30px;
  margin-right: 3px;
  background-image: url("../images/contents/ico_data_food.gif");
  background-size: cover;
}
.total-amount .data-food > a::after {
  content: "";
  display: inline-block;
  vertical-align: 2px;
  clear: both;
  width: 5px;
  height: 5px;
  margin-left: 4px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  background-color: transparent;
  transform: rotate(-45deg);
}

/* 23.12.26 추가(쇼핑혜택) */
.total-amount .data-benefit {
  animation: data_food 0.4s cubic-bezier(0.5, -0.75, 0.7, 2) both;
}
.total-amount .data-benefit a {
  position: relative;
  display: flex;
  gap: 4px;
  align-items: center;
  height: 30px;
  margin-left: 6px;
  padding: 0 12px;
  border-radius: 15px;
  background: linear-gradient(270deg, #eddeff 0%, #cbf9ff 94.12%);
  color: #000;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  line-height: normal;
}
.total-amount .data-benefit a::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -3px;
  display: block;
  width: 9px;
  height: 14px;
  background: url("/images/contents/ico_bubble_tail.png") no-repeat center / contain;
}
.total-amount .data-benefit a i {
  width: 36px;
  height: 30px;
  margin-top: -6px;
}
.total-amount .data-benefit a::after {
  content: "";
  display: inline-block;
  vertical-align: 2px;
  clear: both;
  /* margin-left: 4px; */
  width: 5px;
  height: 5px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  background-color: transparent;
  transform: rotate(-45deg);
}
.total-amount .data-benefit a i img {
  object-fit: contain;
  object-position: center;
  width: 100%;
  height: 100%;
}
/* [2026-07-14 KJH] [WPM-14640] mpi 네이버페이 결제 관련 안내페이지 */
.total-amount-logo {
  display: flex;
  align-items: center;
  column-gap: 20px;
}
.total-amount-logo > img {
  width: auto;
  height: 20px;
}
/* // [2026-07-14 KJH] [WPM-14640] mpi 네이버페이 결제 관련 안내페이지 */

@keyframes data_food {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  30% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/* //23.01.13 추가, 23.02.07 수정 */

/* card-details-head */
.card-details-etc {
  display: block;
  color: var(--gray-70);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 18px;
}
.card-details-img {
  display: block;
  height: 26px;
  margin-top: 15px;
}
.card-details-name {
  display: block;
  margin-top: 15px;
  color: var(--basic);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 18px;
}

/* service-logo-list */
.service-logo-list-title {
  margin-bottom: 25px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e9ecef;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 18px;
}
.service-logo-list {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 25px 10px;
}
.service-logo-list.type-col2 {
  grid-template-columns: 1fr 1fr;
}
.service-logo-item-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.service-logo-item .logo-image {
  margin-right: 20px;
}
.service-logo-item-title {
  font-size: 1.7rem;
  line-height: 21px;
  white-space: nowrap;
}

/* total-box */
.total-box {
  padding: 20px;
  border-radius: 6px;
  background-color: var(--gray-20);
}
.total-box-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.total-box-item + .total-box-item {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-30);
}
.total-box-key {
  -ms-flex: none;
  flex: none;
  font-size: 1.5rem;
  line-height: 2.2rem;
  -webkit-box-flex: 0;
}
.total-box-key .ui-arrow.type-black,
.total-box-key .ui-badge {
  margin-top: 4px;
}
.total-box-val {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 2.4rem;
  text-align: right;
  -webkit-box-flex: 1;
}
.total-box-val .unit {
  display: inline-block;
  vertical-align: middle;
  margin: 0 6px 0 2px;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 18px;
}
.total-box-val .unit:last-child {
  margin-right: 0;
}
.total-box-unit {
  display: inline-block;
  vertical-align: top;
  padding: 0.4rem 0 0.2rem 2px;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.total-box-unit.type-center {
  margin-right: 6px;
}
.total-box-arrow {
  display: inline-block;
  vertical-align: top;
  height: 2.4rem;
  margin: 0 5px;
}
.total-box-val .ui-arrow-change {
  vertical-align: top;
  height: 2.4rem;
}
.total-box-val .large-text ~ .unit {
  padding-top: 2px;
  line-height: 26px;
}
.total-box-val .large-text {
  vertical-align: middle;
}

/* total-box-item type-block */
.total-box-item.type-block {
  display: block;
}
.total-box-item.type-block .total-box-val {
  margin-top: 4px;
  text-align: left;
}

/* total-box-item type-align-top */
.total-box-item.type-align-top {
  align-items: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
}
.total-box-item.type-align-top .total-box-key {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}

/* total-box-item type-sum */
.total-box-item.type-sum .total-box-val {
  font-size: 2rem;
  line-height: 2.8rem;
}
.total-box-item.type-sum .total-box-unit {
  padding-top: 0.7rem;
  padding-bottom: 0.3rem;
}
.total-box-item.type-sum.type-align-top .total-box-key {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
.total-box-item.type-sum .total-box-val .ui-arrow-change {
  height: 2.8rem;
}
.total-box-flexfull {
  flex: 0 0 100%;
  width: 100%;
}
.total-box-info {
  color: var(--gray-80);
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.total-box-info.type-small { /* [2026-10-13 kho] [WPM-16098] 추가 */
  font-size: 1.2rem;
}

/* usage-accordion */
.usage-accordion::before {
  content: "";
  display: table;
}
.usage-accordion-list {
  margin: -25px 0 0;
  padding: 0;
  list-style: none;
}
.usage-accordion-item {
  padding-top: 25px;
}
.usage-accordion-head {
  position: relative;
}
.usage-accordion-item.js-ui-accordion__item .usage-accordion-head {
  padding-right: 26px;
}
/* [2025-07-17 kjy] [WPM-11777] 1차 심사 수정 */
.usage-accordion-item.js-ui-accordion__item:has(.usage-accordion-opener > .usage-accordion-data-key) .usage-accordion-head {
  padding-right: 0;
}
.usage-accordion-head .ui-radio-block.type-circle:not(.type-small) .ui-radio-object + .ui-label-text,
.usage-accordion-head .ui-radio-block.type-circle:not(.type-small) .ui-label-text + .ui-radio-object {
  margin-left: 8px;
}
.usage-accordion-opener {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.usage-accordion-opener::after {
  background-image: url("../images/icon/btn-select-l.png"); /* 22.12.15 이미지 확장자 변경 */
}
/* [2025-07-17 kjy] [WPM-11777] 1차 심사 수정 */
.usage-accordion-opener:has(.total-amount-val, .usage-accordion-data-key){
  position: relative;
}
.usage-accordion-data {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.usage-accordion-data-key {
  -ms-flex: none;
  flex: none;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 2.4rem;
  -webkit-box-flex: 0;
}
.usage-accordion-data-val {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 2.4rem;
  text-align: right;
  -webkit-box-flex: 1;
}
.font-weight-regular .usage-accordion-data-key,
.font-weight-regular .usage-accordion-data-val {
  font-weight: 400;
}
.usage-accordion-layer::before {
  content: "";
  display: table;
}
.usage-accordion-contents {
  margin-top: 10px;
  padding-top: 25px;
  padding-bottom: 10px;
  border-top: 1px solid var(--gray-30);
}
.usage-accordion-item:last-child .usage-accordion-contents {
  padding-bottom: 0;
}
.usage-accordion-contents.type-no-line {
  margin-top: 0;
  border-top: none;
}
.usage-accordion-contents .form-detail.type-line {
  margin-top: 25px;
  padding-top: 25px;
}
.usage-accordion-contents.type-no-padding {
  padding: 0;
}
.usage-accordion-data-icon {
  display: block;
  width: 26px;
  height: 26px;
  margin-right: 14px;
  background: no-repeat 50% 50%;
  background-size: 100% 100%;
}
.usage-accordion-data-icon.type-1 {
  background-image: url("../images/icon/ic-apartmentfee-s.svg");
}
.usage-accordion-data-icon.type-2 {
  background-image: url("../images/icon/ic-gas-s.svg");
}
.usage-accordion-data-icon.type-3 {
  background-image: url("../images/icon/ic-electronic-s.svg");
}
.usage-accordion-data-icon.type-4 {
  background-image: url("../images/icon/ic-social-insurance-s.svg");
}
.usage-accordion-data-icon.type-5 {
  background-image: url("../images/icon/ic-phone fee-s.svg");
}
.usage-accordion-data-icon.type-6 {
  background-image: url("../images/icon/ic-school-s.svg");
}
.usage-accordion-data-icon.type-7 {
  background-image: url("../images/icon/ic-rent-s.svg");
}
/* 23.03.20 추가 */
.usage-accordion-data-icon.type-8 {
  background-image: url("../images/icon/ic-kinder.svg");
}
/* //23.03.20 추가 */

/* usage-accordion-data type-aling-middle */
.usage-accordion-data.type-aling-middle {
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}

/* usage-accordion-data-key type-flex */
.usage-accordion-data-key.type-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.usage-accordion-data-key.type-flex .ui-button-question {
  margin-left: 5px;
}

/* usage-accordion-opener type-part */
.usage-accordion-opener.type-part {
  width: 26px;
}

/* usage-accordion type-medium-margin */
.usage-accordion.type-medium-margin .usage-accordion-list {
  margin-top: -35px;
}
.usage-accordion.type-medium-margin .usage-accordion-item {
  padding-top: 35px;
}

/* 2023.02.28 .usage-accordion type-detail-choice */
.usage-accordion.type-detail-choice .usage-accordion-data:not(:first-child) {
  margin-top: 10px;
}
.usage-accordion.type-detail-choice .detail-history-layer-contents {
  padding-left: 0;
}
.usage-accordion.type-detail-choice .detail-history-opener {
  width: 20px;
}
.usage-accordion.type-detail-choice .form-detail-item {
  margin-top: 10px;
}

/* section-accordion-list */
.section-accordion-item {
  padding: 25px 0;
}
.section-accordion-item + .section-accordion-item {
  border-top: 1px solid var(--gray-30);
}
.section-accordion-item:last-child {
  padding-bottom: 0;
}
.section-accordion-opener {
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 21px;
}
.section-accordion-contents {
  padding-top: 25px;
}

/* bill-box */
.type-bill {
  border-bottom: none;
}
.bill-box {
  display: flex;
}
.bill-box-item {
  display: flex;
  align-items: center;
}
.bill-box-item + .bill-box-item {
  margin-left: 5px;
  /* border-left: 1px solid #e5e5e5; */
  padding-left: 5px;
}
/* [2024-04-30 : shj] 추가 */
.bill-box-item.vertical-item {
  margin-bottom: 10px;
  margin-left: 0;
  padding-left: 0;
}
.bill-box-item.vertical-item:last-child {
  margin-bottom: 0;
}
/* // [2024-04-30 : shj] 추가 */
.bill-icon {
  display: inline-block;
  vertical-align: top;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  background: no-repeat 50% 50% / 20px;
}
.bill-icon.type-1 {
  background-image: url("../images/icon/ic_analysis.png");
}
.bill-icon.type-2 {
  background-image: url("../images/icon/ic_benefit.png");
}
/* [2024-04-30 : shj] 추가 */
.bill-icon.type-3 {
  background-image: url("../images/icon/ic_vip.gif");
}
/* // [2024-04-30 : shj] 추가 */
/* [2025-09-08 oh] 12444-216744440 하나Pay및 LMS명세서 문구 디자인 요청 */
.bill-icon.type-4 {
  background-image: url("../images/icon/ic_bill.png");
}
.bill-info {
  vertical-align: top;
}
.bill-title {
  margin: 0;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.8rem;
}
.bill-link {
  height: 18px;
  padding-right: 14px;
  background: url("../images/icon/btn-more.png") no-repeat 100% 50%; /* 22.12.15 이미지 확장자 변경 */
  background-size: 80% auto;
}

/*
.type-bill {
border-bottom: none;
}
.bill-box {
padding: 16px 15px;
border-radius: 6px;
border: 1px solid #e5e5e5;
display: flex;
}
.bill-box-item {
width: calc(50% - 2px);
position: relative;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.bill-box-item + .bill-box-item {
margin-left: 5px;
border-left: 1px solid #e5e5e5;
padding-left: 5px;
}
.bill-icon {
display: inline-block;
vertical-align: top;
width: 22px;
height: 22px;
margin-right: 6px;
background: no-repeat 50% 50% / 20px;
}
.bill-icon.type-1 {
background-image: url('../images/icon/ic_analysis.gif');
}
.bill-icon.type-2 {
background-image: url('../images/icon/ic_benefit.gif');
}
.bill-info {
vertical-align:top;
}
.bill-title {
margin: 0;
font-size: 1.5rem;
line-height: 1.8rem;
font-weight: 400;
}
.bill-link {
padding-right: 14px;
height: 18px;
background: url('../images/icon/btn-more.svg') no-repeat 100% 50%;
}
*/

/* rating-card */
.rating-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 20px;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 3px 5px 0 rgba(217, 223, 235, 0.3);
}
.rating-card-item {
  position: relative;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 6px 0;
  text-align: right;
  -webkit-box-flex: 1;
}
.rating-card-item::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  display: block;
  width: 36px;
  height: 36px;
  background: no-repeat 50% 50%;
}
.rating-card-item.type-current::before {
  background-image: url("../images/icon/ic-grade.svg");
}
.rating-card-item.type-next::before {
  background-image: url("../images/icon/ic-grade-next.svg");
}
.rating-card-item + .rating-card-item {
  margin-left: 20px;
  padding-left: 20px;
  border-left: 1px solid #e9ecef;
}
.rating-card-item + .rating-card-item::before {
  left: 16px;
}
.rating-card-key {
  margin-bottom: 7px;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.rating-card-val {
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 2.3rem;
}

/* rating-card type-outline */
.rating-card.type-outline {
  border: 1px solid #e6e9ef;
  box-shadow: none;
}

/* date-select */
.date-select {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  width: 140px;
  margin: 0 auto;
  text-align: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.date-select-button {
  width: 24px;
  height: 24px;
}
.date-select-button.type-prev {
  background: url("../images/common/ic-btn-light-prev.svg") center center no-repeat;
}
.date-select-button.type-next {
  background: url("../images/common/ic-btn-light-next.svg") center center no-repeat;
}
.date-select-text {
  margin: 0 4px;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 24px;
}

/* bullet-link-list */
.bullet-link-area {
  margin-top: 25px;
}
.bullet-link-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  padding: 15px 25px;
  border-radius: 6px;
  background-color: var(--secondary);
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.bullet-link-item {
  position: relative;
  -ms-flex: 1;
  flex: 1;
  color: #ffffff;
  font-size: 1.3rem;
  line-height: 18px;
  text-align: center;
  -webkit-box-flex: 1;
}
.bullet-link-item + .bullet-link-item:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -3px;
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border: 1.5px solid #ffffff;
  border-radius: 3px;
  opacity: 0.5;
}
.bullet-link-item:first-of-type {
  text-align: left;
}
.bullet-link-item:last-of-type {
  text-align: right;
}
.bullet-link-item .bullet-link-button {
  display: block;
}

/* chart bar */
.chart-area {
  overflow: hidden;
  padding-top: 25px;
  padding-bottom: 25px;
}
.chart-area.type-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
}
.chart-area.type-flex .chart {
  -ms-flex: 1;
  flex: 1;
  margin-left: 39px;
  -webkit-box-flex: 1;
}
.chart-area.type-no-padding-top {
  padding-top: 0;
}
.chart-area .chart-box {
  position: relative;
  box-sizing: border-box;
  height: 169px;
  padding: 0 10%;
  border-top: 1px dotted var(--gray-30);
  border-bottom: 1px dotted var(--gray-30);
}
.chart-area .chart-box:before {
  content: "";
  position: absolute;
  top: 55px;
  right: 0;
  bottom: 55px;
  left: 0;
  box-sizing: border-box;
  border-top: 1px dotted var(--gray-30);
  border-bottom: 1px dotted var(--gray-30);
}
.chart-area .bar-list {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  box-sizing: border-box;
  height: 100%;
  padding-top: 50px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-box-align: flex-end;
  -ms-flex-align: flex-end;
}
.chart-info {
  margin-bottom: 25px;
}
.chart-info-text {
  color: var(--basic);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 20px;
}
.chart-info-value {
  position: relative;
  margin-top: 5px;
  color: var(--gray-70);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 32px;
}
.chart-info-value .point {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  max-width: 90px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-list .bar-item {
  position: relative;
  width: 20px;
  border-radius: 10px 10px 0 0;
  background: #e6e9ef;
}
.bar-list .bar-item .chart-date {
  position: absolute;
  right: -15px;
  bottom: -26px;
  left: -15px;
  text-align: center;
}
.bar-list .bar-item .chart-bubble {
  bottom: 100%;
  display: none;
  margin-bottom: 12px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.bar-list .bar-item .open-text {
  display: inline;
}
.bar-list .bar-item .close-text {
  display: none;
}
.bar-list .bar-item.is-active {
  background: var(--secondary);
}
.bar-list .bar-item.is-active .chart-bubble {
  display: block;
}
.bar-list .bar-item.is-active .open-text {
  display: none;
}
.bar-list .bar-item.is-active .close-text {
  display: inline;
}
.bar-list .bar-item .bar-item-button {
  display: block;
  width: 100%;
  height: 100%;
}
.bar-item .chart-bubble {
  left: 50%;
  margin-left: 0;
}

/* chart bar- type-increase, type-decrease */
.type-increase .chart-info-value,
.type-decrease .chart-info-value {
  padding-left: 23px;
  color: var(--basic);
}
.type-increase .chart-info-value:before,
.type-decrease .chart-info-value:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  margin-top: -9px;
}
.type-increase .chart-info-value:before {
  background: url("../images/common/ic-up.svg") center center no-repeat;
}
.type-increase .point {
  color: var(--wrong);
}
.type-increase .bar-list .bar-item.is-active {
  background: var(--wrong);
}
.type-decrease .chart-info-value:before {
  background: url("../images/common/ic-down.svg") center center no-repeat;
}
.type-decrease .point {
  color: var(--tertiary);
}
.type-decrease .bar-list .bar-item.is-active {
  background: var(--tertiary);
}

/* chart-bubble */
.chart-bubble {
  position: absolute;
  padding: 6px 13px 5px;
  border: 1px solid var(--secondary);
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 2px 10px 0 rgba(202, 210, 226, 0.6);
  white-space: nowrap;
}
.chart-bubble::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  display: block;
  width: 5px;
  height: 5px;
  margin-top: -2px;
  margin-left: -3px;
  border: 0 solid var(--secondary);
  border-width: 0 1px 1px 0;
  background-color: #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.chart-bubble-text {
  color: var(--secondary);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.7rem;
}

/* tag report */
.tag-report-text {
  position: relative;
  z-index: 1;
  font-weight: 300;
  font-size: 1.7rem;
  line-height: 2.1rem;
}

.tag-report-link {
  margin-top: 12px;
}

.tag-report-link > a {
  display: inline-block;
  box-sizing: border-box;
  margin: 3px 3px 3px 0;
  padding: 8px 10px 7px;
  border-radius: 8px;
  color: #009688;
  font-weight: normal;
  font-size: 1.3rem;
  line-height: 1.7rem;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.tag-report-link > a:last-child {
  margin-right: 0;
}

.tag-report-link .tag-btn-ty01 {
  border: 1px solid #f1f6f6;
  background-color: #f1f6f6;
}

.tag-report-link .tag-btn-ty02 {
  border: 1px solid #dfecec;
  background-color: #fff;
}

.tag-report.ty02 {
  text-align: center;
}
.tag-btn-chk {
  position: relative;
  display: inline-block;
  margin: 15px 0 10px;
  color: #009688;
  font-weight: normal;
  font-size: 16px;
  text-decoration: none;
}
.tag-btn-chk:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #009688;
}

/* tag graph */
.tag-report-graph {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.tag-report-graph.none:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  font-weight: 400;
  font-size: 14px;
  text-align: center;
}
.tag-report-graph.none .tag-report-txt {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  display: block;
  width: 100%;
  margin-top: -30px;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
.tag-report-graph.none .tag-report-txt a {
  position: relative;
  display: inline-block;
  margin-top: 2px;
  color: #009688;
  font-weight: 400;
  font-size: 13px;
  text-decoration: none;
}
.tag-report-graph.none .tag-report-txt a:after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #009688;
}

.tag-report-graph .tag-graph {
  width: 100%;
  padding-top: 25px;
  text-align: center;
}

.tag-report-graph .tag-graph .graph {
  position: relative;
  height: 100px;
  border-bottom: 1px solid #dfdfdf;
}

.tag-report-graph .tag-graph .graph .bar_h {
  position: absolute;
  bottom: 0;
  left: calc(50% - 25px);
}
.tag-report-graph .tag-graph .graph .bar {
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-block;
  vertical-align: bottom;
  width: 50px;
  height: 100%;
  border-radius: 4px 4px 0 0;
  background: #2b9f99;
}
.animation.ty-graph .tag-report-graph .tag-graph .graph .bar {
  animation: ani-graph-line 0.8s 0s ease;
}
.tag-report-graph .tag-graph.ty02 .graph .bar {
  background: #7d66c3;
}

.tag-report-graph .tag-graph.ty03 .graph .bar {
  background: #999;
}
.tag-report-graph.none .tag-graph .graph .bar {
  animation: none;
}
@keyframes ani-graph-line {
  0% {
    height: 0%;
  }
  98% {
    height: 102%;
  }
  100% {
    height: 100%;
  }
}
.tag-report-graph .tag-graph .graph .bar:before {
  content: "";
  position: absolute;
  top: -24px;
  left: calc(50% - 10px);
  width: 20px;
  height: 20px;
  background: url("../images/icon/icon-tag-1.png") no-repeat 50% 50% / 20px 20px;
}
.tag-report-graph .tag-graph.ty02 .graph .bar:before {
  background: url("../images/icon/icon-tag-2.png") no-repeat 50% 50% / 20px 20px;
}
.tag-report-graph .tag-graph.ty03 .graph .bar:before {
  background: url("../images/icon/icon-tag-3.png") no-repeat 50% 50% / 20px 20px;
}
.tag-report-graph .tag-graph .tit {
  display: inline-block;
  height: 16px;
  margin: 8px 0 4px;
  padding: 0 6px;
  border: 1px solid #2b9f99;
  border-radius: 17px;
  color: #2b9f99;
  font-size: 12px;
  line-height: 17px;
}
.tag-report-graph .tag-graph.ty02 .tit {
  border: 1px solid #7d66c3;
  color: #7d66c3;
}
.tag-report-graph .tag-graph.ty03 .tit {
  border: 1px solid #777;
  color: #777;
}
.tag-report-graph .tag-graph .data {
  font-size: 15px;
}

/* service-info */
.service-info-list {
  margin-top: 25px;
  padding: 25px 20px;
  border: 1px solid #e6e9ef;
  border-radius: 15px;
  color: var(--gray-70);
  line-height: 18px;
}
.service-info-item:not(:first-child) {
  margin-top: 25px;
  padding-top: 25px;
  border-top: 1px solid #e6e9ef;
}
.service-info-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.service-info-block-left {
  -ms-flex: 1;
  flex: 1;
  -webkit-box-flex: 1;
}
.service-info-icon {
  display: block;
  width: 44px;
  height: 44px;
}
.service-info-icon.type-icon-1 {
  background: url("../images/icon/ic-insurance-11.svg");
}
.service-info-icon.type-icon-2 {
  background: url("../images/icon/ic-teeth-insurance.svg");
}
.service-info-icon.type-icon-3 {
  background: url("../images/icon/ic-simple-insurance.svg");
}
.service-info-title {
  color: var(--basic);
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 22px;
}
.service-info-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
}
.service-info-text .ui-tel-link {
  margin-bottom: auto;
  margin-left: 12px;
}
.service-info-button {
  position: relative;
  margin-top: 10px;
  padding-right: 12px;
  color: var(--secondary);
}
.service-info-button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1px;
  display: inline-block;
  padding: 3px;
  border: solid var(--secondary);
  border-width: 0 1px 1px 0;
  transform: translateY(-50%) rotate(-45deg);
}
.service-info-detail-button {
  margin-top: 10px;
  font-size: 1.2rem;
  line-height: 18px;
  text-decoration: underline;
}
.service-info-list .ui-basic-button {
  margin-top: 15px;
}

/* service-info-title type-flex */
.service-info-title.type-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
}

.select-tag-group {
  margin-top: 7px;
  font-size: 0;
}
.select-tag-group .select-tag {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 8px 8px 0 0;
  padding: 4px 24px 4px 8px;
  border: 1px solid var(--basic);
  border-radius: 13px;
  font-size: 1.2rem;
  line-height: 17px;
}
.select-tag-group .select-tag::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 7px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: url("../images/common/btn-close.svg") no-repeat 100% 50% / auto 100%;
}

/* guide-info-list */
.guide-info-list {
  margin-top: 25px;
  padding: 0 20px;
  border-radius: 6px;
  background-color: var(--gray-20);
}
.guide-info-item,
.guide-info-item-inner,
.guide-info-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.guide-info-item.type-default {
  display: block;
}
.guide-info-item.type-no-padding {
  padding: 0;
}
.guide-info-item {
  padding: 20px 0;
}
.guide-info-item + .guide-info-item {
  border-top: 1px solid var(--gray-30);
}
.guide-info-link {
  -ms-flex: 1;
  flex: 1;
  -webkit-box-flex: 1;
}
.guide-info-block {
  -ms-flex: 1;
  flex: 1;
  -webkit-box-flex: 1;
}
.guide-info-etc {
  display: block;
  color: var(--primary);
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 21px;
}
.guide-info-title {
  display: block;
  margin-bottom: 4px;
  font-size: 1.5rem;
  line-height: 22px;
}
.guide-info-text {
  color: var(--gray-70);
  font-size: 1.6rem; /* 폰트스타일 수정 */
  line-height: 18px;
}
.guide-info-text .guide-info-text-item + .guide-info-text-item {
  margin-top: 4px;
}
.guide-info-btn {
  margin-left: 14px;
}
.guide-layer-opener {
  width: 24px;
  height: 24px;
}
.guide-info-icon {
  width: 44px;
  height: 44px;
  margin-left: 10px;
  background: no-repeat 50% 50% / auto 100%;
}
.guide-info-icon.type-regular {
  width: 40px;
  height: 40px;
}
.type-wide .guide-info-icon {
  margin-left: 30px;
}
.guide-info-icon:first-child {
  margin-right: 10px;
  margin-left: 0;
}
.guide-info-icon.type-icon-1 {
  background-image: url("../images/icon/ic-cardinfo.svg");
}
.guide-info-icon.type-icon-2 {
  background-image: url("../images/icon/ic-card.svg");
}
.guide-info-icon.type-icon-3 {
  background-image: url("../images/icon/ic-idcard.svg");
}
.guide-info-icon.type-icon-4 {
  background-image: url("../images/icon/ic-account.svg");
}
.guide-info-icon.type-icon-5 {
  background-image: url("../images/icon/ic-account-2.svg");
}
.guide-info-icon.type-icon-6 {
  background-image: url("../images/icon/ic-customer-connecting.svg");
}
.guide-info-icon.type-icon-7 {
  background-image: url("../images/icon/ic-creditgrade-01.svg");
}
.guide-info-icon.type-icon-8 {
  background-image: url("../images/icon/ic-creditgrade-02.svg");
}
.guide-info-icon.type-icon-9 {
  background-image: url("../images/icon/ic-creditgrade-03.svg");
}
.guide-info-icon.type-icon-10 {
  background-image: url("../images/icon/ic-card-couple.svg");
}
.guide-info-icon.type-icon-11 {
  background-image: url("../images/icon/ic-card-single.svg");
}
.guide-info-icon.type-icon-12 {
  background-image: url("../images/icon/ic-creditgrade-01.svg");
}
.guide-info-icon.type-icon-13 {
  background-image: url("../images/icon/ic-creditgrade-02.svg");
}
.guide-info-icon.type-icon-14 {
  background-image: url("../images/icon/ic-contract-l-pass.svg");
}
.guide-info-icon.type-icon-15 {
  background-image: url("../images/icon/ic-certificate-s.svg");
}
.guide-info-icon.type-icon-16 {
  background-image: url("../images/icon/ic-my.svg");
}
.guide-info-icon.type-icon-17 {
  background-image: url("../images/icon/ic-walk-s.svg");
}
.guide-info-icon.type-icon-18 {
  background-image: url("../images/icon/ic-love-s.svg");
}
.guide-info-icon.type-icon-19 {
  background-image: url("../images/icon/ic-coupon-s.svg");
}
.guide-info-icon.type-icon-20 {
  background-image: url("../images/icon/ic-creditgrade-s.svg");
}
.guide-info-icon.type-icon-21 {
  background-image: url("../images/icon/ic-moneybag-s.svg");
}
.guide-info-icon.type-icon-22 {
  background-image: url("../images/icon/ic-wallet-s.svg");
}
.guide-info-icon.type-icon-23 {
  background-image: url("../images/icon/ic-account-hana.svg");
}
.guide-info-icon.type-icon-24 {
  background-image: url("../images/icon/ic-register-family-card.svg");
}
.guide-info-icon.type-icon-25 {
  background-image: url("../images/icon/ic-insurance-01.svg");
}
.guide-info-icon.type-icon-26 {
  background-image: url("../images/icon/ic-insurance-02.svg");
}
.guide-info-icon.type-icon-27 {
  background-image: url("../images/icon/ic-insurance-03.svg");
}
.guide-info-icon.type-icon-28 {
  background-image: url("../images/icon/ic-insurance-04.svg");
}
.guide-info-icon.type-icon-29 {
  background-image: url("../images/icon/ic-insurance-05.svg");
}
.guide-info-icon.type-icon-30 {
  background-image: url("../images/icon/ic-insurance-06.svg");
}
.guide-info-icon.type-icon-31 {
  background-image: url("../images/icon/ic-insurance-07.svg");
}
.guide-info-icon.type-icon-32 {
  background-image: url("../images/icon/ic-insurance-08.svg");
}
.guide-info-icon.type-icon-33 {
  background-image: url("../images/icon/ic-insurance-09.svg");
}
.guide-info-icon.type-icon-34 {
  background-image: url("../images/icon/ic-insurance-10.svg");
}
.guide-info-icon.type-icon-35 {
  background-image: url("../images/icon/ic-insurance-11.svg");
}
.guide-info-icon.type-icon-36 {
  background-image: url("../images/icon/ic-insurance-12.svg");
}
.guide-info-icon.type-icon-37 {
  background-image: url("../images/icon/ic-insurance-13.svg");
}
.guide-info-icon.type-icon-38 {
  background-image: url("../images/icon/ic-insurance-14.svg");
}
.guide-info-icon.type-icon-39 {
  background-image: url("../images/icon/ic-insurance-15.svg");
}
.guide-info-icon.type-icon-40 {
  background-image: url("../images/icon/ic-insurance-16.svg");
}
.guide-info-icon.type-icon-41 {
  background-image: url("../images/icon/ic-insurance-17.svg");
}
.guide-info-icon.type-icon-42 {
  background-image: url("../images/icon/ic-insurance-18.svg");
}
.guide-info-icon.type-icon-43 {
  background-image: url("../images/icon/ic-insurance-19.svg");
}
.guide-info-icon.type-icon-44 {
  background-image: url("../images/icon/ic-insurance-20.svg");
}
.guide-info-icon.type-icon-45 {
  background-image: url("../images/icon/ic-insurance-21.svg");
}
.guide-info-icon.type-icon-46 {
  background-image: url("../images/icon/ic-insurance-22.svg");
}
.guide-info-icon.type-icon-47 {
  background-image: url("../images/icon/ic-insurance-23.svg");
}
.guide-info-icon.type-icon-48 {
  background-image: url("../images/icon/ic-insurance-24.svg");
}
.guide-info-icon.type-icon-49 {
  background-image: url("../images/icon/ic-insurance-25.svg");
}
.guide-info-icon.type-icon-50 {
  background-image: url("../images/icon/ic-insurance-26.svg");
}
.guide-info-icon.type-icon-51 {
  background-image: url("../images/icon/ic-insurance-27.svg");
}
.guide-info-icon.type-icon-52 {
  background-image: url("../images/icon/ic-insurance-28.svg");
}
.guide-info-icon.type-icon-53 {
  background-image: url("../images/icon/ic-insurance-29.svg");
}
.guide-info-icon.type-icon-54 {
  background-image: url("../images/icon/ic-insurance-30.svg");
}
.guide-info-icon.type-icon-55 {
  background-image: url("../images/icon/ic-insurance-31.svg");
}
.guide-info-icon.type-icon-56 {
  background-image: url("../images/icon/ic-insurance-32.svg");
}
.guide-info-icon.type-icon-57 {
  background-image: url("../images/icon/ic-insurance-33.svg");
}
.guide-info-icon.type-icon-58 {
  background-image: url("../images/icon/ic-insurance-34.svg");
}
.guide-info-icon.type-icon-59 {
  background-image: url("../images/icon/ic-insurance-35.svg");
}
.guide-info-icon.type-icon-60 {
  background-image: url("../images/icon/ic-insurance-36.svg");
}
.guide-info-icon.type-icon-61 {
  background-image: url("../images/icon/ic-insurance-37.svg");
}
.guide-info-icon.type-icon-62 {
  background-image: url("../images/icon/ic-insurance-38.svg");
}
.guide-info-icon.type-icon-63 {
  background-image: url("../images/icon/ic-insurance-39.svg");
}
.guide-info-icon.type-icon-64 {
  background-image: url("../images/icon/ic-insurance-40.svg");
}
.guide-info-icon.type-icon-65 {
  background-image: url("../images/icon/ic-insurance-41.svg");
}
.guide-info-icon.type-icon-66 {
  background-image: url("../images/icon/ic-insurance-42.svg");
}
.guide-info-icon.type-icon-67 {
  background-image: url("../images/icon/ic-insurance-43.svg");
}
.guide-info-icon.type-icon-68 {
  background-image: url("../images/icon/ic-insurance-44.svg");
}
.guide-info-icon.type-icon-69 {
  background-image: url("../images/icon/ic-insurance-45.svg");
}
.guide-info-icon.type-icon-70 {
  background-image: url("../images/icon/ic-insurance-46.svg");
}
.guide-info-icon.type-icon-71 {
  background-image: url("../images/icon/ic-insurance-47.svg");
}
.guide-info-icon.type-icon-72 {
  background-image: url("../images/icon/ic-insurance-48.svg");
}
.guide-info-icon.type-icon-73 {
  background-image: url("../images/icon/ic-limit.svg");
}
.guide-info-icon.type-icon-74 {
  background-image: url("../images/icon/ic-insurance-49.svg");
}
.guide-info-icon.type-icon-75 {
  background-image: url("../images/icon/ic-phonecare-02.svg");
}
.guide-info-icon.type-icon-76 {
  background-image: url("../images/icon/ic-protectmycar-01.svg");
}
.guide-info-icon.type-icon-77 {
  background-image: url("../images/icon/ic-protectmycar-02.svg");
}
.guide-info-icon.type-icon-78 {
  background-image: url("../images/icon/ic-protectmycar-03.svg");
}
.guide-info-icon.type-icon-79 {
  background-image: url("../images/icon/ic-protectmycar-04.svg");
}
.guide-info-icon.type-icon-80 {
  background-image: url("../images/icon/ic-culturecare-01.svg");
}
.guide-info-icon.type-icon-81 {
  background-image: url("../images/icon/ic-culturecare-02.svg");
}
.guide-info-icon.type-icon-82 {
  background-image: url("../images/icon/ic-shoppingcare-01.svg");
}
.guide-info-icon.type-icon-83 {
  background-image: url("../images/icon/ic-shoppingcare-02.svg");
}
.guide-info-icon.type-icon-84 {
  background-image: url("../images/icon/ic-shoppingcare-03.svg");
}
.guide-info-icon.type-icon-85 {
  background-image: url("../images/icon/ic-phonecare-01.svg");
}
.guide-info-icon.type-icon-86 {
  background-image: url("../images/icon/ic-shoppingcare-06.svg");
}
.guide-info-icon.type-icon-87 {
  background-image: url("../images/icon/ic-realestatecare-01.svg");
}
.guide-info-icon.type-icon-88 {
  background-image: url("../images/icon/ic-realestatecare-02.svg");
}
.guide-info-icon.type-icon-89 {
  background-image: url("../images/icon/ic-realestatecare-03.svg");
}
.guide-info-icon.type-icon-90 {
  background-image: url("../images/icon/ic-shop.svg");
}
.guide-info-icon.type-icon-91 {
  background-image: url("../images/icon/ic-pay.svg");
}
.guide-info-icon.type-icon-92 {
  background-image: url("../images/icon/ic-payplus.svg");
}
.guide-info-icon.type-icon-93 {
  background-image: url("../images/icon/ic-insurance-50.svg");
}
.guide-info-icon.type-icon-94 {
  background-image: url("../images/icon/ic-edu.svg");
}
.guide-info-icon.type-icon-95 {
  background-image: url("../images/icon/ic-travel-2.svg");
}
.guide-info-icon.type-icon-96 {
  background-image: url("../images/icon/ic-golf.svg");
}
.guide-info-icon.type-icon-97 {
  background-image: url("../images/icon/ic-card-d-l-06.svg");
}
.guide-info-icon.type-icon-98 {
  background-image: url("../images/icon/ic-my-menu-6.svg");
}
.guide-info-icon.type-icon-99 {
  background-image: url("../images/icon/ic-insurance-51.svg");
}
.guide-info-icon.type-icon-100 {
  background-image: url("../images/icon/ic-insurance-52.svg");
}
.guide-info-icon.type-icon-101 {
  background-image: url("../images/icon/ic-insurance-53.svg");
}
.guide-info-icon.type-icon-102 {
  background-image: url("../images/icon/ic-insurance.svg");
}
.guide-info-icon.type-icon-103 {
  background-image: url("../images/icon/ic-insurance-54.svg");
}
/* 22.08.22 */
.guide-info-icon.type-icon-104 {
  background-image: url("../images/icon/ic-insurance-56.svg");
}
.guide-info-icon.type-icon-105 {
  background-image: url("../images/icon/ic-insurance-57.svg");
}
.guide-info-icon.type-icon-106 {
  background-image: url("../images/icon/ic-insurance-58.svg");
}
.guide-info-icon.type-icon-107 {
  background-image: url("../images/icon/ic-insurance-59.svg");
}
.guide-info-icon.type-icon-108 {
  background-image: url("../images/icon/ic-insurance-60.svg");
}
.guide-info-icon.type-icon-109 {
  background-image: url("../images/icon/ic-insurance-61.svg");
}
.guide-info-icon.type-icon-110 {
  background-image: url("../images/icon/ic-insurance-62.svg");
}
.guide-info-icon.type-icon-111 {
  background-image: url("../images/icon/ic-insurance-63.svg");
}
.guide-info-icon.type-icon-112 {
  background-image: url("../images/icon/ic-insurance-64.svg");
}
/* 22.10.05 */
.guide-info-icon.type-icon-113 {
  background-image: url("../images/icon/ic-contract-check.svg");
}
/* 23.07.04 */
.guide-info-icon.type-icon-114 {
  background-image: url("../images/icon/ic-axa-kakaonavi.svg");
}
/* 23.07.17 현대해상 아이콘 추가 mj */
.guide-info-icon.type-icon-115 {
  background-image: url("../images/icon/ic-insurance-65.png");
}
.guide-info-icon.type-icon-116 {
  background-image: url("../images/icon/ic-insurance-66.png");
}
.guide-info-icon.type-icon-117 {
  background-image: url("../images/icon/ic-insurance-67.png");
}
.guide-info-icon.type-icon-118 {
  background-image: url("../images/icon/ic-insurance-68.png");
}
.guide-info-icon.type-icon-119 {
  background-image: url("../images/icon/ic-insurance-69.png");
}
.guide-info-icon.type-icon-120 {
  background-image: url("../images/icon/ic-insurance-70.png");
}
.guide-info-icon.type-icon-121 {
  background-image: url("../images/icon/ic-insurance-71.png");
}
/* 2023.10.13. add */
.guide-info-icon.type-icon-122 {
  background-image: url("../images/icon/ic-joinstep-1.svg");
}
/* 2023.12.18. add */
.guide-info-icon.type-icon-123 {
  background-image: url("../images/icon/ic-insurance-72.png");
}
/* guide-info-list type-has-plus */
.guide-info-list.type-has-plus {
  position: relative;
}
.guide-info-list.type-has-plus::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  background: url("../images/icon/ic-add-g.svg") no-repeat 50% 50%/100% auto;
}

/* guide-info-list type-white */
.guide-info-list.type-white {
  padding: 0;
  background-color: #fff;
}
.guide-info-list.type-white .guide-info-item {
  padding: 0;
}
.guide-info-list.type-white .guide-info-item + .guide-info-item {
  margin-top: 20px;
  padding-top: 20px;
}

/* guide-info-list type-no-line */
.guide-info-list.type-no-line .guide-info-item + .guide-info-item {
  margin-top: 25px;
  padding: 0;
  border-top: none;
}

/* guide-info-accordion */
.guide-info-accordion {
  position: relative;
}
.guide-info-accordion .guide-info-list {
  margin-top: 0;
}
.guide-info-opener {
  position: absolute;
  right: 0;
  bottom: -15px;
  left: 0;
  height: 30px;
}
.guide-info-opener:not(.js-accordion-active)::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  border-top: 1px solid var(--gray-30);
}
.guide-info-opener::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  margin: 0;
  background: url("../images/icon/ic-accordion-n.svg") no-repeat 50% 50% / auto 15px;
  transform: translate(-50%, -50%);
}
.js-accordion-opened .guide-info-opener::after {
  transform: translate(-50%, -50%) rotate(180deg);
}

/* loan-term */
.loan-term {
  margin-top: 35px;
}
.loan-term-title,
.loan-term-interest-rate {
  position: relative;
  z-index: 0;
  font-size: 0;
  line-height: 0;
  text-align: center;
}
.loan-term-title {
  margin-bottom: 10px;
}
.loan-term-interest-rate {
  -ms-flex: none;
  flex: none;
  margin-top: 10px;
  -webkit-box-flex: 0;
}
.loan-term-title::before,
.loan-term-title::after,
.loan-term-interest-rate::before,
.loan-term-interest-rate::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
}
.loan-term-title::before,
.loan-term-interest-rate::before {
  height: 10px;
  margin-top: -5px;
  border: 0 solid var(--gray-50);
  border-width: 0 1px;
}
.loan-term-title::after,
.loan-term-interest-rate::after {
  border-top: 1px solid var(--gray-50);
}
.loan-term-title-text,
.loan-term-interest-rate-text {
  position: relative;
  z-index: 10;
  display: inline-block;
  vertical-align: top;
  padding: 0 8px;
  background-color: #fff;
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.loan-term-list,
.loan-term-item,
.loan-term-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.loan-term-item,
.loan-term-block {
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
}
.loan-term-list {
  margin: 0 0 0 -10px;
  padding: 0;
  list-style: none;
}
.loan-term-item {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  padding-left: 10px;
  -webkit-box-flex: 1;
}
.loan-term-block {
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  justify-content: center;
  min-height: 0;
  padding: 14px;
  border: 1px solid var(--gray-20);
  border-radius: 6px;
  background-color: var(--gray-20);
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-flex: 1;
}
.loan-term-block.type-color-primary {
  border-color: var(--primary);
  background-color: var(--primary-light);
}
.loan-term-block.type-color-point {
  border-color: var(--point);
  background-color: var(--point-light);
}
.loan-term-text {
  display: block;
  font-size: 1.3rem;
  line-height: 1.8rem;
  text-align: center;
}

.status-notice {
  display: block;
  padding: 20px;
  border-radius: 6px;
  background-color: var(--gray-20);
}
.status-notice-title {
  font-size: 1.5rem;
  line-height: 22px;
}

.status-notice-contents:not(:first-child) {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-30);
}
.status-notice-contents.type-no-line {
  margin-top: 10px;
  padding-top: 0;
  border-top: none;
}
.status-notice-text {
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 18px;
}
.status-notice-area > .ui-arrow.type-black {
  justify-content: flex-end;
  margin-top: 10px;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
}

/* status-notice type-white */
.status-notice.type-white {
  border: 1px solid var(--gray-30);
  border-radius: 6px;
  background: #fff;
}

/* status-notice type-hana-money */
.status-notice.type-hana-money {
  position: relative;
}
.status-notice.type-hana-money::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  display: block;
  width: 36px;
  height: 36px;
  background: url("../images/contents/img-1q-logo.svg") no-repeat 50% 50%;
}
.status-notice.type-hana-money .status-notice-head,
.status-notice.type-hana-money .status-notice-text {
  margin-left: 46px;
}

/* status-notice type-store-hana-money */
.status-notice.type-store-hana-money {
  position: relative;
  padding-left: 66px;
}
.status-notice.type-store-hana-money::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 20px;
  display: block;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  background: url("../images/contents/img-hana-money.svg") no-repeat 50% 50%;
}

/* 22.11.18 status-notice type-point-card */
.status-notice.type-point-card {
  display: block;
  margin-top: -30px;
  margin-bottom: -45px;
  padding: 15px 25px;
  border-radius: 15px;
  background: var(--gray-20) url("../images/illustration/img-point-card.gif") no-repeat 50% 24% / 100% auto;
  text-align: center;
}
.status-notice.type-point-card .status-notice-head {
  padding-top: 30%;
}

/* logo-img */
.logo-img {
  height: 20px;
}
.insurance-logo-img-s {
  height: 18px;
}
.insurance-logo-img {
  height: 29px;
}

/* phone-company-list */
.phone-company-list {
  margin-top: 25px;
}
.phone-company-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.phone-company-logo {
  width: 30px;
  height: 30px;
  margin-right: 5px;
  background: no-repeat 50% 50%;
  background-size: 100% 100%;
}
.phone-company-logo.type-skt {
  background-image: url("../images/contents/logo-skt.svg");
}
.phone-company-logo.type-kt {
  background-image: url("../images/contents/logo-kt.svg");
}
.phone-company-logo.type-uplus {
  background-image: url("../images/contents/logo-uplus.svg");
}
.phone-company-logo.type-cigna {
  background-image: url("../images/contents/logo-cigna.png");
}
.phone-company-logo.type-chubb {
  background-image: url("../images/contents/logo-chubb.png");
}
.phone-company-logo.type-aig {
  background-image: url("../images/contents/logo-aig.png");
}
.phone-company-title {
  color: var(--basic);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 18px;
}
.phone-company-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
  flex: 1;
  align-items: center;
  min-width: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-flex: 1;
}
.phone-company-item + .phone-company-item {
  margin-top: 15px;
}

/* more accordion */
.more-accordion-layer {
  margin: 0 -24px;
  padding: 0 24px;
}
.more-accordion-opener {
  margin-top: 25px;
  text-align: center;
}
.more-accordion-opener:after {
  position: static;
  vertical-align: top;
  margin: 3px 0 0 2px;
}

/* box-checkbox-tag */
.box-checkbox-tag {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  padding: 5px 8px 4px;
  border-radius: 0 6px 0 6px;
  background-color: var(--primary);
  color: #fff;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.7rem;
  text-align: center;
}

/* round-block */
.round-block::before {
  content: "";
  display: table;
}
.round-block-list {
  margin: -10px 0 0;
  padding: 0;
  list-style: none;
}
.round-block-item {
  padding-top: 10px;
}
.round-block-box {
  display: block;
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid var(--gray-30);
  border-radius: 15px;
  color: inherit;
  text-decoration: none;
}
.round-block-text {
  font-size: 1.7rem;
  line-height: 2.1rem;
}
.round-block-text.basic-text {
  font-size: 1.5rem;
}
.round-block-opener-area {
  margin-top: 20px;
}
.round-block-opener {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  margin: -15px 0;
}
.round-block-opener::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  margin: 0 auto;
  background: url("../images/icon/ic-accordion-c-n.svg") no-repeat 50% 50%;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}
.round-block-opener.js-accordion-active::before {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.round-block-opener::after {
  display: none;
}
.round-block-layer {
  margin: 0 -20px;
}
.round-block-layer::before,
.round-block-layer::after {
  content: "";
  display: table;
}
.round-block-contents {
  padding: 20px;
  border-top: 1px solid var(--gray-30);
}

/* round-block-box type-accordion */
.round-block-box.type-has-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.round-block-icon {
  width: 36px;
  height: 36px;
  margin-right: 6px;
  background: no-repeat 50% 50% / 100% auto;
}
.round-block-icon.type-golf {
  background-image: url("../images/icon/ic-golf.svg");
}

/* round-block-box type-accordion */
.round-block-box.type-accordion {
  padding-bottom: 0;
}

/* round-block-box type-link */
.round-block-box.type-link {
  position: relative;
  padding: 24px 52px 24px 24px;
}
.round-block-box.type-link::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  display: block;
  width: 12px;
  height: 13px;
  margin-top: -7px;
  background: url("../images/icon/btn-more-l.svg") no-repeat 50% 50%;
}

/* round-block-box type-color-basic */
.round-block-box.type-color-basic {
  border-color: var(--basic);
}

.round-block-box .info-item + .info-item {
  margin-top: 0px;
}

/* ui-tooltip */
.ui-tooltip-wrap {
  display: inline-block;
  vertical-align: top;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
}
.ui-tooltip-wrap::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.ui-tooltip {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}
.ui-tooltip-head {
  position: relative;
  display: block;
}
.ui-tooltip-head::before {
  content: "";
  position: absolute;
  left: 50%;
  z-index: 0;
  display: block;
  margin-left: -3px;
  border: 0 solid transparent;
  border-width: 4px 3px;
}
.ui-tooltip.js-dropdown-bottom .ui-tooltip-head::before {
  top: 100%;
  margin-top: 1px;
  border-bottom-color: #2c364e;
}
.ui-tooltip.js-dropdown-top .ui-tooltip-head::before {
  bottom: 100%;
  margin-bottom: 1px;
  border-top-color: #2c364e;
}
.ui-tooltip-opener {
  position: relative;
  z-index: 10;
  display: block;
}
.ui-tooltip-layer::before,
.ui-tooltip-layer::after {
  content: "";
  display: table;
}
.ui-tooltip-bubble {
  position: relative;
  display: block;
  padding: 12px 30px 12px 15px;
  border-radius: 3px;
  background-color: #2c364e;
}
.ui-tooltip.js-dropdown-bottom .ui-tooltip-bubble {
  margin-top: 9px;
}
.ui-tooltip.js-dropdown-top .ui-tooltip-bubble {
  margin-bottom: 9px;
}
.ui-tooltip-bubble-message {
  display: block;
  color: #fff;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.8rem;
  white-space: nowrap;
}
.ui-tooltip-bubble-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  display: block;
  width: 22px;
  height: 22px;
  background: url("../images/icon/ic-close-s.svg") no-repeat 50% 50%;
}
.ui-tooltip-bubble-message .info-list {
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.8rem;
}
.ui-tooltip-bubble-message .info-item + .info-item {
  margin-top: 3px;
}
/* type-small 22.11.28 */
.ui-tooltip.type-small .ui-tooltip-head::before {
  content: "";
  position: absolute;
  left: 50%;
  z-index: 0;
  display: block;
  margin-left: -4px;
  border: 0 solid transparent;
  border-width: 5px 4px;
}
.ui-tooltip.js-dropdown-bottom.type-small .ui-tooltip-head::before {
  top: 100%;
  margin-top: 1px;
  border-bottom-color: #2f2f2f;
}
.ui-tooltip.js-dropdown-top.type-small .ui-tooltip-head::before {
  bottom: 100%;
  margin-bottom: 1px;
  border-top-color: #2f2f2f;
}
.ui-tooltip.type-small .ui-tooltip-bubble {
  position: relative;
  display: block;
  padding: 8px 23px 7px 10px;
  border-radius: 6px;
  background-color: #2f2f2f;
}
.ui-tooltip.js-dropdown-bottom.type-small .ui-tooltip-bubble {
  margin-top: 11px;
}
.ui-tooltip.js-dropdown-top.type-small .ui-tooltip-bubble {
  margin-bottom: 11px;
}

/* ui-rangeslider */
.ui-rangeslider {
  position: relative;
  padding-top: 7px;
}
.ui-rangeslider .rangeslider {
  position: static;
  border-radius: 10px;
  background-color: #e6e9ef;
  box-shadow: none;
}
.ui-rangeslider .rangeslider--horizontal {
  height: 20px;
}
.ui-rangeslider .rangeslider--vertical {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: flex-end;
  width: 20px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
}
.ui-rangeslider .rangeslider__fill {
  position: relative;
  z-index: 20;
  background: none;
  box-shadow: none;
}
.ui-rangeslider .rangeslider__fill::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  display: block;
  border-radius: 6px;
}
.ui-rangeslider .rangeslider--horizontal .rangeslider__fill::before {
  background: #8665ef;
  background: -moz-linear-gradient(left, #8665ef 0%, #6a4bcb 100%);
  background: -webkit-linear-gradient(left, #8665ef 0%, #6a4bcb 100%);
  background: linear-gradient(to right, #8665ef 0%, #6a4bcb 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8665ef', endColorstr='#6a4bcb',GradientType=1 );
}
.ui-rangeslider .rangeslider--vertical .rangeslider__fill::before {
  background: #6a4bcb;
  background: -moz-linear-gradient(top, #6a4bcb 0%, #8665ef 100%);
  background: -webkit-linear-gradient(top, #6a4bcb 0%, #8665ef 100%);
  background: linear-gradient(to bottom, #6a4bcb 0%, #8665ef 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6a4bcb', endColorstr='#8665ef',GradientType=0 );
}
.ui-rangeslider .rangeslider__handle {
  z-index: 20;
  display: block;
  width: 26px;
  height: 26px;
  border: none;
  background: #fff;
  box-shadow: 0 0 10px 0 rgba(134, 101, 239, 0.2);
}
.ui-rangeslider .rangeslider__handle::after {
  display: none;
}
.ui-rangeslider .rangeslider--horizontal .rangeslider__handle {
  top: auto;
  margin-top: -23px;
}
.ui-rangeslider .rangeslider--vertical .rangeslider__handle {
  left: auto;
  margin-left: -3px;
}
.ui-rangeslider-gradation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
}
.ui-rangeslider-gradation-item {
  position: relative;
  z-index: 10;
  width: 21px;
  padding-top: 5px;
}
.ui-rangeslider-gradation-item::after {
  top: -27px;
  width: 0;
  height: 37px;
  border-left: 1px dashed #d8dfe8;
}
.ui-rangeslider-gradation-item-text {
  margin: 0 -20px;
  font-size: 1rem;
  line-height: 1.4rem;
  text-align: center;
  white-space: nowrap;
}
.ui-rangeslider .chart-bubble {
  bottom: 100%;
  margin-bottom: 4px;
  margin-left: 13px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.ui-rangeslider .rangeslider--disabled {
  opacity: 1;
  filter: none;
}
.ui-rangeslider .rangeslider--disabled .rangeslider__fill::before {
  background: #b6bcc9;
}
.ui-rangeslider .rangeslider--disabled ~ .chart-bubble,
.ui-rangeslider .rangeslider--disabled ~ .chart-bubble::before {
  border-color: var(--gray-40);
}
.ui-rangeslider .rangeslider--disabled ~ .chart-bubble .chart-bubble-text {
  color: var(--gray-60);
}

/* ui-rangeslider type-vertical */
.ui-rangeslider.type-vertical {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 0;
  padding-left: 7px;
}
.ui-rangeslider.type-vertical .ui-rangeslider-gradation {
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
}
.ui-rangeslider.type-vertical .ui-rangeslider-gradation-item {
  width: auto;
  height: 21px;
  padding-top: 0;
  padding-left: 16px;
}
.ui-rangeslider.type-vertical .ui-rangeslider-gradation-item::before,
.ui-rangeslider.type-vertical .ui-rangeslider-gradation-item::after {
  top: 0;
  right: auto;
  bottom: 0;
  left: auto;
  margin: auto 0;
}
.ui-rangeslider.type-vertical .ui-rangeslider-gradation-item::before {
  top: 0;
  left: 10px;
}
.ui-rangeslider.type-vertical .ui-rangeslider-gradation-item::after {
  top: 0;
  left: -27px;
  width: 37px;
  height: 0;
  border-top: 1px dashed #d8dfe8;
  border-left: none;
}
.ui-rangeslider.type-vertical .ui-rangeslider-gradation-item-text {
  position: relative;
  top: 50%;
  margin: 0 0 0 5px;
  text-align: left;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.ui-rangeslider.type-vertical .chart-bubble {
  right: 100%;
  bottom: auto;
  margin-right: 4px;
  margin-bottom: 13px;
  margin-left: 0;
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
}
.ui-rangeslider.type-vertical .chart-bubble::before {
  top: 50%;
  left: 100%;
  margin-top: -3px;
  margin-left: -3px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* ui-link-box */
.ui-link-box {
  border: 1px solid var(--basic);
  border-radius: 15px;
}
.ui-link-box.type-bottom-layout1 {
  margin: 0 24px 24px !important;
}
.ui-link-box.type-bottom-layout2 {
  margin: 0 24px 35px !important;
}
.page-contents + .ui-link-box {
  margin: 0 24px 35px;
}
.ui-link-box .ui-link-block {
  box-sizing: border-box;
  padding: 24px 56px 24px 23px;
}
.ui-link-box .ui-link-block:before {
  right: 20px;
}
.ui-link-block {
  position: relative;
  display: block;
  width: 100%;
  padding: 35px 0;
  text-align: left;
}
.ui-link-block:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: url("../images/common/ic-button-arrow.svg") no-repeat 100% 50% / auto 12px;
}
.ui-link-block.type-align-middle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.ui-link-img {
  width: 36px;
  height: 36px;
  margin-right: 15px;
  background: no-repeat 50% 50%;
  background-size: 100% 100%;
}
.ui-link-img.type-at-a-look {
  background-image: url("../images/icon/img-my-data-logo.svg");
}
.ui-link-img.type-tmoney {
  background-image: url("../images/icon/ci_tmoney.png");
}
.ui-link-title {
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 21px;
}
.ui-link-text {
  margin-top: 10px;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 18px;
}
.ui-link-list .ui-link-item {
  border-top: 1px solid var(--gray-30);
}

/* icon-heart */
.icon-heart {
  display: inline-block;
  vertical-align: top;
  width: 15px;
  height: 15px;
  background: url("../images/icon/btn-heart.svg") no-repeat 50% 50%;
}
.icon-heart.is-active {
  background-image: url("../images/icon/ic-heart-on.svg");
}
.icon-heart.type-vip.is-active {
  background-image: url("../images/icon/ic-heart-on-p.svg");
}

/* detail-card-list */
.detail-card-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
}
.detail-card-item {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  text-align: center;
  -webkit-box-flex: 1;
}
.detail-card-name {
  display: block;
  margin-top: 10px;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 18px;
}

/* welcome-card */
.welcome-card {
  margin-bottom: 25px;
}
.welcome-card-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.welcome-card-left {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.welcome-card-rigth {
  -ms-flex: none;
  flex: none;
  -webkit-box-flex: 0;
}
.welcome-card-text {
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 3rem;
}
.welcome-card-text strong {
  font-weight: 500;
}
.welcome-card-link-row {
  margin-top: 10px;
  font-size: 0;
  line-height: 0;
}

/* go-link */
.go-link {
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding-right: 28px;
  color: var(--gray-70);
  font-size: 1.2rem;
  line-height: 1.7rem;
}
.go-link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  display: block;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: url("../images/icon/btn-go.svg") no-repeat 50% 50%;
}

/* vip-benefit-box */
.vip-benefit-box {
  margin-top: 25px;
  padding: 20px;
  border: 1px solid #e6e9ef;
  border-radius: 15px;
}
.vip-benefit-box .vip-benefit-title {
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 2rem;
}
.vip-benefit-box .vip-benefit-title strong {
  font-weight: 400;
  font-size: 1.7rem;
}
.vip-benefit-box .vip-benefit-text {
  margin-top: 5px;
  font-weight: 400;
  font-size: 1.7rem;
}
.vip-benefit-box .vip-benefit-text strong {
  font-weight: 400;
  font-size: 2.4rem;
}
.vip-benefit-box .vip-benefit-text strong em {
  color: #b48e5a;
  font-style: normal;
}
.ui-rangeslider.vip-type .rangeslider--horizontal .rangeslider__fill::before {
  background: #977c4d;
  background: -moz-linear-gradient(left, #977c4d 0%, #b48e5a 100%);
  background: -webkit-linear-gradient(left, #977c4d 0%, #b48e5a 100%);
  background: linear-gradient(to right, #977c4d 0%, #b48e5a 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#977C4D', endColorstr='#B48E5A', GradientType=1);
}
.ui-rangeslider.vip-type .rangeslider--horizontal .rangeslider__handle {
  top: 14px;
  width: 6px;
  height: 6px;
  margin-top: 0;
  margin-left: -11px;
}
.ui-rangeslider.vip-type .ui-rangeslider-gradation-item:nth-child(2) {
  width: 80px;
}
.ui-rangeslider.vip-type .ui-rangeslider-gradation-item:nth-child(2) .ui-rangeslider-gradation-item-text {
  margin: 0;
  text-align: right;
}

/* welcome-nav */
.welcome-nav {
  border-radius: 6px;
  background-color: #2c364e;
}
.welcome-nav-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  padding: 0 6px;
  list-style: none;
}
.welcome-nav-item {
  position: relative;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.welcome-nav-item + .welcome-nav-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -2px;
  display: block;
  box-sizing: border-box;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border: 1px solid #fff;
  border-radius: 100%;
}
.welcome-nav-link {
  display: block;
  padding: 10px 0 11px;
  color: #fff;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.9rem;
  text-align: center;
}
/* [2024.05.10] 인기카드 하단 폰트 스타일 수정 : FREEST */
.welcome-nav:not(.type-bill) .welcome-nav-link div {
  color: var(--mypage, #029c94);
  font-weight: 500;
  font-style: normal;
  font-size: 15px;
  line-height: 20px; /* 133.333% */
  letter-spacing: -0.375px;
}

/* welcome-nav type-fill-white */
.welcome-nav.type-fill-white {
  background-color: #fff;
}

/* welcome-nav type-fill-secondary */
.welcome-nav.type-fill-secondary {
  background-color: var(--secondary);
}

/* welcome-nav type-bill */
.welcome-nav.type-bill .welcome-nav-list {
  padding-right: 0;
  padding-left: 0;
}
.welcome-nav.type-bill .welcome-nav-item + .welcome-nav-item::before {
  left: 0px;
  width: 1px;
  height: 19px;
  margin-top: -9px;
  border: none;
  border-radius: inherit;
  /*	opacity: 0.5;*/
  background: #b6a5ea;
}
.welcome-nav.type-bill .welcome-nav-link {
  padding-top: 15px;
  padding-bottom: 15px;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.8rem;
}

/* welcome-nav type-color-blur */
.welcome-nav.type-color-blur .welcome-nav-item + .welcome-nav-item::before {
  border-color: var(--gray-70);
}
.welcome-nav.type-color-blur .welcome-nav-link {
  color: var(--gray-70);
}

/* icon-nav */
.icon-nav {
  margin: 0 -24px;
}
.icon-nav::before {
  content: "";
  display: table;
}
.icon-nav-list {
  margin: -25px 0 0;
  padding: 0 7px;
  list-style: none;
  font-size: 0;
  line-height: 0;
}
.icon-nav-item {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  width: 33.333333%;
  padding-top: 25px;
}
.icon-nav-link {
  display: block;
}
.icon-nav-link::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 3px;
  background: no-repeat 50% 50% / 100%; /*22.09.30 100% */
}
.icon-nav-link.type-1::before {
  background-image: url("../images/icon/ic-vip-menu-1.svg");
}
.icon-nav-link.type-2::before {
  background-image: url("../images/icon/ic-vip-menu-2.svg");
}
.icon-nav-link.type-3::before {
  background-image: url("../images/icon/ic-vip-menu-3.svg");
}
.icon-nav-link.type-4::before {
  background-image: url("../images/icon/ic-vip-menu-4.svg");
}
.icon-nav-link.type-5::before {
  background-image: url("../images/icon/ic-vip-menu-5.svg");
}
.icon-nav-link.type-6::before {
  background-image: url("../images/icon/ic-vip-menu-6.svg");
}
/* 22.08.19 */
.icon-nav-link.type-7::before {
  background-image: url("../images/icon/ic-airplane.svg");
}
.icon-nav-link.type-8::before {
  background-image: url("../images/icon/ic-jeju.svg");
}
.icon-nav-link.type-9::before {
  background-image: url("../images/icon/ic-realestatecare-01.svg");
}
.icon-nav-link.type-10::before {
  background-image: url("../images/icon/ic-travel-card.svg");
}
.icon-nav-link.type-11::before {
  background-image: url("../images/icon/ic-travel-insure.svg");
}
.icon-nav-link.type-12::before {
  background-image: url("../images/icon/ic_musicbox.png");
}

.icon-nav-text {
  display: block;
  font-size: 1.3rem;
  line-height: 1.8rem;
  text-align: center;
}
/* 22.10.31 */
.icon-nav-list.type-col4 .icon-nav-item {
  width: 25%;
}
.icon-nav-list.type-has-icon {
  padding: 0 21px;
}
.icon-nav-list.type-has-icon .icon-nav-link {
  position: relative;
  display: block;
}
.icon-nav-list.type-has-icon .icon-nav-link::before {
  display: none;
}
.icon-nav-list.type-has-icon .icon-nav-link .icon-nav-img {
  position: relative;
  display: block;
  height: 50px;
  margin: 0 auto 6px;
}
.icon-nav-list.type-has-icon .icon-nav-link .icon-nav-img::before,
.icon-nav-list.type-has-icon .icon-nav-link .icon-nav-img img {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  transform: translateX(-50%);
}
.icon-nav-list.type-has-icon .icon-nav-link .icon-nav-img:empty::before,
.icon-nav-list.type-has-icon .icon-nav-link .icon-nav-img.is-error::before {
  content: "";
  background: url("../images/common/logo-default.svg") no-repeat 50% 50%;
  background-size: cover;
}
.icon-nav-list.type-has-icon .icon-nav-link .icon-nav-img.is-error img {
  display: none;
}

/* event-cards */
.event-cards::before {
  content: "";
  display: table;
}
.event-cards-list {
  margin: -12px 0 0 -12px;
  padding: 0;
  list-style: none;
  font-size: 0;
  line-height: 0;
}
.event-cards-list.swiper-wrapper {
  margin-left: 0;
}
.event-cards-item {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  width: 50%;
  padding: 12px 0 0 12px;
}
.event-cards-item.swiper-slide {
  padding-left: 0;
}
.event-cards-block {
  display: block;
  border: 1px solid #e6e9ef;
  border-radius: 15px;
  background-color: #fff;
}
.event-cards-img-area {
  margin: -1px -1px 0;
}
.event-cards-img-inner {
  position: relative;
  padding-top: 60%;
}
.event-cards-img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 15px 15px 0 0;
}
.event-cards-info {
  padding: 15px;
}
.event-cards-brand {
  display: block;
  overflow: hidden;
  margin-bottom: 2px;
  color: var(--gray-70);
  font-size: 1.2rem;
  line-height: 1.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-cards-title {
  display: -webkit-box;
  overflow: hidden;
  height: 4rem;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2rem;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* event-cards type-tripartition */
.event-cards.type-tripartition .event-cards-item {
  width: 33.333333%;
}

/* event-cards-img-area type-affiliate-coupon */
.event-cards-img-area.type-affiliate-coupon .event-cards-img-inner {
  padding-top: 62.5%;
}

/* club-cards */
.club-cards {
  padding: 0 6px;
}
.club-cards::before {
  content: "";
  display: table;
}
.club-cards-list {
  margin: -25px 0 0 -28px;
  padding: 0;
  list-style: none;
  font-size: 0;
  line-height: 0;
}
.club-cards-item {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  width: 50%;
  padding: 25px 0 0 28px;
}
.club-cards-block {
  display: block;
}
.club-cards-block .card-image {
  margin-bottom: 10px;
}
.club-cards-sub-text {
  display: block;
  overflow: hidden;
  margin-bottom: 2px;
  color: var(--gray-70);
  font-size: 1.2rem;
  line-height: 1.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.club-cards-title {
  font-size: 0;
  line-height: 0;
}
.club-cards-title-text {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.club-cards-title .ui-arrow {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: top;
  max-width: 100%;
}
.club-cards-title .ui-arrow .club-cards-title-text {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}

/* ui-legend */
.ui-legend {
  text-align: center;
}
.ui-legend::before {
  content: "";
  display: table;
}
.ui-legend-list {
  margin: -24px 0 0 -24px;
  padding: 0;
  list-style: none;
  font-size: 0;
  line-height: 0;
}
.ui-legend-item {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  padding: 24px 0 0 24px;
}
.ui-legend-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.ui-legend-symbol {
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border: 1px solid var(--gray-40);
  border-radius: 3px;
  background-color: #fff;
}
.ui-legend-symbol.type-vvip {
  border-color: #977c4d;
  background: url("../images/icon/vip-pattern-1.png") #977c4d;
}
.ui-legend-symbol.type-first {
  border-color: #b6a382;
  background: url("../images/icon/vip-pattern-2.png") #b6a382;
}
.ui-legend-symbol.type-royal {
  border-color: #d0c4af;
  background: url("../images/icon/vip-pattern-3.png") #d0c4af;
}
.ui-legend-symbol.type-classic {
  border-color: #e5ded2;
  background: url("../images/icon/vip-pattern-4.png") #e5ded2;
}
.ui-legend-text {
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1.8rem;
}

/* symbols */
.symbols {
  text-align: center;
}
.symbols::before {
  content: "";
  display: table;
}
.symbols-list {
  margin: -10px 0 0 -10px;
  padding: 0;
  list-style: none;
  font-size: 0;
  line-height: 0;
}
.symbols-item {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  padding: 10px 0 0 10px;
}
.symbols-item::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border: 1px solid var(--gray-40);
  border-radius: 4px;
  background-color: #fff;
}
.symbols-item.type-vvip::before {
  border-color: #977c4d;
  background: url("../images/icon/vip-pattern-1.png") #977c4d;
}
.symbols-item.type-first::before {
  border-color: #b6a382;
  background: url("../images/icon/vip-pattern-2.png") #b6a382;
}
.symbols-item.type-royal::before {
  border-color: #d0c4af;
  background: url("../images/icon/vip-pattern-3.png") #d0c4af;
}
.symbols-item.type-classic::before {
  border-color: #e5ded2;
  background: url("../images/icon/vip-pattern-4.png") #e5ded2;
}

/* premium-card */
.premium-card {
  margin: -30px -24px 0;
  padding: 25px 24px;
  background-color: #363434;
}
.premium-card-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 20px;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.premium-card-left {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.premium-card-right {
  -ms-flex: none;
  flex: none;
  text-align: right;
  -webkit-box-flex: 0;
}
.premium-card-title {
  color: #fff;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 2.4rem;
}
.premium-card-info {
  padding: 20px;
  border-radius: 15px;
  background-color: #fff;
}
.premium-card-info-title {
  margin: 0 0 10px;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 2.1rem;
}
.premium-card-info-text {
  margin: 0;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 1.8rem;
}
/* 23.02.23 */
.premium-card.ty-02 {
  padding: 37px 24px 35px;
}
.premium-card.ty-02 .premium-card-title {
  display: block;
  margin-bottom: 15px;
  color: #fff;
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1.5rem;
}
.premium-card.ty-02 .premium-card-rating {
  color: #fff;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 2.4rem;
}
.premium-card.ty-02 .premium-card-info {
  padding: 20px 0;
}

/* disposable-number */
.disposable-number-area .disposable-number {
  padding: 20px;
  border-radius: 50px;
  background-color: var(--gray-20);
  color: var(--basic);
  font-weight: 500;
  font-size: 2.1rem;
  line-height: 30px;
  text-align: center;
}
.disposable-number-area .disposable-timer {
  margin-top: 10px;
  color: var(--primary);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 26px;
  text-align: center;
}
.disposable-number-area .disposable-timer::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 12px;
  height: 12px;
  margin-right: 3px;
  background: url("../images/icon/ic-clock.svg") no-repeat;
}
.disposable-number-area.no-data .disposable-number {
  color: #ccc;
}

.line-box-info {
  margin-top: 35px;
  padding: 20px;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
}
.line-box-info-text {
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 18px;
}
.line-box-info-buttons {
  margin-top: 25px;
}

/* gray-link-list */
.gray-link-item {
  border-radius: 10px;
  background: #f5f4f1;
}
.gray-link-item + .gray-link-item {
  margin-top: 10px;
}
.gray-link-block {
  position: relative;
  display: block;
  box-sizing: border-box;
  padding: 19px 50px 19px 99px;
}
.gray-link-block:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 20px;
  width: 59px;
  height: 50px;
  margin-top: -25px;
}
.gray-link-block.type-01:before {
  background: url("../images/icon/img-living-01.svg") center center no-repeat;
}
.gray-link-block.type-02:before {
  background: url("../images/icon/img-living-02.svg") center center no-repeat;
}
.gray-link-txt {
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 21px;
}

/* 2023.03.21 금융 한눈에보기 배너 추가  */
/* green-bnnr */
.green-bnnr-list {
  position: relative;
  margin-bottom: 12px;
}

.green-bnnr-list .green-bnnr-item {
  height: auto;
  min-height: 80px;
  border-radius: 10px;
  background: #19a49d;
}

.green-bnnr-list a {
  display: flex;
  align-items: center;
  height: 100%;
}

.green-bnnr-list a img {
  width: 21.3333vw;
  max-width: 80px;
  height: auto;
  margin-left: 40px;
}

.green-bnnr-list a div.info {
  flex: 1;
  padding: 18px 30px 18px 18px;
  color: #fff;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1.35;
  letter-spacing: -0.43px;
  text-align: left;
}

.green-bnnr-list a div.info .info-button {
  color: #9fffc0;
  font-size: 1.3rem;
  line-height: 1.8rem;
}

/* //2023.03.21 금융 한눈에보기 배너 추가  */

/* card-detail-info-list */
.card-detail-info-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 24px 25px;
}
.card-detail-info-item {
  overflow: hidden;
}
.card-detail-info-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
}
.card-detail-info {
  margin-top: 14px;
}
.card-detail-info-title {
  display: block;
  overflow: hidden;
  margin-bottom: 4px;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-detail-info-txt {
  color: var(--gray-70);
  font-weight: 300;
}

/* recommand-card-list */
.recommand-card-item + .recommand-card-item {
  margin-top: 35px;
  padding-top: 35px;
  border-top: 1px solid var(--gray-30);
}
.recommand-card-head-etc {
  display: block;
  overflow: hidden;
  color: var(--gray-70);
  font-size: 1.2rem;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recommand-card-head-title {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--basic);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 21px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recommand-card-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 15px;
}
.recommand-card-block .card-image {
  -ms-flex: none;
  flex: none;
  width: 128px;
  -webkit-box-flex: 0;
}
.recommand-card-info {
  margin-left: 20px;
  font-weight: 300;
}
.recommand-card-info-txt {
  margin-top: 2px;
  color: var(--gray-70);
}
.recommond-card-bottom {
  margin-top: 25px;
}

/* info-line-box */
.info-line-box {
  box-sizing: border-box;
  margin-top: 15px;
  padding: 20px;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
}

.info-line-box-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.info-line-title {
  margin-left: 15px;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 20px;
}
.info-line-box-txt {
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 18px;
}

/* info-cards */
.info-cards {
  margin: 0 -24px;
}
.info-cards-inner {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
}
.info-cards-inner::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera*/
  width: 0; /* Remove scrollbar space */
  height: 0;
  background: transparent; /* Optional: just make scrollbar invisible */
  -webkit-appearance: none;
}
.info-cards-list {
  display: inline-block;
  vertical-align: top;
  margin: 0;
  padding: 0 24px;
  list-style: none;
}
.info-cards-item {
  display: inline-block;
  vertical-align: top;
  font-size: 1rem;
  line-height: normal;
  white-space: normal;
}
.info-cards-item + .info-cards-item {
  margin-left: 25px;
}
.info-cards-link {
  position: relative;
  display: block;
  width: 210px;
  color: inherit;
  text-decoration: none;
}
.info-cards-link .card-image {
  margin-bottom: 15px;
}
.info-cards-image-add {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.info-cards-image-add::before {
  content: "";
  display: block;
  width: 35px;
  height: 36px;
  margin: -5px auto 2px;
  background: url("../images/icon/btn-add.svg") no-repeat 50% 50%;
}
.info-cards-image-add-text {
  margin: 0;
  color: var(--gray-70);
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.info-cards-title {
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 2.4rem;
}
.info-cards-text {
  margin-top: 4px;
  color: var(--gray-80);
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.info-cards-delete {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  background: url("../images/icon/ic-close.svg") no-repeat 50% 50%;
  background-size: 100% 100%;
}
.info-cards-delete::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0);
}

/* info-cards-title type-multi-ellipsis */
.info-cards-title.type-multi-ellipsis {
  display: -webkit-box;
  overflow: hidden;
  max-height: 6rem;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* info-cards-item type-detail */
.info-cards-item.type-detail {
  display: block;
  text-align: center;
}
.info-cards-item.type-detail .card-image {
  width: 220px;
  margin: 0 auto 35px;
}
.info-cards-item.type-detail .info-cards-title {
  font-size: 2.1rem;
  line-height: 3rem;
}
.info-cards-item.type-detail .info-cards-text {
  margin-top: 6px;
  color: var(--gray-80);
  font-size: 1.5rem;
  line-height: 2rem;
}

/* info-cards type-regular */
.info-cards.type-regular .info-cards-item + .info-cards-item {
  margin-left: 12px;
}
.info-cards.type-regular .info-cards-link {
  width: 150px;
}
.info-cards.type-regular .card-image {
  margin-bottom: 15px;
}
.info-cards.type-regular .info-cards-title {
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2rem;
}
.info-cards.type-regular .info-cards-text {
  margin-top: 5px;
  color: var(--gray-70);
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1.9rem;
}
.info-cards.type-regular .info-cards-title.type-multi-ellipsis {
  max-height: 4rem;
}

/* info-cards type-tile */
.info-cards.type-tile {
  margin-right: 0;
  margin-left: 0;
  padding-right: 10px;
  padding-left: 10px;
}
.info-cards.type-tile .info-cards-inner {
  overflow: visible;
  -webkit-overflow-scrolling: auto;
  white-space: normal;
}
.info-cards.type-tile .info-cards-inner::before {
  content: "";
  display: table;
}
.info-cards.type-tile .info-cards-list {
  display: block;
  margin: -25px 0 0 -36px;
  padding: 0;
}
.info-cards.type-tile .info-cards-item {
  box-sizing: border-box;
  width: 50%;
  padding: 25px 0 0 36px;
}
.info-cards.type-tile .info-cards-item + .info-cards-item {
  margin-left: 0;
}
.info-cards.type-tile .info-cards-link,
.info-cards.type-regular.type-tile .info-cards-link {
  width: auto;
}

/* rank */
.rank::before {
  content: "";
  display: table;
}
.rank-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rank-item + .rank-item {
  margin-top: 25px;
  padding-top: 25px;
  border-top: 1px solid var(--gray-30);
}
.rank-item {
  min-height: 99px;
  padding: 0 10px;
}
.rank-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: stretch;
  color: inherit;
  text-decoration: none;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
}
.rank-cell,
.rank-block .card-image,
.rank-card {
  -ms-flex: none;
  flex: none;
  -webkit-box-flex: 0;
}
.rank-cell.type-flexible {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.rank-cell.type-number {
  margin-right: 15px;
}
.rank-cell.type-card {
  width: 47px;
  min-height: 75px;
  margin-top: 5px;
  margin-right: 20px;
}
.rank-block .card-image {
  width: 75px;
  -webkit-transform: rotate(90deg) translateY(-100%);
  transform: rotate(90deg) translateY(-100%);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.rank-number {
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 2rem;
}
.rank-fluctuation {
  margin: 10px -10px 0;
  font-size: 0;
  line-height: 0;
  text-align: center;
}
.rank-title {
  display: -webkit-box;
  overflow: hidden;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 2.2rem;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.rank-text {
  margin-top: 10px;
}
.rank-text-item {
  overflow: hidden;
  color: #7c7c7c;
  font-size: 1.3rem;
  line-height: 1.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* fluctuation-arrow */
.fluctuation-arrow {
  position: relative;
  display: inline-block;
  vertical-align: top;
  font-size: 1rem;
  line-height: 1.4rem;
  white-space: nowrap;
}
.fluctuation-arrow.type-up,
.fluctuation-arrow.type-down {
  padding-left: 7px;
}
.fluctuation-arrow.type-up::before,
.fluctuation-arrow.type-down::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  border: 0 solid transparent;
  border-width: 4px 3px;
}
.fluctuation-arrow.type-up::before {
  margin-top: -6px;
  border-bottom-color: var(--wrong);
}
.fluctuation-arrow.type-down::before {
  margin-top: -2px;
  border-top-color: var(--tertiary);
}

/* card-mbti */
.card-mbti {
  padding: 90px 0 70px;
  text-align: center;
}
.card-mbti-title {
  margin: 0 0 20px;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 3.3rem;
}
.card-mbti-text {
  margin: 0;
  font-weight: 300;
  font-size: 2.4rem;
  line-height: 3.3rem;
}
.card-mbti-go {
  display: block;
  width: 46px;
  height: 46px;
  margin: 35px auto 0;
  background: url("../images/icon/btn-go-2.svg") no-repeat 50% 50%;
}

/* mbti-tags */
.slide-mbti-tags {
  position: relative;
  padding-bottom: 32px;
}
.slide-mbti-controller {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.slide-mbti-tags .swiper-button-prev,
.slide-mbti-tags .swiper-button-next,
.slide-mbti-tags .swiper-button-play,
.slide-mbti-tags .swiper-button-pause,
.slide-mbti-tags .swiper-button-toggle-play {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  display: block;
  width: 15px;
  height: 15px;
  margin: 0 0 0 4px;
  background: no-repeat 50% 50%;
}
.slide-mbti-tags .swiper-button-prev::before,
.slide-mbti-tags .swiper-button-next::before,
.slide-mbti-tags .swiper-button-play::before,
.slide-mbti-tags .swiper-button-pause::before,
.slide-mbti-tags .swiper-button-toggle-play::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0);
}
.slide-mbti-tags .swiper-button-prev::after,
.slide-mbti-tags .swiper-button-next::after {
  display: none;
}
.slide-mbti-tags .swiper-button-prev-text,
.slide-mbti-tags .swiper-button-next-text,
.slide-mbti-tags .swiper-button-play-text,
.slide-mbti-tags .swiper-button-pause-text,
.slide-mbti-tags .swiper-button-toggle-play-text {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  overflow: hidden;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.slide-mbti-tags .swiper-button-prev {
  order: 1;
  background-image: url("../images/icon/ic-left.svg");
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
}
.slide-mbti-tags .swiper-button-next {
  order: 3;
  background-image: url("../images/icon/ic-right.svg");
  -webkit-box-ordinal-group: 4;
  -ms-flex-order: 3;
}
.slide-mbti-tags .swiper-button-play {
  order: 2;
  background-image: url("../images/icon/ic-play.svg");
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
}
.slide-mbti-tags .swiper-button-pause {
  order: 2;
  background-image: url("../images/icon/ic-pause.svg");
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
}
.slide-mbti-tags .swiper-button-toggle-play {
  order: 2;
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
}
.slide-mbti-tags .swiper-button-toggle-play.is-play {
  background-image: url("../images/icon/ic-play.svg");
}
.slide-mbti-tags .swiper-button-toggle-play.is-pause {
  background-image: url("../images/icon/ic-pause.svg");
}

.mbti-tags {
  margin: 0 -24px;
  padding: 35px 0 23px;
  background-color: #f4f6f8;
}
.mbti-tags-row {
  overflow: hidden;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
}
.mbti-tags-row + .mbti-tags-row {
  margin-top: 10px;
}
.mbti-tags-row.typr-reverse {
  justify-content: flex-end;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
}
.mbti-tags-item {
  display: inline-block;
  vertical-align: top;
  width: auto;
}
.mbti-tags-block {
  margin: 0 5px;
  padding: 11px 14px 11px 39px;
  border-radius: 20px;
  background: no-repeat 14px 50% #fff;
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.mbti-tags-block.type-1 {
  background-image: url("../images/icon/ic-mbti-1-s.svg");
}
.mbti-tags-block.type-2 {
  background-image: url("../images/icon/ic-mbti-2-s.svg");
}
.mbti-tags-block.type-3 {
  background-image: url("../images/icon/ic-mbti-3-s.svg");
}
.mbti-tags-block.type-4 {
  background-image: url("../images/icon/ic-mbti-4-s.svg");
}
.mbti-tags-block.type-5 {
  background-image: url("../images/icon/ic-mbti-5-s.svg");
}
.mbti-tags-block.type-6 {
  background-image: url("../images/icon/ic-mbti-6-s.svg");
}
.mbti-tags-block.type-7 {
  background-image: url("../images/icon/ic-mbti-7-s.svg");
}
.mbti-tags-block.type-8 {
  background-image: url("../images/icon/ic-mbti-8-s.svg");
}
.mbti-tags-block.type-9 {
  background-image: url("../images/icon/ic-mbti-9-s.svg");
}
.mbti-tags-block.type-10 {
  background-image: url("../images/icon/ic-mbti-10-s.svg");
}
.mbti-tags-block.type-11 {
  background-image: url("../images/icon/ic-mbti-11-s.svg");
}
.mbti-tags-info {
  margin-top: 54px;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 18px;
  text-align: center;
}

/* form-accordion */
.form-accordion-item + .form-accordion-item {
  margin-top: 35px;
}
.form-accordion-layer.js-ui-accordion__layer {
  display: block;
  height: auto;
}
.form-accordion-item:not(.js-accordion-opened):not(.js-accordion-animated) .form-accordion-hide {
  display: none;
}
.form-accordion-opener {
  position: relative;
  display: block;
  margin-top: 35px;
  font-size: 0;
  line-height: 0;
  text-align: center;
}
.form-accordion-opener::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px 0;
}
.form-accordion-opener::after {
  position: static;
  top: auto;
  right: auto;
  width: 13px;
  margin: 0 0 0 5px;
  background-image: url("../images/icon/btn-view.svg");
}
.form-accordion-opener-text {
  display: inline-block;
  vertical-align: middle;
  font-size: 1.3rem;
  line-height: 1.8rem;
}

/* mbti-section */
.mbti-section-head {
  margin-bottom: 35px;
}
.mbti-section-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  margin: 0;
  -webkit-box-align: start;
  -ms-flex-align: start;
}
.mbti-section-title-text {
  font-weight: 300;
  font-size: 2.1rem;
  line-height: 3rem;
}
.mbti-section-title-icon {
  width: 40px;
  height: 40px;
  margin: -5px 0 -5px 5px;
  background: no-repeat 50% 50%;
}
.mbti-section-title-icon.type-1 {
  background-image: url("../images/icon/ic-mbti-question-1.svg");
}
.mbti-section-title-icon.type-2 {
  background-image: url("../images/icon/ic-mbti-question-2.svg");
}
.mbti-section-title-icon.type-3 {
  background-image: url("../images/icon/ic-mbti-question-3.svg");
}
.mbti-section-title-icon.type-4 {
  background-image: url("../images/icon/ic-mbti-question-4.svg");
}
.mbti-section-title-icon.type-5 {
  background-image: url("../images/icon/ic-mbti-question-5.svg");
}
.mbti-section-title-icon.type-6 {
  background-image: url("../images/icon/ic-mbti-question-6.svg");
}
.mbti-section-title-icon.type-7 {
  background-image: url("../images/icon/ic-mbti-question-7.svg");
}
.mbti-section-title-icon.type-8 {
  background-image: url("../images/icon/ic-mbti-question-8.svg");
}
.mbti-section-title-icon.type-9 {
  background-image: url("../images/icon/ic-mbti-question-9.svg");
}

/* mbti-section type-result */
.mbti-section.type-result {
  padding-top: 10px;
}

/* step-slide */
.step-slide-inner {
  margin: 0 -24px;
}
.step-slide-inner::before {
  content: "";
  display: table;
}
.step-slide-inner .swiper-object {
  margin-top: -10px;
}
.step-slide-item {
  box-sizing: border-box;
  padding: 10px 24px 0;
}

/* mbti-loading */
.mbti-loading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  height: 250px;
  margin: 0 -24px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.mbti-loading-list {
  font-size: 0;
  line-height: 0;
  text-align: center;
  white-space: nowrap;
}
.mbti-loading-item {
  display: inline-block;
  vertical-align: top;
  width: 40px;
  height: 40px;
  background: no-repeat 50% 50%;
  opacity: 0;
}
.mbti-loading-item + .mbti-loading-item {
  margin-left: 18px;
}
.mbti-loading.is-animation .mbti-loading-item {
  -webkit-animation: mbti-loading-animate 1s forwards;
  animation: mbti-loading-animate 1s forwards;
}
@-webkit-keyframes mbti-loading-animate {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-40%);
  }
  75% {
    opacity: 1;
    -webkit-transform: translateY(10%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}
@keyframes mbti-loading-animate {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  40% {
    opacity: 1;
    transform: translateY(-40%);
  }
  75% {
    opacity: 1;
    transform: translateY(10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
.mbti-loading-item.type-1 {
  background-image: url("../images/icon/ic-mbti-loading-1.svg");
}
.mbti-loading-item.type-2 {
  background-image: url("../images/icon/ic-mbti-loading-2.svg");
}
.mbti-loading.is-animation .mbti-loading-item.type-2 {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.mbti-loading-item.type-3 {
  background-image: url("../images/icon/ic-mbti-loading-3.svg");
}
.mbti-loading.is-animation .mbti-loading-item.type-3 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.mbti-loading-item.type-4 {
  background-image: url("../images/icon/ic-mbti-loading-4.svg");
}
.mbti-loading.is-animation .mbti-loading-item.type-4 {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.mbti-loading-item.type-5 {
  background-image: url("../images/icon/ic-mbti-loading-5.svg");
}
.mbti-loading.is-animation .mbti-loading-item.type-5 {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

/* keywords */
.keywords.is-empty {
  display: none;
}
.keywords::before {
  content: "";
  display: table;
}
.keywords-list {
  margin: -8px 0 0 -8px;
  padding: 0;
  list-style: none;
  font-size: 0;
  line-height: 0;
}
.keywords-item {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  padding: 8px 0 0 8px;
}
.keywords-tag {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  padding: 6px 13px 7px;
  border: 1px solid var(--basic);
  border-radius: 17px;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.keywords-text {
  display: block;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.9rem;
}
.keywords-delete {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  margin-left: 8px;
  background: url("../images/icon/btn-close-s.svg") no-repeat 50% 50%;
}
.keywords-delete::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px;
}
.keywords-reset {
  position: relative;
  display: block;
  padding-right: 25px;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.keywords-reset::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  display: block;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  background: url("../images/icon/btn-pop-reset.svg") no-repeat 100% 50%;
}

/* keywords type-slim */
.keywords.type-slim .keywords-list {
  margin-left: -6px;
}
.keywords.type-slim .keywords-item {
  padding-left: 6px;
}
.keywords.type-slim .keywords-tag {
  padding-top: 4px;
  padding-bottom: 5px;
}
.keywords.type-slim .keywords-text {
  font-weight: 400;
}

/* keywords-tag type-line-gray */
.keywords-tag.type-line-gray {
  border-color: var(--gray-70);
}

/* keywords type-has-reset */
.keywords.type-has-reset {
  position: relative;
  padding-right: 70px;
}
.keywords.type-has-reset .keywords-reset {
  position: absolute;
  top: 8px;
  right: 0;
}

/* affiliate-list */
.affiliate-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 12px;
  margin-top: 15px;
}
.affiliate-item-block {
  position: relative;
  display: block;
}
.affiliate-item-block .event-label {
  position: absolute;
  top: 0;
  right: 0;
  box-sizing: border-box;
  width: 52px;
  height: 26px;
  padding: 5px 0;
  border-radius: 0 10px;
  background: #6a4bcb;
  color: #ffffff;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 17px;
  text-align: center;
}
.affiliate-text {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  box-sizing: border-box;
  padding: 0 10px;
  font-size: 0;
  line-height: 0;
  text-align: center;
  white-space: nowrap;
}
.affiliate-text:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.affiliate-text-inner {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}
.affiliate-name {
  display: -webkit-box;
  overflow: hidden;
  color: #fff;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 20px;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.affiliate-item-img {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #e6e9ef;
  border-radius: 10px;
}

/* download-list */
.section-title.type-medium + .download-list {
  margin-top: 22px;
}
.download-item + .download-item {
  margin-top: 12px;
}
.download-item-title {
  font-size: 1.3rem;
  line-height: 18px;
}

/* rank-kewords */
.rank-kewords::before {
  content: "";
  display: table;
}
.rank-kewords-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: -20px 0 0 -20px;
}
.rank-kewords-list {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-box-flex: 1;
}
.rank-kewords-item {
  box-sizing: border-box;
  padding: 20px 0 0 20px;
}
.rank-kewords-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.rank-kewords-num {
  display: block;
  -ms-flex: none;
  flex: none;
  box-sizing: border-box;
  min-width: 18px;
  margin-right: 10px;
  padding: 2px;
  border-radius: 9px;
  background-color: var(--basic);
  color: #fff;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4rem;
  text-align: center;
  -webkit-box-flex: 0;
}
.rank-kewords-text {
  display: block;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
  min-width: 0;
  font-size: 1.5rem;
  line-height: 2rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-box-flex: 1;
}

/* ui-search-wrap */
.ui-search-form {
  position: relative;
  z-index: 50;
}
.ui-search-form .search-word-area {
  margin-top: 0;
  margin-bottom: 0;
}
.ui-search-kewords-layer {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  box-sizing: border-box;
  width: 100%;
  margin-top: 10px;
  border: solid 1px var(--gray-30);
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.ui-search-form.is-focus:not(.is-inputed) .ui-search-kewords-layer.type-latest:not(.is-empty),
.ui-search-form.is-focus.is-inputed .ui-search-kewords-layer.type-auto:not(.is-empty) {
  display: block;
}

/* ui-search-kewords */
.ui-search-kewords {
  padding: 12px 0;
}
.ui-search-kewords-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ui-search-kewords-link {
  display: block;
  padding: 10px 20px;
  color: inherit;
  text-decoration: none;
}
.ui-search-kewords-text {
  display: -webkit-box;
  overflow: hidden;
  max-height: 4rem;
  font-size: 1.5rem;
  line-height: 2rem;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.ui-search-kewords-text mark {
  background: none;
  color: var(--primary);
}

/* ui-search-kewords type-auto */
.ui-search-kewords.type-auto .ui-search-kewords-text {
  color: var(--gray-70);
}

/* line-section-wrap */
.line-section-wrap {
  overflow: hidden;
  margin: 0 -24px;
  padding: 0 24px;
}
.line-section-wrap-inner {
  margin-top: -80px;
}
.line-section-wrap-inner::before {
  content: "";
  display: table;
}

/* search-faq */
.search-faq::before {
  content: "";
  display: table;
}
.search-faq .faq-list {
  margin-top: -25px;
  border-top: none;
}
.search-faq .faq-item {
  padding-top: 25px;
  border-bottom: none;
}
.search-faq .faq-opener {
  padding-top: 0;
  padding-bottom: 0;
}
.search-faq .faq-opener::before {
  top: 3px;
}

/* faq-layer type-search */
.faq-layer.type-search {
  margin-right: -24px;
  margin-left: -24px;
}
.faq-layer.type-search::before {
  content: "";
  display: table;
}
.faq-layer.type-search .faq-contents {
  margin-top: 25px;
  background-color: var(--gray-20);
}

/* contents-cards */
.contents-cards {
  margin: 0 -24px;
}
.contents-cards-inner {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.contents-cards-list,
.contents-cards-item,
.contents-cards-block,
.contents-cards-block .wcms-data,
.contents-cards-block .search-data {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: stretch;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
}
.contents-cards-block .search-data {
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
}
.contents-cards-list::after,
.contents-cards-item {
  -ms-flex: none;
  flex: none;
  -webkit-box-flex: 0;
}
.contents-cards-block,
.contents-cards-block .wcms-data,
.contents-cards-block .search-data {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.contents-cards-list {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0 24px;
  list-style: none;
}
.contents-cards-list::after {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 24px;
  height: 1px;
}
.contents-cards-item {
  box-sizing: border-box;
  width: 100%;
}
.contents-cards-item + .contents-cards-item {
  margin-left: 12px;
}
.contents-cards-block {
  box-sizing: border-box;
  padding: 24px 19px;
  border: 1px solid #e6e9ef;
  border-radius: 15px;
  background-color: #fff;
}

/* contents-cards type-vertical */
.contents-cards.type-vertical {
  margin-right: 0;
  margin-left: 0;
}
.contents-cards.type-vertical .contents-cards-inner {
  overflow: visible;
  -webkit-overflow-scrolling: auto;
}
.contents-cards.type-vertical .contents-cards-inner::before {
  content: "";
  display: table;
}
.contents-cards.type-vertical .contents-cards-list {
  display: block;
  width: auto;
  margin-top: -25px;
  padding-right: 0;
  padding-left: 0;
}
.contents-cards.type-vertical .contents-cards-list::after {
  display: none;
}
.contents-cards.type-vertical .contents-cards-item {
  display: block;
  width: auto;
  padding-top: 25px;
}
.contents-cards.type-vertical .contents-cards-item + .contents-cards-item {
  margin-left: 0;
}
.contents-cards.type-vertical .contents-cards-block,
.contents-cards.type-vertical .contents-cards-block .wcms-data,
.contents-cards.type-vertical .contents-cards-block .search-data {
  display: block;
}

/* edit-buttons */
.edit-buttons-list,
.edit-buttons-item,
.edit-buttons-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.edit-buttons-item,
.edit-buttons-link,
.edit-buttons-text {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.edit-buttons {
  border-radius: 6px;
  background-color: #2c364e;
}
.edit-buttons-list {
  margin: 0;
  padding: 0 8px;
  list-style: none;
}
.edit-buttons-item {
  position: relative;
}
.edit-buttons-item + .edit-buttons-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1px;
  display: block;
  height: 10px;
  margin-top: -5px;
  border-left: 2px solid var(--gray-60);
}
.edit-buttons-link {
  align-items: center;
  box-sizing: border-box;
  min-height: 48px;
  padding: 4px 12px;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.edit-buttons-text {
  display: block;
  color: #fff;
  font-size: 1.5rem;
  line-height: 2rem;
  text-align: center;
}

/* reload-button */
.reload-button {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
}
.reload-button::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  display: block;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: url("../images/icon/btn-reload.svg") no-repeat 50% 50%;
}
.reload-text {
  margin-left: 15px;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.reload-button.type-small {
  width: 12px;
  height: 12px;
  margin-left: 5px;
}
.reload-button.type-small::before {
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: url("../images/icon/btn-reload-s.svg") no-repeat 50% 50%;
}

/* legend-symbol */
.legend-symbol {
  display: block;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 100%;
  background-color: var(--gray-70);
}

/* ui-chart-area */
.ui-chart-area {
  margin: 35px 0;
}

/* js-set-date */
.js-set-date-init,
.js-set-date-edit,
.js-set-date-set {
  display: none;
}
.js-set-date.is-init .js-set-date-init,
.js-set-date.is-edit .js-set-date-edit,
.js-set-date.is-set .js-set-date-set {
  display: block;
}

/* card-select-tab */
.card-select-tab-list {
  position: relative;
  z-index: 10;
}
.card-select-tab-panel {
  position: relative;
  z-index: 0;
}
.card-select-tab-list,
.card-select-tab-item,
.card-select-tab-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.card-select-tab-list,
.card-select-tab-item {
  align-items: stretch;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
}
.card-select-tab-link {
  justify-content: center;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.card-select-tab-list {
  margin: 0 0 -1px;
  padding: 0;
  list-style: none;
}
.card-select-tab-item {
  -ms-flex: none;
  flex: none;
  -webkit-box-flex: 0;
}
/* 24.03.14 보더컬러 수정 */
.card-select-tab-link {
  box-sizing: border-box;
  min-width: 100px;
  padding: 10px 13px 9px;
  border: 1px solid var(--gray-40);
  background-color: var(--gray-20);
}
.card-select-tab-text {
  display: block;
  color: var(--gray-70);
  font-size: 1.4rem;
  line-height: 1.9rem;
  text-align: center;
}
.card-select-tab-item + .card-select-tab-item .card-select-tab-link {
  margin-left: -1px;
}
.card-select-tab-item:first-child .card-select-tab-link {
  border-top-left-radius: 6px;
}
.card-select-tab-item:last-child .card-select-tab-link {
  border-top-right-radius: 6px;
}
.card-select-tab-link.js-tabpanel-active {
  padding-bottom: 10px;
  border-bottom-width: 0;
  background-color: #fff;
}
.card-select-tab-link.js-tabpanel-active .card-select-tab-text {
  color: var(--basic);
  font-weight: 700;
}
.card-select-tab-panel .ui-select-block.type-card .ui-select {
  border-top-left-radius: 0;
}

/* multi-home */
.multi-home,
.multi-home-current,
.multi-home-cards {
  position: absolute;
  right: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
}
.multi-home {
  top: 0;
  bottom: 60px;
  overflow: hidden;
}
.multi-home-current {
  top: 0;
  bottom: 61.022364%;
  padding: 52px 0 65px;
}
.multi-home-cards {
  top: 38.977636%;
  bottom: 0;
  padding: 94px 0 38px;
}
.multi-home.is-registing::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
}

/* multi-current */
.multi-current {
  position: relative;
  height: 100%;
}
.multi-current-info {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  margin-top: 25px;
  padding: 0 24px;
  font-size: 0;
  line-height: 0;
  text-align: center;
  white-space: nowrap;
}
.multi-current-info-box,
.multi-current-info-item,
.multi-current-info-key,
.multi-current-info-val {
  display: inline-block;
  vertical-align: top;
}
.multi-current-info-box {
  box-sizing: border-box;
  max-width: 100%;
  padding: 10px 19px;
  border: 1px solid var(--gray-30);
  border-radius: 15px;
  background-color: #fff;
}
.multi-current-info-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: left;
}
.multi-current-info-key {
  -ms-flex: none;
  flex: none;
  margin-right: 10px;
  color: var(--gray-70);
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1.8rem;
  -webkit-box-flex: 0;
}
.multi-current-info-val {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  font-size: 1.3rem;
  line-height: 1.8rem;
  white-space: normal;
  word-break: break-all;
  -webkit-box-flex: 1;
}
.multi-current > .swiper-object,
.multi-current > .swiper-object > .swiper {
  height: 100%;
}
.multi-current > .swiper-object > .swiper,
.multi-current > .swiper-object > .swiper-creative .swiper-slide {
  overflow: visible;
}
.multi-current-swipe:not(.swiper-wrapper) {
  display: none;
}
.multi-current-item {
  position: relative;
  z-index: 10 !important;
  font-size: 0;
  line-height: 0;
  text-align: center;
}
.multi-current-item.type-dummy {
  z-index: 0 !important;
  width: 56%;
  -webkit-transform: translateX(-999999px) !important;
  transform: translateX(-999999px) !important;
}
.multi-current-action,
.multi-current-card {
  height: 100%;
  -webkit-transition: transform 0.35s;
  transition: transform 0.35s;
}
.multi-current-action,
.multi-current-action-block,
.multi-current-card-block {
  position: relative;
  display: inline-block;
  vertical-align: top;
  height: 100%;
}
.multi-current-card-area {
  display: inline-block;
  width: auto;
  height: 100%;
  opacity: 0;
}
.multi-current-action-front,
.multi-current-action-back,
.multi-current-action-front-img,
.multi-current-card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 3.5%/5.6%;
}
.multi-current-card {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.multi-current-card-block {
  -webkit-transition: transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate(10px, -14px) rotate(-4.6deg);
  transform: translate(10px, -14px) rotate(-4.6deg);
}
.multi-current-item.swiper-slide-prev .multi-current-action {
  -webkit-transform: translateX(-15%) translateZ(1px);
  transform: translateX(-15%) translateZ(1px);
}
.multi-current-item.swiper-slide-prev .multi-current-card {
  -webkit-transform: translateX(-35%);
  transform: translateX(-35%);
}
.multi-current-item.swiper-slide-prev .multi-current-card-block {
  -webkit-transform: translate(10px, -14px) rotate(0deg);
  transform: translate(10px, -14px) rotate(0deg);
}
.multi-current-action {
  position: relative;
  z-index: 10;
  -webkit-perspective: 1200px;
  perspective: 1200px;
}
.multi-current-action-block {
  border-radius: 3.5%/5.6%;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16);
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.multi-current-action-block.is-rotated {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.multi-current-action-front,
.multi-current-action-back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.multi-current-action-front {
  z-index: 10;
}
.multi-current-action-front-img {
  overflow: hidden;
}
.multi-current-action-front-img img,
.multi-current-card-img img {
  position: relative;
  left: 50%;
  display: block;
  width: auto;
  min-width: 100%;
  height: 100%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.multi-current-action-front-img.is-error {
  background-color: #f1f3f5;
}
.multi-current-action-front-img.is-error img,
.multi-current-card-img.is-error img {
  display: none;
}
.multi-current-action-back {
  z-index: 0;
  background-color: #fff;
  white-space: nowrap;
  -webkit-transform: rotateY(180deg) translateZ(1px);
  transform: rotateY(180deg) translateZ(1px);
}
.multi-current-action-back::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.multi-current-action-menu {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
}
.multi-current-action-menu-item {
  display: inline-block;
  vertical-align: top;
  width: 80px;
}
.multi-current-action-menu-link {
  display: block;
  text-align: center;
}
.multi-current-action-menu-link::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  margin: 0 auto 5px;
  background: no-repeat 50% 50%;
}
.multi-current-action-menu-link.type-icon-1::before {
  background-image: url("../images/icon/multi-action-menu-1.svg");
}
.multi-current-action-menu-link.type-icon-2::before {
  background-image: url("../images/icon/multi-action-menu-2.svg");
}
.multi-current-action-menu-text {
  display: block;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.7rem;
}
.multi-current-action-rotate,
.multi-current-action-rotate-reverse,
.multi-cards-rotate {
  position: absolute;
  top: 10px;
  left: 10px;
  display: block;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: url("../images/icon/btn-card-back.svg") no-repeat 50% 50% rgba(17, 17, 17, 0.7);
}
.multi-current-card-img {
  overflow: hidden;
  box-sizing: border-box;
  background-color: #f1f3f5;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px var(--gray-30) inset;
}

/* multi-home-guide */
.multi-home-guide {
  position: absolute;
  top: 20px;
  right: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
}
.multi-home-guide-icon {
  width: 17px;
  height: 17px;
  margin: 0 auto 8px;
}
.multi-home-guide-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.multi-home-guide-text {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.9rem;
  text-align: center;
}
.multi-home-guide-item {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: none;
  box-sizing: border-box;
  width: 100%;
}
.multi-home-guide-item.type-register .multi-home-guide-icon {
  height: 27px;
  margin-top: -10px;
}
.multi-home-guide-icon-register-arrow-1 {
  opacity: 0;
  -webkit-animation: multi-home-guide-icon-register-arrow-animate 2s linear infinite;
  animation: multi-home-guide-icon-register-arrow-animate 2s linear infinite;
}
.multi-home-guide-icon-register-arrow-2 {
  opacity: 0;
  -webkit-animation: multi-home-guide-icon-register-arrow-animate 2s 1s linear infinite;
  animation: multi-home-guide-icon-register-arrow-animate 2s 1s linear infinite;
}
@-webkit-keyframes multi-home-guide-icon-register-arrow-animate {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-12px);
  }
}
@keyframes multi-home-guide-icon-register-arrow-animate {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-12px);
  }
}
.multi-home-guide-item.type-use.is-before-animate .multi-home-guide-icon-use-circle {
  stroke-dasharray: 350;
  stroke-dashoffset: 350;
}
.multi-home-guide-item.type-use.is-before-animate .multi-home-guide-icon-use-check {
  stroke-miterlimit: 10;
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
}
.multi-home-guide-item.type-use.is-animate .multi-home-guide-icon {
  -webkit-animation: multi-home-guide-icon-use-scale-animate 0.2s 0.55s forwards;
  animation: multi-home-guide-icon-use-scale-animate 0.2s 0.55s forwards;
}
.multi-home-guide-item.type-use.is-animate .multi-home-guide-icon-use-circle {
  -webkit-animation: multi-home-guide-icon-use-circle-animate 0.35s forwards;
  animation: multi-home-guide-icon-use-circle-animate 0.35s forwards;
}
.multi-home-guide-item.type-use.is-animate .multi-home-guide-icon-use-check {
  -webkit-animation: multi-home-guide-icon-use-check-animate 0.2s 0.35s forwards;
  animation: multi-home-guide-icon-use-check-animate 0.2s 0.35s forwards;
}
@-webkit-keyframes multi-home-guide-icon-use-scale-animate {
  0% {
    -webkit-transform: scale(1);
  }
  70% {
    -webkit-transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@keyframes multi-home-guide-icon-use-scale-animate {
  0% {
    transform: scale(1);
  }
  70% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes multi-home-guide-icon-use-circle-animate {
  100% {
    stroke-dashoffset: 300;
  }
}
@keyframes multi-home-guide-icon-use-circle-animate {
  100% {
    stroke-dashoffset: 300;
  }
}
@-webkit-keyframes multi-home-guide-icon-use-check-animate {
  100% {
    stroke-dashoffset: 60;
  }
}
@keyframes multi-home-guide-icon-use-check-animate {
  100% {
    stroke-dashoffset: 60;
  }
}

/* multi-cards */
.multi-cards,
.multi-cards > .swiper-object,
.multi-cards > .swiper-object > .swiper,
.multi-cards-register,
.multi-cards-register > .swiper-object,
.multi-cards-register > .swiper-object > .swiper,
.multi-cards-item-inner {
  height: 100%;
}
.multi-cards > .swiper-object > .swiper,
.multi-cards-register > .swiper-object > .swiper,
.multi-cards-register > .swiper-object > .swiper-creative > .swiper-wrapper > .swiper-slide {
  overflow: visible;
}
.multi-cards-list:not(.swiper-wrapper),
.multi-cards-register-inner:not(.swiper-wrapper) {
  display: none;
}
.multi-cards-item {
  position: relative;
  z-index: 0;
  width: auto;
  padding: 0 12px;
  font-size: 0;
  line-height: 0;
  text-align: center;
  -webkit-perspective: 1200px;
  perspective: 1200px;
}
.multi-cards-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
}
.multi-cards-item-inner {
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: scale(0.908);
  transform: scale(0.908);
}
.multi-cards-item.swiper-slide-active {
  z-index: 10;
}
.multi-cards-item.swiper-slide-active::after {
  display: none;
}
.multi-cards-item.swiper-slide-active .multi-cards-item-inner {
  -webkit-transform: scale(1);
  transform: scale(1);
}
.multi-cards-register-inner,
.multi-cards-register-item {
  width: auto;
}
.multi-cards-register-item {
  z-index: 10 !important;
}
.multi-cards-register-item.type-dummy {
  z-index: 0 !important;
  -webkit-transform: translateY(-100%) !important;
  transform: translateY(-100%) !important;
}
.multi-cards-register-item.type-dummy .multi-cards-block {
  opacity: 0;
}
.multi-cards-register > .swiper-object > .swiper.is-moved .multi-cards-register-item.type-dummy .multi-cards-block,
.multi-cards-register-item.type-dummy.swiper-slide-active .multi-cards-block {
  opacity: 0.2;
}
.multi-cards-block {
  position: relative;
  display: inline-block;
  vertical-align: top;
  height: 100%;
  border-radius: 5.6%/3.5%;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
  text-align: left;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.multi-cards-block.is-rotated {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.multi-cards-card-area {
  display: inline-block;
  width: auto;
  height: 100%;
  opacity: 0;
}
.multi-cards-front,
.multi-cards-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.multi-cards-front {
  z-index: 10;
}
.multi-cards-back {
  z-index: 0;
  -webkit-transform: rotateY(180deg) translateZ(1px);
  transform: rotateY(180deg) translateZ(1px);
}
.multi-cards-rotate {
  top: auto;
  bottom: 10px;
}
.multi-cards-card {
  position: relative;
  display: block;
  overflow: hidden;
  height: 100%;
  border-radius: 5.6%/3.5%;
}
.multi-cards-card::before {
  content: "";
  background: url("../images/common/card-default.svg") no-repeat 50% 50%;
  background-size: cover;
}
.multi-cards-card::before,
.multi-cards-card img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 158%;
  height: 64%;
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
  transform: translate(-50%, -50%) rotate(90deg);
}
.multi-cards-card.is-error img {
  display: none;
}
.multi-cards-card.type-add {
  background: url("../images/icon/btn-add.svg") no-repeat 50% 50% #fff;
}
.multi-cards-card.type-add::before {
  display: none;
}
.multi-cards-info {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  padding: 20px;
  border-radius: 5.6%/3.5%;
  background-color: #fff;
}
.multi-cards-info-title {
  display: -webkit-box;
  overflow: hidden;
  max-height: 4rem;
  margin-bottom: 8px;
  font-size: 1.5rem;
  line-height: 2rem;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.multi-cards-info-badges {
  margin-bottom: 10px;
  margin-left: -5px;
}
.multi-cards-info-badges .ui-badge {
  min-width: 0;
  margin-left: 5px;
}
.multi-cards-info-etc {
  margin-top: 5px;
}
.multi-cards-info-etc-item {
  color: var(--gray-70);
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.8rem;
}
.multi-cards-info-action {
  position: absolute;
  right: 20px;
  bottom: 20px;
  left: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 4px;
  background-color: var(--gray-10);
}
.multi-cards-info-action-btn {
  position: relative;
  -ms-flex: 1;
  flex: 1;
  box-sizing: border-box;
  min-width: 0;
  padding: 6px 0;
  -webkit-box-flex: 1;
}
.multi-cards-info-action-btn + .multi-cards-info-action-btn {
  margin-left: 1px;
}
.multi-cards-info-action-btn + .multi-cards-info-action-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1px;
  display: block;
  height: 9px;
  border-left: 1px solid var(--gray-60);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.multi-cards-info-action-btn-text {
  display: block;
  font-size: 1.1rem;
  line-height: 1.5rem;
  text-align: center;
}
.multi-cards-info-action-rotate {
  -ms-flex: none;
  flex: none;
  width: 27px;
  margin: 0 2px 0 5px;
  padding: 0;
  background: url("../images/icon/btn-card-back-black.svg") no-repeat 50% 50%;
  -webkit-box-flex: 0;
}
.multi-cards-btn-register {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  opacity: 0;
}

/* min size multi card */
.multi-home.is-min-size .multi-home-current {
  bottom: 61.660079%;
  padding-top: 32px;
  padding-bottom: 55px;
}
.multi-home.is-min-size .multi-current-info {
  margin-top: 15px;
}
.multi-home.is-min-size .multi-home-cards {
  top: 38.339921%;
  padding-top: 68px;
  padding-bottom: 24px;
}
.multi-home.is-min-size .multi-home-guide {
  top: 10px;
}
.multi-home.is-min-size .multi-home-guide-icon {
  margin-bottom: 4px;
}
.multi-home.is-min-size .multi-home-guide-text {
  font-size: 1.2rem;
  line-height: 1.8rem;
}
.multi-home.is-min-size .multi-current-action-menu-item {
  width: 64px;
}
.multi-home.is-min-size .multi-current-action-menu-text {
  font-size: 1rem;
  line-height: 1.8rem;
}
.multi-home.is-min-size .multi-cards-info {
  padding: 15px;
}
.multi-home.is-min-size .multi-cards-info-action {
  right: 15px;
  bottom: 15px;
  left: 15px;
}
.multi-home.is-min-size .multi-cards-info-badges .ui-badge {
  padding: 4px 8px;
  border-radius: 11px;
  font-size: 1.1rem;
  line-height: 1.5rem;
}

/* card-menu */
.card-menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.card-menu-item + .card-menu-item {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-30);
}
.card-menu-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.card-menu-block.type-link::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: url("../images/icon/btn-more.svg") no-repeat 100% 50%;
}
.card-menu-icon {
  display: block;
  width: 44px;
  height: 44px;
  margin-right: 10px;
  background: no-repeat 50% 50%;
}
.card-menu-icon.type-1 {
  background-image: url("../images/icon/ic-subway.svg");
}
.card-menu-icon.type-2 {
  background-image: url("../images/icon/ic-airplane.svg");
}
.card-menu-cell {
  display: block;
  -ms-flex: none;
  flex: none;
  -webkit-box-flex: 0;
}
.card-menu-cell.type-flexible {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.card-menu-title {
  display: block;
  font-size: 1.5rem;
  line-height: 2rem;
}
.card-menu-text {
  display: block;
  margin-top: 4px;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 1.8rem;
}

/* notice-popup */
.notice-popup-body {
  position: relative;
}
.notice-popup-body-area {
  max-width: 640px;
  margin: 0 auto;
}
.notice-popup-body-area::before {
  content: "";
  display: block;
  padding-top: 125%;
}
.notice-popup-contents {
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
}
.notice-popup-contents .slide-banner-link,
.notice-popup-contents .slide-banner-image {
  width: 100%;
  max-width: 640px;
  height: 100%;
  margin: 0 auto;
  border-radius: 0;
}
.notice-popup-contents .header__title {
  margin-right: 60px;
}
.notice-popup-contents .ui-layer__body:first-child .ui-layer__body-inner {
  padding-top: 40px;
}

/* qr-code */
.qr-code {
  max-width: 180px;
  margin: 0 auto;
}
.qr-code img {
  display: block;
  width: 100%;
  height: auto;
}

/* vip-event */
.vip-event::before {
  content: "";
  display: table;
}
.vip-event-list {
  margin: -10px 0 0;
  padding: 0;
  list-style: none;
}
.vip-event-item {
  padding-top: 10px;
}
.vip-event-link {
  position: relative;
  display: block;
  max-width: 640px;
  margin: 0 auto;
  color: inherit;
  text-decoration: none;
}
.vip-event-image {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background-color: var(--gray-70);
}
.vip-event-image::before {
  content: "";
  display: block;
  padding-top: 35.897436%;
}
.vip-event-image img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.vip-event-info {
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  color: #fff;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.vip-event-title {
  overflow: hidden;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 2.4rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vip-event-text {
  overflow: hidden;
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vip-event-date {
  margin-top: 8px;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.4rem;
}

/* vip-event-link type-slide */
.vip-event-link.type-slide .vip-event-image {
  border-radius: 0;
}
.vip-event-link.type-slide .vip-event-text {
  font-size: 1.7rem;
  line-height: 2.4rem;
}
.vip-event-link.type-slide .vip-event-date {
  margin-top: 4px;
  font-size: 1.1rem;
  line-height: 1.8rem;
}

/* card-accordion-layer */
.card-accordion-layer::before,
.card-accordion-layer::after {
  content: "";
  display: table;
  clear: both;
}

/* ui-loading */
.ui-loading-wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  display: none;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
}
.ui-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.ui-loading-block {
  width: 73px;
  height: 73px;
  background: url("../images/common/loading.gif") no-repeat 50% 50%;
  background-size: 100% 100%;
  background-image: image-set(
    url("../images/common/loading.webp") type("image/webp"),
    url("../images/common/loading.png") type("image/png")
  );
}
.ui-loading-block > div {
  display: none;
}

/* card-apply-loading */
.card-apply-loading-wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  display: none;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
}
.card-apply-loading-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
}
.card-apply-loading {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  width: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.card-apply-loading-top {
  position: relative;
  margin-bottom: 25px;
}
.card-apply-loading-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 20px;
  border-radius: 100%;
  background: url("../images/illustration/card-apply-loading-1.svg") no-repeat 50% 50% #fff;
  -webkit-animation: card-apply-loading-icon-animate 10s linear infinite;
  animation: card-apply-loading-icon-animate 10s linear infinite;
  -webkit-animation-timing-function: steps(1, end);
  animation-timing-function: steps(1, end);
}
@-webkit-keyframes card-apply-loading-icon-animate {
  0% {
    background-image: url("../images/illustration/card-apply-loading-1.svg");
  }
  25% {
    background-image: url("../images/illustration/card-apply-loading-2.svg");
  }
  50% {
    background-image: url("../images/illustration/card-apply-loading-3.svg");
  }
  75% {
    background-image: url("../images/illustration/card-apply-loading-4.svg");
  }
  100% {
    background-image: url("../images/illustration/card-apply-loading-1.svg");
  }
}
@keyframes card-apply-loading-icon-animate {
  0% {
    background-image: url("../images/illustration/card-apply-loading-1.svg");
  }
  25% {
    background-image: url("../images/illustration/card-apply-loading-2.svg");
  }
  50% {
    background-image: url("../images/illustration/card-apply-loading-3.svg");
  }
  75% {
    background-image: url("../images/illustration/card-apply-loading-4.svg");
  }
  100% {
    background-image: url("../images/illustration/card-apply-loading-1.svg");
  }
}
.card-apply-loading-text {
  position: relative;
  height: 4.2rem;
  color: #fff;
  font-size: 1.6rem;
  line-height: 2.1rem;
  text-align: center;
  white-space: nowrap;
}
.card-apply-loading-text-item {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  opacity: 0;
  -webkit-animation: card-apply-loading-text-animate 10s linear infinite;
  animation: card-apply-loading-text-animate 10s linear infinite;
  -webkit-animation-timing-function: steps(1, end);
  animation-timing-function: steps(1, end);
}
.card-apply-loading-text-item:nth-child(2) {
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
}
.card-apply-loading-text-item:nth-child(3) {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}
.card-apply-loading-text-item:nth-child(4) {
  -webkit-animation-delay: 7.5s;
  animation-delay: 7.5s;
}
@-webkit-keyframes card-apply-loading-text-animate {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes card-apply-loading-text-animate {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.card-apply-loading-progress-bar {
  overflow: hidden;
  width: 230px;
  height: 7px;
  margin: 0 auto;
  border-radius: 4px;
  background-color: var(--gray-80);
}
.card-apply-loading-progress-bar::before {
  content: "";
  display: block;
  width: 80px;
  height: 100%;
  border-radius: 4px;
  background-color: var(--primary);
  -webkit-animation: card-apply-loading-progress-animate 2s linear infinite;
  animation: card-apply-loading-progress-animate 2s linear infinite;
}
@-webkit-keyframes card-apply-loading-progress-animate {
  0% {
    -webkit-transform: translateX(-80px);
  }
  100% {
    -webkit-transform: translateX(230px);
  }
}
@keyframes card-apply-loading-progress-animate {
  0% {
    transform: translateX(-80px);
  }
  100% {
    transform: translateX(230px);
  }
}

/* ui-check-area */
.ui-check-area::before {
  content: "";
  display: table;
}
.ui-check-area-list {
  margin: -15px 0 0;
  padding: 0;
  list-style: none;
}
.ui-check-area-item {
  padding-top: 15px;
}

/* benefit-empty */
.benefit-empty {
  padding: 20px;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 3px 5px 0 rgba(217, 223, 235, 0.3);
}
.benefit-empty-icon {
  width: 60px;
  height: 60px;
  margin: -17px auto 0;
  background: no-repeat 50% 50% / auto 100%;
}
.benefit-empty-icon.type-1 {
  background-image: url("../images/icon/benefit-empty-1.gif");
}
.benefit-empty-icon.type-2 {
  background-image: url("../images/icon/benefit-empty-2.gif");
}
.benefit-empty-icon.type-3 {
  background-image: url("../images/icon/benefit-empty-3.gif");
}
.benefit-empty-text {
  font-size: 1.5rem;
  line-height: 2rem;
  text-align: center;
}
.benefit-empty-button-area {
  margin-top: 15px;
  font-size: 0;
  line-height: 0;
  text-align: center;
}
.benefit-empty-button {
  display: inline-block;
  vertical-align: top;
  padding: 4px 10px;
  border-radius: 13px;
  background-color: var(--gray-10);
  font-size: 1.3rem;
  line-height: 1.8rem;
  text-align: center;
}

/* blur-empty */
.blur-empty {
  margin: 0 -24px;
}
.blur-empty-image {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}
.blur-empty-image::before {
  content: "";
  display: block;
  background: no-repeat 50% 0;
  background-size: 100% auto;
}
.blur-empty-image.type-1::before {
  padding-top: 407.222222%;
  background-image: url("../images/contents/blur-empty-1.png");
}
.blur-empty-image.type-2::before {
  padding-top: 372.222222%;
  background-image: url("../images/contents/blur-empty-2.png");
}
.blur-empty-image.type-3::before {
  padding-top: 108.333333%;
  background-image: url("../images/contents/blur-empty-3.png");
}
.blur-empty-layer {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1000;
  box-sizing: border-box;
  width: 290px;
  padding: 25px;
  border-radius: 20px;
  background-color: rgba(217, 217, 217, 0.4);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.blur-empty-text {
  font-size: 1.5rem;
  line-height: 2rem;
  text-align: center;
}
.blur-empty-button-area {
  margin-top: 15px;
  font-size: 0;
  line-height: 0;
  text-align: center;
}
.blur-empty-button {
  display: inline-block;
  vertical-align: top;
  padding: 4px 10px;
  border-radius: 13px;
  background-color: var(--gray-10);
  font-size: 1.3rem;
  line-height: 1.8rem;
  text-align: center;
}

/* blur-empty type-contents */
.blur-empty.type-contents {
  position: relative;
  margin-right: 0;
  margin-left: 0;
}
.blur-empty.type-contents .blur-empty-layer {
  position: absolute;
  width: 280px;
  padding: 35px 10px;
  background-color: #fff;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* barcode-view */
.barcode-view {
  padding: 0 12px;
}
.barcode-view .coupon-code-barcode-num {
  margin-top: 15px;
  font-size: 1.5rem;
  line-height: 2.2rem;
}

/* account-list */
.flex-middle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  height: 100%;
  min-height: 0;
  margin: 0 -24px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-flex: 1;
}
.flex-middle .slide-account-empty {
  margin: 0;
}
.flex-middle .slide-account-empty-item {
  width: 25%;
}
.flex-middle .slide-account-inner {
  padding: 0 16.666666%;
}
.account-list {
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
}
.account-list-object {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  -webkit-animation: account-list-animation 10s infinite linear;
  animation: account-list-animation 10s infinite linear;
}
.account-list-object::before,
.account-list-object::after {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 111.111111%;
  margin-left: 6.944444%;
  padding-top: 16.666666%;
  background: url("/images/illustration/img-openbank-bank.svg") no-repeat 0 0;
  background-size: 100% 100%;
}
@-webkit-keyframes account-list-animation {
  0% {
    -webkit-transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-118.055556%);
  }
}
@keyframes account-listy-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-118.055556%);
  }
}

/* signup icon */
.signup-icon {
  display: block;
  width: 44px;
  height: 44px;
  margin-top: 15px;
  margin-left: auto;
  background: no-repeat 50% 50% / auto 100%;
}
.signup-icon.type1 {
  background-image: url("../images/icon/ic-signup-01.svg");
}
.signup-icon.type2 {
  background-image: url("../images/icon/ic-signup-02.svg");
}
.signup-icon.type3 {
  background-image: url("../images/icon/ic-signup-03.svg");
}
.signup-icon.type4 {
  background-image: url("../images/icon/ic-creditgrade-04.svg");
}
.signup-icon.type5 {
  background-image: url("../images/icon/ic-signup-05.svg");
}


/* [2026-04-13: KJH] [WPM-13303] 아이콘 수정  */
.signup-icon.ic-card {
  background-image: url("../images/icon/ic_signup_card.svg");
}
.signup-icon.ic-bank {
  background-image: url("../images/icon/ic_signup_bank.svg");
}
.signup-icon.ic-stock {
  background-image: url("../images/icon/ic_signup_stock.svg");
}
.signup-icon.ic-insu {
  background-image: url("../images/icon/ic_signup_insu.svg");
}
/* // [2026-04-13: KJH] [WPM-13303] 아이콘 수정  */

/* loading circle */
.loading-circle {
  margin: 90px auto;
  padding-top: 22px;
  font-size: 0;
  line-height: 0;
  text-align: center;
  white-space: nowrap;
}
.loading-circle-item {
  display: inline-block;
  vertical-align: top;
  width: 12px;
  height: 12px;
  margin: 0 20px;
  border-radius: 6px;
  background: var(--primary);
  -webkit-animation: loading-wave 0.4s ease infinite alternate;
  animation: loading-wave 0.4s ease infinite alternate;
}
.loading-circle-item:nth-child(2) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.loading-circle-item:nth-child(3) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
@-webkit-keyframes loading-wave {
  from {
    -webkit-transform: translateY(0px);
  }
  to {
    -webkit-transform: translateY(-22px);
  }
}
@keyframes loading-wave {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-22px);
  }
}

/* password-masking */
.password-masking {
  margin-top: 35px;
  font-size: 0;
  line-height: 0;
  text-align: center;
  white-space: nowrap;
}
/* [2024-06-18 : shj] 비밀번호 입력 -모양으로 변경 */
.password-masking-circle {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 14px;
  height: 14px;
  margin: 0 9px;
  border-radius: 7px;
}
.password-masking-circle:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  top: 50%;
  left: 0;
  margin-top: -1px;
  background: var(--gray-30);
}
.password-masking-circle.is-active {
  background: var(--primary);
}
.password-masking-circle.is-active:after {
  display: none;
}
/* .password-masking-circle {
display: inline-block;
vertical-align: top;
width: 14px;
height: 14px;
margin: 0 9px;
border-radius: 7px;
background: var(--gray-30);
}
.password-masking-circle.is-active {
background: var(--primary);
} */

/* card-brand-list */
.card-brand-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 12px;
}
.card-brand-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 18px;
  border: 1px solid var(--gray-30);
  border-radius: 15px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.card-brand-text {
  display: block;
  margin-top: 4px;
  font-size: 1.3rem;
  line-height: 1.8rem;
}

/* webtoon-list */
.webtoon-wrap::before {
  content: "";
  display: table;
}
.webtoon-list {
  margin: -12px 0 0 -12px;
  font-size: 0;
  line-height: 0;
}
.webtoon-item {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  width: 50%;
  padding: 12px 0 0 12px;
}
.webtoon-link {
  display: block;
}
.webtoon-thumb {
  margin: -1px -1px 0;
}
.webtoon-thumb img {
  display: block;
  width: 100%;
  border-radius: 15px 15px 0 0;
}
.webtoon-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  min-height: 3.6rem;
  padding: 10px;
  border: 1px solid var(--gray-30);
  border-radius: 0 0 15px 15px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.webtoon-text {
  font-size: 1.3rem;
  line-height: 1.8rem;
  text-align: center;
}

/* event-detail-header */
html.is-wcms-header-less .event-detail-header {
  position: relative;
  z-index: 500;
}
html.is-wcms-header-less .ui-layer .event-detail-header {
  z-index: 0;
}
html.is-wcms-header-less .event-detail-header .full-contents,
html.is-wcms-header-less .event-detail-header .page-section-group {
  display: none;
}
html.is-wcms-header-less .ui-layer .event-detail-header .page-section-group {
  display: block;
}
html.is-wcms-header-less .ui-layer .event-detail-header + .page-section-group.type-line {
  margin-top: 35px;
  padding-top: 35px;
  border-top: 1px solid var(--gray-30);
}
html.is-wcms-header-less .ui-layer .event-detail-header .page-section-group.type-line {
  padding-top: 0;
  border-top: 0;
}
/* [2025-07-01] WPM-11665 기간/대상 노출 순서 변경 */
html.is-wcms-header-less .ui-layer .event-detail-header .page-section-group section.page-section-group:nth-child(1),
html.is-wcms-header-less .new-event #view03 {
  display: none;
}
html.is-wcms-header-less .event-detail-header .coupon-detail-buttons {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
}
html.is-wcms-header-less .event-detail-header + .page-section-group.type-line {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* benefit-detail */
.benefit-detail {
  position: relative;
}
.benefit-detail::before {
  content: "";
  display: table;
}
.benefit-detail + .benefit-detail {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #e5e5e5;
}
.benefit-detail + .benefit-detail:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  display: block;
  width: 20px;
  height: 20px;
  background: url("../images/contents/deli_tour/ic_plus02.png") no-repeat center center;
  background-size: contain;
  transform: translateX(-50%);
}
.benefit-detail-list {
  margin: -12px 0 0 -5px;
  font-size: 0;
  line-height: 0;
}
.benefit-detail-item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  align-items: flex-start;
  box-sizing: border-box;
  width: 100%;
  padding: 12px 0 0 5px;
  -webkit-box-align: start;
  -ms-flex-align: start;
}
.benefit-detail-text {
  display: block;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  padding-top: 4px;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.8rem;
  -webkit-box-flex: 1;
}
.benefit-detail-list.type-col2 .benefit-detail-item {
  width: 50%;
}
.benefit-detail-item .card-detail-benefit-icon {
  -ms-flex: none;
  flex: none;
  -webkit-box-flex: 0;
}

/* skeleton */
.skeleton-before {
  display: none;
}
.is-skeleton .skeleton-before {
  display: block;
}
.is-skeleton .skeleton-after {
  display: none;
}
.skeleton-block {
  display: block;
  border-radius: 3px;
  background: var(--skeleton);
}

/* text-slide */
.text-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
}
.text-slide-list:not(.swiper-wrapper) {
  display: none;
}
.text-slide-item {
  display: block;
}
.text-slide .swiper-object {
  display: block;
  -ms-flex: 1;
  flex: 1;
  order: 1;
  min-width: 0;
  -webkit-box-flex: 1;
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
}
.text-slide .swiper {
  display: block;
}
.text-slide-controller {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  order: 2;
  min-height: 1.8rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
}
.text-slide-controller .swiper-pagination {
  display: block;
}
.text-slide-controller,
.text-slide-controller .swiper-pagination,
.text-slide-controller .swiper-button-prev,
.text-slide-controller .swiper-button-next,
.text-slide-controller .swiper-button-play,
.text-slide-controller .swiper-button-pause,
.text-slide-controller .swiper-button-toggle-play {
  -ms-flex: none;
  flex: none;
  -webkit-box-flex: 0;
}
.text-slide-controller .swiper-pagination {
  position: static;
  order: 2;
  width: auto;
  margin: 0 0 0 4px;
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.5rem;
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
}
.text-slide-controller .swiper-pagination-current {
  color: var(--secondary);
}
.text-slide-controller .swiper-button-prev,
.text-slide-controller .swiper-button-next,
.text-slide-controller .swiper-button-play,
.text-slide-controller .swiper-button-pause,
.text-slide-controller .swiper-button-toggle-play {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  display: block;
  width: 15px;
  height: 15px;
  margin: 0 0 0 4px;
  background: no-repeat 50% 50%;
}
.text-slide-controller .swiper-button-prev::before,
.text-slide-controller .swiper-button-next::before,
.text-slide-controller .swiper-button-play::before,
.text-slide-controller .swiper-button-pause::before,
.text-slide-controller .swiper-button-toggle-play::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0);
}
.text-slide-controller .swiper-button-prev::after,
.text-slide-controller .swiper-button-next::after {
  display: none;
}
.text-slide-controller .swiper-button-prev-text,
.text-slide-controller .swiper-button-next-text,
.text-slide-controller .swiper-button-play-text,
.text-slide-controller .swiper-button-pause-text,
.text-slide-controller .swiper-button-toggle-play-text {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  overflow: hidden;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.text-slide-controller .swiper-button-prev {
  order: 1;
  background-image: url("../images/icon/ic-left.svg");
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
}
.text-slide-controller .swiper-button-next {
  order: 3;
  background-image: url("../images/icon/ic-right.svg");
  -webkit-box-ordinal-group: 4;
  -ms-flex-order: 3;
}
.text-slide-controller .swiper-button-play {
  order: 4;
  background-image: url("../images/icon/ic-play.svg");
  -webkit-box-ordinal-group: 5;
  -ms-flex-order: 4;
}
.text-slide-controller .swiper-button-pause {
  order: 4;
  background-image: url("../images/icon/ic-pause.svg");
  -webkit-box-ordinal-group: 5;
  -ms-flex-order: 4;
}
.text-slide-controller .swiper-button-toggle-play {
  order: 4;
  -webkit-box-ordinal-group: 5;
  -ms-flex-order: 4;
}
.text-slide-controller .swiper-button-toggle-play.is-play {
  background-image: url("../images/icon/ic-play.svg");
}
.text-slide-controller .swiper-button-toggle-play.is-pause {
  background-image: url("../images/icon/ic-pause.svg");
}
.text-slide-controller.is-once .slide-banner-controller {
  display: none;
}

/* category-accordion */
.category-accordion {
  margin: -30px -24px 35px;
}
.category-accordion-tab {
  position: relative;
  padding-right: 44px;
  box-shadow: 0 1px 0 var(--gray-30);
}
.category-accordion-tab::before {
  content: "";
  position: absolute;
  top: 0;
  right: 44px;
  z-index: 10;
  display: block;
  width: 24px;
  height: 100%;
  background: -moz-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 5%,
    rgba(255, 255, 255, 1) 95%,
    rgba(255, 255, 255, 1) 100%
  );
  background: -webkit-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 5%,
    rgba(255, 255, 255, 1) 95%,
    rgba(255, 255, 255, 1) 100%
  );
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 5%,
    rgba(255, 255, 255, 1) 95%,
    rgba(255, 255, 255, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
}
.category-accordion .ui-tab-list {
  box-shadow: none;
}
.category-accordion-opener {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 44px;
  height: 100%;
  background: no-repeat 0 50%;
}
.category-accordion-opener::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  display: block;
  width: 15px;
  height: 14px;
  margin-top: -7px;
  background: url("../images/icon/btn-unfold.svg") no-repeat 50% 50%;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}
.category-accordion-opener::after {
  display: none;
}
.category-accordion-opener.js-accordion-active::before {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.category-accordion-layer::before,
.category-accordion-layer::after {
  content: "";
  display: table;
}
.category-accordion-layer .sorting-area {
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}
.category-accordion-layer .sorting-list {
  padding-bottom: 0;
}

/* ui-button-tooltip-wrap */
.ui-button-tooltip-wrap {
  position: relative;
}

/* ui-button-tooltip-wrap type-share */
.ui-button-tooltip-wrap.type-share .ui-button-tooltip-text {
  right: 0;
  left: auto;
  -webkit-transform: none;
  transform: none;
}
.ui-button-tooltip-wrap.type-share .ui-button-tooltip-text::after {
  right: 40px;
  left: auto;
  margin-left: 0;
}

/* 카占쏙옙 占쏙옙橘占쏙옙? 占쏙옙 2占쌘몌옙 */
.card-pw-wrap {
  text-align: center;
}
.card-pw-wrap .txt {
  font-size: 1.8rem;
}
.card-pw-wrap .txt + .card-pw {
  margin-top: 16px;
}
.card-pw-wrap .card-pw ul {
  display: flex;
  justify-content: center;
}
.card-pw-wrap .card-pw ul .item {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--gray-30);
}
.card-pw-wrap .card-pw ul .item + .item {
  margin-left: 18px;
}
.card-pw-wrap .card-pw ul .item.none {
  background-color: var(--basic);
}
.card-pw-wrap .card-pw ul .item.done {
  background-color: #01b1a8;
}

/* 22.09.30 geniemusic */
.geniemusic .geniemusic-info {
  padding-bottom: 80px;
  background: url(../images/contents/img-geniemusic.png) no-repeat right bottom / 136px 166px;
}
.geniemusic .geniemusic-banner {
  margin-top: 30px;
  padding: 10px 20px;
  border-radius: 20px;
  background: #f5f5f5;
}
.geniemusic .geniemusic-banner .logo-genie {
  width: 42px;
  height: 42px;
}
.geniemusic .geniemusic-banner .logo-genie img {
  width: 100%;
}

/* NaverPay */

/* header button */
.NaverPay .header-button.type-back {
  margin-left: -5px;
  background-image: url(../images/naverpay/ic-header-back.svg);
}

/* title */
.NaverPay .title-box {
  display: flex;
  align-items: center;
}
.NaverPay .page-title {
  flex: 1;
  margin-bottom: 24px;
  font-weight: 600;
}
.NaverPay .page-title-img {
  flex: none;
  width: 40px;
  height: auto;
  margin-bottom: 35px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
}
.NaverPay .page-title-img img {
  width: 100%;
}

/* contents */
.NaverPay .page-contents {
  padding: 15px 24px 95px;
}

/* choose-card */
.NaverPay .js-ui-tab-panel {
  text-align: center;
}
.NaverPay .sorting-item {
  margin-right: 17px;
  padding: 0;
}
.NaverPay .sorting-item:last-child {
  margin-right: 0px;
}
.NaverPay .ui-radio-block.type-tab .ui-label {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #efefef;
}
.NaverPay .ui-radio-block.type-tab .ui-label.js-tabpanel-active::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border: 1px solid #000;
  border-radius: 100%;
  transform: translate(-50%, -50%);
}
.NaverPay .ui-radio-block.tab2 .ui-label {
  background-color: #00df55;
}
.NaverPay .ui-radio-block.tab3 .ui-label {
  background-color: #376194;
}
.NaverPay .ui-checkbox-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid #f5f6f7;
}
.NaverPay .ui-checkbox-wrap .ui-checkbox-block {
  margin: 10px;
}
.NaverPay .ui-checkbox-block.type-large .ui-checkbox-object {
  background-image: url(../images/naverpay/ic-un-checkbox.svg);
}
.NaverPay .ui-checkbox-block.type-large .ui-checkbox:checked + .ui-label .ui-checkbox-object {
  background-image: url(../images/naverpay/ic-checkbox.svg);
}
.NaverPay .ui-checkbox-wrap .ui-checkbox-block .ui-label-text {
  font-size: 1.7rem;
}
.NaverPay .ui-checkbox-wrap .ui-checkbox-block .ui-img {
  width: 30px;
  margin-left: 5px;
}
.NaverPay .ui-checkbox-wrap .ui-checkbox-block .ui-img .img {
  width: 100%;
}

/* button */
.NaverPay .type-naver-button {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0;
}
.NaverPay .type-naver-button .ui-button {
  padding: 19px 8px;
  border-radius: 0px;
  font-size: 1.7rem;
}
.NaverPay .type-get {
  width: 100px;
}

.NaverPay .ui-basic-button.type-quaternary {
  border-color: #f0f2f4;
  background-color: #f6f8fa;
}
.NaverPay .ui-basic-button.type-primary {
  background-color: #009591;
}
.NaverPay .ui-basic-button.type-primary[disabled] {
  background-color: #dcdee0;
  color: #aaaaac;
}
.NaverPay .ui-basic-button.type-gray {
  border-color: #f0f2f4;
  background-color: #f6f8fa;
}

/* check-list */
.NaverPay .ui-select-multiple-item.type-under {
  margin-bottom: 20px;
}
.NaverPay .ui-select-multiple-item.type-under .ui-label {
  padding: 12px 0px 24px;
  border-width: 0 0 1px;
}
.NaverPay .ui-select-multiple-item.type-all .ui-checkbox:checked + .ui-label {
  border-color: var(--gray-30);
}
.NaverPay .ui-select-multiple-item.type-big .ui-label {
  padding: 12px 12px 12px 0;
}
.NaverPay .ui-select-multiple-item.type-big .ui-label .ui-label-text {
  color: #666;
  font-size: 14px;
}
.NaverPay .ui-checkbox-block.type-large .ui-label-text {
  font-size: 1.9rem;
}
.NaverPay .ui-select-multiple-item .ui-arrow-button {
  margin-right: 0;
}
.NaverPay .ui-select-terms {
  margin: 0;
}
.NaverPay .ui-select-terms .ui-label .ui-label-text {
  color: #303038;
  font-size: 1.5rem;
}
.NaverPay .ui-checkbox-object {
  background-image: url("../images/naverpay/ic-checkbox-l.svg");
}
.NaverPay .ui-checkbox:checked + .ui-label .ui-checkbox-object {
  background-image: url("../images/naverpay/ic-checkbox-c.svg");
}

/* form-list */
.NaverPay .form-title {
  color: var(--gray-70);
  font-weight: 400;
  font-size: 1.4rem;
}
.NaverPay .ui-radio-block.type-box .ui-radio:checked + .ui-label {
  color: #009591;
  box-shadow: inset 0 0 0 1px #009591;
}
.NaverPay .ui-radio-block.type-box .ui-radio:checked + .ui-label.ty_bold {
  font-weight: bold;
}
.NaverPay .ui-select-block.type-select::before {
  right: 6px;
  width: 13px;
  height: 13px;
}
.NaverPay .type-select {
  flex: 1;
  margin-left: -1px;
}
.NaverPay .type-select .ui-select {
  min-height: 48px;
  padding: 9px 7px;
  padding-right: 20px;
  border-bottom: none;
  border-radius: 0 6px 6px 0;
  color: var(--gray-70);
  box-shadow: inset 0 0 0 1px var(--gray-30);
  font-size: 1.3rem;
  letter-spacing: -1px;
  text-align: center;
}
.NaverPay .type-select .ui-select:focus {
  border-color: var(--primary) !important;
}
.NaverPay .type-input-range .ui-select {
  color: var(--gray-50);
}
.NaverPay .ui-input-block .ui-timer {
  color: #929294;
}

/* tool-tip */
.NaverPay .form-detail-title .ui-tooltip-wrap {
  margin-left: 3px;
}
.NaverPay .ui-tooltip {
  vertical-align: 2px;
}
.NaverPay .ui-tooltip.js-dropdown-bottom .ui-tooltip-head::before {
  display: none;
}
.NaverPay .ui-tooltip.js-dropdown-bottom .ui-tooltip-bubble {
  border: 1px solid #d1d1d1;
  background-color: #fff;
}
.NaverPay .ui-button-question {
  vertical-align: -10px;
  background-image: url("../images/naverpay/ic-question-wg.svg");
}
.NaverPay .ui-tooltip-bubble-message {
  color: var(--gray-70);
  font-weight: 300;
}
.NaverPay .ui-tooltip-bubble-close {
  top: 8px;
  right: 8px;
  width: 14px;
  height: 14px;
  background-image: url("../images/naverpay/ic-close-gray.svg");
}

/* card-image */
.NaverPay .img-area {
  width: 170px;
  height: 270px;
}
.NaverPay .img-area.ty02 {
  width: 140px;
  height: 220px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
}
.NaverPay .img-area.ty03 {
  width: 200px;
  height: 148px;
}

/* ui-radio */
.NaverPay .ui-radio-block.type-circle .ui-radio:checked + .ui-label .ui-radio-object {
  border-color: var(--gray-40);
}
.NaverPay .ui-radio-block.type-circle .ui-radio:checked + .ui-label .ui-radio-object::after {
  background: #009591;
}

/* fail-notice */
.NaverPay .fail-notice {
  padding: 18px;
  border-radius: 6px;
  background-color: #fff5f5;
}
.NaverPay .fail-notice .ui-notice {
  font-size: 1.4rem;
}
.NaverPay .fail-notice .ui-notice.color-fail::before {
  content: "";
  background-image: url("../images/naverpay/ic-notice-wrong.svg");
}

/* pay-service */
.NaverPay .pay-service .ui-label-text {
  font-size: 1.5rem;
}

/* ui-notice */
.NaverPay .ui-notice.ty02 {
  padding: 0;
  font-weight: 300;
}
.NaverPay .ui-notice.ty02::before {
  display: none;
}

/* ui-input-delete */
.NaverPay .ui-input-delete {
  width: 18px;
  height: 18px;
  background-image: url("../images/naverpay/ic-delete.svg");
}
.NaverPay .ui-input-delete::before {
  display: none;
}
.NaverPay .ui-input-delete::after {
  display: none;
}

/* point-color */
.NaverPay .color-blue {
  color: #007cd9;
}
.NaverPay .color-fail {
  color: #ff5252;
}

/* invalid */
.NaverPay .ui-invalid {
  color: #ff5252;
}
.NaverPay .is-invalid .ui-input {
  border-color: #ff5252;
}

/* //Naverpay */

/* travel 22.08.19 */
.slide-banner.type-fix-height.type-travel .swiper-slide {
  flex-shrink: 0;
  /* width: 80% !important; */
  /* width: calc(50% - 10px) !important;
padding: 0 5px; */
  box-sizing: border-box;
}
.slide-banner.type-fix-height.type-travel .slide-banner-image {
  border-radius: 15px;
}

.menu-horizontal-list.type-travel {
  padding-right: 24px;
  padding-left: 24px;
}
.menu-horizontal-list.type-travel + .type-travel {
  margin-top: 18px;
}
.menu-horizontal-list.type-travel .menu-horizontal-item + .menu-horizontal-item {
  margin-left: 18px;
}
.menu-horizontal-list .menu-horizontal-icon.type-circle {
  width: 30px;
  height: 30px;
  border-radius: 100%;
}
.menu-horizontal-list .menu-horizontal-icon.type-circle img {
  width: 100%;
  border-radius: 100%;
}

.travel-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.travel-item + .travel-item {
  margin-top: 25px;
}
.travel-item {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
}
.travel-link {
  position: relative;
  display: block;
}
.travel-thumb {
  position: relative;
}
.travel-thumb:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.3);
}
.travel-thumb img {
  display: block;
  width: 100%;
  border-radius: 15px;
}
.travel-text {
  position: absolute;
  top: 45%;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  color: #fff;
  font-weight: 500;
  font-size: 2rem;
  line-height: 2.8rem;
  text-align: center;
}
.travel-brand {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 1;
  display: inline-block;
  width: 50%;
  height: 50px;
  border-radius: 15px 15px 0 0;
  background: #fff;
  text-align: center;
  transform: translateX(-50%);
}
.travel-brand img {
  width: 100px;
  margin-top: 12px;
}

/* 22.08.22 */
.hanamoney-wrap {
  display: block;
  text-align: center;
}
.hanamoney-wrap .title {
  font-size: 1.5rem;
  line-height: 2rem;
}
.hanamoney-wrap .title span {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-size: 2rem;
  line-height: 2.8rem;
}
.hanamoney-wrap .title span:after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  z-index: -1;
  display: inline-block;
  width: 100%;
  height: 7px;
  background: #d8f3f2;
}
.hanamoney-wrap .box {
  display: block;
  max-width: 70%;
  margin: 10px auto;
  padding: 15px 10px 13px;
  border: 2px solid #008882;
  border-radius: 6px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  text-align: center;
}
.hanamoney-wrap .box .type-hanamoney {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
  width: auto;
  margin: 10px;
  line-height: 36px;
}
.hanamoney-wrap .box .type-hanamoney:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 40px;
  margin: -1px 10px 0 0;
  background: url(../images/icon/ic_hanamoney.svg) no-repeat 50% 50% / auto 100%;
}
.hanamoney-wrap .box-style1 {
  position: relative;
  display: block;
  max-width: 70%;
  margin: 10px auto;
  padding: 15px 10px 13px;
  border: 2px solid #008882;
  border-radius: 6px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  text-align: center;
}
.hanamoney-wrap .box-style1 .type-hanamoney {
  width: auto;
  height: 50px;
  margin: 10px;
}
.hanamoney-wrap .box-style1 .type-hanamoney:before {
  content: "";
  position: absolute;
  top: calc(50% - 20px);
  left: 5%;
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url(../images/icon/ic_hanamoney.svg) no-repeat 50% 50% / auto 100%;
}
.hanamoney-wrap .box-style1 .type-hanamoney .hanamoney-t1 {
  position: absolute;
  top: 5px;
  right: 5%;
  color: var(--gray-70);
  font-size: 1.2rem;
}
.hanamoney-wrap .box-style1 .type-hanamoney .hanamoney-t2 {
  position: absolute;
  top: 27px;
  right: 5%;
  color: var(--point);
  font-size: 2.5rem;
}
.hanamoney-wrap .box-style1 .type-hanamoney .hanamoney-t3 {
  position: absolute;
  right: 5%;
  bottom: 5px;
  color: var(--gray-70);
  font-size: 1.2rem;
}

/* 22.09.29 원주시 3차 재난지원금 개발 적용 시 수정 */
.usage-default-list.addlist {
  margin-top: 35px;
}
.usage-default-list.addlist li {
  position: relative;
}
.usage-default-list.addlist li:nth-child(1)::before {
  content: "";
  position: absolute;
  top: 0;
  right: -24px;
  left: -24px;
  height: 10px;
  background-color: var(--gray-10);
}
/* 221116 카드플레이트 추가 */
.total-amount-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.total-amount-flex .total-amount-right .rank-cell.type-card {
  position: relative;
  width: 49.09px;
  min-height: 78px;
  margin-top: 0;
  margin-right: 9px;
}
.total-amount-flex .total-amount-right .rank-cell.type-card.type-card-all {
  width: 45px;
  min-height: 71.5px;
}
.total-amount-flex .total-amount-right .rank-cell.type-card::after {
  content: "";
  position: absolute;
  right: -9px;
  bottom: -9px;
  display: inline-block;
  width: 31px;
  height: 31px;
  background: url(../images/icon/ic-button-arrow-card.png) no-repeat 100% 100% / 31px 31px;
}
.total-amount-flex .total-amount-right .rank-cell.type-card.type-card-all::after {
  bottom: -15px;
}
.total-amount-flex .total-amount-right .rank-cell.type-card.type-card-all .card-image {
  width: 71.5px;
}
.total-amount-flex .total-amount-right .card-image {
  width: 78px;
  -webkit-transform: rotate(90deg) translateY(-100%);
  transform: rotate(90deg) translateY(-100%);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.total-amount-flex .total-amount-right .card-image-inner {
  position: relative;
  display: block;
  padding-top: 63.060748%;
  border-radius: 3.5%/5.6%;
}
.total-amount-flex .total-amount-right .rank-cell.type-card.type-card-all .card-image-inner {
  background: #cbcbcb;
}
.total-amount-flex .total-amount-right .card-image-inner .img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3.5%/5.6%;
}
.total-amount-flex .total-amount-right .rank-cell.type-card.type-card-all .card-image-inner img {
  top: 6px;
  left: 6px;
}
.total-amount-flex .total-amount-right .rank-cell.type-card.type-card-all .card-image-inner::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  display: inline-block;
  width: 71.5px;
  height: 45.08px;
  border-radius: 3.5%/5.6%;
  background: linear-gradient(45deg, #00a49b, #8f6cff);
}
.total-amount-flex .total-amount-right .rank-cell.type-card.type-card-all .card-image-inner::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1000;
  display: inline-block;
  width: 71.5px;
  height: 45.08px;
  border-radius: 3.5%/5.6%;
  background: url(../images/icon/icon-logo-hana-w.png) no-repeat center center / 23px auto;
}
.total-amount-flex .total-amount-right .rank-cell.type-card .skeleton-before .skeleton-block {
  position: absolute;
  right: -5px;
  z-index: 100;
  width: 56px;
  height: 80px;
}

/* 221109 모바일 팝업 사이즈 변경 */
/* .notice-popup .notice-popup-body-area::before {
  padding-top: 80.83%;
} */
/* [2025-11-18 KJH] 메인 하단 팝업에 요소가 두개 뜨는 현상 높이 수정 */
.notice-popup .notice-popup-body-area::before {
  padding-top: 0;
  height: 80.83vw;
  max-height: calc(640px * 0.8083);
}
.notice-popup .ui-layer__body {
  margin: 50px 0 0;
  padding-bottom: 106px;
}
.notice-popup .ui-layer__body2 {
  -ms-flex: 1;
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  min-height: 0;
  margin: 50px 0 20px 0;
  padding-bottom: 0px;
  -webkit-box-flex: 1;
}
.notice-popup .notice-popup-contents .ui-layer__body:first-child .ui-layer__body-inner {
  padding: 0 24px;
}
.notice-popup .ui-buttons {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% - 48px);
  margin: 0;
  padding: 30px 24px 28px 24px;
  background: #fff;
}
.notice-popup .ui-buttons .ui-basic-button.type-primary {
  border: 0;
  color: #fff;
}
.notice-popup .ui-buttons2 {
  width: 100%;
  margin: 0;
  padding: 30px 0px 0px 0px;
  background: #fff;
}
.notice-popup .ui-buttons2 .ui-basic-button.type-primary {
  border: 0;
  color: #fff;
}

/* 230102 자동납부 롤링 배너 */
.payment-wrap .slide-banner-item {
  border-top: 1px solid var(--gray-30);
  border-bottom: 1px solid var(--gray-30);
}
.payment-wrap .slide-banner-item .payment-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
  flex: 1;
  align-items: stretch;
  align-items: center;
  box-sizing: border-box;
  min-width: 0;
  padding: 20px;
  text-align: left;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-box-flex: 1;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.payment-wrap .slide-banner-item .payment-inner .payment-logo {
  margin-right: 10px;
}
.payment-wrap .slide-banner-item .payment-inner .payment-logo img {
  box-sizing: border-box;
  height: 42px;
  border-radius: 12px;
}
.payment-wrap .slide-banner-item .payment-inner .payment-textbox {
  width: calc(100% - 52px);
}
.payment-wrap .slide-banner-item .payment-inner .payment-textbox .payment-brand {
  overflow: hidden;
  width: calc(100% - 90px);
  margin-bottom: 2px;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 1.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.payment-wrap .slide-banner-item .payment-inner .payment-textbox .payment-title {
  overflow: hidden;
  width: 100%;
  font-size: 1.7rem;
  line-height: 2.4rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.payment-wrap .slide-banner-item .payment-inner .payment-textbox .payment-date {
  box-sizing: border-box;
  max-width: 100%;
  margin-top: 12px;
  color: var(--gray-70);
  font-size: 1.2rem;
  line-height: 1.7rem;
  word-break: break-all;
}
.payment-wrap .slide-banner-item .payment-inner .payment-title2 {
  align-items: center;
  box-sizing: border-box;
  width: calc(100% - 52px);
  font-size: 1.7rem;
  line-height: 2.4rem;
  text-align: left;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.payment-wrap .slide-banner-controller {
  top: 12px;
}

/* 230116 전체 탭 배너 버튼 */
.wcms-data .wcms-button.wcms-event-button1 {
  position: relative;
  min-height: 55px;
  border: none;
  background-color: #e6f0ff;
}
.wcms-data .wcms-button.wcms-event-button1 .wcms-button-text {
  color: #111;
  font-size: 15px;
  line-height: 20px;
}
.wcms-data .wcms-button.wcms-event-button1::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 30px;
  display: block;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: url("/images/wcms/arrow-black.svg") no-repeat 50% 50%;
}
.wcms-data .wcms-button.wcms-event-button1::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 30px;
  display: block;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  background: url("/images/contents/pop_icon_01.png") no-repeat center;
  background-size: contain;
}
.wcms-data .wcms-button.wcms-event-button2 {
  position: relative;
  min-height: 55px;
  border: none;
  background-color: #e6f0ff;
}
.wcms-data .wcms-button.wcms-event-button2 .wcms-button-text {
  color: #111;
  font-size: 15px;
  line-height: 20px;
}
.wcms-data .wcms-button.wcms-event-button2::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 30px;
  display: block;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: url("/images/wcms/arrow-black.svg") no-repeat 50% 50%;
}
.wcms-data .wcms-button.wcms-event-button2::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 30px;
  display: block;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  background: url("/images/contents/pop_icon_02.png") no-repeat center;
  background-size: contain;
}
.wcms-data .wcms-button.wcms-event-button3 {
  position: relative;
  min-height: 55px;
  border: none;
  background-color: #1b44cb;
}
.wcms-data .wcms-button.wcms-event-button3 .wcms-button-text {
  color: #fff;
  font-size: 15px;
  line-height: 20px;
}
.wcms-data .wcms-button.wcms-event-button3::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 30px;
  display: block;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: url("/images/wcms/arrow-white.svg") no-repeat 50% 50%;
}
.wcms-data .wcms-button.wcms-event-button3::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 30px;
  display: block;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  background: url("/images/contents/pop_icon_03.png") no-repeat center;
  background-size: contain;
}
.wcms-data .ui-button.ui-basic-button.wcms-event-button3 {
  min-height: 55px;
  border: none;
  background-color: #1b44cb;
  color: #fff;
}
.wcms-data .ui-button.ui-basic-button.wcms-event-button3::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 55px;
  display: block;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: url("/images/wcms/arrow-white.svg") no-repeat 50% 50%;
}
.wcms-data .ui-button.ui-basic-button.wcms-event-button3::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 55px;
  display: block;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  background: url("/images/contents/pop_icon_03.png") no-repeat center;
  background-size: contain;
}

/* 230130 송금 UI 변경 */
.payment-contents .page-title {
  font-weight: 500;
  font-size: 2rem;
}
.payment-contents .form-title .title {
  color: #111;
  font-weight: 500;
  font-size: 2.1rem;
}
.payment-contents .ui-select-block .ui-select {
  height: 46px;
  border-bottom: 2px solid #f2f2f2;
}
.payment-contents .ui-select-block .ui-select .form-flex-cell span {
  margin-bottom: 0;
  font-weight: 500;
  font-size: 2.1rem;
}
.payment-contents .type-narrow .ui-input-block input {
  color: #00a49d;
  font-weight: 700;
  font-size: 2.5rem;
}
.payment-contents .type-narrow .ui-input-block input.ui-input {
  border-bottom: 2px solid #f2f2f2;
}
.payment-contents .type-narrow .ui-input-block input.ui-input:focus {
  border-color: #f2f2f2;
}
.payment-contents .type-narrow .ui-input-block input.ui-input::-webkit-input-placeholder {
  color: var(--primary);
  opacity: 1;
  -webkit-text-fill-color: var(--primary);
}
.payment-contents .type-narrow .ui-input-block input.ui-input::-moz-placeholder {
  color: var(--primary);
  opacity: 1;
  -webkit-text-fill-color: var(--primary);
}
.payment-contents .type-narrow .ui-input-block input.ui-input:-ms-input-placeholder {
  color: var(--primary);
  opacity: 1;
  -webkit-text-fill-color: var(--primary);
}
.payment-contents .type-narrow .ui-input-block input.ui-input:-moz-placeholder {
  color: var(--primary);
  opacity: 1;
  -webkit-text-fill-color: var(--primary);
}
.payment-contents .type-narrow .form-flex-cell span.medium-text {
  font-weight: 500;
  font-size: 2.1rem;
}
.payment-contents .ui-select-block .ui-select .logo-image {
  width: 31px;
  margin-right: 9px;
}
.payment-contents .ui-select-block .ui-select .logo-image .logo-image-inner img {
  border-radius: 6px;
}
.payment-account-wrap .page-title.line-height {
  line-height: 3.6rem;
}
.payment-account-motion {
  animation: 0.5s 0s ease-in-out both showItemUp;
}
.payment-account-wrap .payment-account {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.payment-account-wrap .payment-account .logo-image {
  width: 23px;
  margin-top: 1px;
  border-radius: 50%;
}
.payment-account-wrap .payment-account > span {
  font-weight: 500;
  font-size: 1.5rem;
}
.payment-account-wrap .payment-account > span + span {
  margin-left: 10px;
}
.payment-account-wrap .payment-account .name {
  color: #888;
}
.payment-account-wrap .payment-account .account-number {
  color: #111;
}
.layout-wrap.payment-bg-wrap .header {
  background-color: #f4f6f8;
}
.payment-bg-contents {
  background-color: #f4f6f8;
}
.payment-bg-contents .page-section-group:not(:first-child) {
  margin-top: 15px;
}
.payment-banner-list::after {
  content: "";
  display: block;
  clear: both;
}
/* 23.02.08*/
.payment-bg-wrap .layer-container .ui-layer {
  background-color: #f4f6f8;
}
.payment-bg-wrap .layer-container .ui-layer .ui-layer__body-inner {
  height: 100%;
  padding: 0;
}
.payment-bg-wrap .header-title {
  font-size: 1.9rem;
}
.payment-bg-contents {
  padding: 30px 24px 35px;
}
.payment-bg-contents .page-title {
  margin-bottom: 14px;
  font-weight: 500;
}
/* 24.04.16 송금상단 배너 아래 여백 수정 */
.payment-bg-contents.type-step .slide-banner.is-once {
  margin-bottom: 30px;
}
.payment-bg-contents.type-step .slide-banner.is-once + br {
  display: none;
}
/* //24.04.16 송금상단 배너 아래 여백 수정 */
.payment-banner-item {
  box-sizing: border-box;
  width: 100%;
}
.payment-banner-item + .payment-banner-item {
  margin-top: 20px;
}
.payment-banner-link {
  display: flex;
  padding: 20px 18px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
  line-height: 0px;
  text-align: right;
}
.payment-banner-item .card-item {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  text-align: left;
}
.payment-banner-item .card-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
.payment-bg-wrap .logo-image {
  width: 40px;
}
.payment-bg-wrap .logo-image > img {
  height: 40px;
  border-radius: 12px;
}
.payment-banner-item .card-info {
  display: block;
  min-width: 0;
  padding-left: 20px;
}
.payment-banner-item .card-number {
  position: relative;
  display: block;
  margin-bottom: 8px;
  color: var(--gray-70);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 20px;
  letter-spacing: -0.33px;
}
.payment-banner-item .card-number .card-bank {
  position: relative;
  padding-right: 17px;
}
.payment-banner-item .card-number .card-bank::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 7px;
  width: 2px;
  height: 12px;
  background: #e2e2e2;
}
.payment-banner-item .card-name {
  display: block;
  overflow: hidden;
  margin-bottom: 5px;
  padding-right: 10px;
  color: #111;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.44;
  letter-spacing: -0.4px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.payment-banner-item .card-name.card-tit {
  position: relative;
  display: inline-block;
  padding-right: 18px;
  color: #000;
  line-height: 23px;
  letter-spacing: -0.4px;
}
.payment-banner-item .card-name.card-tit:after {
  content: "";
  position: absolute;
  top: 4px;
  right: 0;
  display: block;
  width: 15px;
  height: 15px;
  background: url(../images/icon/ic-notice.svg) no-repeat;
  background-size: cover;
}
.payment-banner-item .hana-point-box {
  color: #a3a3a3;
  font-weight: 600;
  font-size: 2.2rem;
  line-height: 29px;
  letter-spacing: -0.55px;
}
.payment-banner-item .card-won {
  display: block;
  overflow: hidden;
  color: var(--primary);
  font-weight: 600;
  font-size: 2.3rem;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.payment-banner-item .hana-point-box .card-won {
  display: inline-block;
  overflow: visible;
}
.payment-banner-item .ui-arrow-block::after {
  right: 15px;
}
.payment-banner-item .card-item.payment-banner {
  padding: 0px;
  padding-right: 20px;
}
.payment-banner-item .card-item.payment-banner .card-block {
  position: relative;
  padding-right: 65px;
  background: url(../images/icon/img_hanamoney_shadow.png) no-repeat calc(100% - 2px) center;
  background-size: 65px 65px;
}
.payment-banner-item .card-item.payment-banner .card-block.bg-gif {
  background-image: url(../images/icon/bank_ci_payment.gif);
  background-position-x: calc(100% - 6px);
  background-size: 45px auto;
}
.payment-banner-item .card-item.payment-banner .logo-image2 .logo-image-inner img {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 12px;
}
.payment-banner-item .card-item.payment-banner .card-label {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  padding: 5px 10px;
  /* [2024-05-17 : lyr] border-radius 15px → 10px로 변경 */
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  background: #bc5da6;
  color: #fff;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 17px;
  letter-spacing: -0.65px;
}
.payment-banner-item .card-item.payment-banner .card-info2 {
  display: block;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  padding: 21px 0 23px 25px;
  -webkit-box-flex: 1;
}
.payment-banner-item .card-item.payment-banner .card-info2 .card-title {
  display: block;
  overflow: hidden;
  margin-bottom: 30px;
  color: #2f2f2f;
  font-weight: 600;
  font-size: 2rem;
  line-height: 26px;
  letter-spacing: -0.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.payment-banner-item .card-item.payment-banner .card-info2 .card-link {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding-right: 10px;
  color: #bc5da6;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.payment-banner-item .card-item.payment-banner .card-block.bg-gif .card-link {
  color: #7e83ff;
}
.payment-banner-item .card-item.payment-banner .card-info2 .card-link:after {
  content: "";
  position: absolute;
  top: 5px;
  right: 0;
  width: 8px;
  height: 9px;
  background: url(../images/icon/ic-arrow-purple.svg) no-repeat;
}
.payment-banner-item .card-item.payment-banner .card-block.bg-gif .card-link:after {
  background-image: url(../images/icon/ic-arrow-blue.svg);
}
.payment-banner-item .card-item.payment-banner.ui-arrow-block::after {
  display: none;
}
/* 240421 jy */
.payment-banner-item .txt-item {
  position: relative;
  margin-top: 24px;
  padding: 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: -0.17px;
}
.payment-banner-item .txt-item::after {
  content: "";
  position: absolute;
  top: 15px;
  right: 16px;
  display: block;
  width: 16px;
  height: 16px;
  background: url(../images/icon/btn-more-l-b.svg) no-repeat center right;
  background-size: 10px;
}
/* // 240421 jy */
.account-tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 44px;
}
.account-tit h4,
.account-tit span {
  color: #111;
  font-weight: 500;
  font-size: 1.6rem;
}
.account-tit span {
  position: relative;
  display: flex;
  padding-right: 14px;
  font-size: 1.4rem;
}
.account-tit span em {
  position: absolute;
  top: 3px;
  right: 0;
  display: block;
  width: 10px;
  height: 10px;
  font-weight: 400;
  font-size: 0;
}
.account-tit em:before,
.account-tit em::after {
  content: "";
  position: absolute;
  border-radius: 20px;
  background: #111;
}
.account-tit em:before {
  top: 0px;
  right: 4px;
  width: 2px;
  height: 10px;
}
.account-tit em:after {
  top: 4px;
  right: 0;
  width: 10px;
  height: 2px;
}
.account-group {
  position: relative;
  margin: 17px 0 0 0; /* 231130_수정 : 이화정 */
}
.account-group:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  background: -moz-linear-gradient(
    left,
    rgba(247, 247, 247, 0) 0%,
    rgba(247, 247, 247, 0) 1%,
    rgba(247, 247, 247, 1) 84%,
    rgba(247, 247, 247, 1) 100%
  );
  background: -webkit-linear-gradient(
    left,
    rgba(247, 247, 247, 0) 0%,
    rgba(247, 247, 247, 0) 1%,
    rgba(247, 247, 247, 1) 84%,
    rgba(247, 247, 247, 1) 100%
  );
  background: linear-gradient(
    to right,
    rgba(247, 247, 247, 0) 0%,
    rgba(247, 247, 247, 0) 1%,
    rgba(247, 247, 247, 1) 84%,
    rgba(247, 247, 247, 1) 100%
  );
}
.account-group ul {
  display: flex;
  overflow-x: scroll;
  padding-right: 30px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.account-group ul::-webkit-scrollbar {
  display: none;
}
.account-group ul li {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  /*flex-direction: column;*/
  justify-content: center;
  align-items: center;
  width: 52px;
  padding: 15px 20px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05); /* 231130_수정 : 이화정 */
  text-align: center;
}
/*.account-group ul li:first-child{padding-left:24px;}*/
.account-group ul li + li {
  margin-left: 8px;
}
.account-group ul li p {
  overflow: hidden;
  width: 100%;
  margin-top: 8px;
  color: #000;
  font-weight: 400;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-group ul li p span {
  display: block;
  margin-top: 2px;
  color: var(--gray-70);
  font-size: 13px;
}
.ui-button-tooltip.account-tooltip-box {
  bottom: -28px;
}
.ui-button-tooltip.account-tooltip-box .ui-button-tooltip-text:after {
  top: -12px;
  border-width: 6px 5px;
  transform: rotate(180deg);
}
/* 23.02.09 송금진입 UI animation*/
.pay-fade-in {
  -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in-bottom 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
@keyframes fade-in-bottom {
  0% {
    opacity: 0;
    -webkit-transform: translateY(54px);
    transform: translateY(54px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
/* 여행 배너 */
.travel-swiper-banner {
  margin-top: 35px;
}
.travel-swiper-banner .swiper-pagination {
  position: static;
  margin-top: 10px;
}
.travel-swiper-banner .swiper-scrollbar {
  display: none;
}
.travel-swiper-banner button {
  display: none;
}

/* 클럽 프리머스 카드 Free Package */
.refue-end {
  height: 0;
  padding: 0 15px;
  opacity: 0;
  visibility: hidden;
  transition: height 0.3s, opacity 0.2s;
}
.refue-end.on {
  height: 64px;
  opacity: 1;
  visibility: visible;
}

.page-section .form-bottom .type-tooltip .ui-buttons-list.type-wrap {
  padding-top: 0 !important;
}

/* 전자고지알림 2023-03-09 추가 start */
.alert-electronic-push {
  text-align: center;
}
.alert-electronic-push .electronic-push {
  position: relative;
  margin-top: 30px;
  padding: 0 50px;
}
.alert-electronic-push .electronic-push .letter-img-wrap {
  position: relative;
  width: 100%;
  max-width: 360px;
  max-height: 450px;
  margin: 0 auto;
  padding-top: 125%;
  background-image: url("../images/gj/img-letter-push.gif");
  background-position: center top;
  background-size: 100%;
  background-repeat: no-repeat;
}
.alert-electronic-push .electronic-push .letter {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  box-sizing: border-box;
  height: 100%;
  padding-top: 20%;
  opacity: 0;
}
.alert-electronic-push .electronic-push .letter .text-price {
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1.3;
  text-align: center;
}
.alert-electronic-push .electronic-push .letter .text-price.color-primary {
  margin-top: 8px;
  font-size: 2.4rem;
  line-height: 1.3;
  text-align: center;
}
.alert-electronic-push .electronic-push .letter .text-date {
  position: absolute;
  bottom: 20%;
  width: 100%;
  font-size: 1.3rem;
  line-height: 1.4;
  text-align: center;
}
.alert-electronic-push .electronic-push .letter .text-date span {
  display: block;
  color: var(--basic);
}

.layer-wrap.layer-electronic-push .electronic-push .letter.txt_ani {
  animation: fadein 4s ease-in-out;
  animation-delay: 0.2s;
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
    transform: translateY(20px);
  }
  30%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 510px) {
  .alert-electronic-push .electronic-push .letter-img-wrap {
    width: 360px;
    height: 450px;
    padding: 0;
  }
}
/* 전자고지알림 2023-03-09 추가  end */

/* 23.03.21 금융 한눈에보기 레이아웃 수정 */
.page-contents.card-type {
  padding-right: 14px;
  padding-left: 14px;
  background-color: #f4f4f4;
}

.page-contents.card-type .ui-tab {
  margin-bottom: 12px;
  background-color: #fff;
}

.page-contents.card-type .ui-tab.type-nav {
  margin-right: -14px;
  margin-left: -14px;
}

.page-contents.card-type .card-area {
  position: relative;
  z-index: 1;
  margin-bottom: 12px;
  border-radius: 10px;
  background: #fff;
}

.page-contents.card-type .card-area > a {
  display: block;
  /*    padding:22px 30px;*/
  padding: 16px 0;
  border-radius: 10px;
}

.page-contents.card-type .card-area .form-detail-head {
  justify-content: center;
  margin-top: 0;
  margin-bottom: 16px;
}

.page-contents.card-type .card-area .form-detail-head h3 {
  font-size: 1.9rem;
  line-height: 2.2rem;
}

.page-contents.card-type .card-area .form-detail-head h3::after {
  content: "";
  display: inline-block;
  clear: both;
  width: 12px;
  height: 12px;
  margin-left: 3px;
  background-image: url("../images/icon/ic-right.svg");
  background-position: 0 50%;
}

.page-contents.card-type .card-area h3 span.form-detail-head-sub {
  font-weight: 500;
}

.page-contents.card-type .summary-item-key {
  margin-bottom: 4px;
  color: #2b2b2b;
}

.page-contents.card-type .summary-item-val-inner.card-text {
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-contents.card-type .card-area .summary-item-key {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 2.1rem;
}

.page-contents.card-type .card-help {
  position: relative;
  margin-bottom: 12px;
}

.page-contents.card-type .summary-item-helper {
  position: relative;
  bottom: 23.5px;
  overflow: hidden;
  width: 100%;
  min-height: 68.5px;
  margin-bottom: -23px;
  border-radius: 10px;
  background: var(--primary);
  animation: helpButton 1.5s ease-in-out;
}

@keyframes helpButton {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: translateZ(0);
  }
}

.page-contents.card-type .summary-item-helper a {
}

.page-contents.card-type .summary-item-helper a p {
  padding: 34px 0 12px;
  color: #fff;
  font-weight: bold;
  font-size: 1.4rem;
  line-height: 1.5;
  text-align: center;
}

.page-contents.card-type .summary-item-helper a img {
  position: absolute;
  right: -4px;
  bottom: -3px;
  width: 82px;
  height: auto;
}

.page-contents.card-type .card-area .not-agree {
  margin: 23px 0 0;
}

/* 카드형 레이아웃 그라디언트 툴팁 */

.page-contents.card-type .tooltip-type {
  margin-top: 46px;
}

.card-grad-tooltip {
  position: absolute;
  top: -17px;
  left: 12px;
  z-index: 2;
  align-items: center;
  width: auto;
  animation: cardGradToolTip 1.5s ease-in-out;
}

@keyframes cardGradToolTip {
  0% {
    opacity: 0;
    transform: translate3d(0, 50%, 0);
  }

  30% {
    opacity: 1;
    transform: translateZ(0);
  }

  100% {
    opacity: 1;
    transform: translateZ(0);
  }
}

.card-grad-tooltip::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 20px;
  z-index: -1;
  display: block;
  clear: both;
  border-top: 12px solid #15c5a5;
  border-right: 10px solid transparent;
  border-bottom: 0 solid transparent;
  border-left: 10px solid transparent;
}

.grad-tooltip-disc {
  height: auto;
  padding: 6px 9px;
  border-radius: 5px;
  background-image: linear-gradient(94deg, #00d39a 1%, #a56af7 102%);
  color: #fff;
}

.grad-tooltip-disc a {
  color: #fff;
  font-weight: 500;
  font-size: 1.4rem;
}

/* // 23.03.21 금융 한눈에보기 레이아웃 수정 */

/* ui-reload-button 23.04.05 새로고침 버튼추가 - 추후 개발반영 시 반영 예정
.ui-reload-button {
position: relative;
display: block;
font-size: 1.3rem;
line-height: 1.8rem;
padding-right: 19px;
}
.ui-reload-button::before {
content: '';
display: block;
width: 16px;
height: 16px;
position: absolute;
top: 50%;
right: 0;
margin-top: -8px;
background: url('../images/icon/reload.svg') no-repeat 50% 50%;
}
.ui-reload-button.is-animate::before {
-webkit-animation: reload-button-animate 1s infinite;
animation: reload-button-animate 1s infinite;
}
@-webkit-keyframes reload-button-animate {
0% {
  -webkit-transform: rotate(0deg);
}
100% {
  -webkit-transform: rotate(360deg);
}
}
@keyframes reload-button-animate {
0% {
  transform: rotate(0deg);
}
100% {
  transform: rotate(360deg);
}
} */

/* 23.05.26 내 문서 페이지 수정*/
.my-doc-header {
  position: relative;
  padding-bottom: 30px;
  /*    text-align: center;*/
}
.my-doc-header-txt {
  font-size: 2rem;
  line-height: 30px;
}
.my-doc-header-img-box {
  width: 100%;
  /*    margin-top: 20px;*/
  text-align: right;
}
.my-doc-header img {
  width: 58%;
  transform: scale(0.8);
}
.my-doc-link-box {
  margin-bottom: 20px;
  padding: 23px 0px 23px 20px;
  border: 1px solid var(--gray-30);
  border-radius: 15px;
}
.my-doc-link-item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
}
.my-doc-link-text-box {
  margin-left: 15px;
}
.my-doc-banner-wrap {
  margin-top: 40px;
}
.my-doc-banner-wrap img {
  width: 100%;
  border-radius: 10px;
}
.my-doc-link-title {
  font-size: 1.7rem;
  line-height: 2.1rem;
}
.discount-tag {
  margin-left: 10px;
  padding: 3px 7px;
  border-radius: 10px;
  background-color: #8665ef;
  color: #fff;
  font-weight: 400;
  font-size: 12px;
}
.my-doc-link-text {
  margin-top: 10px;
  color: var(--gray-70) !important;
  font-size: 1.4rem;
  line-height: 18px;
}
.my-doc-link-item::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  display: block;
  width: 12px;
  height: 13px;
  margin-top: -7px;
  background: url(../images/icon/btn-more-l.svg) no-repeat 50% 50%;
}
/* ui-reload-button 23.04.05 새로고침 버튼추가 20230823 버튼 최소 높이 수정 */
.ui-reload-button {
  position: relative;
  display: block;
  min-height: 1.8rem;
  padding-right: 19px;
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.ui-reload-button::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  display: block;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: url("../images/icon/reload.svg") no-repeat 50% 50%;
}
.ui-reload-button.is-animate::before {
  -webkit-animation: reload-button-animate 1s infinite;
  animation: reload-button-animate 1s infinite;
}
@-webkit-keyframes reload-button-animate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes reload-button-animate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* P_CC_Dobj_p001.html _ 국내이의 신청·철회·항변 접수 CHO */
.card-list.type-line2 .card-item .card-block {
  width: calc(100% - 60px);
  padding: 0;
}
.card-list.type-line2 .card-item .card-block.full {
  width: 100%;
}
.card-list.type-line2 .card-item > .ui-buttons {
  position: absolute;
  top: 50%;
  right: 20px;
  width: auto;
  margin-top: -24px;
}
.card-list.type-line2 .card-item > .ui-buttons .ui-button {
  width: 52px;
  height: 40px;
}
.card-list.type-line2 .card-item > .ui-buttons.type-group {
  position: relative;
  top: auto;
  right: auto;
  display: flex;
  width: 100%;
  margin-top: 16px;
}
.card-list.type-line2 .card-item > .ui-buttons.type-group ul {
  display: flex;
  width: 100%;
}
.card-list.type-line2 .card-item > .ui-buttons.type-group .ui-button {
  flex: 1;
  width: auto;
}

/* ====================== 230519 혜택 모아 모달창 css (한동희) =====================*/
.modal-banner-list {
  text-align: left;
}
.modal-banner-list-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 26px;
  padding: 0 8px;
  color: #111;
  font-weight: 400;
  font-size: 1.5rem;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-box-align: center;
  -ms-flex-align: center;
  /*    border-bottom: 1px solid #d5d5d5;*/
}
.modal-banner-item {
  margin-bottom: 17px;
  /*    padding: 19px 18px;*/
  border-radius: 11px;
}
.modal-banner-item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.modal-banner-item ul {
  margin-left: 13px;
}
.modal-banner-item .banner-item-subtit {
  color: #464646;
  font-weight: normal;
  font-size: 1.3rem;
  text-align: left;
}
.modal-banner-item .banner-item-tit {
  margin-top: 5px;
  color: #111;
  font-weight: 500;
  font-size: 1.6rem;
  text-align: left;
}
.modal-banner-item.bg-hotel {
  background-color: #ffeaea;
}
.modal-banner-item.bg-cu {
  background-color: #f4edf8;
}
.modal-banner-item.bg-emart {
  background-color: #fcefd8;
}
.modal-card-banner-wrap {
  margin-top: 48px;
}
/*
.modal-card-banner-item {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 16px;
padding: 14px 31px;
background-color: #f6f6f8;
border-radius: 11px;
}
*/
/*23059 수정*/
.modal-card-banner-item {
  width: 100%;
  margin-top: 16px;
  margin-bottom: 5px;
}
.modal-card-banner-item .card-banner-item {
  width: 100%;
}
.card-banner-txt-box {
  margin-left: 45px;
}
.card-banner-txt-box .card-banner-tit {
  margin-bottom: 10.8px;
  font-weight: bold;
  font-size: 1.5rem;
}
.card-banner-txt-box .card-banner-txt {
  font-weight: normal;
  font-size: 1.2rem;
  line-height: 1.75;
}
.modal-card-banner-item .travel-card-cloud-1 {
  position: absolute;
  top: 11px;
  right: -15px;
}
.modal-card-banner-item .travel-card-cloud-2 {
  position: absolute;
  bottom: 32px;
  left: -15px;
}
.ui-basic-button.type-card-modal {
  border: none;
  background-color: #ffd95c;
  color: #292929;
  font-weight: bold;
  font-size: 1.5rem;
}
.ui-basic-button.type-card-modal .btn_icon_alarm {
  margin-right: 5px;
}
.ui-basic-button.type-card-modal .btn_icon_ar {
  margin-left: 7px;
}
/*NEW 하단 모달*/
.fix-bottom-modal {
  position: fixed;
  right: 0;
  bottom: 61px;
  left: 0;
  z-index: 1000;
  box-sizing: border-box;
  width: 100%;
  padding: 9px 28px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-color: #fff;
  box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.11);
}
.fix-bottom-modal-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.fix-bottom-modal-txt-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.fix-bottom-modal-txt-wrap > img {
  width: 30px;
}
.fix-bottom-modal .fix-bottom-modal-txt {
  box-sizing: border-box;
  margin-left: 5px;
  color: #111;
  font-weight: bold;
  font-size: 1.6rem;
}
.my-banner-fade-in {
  animation: fade-in-bottom 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
.my-banner-fade-delay-1 {
  animation-delay: 0.3s;
}
.my-banner-fade-delay-2 {
  animation-delay: 0.5s;
}
.my-banner-fade-delay-3 {
  animation-delay: 0.8s;
}
.modal-banner-body-wrap {
  overflow-x: hidden;
  overflow-y: auto;
}
/**/
.modal-banner-slide {
  margin-bottom: 20px;
}
/*23.10.13 아이템 여백 수정*/
.modal-banner-slide-item {
  width: 60px;
  height: 84px;
  margin-right: 12px;
}
.new-modal-my-banner-image {
  width: 60px;
  height: 84px;
}

.modal-banner-slide-list {
  transition-timing-function: linear;
}
/* ====================== //230519 혜택 모아 모달창 css (한동희) =====================*/
/* ====================== 230530 전자동의서 제출 (한동희) =====================*/
.ui-select-terms-item .btn_modal {
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  width: 11px;
  height: 17px;
  margin-left: auto;
  background: url(/images/icon/ico_modal_open.png) no-repeat 0 3.5px;
  background-size: 10px 10px;
  text-indent: -99999px;
}
.ui-select-terms-item .btn_modal02 {
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin-left: 5px;
  background: url(/images/icon/ico_glass.png) no-repeat center 5px;
  background-size: 12px 12px;
  text-indent: -99999px;
}
.layer-info-text .notice-text {
  color: #828282;
  font-size: 1.3rem;
}
.layer-info-list {
  position: relative;
}
.layer-info-list > li {
  position: relative;
  margin-top: 5px;
  padding-left: 8px;
}
.layer-info-list > li::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 2px;
  height: 2px;
  background-color: #999;
}
/* ====================== //230530 전자동의서 제출 (한동희) =====================*/
/* ====================== 230605 랜덤박스 팝업 (한동희) =====================*/
.slide-banner-text-box {
  box-sizing: border-box;
  padding: 25px;
}

.slide-banner-text-box p {
  position: relative;
  padding-left: 10px;
  font-size: 1.2rem;
}
.slide-banner-text-box p:first-child {
  margin-bottom: 5px;
}
.slide-banner-text-box p::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 4px;
  height: 4px;
  background-color: #000;
  transform: rotate(45deg);
}
/* ====================== //230605 랜덤박스 팝업 (한동희) =====================*/

/* 230706 VIP 리워드 제도 페이지 추가 */
.ui-square-box {
  padding: 2rem 1.5rem;
  border: 1px solid var(--gray-30);
}
/* //230706 VIP 리워드 제도 페이지 추가 */

/* 230901 견별 즉시결제 추가 및 수정 */
.page-contents.type-fixed-button {
  padding-top: 0;
  padding-bottom: 80px;
}
.top-button-link-wrap {
  padding: 20px 24px;
}
.top-button-link-wrap .top-button-link-item {
  display: inline-block;
  margin-right: 4px;
  padding: 0 14px;
  border: 1px solid #e6e9ef;
  border-radius: 15px;
  font-size: 1.4rem;
  line-height: 28px;
}
.top-button-link-wrap .top-button-link-item.item-on {
  border-color: var(--secondary);
  background-color: var(--secondary);
  color: #fff;
}
.form-item-new-usage {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#prpa_wrap #stepOne {
  height: auto;
}
#prpa_wrap #stepOne .form-bottom {
  position: sticky;
  bottom: 0;
  left: 0;
  z-index: 5;
  box-sizing: border-box;
  width: 100%;
  padding: 15px 0;
  background-color: #fff;
}
/*.payment-seach-button {
position: sticky;
left: 0;
bottom: 0;
width: 100%;
z-index: 11;
padding: 15px 24px;
box-sizing: border-box;
background-color: #fff;

}*/
.rounded-gray-box {
  box-sizing: border-box;
  padding: 14px;
  border-radius: 10px;
  background: var(--gray-20);
  text-align: center;
}
/* //230901 견별 즉시결제 추가 및 수정 */

/* 231006 vip 메인 개선 수정 */
.vip-main .welcome-card {
  margin-bottom: 10px;
}
.vip-main .welcome-nav {
  margin: 0 -24px;
  border-bottom: 1px solid rgb(215, 185, 144);
  border-radius: 0;
  background: none;
}
.vip-main .welcome-nav-link {
  color: rgb(143, 126, 88);
}
.vip-main .welcome-nav-link::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 34px;
  height: 34px;
  margin-right: 4px;
}
.vip-main .welcome-nav-item:nth-child(1) .welcome-nav-link::before {
  background: url("/images/vip/images/common/ico_vip_menu01.png") no-repeat 50% / 34px auto;
}
.vip-main .welcome-nav-item:nth-child(2) .welcome-nav-link::before {
  background: url("/images/vip/images/common/ico_vip_menu02.png") no-repeat 50% / 34px auto;
}
.vip-main .welcome-nav-item:nth-child(3) .welcome-nav-link::before {
  background: url("/images/vip/images/common/ico_vip_menu03.png") no-repeat 50% / 34px auto;
}
.vip-main .welcome-nav-item + .welcome-nav-item::before {
  display: none;
}
.vip-main .welcome-card-text .vip-badge {
  position: relative;
  display: inline-block;
  vertical-align: sub;
  height: 22px;
}
.vip-main .welcome-card-text .vip-badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.vip-main .welcome-card-text .vip-badge.type-vvip {
  width: 41px;
}
.vip-main .welcome-card-text .vip-badge.type-vvip::before {
  background: url("/images/vip/images/common/tag2_VVIP.png") no-repeat 50% / auto 22px;
}
.vip-main .welcome-card-text .vip-badge.type-first {
  width: 47px;
}
.vip-main .welcome-card-text .vip-badge.type-first::before {
  background: url("/images/vip/images/common/tag2_VVIP-1.png") no-repeat 50% / auto 22px;
}
.vip-main .welcome-card-text .vip-badge.type-royal {
  width: 32px;
}
.vip-main .welcome-card-text .vip-badge.type-royal::before {
  background: url("/images/vip/images/common/tag2_VVIP-2.png") no-repeat 50% / auto 22px;
}
.vip-main .welcome-card-text .vip-badge.type-classic {
  width: 47px;
}
.vip-main .welcome-card-text .vip-badge.type-classic::before {
  background: url("/images/vip/images/common/tag2_VVIP-3.png") no-repeat 50% / auto 22px;
}
.vip-card-wrap {
  margin: 40px -24px 30px;
}
.vip-card-wrap > p {
  padding: 0 24px;
  font-size: 1.6rem;
}
.vip-card-wrap > p .user-name {
  color: var(--vip);
}
.vip-card-slide {
  position: relative;
  overflow-y: hidden;
  box-sizing: border-box;
  height: 155px;
  margin-top: 15px;
  padding-bottom: 30px;
}
.vip-card-slide .vip-card-item {
  box-sizing: border-box;
  width: 135px;
  padding-top: 2px;
  padding-right: 10px;
  visibility: hidden;
}
.vip-card-slide .swiper .vip-card-item {
  visibility: visible;
}
.vip-card-slide .vip-card-item .img {
  position: relative;
}
.vip-card-slide .vip-card-item .img.recommand::before {
  content: "추천";
  position: absolute;
  top: 0;
  left: 1px;
  display: block;
  width: 33px;
  height: 29px;
  background: url("/images/vip/images/common/ico_mc_vip_rec.png") no-repeat 0 0 / 33px auto;
  color: transparent;
  line-height: 0;
  text-align: center;
}
.vip-card-slide .vip-card-item img {
  display: block;
  width: 125px;
}
.vip-card-slide .vip-card-item .txt .sub-txt {
  overflow: hidden;
  height: 1.7rem;
  margin: 5px 0;
  color: var(--gray-70);
  font-size: 1.2rem;
  line-height: 1.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vip-card-slide .vip-card-item .txt .card-name {
  overflow: hidden;
  height: 1.8rem;
  line-height: 1.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vip-card-controller {
  width: 100%;
}
.vip-card-controller .swiper-button-toggle-play {
  position: absolute;
  right: 24px;
  bottom: 0;
  z-index: 15;
  display: block;
  width: 24px;
  height: 18px;
  border-radius: 6px;
  background-color: #dddddd;
  background-position: center;
  background-repeat: no-repeat;
}
.vip-card-controller .swiper-button-toggle-play.is-play {
  background-image: url("/images/icon/ic-play.svg");
  background-size: 12px auto;
}
.vip-card-controller .swiper-button-toggle-play.is-pause {
  background-image: url("/images/icon/ic-pause.svg");
  background-size: 12px auto;
}
.vip-card-controller .swiper-button-toggle-play span {
  height: 0;
  font-size: 1px;
  visibility: hidden;
}
.vip-card-controller .swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 6px;
}
.counting-nav-list {
  margin: 0;
}
/* // 231006 vip 메인 개선 수정 */

/*====  231214 대출,카드대금결제 및 기타화면 수정 (한동희) ====*/

.menu-banner-area.type-card-loan .menu-banner-item.type-full-width {
  width: 100%;
}
.menu-banner-area.type-card-loan .menu-banner-item.type-full-width .menu-banner-icon {
  margin-right: 20px;
}
.menu-banner-area.type-card-loan .menu-banner-item .card-loan-item-info-text {
  margin-top: 3px;
  color: #666;
  font-size: 14px;
  line-height: 22px;
  word-break: break-all;
}
.menu-banner-area.type-card-loan .menu-banner-link {
  font-size: 1.4rem;
  word-break: keep-all;
}
.loan-calc-fixed-btn {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  padding: 15px 24px;
  border-top: 1px solid var(--gray-20);
  background-color: #fff;
}
/*====  //231214 대출,카드대금결제 및 기타화면 수정 (한동희) ====*/

/* 2023.12.13 이용대금명세서내 등급 및 라운지 이동 버튼 추가 */
.btn-vip-link {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  width: 100%;
  height: 5rem;
  padding: 0 1.6rem 0 2rem;
  border: 1px solid rgb(229, 229, 229);
  border-radius: 0.4rem;
  text-align: left;
}
.btn-vip-link i {
  display: block;
  flex: 0 0 auto;
}
.btn-vip-link span {
  display: block;
  flex: 1 1 auto;
  font-size: 1.3rem;
}
.btn-vip-link .icon-vip {
  width: 2.4rem;
  height: 2.4rem;
}
.btn-vip-link .icon-vip::after {
  content: "";
  display: block;
  vertical-align: middle;
  -ms-flex: none;
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  background: url(../images/icon/ic_vip.gif) no-repeat center / contain;
  -webkit-box-flex: 0;
}
.btn-vip-link .icon-arrow {
  width: 1.8rem;
  height: 1.8rem;
}
.btn-vip-link .icon-arrow::after {
  content: "";
  display: block;
  vertical-align: middle;
  -ms-flex: none;
  flex: none;
  width: 1.8rem;
  height: 1.8rem;
  background: url(../images/common/ic-button-arrow.png) no-repeat right center / auto 10px;
  -webkit-box-flex: 0;
}
/* //2023.12.13 이용대금명세서내 등급 및 라운지 이동 버튼 추가 */

/* 
231218_쿠폰페이지 개선 (이화정)
[2024.05.13] VIP 쿠폰함 수정 : FREEST
*/
.type-coupon .menu-coupon {
  margin-bottom: 0;
}
.type-coupon .menu-coupon .ui-tab-item {
  padding-top: 14px;
}
.type-coupon .menu-coupon .ui-tab-item .ui-tab-link.hana-pick img {
  position: absolute;
  top: -12px;
}
.type-coupon .menu-coupon .ui-tab-item .ui-tab-link.my-coupon img {
  vertical-align: middle;
  margin-bottom: 3px;
  opacity: 0.5;
}
.type-coupon .menu-coupon .ui-tab-item .ui-tab-link.my-coupon.is-active img {
  opacity: 1;
}
.type-coupon .menu-coupon.vip-coupon .ui-tab-list {
  justify-content: space-between;
}
.logo-image.type-vip-thumb .logo-image-inner::before {
  background-color: transparent;
  background-position: left top;
}
/* //231218_쿠폰페이지 개선 (이화정) */

/* 24.01.22 내차 보험료 조회 페이지 개선(한동희) */
.insurance-my-car-wrap .page-contents-bottom {
  padding: 0 24px 33px;
  background-color: #f4f6f8;
}
.insurance-my-car-wrap .page-contents-bottom .section-insurance-my-car {
  padding-top: 24px;
}
.insurance-my-car-wrap .page-contents-bottom .section-insurance-my-car li.insurance-my-car-item {
  margin-bottom: 15px;
  padding: 20px 15px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 3px 5px 0 rgba(217, 223, 235, 0.3);
}
.insurance-my-car-wrap .page-contents-bottom .section-insurance-my-car li.insurance-my-car-item a {
  box-sizing: border-box;
  width: 100%;
  background: url(../images/icon/btn-more-l.svg) no-repeat;
  background-position: 100% 50%;
}
.insurance-my-car-wrap .page-contents-bottom .section-insurance-my-car li.insurance-my-car-item a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
.insurance-my-car-wrap .my-car-insurance-logo {
  width: 40px;
}
.insurance-my-car-wrap .insurance-my-car-info {
  margin-left: 15px;
  font-weight: bold;
  font-size: 15px;
}
.insurance-my-car-wrap .insurance-my-car-header-title {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-30);
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
}
/* //24.01.22 내차 보험료 조회 페이지 개선(한동희) */
/* 
24.01.24 쿠폰함 수정(한동희) 
[2024.05.13] VIP 쿠폰함 수정 : FREEST
*/
.type-coupon .menu-coupon {
  position: relative;
}
.type-coupon .menu-coupon .ui-tab-list {
  /* padding-right: 120px; */
}
.type-coupon .menu-coupon:has(.btn-my-coupon-box) .ui-tab-list {
  padding-right: 120px;
}
.type-coupon .menu-coupon .ui-tab-item {
  margin-left: 20px;
}
.type-coupon .menu-coupon .ui-tab-item:first-child {
  margin-left: 0;
}
.type-coupon .menu-coupon .btn-my-coupon-box {
  position: absolute;
  right: 0;
  bottom: 0;
  padding-right: 24px;
  background-color: #fff;
  box-shadow: 0 -1px 0 var(--gray-30) inset;
}
.type-coupon .menu-coupon .btn-my-coupon img {
  vertical-align: middle;
  margin-bottom: 5px;
}
.type-coupon .menu-coupon .btn-my-coupon-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: -30px;
  z-index: 10;
  display: block;
  width: 30px;
  height: calc(100% - 1px);
  background: -moz-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 5%,
    rgba(255, 255, 255, 1) 95%,
    rgba(255, 255, 255, 1) 100%
  );
  background: -webkit-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 5%,
    rgba(255, 255, 255, 1) 95%,
    rgba(255, 255, 255, 1) 100%
  );
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 5%,
    rgba(255, 255, 255, 1) 95%,
    rgba(255, 255, 255, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
}
.type-coupon .menu-coupon .btn-my-coupon-box .ui-tab-link.my-coupon {
  padding-bottom: 13px;
}
/* [2025-01-21 추가 : HDH] */
.type-coupon .menu-coupon .btn-my-coupon-box .ui-tab-link.my-coupon img {
  width: 74px;
  height: 32px;
}
/* //24.01.24 쿠폰함 수정(한동희) */

/* 2024-02-20 인터섹션 오브젝트 공통 스타일 */
.intersection-obj,
[data-intersection] {
}
.intersection-obj .intersection-inner,
[data-intersection] .intersection-inner {
  opacity: 0;
  transform: translate(0, 100px);
}
.intersection-obj[data-direction="top"] .intersection-inner,
[data-intersection][data-direction="top"] .intersection-inner {
  opacity: 0;
  transform: translate(0, -100px);
}
.intersection-obj[data-direction="right"] .intersection-inner,
[data-intersection][data-direction="right"] .intersection-inner {
  opacity: 0;
  transform: translate(100px, 0);
}
.intersection-obj[data-direction="bottom"] .intersection-inner,
[data-intersection][data-direction="bottom"] .intersection-inner {
  opacity: 0;
  transform: translate(0, 100px);
}
.intersection-obj[data-direction="left"] .intersection-inner,
[data-intersection][data-direction="left"] .intersection-inner {
  opacity: 0;
  transform: translate(-100px, 0);
}
.intersection-obj.is-visible .intersection-inner,
[data-intersection].is-visible .intersection-inner {
  opacity: 1;
  transition: 0.2s;
  transition-delay: 0.25s;
  transform: translate(0, 0);
}

/* 240223 - 해지방어 페이지 추가 (lyr) */
/* rd-box : round-box의 약자 --> 메뉴, 배너 등 border-radius 6px이면 모두 겸용 사용 가능 */
.rd-box-wrap .rd-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  padding: 2rem 1.6rem 1.9rem;
  border-radius: 0.6rem;
  background-color: var(--gray-20);
  color: var(--basic);
  font-size: 1.5rem;
  -webkit-box-pack: center;
  -moz-flex-pack: center;
  -ms-flex-pack: center;
}
.rd-box-wrap button.rd-box {
  width: 100%;
}
.rd-box-wrap a.rd-box {
  width: calc(100% - 3.2rem);
}
.rd-box-wrap .rd-box--starbucks .rd-box-text {
  font-weight: inherit;
}
.rd-box-wrap .rd-box--starbucks .rd-box-text strong {
  font-weight: bold;
}
.rd-box-wrap .rd-box--vip {
  background-color: #f5eada;
}
.rd-box-wrap .rd-box--yellow {
  background-color: #fff9e3;
}
.rd-box-wrap .rd-box--skyblue {
  background-color: #e3f2ff;
}
.rd-box-wrap .rd-box--green {
  background-color: #e2f4e7;
}
/* [2024-05-31 : lyr] 배경색 추가 */
.rd-box-wrap .rd-box--gray {
  background-color: #f8f8f8;
}
.rd-box-wrap .rd-box-text {
  color: var(--basic);
  font-weight: 500;
  font-size: 1.5rem;
  text-align: left;
}
/* [2024-05-31 : lyr] 단독일 때 flex 1 */
.rd-box-wrap .rd-box-text:only-child {
  flex: 1 1 auto;
}
.rd-box-wrap .rd-box-text .rd-box-text__title,
.rd-box-wrap .rd-box-text h1 {
  font-weight: bold;
  font-size: 1.6rem;
  line-height: 2.4rem;
}
.rd-box-wrap .rd-box-text .rd-box-text__desc,
.rd-box-wrap .rd-box-text h5 {
  margin-top: 0.5rem;
  color: #555;
  font-weight: bold;
  font-size: 1.2rem;
}
.rd-box-wrap.rd-box-wrap--type1 {
  position: relative;
  width: 100%;
}
.rd-box-wrap.rd-box-wrap--type1 .rd-box {
  box-sizing: border-box;
  height: 13rem;
}
.rd-box-wrap.rd-box-wrap--type1 .rd-box-icon {
  position: absolute;
  right: 1.6rem;
  bottom: 1.6rem;
}
.rd-box-wrap.rd-box-wrap--type1 .rd-box-icon img {
  width: 100%;
}
.rd-box-wrap.rd-box-wrap--type1 .rd-box-icon.size-w-64 {
  width: 6.4rem;
}
.rd-box-wrap.rd-box-wrap--type1 .rd-box-icon.size-w-68 {
  width: 6.8rem;
}
.rd-box-wrap.rd-box-wrap--type1 .rd-box-icon.size-w-72 {
  width: 7.2rem;
}

/* [2025-04-08 kho] [WPM-10722] 추가 */
.rd-box-wrap.rd-box-wrap--type1 .rd-box-icon.size-w-80 {
  width: 8rem;
}
.rd-box-wrap.rd-box-wrap--type1 .rd-box-text__title2 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  word-break: keep-all;
  color: #111;
}
.rd-box-wrap.rd-box-wrap--type1 .rd-box-text__desc2 {
  margin-bottom: 0.2rem;
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 400;
  word-break: keep-all;
  color: #111;
}
/* //[2025-04-08 kho] [WPM-10722] 추가 */

/* [2024-05-31 : lyr] 타입 추가 */
.rd-box-wrap.rd-box-wrap--type2 .rd-box {
  gap: 0.8rem;
  padding: 2rem;
}
.rd-box-wrap.rd-box-wrap--type2 .rd-box-text__title {
  font-size: 1.6rem;
  line-height: 1.3;
  font-weight: 400;
  word-break: keep-all;
  color: var(--basic);
}
.rd-box-wrap.rd-box-wrap--type2 .rd-box-text__desc {
  margin-top: 0.4rem;
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: 400;
  word-break: keep-all;
  color: #888;
}
.rd-box-wrap.rd-box-wrap--type2 .rd-box-icon img {
  width: 56px;
}

/* [2025-11-19 KEJ] 추가 */
.rd-box-wrap.rd-box-wrap--type3 .rd-box {
  padding: 0.5rem 0.6rem 0.4rem 1.6rem;
}
.rd-box-wrap.rd-box-wrap--type3 .rd-box-text {
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 400;
}
.rd-box-wrap.rd-box-wrap--type3 .rd-box-icon img {
  width: 51px;
}
/* //[2025-11-19 KEJ] 추가 */

.rd-box-wrap.rd-box-wrap--type3 .rd-box-text__desc { /* [2025-05-09 kho] [WPM-11125] 추가 */
  margin-top: 10px;
  font-size: 1.3rem;
  line-height: 18px;
  font-weight: 400;
  word-break: keep-all;
  color: #111;
}
/* rd-box 단독 사용 */
.rd-box--border-gray {
  border-radius: 0.6rem;
  border: 1px solid var(--gray-30);
}
/* [24.08.08 : lyr] 결제계좌, 첫 번째 출금일 라운드 박스 적용 (MY_pay_p062.html) */
.rd-box--border-gray.form-detail-list {
  padding: 1.2rem;
}
.rd-box--border-gray.form-detail-list .form-detail-item:first-child {
  margin-top: 0;
}
.rd-box--border-gray.form-detail-list .form-detail-group {
  word-break: keep-all;
}
/* 24.03.06 유료기간만료예정카드 추천카드 영역 */
.recommand-card-box {
  margin: 30px 0;
  text-align: center;
}
.recommand-card-box .card-image {
  width: 40%;
  max-width: 200px;
  margin: 0 auto;
}
.recommand-card-box .recommand-card-name {
  margin-top: 15px;
  font-weight: 500;
  font-size: 1.8rem;
}
/* //24.03.06 유료기간만료예정카드 추천카드 영역 */

/* 24.03.11 이용한도 조회 변경 */
.page-card-limit .check-card-usage-item {
  margin-bottom: 55px;
}
/* .page-card-limit .check-card-usage-item:last-child {
margin-bottom: 30px;
} */
.page-card-limit .check-card-usage-item .check-card-usage-item-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 2rem;
}
.page-card-limit .check-card-usage-item .notice-list {
  margin-top: 35px;
}
.page-card-limit .check-card-usage-item .check-card-usage-item-title p:first-child {
  font-weight: 400;
}
.page-card-limit .form-item.type-item-link .card-image {
  margin-top: 0;
}
/* //24.03.11 이용한도 조회 변경 */

/* 24.03.12 금융 한눈에 보기 */
.contents-wrap.type-new-lview .page-contents {
  padding-right: 24px;
  padding-left: 24px;
}
.contents-wrap.type-new-lview .section-header {
  margin-bottom: 20px;
}
.contents-wrap.type-new-lview .section-header .section-title {
  margin: 0;
  font-weight: 2.4rem;
  font-weight: 700;
}
.contents-wrap.type-new-lview .section-header .section-title-icon {
  width: 35px;
}
.contents-wrap.type-new-lview .section-header .section-title-icon img {
  width: 100%;
}
.contents-wrap.type-new-lview .section-header .btn-call {
  color: #111;
}

/* 24.03.22 다이렉트보험 자동차보험 리스트 레이아웃 수정 */
.card-block .card-name.basic-text.with-hanamoney-icon {
  position: relative;
  margin-bottom: 0;
  padding-left: 2.4rem;
  /* font-size: 1.8rem; */
  font-weight: 400;
  line-height: 2rem;
}
.card-block .card-name.basic-text.with-hanamoney-icon::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  background: url(/images/contents/life/hanamoney_logo.png);
  background-size: cover;
}

/* 24.03.26 금융한눈에보기, 자동차금융 슬라이더 기능 추가 */
.text-slide.type-new-car-insur {
  position: relative;
}
.text-slide.type-new-car-insur .text-slide-controller {
  position: absolute;
  bottom: -18px;
  left: 32%;
}

/* 24.04.05 둥근 버튼 */
.small-round-gray-button {
  margin-left: 10px;
  padding: 0 10px;
  border-radius: 13px;
  background: #f5f5f5;
  color: #111111;
  font-size: 13px;
  line-height: 26px;
}

/* 24.04.16 건별 즉시결제 플로팅 버튼 추가 */
.usage-total-wrap .btn-immediate-pay {
  display: none;
}
.usage-total-wrap.is-active .btn-immediate-pay {
  display: block;
  padding: 0 20px 20px;
}

/* 24.04.17 알림함 페이지 텍스트 배너 추가 */
.page-notice-text-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding: 6px 15px;
  border-radius: 18px;
  background-color: #d8f3f2;
  color: #111;
  font-size: 1.2rem;
}
.page-notice-text-banner div {
  position: relative;
  width: 100%;
}
.page-notice-text-banner div::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: url(/images/icon/btn_arrow_right.png) no-repeat;
  background-size: 100% 100%;
}
.page-notice-text-banner span {
  display: flex;
  align-items: center;
}
.page-notice-text-banner span i {
  display: inline-block;
  width: 20px;
  margin-right: 5px;
}
.page-notice-text-banner span i img {
  width: 100%;
}

/* 240417 - 해지방어 쿠폰 추가 (lyr) */
/* td-coupon : termination defense coupon 약자 */
.td-coupon {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  padding: 2px;
  border-radius: 15px;
  /* background: linear-gradient(60deg, #07cabf, #8f6cff); */
  background: linear-gradient(to right, #00a49b 0%, #8f6cff 100%);
  background-size: 300% 300%;
  animation: anitxt 1s linear alternate infinite;
}
.td-coupon img {
  width: 100%;
  border-radius: 13px;
}

/* [2024-05-08 상단 해더 챗봇 아이콘 추가 : HDH] */
.header-button.type-chatbot {
  box-sizing: border-box;
  width: 30px; /* 24.05.16 40 > 30px 로 수정 */
  height: 30px; /* 24.05.16 40 > 30px 로 수정 */
  border: 1px solid #00a49d;
  border-radius: 50%;
  background-image: url(/images/chat/chat_img/new_default_130x130.gif);
  background-size: cover;
  background-image: image-set(
    url("/images/chat/chat_img/new_default_130x130.webp") type("image/webp"),
    url("/images/chat/chat_img/new_default_130x130.png") type("image/png")
  );
  animation: chatbotIconAni 0.55s linear 10s forwards;
}

@keyframes chatbotIconAni {
  0% {
    background-image: url(/images/chat/chat_img/new_default_130x130.gif);
    background-image: image-set(
      url("/images/chat/chat_img/new_default_130x130.webp") type("image/webp"),
      url("/images/chat/chat_img/new_default_130x130.png") type("image/png")
    );
  }
  100% {
    background-image: url(/images/chat/chat_img/chat_txt_consult_01.gif);
  }
}

/* [2024-05-10 : hj] 금융 > 제휴사 대출 > 주택담보대출 */
.housing-loan-wrap {
  background-color: var(--gray-20);
}
.housing-loan-wrap .box-round-white {
  margin-bottom: 40px;
  padding: 32px 20px;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.03);
}
.housing-loan-wrap .box-round-white:last-child {
  margin-bottom: 0;
}
/* [2024-08-27 : shj] [WPM-8223] /images/contents/img_home_loan.png 이미지와 함께 배포되어야 함 */
.housing-loan-wrap .box-round-white > img {
  display: block;
  /* width: 180px; */
  max-width: 300px;
  width: 100%;
  margin: 0 auto;
}
.housing-loan-wrap .title {
  margin-bottom: 32px;
  font-weight: bold;
  font-size: 2.1rem;
  text-align: center;
}
.housing-loan-wrap .box-loan-benefit {
  margin: 12px 0 6px;
  padding: 16px 20px;
  border-radius: 10px;
  background-color: var(--gray-20);
}
.housing-loan-wrap .box-loan-benefit li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 24px;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 2rem;
}
.housing-loan-wrap .box-loan-benefit li:last-child {
  margin-bottom: 0;
}
.housing-loan-wrap .box-loan-benefit li .icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
}
.housing-loan-wrap .box-loan-benefit li .icon.ic-clock {
  background: url(/images/icon/ic-clock.png) no-repeat 0 0 / cover;
}
.housing-loan-wrap .box-loan-benefit li .icon.ic-grade {
  background: url(/images/icon/ic-grade.png) no-repeat 0 0 / cover;
}
.housing-loan-wrap .box-loan-benefit li .icon.ic-money {
  background: url(/images/icon/ic-money.png) no-repeat 0 0 / cover;
}

/* [2024-05-17 : lyr] 아이콘 메뉴 2단 타입 (1개만 있으면 1단으로 변경 가능) */
.menu-link-list.type-icon-menu {
  display: flex;
  gap: 1.2rem;
  justify-content: space-between;
  align-items: center;
}
.menu-link-list.type-icon-menu .menu-link-item {
  width: 100%;
}
.menu-link-list.type-icon-menu .menu-link-item .menu-link-button {
  padding-top: 7px;
  padding-bottom: 7px;
}
.menu-link-list.type-icon-menu .menu-link-item .icon {
  width: 3.6rem;
  height: 3.6rem;
  margin-right: 0.8rem;
}
.menu-link-list.type-icon-menu .menu-link-item:not(:first-child) {
  margin-top: 0;
}
.margin-bottom-12 {
  margin-bottom: 12px;
}
/* [2024-05-17 : lyr] gif 배경 이미지가 변경 된 타입 추가 (외화 무료 송금) */
.payment-banner-item .card-item.payment-banner .card-info2 .card-link:after {
  top: 2px;
  right: -2px;
  width: 12px;
  height: 12px;
}
.payment-banner-item .card-item.payment-banner .card-block.bg-gif2 {
  background-image: url(../images/icon/bank_ci_flag.gif);
  background-position-x: calc(100% - 6px);
  background-size: 45px auto;
}
.payment-banner-item .card-item.payment-banner .card-block.bg-gif2 .card-link {
  color: #248bd9;
}
.payment-banner-item .card-item.payment-banner .card-block.bg-gif2 .card-link:after {
  background-image: url(../images/icon/ic-arrow-blue2.svg);
}
/* [2024-05-17 : lyr] 국기 가로로 롤링되도록 애니메이션 추가 */
.payment-bg-wrap .logo-image.flag-move {
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 4rem;
  height: 4rem;
}
.payment-bg-wrap .logo-image.flag-move img {
  animation: flag-move 6s linear infinite;
}
@keyframes flag-move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
/* [2024-05-17 : lyr] 국기 사이즈 수정용 클래스 추가 */
.payment-bg-wrap .logo-image.flag-size-1 img {
  height: 36px;
}

/* [2024-05-22 이용대금 명세서 수정 : HDH] */
.welcome-nav.type-flex-center .welcome-nav-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
.welcome-nav.type-flex-center .welcome-nav-item .basic-text.smaller-font-size {
  font-size: 1.3rem;
}
/* [2024-05-22 TIP 줄바뀜 keep-all 적용 : HDH] */
.ui-tip {
  word-break: keep-all;
}
/* [2024-05-27 포인트 조회 타이틀 여백 수정 : HDH] */
.detail-header.type-resize .detail-title {
  margin-bottom: 25px;
  font-size: 1.8rem;
}

/* [24.07.17 : lyr] 웹접근성 수정 : 이용대금명세서 > 총 금액 초점 잡히지 않는 문제 수정 */
.total-amount .usage-default-slot .for-a11y {
  width: auto;
  height: 3.5rem;
  font-size: 2.8rem;
}

/* [2024-07-29 : shj] 결제예정금액 > 최대 이용금액 */
.total-amount-val.large-text {
  font-size: 2.4rem;
  line-height: 3.3rem;
}
/* [2024-07-29 : shj] 카드이용내역 말풍선 */
.flex-direction-reverse {
  flex-direction: row-reverse;
}

/* [2024-08-08 : shj] 별별뉴스 상단 구독하기 버튼 */
.coupon-detail-button.type-subscribe {
  padding: 0 8px 0 25px;
  width: auto;
  font-size: 1.2rem;
  font-weight: 500;
  background-size: 15px 15px;
  background-position: 7px center;
  background-image: url("../images/icon/btn-heart.svg");
}
.coupon-detail-button.type-subscribe.is-active {
  background-color: #ffffff;
  background-image: url("../images/contents/magazine/ic_btm_btns01.png");
}

/* [2024-08-29 : shj] toggle 스타일 탭 형식 */
.ui-tab.type-toggle .ui-tab-list {
  padding: 3px;
  background-color: #f2f4f6;
  border-radius: 24px;
  box-shadow: none;
}
.ui-tab.type-toggle .ui-tab-list .ui-tab-item {
  flex: 1;
  -webkit-box-flex: 1;
  -ms-flex: 1;
}
.ui-tab.type-toggle .ui-tab-list .ui-tab-item + .ui-tab-item {
  margin-left: 4px;
}
.ui-tab.type-toggle .ui-tab-list .ui-tab-item .ui-tab-link {
  width: 100%;
  height: 40px;
  padding: 0;
  color: var(--gray-70);
  border-radius: 20px;
  font-size: 1.3rem;
  line-height: 17px;
}
.ui-tab.type-toggle .ui-tab-list .ui-tab-item .ui-tab-link.is-active {
  background-color: #fff;
  color: var(--basic);
  font-weight: 500;
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05);
}
.ui-tab.type-toggle .ui-tab-list .ui-tab-item .ui-tab-link.is-active::after {
  background: none;
}

/* [2024-10-07] [WPM-8376] [기타] '통합검색 최근검색어 노출'_'김호영' 사전협의-2024-08-29 */
.section-sub-menu {
  margin-top: 16px;
  margin-bottom: 35px;
}
.section-sub-menu .menu-title {
  margin-bottom: 0;
  border: 0;
}

.keywords.type-btn-del ul li.keywords-item .keywords-contents {
  position: relative;
}
.keywords.type-btn-del .keywords-tag {
  padding-right: 28px;
  border: 1px solid var(--gray-10);
  background-color: var(--gray-10);
}
.keywords.type-btn-del .keywords-tag .keywords-text {
  word-break: break-word;
}
.keywords.type-btn-del .btn-del-keyword {
  position: absolute;
  top: 50%;
  right: 0;
  padding-right: 6px;
  width: 28px;
  height: 100%;
  border-radius: 0 50% 50% 0;
  transform: translateY(-50%);
}
.keywords.type-btn-del .btn-del-keyword img {
  width: 14px;
  height: auto;
}

/* [2024-10-10 금융 한눈에 보기 수정 : HDH] */
.contents-wrap.type-new-lview .section-loan-compare .form-detail:last-child {
  margin-bottom: 0;
}
.contents-wrap.type-new-lview .section-loan-compare .form-detail a {
  padding: 30px 0;
}
.contents-wrap.type-new-lview .section-loan-compare .summary-group.type-loan-compare .summary-item-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  padding: 0 20px;
  text-align: center;
}
.contents-wrap.type-new-lview
  .section-loan-compare
  .summary-group.type-loan-compare
  .summary-item-wrap
  .logo-loan-compare {
  width: 36px;
  margin-right: 12px;
}
.contents-wrap.type-new-lview .section-loan-compare .summary-group.type-loan-compare .summary-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contents-wrap.type-new-lview
  .section-loan-compare
  .summary-group.type-loan-compare
  .summary-item-wrap
  + .summary-item-wrap::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  display: block;
  border-left: 1px solid var(--gray-30);
}
/* [2024-10-23 여백수정 : HDH] */
.contents-wrap.type-new-lview .section-affiliate-loan .form-detail {
  padding: 24px 10px;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 16px;
}
/* [2024-10-23 여백수정 : HDH] */
.contents-wrap.type-new-lview .section-affiliate-loan .form-detail .summary-item-unit.type-wave {
  margin: 0 3px;
}
.contents-wrap.type-new-lview .section-affiliate-loan .form-detail .title {
  position: relative;
  margin-top: 6px;
  font-size: 1.9rem;
}
.contents-wrap.type-new-lview .section-affiliate-loan .form-detail .title::after {
  content: "";
  display: inline-block;
  clear: both;
  width: 12px;
  height: 12px;
  margin-left: 3px;
  background-image: url("../images/icon/ic-right.svg");
  background-position: 0 50%;
}
.contents-wrap.type-new-lview .section-affiliate-loan .form-detail:last-child {
  margin-bottom: 0;
}
.contents-wrap.type-new-lview .section-affiliate-loan .form-detail .form-detail-head {
  margin: 0 0 16px;
}
.contents-wrap.type-new-lview .section-affiliate-loan .form-detail .form-detail-head a {
  display: block;
  width: 100%;
  text-align: center;
}
.contents-wrap.type-new-lview .section-affiliate-loan .form-detail .form-detail-head h3 .ui-arrow-block {
  display: inline;
  padding-right: 12px;
}
.contents-wrap.type-new-lview .section-affiliate-loan .form-detail .bottom-info {
  margin-top: 12px;
  word-break: break-all;
}
.page-contents.card-type.section-car .card-area:last-child {
  margin-bottom: 0;
}
/* [2024-10-11 카드상세 (카드 신청 동시 발급 영역 추가) : HDH] */
.type-card-detail-slide.new-type .card-multi-apply .multi-apply-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
  letter-spacing: -0.5px;
}
.type-card-detail-slide.new-type .card-multi-apply .multi-apply-text {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.75px;
}
.type-card-detail-slide.new-type .card-multi-apply .multi-apply-card-area {
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
  margin: 56px 0 36px;
}
.type-card-detail-slide.new-type .card-multi-apply .multi-apply-card-area .multi-apply-card-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 120px;
  text-align: center;
}
.type-card-detail-slide.new-type .card-multi-apply .multi-apply-card-area .multi-apply-card-item .card-image {
  position: relative;
  width: 120px;
  height: 78px;
}
.type-card-detail-slide.new-type
  .card-multi-apply
  .multi-apply-card-area
  .multi-apply-card-item
  .card-image.type-vertical {
  transform: rotate(90deg) scale(1);
}
.type-card-detail-slide.new-type
  .card-multi-apply
  .multi-apply-card-area
  .multi-apply-card-item
  .card-image
  .card-image-inner {
  width: 100%;
  height: 100%;
  transform: scale(1);
}
.type-card-detail-slide.new-type
  .card-multi-apply
  .multi-apply-card-area
  .multi-apply-card-item
  .multi-apply-card-item-title {
  margin-top: 30px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.375px;
}
.type-card-detail-slide.new-type
  .card-multi-apply
  .multi-apply-card-area
  .multi-apply-card-item
  .multi-apply-card-item-title.color-gray {
  color: #888;
}
.type-card-detail-slide.new-type .card-multi-apply .multi-apply-card-area .multi-apply-icon-plus {
  position: relative;
  width: 24px;
  height: 24px;
  margin-top: 30px;
}
.type-card-detail-slide.new-type .card-multi-apply .multi-apply-card-area .multi-apply-icon-plus img {
  width: 100%;
}
.type-card-detail-slide.new-type .multi-apply-list-area {
  margin: 0 -24px;
  padding: 24px;
  background-color: #f4f6f8;
}
.type-card-detail-slide.new-type .multi-apply-list {
  padding: 0 24px;
  background-color: #fff;
  border-radius: 8px;
}
.type-card-detail-slide.new-type .multi-apply-list .multi-apply-list-item {
  position: relative;
  padding: 24px 0;
  border-bottom: 1px solid #e5e5e5;
}
.type-card-detail-slide.new-type .multi-apply-list .multi-apply-list-item:last-child {
  border-bottom: none;
}
.type-card-detail-slide.new-type .multi-apply-list .multi-apply-list-item .card-image {
  position: absolute;
  left: 0;
  top: 24px;
  width: 58px;
  height: 36px;
}
.type-card-detail-slide.new-type .multi-apply-list .card-image.type-vertical {
  left: 34px;
  top: 24px;
  transform: rotate(90deg) scale(1);
  transform-origin: top left;
}
.type-card-detail-slide.new-type .multi-apply-list .card-image.type-vertical .card-image-inner {
  width: 100%;
  height: 100%;
  transform: scale(1);
}
.type-card-detail-slide.new-type .multi-apply-list .multi-apply-list-item .text-box {
  padding-left: 56px;
}
.type-card-detail-slide.new-type .multi-apply-list .multi-apply-list-item .text-box .card-item-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}
.type-card-detail-slide.new-type .multi-apply-list .multi-apply-list-item .text-box .card-item-text {
  font-size: 13px;
  color: #888;
  line-height: 18px;
}
.type-card-detail-slide.new-type .multi-apply-list .multi-apply-list-item .card-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 27px;
  margin-top: 10px;
  margin-left: 56px;
  font-size: 12px;
  color: #111;
  background-color: #f5f5f5;
  border-radius: 4px;
  box-sizing: border-box;
}
.type-card-detail-slide.new-type .multi-apply-bottom {
  padding: 15px 0;
}
/* [2024-10-11 card-apply.css 에서 가져옴] */
.type-card-detail-slide.new-type .multi-apply-bottom .ui-form-notice {
  position: relative;
  margin-top: 10px;
  padding-left: 28px;
  padding-top: 3px;
  font-size: 1.4rem;
  line-height: normal;
  color: var(--gray-70);
  font-weight: 400;
}
.type-card-detail-slide.new-type .multi-apply-bottom .ui-form-notice::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  background: url("/mkca20/images/icon/icon-notice.svg") no-repeat 50% 50% / 100% auto;
}
.type-card-detail-slide.new-type .multi-apply-bottom .ui-form-notice.font-weight-medium {
  font-weight: 500;
}
.type-card-detail-slide.new-type .multi-apply-bottom .ui-form-notice.type-primary {
  color: var(--primary);
}
.type-card-detail-slide.new-type .multi-apply-bottom .ui-form-notice.type-primary::before {
  background-image: url("/mkca20/images/icon/icon-notice-gr.svg");
}
.type-card-detail-slide.new-type .multi-apply-bottom .ui-form-notice.type-wrong {
  color: var(--wrong);
}
.type-card-detail-slide.new-type .multi-apply-bottom .ui-form-notice.type-wrong::before {
  background-image: url("/mkca20/images/icon/icon-notice-rd.svg");
}
.type-card-detail-slide.new-type .multi-apply-bottom .ui-form-notice.type-secondary {
  color: var(--secondary);
}
.type-card-detail-slide.new-type .multi-apply-bottom .ui-form-notice.type-secondary::before {
  background-image: url("/mkca20/images/icon/icon-notice-pp.svg");
}

.type-card-detail-slide.new-type .card-multi-apply .btn-unplug-card {
  position: absolute;
  top: -27px;
  right: 14px;
  display: block;
  width: 16px;
  height: 16px;
  z-index: 1;
}
.type-card-detail-slide.new-type .card-multi-apply .btn-unplug-card img {
  width: 100%;
  height: 100%;
}

/* [24.10.24 : lyr] [WPM-6649 : 운영 배포] [메일-요청] css 조정요청드립니다 (박선솔 주임님) */
/* 1. 즉시결제, 건별즉시결제 ==> 여백 - 금액과 화살표 사이 간격을 조금 더 좁혀주세요 */
.detail-history-opener {
  width: 24px;
}
.detail-history-opener:disabled {
  /* display: none; */
  visibility: hidden;
}
/* 2. 카드이용내역 상세 ==> ai맛집 말풍선 - 화살표와 뱃지 사이에 간격이 벌어져있습니다. */
.total-amount .data-food {
  display: flex;
  top: 0;
}
.total-amount .data-food::before {
  top: 12px;
  left: 6px;
}
/* data-food의 내용이 비었을 때 before가 보이지 않게 함 */
.total-amount .data-food:not(:has(a))::before,
.total-amount .data-food:empty::before {
  display: none;
}
.total-amount .data-food > a {
  display: flex;
  align-items: center;
  height: 30px;
  box-sizing: border-box;
}
.total-amount .data-food > a::before {
  top: -5px;
}
/* 2. 카드이용내역 상세 ==> 쇼핑 말풍선 - ai맛집 말풍선과 UI가 다릅니다. 통일해주세요. */
.total-amount .data-benefit {
  padding-left: 14px;
}
.total-amount .data-benefit::before {
  content: "";
  position: absolute;
  bottom: 11px;
  left: 6px;
  display: block;
  width: auto;
  height: auto;
  clear: both;
  border-top: 0 solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #cbf9ff;
  border-left: 7px solid transparent;
  border-radius: 5px;
  transform: rotate(-90deg);
}
.total-amount .data-benefit > a {
  height: 30px;
  margin-left: 0;
  box-sizing: border-box;
}
.total-amount .data-benefit a::before {
  display: none;
}
/* [24.10.28 : lyr] 추가요청 2 : 카드선택 > 체크박스 간격 조정 */
.ui-layer__body-inner .card-list .card-block .ui-radio-object,
.ui-layer__body-inner .card-list .card-block .ui-checkbox-object {
  margin-right: 8px;
}
/* [24.10.29 : lyr] 추가요청 3 : 체크박스 이미지와 오른쪽 라벨텍스트간의 align center 조정 */
.detail-history-list .detail-history-block {
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.detail-history-list .type-large .ui-checkbox-object {
  margin-top: 0;
  margin-right: 0;
}
.detail-history-list .detail-history-name {
  margin-bottom: 0;
}
.detail-history-list .detail-history-name.type-no-ellipsis {
  overflow: inherit;
}
/* [24.10.29 : lyr] 추가요청 3 : 카드선택 레이어팝업 내 여백 삭제 .ui-layer__body-inner .card-list-area, 아래 여백이 너무 딱 붙어보여서 1rem 추가 */
.ui-layer__body-inner .card-list-area {
  padding: 0 0 1rem;
}
/* [24.10.30 : lyr] 2024-10-30 13:36 [전달][답장*2] [요청] css 조정요청드립니다 */
.layer-terms {
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.5;
  color: #666;
}
/* // [24.10.24 : lyr] [메일-요청] css 조정요청드립니다 (박선솔 주임님) */

/* [2024-11-01: KJH] .link-gray 추가 */
.link-gray {
  color: var(--gray-70);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* // [2024-11-01: KJH] .link-gray 추가 */

/* [2024-11-08: KJH] 채무면제 유예상품 .type-debt 생성 */
.js-ui-tab-panel.type-debt .sorting-area {
  margin: 0;
}
.js-ui-tab-panel.type-debt .sorting-list {
  margin: 0;
  padding: 20px 16px 36px;
  display: flex;
  gap: 4px;
}
.js-ui-tab-panel.type-debt .sorting-item {
  padding: 0;
}
.js-ui-tab-panel.type-debt .sorting-item:last-of-type .ui-radio-block {
  margin-right: 16px;
}
.js-ui-tab-panel.type-debt div[data-tab^="sorting-tab"] {
  padding: 0 16px;
}
.js-ui-tab-panel.type-debt div[data-tab^="sorting-tab"] .tab-title {
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 2.1rem;
  letter-spacing: -0.425px;
  margin-bottom: 12px;
}
.js-ui-tab-panel.type-debt div[data-tab^="sorting-tab"] .tab-title-sm {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2rem;
  letter-spacing: -0.375px;
  margin-top: 40px;
  margin-bottom: 16px;
}
.js-ui-tab-panel.type-debt div[data-tab^="sorting-tab"] .tab-contents {
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: -0.375px;
  padding-bottom: 60px;
}
.js-ui-tab-panel.type-debt .tab-contents-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.js-ui-tab-panel.type-debt .tab-list-item {
  position: relative;
  padding-left: 7px;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2rem;
  letter-spacing: -0.375px;
  color: var(--basic);
}
.js-ui-tab-panel.type-debt .tab-contents-list.type-outside .tab-list-item::before {
  left: 0;
}
.js-ui-tab-panel.type-debt .tab-list-item::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 6px;
  width: 2px;
  height: 2px;
  background-color: var(--gray-70);
}
.js-ui-tab-panel.type-debt .tab-list-item + .infotab-list-item {
  margin-top: 10px;
}
.js-ui-tab-panel.type-debt .tab-list-item .tab-item-desc {
  margin-top: 8px;
  font-size: 1.3rem;
  line-height: 18px;
  letter-spacing: -0.325px;
  color: var(--gray-80);
}

.js-ui-tab-panel.type-debt .info-table {
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: -0.325px;
}
.js-ui-tab-panel.type-debt .info-table thead th {
  padding: 17px 10px;
  color: var(--gray-80);
}
.js-ui-tab-panel.type-debt .info-table tbody th,
.js-ui-tab-panel.type-debt .info-table tbody td {
  background-color: #fff;
  color: var(--basic);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.8rem;
  letter-spacing: -0.325px;
  border-right: 1px solid #e9ecef;
  border-bottom: 1px solid #e9ecef;
}
.js-ui-tab-panel.type-debt .info-table tbody th {
  padding: 10px 15px;
  text-align: left;
}
.js-ui-tab-panel.type-debt .info-table tbody td {
  padding: 14px 15px;
}
.js-ui-tab-panel.type-debt .info-table tbody td:last-of-type {
  border-right: none;
}
.js-ui-tab-panel.type-debt :is(.info-table-area + .info-table-area, .tab-table-notice) {
  margin-top: 16px;
}
.js-ui-tab-panel.type-debt .tab-table-notice li {
  position: relative;
  padding-left: 5px;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.8rem;
  letter-spacing: -0.325px;
  color: var(--gray-80);
}
.js-ui-tab-panel.type-debt .tab-table-notice li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0px;
  width: 2px;
  height: 2px;
  background-color: var(--gray-70);
}
.js-ui-tab-panel.type-debt .tab-contents-downloads {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.js-ui-tab-panel.type-debt .tab-contents-downloads .ui-arrow {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.8rem;
  letter-spacing: -0.36px;
}
/* // [2024-11-08: KJH] 채무면제 유예상품 */

/* [2024-11-18 : shj] [WPM-8738] [라이프] '구독서비스 UI 개편'_'채재윤' 사전협의-2024-08-12 */
.subscribe-wrap .page-contents {
  padding: 32px 16px 36px;
}
/* [2025-06-02] */
.subscribe-wrap .page-title.top-title {
  padding: 0 8px;
  font-size: 2.4rem;
  margin-bottom: 0;
  letter-spacing: -0.025em;
}
.subscribe-wrap .page-title.top-title .point-title {
  font-size: 2.5rem;
  font-weight: bold;
}
/* [2025-06-02] */
.subscribe-wrap .title-img {
  display: block;
  margin: 24px 0 0 auto;
  width: 100%;
  max-width: 328px;
}

.subscribe-wrap .benefit-accordion {
  margin: 0 -16px;
  padding: 16px;
  background: #e4fbfa;
  border-radius: 16px;
}
.subscribe-wrap .benefit-accordion .accordion-list {
  border: 0;
}
/* [2025-06-02] */
.subscribe-wrap .benefit-accordion .accordion-opener {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0 16px 6px;
  background: #e4fbfa;
}
/* [2025-06-02] */
.subscribe-wrap .benefit-accordion .accordion-opener > img {
  width: 48px;
  height: 48px;
}
.subscribe-wrap .benefit-accordion .accordion-item .accordion-opener:before {
  right: 8px;
  left: 8px;
  background: #d4efee;
}
.subscribe-wrap .benefit-accordion .accordion-item .accordion-opener.js-accordion-active:before {
  background: #e4fbfa;
}
.subscribe-wrap .benefit-accordion .accordion-item.js-accordion-opened {
  border-bottom: 0;
}
.subscribe-wrap .benefit-accordion .accordion-item .accordion-opener:after {
  right: 6px;
}
/* [2025-06-02] */
.subscribe-wrap .benefit-accordion .accordion-item .accordion-contents {
  padding: 16px 20px;
  background: #fff;
  border-radius: 8px;
  color: var(--gray-80);
}

.subscribe-wrap .benefit-accordion .accordion-item .accordion-contents .benefit-contents-title {
  margin: 16px 0 6px;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--basic);
}
.subscribe-wrap .benefit-accordion .accordion-item .accordion-contents .benefit-contents-title:first-child {
  margin-top: 0;
}
.subscribe-wrap .benefit-accordion .accordion-item .accordion-contents .info-item + .info-item {
  margin-top: 6px;
}

.subscribe-wrap .middle-title {
  margin: 48px 0 16px;
  line-height: 2.6rem;
  font-size: 2.1rem;
  font-weight: 500;
}
.subscribe-wrap .detail-benefit-item {
  margin-bottom: 80px;
}
.subscribe-wrap .detail-benefit-item .item-img {
  display: block;
  width: 100%;
}
/* [2025-06-02] */
.subscribe-wrap .detail-benefit-item .item-title {
  font-size: 1.8rem;
  line-height: 2.4rem;
  margin: 16px 0 6px;
  padding: 0 8px;
}
/* [2025-06-02] */
.subscribe-wrap .detail-benefit-item .item-desc {
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: var(--gray-80);
  padding: 0 8px;
}
.subscribe-wrap .detail-benefit-item .item-desc li + li { /* [2025-06-05 kho] [WPM-11313] 추가 */
  margin-top: 6px;
}
.subscribe-wrap .notice-accordion {
  margin-top: 48px;
}
.subscribe-wrap .notice-accordion .accordion-opener-title {
  font-size: 1.5rem;
}
.subscribe-wrap .notice-accordion .accordion-item .info-item {
  font-size: 1.3rem;
}
.subscribe-wrap .notice-accordion .accordion-item .info-item.font-weight-bold {
  font-weight: 700;
}
.subscribe-wrap .page-buttons.type-fixed {
  padding: 16px;
}
/* [2025-06-02] */
.subscribe-wrap .page-buttons.type-fixed.is-bottom {
  padding: 24px 16px;
}
.subscribe-wrap .page-contents .page-buttons.type-fixed.is-bottom { /* [2025-06-05 kho] [WPM-11313] 추가 */
  padding: 24px 0;
}
/* // [2024-11-18 : shj] [WPM-8738] [라이프] '구독서비스 UI 개편'_'채재윤' 사전협의-2024-08-12 */

/* [2024-11-14 카드해지 방어 페이지 수정 : HDH] */
.rd-box-wrap .rd-box.hana-pick-banner {
  height: 61px;
  background-color: #d8f3f2;
}
.rd-box-wrap .rd-box.hana-pick-banner .ic-hana-pick {
  width: 63px;
}
.rd-box-wrap .rd-box.hana-pick-banner .usage-default-slot-val {
  color: #3996fc;
}
.rd-box-wrap .rd-box-text .rd-box-banner-title,
.rd-box-wrap .rd-box-text h1.rd-box-banner-title {
  line-height: 2.6rem;
  font-weight: 500;
}

/* [2024-11-20: KJH] [WPM-8573] [기타] '선택적복지제도 정보제공동의 디자인 퍼블 제작 요청'_'김수원' 사전협의-2024-09-13  */
.type-welfare .ui-tab {
  margin-bottom: 32px;
}
.type-welfare .page-progress {
  margin-top: 16px;
}
.type-welfare .page-section {
  margin-top: 36px;
}
/* // [2024-11-20: KJH] [WPM-8573] [기타] '선택적복지제도 정보제공동의 디자인 퍼블 제작 요청'_'김수원' 사전협의-2024-09-13  */

/* [2024-11-21 카드신청 동시발급 페이지 수정] */
.type-card-detail-slide.new-type .card-multi-apply.type-large-image .multi-apply-card-area {
  justify-content: space-between;
  margin-top: 100px;
  padding: 0 8px;
}
.type-card-detail-slide.new-type .card-multi-apply.type-large-image .multi-apply-card-area .multi-apply-card-item {
  width: 123px;
}
.type-card-detail-slide.new-type
  .card-multi-apply.type-large-image
  .multi-apply-card-area
  .multi-apply-card-item
  .card-image {
  width: 193px;
  height: 123px;
}
.type-card-detail-slide.new-type .card-multi-apply.type-large-image .multi-apply-card-area .multi-apply-icon-plus {
  margin-top: 50px;
}
.type-card-detail-slide.new-type
  .card-multi-apply.type-large-image
  .multi-apply-card-area
  .multi-apply-card-item
  .multi-apply-card-item-title {
  margin-top: 60px;
  height: 80px;
  word-break: break-all;
}
.card-item-detail-link {
  /* margin-top: 20px; */
  font-size: 14px;
  color: #374248;
  letter-spacing: -0.7px;
  text-decoration: underline;
}

/* [2024-12-03 카드이용내역 텍스트 배너 추가 : HDH] */
.page-notice-text-banner.type-02 {
  position: relative;
  margin-top: 2rem;
  padding: 1rem 1.6rem 1rem 1.2rem;
  background-color: #f4f6f8;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.325px;
}
.page-notice-text-banner.type-02 span i {
  width: 18px;
  height: 18px;
}
/* [2024-12-16 자동납부 페이지 태그 수정 : HDH] */
.ui-link-title.type-discount-tag {
  position: relative;
}
.ui-link-title.type-discount-tag .link-title-text {
  margin-right: 10px;
}
.ui-link-title.type-discount-tag .discount-tag {
  display: inline-block;
  width: 90px;
  margin-top: 0;
  margin-left: 0;
  line-height: normal;
  vertical-align: text-bottom;
  box-sizing: border-box;
}
@media (max-width: 381px) {
  .ui-link-title.type-discount-tag.type-02 .discount-tag {
    display: block;
    margin-top: 5px;
  }
}
@media (max-width: 360px) {
  .ui-link-title.type-discount-tag.type-01 .discount-tag {
    display: block;
    margin-top: 5px;
  }
}

/* [2025-01-14 하나페이 재발급 신청화면 from card-apply.css : HDH] */
.pay-brand-selector-wrap-mka .pay-brand-selector .ui-checkbox-block .ui-label {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.pay-brand-selector-wrap-mka .pay-brand-selector .pay-brand-logo {
  display: block;
  width: 60px;
}
.pay-brand-selector-wrap-mka .pay-brand-selector .pay-brand-logo .img {
  max-width: 100%;
  max-height: 100%;
}
.pay-brand-selector-wrap-mka .pay-brand-selector .pay-brand-logo .img.selected,
.pay-brand-selector-wrap-mka .pay-brand-selector .ui-checkbox:checked + .ui-label .pay-brand-logo .img,
.pay-brand-selector-wrap-mka .pay-brand-selector .ui-radio:checked + .ui-label .pay-brand-logo .img {
  display: none;
}
.pay-brand-selector-wrap-mka .pay-brand-selector .ui-checkbox:checked + .ui-label .pay-brand-logo .img.selected,
.pay-brand-selector-wrap-mka .pay-brand-selector .ui-radio:checked + .ui-label .pay-brand-logo .img.selected {
  display: block;
}
.pay-brand-selector-wrap-mka .pay-brand-selector .ui-checkbox-block .ui-check-object {
  margin-right: 10px;
  /* background-image: url("/mkca20/images/icon/ic-checkbox-l--24.svg"); */
}
.pay-brand-selector-wrap-mka .pay-brand-selector .ui-checkbox-block .ui-checkbox:checked + .ui-label .ui-check-object {
  /* background-image: url("/mkca20/images/icon/ic-checkbox-l-c--24.svg"); */
}
.pay-brand-selector-wrap-mka .ui-check-object {
  width: 24px;
  height: 24px;
  position: relative;
  display: block;
  border: 0 solid var(--gray-40);
  box-sizing: border-box;
  border-radius: 30px;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  background: url(../images/icon/element-checkbox-small.svg) no-repeat 0 50%;
}
.pay-brand-selector-wrap-mka .ui-form-notice {
  position: relative;
  margin-top: 10px;
  padding-left: 28px;
  padding-top: 3px;
  font-size: 1.4rem;
  line-height: normal;
  color: var(--gray-70);
  font-weight: 400;
}
.pay-brand-selector-wrap-mka .ui-form-notice::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  background: url("/mkca20/images/icon/icon-notice.svg") no-repeat 50% 50% / 100% auto;
}
/* //[2025-01-14 하나페이 재발급 신청화면 from card-apply.css : HDH] */

/* [2025-01-15 : shj] [WPM-9708] [기타] '피싱케어 개인화 풀팝업 디자인 요청 건'_'오재훈' 사전협의-2025-01-07 */
.layer-phishing-contents .page-title {
  margin-bottom: 16px;
  font-size: 2.8rem;
  line-height: 3rem;
  font-weight: bold;
}
.layer-phishing-contents .page-title span {
  font-size: 2.4rem;
}
.layer-phishing-contents.type-02 .page-title {
  margin-bottom: 0;
  font-size: 2.4rem;
  line-height: 2.8rem;
}
.layer-phishing-contents.type-02 .page-title span {
  font-size: 2.2rem;
}
.status-tag.type-normal {
  padding: 0 6.5px;
  line-height: 22px;
  border: 0;
  font-weight: 400;
}
.layer-phishing-contents .main-top-img {
  margin: 36px auto 16px;
  max-width: 114px;
}
.layer-phishing-contents.type-02 .main-top-img {
  margin: 0;
  max-width: 80px;
  width: 80px;
  height: 80px;
}
.layer-phishing-contents .rank-kewords-num {
  margin: 2px 8px 0 0;
  padding: 0;
  border-radius: 50%;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 12px;
  font-weight: 400;
}
.rank-kewords-num.bg-primary {
  background-color: var(--primary);
}
.layer-phishing-contents .list-contents {
  padding: 20px;
}
/* 250521 피싱케어 type-03 */
.layer-phishing-contents.type-03 .page-section-group {
  position: relative;
  margin-top: 10px;
}
.layer-phishing-contents.type-03 .page-title-wrap {
  width: calc(100% - 92px);
}
.layer-phishing-contents.type-03 .page-title {
  margin-bottom: 0;
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: -0.25px;
}
.layer-phishing-contents.type-03 .main-top-img {
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  margin: 0;
}
.layer-phishing-contents.type-03 .list-contents > ul > li + li {
  margin-top: 16px;
}
.layer-phishing-contents.type-03 .list-contents > ul > li .info-list {
  margin-top: 12px;
  padding-left: 14px;
}
.layer-phishing-contents.type-03 .list-contents > ul > li .info-item + .info-item {
  margin-top: 8px;
}
.layer-phishing-contents.type-03 .page-section-group:not(:first-child) {
  margin-top: 36px;
}
.layer-phishing-contents.type-03 .page-section-group .section-title {
  margin-bottom: 16px;
}
.layer-phishing-contents.type-03 .box-border {
  border-radius: 12px;
}
.layer-phishing-contents.type-03 .list-contents + .info-item {
  margin-top: 16px;
}
.layer-phishing-contents.type-03 .ui-select-multiple-item.type-all .ui-label {
  padding: 14px;
}
.layer-phishing-contents.type-03 .ui-select-multiple-item .ui-label {
  padding: 10px 14px;
}
.layer-phishing-contents.type-03 .ui-arrow-button {
  width: 14px;
  height: 14px;
  background-image: url(../images/common/ic-button-arrow-b-14.svg);
  background-size: 12px auto;
}
/* // 250521 피싱케어 type-03 */
.ui-layer__foot.foot_shadow {
  padding-top: 20px;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -5px 20px 0 rgba(0, 0, 0, 0.1);
}
.ui-layer__foot .foot-top-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}
.ui-layer__foot .foot-top-info .d-flex {
  gap: 8px;
}
.box-border {
  border: 1px solid #e5e5e5;
  border-radius: 20px;
}
/* // [2025-01-15 : shj] [WPM-9708] [기타] '피싱케어 개인화 풀팝업 디자인 요청 건'_'오재훈' 사전협의-2025-01-07 */

/* [2025-02-28 : shj [WPM-10018] [혜택] '매일더블캐쉬백 대상카드 조회 메뉴 개선 건'_'이은헌 과장'-2025-02-04 */
.total-count-val {
  position: relative;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  max-width: 100%;
  color: var(--basic);
  font-size: 2rem;
  line-height: 2.7rem;
  font-weight: 500;
  word-break: break-all;
}
.total-amount-val .total-count-val {
  font-size: 1.5rem;
  line-height: 2rem;
}
/* .total-count-val.type-bar::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 12px;
    display: block;
    height: 15px;
    margin-top: -7.5px;
    border-left: 1px solid #b1b7c4;
} */
.total-count-val.ui-arrow::after {
  width: 20px;
  background-position: 100% 3.5px;
}

/* //[2025-02-28 : shj [WPM-10018] [혜택] '매일더블캐쉬백 대상카드 조회 메뉴 개선 건'_'이은헌 과장'-2025-02-04 */

/* [2025-03-04 지방세 납부 페이지 : HDH] */
.page-local-tax {
  position: relative;
}
.page-local-tax .section-top {
  padding-bottom: 20px;
  text-align: center;
}
.page-local-tax .section-top .section-top-content {
  padding: 72px 0 80px;
}
.page-local-tax .section-top .section-top-img {
  width: 80px;
  margin-bottom: 16px;
}
.page-local-tax .section-top .section-text {
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.165px;
}
.page-local-tax .section-top .section-text-02 {
  font-size: 11px;
  font-weight: 500;
  color: #888;
  line-height: 16.5px;
  letter-spacing: -0.165px;
}
.page-local-tax .section-top .section-top-title {
  margin: 6px 0 16px;
  font-size: 24px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -0.165px;
}
.page-local-tax .section-content {
  padding-top: 20px;
}
.page-local-tax .section-content .section-content-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.45px;
  text-align: center;
}
.page-local-tax .section-content .local-tax-list-wrap {
  margin-top: 20px;
}
.page-local-tax .section-content .local-tax-list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}
.page-local-tax .section-content .local-tax-list-item {
  position: relative;
  width: 240px;
  height: 120px;
  padding: 16px;
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.165px;
  scroll-snap-align: start;
  background-color: #dbecfc;
  border-radius: 16px;
  box-sizing: border-box;
}
.page-local-tax .section-content .local-tax-list-item.type-02 {
  background-color: #f1e8fe;
}
.page-local-tax .section-content .local-tax-list-item::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 56px;
  height: 62px;
  background: url("/images/icon/local_tax_ic_banner_01.png") no-repeat center/cover;
}
.page-local-tax .section-content .local-tax-list-item.type-02::after {
  background: url("/images/icon/local_tax_ic_banner_02.png") no-repeat center/cover;
}
.page-local-tax .section-content .local-tax-qr-wrap {
  margin-top: 40px;
  padding: 20px 16px 0;
  background-color: #f4f6f8;
  border-radius: 16px;
  text-align: center;
}
.page-local-tax .section-content .local-tax-qr-wrap .local-tax-qr-text {
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: -0.35px;
  color: #666;
}
.page-local-tax .section-content .local-tax-qr-wrap .local-tax-qr-title {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.165px;
}
.page-local-tax .section-content .local-tax-qr-wrap .local-tax-qr-img {
  display: block;
  width: 80px;
  margin: 24px auto 32px;
}
.page-local-tax .section-content .local-tax-qr-wrap .local-tax-qr-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0 16px;
  font-size: 16px;
  font-weight: 500;
  color: #029c94;
  line-height: 1.5;
  letter-spacing: -0.165px;
  border-top: 1px solid #d0d6dd;
}
.page-local-tax .use-notice-area {
  padding: 24px 24px 80px;
}
.page-local-tax .btn-scroll-up .ui-basic-button {
  border-radius: 0;
}
.page-local-tax .btn-scroll-up {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
.page-local-tax .btn-scroll-up {
  transform: translateY(200%) !important;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.page-local-tax .btn-scroll-up.open {
  transform: translateY(0) !important;
  position: fixed;
}
.layer-terms-list-info {
  margin-top: 20px;
  padding: 20px 0 5px;
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: -0.3px;
  border-top: 1px solid #e9e9e9e9;
}
.page-local-tax .page-contents.type-completion {
  padding-top: 140px;
}
.page-local-tax .page-contents.type-completion .completion-title {
  position: relative;
  font-weight: 20px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.5px;
  text-align: center;
}
.page-local-tax .page-contents.type-completion .completion-title::before {
  content: "";
  display: block;
  width: 54px;
  height: 54px;
  border-radius: 54px;
  margin: 0 auto 50px;
  background-color: #ecf9f8;
}
.page-local-tax .page-contents.type-completion .completion-title::after {
  content: "";
  display: block;
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  width: 26px;
  height: 20px;
  margin: auto;
  background-image: url("/images/common/ic-borderless-checkbox-c.svg");
  background-size: 100% 100%;
}
.page-local-tax .page-contents.type-completion .completion-text {
  margin-top: 24px;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: -0.3px;
  text-align: center;
}
.page-local-tax .page-section.type-no-data {
  text-align: center;
}
.page-local-tax .page-section.type-no-data {
  padding: 65px 0 145px;
}
.page-local-tax .page-section.type-no-data .section-top-img {
  width: 32px;
  margin-bottom: 20px;
}
.page-local-tax .page-section.type-no-data .section-top-title {
  font-size: 16px;
}
.page-local-tax .tax-notice-list-wrap .tax-notice-list-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  font-size: 13px;
}
.page-local-tax .tax-notice-list-wrap .tax-notice-list-info .info-filter-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.page-local-tax .tax-notice-list .list-item {
  margin-bottom: 10px;
  padding: 20px;
  color: #888;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
}
.page-local-tax .tax-notice-list .list-item:last-child {
  margin-bottom: 0;
}
.page-local-tax .tax-notice-list .list-item .list-item-link {
  display: block;
  width: 100%;
}
.page-local-tax .tax-notice-list .list-item .list-item-date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 300;
  line-height: 18px;
  letter-spacing: -0.043px;
}
.page-local-tax .tax-notice-list .list-item .list-item-date .text-condition {
  font-weight: 500;
}
.page-local-tax .tax-notice-list .list-item .list-item-title {
  font-size: 17px;
  line-height: 21px;
  color: #000;
}
.page-local-tax .tax-notice-list .list-item .list-item-payment {
  margin-top: 2px;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.038px;
}
.page-local-tax .tax-notice-list .list-item .list-item-payment .list-item-payment-text {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
}
.page-local-tax .tax-notice-list .list-item .list-item-payment .payment-amount {
  color: #029c94;
}
.page-local-tax .tax-notice-list .list-item .list-item-payment .list-item-payment-text:first-of-type {
  margin-right: 10px;
}
.page-local-tax .tax-notice-list .list-item .list-item-payment .list-item-payment-text:first-of-type::after {
  position: absolute;
  content: "";
  top: 50%;
  right: -7px;
  width: 1px;
  height: 9px;
  transform: translateY(-50%);
  background-color: #a2a2a2;
}
.page-local-tax .tax-notice-list .list-item.type-not-read .list-item-title {
  color: #a2a2a2;
}
.page-local-tax .tax-notice-list .list-item.type-not-read .list-item-payment .payment-amount {
  color: #a2a2a2;
}
.ui-select-block.type-rounded-box .ui-select {
  height: auto;
  padding: 12px 16px;
  border: 1px solid var(--gray-30);
  border-radius: 10px;
}
.ui-select-block.type-rounded-box::before {
  right: 16px;
}
/* 회색 탭 패널 */
.ui-radio-group.type-panel.type-gray {
  padding: 3px;
  background-color: #e9ecef;
  border-radius: 10px;
  box-sizing: border-box;
}
.ui-radio-group.type-panel.type-gray .ui-radio-block.type-box .ui-label {
  min-height: 25px;
  box-shadow: none;
}
.ui-radio-group.type-panel.type-gray .ui-radio-block.type-box:first-child .ui-label {
  border-radius: 10px 0 0 10px;
}
.ui-radio-group.type-panel.type-gray .ui-radio-block.type-box:last-child .ui-label {
  border-radius: 0 10px 10px 0;
}
.ui-radio-group.type-panel.type-gray .ui-radio-block.type-box .ui-radio:checked + .ui-label {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: none;
}
.ui-radio-group.type-panel.type-gray .ui-radio-block.type-box .ui-label-text {
  font-size: 12px;
  color: #333;
  line-height: normal;
  letter-spacing: -0.3px;
}
/* //[2025-03-04 지방세 납부 페이지 : HDH] */

/* [2025-03-06 휴대폰 케어 디자인 수정 : HDH] */
.page-contents.type-step .page-title.type-new-size,
.page-contents.type-completion .page-title.type-new-size {
  font-size: 2.2rem;
  font-weight: 500;
}
/* //[2025-03-06 휴대폰 케어 디자인 수정 : HDH] */

/* [2025-03-18 kho] [WPM-10411] 스포츠꿈나무 특기장려금 잔액조회 결과 리스트 라인 위치 수정 */
.form-detail-block .form-detail-list.type-line2 {
  position: relative;
  margin-top: 5px;
  padding: 0 20px 20px 20px;
}
.form-detail-block .form-detail-list.type-line2:before {
  content: "";
  position: absolute;
  top: 0;
  right: 20px;
  left: 20px;
  height: 1px;
  background: var(--gray-30);
}
.check-area .form-detail-list.type-line2 {
  position: relative;
  margin-top: -2px;
  padding-top: 1px;
}
/* //[2025-03-18 kho] [WPM-10411] 스포츠꿈나무 특기장려금 잔액조회 결과 리스트 라인 위치 수정 */

/* [2025-03-26 kho] [WPM-10417] [결제] 국내, 해외 오프라인 결제화면 일원화 개선 요청 - 지역 선택 팝업 추가 */
.ui-select-list.type_h44 .ui-label {
  padding: 4px 0;
  min-height: 36px;
}
.ui-select-list.type_h44 .ui-label::after {
  top: 50%;
  transform: translateY(-50%);
}
.ui-select-list.type_h44 .ui-label-text {
  font-size: 1.5rem;
  line-height: 1.8rem;
}
.ui-select-list.type_h44 input:checked + .ui-label,
.ui-select-list.type_h44 .ui-radio-block.is-checked .ui-label {
  font-weight: 700;
}
/* //[2025-03-26 kho] [WPM-10417] [결제] 국내, 해외 오프라인 결제화면 일원화 개선 요청 - 지역 선택 팝업 추가 */

/* [2025-03-31 KJH] [WPM-10585] 돈버는 쇼핑, 해외직구 리뉴얼 */
.makeMoney .shopping-lounge-wrap {
  background-color: #4670fa;
}
.makeMoney .shopping-lounge-wrap .section-contents {
  position: relative;
  padding-block: 40px;
  background-color: #f5f6f7;
  border-radius: 30px 30px 0 0;
  margin-bottom: 0;
}
.makeMoney .shopping-lounge-wrap .section-contents.event-info {
  padding: 0;
  background-color: #f5f6f7;
  border-radius: 0;
}
.makeMoney .shopping-lounge-wrap .event-info .event-info-wrap {
  padding: 32px 0 0;
  background: #fff;
  border-radius: 30px 30px 0 0;
  box-shadow: none;
}
.makeMoney .event-info-text {
  font-size: 16px;
  line-height: 1.4;
  color: #000;
}
.makeMoney .shopping-lounge-wrap .event-info .event-info-wrap .event-info-text span.sub-text {
  color: #767676;
  font-size: 13px;
}
.makeMoney .shopping-lounge-wrap .event-info .event-info-wrap ul {
  padding: 0;
  border: 0;
  background-color: transparent;
}
.makeMoney .shopping-lounge-wrap .event-info .event-info-wrap .event-info-title.type-01,
.makeMoney .shopping-lounge-wrap .event-info .event-info-wrap .event-info-title.type-02,
.makeMoney .shopping-lounge-wrap .event-info .event-info-wrap .event-info-title.type-03,
.makeMoney .shopping-lounge-wrap .event-info .event-info-wrap .event-info-title.type-04 {
  background-color: #fff;
  color: #5985fe;
  font-size: 14px;
  border: 1px solid #5985fe;
}
.makeMoney .shopping-lounge-wrap .event-info .event-info-wrap::before {
  display: none;
}
.makeMoney .shopping-store-list {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.makeMoney .shopping-store-list li {
  position: relative;
}
.makeMoney .shopping-store-list li.type-bonus-badge::after { /* [2026-02-27 kho] [WPM-14046] 클래스 처리로 변경 */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42.6666%;
  height: 38.9204%;
  background: no-repeat url(/images/gmh/contents/makemoney_ico_bonus.png) center / 100% auto;
  transform: translate(calc(-50% + -84%), calc(-50% + -97%));
}
.makeMoney .shopping-lounge-wrap .section-contents.step-list .step-item.step-item.step-01::after {
  background-image: url(/images/gmh/contents/makemoney_ico_step01.png);
}
.makeMoney .shopping-lounge-wrap .section-contents.step-list .step-item.step-item.step-02::after {
  background-image: url(/images/gmh/contents/makemoney_ico_step02.png);
}
.makeMoney .shopping-lounge-wrap .section-contents.step-list .step-item.step-item.step-03::after {
  background-image: url(/images/gmh/contents/makemoney_ico_step03.png);
}
.makeMoney .shopping-lounge-wrap .section-contents.step-list .step-item.step-03 .step-title {
  display: flex;
  gap: 5px;
}
.makeMoney .shopping-lounge-wrap .section-contents.step-list .step-item.step-03 .step-title::after {
  content: "";
  width: 22px;
  height: 22px;
  background: no-repeat url(/images/gmh/contents/makemoney_ico_best.png) center / 100% auto;
}
.makeMoney .shopping-lounge-wrap .section-contents.step-list .step-item::before {
  background-color: #95afff;
}
.makeMoney .shopping-lounge-wrap .section-contents.step-list .step-item .step-title {
  color: #4771fa;
}
.makeMoney .shopping-lounge-wrap .section-contents.step-list .step-item .shopping-store-list li {
  width: 50%;
  margin: unset;
}
.makeMoney-btn-wrap {
  margin-top: 48px;
  padding-inline: 24px;
}
.makeMoney-btn-wrap + .section-bottom-banner {
  display: block;
  margin-top: 8px;
}
/* // [2025-03-31 KJH] [WPM-10585] 돈버는 쇼핑, 해외직구 리뉴얼 */

/* [2025-04-10 kho] [WPM-10768] 다국어채팅상담 랜딩페이지 오픈 안내 팝업 추가 */
.layer-open-notice__body-inner {
  padding-top: 0.2rem;
}
.layer-open-notice__body-inner .page-title {
  margin-bottom: 1.6rem;
  font-size: 2.4rem;
  line-height: 3rem;
  font-weight: bold;
}
.layer-open-notice__body-inner .main-text {
  font-size: 1.7rem;
  line-height: 2.1rem;
}
.layer-open-notice__body-inner .main-text > strong {
  display: block;
  margin-top: 0.4rem;
  font-weight: bold;
}
.layer-open-notice__body-inner .sub-text {
  margin-top: 1rem;
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: #888;
}
.layer-open-notice__body-inner .main-top-img {
  margin: 24px auto 0;
  max-width: 130px;
}
/* //[2025-04-10 kho] [WPM-10768] 다국어채팅상담 랜딩페이지 오픈 안내 팝업 추가 */

/* [2025-04-18 oh] [WPM-10830] 장기카드대출 불가 시 제휴사 대출 안내 추가 */
.ui-layer__body-inner .longloan-cant {
  margin: -6px 0 -5px;
  text-align: center;
}
.ui-layer__body-inner .longloan-cant.short-can {
  height: 127px;
  background: url(/images/contents/bg-longloan-cant1.png) center top no-repeat;
  background-size: 360px auto;
}
.ui-layer__body-inner .longloan-cant.short-cant {
  height: 204px;
  background: url(/images/contents/bg-longloan-cant2.png) center top no-repeat;
  background-size: 360px auto;
}
.ui-layer__body-inner .longloan-cant strong {
  line-height: 24px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -2.5%;
}
.ui-layer__body-inner .longloan-cant p {
  line-height: 18px;
  padding-top: 4px;
  font-size: 16px;
  letter-spacing: -2.5%;
}
/* 250421 jy */
.page-transaction .form-list + .transaction-list {
  margin-top: 36px;
}
.page-transaction .form-group ~ .form-group {
  margin-top: 26px;
}
.page-transaction .form-title {
  margin-bottom: 10px;
}
.page-transaction .no-data {
  position: relative;
  padding: 103px 0;
  text-align: center;
}
.page-transaction .no-data > p {
  font-size: 15px;
  font-weight: 400;
  line-height: 150%;
  color: #333;
}
.page-transaction .no-data > p::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto 12px;
  background: url(../images/icon/ic-nodata.svg) no-repeat center;
  background-size: 32px;
}
.page-transaction .ui-checkbox-block .ui-checkbox-object {
  width: 20px;
  height: 20px;
  background: url(../images/icon/ic-chk-01.svg) no-repeat center;
  background-size: 20px;
}
.page-transaction .ui-checkbox:checked + .ui-label .ui-checkbox-object,
.page-transaction .ui-checkbox-block.is-checked .ui-label .ui-checkbox-object {
  background-image: url(../images/icon/ic-chk-02.svg);
}
.page-transaction .ui-checkbox-block.w24 .ui-checkbox-object {
  width: 24px;
  height: 24px;
  background-size: 24px;
}
.page-transaction .transaction-wrap .ui-label-text {
  font-size: 13px;
  font-weight: 400;
  line-height: 150%;
}
.page-transaction .transaction-wrap {
  margin-top: 40px;
}
.page-transaction .transaction-list li {
  margin-top: 20px;
}
.page-transaction .transaction-list > li > strong {
  display: block;
  padding-bottom: 8px;
  color: #111;
  font-size: 13px;
  font-weight: 500;
  line-height: 150%;
  border-bottom: 1px solid #e5e5e5;
}
.page-transaction .transaction-list > li > ul {
  padding-bottom: 4px;
}
.page-transaction .transaction-list .ui-label {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-transaction .transaction-list .ui-checkbox-object {
  margin: 0;
}
.page-transaction .transaction-list .tbl-list {
  border: 0;
}
.page-transaction .info-wrap {
  width: 100%;
  flex: 1;
}
.page-transaction .info-wrap .info {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
}
.page-transaction .info-wrap .name {
  color: #111;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 100%;
}
.page-transaction .info-wrap .won {
  color: #111;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 100%;
}
.page-transaction .info-wrap .bank-account,
.page-transaction .info-wrap .date {
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 150%;
  color: #888;
}
.page-transaction .info-box {
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-transaction .more-btn {
  width: 100%;
  margin: 8px 0;
  padding: 12px 0;
}
.page-transaction .more-btn > span {
  position: relative;
  display: inline-block;
  padding-right: 14px;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 18px;
}
.page-transaction .more-btn > span::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 0;
  width: 12px;
  height: 12px;
  background: url(../images/icon/ic-arrow-btm.svg) no-repeat center;
  background-size: 12px;
}
/* 250513 */
.tbl-list {
  border-top: 1px solid #e5e5e5;
}
.tbl-list > li {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.tbl-list > li > span {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 150%;
}
.tbl-list .ic-pass {
  display: inline-block;
  width: 17px;
  height: 17px;
  margin: -4px 2px 0 0;
  background: url(../images/icon/ic_pass_grey.svg) no-repeat center;
  background-size: 17px;
  vertical-align: middle;
}
/* 250618 수정 */
.page-transaction-complete {
  width: 100%;
  margin: 130px 0;
  text-align: center;
}
.page-transaction-complete > p {
  position: relative;
  padding-top: 104px;
  font-size: 20px;
  font-weight: 500;
  line-height: 150%;
}
.page-transaction-complete.mtb30 {
  margin: 30px 0;
}
.page-transaction-complete.mtb30 > p {
  padding-top: 80px;
}
.page-transaction-complete > p::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: 54px;
  background: url(../images/icon/ic-complete.svg) no-repeat center;
  background-size: 54px;
}
.page-transaction-complete.error > p::before {
  background: url(../images/icon/ic-page-warning.svg) no-repeat center;
}
.page-transaction-complete > span {
  display: block;
  margin-top: 24px;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 135%;
}
/* 250618 수정 */
.page-transaction-complete .wcms-button {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
}
/* 250515 */
.page-transaction-complete.fail > p::before {
  background-image: url(../images/icon/ic-fail.svg);
}
.page-transaction .select-btn-list {
  margin-top: -10px;
}
.page-transaction .select-btn-list > li > a {
  position: relative;
  display: block;
  padding: 19px 20px 19px 44px;
  font-size: 1.5rem;
  font-weight: 400;
}
.page-transaction .select-btn-list > li > a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: url(../images/icon/ic-pdf-250421.svg) no-repeat center;
  background-size: 36px;
}
.page-transaction .select-btn-list > li:nth-child(2) > a::before {
  background-image: url(../images/icon/ic-email-250421.svg);
}
.page-transaction .select-btn-list > li:nth-child(3) > a::before {
  background-image: url(../images/icon/ic-fax-250421.svg);
}
.page-transaction .select-btn-list > li > a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: url(../images/common/btn-more-s.svg) no-repeat center;
  background-size: 12px;
}
/* // 250421 jy */

/* [2025-04-25 oh] [WPM-10991] [카드상품 기타] '카드신청 마케팅동의 팝업' */
.layer-contents .paragraph.type-gray {
  color: #666;
  margin-bottom: 10px;
  padding-bottom: 20px;
  line-height: 21px;
}
.ui-select-terms.type-card-apply {
  margin: 0;
}
.ui-select-terms.type-card-apply .ui-select-terms-list {
  margin-top: 0;
}
.ui-select-terms.type-card-apply .ui-select-terms-list > .ui-select-terms-item ~ .ui-select-terms-item {
  margin-top: 24px;
}
.ui-select-terms.type-card-apply .ui-checkbox-block.type-large .ui-label-text {
  margin-top: 3px;
  margin-left: 0;
  line-height: 19px;
  letter-spacing: normal;
}
.ui-select-terms.type-card-apply .ui-checkbox-block.type-large .ui-checkbox-object {
  width: 24px;
  height: 24px;
  margin-right: 6px;
}
.ui-select-terms.type-card-apply .ui-checkbox-block .ui-arrow::after {
  width: 24px;
  height: 24px;
  background-position: 50% 50%;
}
.ui-select-terms.type-card-apply .ui-select-terms-contents.type-box {
  margin: 6px 0 0 26px;
  padding: 8px 4px 10px 12px;
  border-radius: 4px;
  background-color: rgba(230, 231, 232, 0.2);
}
.ui-select-terms.type-card-apply .ui-select-terms-contents.type-box .ui-select-terms-item::before {
  display: none;
}
.ui-select-terms.type-card-apply .ui-select-terms-contents.type-box .ui-select-terms-item {
  padding-left: 0;
}
.ui-select-terms.type-card-apply .ui-select-terms-contents.type-box .ui-select-terms-item ~ .ui-select-terms-item {
  margin-top: 14px;
}
.ui-select-terms.type-card-apply .ui-select-terms-contents.type-box .ui-label .ui-label-text {
  color: #888;
}
.ui-select-terms.type-card-apply .ui-select-terms-contents.type-box .ui-checkbox-block .ui-checkbox-object {
  margin-left: -8px;
  margin-right: 2px;
  background-position: 50% 50%;
}
.ui-select-terms.type-card-apply .ui-badge.type-square {
  min-width: 28px;
  padding: 3px 4px;
  font-size: 1rem;
  line-height: 1.3rem;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
  border-radius: 3px;
}
.ui-select-terms.type-card-apply .ui-badge.type-square.ranking-01 {
  background: #248bd9;
}
.ui-select-terms.type-card-apply .ui-badge.type-square.ranking-02 {
  background: #18a55d;
}
.ui-select-terms.type-card-apply .ui-badge.type-square.ranking-03 {
  background: #af8c00;
}
.ui-select-terms.type-card-apply .ui-badge.type-square.ranking-04 {
  background: #e66000;
}
.ui-select-terms.type-card-apply .ui-badge.type-square.ranking-05 {
  background: #e13c41;
}
.ui-select-terms.type-card-apply .ui-label .ui-badge.type-square {
  margin-top: 4px;
  margin-left: auto;
}
.ui-select-terms.type-card-apply .ui-checkbox-group.type-box-check {
  margin-top: 6px;
  padding-left: 16px;
}
.ui-select-terms.type-card-apply .ui-checkbox-group.type-box-check .ui-checkbox {
  position: absolute;
  z-index: 0;
  left: 0;
  width: 1px;
  height: 1px;
  border: 0;
  background-color: transparent;
}
.ui-select-terms.type-card-apply .ui-checkbox-group.type-box-check .ui-checkbox:checked + .ui-label {
  box-shadow: inset 0 0 0 1px rgba(0, 164, 157, 0.5);
  background-color: #f3fbfb;
}
.ui-select-terms.type-card-apply .ui-checkbox-group.type-box-check .ui-checkbox:checked + .ui-label .ui-label-text {
  font-weight: 700;
  color: #029c94;
}
.ui-select-terms.type-card-apply .ui-checkbox-group.type-box-check .ui-label {
  display: flex;
  padding: 6px 10px;
  box-shadow: inset 0 0 0 1px #888;
  border-radius: 2px;
}
.ui-select-terms.type-card-apply .ui-checkbox-group.type-box-check .ui-label .ui-label-text {
  font-weight: 500;
  font-size: 1.2rem;
}
.ui-select-terms.type-card-apply .ui-checkbox-group.type-box-check .ui-form-check-block {
  flex:0 0 auto;
}
.ui-select-terms.type-card-apply .ui-checkbox-group.type-box-check .ui-form-check-block ~ .ui-form-check-block {
  margin-left: 4px;
}

/* [2025-04-29 kho] [WPM-10799] vip 스템프 이벤트 추가 */
.vip-ev-stamp {
  box-sizing: border-box;
  width: 100%;
}
.vip-ev-stamp-visual {
  width: 100%;
  margin-bottom: -51.945%;
}
.vip-ev-stamp-visual img {
  width: 100%;
}
.vip-stamp-contents {
  position: relative;
  margin-bottom: 40px;
  border-radius: 40px 40px 0 0;
  padding: 40px 16px 0;
  background: #fff;
}
.vip-stamp-contents .vip-stamp-item + .vip-stamp-item {
  margin-top: 40px;
}
.vip-stamp-contents .item-title {
  padding: 0 8px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: #000;
}
.vip-stamp-contents .item-content {
  margin-top: 12px;
  font-size: 18px;
  line-height: 28px;
}
.vip-stamp-contents .item-text {
  padding: 0 8px;
  color: #333;
}
.vip-stamp-contents .stamp-gift-list li {
  margin-top: 8px;
  padding: 16px 20px;
  border-radius: 16px;
  font-size: 16px;
  line-height: 24px;  color: #333;
  background: #F5F5F5;
}
.vip-stamp-contents .stamp-gift-list li > h4 {
  display: inline-flex;
  align-items: center;
}
.vip-stamp-contents .stamp-gift-list li > h4 > strong {
  margin-right: 4px;
  font-weight: 700;
}
.vip-stamp-contents .stamp-gift-list li > h4 > i {
  width: 20px;
  height: 20px;
  background: url('/images/vip-event/ev_stamp_mini.png') no-repeat center / contain;
}
.vip-stamp-contents .stamp-gift-list li > p {
  margin-top: 4px;
}
.vip-stamp-contents .stamp-box {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 0;
  margin-top: 12px;
  padding: 28px 8px;
  border-radius: 16px;
  color: #333;
  background: #F5F5F5;
}
.vip-stamp-contents .stamp-box li {
  flex: 1 1 33.33%;
  padding: 0 12px;
  box-sizing: border-box;
  text-align: center;
  font-size: 14px;
  line-height: 18px;
}
.vip-stamp-contents .stamp-box li .stamp-img {
  max-width: 64px;
  margin: 0 auto 8px;
}
.vip-stamp-contents .stamp-box li .stamp-img img {
  width: 100%;
}
.vip-stamp-contents .stamp-box li .stamp-off {
  display: block;
}
.vip-stamp-contents .stamp-box li .stamp-on {
  display: none;
}
.vip-stamp-contents .stamp-box li.status-on .stamp-off {
  display: none;
}
.vip-stamp-contents .stamp-box li.status-on .stamp-on {
  display: block;
}
.vip-stamp-contents .item-dot-list {
  margin-top: 12px;
}
.vip-stamp-contents .item-dot-list > li {
  display: flex;
  align-items: flex-start;
  margin-top: 6px;
  font-size: 14px;
  line-height: 18px;
  color: #5C5C5C;
}
.vip-stamp-contents .item-dot-list > li::before {
  content: "";
  display: block;
  flex: none;
  width: 2px;
  height: 2px;
  margin: 7px 5px 0 0;
  background: #5C5C5C;
}
.vip-stamp-contents .item-num-list > li {
  display: flex;
  align-items: flex-start;
  margin-top: 12px;
}
.vip-stamp-contents .item-num-list > li::before {
  content: attr(data-symbol);
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  text-align: center;
  margin: 5px 6px 0 0;
  padding-right: 1px;
  border-radius: 20px;
  font-size: 10px;
  line-height: 16px;
  font-weight: 700;
  color: #fff;
  background: #292929;
}
.vip-stamp-contents .ui-buttons {
  margin-top: 40px;
}
.vip-ev-stamp .use-notice-area {
  padding: 32px 24px;
  background: #F5F8F9;
}
.vip-ev-stamp .use-notice-area > h2 {
  display: flex;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: #69777E;
}
.vip-ev-stamp .use-notice-area > h2 > i {
  margin: 1px 7px 0 1px;
}
.vip-ev-stamp .use-notice-contents::before {
  display: none;
}
.vip-ev-stamp .use-notice-contents .info-list {
  margin-top: 16px;
  color: #69777E;
}
.vip-ev-stamp .use-notice-contents .info-list + .info-list {
  margin-top: 22px;
}
.vip-ev-stamp .use-notice-contents .info-list li {
  margin-top: 6px;
}
.ui-basic-button.type-vip-stamp {
  border-color: #3A1F7E;
  background-color: #3A1F7E;
  color: #fff;
  font-weight: 700;
}
.ui-basic-button.type-vip-stamp[disabled],
.ui-basic-button.type-vip-stamp.type-disabled {
  border-color: var(--gray-30);
  background-color: var(--gray-30);
  color: var(--gray-60);
}
/* //[2025-04-29 kho] [WPM-10799] vip 스템프 이벤트 추가 */

/* [2025-04-29 KJH] [WPM-200364090] 대출로 결제 추가 */
.page-contents:has(.paymentLoan-top) {
    flex: unset;
}
.paymentLoan-top-tit {
    color: var(--basic);
    font-size: 1.5rem;
    font-weight: 500;
}
.paymentLoan-top-amount {
    margin-top: 1rem;
    color: var(--secondary);
    font-size: 2.4rem;
    font-weight: 700;
}
.paymentLoan-top-date {
    display: block;
    margin-top: 1rem;
    color: var(--gray-70);
    font-size: 1.2rem;
    font-weight: 400;
}
.paymentLoan-body-tit {
    padding-block: 6px 20px;
    color: var(--basic);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 2.6rem;
}
.paymentLoan-body-tit span {
    display: block;
}
.page-contents.card-type:has(.paymentLoan-body-tit) {
    flex: 1;
    padding-inline: 2.4rem;
}

.page-contents.card-type .paymentLoan-body-tit ~ .card-area > a {
    padding-block: 2.4rem;
}
.paymentLoan-body-desc {
    color: var(--gray-70);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.8rem;
}
/* // [2025-04-29 KJH] [WPM-200364090] 대출로 결제 추가 */

/* [2025-04-29 kho] 고객지원 서브메인 화면의 이메일 상담 팝업 교체 */
.menu-link-list.type-icon-menu2 .menu-link-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
	border: 0 none;
}
.menu-link-list.type-icon-menu2 .menu-link-item + .menu-link-item {
	margin-top: 20px;
}
.menu-link-list.type-icon-menu2 .menu-link-item .menu-link-button {
	padding: 0;
}
.menu-link-list.type-icon-menu2 .menu-link-item .menu-link-button.ui-arrow-block::after {
	right: -1px;
	width: 15px;
	height: 12px;
	background: url(/images/contents/ico_arrow_right_gray.png) no-repeat 100% 50% / auto 12px;
}
.menu-link-list.type-icon-menu2 .menu-link-item .icon {
  width: 36px;
  height: 36px;
  margin-right: 10px;
}
.menu-link-list.type-icon-menu2 .menu-link-item .menu-tit {
	font-size: 15px;
	line-height: 21px;
	font-weight: 500;
}
.menu-link-list.type-icon-menu2 .menu-link-item .menu-desc {
	margin-top: 2px;
	font-size: 12px;
	line-height: 15px;
	color: #666;
}
/* //[2025-04-29 kho] 고객지원 서브메인 화면의 이메일 상담 팝업 교체 */

/* [2025-05-09 kho] [WPM-11047] 이용내역 없을 때 별님이 이미지 보이기. with_star_img 추가 */
.type-none.with_star_img::after {
  min-height: 169px;
}
.type-none.with_star_img .item-text {
  min-width: 80px;
  padding-top: 88px;
  background: url(/images/etc/img_speaker_star.png) no-repeat 50% 0 / auto 80px;
}
.page-section.type-line.type-none {
  border-top: none;
  border-bottom: none;
  padding: 35px 0 25px;
}
.page-section.type-line.type-none + .page-section.type-line {
  margin-top: 0;
}
/* //[2025-05-09 kho] [WPM-11047] 이용내역 없을 때 별님이 이미지 보이기. with_star_img 추가 */
/* 250513 */
.faq-info-box > strong {
  display: block;
  margin: 60px 0 66px 0;
  color: #111;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 134%;
  text-align: center;
}
.faq-info-box > ul {
  position: relative;
}
.faq-info-box > ul::before {
  content: '';
  position: absolute;
  bottom: calc(100% - 4px);
  left: 0;
  display: inline-block;
  width: 71px;
  height: 55px;
  background: url(../images/contents/img_info_250513.png) no-repeat center;
  background-size: 71px 55px;
}
.faq-info-box > ul > li {
  margin-top: 6px;
  padding: 18px;
  background-color: #F4F5F7;
  border-radius: 6px;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.8rem;
  letter-spacing: -0.03px;
  text-align: center;
}
.faq-info-box .noti-txt {
  position: relative;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #EAEBEE;
}
.faq-info-box .noti-txt > span {
  display: inline-block;
  padding-left: 22px;
  color: #888;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 130%;
  background: url(../images/icon/ic_notice_grey.svg) no-repeat left 0px;
  background-size: 18px;
}
.page-line {
  position: relative;
  margin-top: 36px;
  padding-top: 46px;
}
.page-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: -24px;
  right: -24px;
  height: 10px;
  background-color: #f5f5f5;
}
.page-card-list > li {
  padding: 24px 0;
  border-bottom: 1px solid #e5e5e5;
}
.page-card-list > li:first-of-type {
  padding-top: 0;
}
.page-card-list > li > strong {
  display: block;
  margin-top: 8px;
  font-size: 1.7rem;
  font-weight: 400;
}
.page-card-list .ui-badge {
  min-width: 61px;
}
.page-card-list .date {
  margin-top: 8px;
  font-size: 0;
}
.page-card-list .date > span {
  position: relative;
  display: inline-block;
  color: #888;
  font-size: 1.2rem;
  line-height: 1.5rem;
}
.page-card-list .date > span + span {
  padding-left: 8px;
  margin-left: 8px;
}
.page-card-list .date > span + span::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  bottom: 2px;
  width: 1px;
  background-color: #a2a2a2;
}
.page-card-list .sub-txt {
  display: block;
  margin-top: 8px;
  color: #888;
  font-size: 1.2rem;
  line-height: 1.5rem;
}
/* // 250513 */

/* [2025-05-14 kho] 카드신청 > 피싱케어 팝업 수정 : .layer-phishing-contents.type-04 */
.layer-phishing-contents.type-04 .page-title {
  margin-bottom: 0;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.025rem;
  line-height: 2.8rem;;
  flex: 1;
}
.layer-phishing-contents.type-04 .page-title > span {
  display: inline-block;
  font-size: inherit;
  font-weight: 500;
}
.layer-phishing-contents.type-04 .title-desc {
  margin-top: 1.2rem;
  font-size: 1.4rem;
  letter-spacing: -0.025rem;
  line-height: 1.8rem;;
}
.layer-phishing-contents.type-04 .main-top-img {
  width: 8rem;
  height: 8rem;
  margin: 0;
}
.layer-phishing-contents.type-04 .box-border {
  padding: 1.9rem;
  border-radius: 1.2rem;
}
.layer-phishing-contents.type-04 .list-contents {
  font-size: 1.5rem;
  letter-spacing: -0.025rem;
}
.layer-phishing-contents.type-04 .list-contents > ul > li + li {
  margin-top: 1.6rem;
}
.layer-phishing-contents.type-04 .list-contents .info-list {
  margin-top: 1.2rem;
  padding-left: 0.8rem;
}
.layer-phishing-contents.type-04 .list-contents .info-item {
  line-height: 1.8rem;
}
.layer-phishing-contents.type-04 .list-contents .info-item + .info-item {
  margin-top: 0.8rem;
}
/* //[2025-05-14 kho] 카드신청 > 피싱케어 팝업 수정 : .layer-phishing-contents.type-04 */
/* [2025-05-29: oh] 11275 이용알림 및 누적이용금액 안내 수정 요청 */
.accordion-contents .notice-example {
  margin-bottom: 1rem;
  padding: 2rem 1.8rem 0.5rem;
  border-radius: 8px;
  background-color: #f8f8f8;
}
.accordion-contents .notice-example .desc {
  line-height: 1.3;
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: -0.05em;
  text-align: center;
}
.accordion-contents .notice-example .ex-img img {
  width: 100%;
}
.additional-notice-accordion {
  margin-top:3.5rem;
}
.additional-notice-accordion .js-ui-accordion__layer {
  margin-top:2.5rem;
}
.additional-notice-accordion .accordion-head .additional-notice-accordion-opener {
  height:2.4rem;
}
.additional-notice-accordion .accordion-head .additional-notice-accordion-opener .title {
  line-height:2.4rem;
  font-weight:700;
  font-size:1.6rem;
  letter-spacing: -0.025em;
}
/* //[2025-05-29: oh] 11275 이용알림 및 누적이용금액 안내 수정 요청 */

/* [2025-06-09 kho] [WPM-11275] 추가 */
.accordion-contents .notice-example2 {
  margin-bottom: 1rem;
  text-align: center;
}
.accordion-contents .notice-example2 img {
  max-width: 100%;
}
/* //[2025-06-09 kho] [WPM-11275] 추가 */

/* [2025-06-12 oh] : 11187 분할결제(할부로전환) 진입 페이지 제작 요청  */
.page-installment-guide .page-header .page-title {
  line-height: 2.8rem;
  margin-bottom: 2rem;
  font-weight: 300;
  letter-spacing: -0.025em;
}
.page-installment-guide .page-header .box-guide {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border-radius: 0.8rem;
  background-color: #f8f8f8;
}
.page-installment-guide .page-header .box-guide:after {
  content: "";
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 5.6rem;
  height: 5.6rem;
  background: url(/images/illustration/img-songi-speaker.png) 0 0 no-repeat;
  background-size: 5.6rem auto;
}
.page-installment-guide .page-header .box-guide .tit {
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.025em;
}
.page-installment-guide .page-header .box-guide .desc {
  line-height: 1.3;
  margin-top: 0.8rem;
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: -0.025em;
  color: var(--gray-70);
}
.page-installment-guide .page-header .box-guide .desc em {
  font-weight: 400;
  font-style: normal;
}
.page-installment-guide .section-inquiry .section-header {
  display: flex;
  flex-direction: column;
}
.page-installment-guide .section-inquiry .section-header .tit {
  line-height: 2.6rem;
  font-weight: 300;
  font-size: 2.1rem;
}
.page-installment-guide .section-inquiry .section-header .desc {
  line-height: 1.9rem;
  margin-bottom: 0.8rem;
  font-weight: 300;
  font-size: 1.5rem;
}
.page-installment-guide .section-inquiry .section-header .desc em {
  font-style: normal;
  font-weight: 300;
}
.page-installment-guide .section-inquiry .form-list:not(:first-child),
.page-installment-guide .section-inquiry .form-item:not(:first-child) {
  margin-top: 3.2rem;
}
.page-installment-guide .section-inquiry .form-title .title {
  color: var(--gray-70);
}
.page-installment-guide .section-inquiry .form-item .ui-arrow {
  line-height: 1.6rem;
  margin-top: 1.8rem;
  color: var(--gray-70);
}
.page-installment-guide .section-inquiry .form-item .ui-arrow:after {
  background-image: url(/images/common/ic-button-arrow-lg.png);
}
.page-installment-guide .section-inquiry .ui-radio-group.type-grid.type-one-line {
  grid-template-columns: repeat(auto-fit, minmax(5.6rem, 1fr));
}
.page-installment-guide .section-inquiry .ui-radio-group.type-grid.type-one-line .ui-label {
  height: 4rem;
  min-height: 4rem;
}
.layer-alert-estimated-fee .ui-layer__head .header {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.layer-alert-estimated-fee .ui-alert .header__button--close {
  position: relative;
  bottom: inherit;
  margin: 0;
  background: none;
}
.layer-alert-estimated-fee .info-table thead th {
  padding-top: 0.9rem;
  padding-bottom: 1rem;
  border-top: 1px solid var(--gray-30);
  border-bottom: 1px solid var(--gray-30);
  background-color: transparent;
}
.layer-alert-estimated-fee .info-table tbody td {
  padding-top: 0.9rem;
  padding-bottom: 1rem;
}
.layer-alert-estimated-fee .info-table tbody tr:first-child td {
  background-color: #f8f8f8;
}
.layer-alert-estimated-fee .info-table thead th ~ th {
  border-left: 1px solid var(--gray-30);
}
.layer-alert-estimated-fee .ui-notice {
  margin-top: 2rem;
}
/* // [2025-06-12 oh] : 11187 분할결제(할부로전환) 진입 페이지 제작 요청  */

/* [2025-06-27 kho] [혜택] '민생회복 전국민 소비쿠폰 화면 개발 요청' / [2026-04-08 kho] [고유가 피해지원] .consumption- 셀렉터에 .gov- 셀렉터 추가(정부지원) */
.ui-buttons-item-tooltip-pt {
  padding-top: 40px;
}
.ui-buttons-item-tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 20px;
  box-shadow: 0 0 6px 0 #00000029;
  opacity: 1;
  transition: 0.5s opacity;
}
.ui-buttons-item-tooltip > span {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  width: max-content;
  height: 32px;
  box-sizing: border-box;
  padding: 6px 12px;
  border-radius: 3px;
  font-size: 1.4rem;
  line-height: 1.8rem;
  font-weight: 300;
  color: #fff;
  background: #2c364e;
}
.ui-buttons-item-tooltip > span:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  z-index: -1;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  transform: translate(-50%, -80%) rotate(45deg);
  background: #2c364e;
}
.ui-buttons-item-tooltip .arrow-right:after {
  content: "";
  padding-right: 18px;
  background: url(/images/icon/btn-more-w-s.svg) no-repeat 100% 50% / auto 10px;
}

.info-table.type-pd-narrow th,
.info-table.type-pd-narrow td {
  padding-left: 4px;
  padding-right: 4px;
}
.info-table.type-th-regular > thead > tr > th,
.info-table.type-th-regular > tbody > tr > th {
  font-weight: 400;
}

.gov-page-section .info-table-area .info-table,
.consumption-page-section .info-table-area .info-table {
  font-size: 1.3rem;
  color: #111;
}
.gov-page-section .info-table-area .info-table th,
.consumption-page-section .info-table-area .info-table th {
  color: #666;
}
.gov-page-section .info-table-area .info-table .gray01,
.consumption-page-section .info-table-area .info-table .gray01 {
  color: #111;
}

.page-contents.gov-page-contents,
.page-contents.consumption-page-contents {
  padding-top: 26px;
}
.gov-page-title-img,
.consumption-page-title-img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 118px;
  margin-block: -24px 8px;
}
.gov-page-title-logo,
.consumption-page-title-logo {
  width: 133px;
}
.gov-page-title-korea,
.consumption-page-title-korea {
  margin-inline: 14px;
  height: 82px;
}
.gov-page-contents .page-title,
.consumption-page-contents .page-title {
  margin-bottom: 32px;
  font-weight: 500;
  font-size: 2.4rem;
}
.page-title.gov-process-title,
.page-title.consumption-process-title {
  margin-bottom: 32px;
  font-weight: 500;
  font-size: 2.4rem;
  min-height: 61px;
}
.page-title.gov-process-title .process-txt,
.page-title.consumption-process-title .process-txt {
  display: block;
  margin-top: 8px;
  font-size: 2rem;
  line-height: 2.1rem;
  font-weight: 500;
  color: #00a49d;
}

.gov-page-section,
.consumption-page-section {
  font-size: 1.3rem;
  line-height: 2rem;
}
.gov-page-section.gov-type-line1,
.consumption-page-section.consumption-type-line1 {
  margin-top: 26px;
  padding-top: 36px;
}
.gov-page-section.gov-type-line2,
.consumption-page-section.consumption-type-line2 {
  margin-top: 40px;
  padding-top: 40px;
}

.gov-page-section.gov-type-line1::before,
.gov-page-section.gov-type-line2::before,
.consumption-page-section.consumption-type-line1::before,
.consumption-page-section.consumption-type-line2::before {
  content: "";
  position: absolute;
  top: 0;
  right: -24px;
  left: -24px;
  height: 10px;
  background-color: var(--gray-10);
}

.gov-page-section .page-info,
.consumption-page-section .page-info {
  line-height: 1.8rem;
  color: #666;
}
.gov-page-section .page-info-title,
.consumption-page-section .page-info-title {
  margin: 34px 0 16px;
  font-size: 1.7rem;
  line-height: 1.4;
}
.gov-page-section .page-info-title:first-child,
.consumption-page-section .page-info-title:first-child {
  margin-top: 0;
}
.gov-page-section .page-info-title.type-question,
.consumption-page-section .page-info-title.type-question {
  position: relative;
  margin-left: -18px;
  padding-left: 18px;
  text-indent: 18px;
  line-height: 140%;
}
.gov-page-section .page-info-title.type-question::before,
.consumption-page-section .page-info-title.type-question::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 5px;
  width: 10px;
  height: 13px;
  background: url(/images/benefit/ico-question.png) no-repeat center / contain;
}
.gov-page-section .page-info-text,
.consumption-page-section .page-info-text {
  margin-top: 8px;
  line-height: 1.5;
}
.gov-page-section .page-info-text.gray03,
.consumption-page-section .page-info-text.gray03 {
  color: #333;
}
.gov-page-section .page-info-text.small,
.consumption-page-section .page-info-text.small {
  margin-top: 2px;
  font-size: 1.4rem;
}
.gov-page-section .page-info-text.small + .page-info-text.small,
.consumption-page-section .page-info-text.small + .page-info-text.small {
  margin-top: 5px;
}
.gov-page-section .info-table-area + .page-info-text,
.consumption-page-section .info-table-area + .page-info-text {
  margin-top: 13px;
}
.gov-page-section .page-info-link,
.consumption-page-section .page-info-link {
  margin-top: 9px;
  color: #029c94;
  font-size: 1.5rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gov-page-section .gov-blt-dot + .page-info-link,
.consumption-page-section .consumption-blt-dot + .page-info-link {
  padding-left: 8px;
}

.gov-page-section .check-range-title,
.consumption-page-section .check-range-title {
  margin-bottom: 9px;
  font-size: 1.7rem;
  line-height: 2.4rem;
  font-weight: 400;
}
.gov-page-section .check-range,
.consumption-page-section .check-range {
  margin: 0 0 26px;
}

.gov-search-section .form-bottom,
.consumption-search-section .form-bottom {
  margin-top: 26px;
}
.gov-search-section .form-flex-cell + .form-flex-cell,
.consumption-search-section .form-flex-cell + .form-flex-cell {
  margin-left: 30px;
}

.gov-sub-title,
.consumption-sub-title {
  margin-bottom: 14px;
  font-size: 1.5rem;
  line-height: 2.1rem;
  font-weight: 500;
  color: #111;
}

.gov-text,
.consumption-text {
  color: #666;
  font-size: 1.5rem;
  line-height: 1.5;
}
.gov-text.color-red,
.consumption-text.color-red {
  color: #ce2d2d;
}
.gov-text:not(:first-child),
.consumption-text:not(:first-child) {
  margin-top: 20px;
}
.gov-text strong,
.consumption-text strong {
  color: #111;
}

.gov-progress-box,
.consumption-progress-box {
  height: 176px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #666;
}
.gov-progress-box .txt1,
.consumption-progress-box .txt1 {
  font-size: 1.6rem;
  line-height: 2rem;
  font-weight: 500;
}
.gov-progress-box .txt2,
.consumption-progress-box .txt2 {
  font-size: 1.4rem;
  line-height: 1.5rem;
}
.gov-progress-box .txt2 em,
.consumption-progress-box .txt2 em {
  font-style: normal;
}
.gov-progress-box .progress-bar,
.consumption-progress-box .progress-bar {
  overflow: hidden;
  width: 230px;
  height: 7px;
  margin: 14px auto;
  border-radius: 4px;
  background-color: #eee;
}
.gov-progress-box .progress-bar::before,
.consumption-progress-box .progress-bar::before {
  content: "";
  display: block;
  width: 80px;
  height: 100%;
  border-radius: 4px;
  background-color: #00a49d;
  -webkit-animation: consumption-progress-animate 2s linear infinite;
  animation: consumption-progress-animate 2s linear infinite;
}
@-webkit-keyframes consumption-progress-animate {
  0% {
    -webkit-transform: translateX(-80px);
  }
  100% {
    -webkit-transform: translateX(230px);
  }
}
@keyframes consumption-progress-animate {
  0% {
    transform: translateX(-80px);
  }
  100% {
    transform: translateX(230px);
  }
}

.gov-error-box,
.consumption-error-box {
  min-height: 176px;
  box-sizing: border-box;
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #f6f6f6;
  border-radius: 8px;
  word-break: keep-all;
  color: #666;
}
.gov-error-box + .gov-error-box,
.consumption-error-box + .consumption-error-box {
  margin-top: 28px;
}
.gov-error-box .txt1,
.consumption-error-box .txt1 {
  font-size: 1.8rem;
  line-height: 2.7rem;
  font-weight: 500;
  color: #111;
}
.gov-error-box .txt2,
.consumption-error-box .txt2 {
  margin-top: 20px;
  font-size: 1.5rem;
  line-height: 2.1rem;
}

.gov-agree-text-box,
.consumption-agree-text-box {
  margin-top: 40px;
  box-sizing: border-box;
  padding: 20px;
  background-color: #f6f6f6;
  border-radius: 8px;
}
.gov-agree-text-box .txt1,
.consumption-agree-text-box .txt1 {
  font-size: 1.5rem;
  line-height: 1.4;
  color: #666;
}
.gov-agree-text-box .txt2,
.consumption-agree-text-box .txt2 {
  margin-top: 16px;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 500;
  color: #111;
}
.gov-agree-text-box .txt2 p,
.consumption-agree-text-box .txt2 p {
  margin-top: 6px;
}

.gov-agree-check-box,
.consumption-agree-check-box {
  margin-top: 40px;
}
.gov-agree-check-box h3,
.consumption-agree-check-box h3 {
  margin-bottom: 16px;
  padding: 4px 0;
  font-size: 1.5rem;
  line-height: 2rem;;
}
.gov-agree-check-box .ui-select-multiple-item + .ui-select-multiple-item,
.consumption-agree-check-box .ui-select-multiple-item + .ui-select-multiple-item {
  margin-top: 16px;
}
.gov-agree-check-box .ui-select-multiple-item .ui-label,
.consumption-agree-check-box .ui-select-multiple-item .ui-label {
  align-items: flex-start;
  padding: 5px 0;
}
.gov-agree-check-box .ui-label-text,
.consumption-agree-check-box .ui-label-text {
  margin-left: 2px;
  font-size: 1.4rem;
  line-height: 2rem;
}

.gov-detail-table,
.consumption-detail-table {
  font-size: 1.7rem;
  line-height: 2.1rem;
  text-align: left;
}
.gov-detail-table th,
.consumption-detail-table th {
  padding: 28px 0 0 0;
  vertical-align: top;
  font-weight: 400;
  color: #666;
}
.gov-detail-table td,
.consumption-detail-table td {
  padding: 28px 0 0 10px;
  vertical-align: top;
  font-weight: 500;
  color: #111;
}
.gov-detail-table tr:first-child th,
.gov-detail-table tr:first-child td,
.consumption-detail-table tr:first-child th,
.consumption-detail-table tr:first-child td {
  padding-top: 0;
}
.gov-detail-table ~ .page-info,
.consumption-detail-table ~ .page-info {
  margin-top: 40px
}
.gov-amount,
.consumption-amount {
  padding: 9px 0 7px;
  color: #111;
}
.gov-amount .amount-title,
.consumption-amount .amount-title {
  margin-bottom: 3px;
  font-size: 1.7rem;
  line-height: 2.1rem;
}
.gov-amount .amount-val,
.consumption-amount .amount-val {
  font-size: 3.2rem;
  line-height: 4rem;
  font-weight: 700;
}

.gov-store-list li,
.consumption-store-list li {
  padding: 28px 0 12px;
  border-bottom: 1px solid #e5e5e5;
}
.gov-store-list li:first-child,
.consumption-store-list li:first-child {
  padding-top: 0;
}
.gov-store-list h4,
.consumption-store-list h4 {
  font-size: 1.7rem;
  line-height: 2.1rem;
  font-weight: 400;
  color: #111;
}
.gov-store-list p,
.consumption-store-list p {
  margin-top: 6px;
  font-size: 1.4rem;
  line-height: 2rem;
  color: #666;
}
/* [2026-05-18 kho] 추가 */
.gov-store-list .form-detail-title,
.consumption-store-list .form-detail-title {
  flex: 1;
}
.gov-store-list .form-detail-title + .form-detail-group,
.consumption-store-list .form-detail-title + .form-detail-group {
  flex: none;
}
/* //[2026-05-18 kho] 추가 */

/* [2026-05-22 kho] [WPM-245279949] 직장인든든한점심밥사업 추가 */
/* 청구할인 내역 */
.gov-usage-list .usage-default-date {
  line-height: 18px;
  color: #666;
}
.gov-usage-list .usage-default-item:not(:first-child) .usage-default-date {
  margin-top: 0;
}
.gov-usage-list .usage-default-title {
  font-size: 17px;
  line-height: 21px;
  font-weight: 500;
}
.gov-usage-list .usage-default-sum {
  font-size: 17px;
  line-height: 21px;
}
/* //[2026-05-22 kho] [WPM-245279949] 직장인든든한점심밥사업 추가 */

.gov-more-hide,
.consumption-more-hide {
  display: none;
}

.gov-page-section .gov-blt-dot,
.consumption-page-section .consumption-blt-dot {
  position: relative;
  padding-left: 8px;
}
.gov-page-section .gov-blt-dot:before,
.consumption-page-section .consumption-blt-dot:before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 2px;
  height: 2px;
  background-color: #999;
}

.gov-page-section .gov-blt-dash,
.consumption-page-section .consumption-blt-dash {
  position: relative;
  padding-left: 8px;
}
.gov-page-section .gov-blt-dash:before,
.consumption-page-section .consumption-blt-dash:before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 3px;
  height: 1px;
  background-color: #999;
}

.gov-page-section .gov-blt-etc,
.consumption-page-section .consumption-blt-etc {
  position: relative;
  padding-left: 16px;
}
.gov-page-section .gov-blt-etc .blt-text,
.consumption-page-section .consumption-blt-etc .blt-text {
  display: inline-block;
  text-indent: -16px;
}
.gov-page-section .gov-blt-etc.small,
.consumption-page-section .consumption-blt-etc.small {
  padding-left: 14px;
}
.gov-page-section .gov-blt-etc.small .blt-text,
.consumption-page-section .consumption-blt-etc.small .blt-text {
  text-indent: -14px;
}

.gov-page-section .page-faq .info-table-area.type-scroll-x,
.consumption-page-section .page-faq .info-table-area.type-scroll-x {
  margin-top: 15px;
}
.gov-page-section .page-faq .page-info-title,
.consumption-page-section .page-faq .page-info-title {
  margin-top: 35px;
}
.gov-page-section .page-faq .page-info-text + .page-info-text,
.consumption-page-section .page-faq .page-info-text + .page-info-text {
  margin-top: 13px;
}

.gov-page-visual,
.consumption-page-visual {
  padding-block: 10px 48px;
}
.gov-page-visual img,
.consumption-page-visual img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
/* //[2025-06-27 kho] [혜택] '민생회복 전국민 소비쿠폰 화면 개발 요청' */

/* [2025-08-06 kho] [WPM-12129] 추가 / [2026-04-08 kho] [고유가 피해지원] .consumption- 셀렉터에 .gov- 셀렉터 추가(정부지원) */
.gov-on-app,
.consumption-on-app {
  display: none;
}
#wrap.is-native .gov-on-web,
#wrap.is-native .consumption-on-web {
  display: none;
}
#wrap.is-native .gov-on-app,
#wrap.is-native .consumption-on-app {
  display: block;
}
.gov-page-visual .divided-item-wrap,
.consumption-page-visual .divided-item-wrap {
  display: flex;
  justify-content: center;
}
.gov-page-visual .divided-item-inner,
.consumption-page-visual .divided-item-inner {
  display: inline-flex;
}
.gov-page-visual .divided-item,
.consumption-page-visual .divided-item {
  flex: 1 1 auto;
}
.gov-page-visual .divided-item img,
.consumption-page-visual .divided-item img {
  margin: 0;
}
/* //[2025-08-06 kho] [WPM-12129] 추가 */

/* [2025-07-01 jy] 트래블 스위치 추가 */
.page-contents.travels-switch .img-area {
  max-width: 10rem;
  margin: 1.8rem auto 1.6rem;
}
.page-contents.travels-switch > h4,
.page-contents.travels-switch .page-title {
  line-height: 2.6rem;
  font-size: 2.0rem;
  font-weight: 400;
  text-align: center;
}
.page-contents.travels-switch .gray-box {
  line-height: 2rem;
  margin-top: 4.4rem;
  padding: 2rem 1.6rem;
  font-size: 1.4rem;
  font-weight: 400;
  text-align: left;
  border-radius: 1.2rem;
}
.page-contents.travels-switch .noti {
  line-height: 2rem;
  padding-left: 2.6rem;
  font-weight: 700;
  background: url(/images/contents/img-travels-noti.png) no-repeat center left;
  background-size: 2rem;
}
.page-contents.travels-switch .gray-box .ui-basic-button {
  /* common.css에 케이스 생성 : .ui-basic-button.type-gradient */
  margin-top: 16px;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 132%;
  border: 0;
  background: linear-gradient(270deg, #47DCC1 -10.68%, #3F99CB 109.35%);
  color: #fff;
}
/* // [2025-07-01] 트래블 스위치 추가 */
/* [2025-08-29 oh] 12322-215340625 원더카드 트래블로그 스위치 서비스 신청 완료화면 */
.page-contents.travels-switch .cont-notice-area .gray-box {
  position: relative;
}
.page-contents.travels-switch .cont-notice-area .gray-box strong {
  font-weight: 700;
}
.page-contents.travels-switch .cont-notice-area .gray-box:first-child {
  margin-top: 12px;
}
.page-contents.travels-switch .cont-notice-area .gray-box ~ .gray-box {
  margin-top: 6px;
}
.page-contents.travels-switch .cont-notice-area .gray-box .icon {
  position:absolute;
  top: 1.6rem;
  right: 1.6rem;
  width: 4.8rem;
  height: 4.8rem;
  background-size: 4.8rem auto;
  background-repeat: no-repeat;
  background-position: center center;
}
.page-contents.travels-switch .cont-notice-area .gray-box .icon.exchange {
  background-image: url(/images/contents/ico-travels-switch-exchange.png);
}
.page-contents.travels-switch .cont-notice-area .gray-box .icon.zero {
  background-image: url(/images/contents/ico-travels-switch-zero.png);
}
.page-contents.travels-switch .cont-notice-area .gray-box .icon.bubble {
  background-image: url(/images/contents/ico-travels-switch-bubble.png);
}
.page-contents.travels-switch .cont-notice-area .extra {
  line-height: 1.43;
  margin-top: 2rem;
  padding-top: 1.6rem;
  color: var(--gray-80);
  border-top:1px solid #ebebeb;
}
.page-contents.travels-switch .cont-notice-area .extra strong {
  font-weight: 700;
}
.page-contents.travels-switch .cont-notice-area .extra span {
  display: block;
  margin-top: 0.4rem;
}
/* //[2025-08-29 oh] 12322-215340625 원더카드 트래블로그 스위치 서비스 신청 완료화면 */
/* [2025-07-11 oh] 11797-208458653 장기카드대출 공공마이데이터 관련 수정 요청 */
.section-process-rolling {
  position: relative;
  overflow: hidden;
  margin: 9.6rem -2.4rem 0;
  height: 10.4rem;
}
.section-process-rolling:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:calc(50vw - 3.1rem);
  height:100%;
  background:linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}
.section-process-rolling:after {
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:calc(50vw - 3.1rem);
  height:100%;
  background:linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  transform: rotate(-180deg);
}
.section-process-rolling .icons {
  width: 100%;
  height: 100%;
  background: url(/images/contents/bg-process-rolling.png) 0 0 repeat-x;
  background-size: auto 100%;
  animation: bgProcessRolling 10s linear infinite;
}
@keyframes bgProcessRolling {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -96rem 0;
  }
}
.section-process-rolling .glass {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6.2rem;
  height: 6.2rem;
  background: url(/images/contents/ico-big-magnifier-circle.svg) 0 0 no-repeat;
  background-size: 6.2rem auto;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 12px 0 #00000040;
  border-radius: 100%;
}
.section-process-rolling .glass .handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1.2rem;
  height: 1.2rem;
  background: url(/images/contents/ico-big-magnifier-handle.svg) 0 0 no-repeat;
  background-size: 1.2rem auto;
}
.box-limit-result {
  display:flex;
  flex-direction: column;
  align-items: center;
  padding: 0 2rem;
  background-color:#f8f8f8;
  border-radius:0.6rem;
}
.box-limit-result .limit {
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width:100%;
  height:6rem;              
}
.box-limit-result .limit ~ .limit {
  border-top:1px solid #e5e5e5;
}
.box-limit-result .limit .tit {
  
  line-height:2rem;
  font-size:1.5rem;
  color:#888;
}
.box-limit-result .limit .num {
  line-height:2rem;
  font-weight:700;
  font-size:2rem;
  color:#888;
}
.box-limit-result .limit .num .unit {
  margin-left:2px;
  font-weight:400;
  font-size:1.3rem;
}
.box-limit-result .limit.result .tit,
.box-limit-result .limit.result .num .unit {
  color:#111;
}
.box-limit-result .limit.result .num {              
  color:var(--primary);
}
/* //[2025-07-11 oh] 11797-208458653 장기카드대출 공공마이데이터 관련 수정 요청 */
/* [2025-08-01 oh] 11966-211560759 세금환급 서비스 페이지 제작 */
.section-tax-refunds .tax-img-header img {
  width:100%;
}
.section-tax-refunds .tax-contents {
  z-index:1;
  position:relative;
  margin-top:-3rem;
  padding:4rem 2.4rem 3.6rem;
  border-top-left-radius: 3rem;
  border-top-right-radius: 3rem;
  background-color:#fff;
}
.section-tax-refunds .tax-contents .box-btn-area {
  display:flex;
  flex-direction: column;
  gap:1.2rem;
}
.section-tax-refunds .tax-contents .box-btn-area ~ .box-btn-area{
  margin-top:3.2rem;
}
.section-tax-refunds .tax-contents .box-btn-area .tit {
  line-height:2.5rem;
  font-weight:500;
  font-size:1.8rem;
  letter-spacing: -0.05rem;
}

/* [2026-09-01 KEJ] [WPM-15817] 추가 */
.section-tax-refunds .tax-contents .box-btn-area .tit_tooltip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  width: max-content;
  padding: 0.5rem 1rem 0.5rem 0.8rem;
  margin-bottom: 0.8rem; 
  background-color: #ffffff;
  border: 1px solid #5985fe;
  border-radius: 3rem;
}

.section-tax-refunds .tax-contents .box-btn-area .tit_tooltip-ico {
  width: 1.6rem;
  height: auto;
}
.section-tax-refunds .tax-contents .box-btn-area .tit_tooltip-txt {
  font-size: 1.1rem;
  font-weight: 700;
  color: #344cc7;
  line-height: 1.4rem;
}

.section-tax-refunds .tax-contents .box-btn-area .tit_tooltip::before {
  content: '';
  position: absolute;
  bottom: -0.4rem; 
  left: 1.075rem;
  width: 0.6rem;
  height: 0.615rem;
  background-color: #ffffff;
  border-bottom: 1px solid #5985fe;
  border-left: 1px solid #5985fe;
  transform: rotate(-45deg);
}
/* //[2026-09-01 KEJ] [WPM-15817] 추가 */

.section-tax-refunds .tax-contents .box-btn-area .btn-box-icon {
  display:flex;
  align-items: center;
  position:relative;
  height:4.8rem;
  padding:0 1.6rem;
  font-weight:700;
  font-size:1.5rem;
  color:#fff;
  border-radius:1rem;
}
.section-tax-refunds .tax-contents .box-btn-area .btn-box-icon:after {
  content:"";
  position:absolute;
  top:calc(50% - 0.6rem);
  right:1.6rem;
  width:1.2rem;
  height:1.2rem;
  background:url(/images/contents/tax/ico_arr_up_w.png) 50% 50% no-repeat;
  background-size:1.2rem auto;
  transform: rotate(90deg);
}
.section-tax-refunds .tax-contents .box-btn-area .btn-box-icon.house {
  background-color:#5985fe;
}
.section-tax-refunds .tax-contents .box-btn-area .btn-box-icon.money {
  background-color:#a97bff;
}
.section-tax-refunds .tax-contents .box-btn-area .btn-box-icon.refund {
  background-color:#9362ff;
}
.section-tax-refunds .tax-contents .box-btn-area .btn-box-icon span {
  display:inline-block;
  line-height:2.4rem;
  padding-left:3rem;
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size:2.4rem auto;
}
.section-tax-refunds .tax-contents .box-btn-area .btn-box-icon.house span {
  background-image:url(/images/contents/tax/ico-tax-house.png);
}
.section-tax-refunds .tax-contents .box-btn-area .btn-box-icon.money span {
  background-image:url(/images/contents/tax/ico-tax-money.png);
}
.section-tax-refunds .tax-contents .box-btn-area .btn-box-icon.refund span {
  background-image:url(/images/contents/tax/ico-tax-refund.png);
}
.section-tax-refunds .share-contents {
  position:relative;
  /* display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height:9.4rem;
  padding:1rem 2.4rem 0; */
}
.section-tax-refunds .share-contents:before {
  content:"";
  position:absolute;
  top:0;
  right:2.4rem;
  left:2.4rem;
  height:1px;
  background-color:#eee;
}
/* 
.section-tax-refunds .share-contents .txt {
  display:flex;
  flex-direction: column;
  gap:2px;
}
.section-tax-refunds .share-contents .txt strong {
  line-height:2.4rem;
  font-weight:700;
  font-size:1.8rem;
}
.section-tax-refunds .share-contents .txt p {
  font-weight:500;
  font-size:1.5rem;
}
.section-tax-refunds .share-contents .btn-share {
  display:flex;
  align-items: center;
  justify-content: center;
  height:3rem;
  padding:0 0.8rem;
  font-weight:500;
  font-size:1.4rem;
  color:#5985fe;
  border:1px solid #5985fe;
  border-radius:0.6rem;
}
.section-tax-refunds .share-contents .btn-share span {
  display:inline-block;
  line-height:1.8rem;
  padding-left:1.7rem;
  background:url(/images/contents/tax/ico-share.png) 0 50% no-repeat;
  background-size:1.3rem auto;
} */
.section-tax-refunds .use-notice-area {
  margin-top:0;
  background-color:#f6f7f8;
}
.section-tax-refunds .use-notice-area.pb25 {
  padding-bottom:2.5rem;
}
.section-tax-refunds .use-notice-opener {
  padding:0 2.4rem 0 4.7rem;
  height:4.8rem;
  font-weight:400;
  font-size:1.3rem;
  background-position: 2.4rem 50%;
}
.section-tax-refunds .use-notice-contents {
  padding:0 2.4rem;
}
.section-tax-refunds .use-notice-contents .info-item {
  line-height:1.5;
  font-weight:300;
  font-size:1.2rem;
}
.section-tax-refunds .use-notice-contents::before {
  display:none;
}
.section-tax-refunds .use-notice-opener.js-ui-accordion__opener::after {
  width:1.2rem;
  height:1.2rem;
  margin-right:0;
  vertical-align: middle;
  background-image: url(/images/contents/tax/ico_arr_down.png);
  background-size:12px auto;
}
.popup-check-estate .ui-layer__head .header {
  padding:2.8rem 2.4rem 1.6rem;
}
.popup-check-estate .header__title {
  font-size:2rem;
}
.popup-check-estate .ui-layer__foot .ui-buttons {
  padding-top:1.2rem;
}
.popup-check-estate .ui-layer__body-inner {
  padding-top:0;
 padding-bottom:1.2rem;
}
.popup-check-estate .layer-contents ul {
  padding-top:17.2rem;
  background:url(/images/contents/tax/bg-real-estate.png) 50% 0 no-repeat;
  background-size:16.4rem auto;
}
.popup-check-estate .layer-contents ul li {
  position:relative;
  padding-left:0.9rem;
  font-size:1.4rem;
  color:#666;
}
.popup-check-estate .layer-contents ul li:before {
  content:"";
  position:absolute;
  top:0.8rem;
  left:0;
  width:3px;
  height:3px;
  line-height:1.5;
  border-radius:100%;
  background-color:#666;
}
/* //[2025-08-01 oh] 11966-211560759 세금환급 서비스 페이지 제작 */
/* [2025-08-18 jy] [WPM-12155] 자동차 금융 화면 개선 */
.guide-info-list.btw .guide-info-item {
  justify-content: space-between;
}
.guide-info-list.btw .guide-info-item.align-top {
  align-items: flex-start;
}
.guide-info-list.btw .guide-info-item > strong {
  flex: 1;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2.0rem;
  text-align: left;
}
.guide-info-list.btw .guide-info-item > span {
  /* flex: 1; */
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.8rem;
  text-align: right;
}
.guide-info-list.btw .guide-info-item > span > em {
  font-style: normal;
  font-size: 2.0rem;
  font-weight: 700;
  line-height: 2.7rem;
}
.guide-info-list.btw .guide-info-item .ui-arrow-change {
  margin: 5px 5px 0 5px;
}
.guide-info-list.btw + .info-list {
  margin-top: 15px;
  color: var(--gray-70);
}

.page-auto .page-title {
  margin-bottom: 0;
}
.page-auto .page-info {
  margin-top: 16px;
}
.page-auto .section-title {
  margin-bottom: 16px;
}

.page-auto .ui-radio-block.type-tab {
  margin-right: 8px;
}
.page-auto .ui-radio-block.type-tab .ui-label {
  background-color: #fff;
  color: #444;
  border: 1px solid #444;
}
.page-auto .ui-radio-block.type-tab .ui-label.js-tabpanel-active {
  background-color: #444;
  color: #fff;
}
.page-auto .info-table-area > p {
  margin-top: 16px;
}
.page-auto .info-table.percent thead th {
  padding: 17px 2px;
}
.page-auto .info-table.percent tbody td {
  padding: 13px 2px;
}
.page-auto .info-table th {
  font-size: 1.3rem !important;
  font-weight: 300 !important;
}
.page-auto .info-table td, 
.page-auto .info-table .info-item {
  font-size: 1.3rem !important;
  font-weight: 400 !important;
}
.page-auto .info-table .info-list {
  color: var(--basic);
  font-size: 1.3rem;
}
.page-auto .info-table .ui-basic-button {
  max-width: 98px;
  min-height: 27px;
  margin-top: 6px;
  font-size: 1.2rem;
  line-height: 1.5rem;
  font-weight: 400;
}
.page-auto .benefit-type-discription {
  margin-top: 8px;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.8rem;
}
.page-auto .benefit-type-discription + .benefit-type-text {
  margin-top: 12px;
}
.page-auto .benefit-type-text {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 2.3rem;
}
.page-auto .benefit-type-text .color-point {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.8rem;
}
.page-auto .ic-calcultor {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 15px;
  background: url(../images/illustration/ic-calculator.png) no-repeat center;
  background-size: 32px;
}
/*// [2025-08-18 jy] [WPM-12155] 자동차 금융 화면 개선 */

/* [2025-09-11 KEJ] [WPM-12455] 추가 */
.wcms-section-group.new-loan .type-fixed{
  position: fixed !important;
}
/* //[2025-09-11 KEJ] [WPM-12455] 추가 */

/* [2025-09-25 KEJ] [WPM-12487] 추가 */
.ap-box{
  display: flex;
  justify-content: center;
}
.ap-box a{
  font-size: 1.4rem;
  line-height: 3rem;
  font-weight: 400;
  color: #536067;
}
.ap-box a + a::before{
  position: relative;
  content: '';
  top: 0;
  left: 0;
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-right: 12px;
  margin-left: 12px;
  background: #536067;
}

.pop-contents .type-dot,
.pop-contents .type-dash {
    position: relative;
    padding-left: 8px;
}
.pop-contents .type-dot::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 2px;
    height: 2px;
    background: #888;
}
.pop-contents .type-dash::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 3px;
    height: 1px;
    background: #888;
}
/* //[2025-09-25 KEJ] [WPM-12487] 추가 */

/* [WPM-12233] 카드 자동납부 */
.page-card-payment .date {
  color: #444;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.7rem;
}
.page-card-payment .date + * {
  margin-top: 16px;
}
.page-card-payment .section-title .title > span {
  display: inline-block;
  margin-right: 4px;
}
.page-card-payment .card-list-area + .section-title {
  margin-top: 40px;
}
.page-card-payment .card-list > li {
  margin-top: 20px !important;
}
.page-card-payment .card-list .card-info-group.type-has-opener {
  padding-right: 28px;
}
.page-card-payment .card-list .card-layer-contents .ui-arrow > span {
  padding-right: 2px;
}
.page-card-payment .form-detail.type-box {
  padding: 0 20px;
}
.page-card-payment .form-detail.type-box + .form-detail.type-box {
  margin-top: 10px;
}
.page-card-payment .form-detail.type-box .form-detail-item {
  margin-top: 0 !important;
  padding: 20px 0;
}
.page-card-payment .form-detail.type-box .form-detail-list + .form-detail-list {
  border-top: 1px solid var(--gray-30);  
}
.page-card-payment .form-detail-list {
  font-weight: 400;
}
.page-card-payment .form-detail-title {
  padding-right: 16px;
  color: var(--gray-70);
}
.page-card-payment .page-title-tooltip > img {
  width: 199px;
  height: 42px;
}
.page-card-payment .usage-list .js-ui-accordion__item {
  margin-top: 16px;
  box-shadow: 0 0 0 1px #e5e5e5;
  border-radius: 15px;
  transition: box-shadow 0.5s;
  overflow: hidden;
}
.page-card-payment .usage-list .js-ui-accordion__item.js-accordion-opened {
  box-shadow: 0 0 0 2px #00a49d;
}
.page-card-payment .usage-list .js-ui-accordion__opener {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 40px 16px 20px;
  background-color: #f8f8f8;
  font-size: 1.7rem;
  line-height: 2.2rem;
}
.page-card-payment .usage-list .js-ui-accordion__opener:after {
  right: 20px;
}
.page-card-payment .usage-list .js-ui-accordion__opener:disabled {
  cursor: default;
}
.page-card-payment .usage-list .js-ui-accordion__opener:disabled::after {
  content: none;
}
.page-card-payment .usage-list .usage-accordion-data-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-right: 8px;
}
.page-card-payment .usage-list + .ui-arrow {
  margin-top: 16px;
  margin-left: auto;
}
.page-card-payment .usage-list .usage-detail {
  padding: 25px 20px 20px 20px;
}
.page-card-payment .usage-list .usage-detail .logo-image {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 8px;
}
.page-card-payment .usage-list .usage-detail .logo-image-inner::before, 
.page-card-payment .usage-list .usage-detail .logo-image-inner img {
  border-radius: 6px;
}
.page-card-payment .usage-detail > li + li {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e5e5e5;
}
.page-card-payment .usage-detail .card-block {
  display: flex;
  align-items: center;
  width: 100%;
}
.page-card-payment .usage-detail .card-info-group {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page-card-payment .usage-detail .card-info {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2.0rem;
}
.page-card-payment .usage-detail .form-detail-item {
  margin-top: 16px;
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.page-card-payment .usage-detail .form-detail-title {
  color: #222;
}
.page-card-payment .usage-detail .usage-history-top {
  padding: 20px 15px 16px 15px;
}
.page-card-payment .usage-detail .usage-history-body {
  padding: 0px 15px 20px 15px;
}
.page-card-payment .usage-detail.usage-history-block .logo-image {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-right: 10px;
}
.page-card-payment .usage-detail.usage-history-block .logo-image-inner::before, 
.page-card-payment .usage-detail.usage-history-block .logo-image-inner img {
  border-radius: 8px;
}
.layer-card-payment .ui-layer__head .header {
  padding-bottom: 17px;
}
.layer-card-payment .ui-layer__body-inner {
  padding: 0;
}
.layer-card-payment .ui-tab-panel {
  padding: 24px;
}
.card-payment-list > li:first-of-type {
  margin-top: 0;
}
.card-payment-list > li {
  display: flex;
  align-items: center;
  margin-top: 26px;
}
.card-payment-list .usage-accordion-data-icon {
  margin-right: 10px;
}
.card-payment-list .txt {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2.0rem;
  color: #111;
}
.card-payment-list.type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}
.card-payment-list.type-grid > li {
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  margin-top: 0;
  padding: 15px 0;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
}
.icon-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding: 25px 13px;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
}
.icon-box .icon-box-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.icon-box .icon-box-inner + .icon-box-inner::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  width: 1px;
  height: 120px;
  background-color: var(--gray-30);
}
.icon-box.arrow .icon-box-inner + .icon-box-inner::before {
  width: 20px;
  height: 20px;
  background: url(../images/icon/img-arrow-rt.svg) no-repeat center;
  background-size: contain;
}
.icon-box * + .icon {
  margin-top: 16px;
} 
.icon-box .icon {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
}
.icon-box .icon > * {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
}
.icon-box strong + span {
  margin-top: 6px;
}
.icon-box .txt {
  display: block;
  font-size: 1.5rem;
  line-height: 2.0rem;
}
.icon-box .num {
  display: block;
  margin-top: 6px;
  color: var(--gray-70);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.9rem;
}
.page-completion {
  padding-top: 56px;
}
.page-completion .page-title {
  position: relative;
  padding: 104px 12px 0 12px;
  font-size: 2.0rem;
  font-weight: 500;
  line-height: 150%;
  text-align: center;
}
.page-completion .page-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  background: url(../images/icon/ic-page-complete.svg) no-repeat center;
  width: 54px;
  height: 54px;
  margin: 0 auto;
}
.page-completion.error > h2::before {
  background-image: url(../images/icon/ic-page-warning.svg);
}
.page-completion.fail > h2::before {
  background-image: url(../images/icon/ic-page-fail.svg);
}
.page-completion .form-detail.type-line {
  margin-top: 35px;
  padding-top: 15px;
}

/* [2025-09-30 kho] [WPM-12663] 강조 단어 스타일 추가 */
.info-list.type-text-large .point-word {
  color: var(--wrong) !important;
  font-weight: 700;
  font-size: 1.8rem;
}

/* [2025-11-12 KEJ] [WPM-12928] 추가 */
.double-charge-guide{
  width: 100%;
  height: auto;
  padding: 2rem 2rem 2.2rem;
  box-sizing: border-box;
  background: #f4f6f8;
  border-radius: 1.5rem;
}
.double-charge-guide .sum-guide{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
}
.double-charge-guide .sum-guide li{
  white-space: nowrap;
}
.double-charge-guide .guide-text{
  color: var(--gray-80);
}
/* 2025-11-14 [WPM-12918] 파일 첨부 추가 */
.select-btn-list > li > a {
  position: relative;
  display: block;
  padding: 19px 20px 19px 44px;
  font-size: 1.5rem;
  font-weight: 400;
}
.select-btn-list > li > a > img {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
}
.select-btn-list > li > a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: url(../images/common/btn-more-s.svg) no-repeat center;
  background-size: 12px;
}
.input-file-wrap .input-file-details {
  margin-top: 26px;
}
.input-file-wrap .input-file-list {
  margin-top: 15px;
  padding: 20px 16px;
  background-color: #f8f8f8;
  border-radius: 6px;
}
.input-file-wrap .input-file-list > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.input-file-wrap .input-file-list > li + li {
  margin-top: 24px;
}
.input-file-wrap .input-file-list .file-info {
  display: flex;
  align-items: center;
  width: calc(100% - 56px);
  white-space: nowrap;
  font-size: 1.5rem;
  line-height: 1.334;
}
.input-file-wrap .input-file-list .file-name {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.input-file-wrap .input-file-list .btn-delete {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(../images/icon/ic-delete-gray.svg) no-repeat center;
  background-size: 16px;
}
.input-file-wrap .ui-invalid {
  padding-left: 0;
}
.input-file-wrap .is-invalid .ui-input {
  border-color: var(--gray-30);
}
.input-file-wrap .form-item .ui-input-block .ui-input[readonly] {
  color: #c4c4c4;
  -webkit-text-fill-color: #c4c4c4;
}
.input-file-wrap .form-item .ui-input-block .ui-input.upload {
  color: var(--basic);
  -webkit-text-fill-color: var(--basic);
}
.input-file-wrap .form-item .ui-input-block .ui-input.complete {
  color: var(--gray-80);
  -webkit-text-fill-color: var(--gray-80);
}
.input-file-wrap .form-item .ui-button.ui-basic-button:disabled {
  color: var(--gray-80);
  background-color: var(--gray-30);
}

/* [2025-11-17 KEJ] 추가 */
.automatic-use-step-opener::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 0;
  display: block;
  width: 15px;
  height: 15px;
  margin-top: -7px;
  background: url("../images/common/ic-select-arrow.png") no-repeat 50% 50% / 100% auto;
}
.automatic-use-content .form-detail.type-line{
  padding-top: 35px;
}
.automatic-use-content .form-detail-item{
  margin-top: 25px;
}
.automatic-use-content .form-detail-title,
.automatic-use-content .form-detail-group{
  letter-spacing: -0.75px;
}
.automatic-use-content .form-detail-title{
  padding-right: 24px;

}

/* [2025-11-28 KEJ] [WPM-13166] 추가 */
.subscribe-contents {
  padding: 1.6rem 2.4rem 2.8rem;
}
.subscribe-contents .subscribe-visual {
  width: 100%;
  min-height: 148px;
  background: url("/images/subscribe/shopping-premium_visual.png") no-repeat center center / contain;
}
.subscribe-contents .subscribe-shoppingcare-visual {
  width: 100%;
  min-height: 148px;
  background: url("/images/subscribe/shoppingcare_visual.png") no-repeat center center / contain;
}
.subscribe-contents .subscribe-smartdc-visual {
  width: 100%;
  min-height: 148px;
  background: url("/images/subscribe/smart_dc_visual.png") no-repeat center center / contain;
}
.subscribe-contents .subscribe-coffee-visual {
  width: 100%;
  min-height: 148px;
  background: url("/images/subscribe/coffee-subscribe-visual.png") no-repeat center center / contain;
}
.subscribe-contents .subscribe-daily-visual {
  width: 100%;
  min-height: 148px;
  background: url("/images/subscribe/daily-plus-visual.png") no-repeat center center / contain;
}
.subscribe-contents .subscribe-autocare-visual {
  width: 100%;
  min-height: 148px;
  background: url("/images/subscribe/autocare-visual.png") no-repeat center center / contain;
}
.subscribe-contents .subscribe-mksubs2010-visual {
  width: 100%;
  min-height: 148px;
  background: url("/images/subscribe/MKSUBS2010_visual.png") no-repeat center center / contain;
}
.subscribe-contents .subscribe-mksubs10100-visual {
  width: 100%;
  min-height: 148px;
  background: url("/images/subscribe/MKSUBS10100_visual.png") no-repeat center center / contain;
}
.subscribe-contents .subscribe-mksubs10200-visual {
  width: 100%;
  min-height: 148px;
  background: url("/images/subscribe/MKSUBS10200_visual.png") no-repeat center center / contain;
}
.subscribe-contents .subscribe-mksubs8010-visual {
  width: 100%;
  min-height: 148px;
  background: url("/images/subscribe/MKSUBS8010_visual.png") no-repeat center center / contain;
}
.subscribe-contents .subscribe-mksubs6300-visual {
  width: 100%;
  min-height: 148px;
  background: url("/images/subscribe/MKSUBS6300_visual.png") no-repeat center center / contain;
}
.subscribe-contents .subscribe-mksubs14000-visual {
  width: 100%;
  min-height: 148px;
  background: url("/images/subscribe/mksubs14000-visual.png") no-repeat center center / contain;
}
.subscribe-contents .subscribe-mksubs15000-visual {
  width: 100%;
  min-height: 148px;
  background: url("/images/subscribe/mksubs15000-visual.png") no-repeat center center / contain;
}
.subscribe-contents .subscribe-mksubs3010-visual {
  width: 100%;
  min-height: 148px;
  background: url("/images/subscribe/mksubs3010-visual.png") no-repeat center center / contain;
}
.subscribe-contents .phishingcare_plus_visual {
  width: 100%;
  min-height: 148px;
  background: url("/images/subscribe/phishingcare_plus_visual.png") no-repeat center center / contain;
}
.subscribe-contents .page-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
}
.subscribe-contents .sub-title {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 2.6rem;
}
.subscribe-contents .subscribe-list {
  width: 100%;
  height: auto;
  padding: 3.2rem 2rem 3.2rem 1.8rem;
  box-sizing: border-box;
  border-radius: 1.6rem;
  background: #f4f6f8;
}
.subscribe-contents .subscribe-list .js-ui-accordion__item,
.subscribe-contents .subscribe-service-list .js-ui-accordion__item {
  position: relative;
  padding: 2rem 0;
  box-sizing: border-box;
}
.subscribe-contents .subscribe-service-list .js-ui-accordion__item::before {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #e5e5e5;
}
.subscribe-service-list .js-ui-accordion__item:last-of-type:before {
  display: none;
}
.subscribe-contents .subscribe-list .js-ui-accordion__item .js-ui-accordion__opener,
.subscribe-contents .subscribe-list .js-ui-accordion__item.none_item{
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding-right: 2.4rem;
}
.subscribe-contents .subscribe-list .js-ui-accordion__item .js-ui-accordion__opener::after,
.subscribe-main .js-ui-accordion__item .js-ui-accordion__opener::after {
  width: 2.4rem;
  height: 2.4rem;
  background: url("/images/icon/arrow-down-bk.png") no-repeat 100% 50% / 100% auto;
  top: 1rem;
}
.subscribe-contents .subscribe-list .js-ui-accordion__item img {
  width: 3.2rem;
  height: 3.2rem;
}
.subscribe-contents .subscribe-list .js-ui-accordion__item .opener-title,
.subscribe-contents .subscribe-service-list .js-ui-accordion__item .opener-title {
  font-size: 1.6rem;
  line-height: 2.2rem;
  font-weight: 700;
}
.subscribe-contents .subscribe-list .js-ui-accordion__item:first-child {
  padding: 0 0 2rem 0;
}
.subscribe-contents .subscribe-list .js-ui-accordion__item:last-child {
  padding: 2rem 0 0 0;
}
.subscribe-contents .subscribe-list .js-ui-accordion__item::before {
  position: absolute;
  width: calc(100% - 40px);
  height: 1px;
  content: "";
  top: 0;
  right: 0;
  background: #e2e9f1;
}
.subscribe-contents .subscribe-list .js-ui-accordion__item:first-child::before {
  display: none;
}
.subscribe-contents .subscribe-list .subscribe-list-contents {
  padding-left: 3.8rem;
  margin-top: 0.8rem;
}
.subscribe-contents .subscribe-list .subscribe-list-contents .title-text{
  padding-left: 0.8rem;
  margin-top: 0.8rem;
  margin-bottom: 0.4rem;
}
.subscribe-contents .subscribe-list .subscribe-list-contents .d-flex-title{
  display: flex;
  align-items: center;
}
.subscribe-contents .subscribe-list .subscribe-list-contents .d-flex-title .pcp-compare-pop-btn{
  margin-left: 0.4rem;
  margin-bottom: 0.2rem;
}
.subscribe-contents .subscribe-list .info-item {
  line-height: 2.2rem;
}
.subscribe-contents .subscribe-list .info-item + .info-item {
  margin-top: 0.2rem;
}
.subscribe-service-list .subscribe-service-contents {
  margin-top: 2rem;
}
.subscribe-service-list .subscribe-service-contents > .info-list {
  margin-top: 1.6rem !important;
}
.subscribe-service-list .subscribe-service-contents > .info-list .info-list,
.subscribe-service-list .subscribe-service-content .info-item + .info-item {
  margin-top: 0.8rem;
}
.subscribe-service-list .subscribe-service-contents > .info-list .title-text {
  margin-bottom: 0.8rem;
}
.subscribe-service-list .ui-arrow {
  padding-left: 0.7rem;
  margin-top: 0.8rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: #666;
}
.subscribe-service-list .ui-arrow::after {
  background: url("/images/icon/arrow_r_grey_999.png") no-repeat center / contain;
  width: 1.2rem;
  height: 1rem;
  margin-left: 0.4rem;
}
.subscribe-service-list .js-ui-accordion__opener::after {
  position: relative;
  left: 1rem;
  top: 0;
}
.subscribe-contents .js-ui-accordion__layer.type-line::before {
  position: relative;
  display: block;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  margin-top: 2rem;
  background: #e5e5e5;
}
.subscribe-contents .bd-box{
  width: 100%;
  height: auto;
  padding: 2.4rem 2rem 2.4rem 2.4rem;
  box-sizing: border-box;
  border-radius: 1.2rem;
  border: 1px solid #e5e5e5;
}
.subscribe-contents .bd-box .title{
  font-size: 1.6rem;
 line-height: 2.2rem;
 font-weight: 700;
}
.subscribe-contents .bd-box .title-text + .title-text{
  margin-top: 1.6rem;
}
.subscribe-contents .bd-box .title-text + .title-text::before{
  position: absolute;
  top: -8px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #f4f6f8;
}
.subscribe-contents .bd-box .title-text{
 position: relative;
  display: flex;
  justify-content: space-between;
  color: #25374c;
}
.subscribe-contents .bd-box .title-text span{
  color: #141e29;
}

.subscribe-content .ui-radio-block.type-box .ui-label{
  padding: 1.4rem 0;
}
.subscribe-content .ui-radio-block.type-box .ui-label-text{
  font-size: 1.3rem;
  line-height: 2rem;
}
.subscribe-notice .info-list{
  padding: 1.6rem; box-sizing: border-box; background: #f5f5f5; border-radius: 1.6rem;
}
.subscribe-notice .info-item + .info-item{
  margin-top: 0;
}
.subscribe-ui.ui-xs-btn{
  padding: 0 1.2rem;
  box-sizing: border-box;
  font-size: 1.2rem;
  line-height: 2.8rem;
  font-weight: 700;
  border: 1px solid #e5e5e5;
  border-radius: 0.4rem;
}

.subscribe-banner .subscribe-banner-con{
  /* position: relative; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 8rem;
  /* padding: 0 2rem 0 2.4rem; */
  padding: 0 0 0 2rem;
  box-sizing: border-box;
  margin-top: 3.2rem;
  border-radius: 1rem;
}
.subscribe-banner .subscribe-banner-con .tit{
  margin-top: 0.2rem;
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 700;
}
.subscribe-banner .subscribe-banner-con .ico{
  /* position: absolute;
  right: 2rem;
  bottom: 0; */
  width: auto;
  height: 8rem;
}
/* //[2025-11-28 KEJ] [WPM-13166] 추가 */

/* [2025-12-04 KEJ] [WPM-12900] 추가 */
.subscribe-main {
  padding-bottom: 4.4rem;
}
.subscribe-main .ui-page-scroll-tap .tab-list {
  gap: 0.8rem;
  padding: 1.6rem 2rem;
}
.subscribe-main .ui-page-scroll-tap .tab-list .tab-list-link {
  display: flex;
  gap: 0;
  height: 3.6rem;
  padding: 0.8rem 1.3rem;
  border: none;
  background: #f4f6f8;
  font-size: 1.4rem;
  font-weight: 500;
  color: #888;
}
.subscribe-main .ui-page-scroll-tap .tab-list .tab-list-link.is-active {
  font-weight: 700;
  border-color: var(--basic);
  background-color: var(--basic);
  color: #ffffff;
}
.subscribe-main .section-tab-scroll {
  margin-top: 1.4rem;
  padding: 0 2.4rem 1.8rem;
}
/* .subscribe-main .section-tab-scroll.pd-lr-16{
  padding: 0 1.6rem 3.2rem;
}
.subscribe-main .section-tab-scroll.pd-lr-16 .section-title{
  padding-left: 0.8rem;
}
.subscribe-main .section-tab-scroll.pd-lr-16 .benefit-contents-box::after{
  width: 95.125%;
} */

.subscribe-main .section-tab-scroll + .section-tab-scroll{
  margin-top: 1.4rem;
}

.subscribe-main .section-title {
  margin-bottom: 0;
  font-size: 1.6rem;
  line-height: 2.2rem;
  font-weight: 700;
  /* padding-left: 0.4rem; */
}
.subscribe-main .benefit-contents-box {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 0;
  padding: 2rem 0;
  border-radius: 0;
}
.subscribe-main .benefit-contents-box + .benefit-contents-box{
  margin-top: 0;
}
.subscribe-main .benefit-contents-box.type2 {
  padding: 2rem 0;
}
.subscribe-main .benefit-contents-box:first-of-type {
  padding-top: 2.2rem;
}
.subscribe-main .benefit-contents-box:last-of-type {
  padding-bottom: 0;
}
.subscribe-main .benefit-contents-box .txt-box {
  position: relative;
  display: flex;
  min-width: 0;
  gap: 1rem;
  padding-right: 2.4rem;
  margin: 0;
  font-size: 1.8rem;
  line-height: 2.6rem;
  font-weight: 500;
}
.subscribe-main .benefit-contents-box .txt-box::after {
  position: absolute;
  display: inline-block;
  content: "";
  top: 1.4rem;
  right: 0;
  width: 2.4rem;
  height: 2.4rem;
  background: url("/images/icon/arrow_r_grey_999.png") no-repeat center / 12px;
}
.subscribe-main .benefit-contents-box .txt-box.type2::after {
  top: 0;
  right: 0;
}
.subscribe-main .benefit-contents-box .txt-box.type2 .sub-txt{
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 500;
  color:#666;
}
.subscribe-main .benefit-contents-box::after {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1px;
  content: "";
  background: #f5f5f5;
}
.subscribe-main .benefit-contents-box:last-of-type:after {
  display: none;
}
.subscribe-main .benefit-contents-box .flag-box {
  margin-top: 1rem;
  align-items: center;
  gap: 0.6rem;
  row-gap: 0.4rem;
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 500;
  color: var(--gray-80);
}
.subscribe-main .benefit-contents-box .flag-box span {
  padding: 0 0.65rem;
  margin: 0;
  box-sizing: border-box;
  border-radius: 2rem;
  font-size: 1rem;
  line-height: 2rem;
  font-weight: 700;
}
.subscribe-main .benefit-contents-box .flag-box .item--tight{
  margin-left: -2px;
}
.subscribe-main .flag-box .w100 {
  width: 100%;
}
.subscribe-main .txt-box .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 5.2rem;
  height: 5.2rem;
  background: #f4f6f8;
  border-radius: 2.6rem;
}
.subscribe-main .txt-box .icon img {
  width: 3.6rem;
  height: auto;
}
.subscribe-main .benefit-contents-box.type-line{
  position: relative;
  border-radius: 1.6rem;
  overflow: hidden;
  padding: 2.4rem 1rem;
  margin: 2.2rem -1rem 1.2rem;
}
.subscribe-main .benefit-contents-box.type-line::after{
  display: none;
}
.subscribe-main .benefit-contents-box.type-line::before{
  content: "";
  position: absolute;
  inset: 0px;
  border: 2px solid transparent;
  padding: 0;
  border-radius: 1.6rem;
  background: linear-gradient(#fff, #fff), conic-gradient(from var(--rotate), #78d9bb 0%, #76b7c6 15%, #700dff 40%, #e01cfe 70%, #76b7c6 90%, #78d9bb 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% {
    --rotate : 0deg;
  }
  to {
    --rotate : 360deg;
  }
}
@property --rotate {
  syntax: "<angle>";
  initial-value: 135deg;
  inherits: false;
}
.subscribe-main .txt-box .icon.ico-auto {
  background-image: url("/images/subscribe/ic-auto-01.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 3.6rem;
  flex-shrink: 0;
}
.subscribe-main .bg-best {
  background: #fee7ec;
  color: #be113f;
}
.subscribe-main .bg-new {
  background: #e2faff;
  color: #02809c;
}
.subscribe-main .bg-hot {
  background: #ffedbb;
  color: #c65300; /* [2026-07-09 KEJ] 접근성 수정 */
}
.subscribe-main .js-ui-accordion__item .js-ui-accordion__opener::after {
  width: 2.4rem;
  height: 2.4rem;
  background: url("/images/icon/arrow-down-bk.png") no-repeat 100% 50% / 100% auto;
  top: 0.4rem;
}
.subscribe-main .subscribe-service-end{
  position: relative;
  padding: 3.8rem 2.4rem;
}
.subscribe-main .subscribe-service-end::before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  background: #f5f5f5;
}
.subscribe-main .subscribe-service-end::after{
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  background: #f5f5f5;
}
/* //[2025-12-04 KEJ] [WPM-12900] 추가 */

/* [WPM-13247] 영문페이지 eng */
.eng .btn-filter {
  width: 100%;
  text-align: left;
}
.eng .btn-filter .ui-button-filter {
  width: auto;
  text-align: left;
}
.eng .check-range.type-border-none .ui-button-down {
  display: flex;
  align-items: center;
  text-align: left;
}
.eng .check-range.type-border-none .ui-button-down .card-image {
  width: 40px;
  margin-right: 20px;
}
.eng .form-detail-title {
  padding-right: 10px;
}
@media (max-width: 360px) {
  .eng .form-detail-title {
    max-width: 50%;
    word-break: keep-all;
  }
  .eng .usage-total-title {
    font-size: 14px;
    white-space: normal;
  }
  .eng .usage-total-value {
    font-size: 16px;
    white-space: nowrap;
  }
}
/* 2026-02-25 */
/* .eng .global-card-brand.type-medium {
  width: auto;
} */
.eng .global-card-brand.type-medium {
  display: inline-block;
  width: auto;
  height: 40px;
}
.eng .global-card-brand.type-medium > img {
  width: auto;
  height: 40px;
  object-fit: contain;
}
.eng .my-card-fix.slide-card.is-scroll .global-card-brand.type-medium > img {
  height: 32px;
}
/* // 2026-02-25 */
.eng .slide-card-pagination .swiper-object {
  width: auto;
}
.eng .usage-default-etc-item::before {
  margin-top: -4px;
}
.eng .global-card-text {
  display: flex;
  align-items: center;
  max-height: 4rem;
  overflow-y: hidden;
}
.eng .global-card-text .global-card-arrow {
  flex: 0 0 10px;
}
.eng .card-flex .basic-text.js-slide-card-label,
.eng .global-card-name {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.eng .menu-link-item .form-flex-cell {
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.eng .menu-link-item .default-text {
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 0;
  text-align: right;
}
/* // [WPM-13247] 영문페이지 eng */

/* [WPM-13324] 트래블 버킷 전월실적 확인하기 */
/* 모바일 */
.contents-wrap.page-trvb, 
.contents-wrap.page-trvb *, 
.contents-wrap.page-trvb *::before,
.contents-wrap.page-trvb *::after {
  box-sizing: border-box;
}
.contents-wrap.page-trvb {
  --trvbWidth: 32.8rem;

  padding: 0;
  text-align: center;
}
.page-trvb .page-contents {
  padding: 5.6rem 1.6rem;
  background: #F3F9FE;
}
.page-trvb .page-section {
  max-width: var(--trvbWidth);
  margin: 0 auto;
}
.page-trvb h2 {
  color: #111;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 3.2rem;
}
.page-trvb .item1 {
  display: none;
}
.page-trvb .txt {
  margin-top: 1rem;
  color: #666;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.4rem;
}
.page-trvb .item2 {
  margin: 0 auto;
  padding: 3.2rem 2rem 0;
}
.page-trvb .item2 .btn-trvb { /* .page-trvb .btn-trvb.type-gra { */ /* [2026-06-19 kho] 개발 배포 전 선택자 변경 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-block: 2.3rem;
  background-color: #111;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.4rem;
  border-radius: 2rem;
}
.page-trvb .btn-trvb-faq {
  display: inline-block;
  margin-top: 1.6rem;
  color: #111;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2.4rem;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}
.page-trvb .ic-plus {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto;
  background: url(../images/contents/trvb_icon_plus.gif) no-repeat center;
  background-size: contain;
}
.page-trvb .banner-wrap-box {
  position: relative;
}
.page-trvb .banner-wrap-box::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 4rem; 
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
  border-radius: 0 0 2.4rem 2.4rem;
  pointer-events: none;
}
.page-trvb .banner-wrap {
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  max-height: 44rem;
  margin-top: 2.4rem;

  border-radius: 2.4rem;
  background-color: #fff;
  box-shadow: 0 3rem 10rem 1rem rgba(0, 73, 136, 0.1);

  /* 스크롤바 숨기기 */
  -ms-overflow-style: none;  /* IE, Edge */
  scrollbar-width: none;     /* Firefox */
}
.page-trvb .banner-wrap::-webkit-scrollbar {
  display: none;
}
/* .page-trvb .banner-wrap .swiper-wrapper {
  align-items: center;
}
.page-trvb .banner-wrap .swiper-slide {
  height: auto;
} */
.page-trvb .banner-wrap ul {
  padding: 1.2rem 1.6rem;
  box-sizing: border-box;
}
.page-trvb .banner-wrap ul > li {
  position: relative;
  padding-block: 1.2rem;
}
.page-trvb .banner-wrap ul > li + li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1.6rem;
  right: 1.6rem;
  height: 1px;
  background-color: #eee;
}
/* .page-trvb .banner-wrap.swiper-pointer-events::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 6.4rem;
  background: linear-gradient(transparent 0%, #fff 100%);
} */
.page-trvb .banner-wrap a {
  display: block;
}
.page-trvb img {
  width: 100%;
  max-width: 100%;
}
.page-trvb .page-footer {
  display: flex;
  align-items: center;
  height: 10.6rem;
  padding-inline: 24px;
  background-color: #000;
  z-index: 3;
}
.page-trvb .footer-contents {
  display: flex;
  flex-direction: column;
}
.page-trvb .footer-contents > img {
  width: 84px;
}
.page-trvb .footer-contents > ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 30rem;
  margin-top: 1.2rem;
  color: #fff;
  font-size: 1.3rem;
  line-height: 2rem;
}
.page-trvb .footer-contents > ul > li {
  --mgL : 1.6rem;
  position: relative;
}
.page-trvb .footer-contents > ul > li + li {
  margin-left: var(--mgL);
}
.page-trvb .footer-contents > ul > li + li::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(var(--mgL) / 2 * -1);
  transform: translateY(-50%);
  width: 1px;
  height: 10px;
  background-color: #4c4c4c;
}
.page-trvb .footer-contents > ul > li:last-child {
  margin-left: 0;
}
.page-trvb .footer-contents > ul > li:last-child::before {
  background-color: transparent;
}

/* 768px 이상 */
@media (min-width: 768px) {
  .contents-wrap.page-trvb {
    --trvbWidth: 32.8rem;
  }
  .page-trvb .page-contents {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4rem;
  }
  .page-trvb .page-section-wrap {
    display: flex;
    justify-content: center;
    column-gap: 3.2rem;
  }
  .page-trvb .page-section {
    max-width: var(--trvbWidth);
    margin: unset;
  }
  .page-trvb .page-section:first-child {
    width: calc(var(--trvbWidth) - 8rem);
  }
  .page-trvb h2 {
    font-size: 2.4rem;
  }
  .page-trvb .item1 {
    display: block;
  }
  .page-trvb .item1 .qr-box {
    position: relative;
    margin-top: 2.4rem;
    padding: 2.8rem 3.6rem;
    box-shadow: 0 3rem 10rem 1rem rgba(57, 186, 255, 0.1);
    border-radius: 2.4rem;
  }
  .page-trvb .item1 .qr-box::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: url(../images/contents/trvb_img_qr_bg.png) no-repeat center;
    background-size: 100% 100%;
  }
  .page-trvb .item1 .qr-box-inner {
    position: relative;
  }
  .page-trvb .item1 .qr-box-inner > p {
    margin-bottom: 1.2rem;
    color: #111;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 2.6rem;
  }
  .page-trvb .item1 .btn-trvb.type-white {
    --borderSize: 0.4rem;

    width: 100%;
    margin-top: 1.6rem;
    padding-block: calc(2.5rem - var(--borderSize));
    background: #fff;
    color: #111;
    border: var(--borderSize) solid #d0ecff;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 2.6rem;
    border-radius: 2.4rem;
  }
  .page-trvb .txt {
    margin-top: 1.2rem;
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
  .page-trvb .item2 {
    display: none;
  }
  .page-trvb .btn-trvb-faq {
    display: inline-block;
    margin-top: 1.6rem;
    color: #111;
    font-weight: 500;
    font-size: 1.8rem;
    line-height: 2.6rem;
    text-decoration: underline;
    text-underline-offset: 0.3rem;
  }
  .page-trvb .ic-plus {
    align-self: center;
    width: 4.8rem;
    height: 4.8rem;
    margin: unset;
  }
  .page-trvb .banner-wrap-box::after {
    height: 6.4rem;
  }
  .page-trvb .banner-wrap {
    max-height: 49rem;
  }
  .page-trvb .banner-wrap ul {
    padding: 0.8rem 1.6rem;
  }
  .page-trvb .banner-wrap ul > li {
    padding-block: 1.6rem;
  }
  /* .page-trvb .banner-wrap ul > li:first-child {
    padding-top: 1.2rem;
  }
  .page-trvb .banner-wrap ul > li:last-child {
    padding-bottom: 1.2rem;
  } */
  .page-trvb .page-footer {
    height: 6.4rem;
    padding-inline: 4rem;
  }
  .page-trvb .page-footer footer {
    width: 100%;
  }
  .page-trvb .footer-contents {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .page-trvb .footer-contents > img {
    width: 9.6rem;
    height: 1.6rem;
  }
  .page-trvb .footer-contents > ul {
    width: auto;
    max-width: unset;
    margin-top: 0;
    font-size: 1.4rem;
    line-height: 2.2rem;  
  }
  .page-trvb .footer-contents > ul > li {
    --mgL : 2.1rem;
  }
  .page-trvb .footer-contents > ul > li + li::before {
    height: 1.4rem;
  }
  .page-trvb .footer-contents > ul > li:last-child {
    margin-left: var(--mgL);
  }
  .page-trvb .footer-contents > ul > li:last-child::before {
    background-color: #4c4c4c;
  }
}

/* 1024px 이상일때 커보인다고 해서 주석처리 */
/* @media (min-width: 1024px) {
  .contents-wrap.page-trvb {
    --trvbWidth: 47.4rem;
  }
  .page-trvb .page-section-wrap {
    column-gap: 4.9rem;
  }
  .page-trvb .page-section:first-child {
    width: calc(var(--trvbWidth) - 18.2rem);
  }
  .page-trvb h2 {
    font-size: 3.2rem;
    line-height: 4.6rem;
  }
  .page-trvb .item1 .qr-box {
    margin-top: 4rem;
    padding: 3rem 4rem;
  }
  .page-trvb .item1 .qr-box-inner > p {
    margin-bottom: 1.4rem;
    font-size: 2.2rem;
    line-height: 3.2rem;
  }
  .page-trvb .item1 .btn-trvb.type-white {
    --borderSize: 0.4rem;

    margin-top: 1.8rem;
    padding-block: calc(2.6rem - var(--borderSize));
    font-size: 2.2rem;
    line-height: 3.2rem;
  }
  .page-trvb .txt {
    margin-top: 1.4rem;
    font-size: 2rem;
    line-height: 2.8rem;
  }
  .page-trvb .btn-trvb-faq {
    margin-top: 1.8rem;
    font-size: 2.2rem;
    line-height: 3.2rem;
  }
  .page-trvb .ic-plus {
    width: 5.6rem;
    height: 5.6rem;
  }
  .page-trvb .banner-wrap {
    height: 57.2rem;
    margin-top: 4rem;
  }
  .page-trvb .banner-wrap ul {
    padding: 1.6rem 5.2rem;
  }
  .page-trvb .banner-wrap ul > li {
    padding-block: 1.6rem;
  }
  .page-trvb .banner-wrap ul > li:first-child {
    padding-top: 1.6rem;
  }
  .page-trvb .banner-wrap ul > li:last-child {
    padding-bottom: 1.6rem;
  }
  .page-trvb .page-footer {
    padding: 2.4rem 5.2rem;
  }
  .page-trvb .footer-contents > img {
    width: 10.8rem;
    height: 1.8rem;
  }
  .page-trvb .footer-contents > ul {
    font-size: 1.8rem;
    line-height: 2.4rem;  
  }
  .page-trvb .footer-contents > ul > li {
    --mgL : 2.5rem;
  }
  .page-trvb .footer-contents > ul > li:last-child {
    margin-left: var(--mgL);
  }
  .page-trvb .footer-contents > ul > li:last-child::before {
    background-color: #4c4c4c;
  }
} */


/* // [WPM-13324] 트래블 버킷 전월실적 확인하기 */

/* [2026-01-15 KEJ] [WPM-13227] 추가 */
.subscribe-content .subscribe-badge {
  display: flex;
  align-items: center;
  background: #f4f6f8;
  width: fit-content;
  border-radius: 1.8rem;
  padding: 0.6rem 1.2rem;
  box-sizing: border-box;
}
.subscribe-content .subscribe-badge .badge-img {
  width: 2.4rem;
  height: auto;
  margin-right: 0.6rem;
}
.subscribe-content .subscribe-badge .title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #666;
}

/* [2026-02-03 KJH] 동의 화면에 약관 보기 버튼 크기 수정 */
.ui-select-multiple-item .ui-arrow-button {
  width: 38px;
  height: 38px;
  margin-right: unset;
  background-position: center 15px;
}
/* .ui-select-multiple-item .ui-checkbox-block {
  align-items: stretch;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
} 
.ui-select-multiple-item .ui-label {
  align-items: stretch;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
} */
.ui-checkbox-block .ui-label .ui-checkbox-object {
  margin-right: 8px;
}
.ui-checkbox-block.type-large .ui-checkbox-object {
  width: 18px;
  height: 18px;
  background: url("../images/common/ic-checkbox.svg") no-repeat 0 50%;
}
.ui-checkbox-block.type-large .ui-checkbox:checked + .ui-label .ui-checkbox-object {
  background-image: url("../images/common/ic-checkbox-c.svg");
}
.ui-checkbox-block.type-large .ui-checkbox-object + .ui-label-text {
  margin-left: unset;
}
.ui-checkbox-object + .ui-label-text {
  margin-left: unset;
}

.layer-phishing-contents.type-03 .ui-arrow-button {
  width: 38px;
  height: 38px;
  background-position: center 12px;
}

/* .ui-select-terms {
  margin: unset;
}
.ui-select-terms-list {
  margin-top: unset;
}
.ui-select-terms .ui-checkbox-block {
  align-items: stretch;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
}
.ui-select-terms .ui-checkbox-block .ui-label {
  padding: 10px 12px;
}
.ui-select-terms .ui-checkbox-block .ui-label:not(:last-child) {
  margin-right: unset;
  flex: 1;
  background-color: red;
}
.ui-select-terms-item .ui-select-terms-item::before {
  display: none;
}
.ui-select-terms .ui-checkbox-block.type-large .ui-label-text {
  line-height: 18px;
}
.ui-select-terms .ui-checkbox-block .ui-arrow:last-child {
  width: 38px;
  min-height: 38px;
  height: auto;
  margin-right: 0;
  background-color: yellowgreen;
}
.ui-select-terms-item.margin-top-18 {
  margin-top: unset !important;
}
.ui-arrow.type-black::after {
  background-position: center 4px;
} */

/* [2026-02-05 KEJ] [WPM-13820] 추가 */
.ui-checkbox-group.type-flex {
  flex-wrap: wrap;
  gap: 0.4rem;
}
.ui-checkbox-group.type-flex .type-small {
  width: calc(85% / 2 - 0.2rem);
}
.ui-checkbox-group.type-flex .type-small .ui-label {
  padding: 1rem;
  box-shadow: inset 0 0 0 1px var(--gray-60);
}
.ui-checkbox-group.type-flex .type-small .ui-label .ui-label-text {
  font-size: 1.4rem;
  line-height: 15px;
  color:var(--gray-70);
}
.ui-checkbox-group.type-flex .ui-form-check-block .checkbox:checked + .ui-label {
box-shadow: inset 0 0 0 1.5px #029c94;
background-color: #f3fbfb;
}

/* [2026-02-11 kho] [WPM-13906] 추가 */
.subscribe-main .benefit-contents-box .inline-flag {
  display: inline-flex;
  align-items: center;
  height: 1.8rem;
  margin: 0.6rem 0 0 0.4rem;
  vertical-align: top;
}
.subscribe-main .benefit-contents-box .inline-flag span {
  margin: 0;
  padding: 0 0.65rem;
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 2rem;
  letter-spacing: 0;
  font-weight: 700;
  border-radius: 2rem;
}
.subscribe-main .bg-ev {
  border: 1px solid #d9d9d9;
  color: #666;
}
/* //[2026-02-11 kho] [WPM-13906] 추가 */

/* 2026-02-27 자동차 담보대출 */
.page-car-loan img {
  width: 100%;
  max-width: 100%;
}
.page-car-loan .form-group.type-phone .ui-basic-button {
  min-width: 101px;
}
.page-car-loan .ui-input-message {
  margin-top: 8px;
  color: var(--wrong);
  font-size: 1.3rem;
  line-height: 1.7rem;
}
.page-car-loan .form-group.type-phone .ui-basic-button {
  min-width: 101px;
}
.page-car-loan .ui-input-message {
  margin-top: 8px;
  color: var(--wrong);
  font-size: 1.3rem;
  line-height: 1.7rem;
}
.page-car-loan .usage-history-top.type-link {
  display: flex;
  align-items: center;
}
.page-car-loan .usage-history-top.type-link > i {
  display: inline-block;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-right: 10px;
}
.page-car-loan .usage-history-title {
  font-weight: 700;
}
.page-car-loan .usage-history-body .form-detail-item {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2.0rem;
}
.page-car-loan .usage-history-body .form-detail-title {
  color: #222;
}
.page-car-loan .usage-history-body .form-detail-group .color-primary {
  margin-right: 4px;
}
.page-car-loan .form-list .ui-arrow {
  margin-top: 26px;
  margin-left: auto;
}
.page-car-loan .menu-banner-list {
  padding: 18px;
}
.page-car-loan .menu-banner-link {
  justify-content: center;
  min-height: 62px;
  padding: 0 16px 0 15px;
  box-sizing: border-box;
}
.page-car-loan .menu-banner-icon {
  width: 30px;
  height: 30px;
}
.ui-loading-container.my-loading-container {
  display: none;
}
.ui-loading-container.my-loading-container.active {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 101;
  background-color: #fff;
}
.ui-loading-container .my-loan-loading {
  position: relative;
  text-align: center;
}
.ui-loading-container .my-loan-loading .loading-ani {
  position: relative;
  width: 240px;
  height: 184px;
  margin: 0 auto 28px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ui-loading-container .my-loan-loading .loading-ani::before {
  content: "";
  position: absolute;
  top: 0;
  width: 184px;
  height: 184px;
  background-color: #f5f5f5;
  border-radius: 50%;
}
.ui-loading-container .my-loan-loading h2 {
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
}
.ui-loading-container .my-loan-loading .loading-ani .ani-img01 {
  position: relative;
  display: block;
  width: 110px;
  height: 93px;
  margin: 0 auto;
  z-index: 10;
  background: url("/images/contents/ani_character.png") no-repeat 0 0 / 100% auto;
  animation: ui-anistar 1s ease-out infinite;
  -webkit-animation: ui-anistar 1s ease-out infinite;
  transition: all 0.5s cubic-bezier(0, 0, 0.5, 1);
}
.ui-loading-container .my-loan-loading .loading-ani .ani-img02 {
  position: absolute;
  display: block;
  width: 52px;
  height: 33px;
  top: 68px;
  right: 0px;
  z-index: 9;
  background: url("/images/contents/cloud_large.svg") no-repeat 0 0 / 100% auto;
  animation: ui-anicloud 8s ease-out infinite;
  -webkit-animation: ui-anicloud 8s ease-out infinite;
  transition: all 0.5s cubic-bezier(0, 0, 0.5, 1);
}
.ui-loading-container .my-loan-loading .loading-ani .ani-img03 {
  position: absolute;
  display: block;
  width: 43px;
  height: 28px;
  top: 52px;
  right: 0px;
  z-index: 9;
  background: url("/images/contents/cloud_medium.svg") no-repeat 0 0 / 100% auto;
  animation: ui-anicloud2 12s ease-out infinite;
  -webkit-animation: ui-anicloud2 12s ease-out infinite;
  transition: all 0.5s cubic-bezier(0, 0, 0.5, 1);
}
.ui-loading-container .my-loan-loading .loading-ani .ani-img04 {
  position: absolute;
  display: block;
  width: 30px;
  height: 20px;
  top: 24px;
  right: 0px;
  z-index: 9;
  background: url("/images/contents/cloud_small.svg") no-repeat 0 0 / 100% auto;
  animation: ui-anicloud 13s ease-out infinite;
  -webkit-animation: ui-anicloud 13s ease-out infinite;
  transition: all 0.5s cubic-bezier(0, 0, 0.5, 1);
}
.ui-loading-container .my-loan-loading .loan-progress-bar {
  position: relative;
  padding: 113px 0 35px;
  width: 140px;
  margin: 0 auto;
}
.ui-loading-container .my-loan-loading .progress-bar {
  width: 100%;
  height: 4px;
  background-color: #e6e9ef;
  border-radius: 20px;
  position: relative;
}
.ui-loading-container .my-loan-loading .progress-bar .bar {
  border-radius: 20px;
  width: 0;
  height: 4px;
  background-color: #00a49d;
}
.ui-loading-container .my-loan-loading .progress-bar .perc {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, 18px);
  color: #00a59f;
  font-size: 1.6rem;
}
.ui-loading-container .my-loan-loading .progress-bar .perc em {
  font-style: normal;
  color: #00a59f;
}
@keyframes ui-anistar {
  0% {
    transform: translateY(5px);
  }
  45% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(5px);
  }
}
@-webkit-keyframes ui-anistar {
  0% {
    -webkit-transform: translateY(5px);
  }
  45% {
    -webkit-transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(5px);
  }
}
@keyframes ui-anicloud {
  0% {
    transform: translateX(20px);
  }
  80%,
  100% {
    transform: translateX(-220px);
  }
}
@-webkit-keyframes ui-anicloud {
  0% {
    -webkit-transform: translateX(20px);
  }
  80%,
  100% {
    -webkit-transform: translateX(-220px);
  }
}
@keyframes ui-anicloud2 {
  0%,
  30% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(-220px);
  }
}
@-webkit-keyframes ui-anicloud2 {
  0%,
  30% {
    -webkit-transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(-220px);
  }
}
/* // 2026-02-27 자동차 담보대출 */

/* [2026-02-24 KJH] 235048725 카드이용내역 말풍선 추가 */
.usage-detail-tooltip {
  display: block;
  position: relative;
  margin: 1rem 0.5rem 0.5rem;
  padding: 0.6rem 0.8rem;
  background: linear-gradient(
    90deg,
    #4f7cff 0%,
    #8a6bff 50%,
    #ff6fb1 100%
  );
  color: #fff;
  font-size: 1.2rem;
  border-radius: 2rem;
  box-shadow: 0 0.1rem 0.2rem 0.2rem rgba(0, 0, 0, 0.05);
}
.usage-detail-tooltip::after {
  content: "";
  position: absolute;
  top: 0;
  transform: translateY(-60%) rotate(-90deg);
  border-top: 0.6rem solid transparent;
  border-bottom: 0.6rem solid transparent;
  border-left: 0.6rem solid transparent;
}
.usage-detail-tooltip.cock-left::after {
  left: 1.2rem;
  border-left-color: #4f7cff;
}
.usage-detail-tooltip.cock-center::after {
  left: 50%;
  transform: translate(-50%, -60%) rotate(-90deg);
  border-left-color: #8a6bff;
}
.usage-detail-tooltip.cock-right::after {
  right: 1.2rem;
  border-left-color: #ff6fb1;
}
/* // [2026-02-24 KJH] 235048725 카드이용내역 말풍선 추가 */

/* [2026-02-26 KJH] 공통 말풍선 추가 : L_living_p056_250814(예시 페이지) */
.gra-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  padding-inline: 0.9rem;
  height: 2.6rem;
}

/* 말풍선 : 배경 */
.gra-bubble::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    125deg,
    #255bff 0%,
    #8a6bff 45%,
    #fa3f93 100%
  );
  border-radius: 2rem;
  box-shadow: 0 1px 0.2rem 0.2rem rgba(0, 0, 0, 0.05);
}

/* 말풍선 : 꼭지 */
.gra-bubble::after {
  content: "";
  position: absolute;
  border-top: 0.6rem solid transparent;
  border-bottom: 0.6rem solid transparent;
  border-left: 0.6rem solid transparent;
}

/* 말풍선 : 위치 */
.gra-bubble.-pos-top-left {
  left: 0;
  top: -1rem;
  transform: translate3d(0, -100%, 0);
}
.gra-bubble.-pos-top-center {
  left: 50%;
  top: -1rem;
  transform: translate3d(-50%, -100%, 0);
}
.gra-bubble.-pos-top-right {
  right: 0;
  top: -1rem;
  transform: translate3d(0, -100%, 0);
}
.gra-bubble.-pos-btm-left {
  left: 0;
  bottom: -1rem;
  transform: translate3d(0, 100%, 0);
}
.gra-bubble.-pos-btm-center {
  left: 50%;
  bottom: -1rem;
  transform: translate3d(-50%, 100%, 0);
}
.gra-bubble.-pos-btm-right {
  right: 0;
  bottom: -1rem;
  transform: translate3d(0, 100%, 0);
}

/* 말풍선 : 꼭지 위치 */
.gra-bubble.-pos-top-left::after {
  left: 1.5rem;
  bottom: 0;
  transform: translateY(60%) rotate(90deg);
  border-left-color: #7a69ff;
}
.gra-bubble.-pos-top-center::after {
  left: 50%;
  border-left-color: #a75fe2;
  bottom: 0;
  transform: translate(-50%, 60%) rotate(90deg);
}
.gra-bubble.-pos-top-right::after {
  right: 1.5rem;
  bottom: 0;
  transform: translateY(60%) rotate(90deg);
  border-left-color: #cf6dd1;
}
.gra-bubble.-pos-btm-left::after {
  left: 1.5rem;
  top: 0;
  transform: translateY(-60%) rotate(-90deg);
  border-left-color: #7a69ff;
}
.gra-bubble.-pos-btm-center::after {
  left: 50%;
  border-left-color: #7a69ff;
  top: 0;
  transform: translate(-50%, -60%) rotate(-90deg);
}
.gra-bubble.-pos-btm-right::after {
  right: 1.5rem;
  top: 0;
  transform: translateY(-60%) rotate(-90deg);
  border-left-color: #ac5edf;
}

/* 말풍선 : 애니메이션 */
.gra-bubble.-pos-top-left.-ani-bounce,
.gra-bubble.-pos-top-right.-ani-bounce {
  animation: gra-bubble-top-bounce 1s 1.3s cubic-bezier(.4,0,.2,1) infinite;
  will-change: transform;
}
.gra-bubble.-pos-top-center.-ani-bounce {
  animation: gra-bubble-top-center-bounce 1s 1.3s cubic-bezier(.4,0,.2,1) infinite;
  will-change: transform;
}

.gra-bubble.-pos-btm-left.-ani-bounce,
.gra-bubble.-pos-btm-right.-ani-bounce {
  animation: gra-bubble-btm-bounce 1s 1.3s cubic-bezier(.4,0,.2,1) infinite;
  will-change: transform;
}
.gra-bubble.-pos-btm-center.-ani-bounce {
  animation: gra-bubble-btm-center-bounce 1s 1.3s cubic-bezier(.4,0,.2,1) infinite;
  will-change: transform;
}

@keyframes gra-bubble-top-bounce {
  0%, 100% {
    transform: translate3d(0, -100%, 0);
  }
  50% {
    transform: translate3d(0, -90%, 0);
  }
}

@keyframes gra-bubble-top-center-bounce {
  0%, 100% {
    transform: translate3d(-50%, -100%, 0);
  }
  50% {
    transform: translate3d(-50%, -90%, 0);
  }
}

@keyframes gra-bubble-btm-bounce {
  0%, 100% {
    transform: translate3d(0, 100%, 0);
  }
  50% {
    transform: translate3d(0, 90%, 0);
  }
}

@keyframes gra-bubble-btm-center-bounce {
  0%, 100% {
    transform: translate3d(-50%, 100%, 0);
  }
  50% {
    transform: translate3d(-50%, 90%, 0);
  }
}

.gra-bubble-txt {
  position: relative;
  z-index: 10;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 500;
  white-space: nowrap;
}
/* // [2026-02-26 KJH] 공통 말풍선 추가 : L_living_p056_250814(예시 페이지) */

/* [2026-02-23 KEJ] [WPM-13715] 추가 */
.ui-layer__body-inner.pd-small {
  padding: 10px 24px 15px;
}
.type-full-check-box .radio-img {
  width: 56px;
  height: 56px;
  margin-right: 6px;
}
.type-full-check-box .ui-radio-block + .ui-radio-block {
  margin-top: 16px;
}
.type-full-check-box .ui-radio-block.type-box .ui--label {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 74px;
  padding: 9px 16px 9px 12px;
  box-sizing: border-box;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px #e9e9e9;
  color: var(--basic);
}
.type-full-check-box .ui-radio-block.type-box .ui-radio:checked + .ui--label {
  box-shadow: inset 0 0 0 1px var(--primary);
}
.type-full-check-box .ui-label--text {
  font-size: 17px;
  font-weight: 500;
}
.type-full-check-box .ui-checkbox-object {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 16px;
}
.type-full-check-box .ui-radio-block.type-box .ui-radio:checked + .ui--label .ui-checkbox-object {
  background-image: url("/images/common/ic-checkbox-c.svg");
}
.option-info {
  font-size: 12px;
  line-height: 18px;
  color: var(--gray-80);
}
.option-info .info-item + .info-item {
  margin-top: 0;
}
/* //[2026-02-23 KEJ] [WPM-13715] 추가 */


/* [2026-03-06 KEJ] [WPM-13936] 예약페이지 */
.phishing-care-plus-container {
  flex: 1;
  padding: 0 0 2.3rem;
  background-color: #fff;
  font-size: 1.4rem;
  -webkit-box-flex: 1;
}
.pcp-section {
  padding: 0 2.4rem;
}
.pcp-section .sub-title {
  font-size: 2rem;
  line-height: 3rem;
  font-weight: 500;
}
.pcp-content-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.pcp-content-box.align-left {
  align-items: flex-start;
  text-align: left;
}
.pcp-visual {
  padding-bottom: 4rem;
}
.pcp-visual .title {
  font-size: 2.4rem;
  line-height: 3.2rem;
  font-weight: 700;
}
.pcp-visual .desc {
  font-size: 1.6rem;
  line-height: 2.2rem;
  font-weight: 400;
  color: #666;
}
.pcp-content-box .title + .desc,
.pcp-content-box .desc + .desc {
  margin-top: 16px;
}
.pcp-image-guide {
  padding-block: 5rem;
  background: #f4f6f8;
}
.pcp-text-info {
  padding-block: 4.8rem;
}
.pcp-image-guide .guide-list {
  width: 100%;
  height: auto;
  margin-top: 2.4rem;
  counter-reset: benefit-num;
}
.pcp-image-guide .guide-list > li {
  padding: 3rem 0 1.2rem;
  border-radius: 1.6rem;
  background: #fff;
}
.pcp-image-guide .guide-list > li + li {
  margin-top: 1.2rem;
}
.pcp-image-guide .guide-list > li::before{
  counter-increment: benefit-num; /* 카운터 1씩 증가 */
  content: "혜택" counter(benefit-num); /* "01", "02" 형식으로 표시 */

  /* 숫자 박스 디자인 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.8rem;
  font-size: 1.5rem;
  line-height: 2.2rem;
  color: #008882;
  font-weight: 500;
  flex-shrink: 0; /* 숫자는 안 찌그러지게 고정 */
}
.pcp-image-guide .guide-list .subject {
  font-size: 1.8rem;
  line-height: 2.4rem;
  font-weight: 700;
}
.pcp-image-guide .guide-list .desc {
  font-size: 1.5rem;
  line-height: 2.2rem;
  font-weight: 400;
  color: #666;
}
.pcp-image-guide .guide-list .subject + .desc {
  margin-top: 0.8rem;
}
.pcp-upgrade-step {
  width: 100%;
  padding: 0 1.4rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.pcp-upgrade-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2.2rem 0 2rem;
}
.pcp-upgrade-list .ico {
  width: 8.8rem;
  height: auto;
}
.pcp-upgrade-list .type {
  margin-top: 0.8rem;
  font-size: 1.4rem;
  line-height: 2.2rem;
  font-weight: 400;
  color: #666;
}
.pcp-upgrade-list .amount {
  font-size: 1.4rem;
  line-height: 2.2rem;
  font-weight: 700;
  color: #666;
}
.pcp-upgrade-item.item-arrow {
  transform: translateY(-20px);
  margin-right: 0.8rem;
}
.pcp-upgrade-item.item-arrow .ico {
  width: 4rem;
  height: 3.2rem;
}

.pcp-compare-con {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0.2rem;
  width: 100%;
  padding: 1.2rem 0;
  text-align: center;
  background: #f4f6f8;
  border-radius: 1.6rem;
}
.pcp-compare-txt {
  font-size: 1.4rem;
  line-height: 2.2rem;
  font-weight: 400;
  color: #666;
}
.pcp-compare-pop-btn{
  width: 1.8rem;
  height: 1.8rem;
  background: url('/images/icon/ic_notice_grey.svg') no-repeat center bottom / contain;
}
.pcp-compare-desc {
  margin-bottom: 1.2rem;
  font-size: 1.2rem;
  line-height: 1.6rem;
  font-weight: 400;
  color: #888;
}
.pcp-info-list {
  width: 100%;
  margin-top: 3rem;
}
.pcp-info-list > li + li {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #e2e9f1;
}
.pcp-info-list .info-subject {
  font-size: 1.6rem;
  line-height: 2.2rem;
  font-weight: 500;
}
.pcp-info-list .info-subject + .pcp-sub-list {
  margin-top: 1.2rem;
}
.pcp-sub-list > li + li {
  margin-top: 0.4rem;
}
.pcp-sub-list > li {
  position: relative;
  padding-left: 1rem;
  line-height: 2.2rem;
}
.pcp-sub-list > li::before {
  position: absolute;
  content: "·";
  left: 0;
  top: 0;
  color: #111;
}
.pcp-notice-section {
  padding: 0 2.4rem;
}
.pcp-notice-section .info-item + .info-item {
  margin-top: 1.2rem;
}
.pcp-notice-section .info-list .info-list--indented,
.pcp-notice-section .info-list .info-list--indented .info-item + .info-item {
  margin-top: 0.8rem;
}
.pcp-notice-section .info-list.sub-info-list .info-list--indented,
.pcp-notice-section .info-list.sub-info-list .info-list--indented .info-item + .info-item {
  margin-top: 0.4rem;
}
.pcp-notice-section + .pcp-notice-section,
.pcp-notice-section .info-list + .info-list {
  margin-top: 3.6rem;
}

.pcp-notice-section .info-list.sub-info-list dd + dt {
  margin-top: 2rem;
}
.pcp-notice-section .info-list.sub-info-list dt + dd {
  margin-top: 1.2rem;
}
.pcp-notice-section .info-list.sub-info-list dt.info-title {
  font-size: 1.6rem;
  line-height: 2rem;
  font-weight: 400;
  color: #111;
}
.pcp-notice-section .info-list.sub-info-list dt.info-title .price {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.4rem;
  font-weight: 400;
  color: #666;
}
.pcp-notice-section .js-ui-accordion__layer {
  margin-top: 0.7rem;
}

.pcp-visual-res {
  width: 100%;
  max-width: 312px;
  height: auto;
}
.pcp-compare-wrap {
  padding: 0 2.4rem;
  margin-bottom: 1.6rem;
}

.page-buttons.pcp-buttons.type-fixed {
  padding: 2rem 2.4rem;
}


/* [2026-03-06 KEJ] [WPM-13936] 팝업 */
.phishing-plus-wrap {
  display: flex;
  justify-content: space-between;
  width: 100%;

}
.phishing-plus__symbol {
  width: 10rem;
  height: auto;
  margin-top: -0.4rem;
}
.phishing-plus__symbol--pos {
  position: absolute;
  top: -1rem;
  right: 0;
  width: 8rem;
  height: 8rem;
}
.phishing-plus__title {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 28px;
}
.phishing-plus__desc {
  margin-top: 1.2rem;
  margin-bottom: 2.6rem;
  font-size: 1.4rem;
  font-weight: 400;
  color: #666;
}
.phishing-plus__data {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 2.4rem;
}
.phishing-plus-group {
  position: relative;
}
.phishing-plus-group + .phishing-plus-group {
  margin-top: 3.6rem;
}
.form-item-list {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2rem;
}
.form-item-list .form-item--phishing {
  display: flex;
  justify-content: space-between;
}
.form-item__group--align-right {
  margin-left: auto;
}
.subscribe-ui--edit {
  padding: 0.45rem 1rem;
  box-sizing: border-box;
  font-size: 1.2rem;
  line-height: 1.8rem;
  font-weight: 400;
  border-radius: 0.4rem;
  background-color: #f5f5f5;
}
.form-item--phishing:not(:first-child) {
  margin-top: 2.4rem;
}
.form-item--phishing .form-item__title {
  color: #888;
}
.info-list--phishing {
  padding: 1.6rem;
  box-sizing: border-box;
  font-size: 1.2rem;
  line-height: 2rem;
  color: #666;
  background: #f5f5f5;
  border-radius: 1.6rem;
}
.info-list--phishing .info-item + .info-item {
  margin-top: 0;
}
.ui-layer__foot-notice {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 1.6rem;
  row-gap: 0.4rem;
}

.phishing-fixed-des{
  font-size: 1.5rem;
  line-height: 1.9rem;
  font-weight: 500;
  color: #666;
}
.phishing-fixed-title{
  font-size: 1.7rem;
  line-height: 2.1rem;
  font-weight: 700;
}
.phishing-fixed-amt {
  font-size: 2rem;
  line-height: 2.1rem;
  font-weight: 700;
  color: #8665ef;
}

.d-flex--gap8 {
  gap: 0.8rem;
}
.ui-layer__notice-inner {
  width: 100%;
  display: flex;
  gap: 0.8rem;
  align-items: center;
  justify-content: space-between;
}
.ui-layer__foot .ui-buttons.ui-buttons-pcd {
  padding: 2rem 1.6rem;
}


.pcp-goal-container {
  max-width: 360px;
  margin: 16px auto 0;
  padding: 24px;
  border-radius: 1.6rem;
  border: 1px solid #e5e5e5;
}

.pcp-goal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px; /* 상하 16px, 좌우 24px 간격 */
  padding: 0;
  margin: 0;
  justify-content: center;
}

/* 개별 아이템 (원 + 문구) */
.pcp-goal-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc((100% - 48px) / 3);
}

/* 스탬프 기본 스타일 */
.circle {
  display: block;
  width: 64px;
  height: 64px;
  margin-bottom: 4px;
}
/* 스탬프 on 숨김 */
.circle.type-complete {
  display: none;
}
/* 텍스트 스타일 */
.status {
  font-size: 13px;
  font-weight: 500;
  color: #666;
}
/* 스탬프 on */
.pcp-goal-item.is-current .circle {
  display: none;
}
.pcp-goal-item.is-current .circle.type-complete {
  display: block;
}
.pcp-goal-item.is-current .status {
  color: #111;
}

/* [2026-03-16 KEJ] [WPM-14108] 리볼빙 서비스 전반 화면 개선 추가 */
.revolving-contents {
  flex: 1;
  padding: 30px 24px 35px;
  background-color: #fff;
  font-size: 1.4rem;
  -webkit-box-flex: 1;
}
.revolving-contents .title {
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 2.6rem;
}
.revolving-contents .btn-detail-view {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: #666;
}
.revolving-contents .btn-detail-view .icon-arrow-right {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  background: url("/images/icon/btn-more.png") no-repeat center / auto 10px;
}
.revolving-section,
.revolving-section-group + .revolving-section-group {
  margin-top: 3.2rem;
}

.revolving-section-group .title {
  margin-bottom: 1.2rem;
  font-size: 1.7rem;
  line-height: 2.4rem;
  font-weight: 500;
}
.revolving-section-group .revolving-section-desc {
  margin-top: 1.2rem;
  font-size: 1.2rem;
  line-height: 1.8rem;
  font-weight: 400;
  color: #666;
}
.revolving-section .ui-radio-block.type-box .ui-label {
  padding: 0;
}
.revolving-amount-info {
  position: relative;
  padding: 1.6rem 2rem 2.4rem;
  box-sizing: border-box;
  border-radius: 0.6rem;
  background: #f8f8f8;
}
.revolving-amount-info.is-single{
  padding-top: 2.4rem;
}
.select-info-list {
  display: flex;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e5e5e5;
}
.amount-info-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 2rem;
}
.amount-info-list .info-label,
.select-info-list .select-title {
  font-size: 1.3rem;
  line-height: 2rem;
  font-weight: 500;
  color: #666;
}
.select-info-list .select-trigger-text {
  font-size: 1.3rem;
  line-height: 2rem;
  font-weight: 700;
}
.select-info-list .icon-arrow-bottom {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 0.4rem;
  background: url("/images/common/ic-select-arrow.svg") no-repeat center / contain;
}
#base-amount .result-value{
  position: relative;
  display: inline-block;
  font-size: 2rem;
  font-weight: 700;
  color: #111;
}
#base-amount .result-value.is-calculated::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background: #000;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.amount-info-list .result-value {
  font-size: 1.8rem;
  line-height: 2rem;
  font-weight: 700;
  color: #888;
}
.amount-info-list .animated-show-txt{
  display: none;
}
.amount-info-list dd {
  font-size: 1.3rem;
  font-weight: 400;
  color: #666;
  text-align: right;
  white-space: nowrap;
}
.revolving-tooltip {
  position: absolute;
  opacity: 0;
  bottom: -8px;
  left: 10px;
  transition: opacity 0.4s ease;
}

.revolving-tooltip.is-visible {
  opacity: 1;
}
.revolving-tooltip-inner {
  position: relative;
  padding: 0.5rem 0.8rem;
  background: #111;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
  border-radius: 100px;
  width: fit-content;
}
.revolving-tooltip-inner .text {
  font-size: 1.2rem;
  line-height: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.48px;
  color: #fff;
}
.revolving-tooltip-inner::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 13px;
  display: block;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 4px solid #111;
}
.revolving-calc-trigger {
  display: none;
  width: 100%;
  height: 4.8rem;
  margin-top: 1.2rem;
  border-radius: 0.8rem;
  background: #d8f3f2;
}
.revolving-calc-trigger .btn-txt {
  font-size: 1.4rem;
  font-weight: 500;
  color: #008882;
}
.revolving-info-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 1.6rem 2rem;
  border-radius: 0.6rem;
  background: #f8f8f8;
}
.revolving-info-item + .revolving-info-item {
  margin-top: 0.8rem;
}
.revolving-info-item .sub-title {
  font-size: 1.3rem;
  line-height: 2rem;
  font-weight: 500;
  color: #666;
}
.ui-buttons.is-relative {
  position: relative;
}
.ui-revolving-tooltip{
  position: absolute;
  bottom: 100%;
  left: 50%;
  z-index: 1;
  display: block;
  width: 100%;
  transform: translateX(-50%);
}
.ui-revolving-tooltip-text{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  padding: 0.8rem 1.2rem 0.7rem 1.5rem;
  font-size: 1.2rem;
  font-weight: 500;
  color: #fff;
  background: #2c364e;
  border-radius: 0.8rem;
}
.ui-revolving-tooltip-text .ic-arrow{
  width: 1.2rem;
  height: auto;
}
.ui-revolving-tooltip-text::after{
  content: ' ';
  position: absolute;
  top: 100%;
  left: 50%;
  display: block;
  border: 0 solid transparent;
  border-width: 4px 3px;
  border-color: #2c364e transparent transparent transparent;
}
.ui-revolving-tooltip-text .is-flex-text{
  display: flex;
  align-items: center;
  gap: 0.2rem
}
.revolving-buttons 
.sub-info-item.type-line {
  width: 100%;
  padding-top: 0.8rem;
  margin-top: 0.8rem;
  border-top: 1px solid #e5e5e5;
}
.sub-info-item .desc {
  font-size: 1.3rem;
  line-height: 2.2rem;
  font-weight: 400;
  color: #666;
}
.terms-detail-inner {
  padding: 0.4rem 2.4rem 0.9rem;
  box-sizing: border-box;
  font-size: 1.4rem;
}
.terms-detail-list {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 1.2rem;
  padding: 2rem 2rem 1.6rem;
  border-radius: 0.6rem;
  background: #f8f8f8;
}
.terms-detail-list.type02 {
  row-gap: 1.6rem;
  padding: 2rem;
}
.terms-detail-list dt {
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 500;
  color: #666;
}
.terms-detail-list dd.thin-txt {
  font-size: 1.3rem;
  font-weight: 400;
}
.terms-detail-list dd {
  font-size: 1.5rem;
  line-height: 2.1rem;
  font-weight: 500;
  color: #111;
}
.terms-detail-list .point {
  font-size: 2rem;
  line-height: 2rem;
  font-weight: 700;
  color: #029c94;
}
.detail-opener-title {
  display: block;
  box-sizing: border-box;
  padding-right: 20px;
  color: var(--basic);
  font-size: 1.4rem;
  line-height: 2rem;
}
.terms-detail-select-list {
  margin-top: 2.4rem;
}
.terms-detail-select-item {
  padding: 0 0 0 1.2rem;
  box-sizing: border-box;
}
.terms-detail-select-item .ui-checkbox-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.terms-detail-select-item .label-text {
  font-size: 1.4rem;
  font-weight: 500;
}
.terms-detail-select-item .ui-arrow-button {
  width: 38px;
  height: 48px;
  margin-right: unset;
  background-position: center;
}
.page-contents.card-type .card-area-pop {
  position: relative;
  padding: 2.4rem 0 3rem;
  border-radius: 10px;
  background: #fff;
}
.page-contents.card-type .card-area-pop .title {
  font-size: 1.9rem;
  line-height: 2.4rem;
  font-weight: 700;
  text-align: center;
}
.card-area-pop .pop-group {
  margin-top: 1.6rem;
}
.card-area-pop .pop-group .pop__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.8rem;
}
.card-area-pop .pop-group .pop__item .pop__key {
  color: #2b2b2b;
}
.card-area-pop .pop-group .pop__item .unit-sep,
.card-area-pop .pop-group .pop__item .unit {
  font-size: 1.3rem;
  line-height: 1.8rem;
  font-weight: 400;
}
.card-area-pop .pop-group .pop__item .unit-sep {
  margin: 0 0.4rem;
}
.card-area-pop .pop-group .pop__item .unit {
  margin-left: 0.2rem;
}
.card-area-pop .pop-group .pop__item .unit-val {
  font-size: 2rem;
  line-height: 2.7rem;
  font-weight: 700;
}
.card-area-pop .pop-group .pop__notice {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-area-pop .pop-group .pop__notice--text .point {
  font-size: 1.5rem;
  line-height: 2.1rem;
  font-weight: 700;
  color: #8665ef;
}
.card-area-pop .pop-group .pop__notice .icon-arrow-right {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  background: url("/images/common/ic-button-arrow-b.png") no-repeat top 0.2rem center/auto 10px;
}
.card-grad-tooltip.bottom {
  top: auto;
  bottom: -10px;
}
.card-grad-tooltip.bottom::after {
  content: "";
  position: absolute;
  top: -10px;
  bottom: auto;
  left: 25px;
  z-index: -1;
  display: block;
  clear: both;
  border-top: 0 solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 12px solid #15c5a5;
  border-left: 10px solid transparent;
}
/* //[2026-03-16 KEJ] [WPM-14108] 리볼빙 서비스 전반 화면 개선 추가 */


/* [2026-03-18 KJH] [WPM-235046412] lms 명세서 큰글씨 보기 */
.pgLms {
  --font-scale: 1;
}
.pgLms.is-large-text {
  --font-scale: 1.2;
}

/* 큰글씨 버튼 */
.pgLms .pos-sticky {
  position: sticky;
  top: 5rem;
  z-index: 100;
  margin-inline: -2.4rem;
  padding-inline: 2.4rem;
  background-color: #fff;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1);
}
.pgLms .toggle-my-type-box {
  display: flex;
  justify-content: flex-end;
  padding-block: 0.4rem;
  background-color: #fff;
}
.pgLms .toggle-my-type {
  margin: unset;
}
/* .pgLms .fix-top-wrap ~ .contents-wrap {
  padding-top: 6.8rem;
} */
.pgLms .page-contents {
  padding-top: unset;
}
.pgLms .check-range {
  margin: unset;
}

/* ---- 텍스트 요소에 font-scale 적용 ---- */
.pgLms .header-title {
  font-size: calc(1.8rem * var(--font-scale));
  line-height: calc(2.4rem * var(--font-scale));
}
.pgLms .check-range .ui-button-down {
  font-size: calc(1.4rem * var(--font-scale));
}

.pgLms .total-amount-title {
  font-size: calc(1.5rem * var(--font-scale));
  line-height: calc(2.2rem * var(--font-scale));
}
.pgLms .total-base-date {
  font-size: calc(1.2rem * var(--font-scale));
  line-height: calc(2.2rem * var(--font-scale));
}
.pgLms .total-amount-val {
  font-size: calc(2.8rem * var(--font-scale));
  line-height: calc(3.5rem * var(--font-scale));
}
.pgLms .accordion-list .form-detail-head {
  font-size: calc(1.5rem * var(--font-scale));
  line-height: calc(2.2rem * var(--font-scale));
}
.pgLms .section-title .title {
  font-size: calc(1.7rem * var(--font-scale));
  line-height: calc(2.4rem * var(--font-scale));
}
.pgLms .bill-title {
  font-size: calc(1.5rem * var(--font-scale));
  line-height: calc(1.8rem * var(--font-scale));
}
.pgLms .welcome-nav-link {
  font-size: calc(1.4rem * var(--font-scale));
  line-height: calc(1.9rem * var(--font-scale));
}
.pgLms .basic-text {
  font-size: calc(1.5rem * var(--font-scale));
  line-height: calc(2.2rem * var(--font-scale));
}
.pgLms .accordion-opener-title {
  font-size: calc(1.6rem * var(--font-scale));
  line-height: calc(2.2rem * var(--font-scale));
}
.pgLms .form-detail-title {
  font-size: calc(1.4rem * var(--font-scale));
}
.pgLms .form-detail-group,
.pgLms .form-detail-group strong {
  font-size: calc(1.4rem * var(--font-scale));
}
.pgLms .card-list .card-name {
  font-size: calc(1.7rem * var(--font-scale));
  line-height: calc(2.4rem * var(--font-scale));
}
.pgLms .card-list .card-number {
  font-size: calc(1.2rem * var(--font-scale));
  line-height: calc(1.7rem * var(--font-scale));
}
.pgLms .card-list .card-price {
  font-size: calc(1.9rem * var(--font-scale));
  line-height: calc(2.4rem * var(--font-scale));
}
.pgLms .header__title {
  font-size: calc(1.8rem * var(--font-scale));
  line-height: calc(2.7rem * var(--font-scale));
}
.pgLms .ui-label-text {
  font-size: calc(1.5rem * var(--font-scale));
  line-height: calc(2rem * var(--font-scale));
}
.pgLms .menu-link-button,
.pgLms .accordion-info-title {
  font-size: calc(1.5rem * var(--font-scale));
  line-height: calc(2.2rem * var(--font-scale));
}
.pgLms .info-list {
  font-size: calc(1.4rem * var(--font-scale));
  line-height: calc(2rem * var(--font-scale));
}
/* // [2026-03-18 KJH] [WPM-235046412] lms 명세서 큰글씨 보기 */

/* [2026-04-08 kho] [WPM-14314] 내카드관리 내 연회비 납부내역 추가 */
/* 카드 버튼 스타일 추가 */
.ui-select-block.type-card2::before {
  right: 15px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: url(../images/icon/btn-more.png) no-repeat 100% 50% / auto 10px;
  transform: none;
}
.ui-select-block.type-card2.is-disabled::before {
  background-image: url(../images/icon/btn-more-d.svg);
}
.ui-select-block.type-card2 .ui-select {
  display: flex;
  text-align: left;
  align-items: center;
  height: 100%;
  min-height: 73px;
  box-sizing: border-box;
  padding: 14px 15px;
  border: 1px solid var(--gray-40);
  border-radius: 6px;
  color: var(--basic);
}
.ui-select-block.type-card2 .ui-select[disabled] {
  color: var(--gray-70);
}
.ui-select-block.type-card2 .card-info {
  display: block;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.ui-select-block.type-card2 .card-name {
  display: block;
  overflow: hidden;
  margin-bottom: 2px;
  font-size: 1.7rem;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-select-block.type-card2 .card-number {
  position: relative;
  display: block;
  color: var(--gray-70);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 17px;
}
.ui-select-block.type-card2 .card-number:after {
  content: "";
  display: block;
  clear: both;
}
.ui-select-block.type-card2 .card-number-item {
  position: relative;
  float: left;
}
.ui-select-block.type-card2 .card-number-item:not(:last-of-type) {
  margin-right: 7px;
  padding-right: 8px;
}
.ui-select-block.type-card2 .card-number-item:not(:last-of-type)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 1px;
  height: 9px;
  margin-top: -5px;
  background-color: var(--gray-60);
}

/* 연회비 납부현황 */
.year-fee-form-detail-wrap .form-detail {
  margin-bottom: 35px;
  padding-bottom: 35px;
  border-bottom: 1px solid var(--gray-30);
}
.year-fee-form-detail-wrap .form-detail:last-child {
  margin-bottom: 0;
}
.form-detail-head .account {
  margin-left: auto;
}
.form-detail-head .account .num {
  font-size: 18px;
  font-weight: 700;
  line-height: inherit;
}
/* [2026-04-08 kho] [WPM-14314] 내카드관리 내 연회비 납부내역 추가 */

/* [2026-04-15 KJH] [WPM-14475] 가입완료(하나페이 동시가입) 화면 */
.joinCom-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2.8rem;
}
.joinCom-cards li {
  height: 17.1rem;
  padding: 1.5rem;
  background-color: #f4f6f8;
  border-radius: 0.6rem;
  background-repeat: no-repeat;
  background-size: 4.4rem 4.4rem;
  background-position: right 1.5rem bottom 1.5rem;
  box-sizing: border-box;
}
.joinCom-cards-tit {
  color: #111;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2rem;
}
.joinCom-cards-txt {
  margin-top: 0.5rem;
  color: #111;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.9rem;
}
.joinCom-cards .ic-card {
  background-image: url("../images/icon/ic_signup_card.svg");
}
.joinCom-cards .ic-bank {
  background-image: url("../images/icon/ic_signup_bank.svg");
}
.joinCom-cards .ic-stock {
  background-image: url("../images/icon/ic_signup_stock.svg");
}
.joinCom-cards .ic-insu {
  background-image: url("../images/icon/ic_signup_insu.svg");
}
/* // [2026-04-15 KJH] [WPM-14475] 가입완료(하나페이 동시가입) 화면 */

.under-buttons {
  background: #f5f5f5;
  margin-top:8px;
  border-radius: 4px;
  min-height: 40px;
  display: flex;
  align-items:center;
  justify-content: space-between;
  padding:0 16px;
  margin-left:32px;
}
.under-buttons.under-red {
  background: #fbeeee;
}
.under-buttons.under-red span, .under-buttons.under-red p, .under-buttons.under-red a {
  color:#ce2d2d;
}
.under-buttons span {
  color:#00a49d
}
.under-buttons a {
  position: relative;
  padding-right:20px;
}
.under-buttons a:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -10px;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background: url("../images/common/icon_arrow_black.svg") no-repeat;
}
.under-buttons.under-red a:after {
  background: url("../images/common/icon_arrow_red.svg") no-repeat;
}
.open-right {
  display: flex !important;
  align-items: center;
}
.open-right-banner {
  background: #f5f5f5;
  border-radius: 12px;
  margin-left:6px;
  font-size: 12px;
  min-height: 24px;
  display: flex;
  align-items: center;
  padding:0 8px;
  font-weight: 500;
}

.open-right-banner.right-red {
  background: #fbeeee;
  color:#ce2d2d;
}
.open-right-banner.right-red span {
  color:#ce2d2d;
}
.open-right-banner span {
  color:#00a49d;
  margin-left:4px;
  font-weight: 700;
}


.section-type-asset {
  position: relative;
  padding-bottom: 32px;
}
.section-type-asset h3.tit {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 18px;
}
/* .section-type-asset h3.tit:after {
  content: "";
  position: absolute;
  vertical-align: middle;
  width: 12px;
  height: 12px;
  background: url(../images/common/ic-select-arrow.svg) no-repeat 100% 50% / 100% auto;
  right:0;
  transition: transform 0.3s ease;
} */
/* .section-type-asset .type-btn.active h3.tit:after {
  transform: rotate(180deg);
} */
.section-type-asset.open h3.tit:after {
  content: "";
  position: absolute;
  vertical-align: middle;
  width: 12px;
  height: 12px;
  background: url(../images/common/ic-select-arrow.svg) no-repeat 100% 50% / 100% auto;
  right:0;
  transition: transform 0.3s ease;
}
.section-type-asset.open .type-btn.active h3.tit:after {
  transform: rotate(180deg);
}
.section-type-asset > h3.tit {
  margin-top: 32px;
}
.section-type-asset h3.tit .count {
  font-size: 16px;
  color: var(--primary);
}
.section-type-asset > h3.tit + .sect-asset-detail {
  margin-top: 20px;
}
.section-type-asset ~ .section-type-asset {
  padding-top: 42px;
}
.section-type-asset ~ .section-type-asset:before {
  content: "";
  position: absolute;
  top: 0;
  right: -24px;
  left: -24px;
  height: 10px;
  background-color: #f5f5f5;
}
.section-type-asset .btn-accodian.acco-expanded {
  position: relative;
  width: 100%;
}
.section-type-asset .btn-accodian.acco-expanded:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 12px;
  height: 12px;
  background: url(/images/md/btn-arr-right.png) -2px center no-repeat;
  background-size: 12px auto;
  transform: translateY(-50%) rotate(90deg);
  transition: transform 0.5s ease;
}
.section-type-asset .btn-accodian.acco-expanded.active:after {
  transform: translateY(-50%) rotate(-90deg);
}
.section-type-asset .wrap-acco-detail .extra {
  line-height: 20px;
  margin-top: 15px;
  font-size: 13px;
  color: var(--primary);
}
.section-type-asset .wrap-acco-detail .extra.grey {
  color: var(--grey);
}
.section-type-asset .sect-asset-detail {
  margin-top: 20px;
}
.section-type-asset .sect-asset-detail + .sect-asset-detail {
  margin-top: 40px;
}
.section-type-asset .sect-asset-detail h4.tit {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
}
.section-type-asset .sect-asset-detail h4.tit .img {
  width: 30px;
  height: 30px;
}
.section-type-asset .sect-asset-detail h4.tit .img img {
  width: 100%;
  vertical-align: top;
}
.section-type-asset .sect-asset-detail .list-financial-check {
  margin-top: 20px;
}
.section-type-asset.show-more:after {
  content: "";
  z-index: 1;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 126px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
}
.section-type-asset ~ .more-area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 44px;
}

/* 아이콘+체크박스 리스트 */
.list-financial-check ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.list-financial-check ul li {
  display: flex;
  position: relative;
  align-items: center;
}
.list-financial-check ul li .img {
  width: 36px;
  height: 36px;
}
.list-financial-check ul li .img.small {
  width: 20px;
  height: 20px;
}
.list-financial-check ul li .img img {
  width: 100%;
  vertical-align: top;
  
  border-radius:12px ;
}
.list-financial-check ul li .wrap-check {
  position: relative;
  width: 100%;
}
.list-financial-check ul li .asset {
  line-height: 21px;
  margin-left: auto;
  font-weight: 400;
  font-size: 20px;
}
.list-financial-check ul li .asset em {
  margin-right: 1px;
  font-weight: 500;
}
.list-financial-check ul li .wrap-check input[type="checkbox"].chk-circle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.list-financial-check ul li .wrap-check input[type="checkbox"].chk-circle + label {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 30px;
}
.list-financial-check ul li .wrap-check input[type="checkbox"].chk-circle + label .tit {
  line-height: 21px;
  font-size: 17px;
}
.list-financial-check ul li .wrap-check input[type="checkbox"].chk-circle + label .card {
  flex-shrink: 0;
  width: 40px;
  align-self: start;
  margin-top: 8px;
}
.list-financial-check ul li .wrap-check input[type="checkbox"].chk-circle + label .card img {
  width: 100%;
}
/* .list-financial-check.type-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
} */
.section-type-asset.open .list-financial-check.type-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.list-financial-check.type-detail ul li .tit {
  display: flex;
  flex-direction: column;
  font-weight: 500;
  font-size: 15px;
}
.list-financial-check.type-detail ul li .detail {
  font-weight: 400;
  font-size: 13px;
  color: #888;
}
/* checkbox default 20x20, large 24x24, medium 18x18, small 14x14 */
.wrap-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
.wrap-check input[type="checkbox"].chk-circle {
  position: static;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  border: 1px solid #111;
  background-color: #fff;
}
.wrap-check input[type="checkbox"].chk-circle.type2 {
  border-color: #949494;
  background: #fff url(/images/md/asset/bg-check-grey.png) 50% 50% no-repeat;
  background-size: 12px auto;
}
.wrap-check input[type="checkbox"].chk-circle:checked {
  border-color: var(--primary);
  background: var(--primary) url("../images/common/ic-checkbox-c.svg") 50% 50% no-repeat;
}
.wrap-check input[type="checkbox"].chk-circle + label {
  font-weight: 500;
  font-size: 15px;
}
.wrap-check input[type="checkbox"].chk-circle.type2 + label {
  font-weight: 400;
}

.wrap-check input[type="radio"].chk-line,
.wrap-check input[type="checkbox"].chk-line {
  flex-shrink: 0;
  position: static;
  width: 20px;
  height: 20px;
}
.wrap-check input[type="radio"].chk-line + label,
.wrap-check input[type="checkbox"].chk-line + label {
  line-height: 20px;
  font-weight: 400;
  font-size: 15px;
}
.wrap-check input[type="radio"].chk-line:checked,
.wrap-check input[type="radio"].chk-line.type2:checked,
.wrap-check input[type="checkbox"].chk-line.type2:checked,
.wrap-check input[type="checkbox"].chk-line:checked {
  opacity: 1;
  background: url(/images/md/my-check-all-select.png) 50% 50% no-repeat;
  background-size: 16px auto;
}
.wrap-check input[type="radio"].chk-line:checked + label,
.wrap-check input[type="checkbox"].chk-line:checked + label {
  font-weight: 700;
  color: var(--primary);
}
.wrap-check input[type="radio"].chk-line.type2,
.wrap-check input[type="checkbox"].chk-line.type2 {
  background: url(/images/md/my-2-ic-check-sm.png) 50% 50% no-repeat;
  background-size: 16px auto;
}
.wrap-check.type-right input[type="radio"].chk-line,
.wrap-check.type-right input[type="checkbox"].chk-circle {
  order: 1;
}
.wrap-check.type-right input[type="radio"].chk-line + label,
.wrap-check.type-right input[type="checkbox"].chk-circle + label {
  order: 0;
}
/* size */
.wrap-check.large {
  gap: 8px;
}
.wrap-check.large input[type="checkbox"].chk-circle {
  width: 24px;
  height: 24px;
}
.wrap-check.large input[type="checkbox"].chk-circle:checked {
  background-size: 14px auto;
}
.wrap-check.large input[type="checkbox"].chk-circle + label {
  font-weight: 700;
  font-size: 15px;
}
.wrap-check.medium input[type="checkbox"].chk-circle {
  width: 18px;
  height: 18px;
}
.wrap-check.medium input[type="checkbox"].chk-circle:checked {
  background-size: 10px auto;
}
.wrap-check.medium input[type="checkbox"].chk-circle + label {
  font-size: 13px;
}
.wrap-check.small {
  gap: 4px;
}
.wrap-check.small input[type="checkbox"].chk-line,
.wrap-check.small input[type="checkbox"].chk-circle {
  width: 14px;
  height: 14px;
}
.wrap-check.small input[type="checkbox"].chk-circle:checked {
  background-size: 8px auto;
}
.wrap-check.small input[type="checkbox"].chk-line,
.wrap-check.small input[type="checkbox"].chk-line:checked {
  background-size: 12px auto;
}
.wrap-check.small input[type="checkbox"].chk-line + label,
.wrap-check.small input[type="checkbox"].chk-circle + label {
  font-size: 13px;
}

/* [2026-04-15 kho] [WPM-14496] [혜택] '고유가 피해지원금 화면 개발 요청' */
.gov-page-bottom-img {
  margin-top: 32px;
}
.gov-page-bottom-img .gov-logo-korea {
  width: 116px;
}
.gov-progress-box .gov-page-bottom-img .gov-logo-korea,
.gov-error-box .gov-page-bottom-img .gov-logo-korea {
  width: 100px;
}

.gov-page-contents .page-title-sub {
  font-size: 1.5rem;
  line-height: 2rem;
}
.gov-page-contents .color-red {
  color: #ce2d2d !important;
}
.gov-page-section .page-info-text strong {
  color: #111;
}
.gov-page-section .gov-blt-etc.pl10 {
  padding-left: 10px;
}
.gov-page-section .gov-blt-etc.pl10 > .blt-text {
  text-indent: -10px;
}
.gov-page-section .gov-blt-etc.pl20 {
  padding-left: 20px;
}
.gov-page-section .gov-blt-etc.pl20 > .blt-text {
  text-indent: -20px;
}

/* 꼭 확인하세요 체크박스 */
.gov-notice-check-area .terms-item + .terms-item {
  margin-top: 8px;
}
.gov-notice-check-area .terms-item .ui-label {
  padding: 15px 11px;
  border-radius: 8px;
  border: 1px solid var(--gray-30);
}
.gov-notice-check-area .terms-item .ui-checkbox-object {
  align-self: flex-start;
  margin-top: 2px;
}
.gov-notice-check-area .terms-item .ui-label-text {
  font-size: 14px;
  line-height: 1.5;
}

/* 고유가 피해지원금 */
.gov-oil-page-contents .gov-agree-text-box .txt1 {
  text-align: center;
}
.gov-oil-page-contents .gov-progress-box {
  height: 233px;
  border-radius: 8px;
  background: #f6f6f6;
}
.gov-oil-page-contents .gov-error-box {
  min-height: none;
  padding-block: 40px;
}
/* //[2026-04-15 kho] [WPM-14496] [혜택] '고유가 피해지원금 화면 개발 요청' */


/* [2026-05-06 KJH] [WPM-14702] 장기카드대출 즉시결제 시 설문조사 */
.layer-wrap .layer-survey {
  padding-inline: 24px;
  padding-bottom: 15px;
}
.layer-wrap .layer-survey-desc {
  color: #008882;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
}
.layer-wrap .layer-survey-tit {
  margin-top: 28px;
  font-weight: 700;
  font-size: 17px;
  line-height: 21px;
}
.ui-radio-group.type-radio-survey {
  flex-direction: column;
  row-gap: 16px;
  margin-top: 20px;
}
.ui-radio-group.type-radio-survey .ui-radio-block {
  margin: unset;
}
.ui-radio-group.type-radio-survey .ui-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: #f5f5f5;
  border-radius: 8px;
}
.ui-radio-group.type-radio-survey .ui-radio-object {
  opacity: 0.2;
}
.ui-radio-group.type-radio-survey .ui-radio:checked ~ .ui-label {
  background-color: rgba(2, 156, 148, 0.10);
}
.ui-radio-group.type-radio-survey .ui-radio:checked ~ .ui-label .ui-radio-object {
  opacity: 1;
}
/* // [2026-05-06 KJH] [WPM-14702] 장기카드대출 즉시결제 시 설문조사 */

/* [2026-05-11 KEJ] [WPM-14401] 추가 */
.postal-code-btn{
  padding: 1rem 1.2rem;
  box-sizing: border-box;
}

.zipcode-item-wrap .title {
  font-size: 1.6rem;
  font-weight: 400;
  color: #666;
}
.zipcode-item-wrap {
  position: relative;
  box-sizing: border-box;
}

.zipcode-item + .zipcode-item {
  margin-top: 3.5rem;
}
.zipcode-item-wrap .floating-input-group .ui-input {
  display: block;
  width: 100%;
  height: 7.1rem;
  line-height: 7.1rem;
  padding: 2.2rem 2rem;
  box-sizing: border-box;
  font-size: 2rem;
  color: #888;
  border: 1px solid #d9d9d9;
}
.zipcode-item-wrap .floating-input-group .ui-input[name="zip_code"] {
  border-radius: 6px 6px 0px 0px;
}

.zipcode-item-wrap .floating-input-group .ui-input[name="zip_alias"] {
  border-radius: 0px 0px 6px 6px;
  border-top: 0;
}

.floating-input-group {
  margin-top: 2rem;
}

.floating-input-group label {
  position: absolute;
  top: 1.15rem;
  left: 2rem;
  font-size: 1.2rem;
  color: #71747b;
  transition: 0.2s;
  opacity: 0; /* 처음엔 숨김 */
}

.zipcode-item-wrap .floating-input-group .ui-input:focus,
.zipcode-item-wrap .floating-input-group .ui-input:not(:placeholder-shown) {
  padding: 3.45rem 2rem 1.15rem;
  color: #111;
}

.zipcode-item-wrap .floating-input-group .ui-input:focus::placeholder {
  font-size: 0;
  color: transparent !important;
}

.zipcode-item-wrap .floating-input-group .ui-input:focus::-webkit-input-placeholder {
  font-size: 0;
  color: transparent !important;
}

.zipcode-item-wrap .floating-input-group .ui-input:focus::-moz-placeholder {
  font-size: 0;
  color: transparent !important;
} /* 파이어폭스 */
.zipcode-item-wrap .floating-input-group .ui-input:focus:-ms-input-placeholder {
  font-size: 0;
  color: transparent !important;
} /* IE */
.zipcode-item-wrap .floating-input-group .ui-input:focus + label,
.zipcode-item-wrap .floating-input-group .ui-input:not(:placeholder-shown) + label {
  opacity: 1;
  top: 1.15rem;
}

.zipcode-item-wrap .floating-input-group .input-container {
  position: relative;
}
.zipcode-plus-btn {
  gap: 0.4rem;
}
.zipcode-plus-btn .plus-icon {
  width: 8px;
  height: 8px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zipcode-plus-btn .plus-icon::before,
.zipcode-plus-btn .plus-icon::after {
  content: "";
  position: absolute;
  background-color: #111;
  border-radius: 2px;
}
.zipcode-plus-btn .plus-icon::before {
  width: 9px;
  height: 1px;
}
.zipcode-plus-btn .plus-icon::after {
  height: 9px;
  width: 1px;
}

/* [2026-05-14 KEJ] [WPM-14790] 테두리 체크박스 추가 */
.notice-title--cancle {
  margin-bottom: 1.6rem;
  padding-left: 2.3rem;
  background: url("/images/icon/ic-notice-dark.svg") no-repeat 0 0;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2rem;
}
.ui-checkbox-block.type-line {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  border: 2px solid #d9d9d9;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.3s;
}

.ui-checkbox-block.type-line.active {
  border-color: #00a49d;
}
.ui-checkbox-block.type-line .ui-label {
  width: 100%;
  align-items: start;
  padding: 1.5rem 2rem 2rem 1.6rem;
  box-sizing: border-box;
}
.ui-checkbox-block.type-line .ui-label-text {
  display: block;
  font-size: 1.4rem;
  font-weight: 500;
}
.ui-checkbox-block.type-line .ui-label-text + .ui-label-des {
  margin-top: 1.5rem;
}
.ui-checkbox-block.type-line .ui-label-des {
  display: block;
  font-size: 1.4rem;
  line-height: 2.2rem;
  font-weight: 400;
}

.ui-checkbox-block.type-line .info-list {
  display: block;
  margin-top: 1.2rem;
  color: #111;
}
.ui-checkbox-block.type-line .info-list .info-item {
  display: block;
}
.ui-checkbox-block.type-line .info-list .info-item + .info-item {
  margin-top: 0.6rem;
}
.ui-checkbox-block.type-line + .ui-checkbox-block.type-line {
  margin-top: 1.6rem;
}
@media (max-width: 374px) {
  .resize-button {
    padding: 0 1.5rem 3rem;
  }
}

/* [2026-05-21 KJH] [WPM-14742] 트래블버킷 전월실적 */
.txt-color-primary {
  color: #00a49d;
}
.info-list.-type-trvb {
  color: #888;
  font-size: 1.3rem;
}
.info-list.-type-trvb .info-item + .info-item {
  margin-top: 0.4rem;
}

.trvb-foot {
  padding: 3rem 2.4rem 4.2rem;
  background-color: #364147;
}
.trvb-foot-tit__img {
  width: 8.8rem;
}
.trvb-foot-tit__img img {
  width: 100%;
}
.trvb-foot-tit {
  margin-top: 1.6rem;
  color: #b7c5c8;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.trvb-foot-tit__list {
  display: block;
  margin-top: 2.4rem;
  color: #b7c5c8;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.trvb-foot-info li {
  margin-top: 0.6rem;
  padding-left: 1.8rem;
  color: rgba(183, 197, 200, 0.7);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.8rem;

  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1.2rem;
}
.trvb-foot-info__call {
  background-image: url("/trvb/images/icon/ico_foot_call.png");
}
.trvb-foot-info__mail {
  background-image: url("/trvb/images/icon/ico_foot_mail.png");
}
.trvb-foot-link {
  display: inline-block;
  margin-top: 2.4rem;
  color: #b7c5c8;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.8rem;
}

/* [2026-05-26 KEJ] [WPM-14813] 라이프UP > 자동차 신규 */
.mydata-car-contents {
  padding: 2.4rem 2.4rem 3rem;
}
.mydata-car-section {
  position: relative;
  box-sizing: border-box;
  padding: 2.8rem 0 1.8rem;
}
/* 첫 번째 섹션의 상단 여백 초기화 */
.mydata-car-contents > .mydata-car-section:nth-child(1) {
  padding-top: 0px;
}
.mydata-car-section.type-line {
  padding-top: 3.8rem;
}
.mydata-car-section.type-line::before {
  content: "";
  position: absolute;
  top: 0;
  left: -24px;
  right: -24px;
  height: 10px;
  background-color: var(--gray-10);
}
.mydata-car-section .section-title-box .title {
  font-size: 1.6rem;
  line-height: 2.2rem;
  font-weight: 700;
}
.mydata-car-section .section-title-box + .car-col-list {
  margin-top: 2.2rem;
}
.car-col-list.car-col-list--gap {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.car-col-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.car-col-list.car-col-list--line > .car-col-item + .car-col-item {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #f5f5f5;
}
.car-item__head {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.car-col-item .link-title {
  font-size: 1.6rem;
  line-height: 2.6rem;
  font-weight: 500;
}
.car-item__price-box {
  display: flex;
  flex-direction: column;
  row-gap: 0.2rem;
}
.car-item__price-box .box-label {
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 500;
  color: #666;
}
.car-item__price-box .price-val {
  font-size: 2rem;
  line-height: 2.6rem;
  font-weight: 700;
}
.car-row-list {
  display: flex;
  /* align-items: center; */
  gap: 1rem;
}
.car-row-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100% - 1rem);
}
.car-row-item .item-link-con {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.car-row-item .link-title {
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 500;
  text-align: center;
}
.car-col-item .ico {
  width: 5.2rem;
  height: 5.2rem;
  border-radius: 50%;
  background-color: #f4f6f8;
}
.car-col-item .ico > img {
  width: 5.2rem;
  height: auto;
}
.car-row-list .ico {
  display: inline-block;
  width: 5.6rem;
  height: auto;
}
.car-col-item .arrow-block-con {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.car-col-item .arrow-block-con .ico {
  width: 4rem;
  height: auto;
}
.mydata-car-section .btn {
  min-width: 7.8rem;
  line-height: 3.4rem;
  border-radius: 0.4rem;
  font-size: 1.4rem;
  font-weight: 500;
  text-align: center;
}
.mydata-car-section .btn.btn-init {
  background: #d8f3f2;
  color: #008882;
}
.mydata-car-section .btn.btn-primary {
  background: #029c94;
  color: #fff;
}

/* [2026-05-27 KHY] 마이데이터 오픈뱅킹 추가 */
.open-area {
  border-top:1px solid var(--gray-10);
  padding-top:3.5rem;
}
.open-area .open-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 24px;
  margin-bottom:20px;
}
.open-area .open-title h3 {
  font-size: 1.8rem;
  font-weight: 700;
}
.open-area .right {
  display: flex;
  align-items: center;
}
.open-area .right > span {
  color: var(--gray-80);
  font-size:1.3rem;
  font-weight: 400;
}
.open-area .right > span:first-child {
  margin-right:0.6rem;
  padding-right:0.6rem;
  position: relative;
}
.open-area .right > span:first-child::before {
  content: "";
  width: 0.1rem;
  height: 1rem;
  position: absolute;
  background-color:#d9d9d9;
  right:-0.2rem;
  top:0.3rem;
}
.open-area .right > span .complete {
  color: var(--primary)
}
.open-area .right > span .fail {
  color: #a70305;
}
.open-cont {
  margin-bottom:3.2rem;
}
.open-cont h4 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom:20px;
}
.open-cont .open-wrap {
  display: flex;
  gap:1rem;
}
.open-cont .open-wrap .info-wrap {
  display: flex;
  flex-direction: column;
}
.open-cont .open-wrap .info-wrap .info-title {
  font-size: 1.5rem;
  font-weight: 500;
  height: 20px;
}
.open-cont .open-wrap .info-wrap .info-number {
  font-size:1.3rem;
  font-weight: 400;
  color:#888;
  height: 16px;
}
.open-cont .logo-image {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 1.2rem;
  overflow: hidden;
}
.open-cont .logo-image img {
  width: 100%;
  
}
.open-cont .right {
  margin-top:0.6rem;
}
.open-cont ul li ~ li {
  margin-top:2rem;
}

/* [2026-05-21 KEJ] 236312461 추가 */
.subscribe-contents .subscribe-ai-visual {
  width: 100%;
  min-height: 148px;
  background: url("/images/subscribe/ai-subscribe-visual.webp") no-repeat center center / contain;
}
.subscribe-contents .step-img-item {
  width: 100%;
  height: auto;
  margin-top: 1.2rem;
  border-radius: 1.2rem;
  background-color: #fff;
}
.subscribe-contents .js-ui-accordion__layer .step-img-wrap .step-img-item .step-img {
  width: 100%;
  height: auto;
}
.subscribe-list-contents .info-list > .info-item.type-asterisk {
  margin-left: 0.7rem;
}
.page-title-box .page_info {
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 400;
}

.aiservice-radio-top {
  display: flex;
  justify-content: space-between;
}
.aiservice-radio-top .plan-title,
.aiservice-radio-top .plan-price {
  font-size: 1.8rem;
  line-height: 2.3rem;
  font-weight: 700;
}
.aiservice-radio-top .badge {
  padding: 0.4rem 1rem;
  box-sizing: border-box;
  font-size: 1.1rem;
  line-height: 1.4em;
  border-radius: 1.2rem;
  background: #f0f0f0;
  color: #666;
}
.ui-radio-block.type-box .ui-radio:checked + .ui-label .aiservice-radio-top .badge {
  color: #fff;
  background: #029c94;
}
.aiservice-radio-top .aiservice-radio-title {
  display: flex;
  gap: 0.8rem;
}
.ui-radio-block.type-box .ui-label.label-lg {
  padding: 2rem 1.8rem;
  border-radius: 1.2rem;
}
.aiservice-radio-bottom .plan-desc {
  display: block;
  margin-top: 0.8rem;
  font-size: 1.3rem;
  line-height: 1.8rem;
  font-weight: 400;
}

/* [2026-06-25 KJH] [WPM-15143] 무빙카드 롤링배너 */
.date-head {
  position:relative;
}
.bnr-rolling {
  position:absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 7rem;
  height: 2.4rem;
  overflow: hidden;
}
.bnr-rolling::before,
.bnr-rolling::after  {
  content: "";
  position: absolute;
  top: 0;
  z-index:1;
  width: 0.8rem;
  height: 100%;
}
.bnr-rolling::before {
  left:0;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
}
.bnr-rolling::after {
  right:0;
  transform: rotate(180deg);
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, #FFF 99.52%);
}

.bnr-rolling-track {
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
  animation: bnrRolling 12s linear infinite;
  will-change: transform;
}
.bnr-rolling-track img {
  display: block;
  flex-shrink: 0;
  height: 1.2rem;
}
@keyframes bnrRolling {
  from {
   transform: translateX(0);
  }
  to {
   transform: translateX(-341px);
  }
}

.total-amount.type-narrow {
  position: relative;
}
.total-bnr {
  position: absolute;
  right: 0;
  top: 0;
  width: 6.8rem;
  height: 6.8rem;
}
.total-bnr img {
  width: 100%;
}
/* [2026-06-25 KJH] [WPM-15143] 무빙카드 롤링배너 */

/* [2026-06-29 KEJ] [WPM-15080] 추가 */
.info-area-gray {
  padding: 2rem;
  box-sizing: border-box;
  border-radius: 0.6rem;
  background: #f8f8f8;
}
.info-area-gray .info-list {
  color: #111;
}
.info-area-gray .info-title {
  font-weight: 700;
}
.info-area-gray .info-title + .info-item,
.info-area-gray .info-item + .info-item {
  margin-top: 1.2rem;
}
.total-box-row {
  display: flex;
  flex-direction: column;
  row-gap: 0.8rem;
}
.total-box-row .total-box-desc {
  font-size: 1.2rem;
  line-height: 1.5rem;
  font-weight: 400;
  color: #888;
}

/* [2026-07-03 KEJ] [WPM-14934] 추가 */
.subscribe-contents .event-line-box {
  width: 100%;
  height: auto;
  padding: 2.4rem;
  box-sizing: border-box;
  border: 1px solid #e5e5e5;
  border-radius: 1.6rem;
}
.subscribe-contents .event-line-box .title {
  font-size: 1.6rem;
  line-height: 2rem;
  font-weight: 700;
}
.subscribe-contents .event-line-box .desc {
  font-size: 1.5rem;
  line-height: 2.2rem;
  font-weight: 400;
  color: #242424;
}
.subscribe-contents .event-line-box .title + .desc,
.subscribe-contents .event-line-box .title + .step-list {
  margin-top: 0.8rem;
}
.subscribe-contents .event-con-list > li + li {
  margin-top: 2.4rem;
}

.subscribe-contents .event-con-list .step-list .step-item {
  margin-bottom: 0.8rem;
}
.subscribe-contents .event-con-list .step-list .step-item:last-child {
  margin-bottom: 0;
}

.subscribe-contents .event-con-list .step-list .step-header {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.subscribe-contents .event-con-list .step-list .step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background-color: #35506e;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 50%;
}

.subscribe-contents .event-con-list .step-list .step-title {
  font-size: 1.5rem;
  font-weight: 400;
  color: #242424;
}

.subscribe-contents .event-con-list .step-list .step-desc {
  font-size: 1.4rem;
  line-height: 2.2rem;
  font-weight: 400;
  color: #666;
}
.subscribe-list-contents .info-list .info-list .info-list {
  font-size: 1.3rem;
  line-height: 2rem;
  margin-top: 0;
}
/* //[2026-07-03 KEJ] [WPM-14934] 추가 */

/* [WPM-15178] 마이 텍스트형 안내 팝업 제작 */
.layer-notice-txt .wcms-title-large {
  margin-bottom: 16px;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 2.6rem;
}
.layer-notice-txt .wcms-title-normal {
  margin-bottom: 6px;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.9rem;
}
.layer-notice-txt .normal-text {
  font-size: 1.6rem;
  line-height: 2.2rem;
}
.layer-notice-txt .small-text {
  font-size: 1.4rem;
  line-height: 2rem;
  color: #696969;
}
/* // [WPM-15178] 마이 텍스트형 안내 팝업 제작 */

/* [2026-07-30 KEJ] [WPM-15464] 추가 */
.subscribe-contents .event-line-box .title.lh-22{
  line-height: 2.2rem;
}
.subscribe-contents .chat-container {
  width: 100%;
  padding: 1.6rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  border-radius: 1.2rem;
  background: #f4f6f8;
}

.subscribe-contents .chat-bubble {
  padding: 1rem 1.6rem;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.5px;
  word-break: keep-all;
}

.subscribe-contents .chat-bubble.light {
  background-color: #ffffff;
}

.subscribe-contents .chat-bubble.right {
  align-self: flex-end;
  border-radius: 24px 4px 20px 24px;
}

.subscribe-contents .chat-bubble.left {
  align-self: flex-start;
  border-radius: 4px 24px 24px 20px;
}

.subscribe-contents .chat-row {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

.subscribe-contents .shield-icon {
  width: 3rem;
  height: 3rem;
}
.subscribe-contents .shield-icon > img {
  display: inline-block;
  width: 100%;
}

.subscribe-contents .chat-bubble.highlight {
  background-color: #008985;
  color: #ffffff;
  border-radius: 4px 24px 24px 20px;
  padding: 1rem 1.6rem;
}
.subscribe-contents .share-group {
  display: flex;
  justify-content: space-between;
}
.subscribe-contents .share-group .ico {
  width: 3.2rem;
  height: 3.2rem;
}
.subscribe-contents .share-btn {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  background: url("/images/icon/btn-share.svg") no-repeat center/contain;
}

/* [2026-07-31 KEJ] [WPM-15450] 추가 */
.cadv-con .info-sec + .info-sec {
  margin-top: 3.5rem;
}
.cadv-con .info-val {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  margin-top: 0.8rem;
}
.cadv-con .action-card-list {
  width: 100%;
  height: auto;
  padding: 2rem;
  border: 1px solid #e5e5e5;
  border-radius: 1.5rem;
  box-sizing: border-box;
}
.cadv-con .info-val + .action-card-list {
  margin-top: 2rem;
}
.cadv-con .action-card-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cadv-con .action-card-item + .action-card-item {
  padding-top: 2rem;
  margin-top: 2rem;
  box-sizing: border-box;
  border-top: 1px solid #e5e5e5;
}
.cadv-con .action-card-item .arrow {
  width: 8px;
  margin-left: 0.2rem;
}
.cadv-con .info-title {
  font-size: 1.5rem;
  font-weight: 500;
}
.cadv-con .highlight {
  font-size: 2rem;
  font-weight: 700;
  color: #8865ef;
}
.cadv-con .sub-text,
.cadv-con .prev-text {
  font-size: 2rem;
  font-weight: 500;
  color: #888;
}
.cadv-con .card-desc {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 500;
}
.cadv-con .menu-banner-list {
  padding: 3.5rem 2.4rem;
}
.cadv-con .menu-banner-list-title {
  font-size: 1.7rem;
  line-height: 2.1rem;
  font-weight: 500;
}

.cadv-con .menu-banner-item-list {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 2.5rem;
}
.cadv-con .menu-banner-item {
  padding: 0;
  width: auto;
}
.cadv-con .use-notice-area{
  margin-top: 3.5rem;
}
.cadv-con .ui-arrow-change {
  background: url("/images/gmh/renew2019/ico_brand_step_arrow.gif") no-repeat center / contain;
}
.cadv-con .ui-arrow-change:not(:last-child) {
  margin: 0;
}
.cadv-con .action-card-item .arrow{
  height: 1.2rem;
}
.cadv-con .ap-box{
  align-items: center;
}

/* [2026-09-11 KEJ] [WPM-15994] 대출정보관리 배너 추가 */
.products .products-banner{
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.products .products-banner .link{
  display: block;
  margin: 0 -0.4rem;
  border-radius: 1.6rem;
}
.products .products-banner img{
  width: 100%;
  height: auto;
}

/* [2026-09-22 KJH] [WPM-15913] 하나페이 가입 프로스세 웹뷰 전환 */
/* 가입 프로세스 - 공통 */
.pj-wrap *, .pj-wrap *::before, .pj-wrap *::after  {
  box-sizing: border-box;
}
.pj-txt-dot {
  position: relative;
  padding-left: .8rem;
  color: #666;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.8rem;
}
.pj-txt-dot::before {
  content: "";
  position: absolute;
  left: 0;
  top: .8rem;
  width: .2rem;
  height: .2rem;
  background-color: #666;
}
.pj-txt-dot + .pj-txt-dot {
  margin-top: .8rem;
}
.pj-wrap .ui-basic-button {
  border-radius: 1.2rem;
}
.pj-wrap .ui-basic-button {
  min-height: 5.6rem;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2.2rem;
}

/* 가입 프로세스 - 접근권한 */
.pj-perm {
  padding-top: 3rem;
}
.pj-perm-tit {
  color: #111;
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 3.6rem;
}
.pj-perm-tit span {
  display: block;
}
.pj-perm-grp {
  margin-top: 3.6rem
}
.pj-perm-grp .tit {
  color: #888;
  font-size: 1.3rem;
  font-weight: 700;
}
.pj-perm-grp .list {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-top: 1.2rem;
  padding: 1.6rem;
  background: #F4F6F8;
  border-radius: 2rem;
}
.pj-perm-grp .list-item {
  display: block;
  padding-left: 4.8rem;
}
.pj-perm-grp .list-item[class*="-ico-"] {
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 4rem auto;
}
.pj-perm-grp .list-item.-ico-call {
  background-image: url("/images/payjoin/ico/ico_call.webp");
}
.pj-perm-grp .list-item.-ico-bell {
  background-image: url("/images/payjoin/ico/ico_bell.webp");
}
.pj-perm-grp .list-item.-ico-pic {
  background-image: url("/images/payjoin/ico/ico_pic.webp");
}
.pj-perm-grp .list-item.-ico-sms {
  background-image: url("/images/payjoin/ico/ico_sms.webp");
}
.pj-perm-grp .list-item.-ico-camera {
  background-image: url("/images/payjoin/ico/ico_camera.webp");
}
.pj-perm-grp .list-item.-ico-location {
  background-image: url("/images/payjoin/ico/ico_location.webp");
}
.pj-perm-grp .list-item.-ico-address {
  background-image: url("/images/payjoin/ico/ico_address.webp");
}
.pj-perm-grp .list-item.-ico-mic {
  background-image: url("/images/payjoin/ico/ico_mic.webp");
}
.pj-perm-grp .list-item.-ico-tracking {
  background-image: url("/images/payjoin/ico/ico_tracking.webp");
}
.pj-perm-grp .list-tit {
  color: #111;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2rem;
}
.pj-perm-grp .list-desc {
  color: #666;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.6rem;
}

/* 가입 프로세스 - 인트로 (온보딩 슬라이드, 통이미지) */
.pj-intro {
  margin-top: -30px;
  margin-inline: -24px;
}
.pj-intro-list {
  padding: 0;
}
.pj-intro-img {
  display: block;
  width: 100%;
}

/* pagination dot: 기본 회색 원형, 활성만 검정 알약 모양으로 확장 */
.pj-intro .swiper-pagination {
  position: static;
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  padding-block: .3rem;
}
.pj-intro .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0;
}
.pj-intro .swiper-pagination-bullet {
  position: relative;
  width: 1.2rem;
  height: 1.2rem;
  background-color: transparent;
  border: 0;
  opacity: 1;
}
.pj-intro .swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: .6rem;
  height: .6rem;
  background-color: #999EA0;
  border-radius: 50%;
  transition: background-color .4s ease;
}
.pj-intro .swiper-pagination-bullet-active {
  width: 3rem;
}
.pj-intro .swiper-pagination-bullet-active::before {
  width: 2.4rem;
  border-radius: 2rem;
  background-color: #111;
}

/* 가입 프로세스 - 스텝1 본인인증 */
.pj-auth-tit {
  color: #111;
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 3rem;
}
.pj-auth-tit b {
  padding-bottom: .6rem;
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.7rem;
}
.pj-auth-progress {
  display: inline-flex;
  align-items: center;
  column-gap: 1.2rem;
  position: relative;
  margin-block: 1.6rem 3.6rem;
}
.pj-auth-progress::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 80%;
  height: 1px;
  border-top: 1px dashed #E5E5E5;
}
.pj-auth-progress .item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  background-color: #E5E5E5;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  border-radius: 50%;
}
.pj-auth-progress .item.is-active {
  background-color: #02B4AA;
}
.pj-auth-list {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.pj-auth-list .item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 2.4rem;
  min-height: 10.2rem;
  background-color: #F4F6F8;
  border-radius: 2rem;
}
.pj-auth-list .item[class*="-ico-"] {
  background-repeat: no-repeat;
  background-size: 7rem auto;
}
.pj-auth-list .item.-ico-phone {
  background-position: center right 1.6rem;
  background-image: url("/images/payjoin/ill_auth_phone.webp");
}
.pj-auth-list .item.-ico-hana {
  background-position: top 2rem right 1.6rem;
  background-image: url("/images/payjoin/ill_auth_hana.webp");
}
.pj-auth-list .item.-ico-corp {
  background-position: top 2rem right 1.6rem;
  background-image: url("/images/payjoin/ill_auth_corp.webp");
}
.pj-auth-list .item-tit {
  color: #111;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.4rem;
}
.pj-auth-list .item-desc {
  margin-top: .4rem;
  color: #666;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.8rem;
}
.pj-auth-add {
  display: block;
  overflow: hidden;
  width: 100%;
  border-radius: 5.5555vw;
}
.pj-auth-add img {
  display: block;
  width: 100%;
}

/* 가입 프로세스 - 스텝3 약관동의 */
.pj-check,
.pj-check-circle {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  margin: 0;
  border: 0;
}
.pj-check {
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  background-image: url("/images/payjoin/ico/ico_check_off.webp");
}
.pj-check:checked {
  background-image: url("/images/payjoin/ico/ico_check_on.webp");
}
.pj-agree-subitem .pj-check {
  align-self: flex-start;
}
.pj-check-circle {
  width: 2rem;
  height: 2rem;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid #A2A2A2;
  border-radius: 50%;
  transition: background-color .2s ease;
}
.pj-check-circle:checked {
  background-size: 100%;
  background-color: #029C94;
  background-image: url("/images/payjoin/ico/ico_check_circle_on.webp");
  border: unset;
}
.pj-check:focus-visible,
.pj-check-circle:focus-visible {
  outline: 2px solid #02B4AA;
  outline-offset: 2px;
}

/* 가입 프로세스 - 스텝3 약관동의 - 클릭 가능한 요소(체크박스 / 라벨 / 아이콘 버튼) cursor 통일 */
.pj-check,
.pj-check-circle,
.pj-agree-all-label,
.pj-agree-grp-tit,
.pj-agree-label,
.pj-agree-view,
.pj-agree-toggle {
  cursor: pointer;
}

/* 가입 프로세스 - 스텝3 약관동의 - 약관 전체동의 */
.pj-agree-all {
  display: flex;
  align-items: center;
  column-gap: .8rem;
  padding: 1.6rem;
  background: #F5F5F5;
  border-radius: 1.2rem;
}
.pj-agree-all-label {
  display: block;
  flex: 1;
  color: #111;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2rem;
}

/* 가입 프로세스 - 스텝3 약관동의 - 섹션(필수 항목 약관 / 선택 항목 약관) */
.pj-agree-all ~ .pj-agree-grp {
  margin-top: 1.6rem;
}
.pj-agree-grp {
  border: 1px solid #E5E5E5;
  border-radius: 1.2rem;
  overflow: hidden;
}
.pj-agree-grp-head {
  display: flex;
  align-items: center;
  column-gap: .8rem;
  padding: 1.6rem;
  border-bottom: 1px solid #E5E5E5;
}
.pj-agree-grp-tit {
  display: block;
  flex: 1;
  color: #111;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2rem;
}
.pj-agree-list {
  display: flex;
  flex-direction: column;
  row-gap: .2rem;
  padding-block: 1.2rem;
}

/* 가입 프로세스 - 스텝3 약관동의 - 한 줄(단일 약관 / 하위 약관) 공통 행 */
.pj-agree-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: .8rem;
  padding-inline: 1.6rem 1.2rem;
}
.pj-agree-subitem {
  margin-top: .2rem;
}
.pj-agree-subitem .pj-agree-row {
  column-gap: .4rem;
  padding-block: .4rem;
  padding-inline: 4.4rem 1.2rem;
}

/* 가입 프로세스 - 스텝3 약관동의 - 하위 목록을 가진 그룹 행 */
.pj-agree-item.type-group {
  padding: 0;
}
.pj-agree-sub {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  row-gap: .8rem;
}

.pj-agree-label {
  display: flex;
  flex-direction: column;
  row-gap: .2rem;
  flex: 1;
  color: #111;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.8rem;
}
.pj-agree-subitem .pj-agree-label {
  row-gap: .8rem;
  color: #666;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.8rem;
}

/* 가입 프로세스 - 스텝3 약관동의 - 3뎁스: 광고성 정보 수신 동의(채널 체크) */
.pj-agree-channel {
  padding-inline: 6.8rem 1.2rem;
}
.pj-agree-channel-tit {
  padding-block: .3rem;
  color: #666;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.8rem;
}
.pj-agree-channel-list {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  padding-block: .4rem;
}
.pj-agree-channel-item {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.pj-agree-channel-label {
  color: #666;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.8rem;
}

/* 가입 프로세스 - 스텝3 약관동의 - 등급 뱃지(안심/다소안심) - ranking-tag 재사용 안 하고 독립 작성 */
[class*="pj-agree-badge"] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 1.8rem;
  padding-inline: .4rem;
  border-radius: .3rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
}
.pj-agree-badge-01 {
  background-color: #3493DA;
}
.pj-agree-badge-02 {
  background-color: #159C55;
}

/* 가입 프로세스 - 스텝3 약관동의 - 오른쪽 아이콘 버튼(전문보기 > / 아코디언 ∨) */
.pj-agree-view {
  flex-shrink: 0;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background: url("/images/payjoin/ico/ico_view.webp") no-repeat center / 100%;
}
.pj-agree-sub .pj-agree-view {
  align-self: flex-start;
  background-image: url("/images/payjoin/ico/ico_view_gray.webp");
}
.pj-agree-toggle {
  flex-shrink: 0;
  display: inline-block;
  width: 2rem;
  height: 2rem;
}
.pj-agree-toggle .ic-toggle {
  display: block;
  width: 100%;
  height: 100%;
  background: url("/images/payjoin/ico/ico_toggle.webp") no-repeat center / 100%;
  transition: transform .3s ease;
}
.pj-agree-toggle[aria-expanded="true"] .ic-toggle {
  transform: rotate(180deg);
}
.pj-agree-view:focus-visible,
.pj-agree-toggle:focus-visible {
  outline: 2px solid #02B4AA;
  outline-offset: 2px;
}

/* 가입 프로세스 - 스텝3 약관동의 - 약관 팝업 로딩/에러 메시지 */
.pj-agree-msg {
  padding: 2.4rem;
  color: #8B95A1;
  font-size: 1.3rem;
}

/* 가입 프로세스 - 완료 (vip/일반/법인, 가족, 비회원) */
.pj-complete {
  padding-top: 4.8rem;
}
.pj-complete-tit {
  text-align: center;
  color: #111;
}
.pj-complete-tit strong {
  display: block;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 3.2rem;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 3.2rem;
}
.pj-complete-tit span {
  display: block;
  margin-top: .8rem;
  color: #111;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 3.6rem;
}
.pj-complete-list {
  display: flex;
  flex-direction: column;
  row-gap: 1.6rem;
  margin-top: 4.8rem;
}
.pj-complete-list .item-main {
  display: block;
  min-height: 18rem;
  padding-block: 2.4rem 1.6rem;
  padding-inline: 2.4rem 1.6rem;
  border-radius: 2rem;
  background: #E6F2FF url("/images/payjoin/ill_complete_mydata.webp") no-repeat right 1.6rem bottom 1.6rem / 9.8rem auto;
}
.pj-complete-list .item-main-tit {
  color: #111;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.6rem;
}
.pj-complete-list .item-main-desc {
  margin-top: .4rem;
  color: #666;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2rem;
}
.pj-complete-list .item-main-link {
  display: inline-flex;
  align-items: center;
  column-gap: .2rem;
  margin-top: 1rem;
  color: #111;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.8rem;
}
.pj-complete-list .item-main-link::after {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  background: url("/images/payjoin/ico/ico_view_black.webp") no-repeat center / 1.2rem auto;
}
.pj-complete-list .item {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  min-height: 9.2rem;
  padding-block: 1.6rem;
  padding-inline: 2.4rem 2rem;
  background-color: #F4F6F8;
  background-repeat: no-repeat;
  background-position: center right 2rem;
  background-size: 6rem auto;
  border-radius: 2rem;
}
.pj-complete-list .item-tit {
  color: #111;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.4rem;
}
.pj-complete-list .item-desc {
  margin-top: .4rem;
  color: #666;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.8rem;
}
.pj-complete-list .item.type-vip {
  background-image: url("/images/payjoin/ill_complete_vip.webp");
}
.pj-complete-list .item.type-moving {
  background-image: url("/images/payjoin/ill_complete_moving.webp");
}
.pj-complete-list .item.type-travel {
  background-image: url("/images/payjoin/ill_complete_travel.webp");
}

/* 가입 프로세스 - 비회원 가입 시 카드발급 유도 */
.pj-nocard-desc {
  color: #029C94;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.6rem;
}
.pj-nocard-tit {
  margin-top: 1.2rem;
  color: #111;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 3.6rem;
}
.pj-nocard-list {
  display: flex;
  flex-direction: column;
  row-gap: 1.6rem;
  margin-top: 3.6rem;
}
.pj-nocard-list .item {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  min-height: 9.2rem;
  padding-block: 1.6rem;
  padding-inline: 2.4rem 2rem;
  background-color: #F4F6F8;
  background-repeat: no-repeat;
  background-position: center right 2rem;
  background-size: 6rem auto;
  border-radius: 2rem;
}
.pj-nocard-list .item-tit {
  color: #111;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.4rem;
}
.pj-nocard-list .item-link {
  display: inline-flex;
  align-items: center;
  column-gap: .2rem;
  margin-top: .4rem;
  color: #666;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.8rem;
}
.pj-nocard-list .item-link::after {
  content: "";
  opacity: .7;
  width: 1.2rem;
  height: 1.2rem;
  background: url("/images/payjoin/ico/ico_view_black.webp") no-repeat center / 1.2rem auto;
}
.pj-nocard-list .item.type-kpass {
  background-image: url("/images/payjoin/ill_nocard_kpass.webp");
}
.pj-nocard-list .item.type-travel {
  background-image: url("/images/payjoin/ill_nocard_travel.webp");
}
.pj-nocard-list .item.type-travelgo {
  background-image: url("/images/payjoin/ill_nocard_travelgo.webp");
}
