@import "./duet-date-picker-default.css";
@import "../fonts/SpoqaHanSansNeo/style.css";
@import "./init.css";
@import "/css/mobile_320.css";

/* 인코딩 확인 */

/* script style */
.is-scroll-blocking,
.is-scroll-blocking body,
.is-scroll-blocking #wrap {
  overflow: hidden;
}
.is-scroll-blocking.is-scrollbars-width #wrap {
  margin-right: 17px;
}
.swiper-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.swiper-vertical > .swiper-wrapper {
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
}
.js-fake-top,
.js-fake-bottom {
  -ms-flex: none;
  flex: none;
  -webkit-box-flex: 0;
}
[data-checkbox-tab-panel],
[data-select-tab-panel],
[data-tab]:not(.js-tabpanel-opened) {
  display: none;
}
.js-ui-accordion__layer {
  display: none;
  height: 0;
}
.js-ui-accordion__opener .close-text,
.js-ui-dropdown__opener .close-text {
  display: none;
}
.js-ui-accordion__opener.js-accordion-active .open-text,
.js-ui-dropdown.js-dropdown-opened .js-ui-dropdown__opener .open-text {
  display: none;
}
.js-ui-accordion__opener.js-accordion-active .close-text,
.js-ui-dropdown.js-dropdown-opened .js-ui-dropdown__opener .close-text {
  display: inline;
}
.js-ui-dropdown__layer,
.js-ui-dropdown-hover__layer {
  display: none;
}
.js-ui-accordion__item:not(.js-accordion-opened) .js-ui-accordion-opened-show {
  display: none;
}
.js-ui-accordion__item .js-ui-accordion-opened-hide {
  display: block;
}
.js-ui-accordion__item.js-accordion-opened .js-ui-accordion-opened-hide {
  display: none;
}
.js-on-scroll-fixed.is-fixed .js-on-scroll-fixed__target {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 999;
  background-color: #fff;
}
[data-clipboard-target] {
  display: none;
}
[data-clipboard-dummy] {
  position: fixed;
  top: 0;
  left: -999999px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
.swiper-pagination-bullet + .swiper-pagination-bullet {
  margin-left: 5px;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
  border: 1px solid var(--basic);
  /* 2023-07-19 웹접근성 수정 */
  background-color: var(--basic);
  /* background-color: #000; */
}
[data-tab-open],
[tabindex="0"]:not(.layer-wrap):not(.swiper-slide) {
  cursor: pointer;
}

/* ui-slot */
.ui-slot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.ui-slot__item {
  position: relative;
  -ms-flex: none;
  flex: none;
  overflow: hidden;
  -webkit-box-flex: 0;
}
.ui-slot__item::before {
  content: "0";
  display: block;
  color: transparent;
}
.ui-slot__num-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ui-slot__num-wrap.is-loop {
  -webkit-animation: ui-slot-loop-animate 1s linear infinite;
  animation: ui-slot-loop-animate 1s linear infinite;
}
@-webkit-keyframes ui-slot-loop-animate {
  0% {
    -webkit-transform: translateY(0%);
  }
  100% {
    -webkit-transform: translateY(-1000%);
  }
}
@keyframes ui-slot-loop-animate {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-1000%);
  }
}

/* reset style */
.ui-radio,
.ui-checkbox,
.ui-file {
  display: inline-block;
  vertical-align: top;
  width: 13px;
  height: 13px;
  margin: 0;
  padding: 0;
}
.ui-fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

/* hidden text style */
.for-a11y {
  position: absolute; /* position: absolute/fixed 에서만 clip 속성 작동 */
  overflow: hidden; /* overflow: visible 이면 clip 속성 작동 안됨 */
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px; /* 부트스트랩에선 안씀 */
  padding: 0;
  border: 0;
  white-space: nowrap;
  clip-path: inset(50%); /* H5BP에선 안씀 */
  font-size: 1px;
  color: transparent;
}
caption.for-a11y {
  position: static;
  display: table-caption;
  margin: 0 0 -1px;
}

/* align-left */
.align-left.align-left {
  text-align: left;
}
.align-right.align-right {
  text-align: right;
}
.align-center.align-center {
  text-align: center;
}

/* vertical-align */
.align-top {
  vertical-align: top;
}

/* point text */
.color-inherit.color-inherit {
  color: inherit;
}
.color-basic {
  color: var(--basic) !important;
}
.color-primary {
  color: var(--primary) !important;
}
.color-primary-dark {
  color: var(--primary-dark) !important;
}
.color-secondary {
  color: var(--secondary) !important;
}
.color-secondary-dark {
  color: var(--secondary-dark) !important;
}
.color-tertiary {
  color: var(--tertiary) !important;
}
.color-vip {
  color: var(--vip) !important;
}
.color-wrong {
  color: var(--wrong) !important;
}
.color-blur {
  color: var(--gray-70) !important;
}
.color-blur-more {
  color: var(--gray-50) !important;
}
.color-blur-secondary {
  color: var(--gray-60) !important;
}
.color-point {
  color: var(--point) !important;
}
.color-cancel {
  /*color: #ccc !important;*/
  color: var(--gray-80) !important; /* 230904 접근성 수정 */
}
.color-white {
  color: #fff !important;
}
.color-warning {
  color: var(--warning) !important;
}
/* 22.08.11 */
.color-mypage {
  color: var(--mypage) !important;
}
.color-gray6 { /* [2026-03-03 kho] [WPM-13885] 추가 */
  color: #666 !important;
}
.color-gray8 { /* [2026-03-03 kho] [WPM-13885] 추가 */
  color: #888 !important;
}
.bgColor_8665ef {
  background: #8665ef !important;
}

/* decoration */
.text-underline {
  text-decoration: underline;
}

/* del-text */
.del-text {
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
}
.del-text::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  display: block;
  border-top: 1px solid var(--basic);
}
.del-text.color-blur::before {
  border-top-color: var(--gray-70);
}
.del-text.color-cancel::before {
  /*border-top-color: #ccc;*/
  border-top-color: var(--gray-70); /* 230904 접근성 수정 */
}
/* 22.07.12 */
.del-text.color-blur-more::before {
  border-top-color: var(--gray-50);
}

/* font-weight */
.font-weight-light {
  font-weight: 300;
}
.font-weight-regular {
  font-weight: 400;
}
.font-weight-medium {
  font-weight: 500;
}
.font-weight-bold {
  font-weight: 700;
}

/* margin */
.margin-top-none {
  margin-top: 0px !important;
}
.margin-top-1 {
  margin-top: 1px !important;
}
.margin-top-2 {
  margin-top: 2px !important;
}
.margin-top-3 {
  margin-top: 3px !important;
}
.margin-top-4 {
  margin-top: 4px !important;
}
.margin-top-5 {
  margin-top: 5px !important;
}
.margin-top-6 {
  margin-top: 6px !important;
}
.margin-top-7 {
  margin-top: 7px !important;
}
.margin-top-8 {
  margin-top: 8px !important;
}
.margin-top-9 {
  margin-top: 9px !important;
}
.margin-top-10 {
  margin-top: 10px !important;
}
.margin-top-11 {
  margin-top: 11px !important;
}
.margin-top-12 {
  margin-top: 12px !important;
}
.margin-top-14 {
  margin-top: 14px !important;
}
.margin-top-15 {
  margin-top: 15px !important;
}
.margin-top-16 {
  margin-top: 16px !important;
}
.margin-top-17 {
  margin-top: 17px !important;
}
.margin-top-18 {
  margin-top: 18px !important;
}
.margin-top-20 {
  margin-top: 20px !important;
}
.margin-top-24 {
  margin-top: 24px !important;
}
.margin-top-25 {
  margin-top: 25px !important;
}
.margin-top-26 { /* [2026-04-01 kho] 추가 */
  margin-top: 26px !important;
}
.margin-top-27 {
  margin-top: 27px !important;
}
.margin-top-28 {
  margin-top: 28px !important;
}
.margin-top-30 {
  margin-top: 30px !important;
}
.margin-top-32 {
  margin-top: 32px !important;
}
.margin-top-35 {
  margin-top: 35px !important;
}
.margin-top-38 {
  margin-top: 38px !important;
}
.margin-top-39 {
  margin-top: 39px !important;
}
.margin-top-40 {
  margin-top: 40px !important;
}
.margin-top-44 {
  margin-top: 44px !important;
}
.margin-top-45 {
  margin-top: 45px !important;
}
.margin-top-48 {
  margin-top: 48px !important;
}
.margin-top-50 {
  margin-top: 50px !important;
}
.margin-top-55 {
  margin-top: 55px !important;
}
.margin-top-60 {
  margin-top: 60px !important;
}
.margin-top-65 {
  margin-top: 65px !important;
}
.margin-top-72 {
  margin-top: 72px !important;
}
.margin-top-90 {
  margin-top: 90px !important;
}
.margin-top-100 {
  margin-top: 100px !important;
}
.margin-top-minus-2 {
  margin-top: -2px !important;
}
.margin-top-minus-5 {
  margin-top: -5px !important;
}
.margin-top-minus-7 {
  margin-top: -7px !important;
}
.margin-top-minus-8 { /* [2026-02-06 kho] 추가 */
  margin-top: -8px !important;
}
.margin-top-minus-10 {
  margin-top: -10px !important;
}
.margin-top-minus-15 {
  margin-top: -15px !important;
}
.margin-top-minus-20 {
  margin-top: -20px !important;
}
.margin-top-minus-25 {
  margin-top: -25px !important;
}
.margin-top-minus-27 {
  margin-top: -27px !important;
}
.margin-top-minus-30 {
  margin-top: -30px !important;
}
.margin-top-minus-35 {
  margin-top: -35px !important;
}
.margin-top-minus-40 {
  margin-top: -40px !important;
}

.margin-bottom-none {
  margin-bottom: 0px !important;
}
.margin-bottom-2 {
  margin-bottom: 2px !important;
}
.margin-bottom-3 {
  margin-bottom: 3px !important;
}
.margin-bottom-4 {
  margin-bottom: 4px !important;
}
.margin-bottom-5 {
  margin-bottom: 5px !important;
}
.margin-bottom-10 {
  margin-bottom: 10px !important;
}
.margin-bottom-14 {
  margin-bottom: 14px !important;
}
.margin-bottom-15 {
  margin-bottom: 15px !important;
}
.margin-bottom-20 {
  margin-bottom: 20px !important;
}
.margin-bottom-25 {
  margin-bottom: 25px !important;
}
.margin-bottom-26 { /* [2026-04-01 kho] 추가 */
  margin-bottom: 26px !important;
}
.margin-bottom-27 {
  margin-bottom: 27px !important;
}
.margin-bottom-30 {
  margin-bottom: 30px !important;
}
.margin-bottom-35 {
  margin-bottom: 35px !important;
}
.margin-bottom-36 { /* [2026-02-06 kho] 추가 */
  margin-bottom: 36px !important;
}
.margin-bottom-40 {
  margin-bottom: 40px !important;
}
.margin-bottom-55 {
  margin-bottom: 55px !important;
}
.margin-bottom-60 {
  margin-bottom: 60px !important;
}
.margin-bottom-90 {
  margin-bottom: 90px !important;
}
.margin-bottom-minus-3 {
  margin-bottom: -3px !important;
}
.margin-bottom-minus-5 {
  margin-bottom: -5px !important;
}
.margin-bottom-minus-12 {
  margin-bottom: -12px !important;
}
.margin-bottom-minus-25 {
  margin-bottom: -25px !important;
}
.margin-bottom-minus-35 {
  margin-bottom: -35px !important;
}
.margin-bottom-minus-60 {
  margin-bottom: -60px !important;
}

/* margin-left */
.margin-left-none {
  margin-left: 0px !important;
}
.margin-left-4 {
  margin-left: 4px !important;
}
.margin-left-5 {
  margin-left: 5px !important;
}
.margin-left-10 {
  margin-left: 10px !important;
}
.margin-left-15 {
  margin-left: 15px !important;
}
.margin-left-18 {
  margin-left: 18px !important;
}
.margin-left-20 {
  margin-left: 20px !important;
}
.margin-left-22 {
  margin-left: 22px !important;
}
.margin-left-25 {
  margin-left: 25px !important;
}
.margin-left-30 { /* [2026-04-01 kho] 추가 */
  margin-left: 30px !important;
}

/* margin-right */
.margin-right-none {
  margin-right: 0px !important;
}
.margin-right-6 {
  margin-right: 6px !important;
}


/* padding-left-right */
.padding-left-right-5 {
  padding-right: 5px !important;
  padding-left: 5px !important;
}
.padding-left-right-10 {
  padding-right: 10px !important;
  padding-left: 10px !important;
}
.padding-left-right-15 {
  padding-right: 15px !important;
  padding-left: 15px !important;
}
.padding-left-right-18 {
  padding-right: 18px !important;
  padding-left: 18px !important;
}
.padding-left-right-20 {
  padding-right: 20px !important;
  padding-left: 20px !important;
}
.padding-left-right-25 {
  padding-right: 25px !important;
  padding-left: 25px !important;
}
.padding-left-right-30 {
  padding-right: 30px !important;
  padding-left: 30px !important;
}
.padding-left-right-40 {
  padding-right: 35px !important;
  padding-left: 35px !important;
}

/* padding-top-bottom */
.padding-top-bottom-3 {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}
.padding-top-bottom-5 {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
.padding-top-bottom-7 {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}
.padding-top-bottom-10 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
.padding-top-bottom-15 {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}
.padding-top-bottom-20 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.padding-top-bottom-24 {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}
.padding-top-bottom-25 {
  padding-top: 25px !important;
  padding-bottom: 25px !important;
}
.padding-top-bottom-30 {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}
.padding-top-bottom-40 {
  padding-top: 35px !important;
  padding-bottom: 35px !important;
}

/* padding-top */
.padding-top-none {
  padding-top: 0px !important;
}
.padding-top-1 {
  padding-top: 1px !important;
}
.padding-top-2 {
  padding-top: 2px !important;
}
.padding-top-3 {
  padding-top: 3px !important;
}
.padding-top-4 {
  padding-top: 4px !important;
}
.padding-top-5 {
  padding-top: 5px !important;
}
.padding-top-6 {
  padding-top: 6px !important;
}
.padding-top-7 {
  padding-top: 7px !important;
}
.padding-top-8 {
  padding-top: 8px !important;
}
.padding-top-9 {
  padding-top: 9px !important;
}
.padding-top-10 {
  padding-top: 10px !important;
}
.padding-top-11 {
  padding-top: 11px !important;
}
.padding-top-12 {
  padding-top: 12px !important;
}
.padding-top-14 {
  padding-top: 14px !important;
}
.padding-top-15 {
  padding-top: 15px !important;
}
.padding-top-16 {
  padding-top: 16px !important;
}
.padding-top-17 {
  padding-top: 17px !important;
}
.padding-top-18 {
  padding-top: 18px !important;
}
.padding-top-20 {
  padding-top: 20px !important;
}
.padding-top-24 {
  padding-top: 24px !important;
}
.padding-top-25 {
  padding-top: 25px !important;
}
.padding-top-26 { /* [2026-04-01 kho] 추가 */
  padding-top: 26px !important;
}
.padding-top-28 {
  padding-top: 28px !important;
}
.padding-top-30 {
  padding-top: 30px !important;
}
.padding-top-32 {
  padding-top: 32px !important;
}
.padding-top-35 {
  padding-top: 35px !important;
}
.padding-top-38 {
  padding-top: 38px !important;
}
.padding-top-40 { /* [2026-04-02 kho] 추가 */
  padding-top: 40px !important;
}
.padding-top-45 {
  padding-top: 45px !important;
}
.padding-top-50 {
  padding-top: 50px !important;
}
.padding-top-55 {
  padding-top: 55px !important;
}
.padding-top-72 {
  padding-top: 72px !important;
}
.padding-top-100 {
  padding-top: 100px !important;
}

/* padding-left */
.padding-left-none { /* [2026-03-03 kho] [WPM-13885] 추가 */
  padding-left: 0 !important;
}
.padding-left-5 {
  padding-left: 5px !important;
}
.padding-left-10 {
  padding-left: 10px !important;
}
.padding-left-15 {
  padding-left: 15px !important;
}
.padding-left-16 {
  padding-left: 16px !important;
}
.padding-left-18 {
  padding-left: 18px !important;
}
.padding-left-20 {
  padding-left: 20px !important;
}
.padding-left-22 {
  padding-left: 22px !important;
}
.padding-left-25 {
  padding-left: 25px !important;
}
.padding-left-35 {
  padding-left: 35px !important;
}

/* padding-right */
.padding-right-none {
  padding-right: 0 !important;
}
.padding-right-5 {
  padding-right: 5px !important;
}
.padding-right-10 {
  padding-right: 10px !important;
}
.padding-right-15 {
  padding-right: 15px !important;
}
.padding-right-16 {
  padding-right: 16px !important;
}
.padding-right-18 {
  padding-right: 18px !important;
}
.padding-right-20 {
  padding-right: 20px !important;
}
.padding-right-22 {
  padding-right: 22px !important;
}
.padding-right-25 {
  padding-right: 25px !important;
}

/* padding-bottom */
.padding-bottom-none {
  padding-bottom: 0 !important;
}
.padding-bottom-5 {
  padding-bottom: 5px !important;
}
.padding-bottom-10 {
  padding-bottom: 10px !important;
}
.padding-bottom-15 {
  padding-bottom: 15px !important;
}
.padding-bottom-20 {
  padding-bottom: 20px !important;
}
.padding-bottom-25 {
  padding-bottom: 25px !important;
}
.padding-bottom-30 {
  padding-bottom: 30px !important;
}
.padding-bottom-34 {
  padding-bottom: 34px !important;
}
.padding-bottom-35 {
  padding-bottom: 35px !important;
}

/* padding-none */
.padding-none {
  padding: 0px !important;
}

/* display-block */
.display-block.display-block {
  display: block;
}

/* inline-block */
.inline-block.inline-block {
  display: inline-block;
  vertical-align: top;
}

/* display - flex */
.d-flex {
  display: flex !important;
}

.d-justify-center {
  justify-content: center !important;
}

.d-justify-spaceB {
  justify-content: space-between !important;
}
.d-align-center {
  align-items: center !important;
}

/* xsmall-text */
.xsmall-text {
  margin: 0;
  font-size: 1.1rem !important;
  line-height: 1.5rem !important;
}

/* small-text */
.small-text {
  margin: 0;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.7rem;
}

/* default-text */
.default-text {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.8rem;
}

/* normal-text */
.normal-text {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.9rem;
}

/* basic-text */
.basic-text {
  margin: 0;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2rem;
}

/* medium-text */
.medium-text {
  margin: 0;
  margin-bottom: 5px;
  font-size: 1.8rem;
  line-height: 3rem;
  letter-spacing: -0.09rem; /* 22.09.02 라이프 수정 */
}

/* large-text */
.large-text {
  margin: 0;
  font-size: 2rem;
  line-height: 2.8rem;
}

/* big-text */
.big-text {
  margin: 0;
  font-size: 2.4rem;
  line-height: 3.3rem;
}

/* ellipsis */
.ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* multi-ellipsis */
.multi-ellipsis {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}
.multi-ellipsis.type-line-2 {
  -webkit-line-clamp: 2;
}
.small-text.multi-ellipsis.type-line-2 {
  max-height: 3.4rem;
}
.default-text.multi-ellipsis.type-line-2 {
  max-height: 3.6rem;
}
.normal-text.multi-ellipsis.type-line-2 {
  max-height: 3.8rem;
}
.basic-text.multi-ellipsis.type-line-2 {
  max-height: 4rem;
}
.medium-text.multi-ellipsis.type-line-2 {
  max-height: 4rem;
}
.large-text.multi-ellipsis.type-line-2 {
  max-height: 5.6rem;
}
.big-text.multi-ellipsis.type-line-2 {
  max-height: 6.6rem;
}

/* white-space-nowrap */
.white-space-nowrap {
  white-space: nowrap;
}
/* word-break-br-word */
.word-break-br-word {
  word-break: break-word;
}
/* basic-link */
.basic-link {
  color: inherit;
  text-decoration: underline;
}

/* block-link */
.block-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.basic-link:disabled {
  color: var(--gray-70) !important;
}

/* ui-hr */
.ui-hr {
  margin: 35px 0;
  border-top: 1px solid var(--gray-30);
}

/* search-mark */
.search-mark {
  background: none;
  color: var(--primary);
}

/* ui-basic-button */
.ui-basic-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 3px 8px;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
  background: #fff;
  color: var(--gray-80); /* [2025-07-30 kho] 수정 */
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2rem;
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.ui-basic-button.type-flex-column {
  -ms-flex-direction: column;
  flex-direction: column;
  padding-right: 0;
  padding-left: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
}
.ui-basic-button.type-inline {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.ui-basic-button:active {
  border-color: var(--gray-60);
  background-color: #fafafa;
  color: #6a6a6a;
}
.ui-basic-button[disabled],
.ui-basic-button.type-disabled {
  color: var(--gray-50);
}
.ui-basic-button .inline-block.inline-block {
  white-space: nowrap;
}
.ui-basic-button.type-gray {
  border-color: var(--gray-10);
  background-color: var(--gray-10);
  color: var(--basic);
}
.ui-basic-button.type-gray:active {
  border-color: var(--gray-40);
  background-color: var(--gray-40);
  color: #000;
}
.ui-basic-button.type-black {
  border-color: #000;
  background-color: #000;
  color: #fff;
}
.ui-basic-button.type-vip {
  border-color: var(--vip);
  background-color: var(--vip);
  color: #fff;
}
.ui-basic-button.type-vip:active {
  border-color: var(--vip-dark);
  background-color: var(--vip-dark);
  color: #fff;
}
.ui-basic-button.type-primary {
  border-color: var(--primary);
  background-color: var(--primary);
  color: #fff;
}
.ui-basic-button.type-primary:active {
  border-color: var(--primary-dark);
  background-color: var(--primary-dark);
  color: #fff;
}
/* 20230907 추가 */
.ui-basic-button.type-primary-light {
  border-color: var(--primary-light);
  background-color: var(--primary-light);
  color: var(--primary);
}
.ui-basic-button.type-primary-light:active {
  border-color: var(--primary);
  background-color: var(--primary);
  color: #fff;
}
.ui-basic-button.type-gray[disabled],
.ui-basic-button.type-gray.type-disabled,
.ui-basic-button.type-vip[disabled],
.ui-basic-button.type-vip.type-disabled,
.ui-basic-button.type-primary[disabled],
.ui-basic-button.type-primary.type-disabled {
  border-color: var(--gray-30);
  background-color: var(--gray-30);
  color: var(--gray-60);
}
.ui-basic-button.type-secondary {
  border-color: var(--basic);
  color: var(--basic);
}
.ui-basic-button.type-secondary:active {
  background-color: #fafafa;
}
.ui-basic-button.type-secondary[disabled],
.ui-basic-button.type-secondary.type-disabled {
  border-color: var(--gray-30);
  color: var(--gray-50);
}
.ui-basic-button.type-tertiary {
  border-color: var(--secondary);
  background-color: var(--secondary);
  color: #fff;
}
.ui-basic-button.type-tertiary:active {
  background-color: var(--secondary-dark);
}
.ui-basic-button.type-tertiary[disabled],
.ui-basic-button.type-tertiary.type-disabled {
  border-color: var(--gray-30);
  background-color: var(--gray-30);
  color: var(--gray-60);
}
.ui-basic-button.type-quaternary {
  border-color: var(--gray-30);
  background-color: var(--gray-10);
  color: inherit;
}
.ui-basic-button.type-quaternary:active {
  border-color: var(--gray-50);
  background-color: var(--gray-30);
}
.ui-basic-button.type-quaternary[disabled],
.ui-basic-button.type-quaternary.type-disabled {
  border-color: var(--gray-30);
  background-color: var(--gray-30);
  color: var(--gray-60);
}
.ui-basic-button.type-quaternary {
  border-color: var(--gray-30);
  background-color: var(--gray-10);
  color: inherit;
}
.ui-basic-button.type-quinary {
  border-color: var(--secondary);
  background-color: #fff;
  color: inherit;
}
.ui-basic-button.type-quinary:active {
  border-color: var(--secondary-dark);
  background-color: #fafafa;
}
.ui-basic-button.type-quinary[disabled],
.ui-basic-button.type-quinary.type-disabled {
  border-color: var(--gray-30);
  color: var(--gray-50);
}
.ui-basic-button.type-senary {
  border-color: var(--primary);
  background-color: #fff;
  color: inherit;
}
.ui-basic-button.type-senary:active {
  border-color: var(--primary-dark);
  background-color: #fafafa;
}
.ui-basic-button.type-senary[disabled],
.ui-basic-button.type-senary.type-disabled {
  border-color: var(--gray-30);
  color: var(--gray-50);
}
/* 22.09.08 */
.ui-basic-button.type-septenary {
  border-color: #4b4b4b;
  background-color: #4b4b4b;
  color: #fff;
}
.ui-basic-button.type-con {
  border-color: #f65657;
  background-color: #f65657;
  color: #fff;
}
.ui-basic-button.type-kakao {
  border-color: #fbe100;
  background-color: #fbe100;
  color: inherit;
}
.ui-basic-button.type-kakao:active {
  border-color: #fbe100;
  background-color: #fbe100;
}
.ui-basic-button.type-kakao[disabled],
.ui-basic-button.type-kakao.type-disabled {
  border-color: var(--gray-30);
  background-color: var(--gray-30);
  color: var(--gray-60);
}

.ui-basic-button.type-white {
  border-color: #fff;
  background-color: #fff;
  color: inherit;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
/* 22.11.04 */
.ui-basic-button.type-blue {
  border-color: #4493e9;
  background-color: #4493e9;
  color: #fff;
}

/* [2025-08-29 oh] */
.ui-basic-button.type-gradient {
  font-size: 1.6rem;
  font-weight: 700;
  color:#fff;
  border: 0;
  background: linear-gradient(270deg, #47DCC1 -10.68%, #3F99CB 109.35%);
}

/* size */
.ui-basic-button.type-medium {
  min-width: 52px;
  min-height: 44px;
  border-radius: 4px;
  font-size: 1.5rem;
}
.ui-basic-button.type-small {
  min-width: 52px;
  min-height: 40px;
  border-radius: 4px;
  font-size: 1.5rem;
}
.ui-basic-button.type-mini {
  min-height: auto;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.ui-basic-button.type-tiny {
  width: auto;
  min-height: auto;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 1.2rem;
  line-height: 1.7rem;
}
.ui-basic-button.type-large {
  width: auto;
  min-height: auto;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 2.2rem;
}

/* ui-basic-button.type-auto */
.ui-basic-button.type-auto {
  width: auto;
}

/* ui-basic-button type-icon */
.ui-basic-button.type-icon::before,
.ui-basic-button.type-icon::after {
  display: inline-block;
  vertical-align: top;
  height: 2rem;
  background: no-repeat 50% 50%;
  background-size: 100% auto;
}
.ui-basic-button.type-icon::before {
  margin-right: 4px;
}
.ui-basic-button.type-icon::after {
  margin-left: 4px;
}
.ui-basic-button.type-tiny.type-icon::before,
.ui-basic-button.type-tiny.type-icon::after {
  height: 1.7rem;
}
.ui-basic-button.type-icon-pick::before {
  content: "pick";
  width: 33px;
  background-image: url("../images/icon/ic-pick-w.svg");
  font-size: 1px;
  line-height: 1px;
  text-indent: -99999px;
} /* 23-08-22 접근성 수정 */
.ui-basic-button.type-icon-pick[disabled]::before,
.ui-basic-button.type-icon-pick.type-disabled::before {
  background-image: url("../images/icon/ic-pick-d.svg");
}
.ui-basic-button.type-icon-pick-2::before {
  content: "pick";
  width: 36px;
  background-image: url("../images/icon/ic-pick.svg");
  font-size: 1px;
  line-height: 1px;
  text-indent: -99999px;
} /* 23-08-22 접근성 수정 */
.ui-basic-button.type-icon-pick-2[disabled]::before,
.ui-basic-button.type-icon-pick-2.type-disabled::before {
  background-image: url("../images/icon/ic-pick-d.svg");
}
.ui-basic-button.type-icon-pick-2.type-small {
  font-size: 1.2rem;
}
.ui-basic-button.type-icon-delete::before {
  content: "";
  width: 15px;
  background-image: url("../images/icon/ic-delete-s.svg");
}
.ui-basic-button.type-icon-delete[disabled]::before,
.ui-basic-button.type-icon-delete.type-disabled::before {
  background-image: url("../images/icon/ic-delete-s-d.svg");
}
.ui-basic-button.type-icon-graph::before {
  content: "";
  width: 14px;
  background-image: url("../images/icon/ic-graph.svg");
}
.ui-basic-button.type-icon-graph[disabled]::before,
.ui-basic-button.type-icon-graph.type-disabled::before {
  background-image: url("../images/icon/ic-graph-d.svg");
}
.ui-basic-button.type-icon-kakao-map::before {
  content: "";
  width: 15px;
  margin-right: 0;
  background-image: url("../images/icon/ic-kakaomap.svg");
}

/* ui-icon-tel, ui-basic-button type-icon-tel */
.ui-icon-tel,
.ui-basic-button.type-icon-tel::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin: -1px 4px 0 0;
  background: url("../images/icon/ic-tel-gray.svg") no-repeat 50% 50% / auto 100%;
}
.ui-basic-button.type-primary.type-icon-tel::before,
.ui-basic-button.type-vip.type-icon-tel::before {
  background-image: url("../images/icon/ic-tel.svg");
}
.ui-basic-button.type-gray .ui-icon-tel,
.ui-basic-button.type-gray.type-icon-tel::before {
  background-image: url("../images/icon/ic-tel-b.svg");
}
.ui-basic-button.type-secondary.type-icon-tel::before {
  width: 14px;
  height: 14px;
  background-image: url("../images/icon/ic-tel-b.svg");
}
.ui-basic-button.type-purple.type-icon-tel {
  color: #8665ef;
}
.ui-basic-button.type-purple.type-icon-tel::before {
  background-image: url("../images/icon/ic-tel-purple.png");
}
.ui-icon-tel.type-center {
  margin-right: 4px;
  margin-left: 4px;
}
.ui-basic-button.type-icon-lock::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 17px;
  height: 17px;
  margin: -1px 4px 0 0;
  background: url("../images/icon/ic-lock.svg") no-repeat 50% 50% / auto 100%;
}
.ui-basic-button.type-primary.type-icon-lock::before {
  background-image: url("../images/icon/ic-lock-w.svg");
}

.ui-basic-button.type-goapp {
  min-height: 68px;
  border: 2px solid #1ebcab;
  border-radius: 15px;
  color: #111;
  font-weight: 700;
  font-size: 14px;
}
.ui-basic-button.type-goapp::before {
  content: "";
  display: block;
  width: 60px;
  height: 23px;
  margin-right: 18px;
  background: url("../images/common/logo-appicon.png") no-repeat center / 100%;
}
.ui-basic-button.type-goapp span {
  margin-top: 3px;
}

.ui-button.type-underline span {
  position: relative;
  display: inline-block;
  margin-right: 5px;
}
.ui-button.type-underline span:before {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  background-color: #c3c3c3;
}
/* 22.08.08 승인전표 */
.ui-basic-button.type-download::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin: -1px 4px 0 0;
  background: url("../images/icon/ic-imgdownload.svg") no-repeat 50% 50% / auto 100%;
}
.ui-basic-button.type-share::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin: -1px 4px 0 0;
  background: url("../images/icon/ic-share.svg") no-repeat 50% 50% / auto 100%;
}
/* 240125_제로페이 적립안내 추가 */
.ui-basic-button.type-zeropay {
  height: 26px;
  padding: 4px 10px;
  border-color: #2c3590;
  border-radius: 13px;
  background-color: #2c3590;
  color: #ffffff;
}
.ui-basic-button.type-zeropay img {
  display: inline-block;
  height: 10px;
  margin-right: 4px;
}
.ui-basic-button.type-zeropay + .ui-masking-button {
  margin-left: 10px;
}
.new-mypage-wrap.new-type .mypage-section-right.zeropay {
  display: flex;
}

/* [2025-06-30 kho] 추가 */
.ui-basic-button.type-icon-travlog-switch::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 24px;
  width: 24px;
  height: 32px;
  margin: 0 6px 0 0;
  background: url(/images/icon/ic-travlog-switch.png) no-repeat 50% 50% / auto 100%;
}
/* //[2025-06-30 kho] 추가 */

/* ui-regular-button */
.ui-regular-button {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 16px;
  background-color: #fff;
  color: gray;
  font-size: 1.6rem;
  line-height: 2.1rem;
  text-align: center;
}
.ui-regular-button.type-primary {
  color: var(--primary);
}
.ui-regular-button.type-purple {
  color: #8665ef;
}

/* ui-buttons */
.ui-buttons-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  clear: both;
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.ui-buttons-item {
  position: relative;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.ui-buttons-item + .ui-buttons-item {
  margin-left: 8px;
}
.ui-buttons.type-left .ui-buttons-list {
  justify-content: flex-start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
}
.ui-buttons.type-right .ui-buttons-list {
  justify-content: flex-end;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
}
.ui-buttons.type-left .ui-buttons-item,
.ui-buttons.type-right .ui-buttons-item,
.ui-buttons.type-center .ui-buttons-item {
  -ms-flex: none;
  flex: none;
  -webkit-box-flex: 0;
}
.ui-buttons.type-center .ui-buttons-list {
  justify-content: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}

/* ui-buttons type-full */
.ui-buttons.type-full .ui-buttons-list {
  display: block;
}
.ui-buttons.type-full .ui-buttons-item + .ui-buttons-item {
  margin-top: 10px;
  margin-left: 0;
}

/* ui-buttons type-small-margin */
.ui-buttons.type-small-margin .ui-buttons-item + .ui-buttons-item {
  margin-left: 4px;
}

/* ui-buttons type-tooltip */
.ui-buttons.type-tooltip .ui-buttons-list {
  padding-top: 25px;
}
.ui-buttons.type-tooltip.type-2lines .ui-buttons-list {
  padding-top: 37px;
}

/* ui-buttons-list type-wrap */
.ui-buttons-list.type-wrap {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.ui-buttons-list.type-wrap .ui-buttons-item.type-full {
  flex: 1 1 100%;
  margin-top: 10px;
  margin-left: 0;
}

/* [2025-04-28 kho] [기타] 포인트조회 하나원사인 동의 팝업 추가 */
.ui-buttons-list.type-wrap .ui-buttons-item.type-full.fixed-link-type {
	margin-top: 0;
  padding: 14px 8px;
  width: 100%;
  text-align: center;
  background-color: #fff;
}
.ui-buttons-list.type-wrap .ui-buttons-item.type-full.fixed-link-type a {
  font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.025em;
	color: #666;
  text-decoration: underline;
}
/* //[2025-04-28 kho] [기타] 포인트조회 하나원사인 동의 팝업 추가 */

/* ui-buttons type-scroll */
.ui-buttons.type-scroll {
  display: block;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -24px;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
}
.ui-buttons.type-scroll .ui-buttons-list {
  padding: 14px 24px 13px;
}
.ui-buttons.type-scroll .ui-buttons-list,
.ui-buttons.type-scroll .ui-buttons-item {
  display: inline-block;
  vertical-align: top;
}

.ui-buttons-list.type-has-tit .ui-buttons-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ui-buttons-list.type-has-tit .ui-buttons-item .tit {
  font-size: 1.5rem;
}
.ui-buttons-list.type-has-tit .ui-buttons-item .ui-basic-button {
  width: 143px;
}

/* ui-button-tooltip */
.ui-button-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  z-index: 1;
  display: block;
  width: 100%;
  margin-bottom: 10px;
  transform: translateX(-50%);
}
.ui-button-tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  display: block;
  margin-left: -3px;
  border: 0 solid transparent;
  border-width: 4px 3px;
  border-top-color: #2c364e;
}
.ui-button-tooltip-text {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  padding: 7px 15px 6px;
  border-radius: 3px;
  background-color: #2c364e;
  color: #fff;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 17px;
  text-align: right;
  white-space: nowrap;
  transform: translateX(-50%);
}
.ui-button-tooltip-text.align-left {
  text-align: left !important;
}
.ui-button-tooltip.type-bottom {
  top: 100%;
  bottom: auto;
  margin-top: 10px;
  margin-bottom: 0;
}
.ui-button-tooltip.type-bottom::after {
  top: auto;
  bottom: 100%;
  border-width: 0 3px 4px 3px;
  border-color: transparent transparent #2c364e transparent;
}
.ui-button-tooltip.type-bottom .ui-button-tooltip-text {
  top: 0;
  bottom: auto;
}

.ui-button-tooltip.type-top {
  top: 100%;
  bottom: auto;
  margin-top: 10px;
  margin-bottom: 0;
}
.ui-button-tooltip.type-top::after {
  top: 100%;
  bottom: auto;
  border-width: 0 3px 4px 3px;
  border-color: transparent transparent #2c364e transparent;
}
.ui-button-tooltip.type-top .ui-button-tooltip-text {
  top: 100%;
  bottom: inherit;
}

/* 22.09.28 ui-button-tooltip rising-ani*/
.ui-button-tooltip.rising-interaction {
  opacity: 1;
  animation: rising-ani 1s;
}
@keyframes rising-ani {
  0% {
    bottom: 30%;
    opacity: 0;
  }
  100% {
    bottom: 100%;
    opacity: 1;
  }
}

/* 2023.05.17 */
.ui-button-tooltip.right-type .ui-button-tooltip-text {
  right: 0;
  bottom: -16px;
  left: auto;
  padding-right: 3px;
  transform: translate(0);
}
.ui-button-tooltip.right-type .ui-button-tooltip-text::after {
  right: 15px;
  left: auto;
  transform: translate(0);
}
.ui-button-tooltip .ui-tooltip-close {
  display: inline-block;
  vertical-align: top;
  width: 22px;
  height: 22px;
  margin-top: -2px;
  background: url(../images/icon/ic-close-s.svg) no-repeat 50% 50%;
  font-size: 0;
}

.ui-buttons-item:nth-child(2n-1) .ui-button-tooltip-text,
.ui-radio-block:first-child .ui-button-tooltip-text {
  left: 0;
  text-align: left;
  transform: translateX(0);
}
.ui-buttons-item:nth-child(2n) .ui-button-tooltip-text,
.ui-buttons-item:first-child:last-child .ui-button-tooltip-text,
.ui-radio-block:last-child .ui-button-tooltip-text,
.ui-button-tooltip .ui-button-tooltip-text.pos-right {
  right: 0;
  left: auto;
  text-align: right;
  transform: translateX(0);
}
.ui-buttons-item:nth-child(2n-1) .ui-button-tooltip-text::after,
.ui-radio-block:first-child .ui-button-tooltip-text::after {
  left: 50px;
  margin-left: 0;
  text-align: left;
}
.ui-buttons-item:nth-child(2n) .ui-button-tooltip-text::after,
.ui-buttons-item:first-child:last-child .ui-button-tooltip-text::after,
.ui-radio-block:last-child .ui-button-tooltip-text::after {
  right: 50px;
  left: auto;
  margin-left: 0;
  text-align: right;
}

/* 22.11.24 ui-buttons-item.type-idc-guide */
.ui-buttons-item.type-idc-guide .ui-button-tooltip-text {
  padding: 7px 11px 6px;
  white-space: initial;
}
.ui-buttons-item.type-idc-guide .ui-buttons-item.normal-text {
  flex-shrink: 1;
}
.ui-buttons-item.type-idc-guide.left .ui-button-tooltip-text {
  right: auto;
  left: 0;
  text-align: left;
}
.ui-buttons-item.type-idc-guide.left .ui-button-tooltip-text::after {
  right: auto;
  left: 50px;
  margin-left: 0;
  text-align: left;
}
.ui-buttons-item.type-idc-guide.right .ui-button-tooltip-text {
  right: 0;
  left: auto;
  text-align: right;
}
.ui-buttons-item.type-idc-guide.right .ui-button-tooltip-text::after {
  right: 50px;
  left: auto;
  margin-right: 0;
  text-align: right;
}
.ui-buttons-item.type-idc-guide .ui-button-tooltip-text.apex-top::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #2c364e;
}

/* ui-buttons type-narrow */
.ui-buttons .type-narrow {
  -ms-flex: none;
  flex: none;
  min-width: 34%;
  -webkit-box-flex: 0;
}

/* ui-button-aside */
.ui-button-aside {
  float: right;
  margin-bottom: 35px;
  color: var(--gray-70);
  font-size: 1.2rem;
  line-height: 1.8rem;
  text-decoration: underline;
}
.ui-buttons-item.text-center .ui-button-aside {
  margin: 0;
  float: unset;
  font-size: 1.4rem;
}

/* ui-basic-button ui-arrow  */
.ui-basic-button .ui-arrow.type-black::after {
  width: 18px;
}

/* form-flex */
.form-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.form-flex.type-align-top {
  align-items: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
}
.form-flex.type-align-bottom {
  align-items: flex-end;
  -webkit-box-align: flex-end;
  -ms-flex-align: flex-end;
}
.form-flex-cell {
  font-size: 1.4rem;
  line-height: 2rem;
}
.form-flex-cell.basic-text {
  font-size: 1.5rem;
  line-height: 22px;
}
/* 2022-08-29 */
.form-flex-cell.type-download-border-secondary {
  padding: 3px 8px;
  border: 1px solid var(--basic);
  border-radius: 6px;
  font-size: 1.2rem;
}
.form-flex-cell.type-download-border-secondary .ui-icon-download {
  width: 14px;
  height: 14px;
}
.form-flex-cell + .form-flex-cell {
  margin-left: 12px;
}
.form-flex.type-large .form-flex-cell + .form-flex-cell {
  margin-left: 15px;
}
.form-flex.type-medium .form-flex-cell + .form-flex-cell {
  margin-left: 8px;
}
.form-flex.type-narrow .form-flex-cell + .form-flex-cell {
  margin-left: 5px;
}
.form-flex-cell + .form-flex-cell.type-no-margin {
  margin-left: 0;
}
.form-flex-cell.type-flexible {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.form-flex-cell.type-has-unit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.form-flex-cell.type-has-unit .ui-input-block {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.form-flex-cell.type-align-top {
  align-items: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
}
.form-flex-cell + .form-flex-cell.form-unit {
  margin-left: 5px;
  font-size: 1.7rem;
}
.form-prefix {
  margin-right: -7px;
  font-size: 1.7rem;
}
.ui-range-dash {
  width: 37px;
  margin: 0 -12px;
  font-size: 1.5rem;
  text-align: center;
}
.ui-mark-at {
  width: 40px;
  margin: 0 -12px;
  font-size: 1.7rem;
  text-align: center;
}

/* form-flex type-regular */
.form-flex.type-regular .form-flex-cell + .form-flex-cell {
  margin-left: 8px;
}

/* form-flex type-small */
.form-flex.type-small .form-flex-cell + .form-flex-cell {
  margin-left: 4px;
}

/* form-flex type-no-margin */
.form-flex.type-no-margin .form-flex-cell + .form-flex-cell {
  margin-left: 0;
}

/* form-group type */
.form-group {
  position: relative;
}
.form-group .type-row {
  margin-top: 15px;
}
.form-group.type-address .type-row {
  margin-top: 17px;
}
.type-card-pw .ui-input-block {
  width: 157px;
}
.type-contact .ui-select-block {
  width: 80px;
}
.type-select-range .form-flex-cell + .form-flex-cell,
.type-input-range .form-flex-cell + .form-flex-cell {
  margin-left: 20px;
}
.type-input-range .type-narrow {
  width: 100px;
}
.form-group .form-group-text {
  margin-top: 10px;
  font-size: 1.5rem;
  line-height: 20px;
}
.form-group.type-license .form-flex {
  align-items: flex-end;
  -webkit-box-align: flex-end;
  -ms-flex-align: flex-end;
}
.form-group.type-license .form-flex-cell.type-narrow {
  max-width: 100px;
}
.form-group.type-license .ui-range-dash {
  line-height: 40px;
}

/* form-group type-code */
.form-group.type-code .ui-input {
  padding-right: 60px;
}

/* layer */
.layer-wrap {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  overflow: auto;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  font-size: 0;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
}
.layer-wrap.type-no-dim {
  background-color: transparent;
}
.layer-wrap.type-no-dim .ui-layer {
  box-shadow: 0 -3px 15px 0 rgba(0, 0, 0, 0.1);
}
.layer-wrap::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.layer-container {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: 1rem;
  line-height: inherit;
  text-align: left;
  white-space: normal;
}
.layer-wrap--full::before,
.layer-wrap--slide::before {
  display: none;
}
.layer-wrap--full .layer-container,
.layer-wrap--slide .layer-container {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.layer-wrap--full .ui-layer__body-inner {
  padding-top: 30px;
}
.layer-wrap--full .ui-tab-panel {
  padding: 35px 24px;
}
.layer-wrap--full .total-amount:first-child {
  margin-top: -5px;
}
.layer-wrap--full .issue-accordion-list {
  margin-top: -5px;
}
.layer-wrap--full .accordion-info-list {
  margin-top: -5px;
}
.layer-wrap--slide .ui-layer__head .header {
  padding: 30px 24px 20px;
}
.layer-wrap--slide .ui-layer__head.type-message .header {
  padding-top: 30px;
  padding-bottom: 15px;
}
.layer-wrap--slide .header__right {
  margin-left: 26px;
}
.layer-wrap--slide .header__button--close {
  margin-right: 0;
}
.layer-wrap--slide .header__button--close::after {
  left: 100%;
  width: 14px;
  height: 14px;
  border-radius: 1px;
  transform: translate(-100%, -50%);
}
/* 2022.11.10 ty_single_fix */
.layer-wrap--slide .header__right.ty_single_fix {
  position: relative;
  top: 30px;
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
  margin-right: 24px;
  margin-left: 0;
}
.layer-wrap--slide .header__right.ty_single_fix .header__button--close {
  width: 30px;
  height: 30px;
  border: 1px solid var(--gray-40);
  border-radius: 9px;
  background: #fff;
}
.layer-wrap--slide .header__right.ty_single_fix .header__button--close::after {
  left: 50%;
  transform: translate(-50%, -50%);
}

.layer-wrap--slide .header__button--close.has-txt {
  width: auto;
  padding-right: 22px;
}
.layer-wrap--slide .header__button--close.has-txt .txt {
  font-size: 1.5rem;
}
.layer-wrap--slide .ui-layer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: auto;
  max-height: 91.6%;
  border-radius: 15px 15px 0 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);

  /* [2025-12-03 KJH] 아이폰 15에서 팝업 터치 역역 오류 수정 */
  will-change: transform;
}
/* 2023.10.20 슬라이드 팝업 최대 높이 케이스 추가 */
.layer-wrap--slide.max-height .ui-layer {
  height: 100%;
  max-height: calc(100vh - 50px);
}
.layer-wrap--slide.type-no-title .ui-layer__body-inner {
  padding-top: 35px;
}
.layer-wrap--slide .menu-link-area:first-child {
  margin-top: 0;
}
.layer-wrap--slide .card-list-area {
  padding: 0 12px;
}
.layer-wrap--slide .form-detail-item:not(:first-child):not(.type-default-margin) {
  margin-top: 18px;
}
.layer-wrap--confirm .header {
  justify-content: flex-end;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
}
.layer-wrap--confirm .ui-layer__body-inner {
  padding-top: 35px;
  padding-bottom: 25px;
  font-size: 1.3rem;
}
.layer-wrap--confirm .js-ui-tab-panel {
  margin-top: 20px;
}
.layer-wrap--confirm .use-notice-area:first-child {
  margin-top: -5px;
}
.layer-wrap--confirm .terms-detail-title {
  margin-bottom: 10px;
  color: var(--basic);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2rem;
}
.layer-wrap--confirm .terms-detail-list {
  font-weight: 300;
}
.layer-wrap--confirm .terms-list-title {
  margin: 10px 0;
  color: var(--basic);
}
.layer-wrap--confirm .terms-list-contents {
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 18px;
}
.layer-wrap.js-layer-opened .ui-layer {
  /* -webkit-transform: none;
  transform: none; */

  /* [2025-12-03 KJH] 아이폰 15에서 팝업 터치 역역 오류 수정 */
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.layer-wrap.js-layer-opened.js-layer-animated .ui-layer {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/* 22.09.08 layer-wrap--drop */
.layer-wrap--dropdown .ui-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  height: auto;
  max-height: 91.6%;
  border-radius: 0 0 15px 15px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

/* ui-layer */
.ui-layer {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: #fff;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
}
.ui-layer__head,
.ui-layer__foot {
  -ms-flex: none;
  flex: none;
  -webkit-box-flex: 0;
}
.ui-layer__head .header {
  align-items: unset;
  height: auto;
  min-height: 50px;
  padding: 13px 24px 12px;
  background: none;
  -webkit-box-align: unset;
  -ms-flex-align: unset;
}
.ui-layer__head .header__right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: auto;
}
.ui-layer__head .header__right .header__button {
  -ms-flex: none;
  flex: none;
  -webkit-box-flex: 0;
}
.ui-layer__head .header__right .header__button + .header__button {
  margin-left: 10px;
}
.ui-layer__head .header__right .header__button--download-img + .header__button {
  margin-left: 16px;
}
.header__title {
  flex-grow: 1;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 2.7rem;
  text-align: left;
  word-break: keep-all;
}
.header__title.type-multi-ellipsis {
  display: -webkit-box;
  overflow: hidden;
  max-height: 5.4rem;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.header__title.type-light {
  font-weight: 300;
  font-size: 2.1rem;
  line-height: 3rem;
}
.header__title.type-small {
  font-size: 1.6rem;
  line-height: 2.4rem;
}
.layer-wrap--confirm .header__title.type-light {
  font-weight: 500;
  text-align: center;
}
.header__icon {
  display: block;
  height: 24px;
  margin-bottom: 10px;
  background: no-repeat 0 50% / auto 100%;
}
.header__icon.type-warning {
  height: 40px;
  background-image: url("../images/icon/ic-warming.svg");
}
.header__icon.type-hanamoney {
  height: 30px;
  background-image: url("../images/icon/ic_logo_hanamoney_b.png");
}
.header__button--share {
  position: relative;
  vertical-align: middle;
  width: 24px;
  height: 24px;
}
.header__button--share::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: url("../images/icon/ic-share.png") no-repeat 50% 50% / auto 100%; /* 22.12.15 이미지 확장자 변경 */
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.header__button--download-img {
  position: relative;
  vertical-align: middle;
  width: 24px;
  height: 24px;
}
.header__button--download-img::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: url("../images/icon/ic-imgdownload.png") no-repeat 50% 50% / auto 100%; /* 22.12.15 이미지 확장자 변경 */
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.header__button--close {
  position: relative;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  margin-right: -4px;
}
.header__button--close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  background: url("../images/common/btn-close.png") no-repeat 50% 50% / auto 16px; /* 22.12.15 이미지 확장자 변경 */
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.header__button--reset {
  position: relative;
  vertical-align: middle;
  width: 24px;
  height: 24px;
}
.header__button--reset::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/icon/btn-pop-reset.png") no-repeat 50% 50% / auto 100%; /* 22.12.15 이미지 확장자 변경 */
}
.header__button--opener,
.header__button--opener.js-ui-accordion__opener {
  position: relative;
  vertical-align: middle;
  width: 24px;
  height: 24px;
}
.header__button--opener::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/icon/btn-fold-l.png") no-repeat 50% 50% / auto 100%; /* 22.12.15 이미지 확장자 변경 */
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.header__button--opener.js-ui-accordion__opener::after {
  display: none;
}
.header__button--opener.js-accordion-active::before {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.ui-layer__body {
  -ms-flex: 1;
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  min-height: 0;
  -webkit-box-flex: 1;
}
.ui-layer__body-inner {
  box-sizing: border-box;
  padding: 10px 24px 20px;
}
.ui-layer__body:last-child .ui-layer__body-inner {
  padding-bottom: 35px;
}
.ui-layer__body-inner::before,
.ui-layer__body-inner::after {
  content: "";
  display: table;
}
.ui-layer__body .header {
  display: block;
  height: auto;
  padding-top: 9px;
  padding-bottom: 0;
  text-align: left;
}
/*.layer-wrap.js-layer-opened .layer-container .ui-layer__body .header{display:flex;}*/

.ui-layer__body .header__text {
  margin-top: 35px;
  color: var(--gray-80);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 20px;
}
.ui-layer__foot .ui-buttons {
  margin: 0;
  padding: 15px 24px 30px;
}
.ui-layer__foot.type-fixed .ui-buttons {
  padding-top: 15px;
  padding-bottom: 15px;
  border-top: 1px solid var(--gray-20);
  background-color: #fff;
}
/* 2022-12-14 type-layer */
.ui-layer__foot.type-layer {
  padding: 0 24px 20px;
}
.layer-wrap--slide.ui-layer__outtop-wrap .ui-layer { /* [2026-07-03 kho] [WPM-15302] 추가 */
  max-height: calc(91.6% - 40px);
}
.ui-layer__outtop {
  position: absolute;
  bottom: 100%;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 15px;
  padding: 0 24px;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.ui-layer__outtop-left {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
/* 20230830 웹접근성 수정 체크박스 명도대비 */
.ui-layer__outtop-left .ui-checkbox + .ui-label .ui-label-text {
  color: var(--gray-10) !important;
}
.ui-layer__outtop-left .ui-checkbox + .ui-label .ui-checkbox-object {
  filter: contrast(10);
  -webkit-filter: contrast(10);
}
.ui-layer__outtop-right {
  -ms-flex: none;
  flex: none;
  margin-left: auto;
  -webkit-box-flex: 0;
}
/* 20230830 웹접근성 수정 닫기 버튼 명도 대비 */
.ui-layer__outtop-close {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  margin-right: -4px;
  border-radius: 50%;
  background: url("../images/icon/btn-pop-close.svg") no-repeat 50% 50% var(--gray-10);
}
.ui-layer__outtop-close::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0);
}

/* layer-contents */
.layer-contents {
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 20px;
}

/* layer-wrap--select */
.layer-wrap--select .ui-layer__body .ui-layer__body-inner {
  padding-bottom: 20px;
}
.layer-wrap--select .use-notice-area {
  margin-top: 20px;
}

/* layer-completion */
.layer-info {
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 21px;
}
.layer-info.has-com-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  margin-top: 0;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
}
.layer-info.has-com-icon::after {
  width: 90px;
  margin-top: 0;
}
.layer-info.has-com-icon .layer-info-text {
  -ms-flex: 1;
  flex: 1;
  -webkit-box-flex: 1;
}

/* ui-alert */
.ui-alert {
  position: relative;
  width: 320px;
  border-radius: 16px;
  background: #fff;
}
.ui-alert::after {
  content: "";
  display: table;
}
/* 23.02.10 추가 */
.ui-alert.width-type01 {
  width: 330px;
}
/* //23.02.10 추가 */
.ui-alert .header__button--close {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin: 0 0 8px;
  border-radius: 100%;
  background: url("../images/common/btn-alert-close.svg") no-repeat;
}
.ui-alert__body-inner {
  box-sizing: border-box;
  padding: 0 20px 30px;
}
.ui-alert__body:first-child .ui-alert__body-inner {
  padding-top: 40px;
}
.ui-alert__body-inner::before,
.ui-alert__body-inner::after {
  content: "";
  display: table;
}
.ui-alert__body--scroll {
  overflow: auto;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  max-height: 358px;
  margin-top: 20px;
  margin-bottom: 0;
}
.ui-alert__body--scroll .ui-alert__body-inner {
  padding-top: 0;
  padding-bottom: 20px;
}
.ui-alert__body--scroll + .ui-alert__foot {
  padding-top: 16px;
}
.ui-alert__body--scroll:last-child {
  margin-bottom: 20px;
}
.ui-alert__body--scroll:last-child .ui-alert__body-inner {
  padding-bottom: 0;
}
.ui-alert__foot {
  margin: 0 20px;
  border-top: 1px solid var(--gray-30);
}
.ui-alert__foot .ui-buttons {
  padding: 0;
}
.ui-alert__foot .ui-basic-button--primary {
  color: var(--primary);
}
.ui-alert__foot .ui-buttons-item + .ui-buttons-item {
  position: relative;
  margin-left: 0;
}
.ui-alert__foot .ui-buttons-item + .ui-buttons-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 23px;
  background-color: var(--gray-30);
  transform: translateY(-50%);
}
.ui-alert-header {
  position: relative;
  padding: 40px 20px 20px;
  border-radius: 8px;
}
.ui-alert-header__title {
  margin: 0;
  padding: 0;
  font-weight: 500;
  font-size: 2rem;
  line-height: 2.5rem;
  text-align: center;
}
.ui-alert-header__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 52px;
  height: 52px;
  background: url("../images/icon/alert-close.svg") no-repeat 50% 50%;
  background-size: 52px 52px;
}
.ui-alert-message {
  margin: 0;
  padding: 0;
  font-size: 1.6rem;
  line-height: 2.1rem;
  text-align: center;
  word-wrap: break-word;
  word-break: keep-all;
}
.ui-alert-message em {
  font-weight: 500;
  font-style: normal;
}
.ui-alert-message + .ui-alert-message {
  margin-top: 16px;
}
.ui-alert-message--small {
  color: #5b646f;
  font-size: 1.4rem;
  line-height: 2rem;
}
.ui-alert__tail {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin-top: 10px;
}

/* ui-toast-alert */
.ui-toast-alert {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999999;
  width: 100%;
}
.ui-toast-alert-inner {
  position: absolute;
  right: 24px;
  bottom: 30px;
  left: 24px;
}
.ui-toast-alert-text {
  padding: 16px;
  border-radius: 16px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 1.5rem;
  line-height: 2rem;
  text-align: center;
  word-wrap: break-word;
  word-break: keep-all;
}
.ui-toast-alert-text + .ui-toast-alert-text {
  margin-top: 10px;
}
/* 22.07.27 */
.layer-receipt .layer-container {
  overflow: hidden;
  overflow-y: hidden;
  width: calc(100% - 58px);
  min-width: 320px;
  padding-bottom: 20px;
}
.layer-receipt .ui-layer::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0%;
  width: 100%;
  height: 20px;
  background: url("../images/common/layer-receipt.png") repeat-X 50% 100%;
  background-size: auto 51px;
}
.layer-receipt .ui-layer {
  border-radius: 15px 15px 0 0;
}
.layer-receipt .ui-layer__head .header {
  padding: 25px 24px 12px;
}
.layer-receipt .ui-layer__body-inner {
  overflow: hidden;
  overflow-y: auto;
  max-height: calc(100vh - 64px - 64px - 20px - 50px - 50px);
}
.layer-receipt .ui-layer__foot .ui-buttons {
  padding: 10px 24px;
}

/* ui-radio-block */
/* ui-checkbox-block */
/* ui-toggle-block */
.ui-radio-block,
.ui-checkbox-block,
.ui-file-block,
.ui-toggle-block {
  position: relative;
  z-index: 0;
  font-size: 0;
  line-height: 0;
}
button.ui-radio-block,
button.ui-checkbox-block {
  display: block;
  width: 100%;
  text-align: left;
}
.ui-toggle-block.type-aside {
  margin-left: auto;
}
.ui-checkbox-contents {
  margin-top: 15px;
  padding-left: 26px;
}
/* 230706 웹접근성 수정 */
.ui-radio-block .ui-radio,
.ui-checkbox-block .ui-checkbox,
.ui-file-block .ui-file,
.ui-toggle-block .ui-toggle {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0;
}
 /* [2026-08-10 kho] 접근성. 추가 s. */
.is-android-os .ui-radio-block .ui-radio,
.is-android-os .ui-checkbox-block .ui-checkbox,
.is-android-os .ui-file-block .ui-file,
.is-android-os .ui-toggle-block .ui-toggle {
  /* z-index: 1; */
}
/* //[2026-08-10 kho] 접근성. 추가 e. */
.ui-radio-block .ui-label,
.ui-checkbox-block .ui-label,
.ui-toggle-block .ui-label {
  font-size: 1rem;
  line-height: normal;
}
.ui-radio-group.type-wrap .ui-label .logo-image,
.ui-checkbox-group.type-wrap .ui-label .logo-image {
  margin: 0 auto;
}
.ui-checkbox-block .ui-label .ui-checkbox-object {
  margin-right: 4px;
}
.ui-checkbox-block.type-has-arrow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.ui-checkbox-block.type-has-arrow label {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.ui-checkbox-block.type-has-arrow .ui-arrow-button {
  -ms-flex: none;
  flex: none;
  margin-right: 5px;
  -webkit-box-flex: 0;
}
.ui-checkbox-block.type-block .ui-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* ui-label-text - type-ellipsis */
.ui-label-text.type-ellipsis .title {
  overflow: hidden;
  margin-right: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ui-label - type-has-right-object */
.ui-label.type-has-right-object .ui-label-text {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.ui-label.type-has-right-object .ui-checkbox-object {
  margin: 0;
  background-position: 100% center;
}

.ui-checkbox-object,
.ui-radio-object {
  position: relative;
  display: block;
  -ms-flex: none;
  flex: none;
  box-sizing: border-box;
  border: 0 solid var(--gray-40);
  border-radius: 8px;
  -webkit-box-flex: 0;
}
.ui-checkbox-object {
  width: 18px;
  height: 18px;
  background: url("../images/common/ic-checkbox.svg") no-repeat 0 50%;
}
.ui-checkbox:checked + .ui-label .ui-checkbox-object,
.ui-checkbox-block.is-checked .ui-label .ui-checkbox-object {
  background-image: url("../images/common/ic-checkbox-c.svg");
}
.ui-checkbox[disabled] + .ui-label .ui-checkbox-object,
.ui-checkbox-block.type-disabled .ui-label .ui-checkbox-object,
.ui-checkbox-block[disabled] .ui-label .ui-checkbox-object {
  background-image: url("../images/common/ic-checkbox-l-d.svg");
}
.ui-checkbox[disabled]:checked + .ui-label .ui-checkbox-object,
.ui-checkbox-block.type-disabled.is-checked .ui-label .ui-checkbox-object,
.ui-checkbox-block[disabled].is-checked .ui-label .ui-checkbox-object {
  background-image: url("../images/common/ic-checkbox-l-d-c.svg");
}
.ui-checkbox-block.type-secondary .ui-checkbox[disabled]:checked + .ui-label .ui-checkbox-object,
.ui-checkbox-block.type-secondary.type-disabled.is-checked .ui-label .ui-checkbox-object,
.ui-checkbox-block.type-secondary[disabled].is-checked .ui-label .ui-checkbox-object {
  background-image: url("../images/common/ic-checkbox-l-d-c.svg");
}
.ui-checkbox-block.type-black .ui-checkbox:checked + .ui-label .ui-checkbox-object {
  background-image: url('../../images/via/icon/element-privacy-active.svg');
  background-size: 20px;
  background-position-x: -1px;
}
.ui-radio-object {
  width: 22px;
  height: 22px;
  border-radius: 100%;
  background: url("../images/common/ic-radio.svg") no-repeat 0 50%;
}
.ui-radio:checked + .ui-label .ui-radio-object,
.ui-radio-block.is-checked .ui-label .ui-radio-object {
  background-image: url("../images/common/ic-radio-c.svg");
}
.ui-radio[disabled] + .ui-label .ui-radio-object,
.ui-radio-block.type-disabled .ui-label .ui-radio-object,
.ui-radio-block[disabled] .ui-label .ui-radio-object {
  background-image: url("../images/common/ic-radio-d.svg");
}
.ui-radio[disabled]:checked + .ui-label .ui-radio-object,
.ui-radio-block.type-disabled.is-checked .ui-label .ui-radio-object,
.ui-radio-block[disabled].is-checked .ui-label .ui-radio-object {
  background-image: url("../images/common/ic-radio-d-c.svg");
}
/* 24.04.12 라디오 버튼 컬러 수정 (24.06.12 원복) */
.ui-radio-block.type-circle .ui-radio-object {
  border: 1px solid var(--gray-40);
  /* border: 1px solid #111; */
  background: #fff;
}
.ui-radio-block.type-circle .ui-radio-object::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background: #fff;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.ui-radio-block.type-circle .ui-radio:checked + .ui-label .ui-radio-object,
.ui-radio-block.type-circle.is-checked .ui-label .ui-radio-object {
  border-color: var(--primary);
  background: #fff;
}
.ui-radio-block.type-circle .ui-radio:checked + .ui-label .ui-radio-object::after,
.ui-radio-block.type-circle.is-checked .ui-label .ui-radio-object::after {
  background: var(--primary);
}
/* 24.04.12 라디오 버튼 컬러 수정 (24.06.12 원복) */
.ui-radio-block.type-circle .ui-radio[disabled] + .ui-label .ui-radio-object,
.ui-radio-block.type-circle .ui-radio[disabled] + .ui-label .ui-radio-object::after,
.ui-radio-block.type-circle.type-disabled .ui-label .ui-radio-object,
.ui-radio-block.type-circle.type-disabled .ui-label .ui-radio-object::after,
.ui-radio-block.type-circle[disabled] .ui-label .ui-radio-object,
.ui-radio-block.type-circle[disabled] .ui-label .ui-radio-object::after {
  /* background: var(--gray-20); */
  border-width: 2px;
  background: var(--gray-30);
  /* border-color: #d9d9d9; */
}
/* 24.04.12 라디오 버튼 컬러 수정 (24.06.12 원복) */
.ui-radio-block.type-circle .ui-radio[disabled]:checked + .ui-label .ui-radio-object,
.ui-radio-block.type-circle.type-disabled.is-checked .ui-label .ui-radio-object,
.ui-radio-block.type-circle[disabled].is-checked .ui-label .ui-radio-object {
  border-color: var(--gray-40);
}
/* 24.04.12 라디오 버튼 컬러 수정 (24.06.12 원복) */
.ui-radio-block.type-circle .ui-radio[disabled]:checked + .ui-label .ui-radio-object::after,
.ui-radio-block.type-circle.type-disabled.is-checked .ui-label .ui-radio-object::after,
.ui-radio-block.type-circle[disabled].is-checked .ui-label .ui-radio-object::after {
  /* background: var(--gray-40); */
  width: 8px;
  height: 8px;
  background: var(--gray-50);
}
.ui-radio-block.type-tab .ui-label,
.ui-checkbox-block.type-tab .ui-label {
  padding: 0 14px;
  border: 1px solid #e6e9ef;
  border-radius: 15px;
}
.ui-radio-block.type-tab .ui-radio:checked + .ui-label,
.ui-checkbox-block.type-tab .ui-checkbox:checked + .ui-label,
.ui-radio-block.type-tab.is-checked .ui-label,
.ui-checkbox-block.type-tab.is-checked .ui-label,
.ui-radio-block.type-tab .ui-label.is-active,
.ui-radio-block.type-tab .ui-label.js-tabpanel-active {
  border-color: var(--secondary);
  background-color: var(--secondary);
  color: #fff;
}
.ui-radio-block.type-tab.type-vip .ui-radio:checked + .ui-label,
.ui-checkbox-block.type-tab.type-vip .ui-checkbox:checked + .ui-label,
.ui-radio-block.type-tab.type-vip.is-checked .ui-label,
.ui-checkbox-block.type-tab.type-vip.is-checked .ui-label,
.ui-radio-block.type-tab.type-vip .ui-label.is-active,
.ui-radio-block.type-tab.type-vip .ui-label.js-tabpanel-active {
  border-color: var(--vip);
  background-color: var(--vip);
}
.ui-radio-block.type-tab .ui-radio:checked + .ui-label .sorting-count,
.ui-checkbox-block.type-tab .ui-checkbox:checked + .ui-label .sorting-count,
.ui-radio-block.type-tab.is-checked .ui-label .sorting-count,
.ui-checkbox-block.type-tab.is-checked .ui-label .sorting-count,
.ui-radio-block.type-tab .ui-label.is-active .sorting-count,
.ui-radio-block.type-tab .ui-label.js-tabpanel-active .sorting-count {
  color: #fff;
}
.ui-radio-block.type-tab.type-vip-link .ui-label,
.ui-checkbox-block.type-tab.type-vip-link .ui-label {
  border-color: var(--vip);
  color: var(--vip);
}
.ui-radio-block.type-tab .ui-label-text,
.ui-checkbox-block.type-tab .ui-label-text {
  font-size: 1.4rem;
  line-height: 28px;
}
/* sta #checkboxToggle-all 2023.06.13 */
#setPaymentType.type-tooltip-toggle {
  position: relative;
  cursor: pointer;
}
#setPaymentType.ui-buttons.type-tooltip .ui-buttons-list {
  position: relative;
}
#setPaymentType .ui-button-tooltip.type-bottom {
  display: none;
}
#setPaymentType.ui-buttons.type-tooltip .ui-buttons-list .ui-buttons-item {
  margin: 0;
}
#setPaymentType .ui-buttons-item:nth-child(1),
#setPaymentType .ui-buttons-item:nth-child(3) {
  position: absolute;
}
#setPaymentType .ui-buttons-item:nth-child(1) {
  left: 0;
}
#setPaymentType .ui-buttons-item:nth-child(3) {
  right: 0;
}
#setPaymentType .ui-buttons-item:nth-child(2) {
  position: relative;
  z-index: 1;
  padding: 10px 80px 10px 33px;
}
#setPaymentType .ui-buttons-item:nth-child(2),
#setPaymentType .ui-buttons-item:nth-child(2) .ui-toggle-block {
  position: static;
}

#setPaymentType .ui-label::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
}
#setPaymentType.checked .ui-label .ui-toggle-object,
.ui-toggle-object {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background-color: var(--gray-90); /* 23.07.06 웹접근성 명도대비 */
  transition: 0.2s;
}
#setPaymentType.checked .ui-toggle-object::after,
.ui-toggle-object::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background-color: #fff;
  transition: 0.2s;
}
#setPaymentType .ui-label .ui-toggle-object,
.ui-toggle:checked + .ui-label .ui-toggle-object {
  background-color: var(--primary);
}
/* end #checkboxToggle-all 2023.05.25 */
.ui-toggle:checked + .ui-label .ui-toggle-object::after {
  left: 18px;
}
.ui-toggle[disabled] + .ui-label {
  opacity: 0.5;
}
.ui-label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: top;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.ui-label-icon {
  display: block;
  -ms-flex: none;
  flex: none;
  -webkit-box-flex: 0;
}
.ui-label-icon::before {
  content: "";
  display: block;
  width: 21px;
  height: 21px;
  margin: 0 -2px;
  background: no-repeat 50% 50%;
}
.ui-label-icon.type-1::before,
.ui-label-icon.type-2::before {
  width: 36px;
  height: 36px;
  margin-right: 0;
  margin-left: 0;
}
.ui-label-icon.type-1 + .ui-label-text,
.ui-label-text + .ui-label-icon.type-1,
.ui-label-icon.type-2 + .ui-label-text,
.ui-label-text + .ui-label-icon.type-2 {
  margin-left: 15px;
}
.ui-label-icon.type-1::before {
  background-image: url("../images/icon/ic-certificate.svg");
}
.ui-label-icon.type-2::before {
  background-image: url("../images/icon/ic-certificate-fail.svg");
}
.ui-label-icon.type-3::before,
.ui-radio[disabled]:checked + .ui-label .ui-label-icon.type-3::before,
.ui-checkbox[disabled]:checked + .ui-label .ui-label-icon.type-3::before {
  background-image: url("../images/icon/ic-benefit-1.svg");
}
.ui-radio:checked + .ui-label .ui-label-icon.type-3::before,
.ui-checkbox:checked + .ui-label .ui-label-icon.type-3::before {
  background-image: url("../images/icon/ic-benefit-1-on.svg");
}
.ui-label-icon.type-4::before,
.ui-radio[disabled]:checked + .ui-label .ui-label-icon.type-4::before,
.ui-checkbox[disabled]:checked + .ui-label .ui-label-icon.type-4::before {
  background-image: url("../images/icon/ic-benefit-2.svg");
}
.ui-radio:checked + .ui-label .ui-label-icon.type-4::before,
.ui-checkbox:checked + .ui-label .ui-label-icon.type-4::before {
  background-image: url("../images/icon/ic-benefit-2-on.svg");
}
.ui-label-icon.type-5::before,
.ui-radio[disabled]:checked + .ui-label .ui-label-icon.type-5::before,
.ui-checkbox[disabled]:checked + .ui-label .ui-label-icon.type-5::before {
  background-image: url("../images/icon/ic-benefit-3.svg");
}
.ui-radio:checked + .ui-label .ui-label-icon.type-5::before,
.ui-checkbox:checked + .ui-label .ui-label-icon.type-5::before {
  background-image: url("../images/icon/ic-benefit-3-on.svg");
}
.ui-label-icon.type-6::before,
.ui-radio[disabled]:checked + .ui-label .ui-label-icon.type-6::before,
.ui-checkbox[disabled]:checked + .ui-label .ui-label-icon.type-6::before {
  background-image: url("../images/icon/ic-benefit-4.svg");
}
.ui-radio:checked + .ui-label .ui-label-icon.type-6::before,
.ui-checkbox:checked + .ui-label .ui-label-icon.type-6::before {
  background-image: url("../images/icon/ic-benefit-4-on.svg");
}
.ui-label-icon.type-7::before,
.ui-radio[disabled]:checked + .ui-label .ui-label-icon.type-7::before,
.ui-checkbox[disabled]:checked + .ui-label .ui-label-icon.type-7::before {
  background-image: url("../images/icon/ic-benefit-5.svg");
}
.ui-radio:checked + .ui-label .ui-label-icon.type-7::before,
.ui-checkbox:checked + .ui-label .ui-label-icon.type-7::before {
  background-image: url("../images/icon/ic-benefit-5-on.svg");
}
.ui-label-icon.type-8::before,
.ui-radio[disabled]:checked + .ui-label .ui-label-icon.type-8::before,
.ui-checkbox[disabled]:checked + .ui-label .ui-label-icon.type-8::before {
  background-image: url("../images/icon/ic-benefit-6.svg");
}
.ui-radio:checked + .ui-label .ui-label-icon.type-8::before,
.ui-checkbox:checked + .ui-label .ui-label-icon.type-8::before {
  background-image: url("../images/icon/ic-benefit-6-on.svg");
}
.ui-label-icon.type-9::before,
.ui-radio[disabled]:checked + .ui-label .ui-label-icon.type-9::before,
.ui-checkbox[disabled]:checked + .ui-label .ui-label-icon.type-9::before {
  background-image: url("../images/icon/ic-benefit-7.svg");
}
.ui-radio:checked + .ui-label .ui-label-icon.type-9::before,
.ui-checkbox:checked + .ui-label .ui-label-icon.type-9::before {
  background-image: url("../images/icon/ic-benefit-7-on.svg");
}
.ui-label-icon.type-10::before,
.ui-radio[disabled]:checked + .ui-label .ui-label-icon.type-10::before,
.ui-checkbox[disabled]:checked + .ui-label .ui-label-icon.type-10::before {
  background-image: url("../images/icon/ic-benefit-8.svg");
}
.ui-radio:checked + .ui-label .ui-label-icon.type-10::before,
.ui-checkbox:checked + .ui-label .ui-label-icon.type-10::before {
  background-image: url("../images/icon/ic-benefit-8-on.svg");
}
.ui-label-icon.type-11::before,
.ui-radio[disabled]:checked + .ui-label .ui-label-icon.type-11::before,
.ui-checkbox[disabled]:checked + .ui-label .ui-label-icon.type-11::before {
  background-image: url("../images/icon/ic-benefit-9.svg");
}
.ui-radio:checked + .ui-label .ui-label-icon.type-11::before,
.ui-checkbox:checked + .ui-label .ui-label-icon.type-11::before {
  background-image: url("../images/icon/ic-benefit-9-on.svg");
}
.ui-label-icon.type-12::before,
.ui-radio[disabled]:checked + .ui-label .ui-label-icon.type-12::before,
.ui-checkbox[disabled]:checked + .ui-label .ui-label-icon.type-12::before {
  background-image: url("../images/icon/ic-benefit-10.svg");
}
.ui-radio:checked + .ui-label .ui-label-icon.type-12::before,
.ui-checkbox:checked + .ui-label .ui-label-icon.type-12::before {
  background-image: url("../images/icon/ic-benefit-10-on.svg");
}
.ui-label-text {
  display: block;
  font-size: 1.5rem;
  /* [24.07.10 : lyr] 회원가입(& 웹접근성) > 체크박스 사이즈 18px로 변경 */
  line-height: 18px;
}
.ui-label-text .title:not(.form-flex) {
  display: block;
}
input:checked + .ui-label .ui-label-text .title,
input:checked + .ui-label .ui-label-text .highlighting-text {
  color: var(--primary);
}
.ui-checkbox-object + .ui-label-text,
.ui-label-text + .ui-checkbox-object,
.ui-radio-object + .ui-label-text,
.ui-label-text + .ui-radio-object,
.ui-toggle-object + .ui-label-text,
.ui-label-text + .ui-toggle-object,
.ui-label-icon + .ui-label-text,
.ui-label-text + .ui-label-icon {
  margin-left: 4px;
}
.ui-checkbox[disabled] + .ui-label .ui-label-text,
.ui-radio[disabled] + .ui-label .ui-label-text {
  color: var(--gray-70);
}
.ui-checkbox[disabled]:checked + .ui-label .ui-label-text,
.ui-radio[disabled]:checked + .ui-label .ui-label-text {
  color: var(--gray-80);
}
.ui-label-sub {
  font-weight: 400;
}
.ui-label-info-txt {
  margin-top: 4px;
  margin-left: 28px;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 18px;
}

/* ui-radio-block type-circle type-medium */
.ui-radio-block.type-circle.type-medium .ui-radio-object {
  width: 18px;
  height: 18px;
}
.ui-radio-block.type-circle.type-medium .ui-radio-object + .ui-label-text,
.ui-radio-block.type-circle.type-medium .ui-label-text + .ui-radio-object {
  margin-left: 8px;
}
.ui-radio-block.type-circle.type-medium .ui-radio-object::after {
  width: 10px;
  height: 10px;
}
.ui-radio-block.type-circle.type-medium .ui-radio[disabled]:checked + .ui-label .ui-radio-object::after,
.ui-radio-block.type-circle.type-medium.type-disabled.is-checked .ui-label .ui-radio-object::after,
.ui-radio-block.type-circle.type-medium[disabled].is-checked .ui-label .ui-radio-object::after {
  width: 7px;
  height: 7px;
}

/* ui-radio-block type-circle type-small */
.ui-radio-block.type-circle.type-small .ui-radio-object {
  width: 14px;
  height: 14px;
}
.ui-radio-block.type-circle.type-small .ui-radio-object + .ui-label-text,
.ui-radio-block.type-circle.type-small .ui-label-text + .ui-radio-object {
  margin-left: 8px;
}
.ui-radio-block.type-circle.type-small .ui-radio-object::after {
  width: 8px;
  height: 8px;
  /* margin: -4px 0 0 -4px; */
}
.ui-radio-block.type-circle.type-small.type-align-top .ui-radio-object {
  margin-top: 2px;
}
.ui-radio-block.type-circle.type-small .ui-radio[disabled]:checked + .ui-label .ui-radio-object::after,
.ui-radio-block.type-circle.type-small.type-disabled.is-checked .ui-label .ui-radio-object::after,
.ui-radio-block.type-circle.type-small[disabled].is-checked .ui-label .ui-radio-object::after {
  width: 5px;
  height: 5px;
}

/* ui-label-text type-multi-ellipsis */
.ui-label-text.type-multi-ellipsis {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}
.ui-label-text.type-multi-ellipsis-line-2 {
  max-height: 34px;
  -webkit-line-clamp: 2;
}

/* ui-checkbox-block type-inside */
.ui-checkbox-block.type-inside {
  padding-left: 14px;
}

/* ui-checkbox-block type-large */
/* ui-radio-block type-large  */
.ui-checkbox-block.type-large .ui-checkbox-object {
  width: 22px;
  height: 22px;
  background-image: url("../images/common/ic-checkbox-l.svg");
}
.ui-checkbox-block.type-large .ui-checkbox:checked + .ui-label .ui-checkbox-object {
  background-image: url("../images/common/ic-checkbox-l-c.svg");
}
.ui-checkbox-block.type-large .ui-checkbox[disabled] + .ui-label .ui-checkbox-object {
  background-image: url("../images/common/ic-checkbox-l-d.svg");
}
.ui-checkbox-block.type-large .ui-checkbox[disabled]:checked + .ui-label .ui-checkbox-object {
  background-image: url("../images/common/ic-checkbox-l-d-c.svg");
}
/* [24.06.27 : lyr] 웹 접근성 - 체크박스 이름 수정 (as-is : ic-checkbox-tl-d-c.svg)*/
.ui-checkbox-block.type-large.type-large-secondary .ui-checkbox[disabled]:checked + .ui-label .ui-checkbox-object {
  background-image: url("../images/common/ic-checkbox-l-d-c.svg");
}
.ui-checkbox-block.type-large .ui-checkbox-object + .ui-label-text,
.ui-checkbox-block.type-large .ui-label-text + .ui-checkbox-object {
  margin-left: 2px;
}
.ui-checkbox-block.type-large .ui-label-text,
.ui-radio-block.type-large .ui-label-text {
  font-weight: 500;
  font-size: 1.5rem;
}
.ui-checkbox-block.type-large .ui-label-text.font-weight-regular,
.ui-radio-block.type-large .ui-label-text.font-weight-regular {
  font-weight: 400;
}
.type-large .ui-label-text.medium-text {
  margin-left: 10px;
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 22px;
}
.ui-radio-block.type-large .ui-label-text {
  margin-left: 8px;
}

/* ui-checkbox-block type-box */
/* ui-radio-block type-box */
.ui-checkbox-block.type-box .ui-label,
.ui-radio-block.type-box .ui-label {
  position: relative;
  padding: 19px 15px;
  border-radius: 6px;
  color: var(--gray-70);
  box-shadow: inset 0 0 0 1px var(--gray-30);
}
.ui-checkbox-block.type-box .ui-label-text,
.ui-radio-block.type-box .ui-label-text {
  font-size: 1.5rem;
  line-height: 21px;
}
.ui-checkbox-block.type-box .ui-label-text .sub,
.ui-radio-block.type-box .ui-label-text .sub {
  margin-top: 15px;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 19px;
}
.ui-checkbox-block.type-box .ui-checkbox:checked + .ui-label,
.ui-radio-block.type-box .ui-radio:checked + .ui-label,
.ui-checkbox-block.type-box.is-checked .ui-label,
.ui-radio-block.type-box.is-checked .ui-label,
.ui-radio-block.type-box a.ui-label:active {
  z-index: 1;
  color: var(--basic);
  box-shadow: inset 0 0 0 2px var(--primary);
  font-weight: 500;
}
.type-grid:not(.type-grid-basic) .type-box .ui-label-text,
.type-panel .type-box .ui-label-text {
  font-size: 1.3rem;
  line-height: 18px;
}
.ui-checkbox-block.type-box .ui-checkbox + .ui-label .box-checkbox-tag,
.ui-radio-block.type-box .ui-radio + .ui-label .box-checkbox-tag {
  background-color: var(--gray-30);
  color: var(--gray-60);
}
.ui-checkbox-block.type-box .ui-checkbox:checked + .ui-label .box-checkbox-tag,
.ui-radio-block.type-box .ui-radio:checked + .ui-label .box-checkbox-tag {
  background-color: var(--primary);
  color: #fff;
}
.ui-radio-group.type-wrap {
  flex-wrap: wrap;
  margin-right: -5px;
  margin-bottom: -10px;
  margin-left: -5px;
}
.ui-radio-group.type-wrap .ui-checkbox-block.type-box,
.ui-radio-group.type-wrap .ui-radio-block.type-box {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  box-sizing: border-box;
  margin: 0 0 10px;
  padding: 0 5px;
  -webkit-box-flex: 0;
}
/* 230706 웹접근성 수정 */
.ui-radio-group.type-wrap .ui-radio-block.type-box .ui-radio {
  left: 5px;
  width: calc(100% - 10px);
}
.ui-checkbox-block.type-box .ui-checkbox[disabled] + .ui-label,
.ui-radio-block.type-box .ui-radio[disabled] + .ui-label,
.ui-checkbox-block.type-box.type-disabled .ui-label,
.ui-radio-block.type-box.type-disabled .ui-label,
.ui-checkbox-block.type-box[disabled] .ui-label,
.ui-radio-block.type-box[disabled] .ui-label {
  background-color: var(--gray-10);
}
.ui-checkbox-block.type-box .ui-checkbox[disabled] + .ui-label .ui-label-text,
.ui-radio-block.type-box .ui-radio[disabled] + .ui-label .ui-label-text,
.ui-checkbox-block.type-box.type-disabled .ui-label .ui-label-text,
.ui-radio-block.type-box.type-disabled .ui-label .ui-label-text,
.ui-checkbox-block.type-box[disabled] .ui-label .ui-label-text,
.ui-radio-block.type-box[disabled] .ui-label .ui-label-text {
  color: var(--gray-70);
}
.ui-checkbox-block.type-box .ui-checkbox[disabled]:checked + .ui-label,
.ui-radio-block.type-box .ui-radio[disabled]:checked + .ui-label,
.ui-checkbox-block.type-box.type-disabled.is-checked .ui-label,
.ui-radio-block.type-box.type-disabled.is-checked .ui-label,
.ui-checkbox-block.type-box[disabled].is-checked .ui-label,
.ui-radio-block.type-box[disabled].is-checked .ui-label {
  box-shadow: inset 0 0 0 2px var(--gray-50);
}
.ui-checkbox-group.type-wrap {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
}
.ui-checkbox-group.type-wrap .ui-checkbox-block {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  box-sizing: border-box;
  -webkit-box-flex: 0;
}
.ui-checkbox-group.type-wrap .ui-checkbox-block:nth-child(n + 3) {
  margin-top: 18px;
}
.ui-checkbox-group.type-wrap .ui-checkbox-block + .ui-checkbox-block {
  margin-left: 0;
}

/* ui-checkbox-block type-box type-box-color-basic */
/* ui-radio-block type-box type-box-color-basic */
.ui-checkbox-block.type-box.type-box-color-basic .ui-label,
.ui-radio-block.type-box.type-box-color-basic .ui-label {
  color: var(--basic);
}

/* ui-checkbox-block type-box type-no-side-padding */
/* ui-radio-block type-box type-no-side-padding */
.ui-checkbox-block.type-box.type-no-side-padding .ui-label,
.ui-radio-block.type-box.type-no-side-padding .ui-label {
  padding-right: 0;
  padding-left: 0;
}

/* ui-radio-block type-box type-no-side-padding */
.ui-file-block.type-button .ui-label-text {
  font-size: inherit;
  line-height: inherit;
}

/* ui-checkbox-group, ui-radio-group */
.ui-checkbox-group,
.ui-radio-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.ui-checkbox-group + .ui-checkbox-group {
  margin-top: 18px;
}
.ui-checkbox-group .ui-label,
.ui-radio-group .ui-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  box-sizing: border-box;
  height: 100%;
}
.ui-checkbox-group .ui-label.type-flex-column,
.ui-radio-group .ui-label.type-flex-column {
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
}
.ui-checkbox-group .ui-label.type-flex-column .logo-image,
.ui-radio-group .ui-label.type-flex-column .logo-image {
  margin: 0 auto 8px;
}
.ui-checkbox-group .ui-label.type-block,
.ui-radio-group .ui-label.type-block {
  display: block;
}
.ui-checkbox-group .ui-checkbox-block,
.ui-radio-group .ui-radio-block {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.ui-checkbox-group .ui-checkbox-block + .ui-checkbox-block,
.ui-radio-group .ui-radio-block + .ui-radio-block {
  margin-left: 10px;
}
.ui-checkbox-group.type-scroll-x,
.ui-radio-group.type-scroll-x {
  overflow-x: auto;
  margin: 0 -24px;
  padding: 0 24px;
}
.ui-checkbox-group.type-scroll-x .ui-checkbox-block,
.ui-radio-group.type-scroll-x .ui-radio-block {
  margin-right: 10px;
  margin-left: 0;
}
.ui-checkbox-group.type-scroll-x .ui-checkbox-block:last-child,
.ui-radio-group.type-scroll-x .ui-radio-block:last-child {
  margin-right: 0;
}
.ui-radio-group.type-scroll-x.type-has-bottom-tooltip {
  margin-bottom: -57px;
  padding-bottom: 57px;
}
.ui-radio-group.type-panel .ui-radio-block {
  z-index: auto;
  margin: 0;
  text-align: center;
}
.ui-radio-group.type-panel .ui-radio-block + .ui-radio-block {
  margin-left: -1px;
}
.ui-radio-group.type-panel.type-scroll-x .ui-radio-block.type-box {
  flex: auto;
  min-width: 60px;
}
.ui-radio-group.type-panel.type-scroll-x .ui-radio-block.type-box .ui-label {
  padding-right: 20px;
  padding-left: 20px;
  white-space: nowrap;
}
.ui-checkbox-group.type-grid,
.ui-radio-group.type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 6px;
}
/* [2024-09-11 : shj] 1개일 경우 가운데 정렬 */
.ui-radio-group.type-grid.type-col1 .ui-radio-block {
  grid-column: 2;
}
.ui-radio-group.type-grid.type-half {
  grid-template-columns: 1fr 1fr;
}
.ui-checkbox-group.type-grid.type-col2,
.ui-radio-group.type-grid.type-col2 {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ui-checkbox-group.type-grid:not(.type-grid-basic).type-col2 .ui-label,
.ui-radio-group.type-grid:not(.type-grid-basic).type-col2 .ui-label {
  padding-top: 15px;
  padding-bottom: 15px;
}
.type-grid:not(.type-grid-basic) .ui-checkbox-block,
.type-grid:not(.type-grid-basic) .ui-radio-block {
  flex: none;
  text-align: center;
}
.type-grid .ui-checkbox-block + .ui-checkbox-block,
.type-grid .ui-radio-block + .ui-radio-block {
  margin-left: 0;
}
.type-grid .ui-checkbox-block .ui-label,
.type-grid .ui-radio-block .ui-label,
.ui-radio-group.type-panel .ui-radio-block.type-box .ui-label {
  justify-content: center;
  min-height: 48px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.type-grid .ui-checkbox-block.type-wide .ui-label,
.type-grid .ui-radio-block.type-wide .ui-label {
  min-height: 66px;
}
.type-grid:not(.type-grid-basic) .ui-checkbox-block .ui-label,
.type-grid:not(.type-grid-basic) .ui-radio-block .ui-label,
.ui-radio-group.type-panel .ui-radio-block.type-box .ui-label {
  padding-top: 9px;
  padding-bottom: 9px;
}
.ui-checkbox-group.type-grid + .ui-checkbox-group.type-grid,
.ui-radio-group.type-grid + .ui-radio-group.type-grid {
  gap: 6px;
  margin-top: 6px;
}

/* [2026-07-24 kho] [WPM-15422] .type-full 추가. */
.ui-checkbox-group.type-grid .ui-checkbox-block.type-full,
.ui-radio-group.type-grid .ui-radio-block.type-full {
  grid-column: 1 / -1;
}

.ui-radio-group.type-panel .ui-radio-block.type-box .ui-label {
  padding-right: 5px;
  padding-left: 5px;
  border-radius: 0;
}
.ui-radio-group.type-panel .ui-radio-block.type-box:first-child .ui-label {
  border-radius: 6px 0 0 6px;
}
.ui-radio-group.type-panel .ui-radio-block.type-box:last-child .ui-label {
  border-radius: 0 6px 6px 0;
}
.ui-radio-group.type-panel .ui-radio-block.type-box:first-child:last-child .ui-label {
  border-radius: 6px;
}
.ui-checkbox-group.type-full,
.ui-radio-group.type-full {
  display: block;
}
.ui-checkbox-group.type-full .ui-checkbox-block + .ui-checkbox-block,
.ui-radio-group.type-full .ui-radio-block + .ui-radio-block {
  margin-top: 10px;
  margin-left: 0;
}
.ui-checkbox-group.type-full .ui-label,
.ui-radio-group.type-full .ui-label {
  padding-top: 15px;
  padding-bottom: 15px;
}
.ui-checkbox-group.type-full .ui-label-icon,
.ui-checkbox-group.type-full .ui-label-icon.type-1,
.ui-checkbox-group.type-full .ui-label-icon.type-2,
.ui-checkbox-group.type-full .ui-label-text,
.ui-radio-group.type-full .ui-label-text {
  font-size: 1.3rem;
  line-height: 18px;
}
.ui-checkbox-group.type-full .ui-label-text.type-text-large,
.ui-radio-group.type-full .ui-label-text.type-text-large {
  font-size: 1.5rem;
  line-height: 20px;
}
.ui-checkbox-group.type-full .ui-label-text .form-detail-item:not(:first-child),
.ui-radio-group.type-full .ui-label-text .form-detail-item:not(:first-child) {
  margin-top: 10px;
}
.ui-checkbox-group.type-full .ui-label-text .form-detail-title,
.ui-radio-group.type-full .ui-label-text .form-detail-title {
  font-weight: 400;
}
.ui-checkbox-group.type-full .ui-label-text .form-detail-group,
.ui-radio-group.type-full .ui-label-text .form-detail-group {
  color: var(--basic);
}
.ui-checkbox-group.type-full.type-size-basic .ui-label,
.ui-radio-group.type-full.type-size-basic .ui-label {
  padding-top: 19px;
  padding-bottom: 19px;
}
.ui-checkbox-group.type-full.type-size-basic .title,
.ui-radio-group.type-full.type-size-basic .title {
  font-size: 1.5rem;
  line-height: 2.2rem;
}
.ui-checkbox-group.type-full.type-form-detail .ui-label.type-block,
.ui-radio-group.type-full.type-form-detail .ui-label.type-block {
  padding-top: 20px;
  padding-bottom: 20px;
}
.ui-checkbox-group.type-full.type-form-detail .type-total,
.ui-radio-group.type-full.type-form-detail .type-total {
  font-size: 1.5rem;
  line-height: 22px;
}
.ui-checkbox-group.type-full.type-form-detail .form-detail-list,
.ui-radio-group.type-full.type-form-detail .form-detail-list {
  font-size: 1.3rem;
  line-height: 18px;
}
.ui-checkbox-group.type-full.type-form-detail .form-detail-list:not(:first-child),
.ui-radio-group.type-full.type-form-detail .form-detail-list:not(:first-child) {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--gray-30);
}
.ui-checkbox-group.type-full.type-form-detail .form-detail-list .form-detail-item:not(:first-child),
.ui-radio-group.type-full.type-form-detail .form-detail-list .form-detail-item:not(:first-child) {
  margin-top: 10px;
}
.ui-radio-group.type-toggle {
  padding: 4px;
  border-radius: 24px;
  background-color: #f2f4f6;
}
.ui-radio-group.type-toggle .ui-radio-block + .ui-radio-block {
  margin-left: 4px;
}
.ui-radio-group.type-toggle .ui-label {
  justify-content: center;
  height: 40px;
  border-radius: 20px;
  color: var(--gray-70);
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.ui-radio-group.type-toggle .ui-radio:checked + .ui-label {
  background-color: #fff;
  color: var(--basic);
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05);
  font-weight: 500;
}
/* 2022.11.15 type-wide*/
.ui-radio-group.type-toggle.type-wide {
  padding: 5px;
  border-radius: 34px;
}
.ui-radio-group.type-toggle.type-wide .ui-label {
  height: 62px;
  border-radius: 30px;
}

/* ui-checkbox-block type-box type-has-button */
.ui-checkbox-block.type-box.type-has-button .ui-label {
  padding: 0;
}
.ui-checkbox-block.type-box.type-has-button .form-detail-list.type-line {
  position: relative;
  margin-top: 19px;
  padding-top: 25px;
}
.ui-checkbox-block.type-box.type-has-button .form-detail-list.type-line::before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 1px;
  background: var(--gray-30);
}
.ui-checkbox-block-head {
  position: relative;
  padding: 20px 44px 20px 15px;
}
.ui-checkbox-block-head .guide-layer-opener {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 100%;
}
.ui-checkbox-block-head .guide-layer-opener::after {
  margin-right: 20px;
}
.ui-checkbox-block-detail {
  padding: 5px 15px 20px;
}

/* ui-label type-block */
.ui-label.type-block {
  display: block;
}

/* ui-label type-flex */
.ui-label.type-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.ui-label.type-flex .ui-label-text {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}

/* ui-label type-has-icon */
.ui-label.type-has-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-align: start;
  -ms-flex-align: start;
}
.ui-label.type-has-icon .ui-label-text {
  -ms-flex: 1;
  flex: 1;
  -webkit-box-flex: 1;
}

/* ui-label type-has-object */
.ui-checkbox-group.type-grid .ui-label.type-has-object {
  padding-top: 20px;
  padding-bottom: 20px;
}
.ui-label.type-has-object .ui-label-text {
  width: 100%;
  font-weight: 400;
}
.ui-checkbox:checked + .ui-label.ui-label.type-has-object .ui-label-text .title {
  color: var(--basic);
  font-weight: 500;
}
.ui-label.type-has-object .ui-checkbox-object {
  margin-right: 0;
  margin-left: auto;
}

/* ui-radio-block type-align-top */
/* ui-checkbox-block type-align-top */
.ui-radio-block.type-align-top .ui-label,
.ui-checkbox-block.type-align-top .ui-label {
  align-items: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
}

/* layout */
html {
  overflow-x: auto;
  overflow-y: scroll;
}
html,
body,
#wrap {
  height: 100%;
  margin: 0;
}
.layout-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
}
.contents-wrap {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-bottom: 0px; /* 22.12.05 여백 수정 */
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-flex: 1;
}
/* .contents-wrap 하위에 바로 .page-contents + .page-buttons 구조를 사용하지 않고, 중간에 케이스별 wrapper 요소가 필요할 때 사용 */
.contents-subcase-wrap {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.bg-gray {
  background-color: #f4f6f8;
}
.fix-top-wrap ~ .contents-wrap {
  padding-top: 50px; /* 22.12.05 여백 수정 */
}
html.is-full-contents .contents-wrap {
  -ms-flex: none;
  flex: none;
  box-sizing: border-box;
  min-height: 100vh;
  -webkit-box-flex: 0;
}

.layout-wrap.bg-gray .header {
  background-color: #f4f6f8;
}
.layout-wrap.bg-gray .page-contents {
  background-color: #f4f6f8;
}
.layout-wrap.bg-gray .page-buttons.type-fixed {
  background-color: #f4f6f8;
}

/* 22.06.22 저축은행중앙회 */
.layout-wrap.type-affiliate-sb .header {
  height: 85px;
  border-bottom: 2px solid #b2d98a;
}
.layout-wrap.type-affiliate-sb .logo {
  width: 142px;
  margin-top: 14px;
}
.layout-wrap.type-affiliate-sb .contents-wrap {
  padding-top: 85px;
}
.layout-wrap.type-affiliate-sb .page-contents {
  padding-top: 20px;
}
/* 22.08.24 KDB산업은행 */
.layout-wrap.type-affiliate-kdb .header {
  height: 85px;
  border-bottom: 2px solid #7eade0;
}
.layout-wrap.type-affiliate-kdb .logo {
  width: 160px;
  margin-top: 11px;
}
.layout-wrap.type-affiliate-kdb .contents-wrap {
  padding-top: 85px;
}
.layout-wrap.type-affiliate-kdb .page-contents {
  padding-top: 20px;
}

/* fix-top-wrap */
.fix-top-wrap {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  box-sizing: border-box;
}
.is-scroll-blocking.is-scrollbars-width .fix-top-wrap {
  right: 17px;
}

/* fix-bottom-wrap */
.fix-bottom-wrap {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  box-sizing: border-box;
}
.is-scroll-blocking.is-scrollbars-width .fix-bottom-wrap {
  right: 17px;
}

/* header */
.header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 50px;
  padding: 13px 22px 13px 24px;
  background-color: #fff;
  color: #000;
  text-align: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.header-left,
.header-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.header-left,
.header-right:first-child {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.header-left:not(:last-child) {
  padding-right: 10px;
}
.header-right {
  justify-content: flex-end;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
}
.header-title {
  overflow: hidden;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 24px; /* 24.04.24 추가 */
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-title .icon.type-trans {
  display: inline-block;
  vertical-align: top;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  background: url("../images/icon/ic-header-trans.svg");
}
.header-logo {
  margin: 0;
}
.header-logo-image {
  display: block;
  height: 30px;
  margin: -3px 0;
  background: no-repeat 50% 50%;
}
.header-logo.type-1qpay .header-logo-image {
  width: 80px;
  background-image: url("../images/common/header-logo-1qpay.svg");
}
/* 22.10.27 */
.header-logo.type-1qpay .header-logo-image.ty-02 {
  width: 30px;
  background-image: url("../images/common/logo-appicon02.png");
  background-size: auto 70%;
}
.header-button {
  position: relative;
  width: 32px;
  height: 32px;
  background: no-repeat 50% 50%;
}
.header-button.type-back {
  margin-right: 5px;
  background-image: url("../images/icon/ic-header-back.png"); /* 22.12.15 이미지 확장자 변경 */
  background-size: 20px auto;
  background-position: 18px auto;
  width: 24px;
}
/* 25.03.18 전체메뉴 이미지, 사이즈 변경 */
.header-button.type-menu {
  background-image: url("../images/new_renewal/ic_header_menu.svg");
  background-size: 32px auto;
}
.header-button.type-close {
  background-image: url("../images/new_renewal/ic_header_close.svg");
  background-size: auto 32px;
}
.header-button.type-home {
  background-image: url("../images/icon/ic-header-home.svg");
  background-size: 26px;
}
.header-button.type-manage {
  background-color: #d8d8d8;
}
.header-button.type-setting {
  background-image: url("../images/new_renewal/ic_header_setting.svg");
  background-size: 32px;
}
.header-button.type-push {
  background-image: url("../images/new_renewal/ic_header_alarm.svg");
  background-size: 32px;
}
.header-button.type-compare {
  background-image: url("../images/icon/ic-card-add.svg");
  background-size: 25px;
}
.header-button.type-search {
  background-image: url("../images/new_renewal/ic_header_search.svg");
  background-size: 32px;
}
.header-button.type-delete {
  background-image: url("../images/icon/ic-delete.svg");
  background-size: 25px;
}
.header-button.type-account-book {
  background-image: url("../images/icon/ic-accountbook.svg");
  background-size: 25px;
}
.header-button.type-coupon {
  width: 32px;
  background-image: url("../images/icon/btn-coupon.svg");
  background-size: auto 24px;
}
.header-button.type-download {
  background-image: url("../images/icon/ic-imgdownload.svg");
  background-size: 26px;
}
.header-button.type-share {
  background-image: url("../images/new_renewal/ic_header_share.svg");
  background-size: 30px auto;
}
/* 23.01.04 */
.header-button.type-secretary {
  width: 46px;
  background-image: url("../images/icon/ic-secretary.png");
  background-size: auto 24px;
}
/* 23.05.09 */
.header-button.type-my-doc {
  width: 46px;
  background-image: url("../images/icon/btn-my-doc.svg");
  background-size: auto 24px;
}
/* 250421 */
.header-button.type-txt {
  width: auto;
  color: #111;
  font-size: 14px;
  font-weight: 400;
  line-height: 100%;
}
.header-button + .header-button,
.header-button + .ui-basic-button,
.ui-basic-button + .ui-basic-button {
  margin-left: 12px;
}
.mycard-contents .ui-basic-button + .ui-basic-button {
  margin-left: 0px !important;
}
.header-button.is-new::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 100%;
  display: block;
  overflow: hidden;
  width: 6px;
  height: 6px;
  /* background: url("../images/icon/ic-new.svg") no-repeat 50% 50%; */
  background: #f14a76;
  color: transparent;
  font-size: 1px;
}
.header-button-number {
  position: absolute;
  top: -3px;
  right: -3px;
  box-sizing: border-box;
  min-width: 1.3rem;
  padding: 0 4px;
  border-radius: 0.7rem;
  background-color: var(--point);
  color: #fff;
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.3rem;
}
.header-right .ui-basic-button.type-small {
  width: auto;
  min-height: auto;
  padding: 6px 10px;
  font-size: 1.2rem;
  line-height: 16px;
  white-space: nowrap;
}
.header-right .ui-basic-button.type-small:last-child {
  margin-right: -4px;
}
.header .global-card-brand.type-medium-large {
  margin: -9px 10px -8px 0;
}

/* header type-partner */
.header.type-partner {
  display: block;
  background-color: var(--basic);
  color: #fff;
}

/* header type-white */
.header.type-white {
  position: relative;
  display: block;
  background-color: #fff;
}
.header.type-white .header-left,
.header.type-white .header-right {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 10;
}
.header.type-white .header-left {
  left: 24px;
}
.header.type-white .header-right {
  right: 22px;
}

/* header type-mypage */
.header.type-mypage {
  background-color: #f4f6f8;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}
.is-mypage-scroll .header.type-mypage {
  background-color: #fff;
}

/* header is-skeleton */
.header-skeleton {
  display: none;
}
.header-load,
.header.is-skeleton .header-skeleton {
  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;
}
.header.is-skeleton .header-load {
  display: none;
}
.header.is-skeleton .header-logo-image {
  border-radius: 3px;
  background: var(--skeleton-secondary);
}
/* 22.10.27 */
.header.is-skeleton .header-logo-image.ty-02 {
  border-radius: 3px;
  background: var(--skeleton-secondary);
}
.header.is-skeleton .header-button {
  border-radius: 100%;
  background: var(--skeleton-secondary);
}
/* header center */
.header-button.type-centerhome {
  background-image: url("../images/icon/ic-header-home.svg");
}

/* footer */
.footer {
  padding: 25px 24px;
  background-color: var(--gray-20);
  text-align: center;
}
.footer-nav::before,
.footer-tel::before,
.footer-text::before,
.footer-marks::before {
  content: "";
  display: table;
}
.footer-nav-list,
.footer-tel-list,
.footer-text-list,
.footer-marks-list {
  margin: -5px 0 0 -10px;
  font-size: 0;
  line-height: 0;
}
.footer-nav-item,
.footer-tel-item,
.footer-text-item,
.footer-marks-item {
  position: relative;
  display: inline-block;
  vertical-align: top;
}
.footer-nav-item {
  padding: 5px 0 0 21px;
}
.footer-nav-item:first-child {
  padding-left: 10px;
}
.footer-nav-item + .footer-nav-item::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 10px;
  display: block;
  width: 1px;
  height: 10px;
  background-color: var(--gray-60);
}
.footer-nav-link {
  display: block;
  color: var(--gray-80);
  font-size: 1.1rem;
  line-height: 1.5rem;
  text-decoration: none;
}
.footer-tel {
  margin: 25px 0;
}
.footer-tel-item {
  padding: 5px 0 0 10px;
}
.footer-tel-link {
  display: block;
  padding: 5px 7px;
  border: 1px solid var(--gray-40);
  border-radius: 4px;
  color: var(--gray-80);
  font-size: 1.1rem;
  line-height: 1.5rem;
  text-decoration: none;
}
.footer-address {
  display: block;
  color: var(--gray-80);
  font-weight: 300;
  font-style: normal;
  font-size: 1.1rem;
  line-height: 1.5rem;
}
.footer-text {
  margin-top: 2px;
}
.footer-text-list {
  margin-left: -5px;
}
.footer-text-item {
  padding: 5px 0 0 11px;
  color: var(--gray-80);
  font-weight: 300;
  font-size: 1.1rem;
  line-height: 1.5rem;
}
.footer-text-item:first-child {
  padding-left: 5px;
}
.footer-text-item + .footer-text-item::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 5px;
  display: block;
  width: 1px;
  height: 1px;
  background-color: var(--gray-60);
}
.footer-copy {
  display: block;
  margin: 10px 0;
  color: var(--gray-80);
  font-weight: 300;
  font-style: normal;
  font-size: 1.1rem;
  line-height: 1.5rem;
}
.footer-logo {
  width: 66px;
  height: 18px;
  margin: 0 auto;
  background: url("../images/common/footer-logo.svg") no-repeat 50% 50%;
}
.footer-marks {
  margin-top: 25px;
  padding-top: 25px;
  border-top: 1px solid var(--gray-30);
}
.footer-marks-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 2%;
  justify-content: flex-start;
  /* margin: -20px 0 0 -20px; */
  margin: 0;
}
.footer-marks-item {
  display: flex;
  align-items: center;
  /* padding: 20px 0 0 20px; */
  padding: 0;
}
.footer-marks-logo {
  display: inline-block;
  vertical-align: top;
  width: 36px;
  height: 24px;
  /* margin-top: 3px; */
  background: no-repeat 50% 50%;
  background-size: 100% 100%;
}
.footer-marks-logo.type-ccm {
	width: 28px;
	height:27px;
	/* margin-top:2px; */
	background-image: url('../images/common/footer-mark-ccm.png');
  background-image: image-set(
    url("../images/common/footer-mark-ccm.webp") type("image/webp"),
    url("../images/common/footer-mark-ccm.png") type("image/png")
  );
}
.footer-marks-logo.type-webwatch {
  background-image: url("../images/common/footer-mark-webwatch.png");
  background-image: image-set(
    url("../images/common/footer-mark-webwatch.webp") type("image/webp"),
    url("../images/common/footer-mark-webwatch.png") type("image/png")
  );
}
/* 20230918 MA 마크 추가 */
.footer-marks-logo.type-ma {
  width: 29px;
  height: 27px;
  background-image: url("../images/common/footer-mark-ma.png");
  background-size: contain;
}
.footer-marks-logo.type-kcpi {
  width: 28px;
  height: 32px;
  background: url("../images/common/ico_footer_mark_mob02.png") no-repeat center center;
  background-size: cover;
  background-image: image-set(
    url("../images/common/ico_footer_mark_mob02.webp") type("image/webp"),
    url("../images/common/ico_footer_mark_mob02.png") type("image/png")
  );
}
.footer-marks-logo.type-ksql {
  width: 28px;
  height: 35px;
  background: url("../images/common/ico_footer_mark_mob03.png") no-repeat center center;
  background-size: cover;
  background-image: image-set(
    url("../images/common/ico_footer_mark_mob03.webp") type("image/webp"),
    url("../images/common/ico_footer_mark_mob03.png") type("image/png")
  );
}
.footer-marks-logo.type-isms {
  width: 28px;
  height: 32px;
  background: url("../images/common/ico_footer_mark11.png") no-repeat center center;
  background-size: contain;
  background-image: image-set(
    url("../images/common/ico_footer_mark11.webp") type("image/webp"),
    url("../images/common/ico_footer_mark11.png") type("image/png")
  );
  flex-shrink: 0;
} /* [2026-01-02 KEJ] 추가 */
.footer-marks-logo.type-sa {
  width: 28px;
  height: 32px;
  background: url("../images/common/ico_footer_mark_sa.webp") no-repeat center center;
  background-size: contain;
  flex-shrink: 0;
} 

.footer-marks-text {
  display: inline-block;
  vertical-align: top;
  margin-left: 5px;
  color: var(--gray-80);
  font-weight: 300;
  font-size: 1rem; /*221207*/
  line-height: 1.5rem;
  letter-spacing: -0.015em; /*221207*/
  text-align: left;
}
.footer-button {
  display: block;
  padding: 6px 8px;
  border-radius: 13px;
  background-color: #f2f2f2;
  color: var(--gray-80);
  font-size: 1.1rem;
  line-height: 1.5rem;
  text-align: center;
}
.footer-logo-area {
  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;
}
.footer-logo-area .footer-logo {
  -ms-flex: none;
  flex: none;
  margin: 0;
  -webkit-box-flex: 0;
}

/* footer type-short */
.footer.type-short {
  text-align: left;
}

/* dock-menu */
.fix-bottom-type-shadow {
  position: fixed;
  right: 0;
  bottom: -11px;
  left: 0;
  z-index: 999;
  height: 10px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
  display: none;
}
.fix-bottom-type-shadow.is-native {
  display: block;
}
.dock-menu {
  border-top: 1px solid var(--gray-30);
  background-color: #fff;
}
.dock-menu-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dock-menu-item {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.dock-menu-link {
  display: block;
  padding: 6px 0;
  color: var(--gray-70);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.8rem;
  text-align: center;
  text-decoration: none;
}
.dock-menu-link::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto 2px;
  background: no-repeat 50% 50% / auto 100%;
}
.dock-menu-item.is-active .dock-menu-link {
  color: var(--primary);
}
.dock-menu-item.type-my .dock-menu-link::before {
  background-image: url("../images/icon/ic-dock-menu-my.svg");
}
.dock-menu-item.type-my .dock-menu-link:active:before,
.dock-menu-item.type-my.is-active .dock-menu-link::before {
  background-image: url("../images/icon/ic-dock-menu-my-s.svg");
}
.dock-menu-item.type-benefit .dock-menu-link::before {
  background-image: url("../images/icon/ic-dock-menu-benefit.svg");
}
.dock-menu-item.type-benefit .dock-menu-link:active:before,
.dock-menu-item.type-benefit.is-active .dock-menu-link::before {
  background-image: url("../images/icon/ic-dock-menu-benefit-s.svg");
}
.dock-menu-item.type-payment .dock-menu-link::before {
  background-image: url("../images/icon/ic-dock-menu-pay.svg");
}
.dock-menu-item.type-payment .dock-menu-link:active:before,
.dock-menu-item.type-payment.is-active .dock-menu-link::before {
  background-image: url("../images/icon/ic-dock-menu-pay-s.svg");
}
.dock-menu-item.type-asset .dock-menu-link::before {
  background-image: url("../images/icon/ic-dock-menu-asset.svg");
}
.dock-menu-item.type-asset .dock-menu-link:active:before,
.dock-menu-item.type-asset.is-active .dock-menu-link::before {
  background-image: url("../images/icon/ic-dock-menu-asset-s.svg");
}
/* [2024-07-03 : shj] 여행 추가 */
.dock-menu-item.type-travel .dock-menu-link::before {
  background-image: url("../images/icon/ic-dock-menu-travel.svg");
}
.dock-menu-item.type-travel .dock-menu-link:active:before,
.dock-menu-item.type-travel.is-active .dock-menu-link::before {
  background-image: url("../images/icon/ic-dock-menu-travel-s.svg");
}
/* // [2024-07-03 : shj] 여행 추가 */
.dock-menu-item.type-all .dock-menu-link::before {
  background-image: url("../images/icon/ic-dock-menu-all.svg");
}
.dock-menu-item.type-all .dock-menu-link:active:before,
.dock-menu-item.type-all.is-active .dock-menu-link::before {
  background-image: url("../images/icon/ic-dock-menu-all-s.svg");
}

/* page-gnb-head */
.page-gnb-head {
  position: fixed;
  top: 50px;
  left: 0;
  z-index: 1000;
  box-sizing: border-box;
  width: 100%;
  background-color: #fff;
}

/* page-contents */
.page-contents {
  -ms-flex: 1;
  flex: 1;
  padding: 30px 24px 35px;
  background-color: #fff;
  font-size: 1.4rem; /* 폰트스타일 수정 */
  -webkit-box-flex: 1;
}
.mycard-contents.page-contents {
  padding: 30px 24px 120px; /* 230710_내카드관리 하단 여백 수정 */
}
.page-contents.has-no-top-padding {
  padding-top: 0;
}
.page-contents.type-flex-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
}
/* 22.12.05 여백 수정 */
/* 23.10.23 이벤트 본문 띄어쓰기 없이 나열되는 Case 때문에 break-all 로 수정 */
.page-contents.new-event {
  margin-top: -20px;
  word-wrap: break-word;
  word-break: keep-all;
}
/* 24-03-28 준법팀 권고로 하단 유의사항 문구 3개만 볼드처리 */
.page-contents.new-event .page-section-group:last-child .wcms-data .wcms-list-item {
  font-weight: 600;
  font-size: 16px;
}
.page-contents.new-event .page-section-group:last-child .wcms-data .wcms-list.wcms-size-small .wcms-list-item {
  font-size: 15px;
}
.page-section-group .wcms-data .wcms-list.wcms-notice-list .wcms-list-item {
  font-weight: 600;
}

/* top button */
.page-button-top-wrap {
  position: fixed;
  bottom: 0;
  left: -999999px;
  z-index: 990;
  width: 100%;
  height: 0;
  opacity: 0;
  -webkit-transition: -webkit-transform 0s;
  transition: transform 0s;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.page-button-top {
  position: absolute;
  right: 24px;
  bottom: 15px;
  display: block;
  width: 36px;
  height: 36px;
  transition: all 0.2s;
  border-radius: 100%;
  background: url("../images/common/ic-top.svg") no-repeat 50% 50% rgba(17, 17, 17, 0.9);
  background-size: 100% 100%;
}
.page-button-top-wrap.is-bottom {
  position: relative;
}
/* [2025-07-24 kho] [WPM-11884] 삭제
.page-button-top-wrap.type-trvb .page-button-top {
  bottom: 150px;
}
.page-button-top-wrap.type-trvb.is-native .page-button-top {
  bottom: 56px;
}
.page-button-top-wrap.type-trvb.is-native.is-bottom .page-button-top {
  bottom: 15px;
} */

/* card-image */
.card-image {
  position: relative;
  display: block;
}
.card-image-inner {
  position: relative;
  display: block;
  padding-top: 63.060748%;
  border-radius: 3.5%/5.6%;
}
.card-image-inner:empty::before,
.card-image-inner.is-error::before {
  content: "";
  background: url("../images/common/card-default.svg") no-repeat 50% 50%;
  background-size: cover;
}
.card-image-inner:empty::before,
.card-image-inner.is-error::before,
.card-image-inner img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3.5%/5.6%;
}
.card-image-inner.is-error img {
  display: none;
}

/* card-image type-hanamoney */
.card-image.type-hanamoney .card-image-inner {
  background: url("../images/icon/card-hanamoney.svg") no-repeat 15px 15px var(--primary);
  color: #fff;
}
.card-image.type-hanamoney .card-image-head {
  padding-left: 46px;
}
.card-image-head {
  position: absolute;
  top: 11px;
  right: 15px;
  left: 15px;
  text-align: right;
}
.card-image-title {
  font-size: 1.5rem;
  line-height: 2.6rem;
}
.card-image-text {
  font-weight: 300;
  font-size: 0.8rem;
  line-height: 1.1rem;
  opacity: 0.6;
}
.card-image-amount {
  position: absolute;
  right: 15px;
  bottom: 12px;
  left: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
}
.card-image-amount-value {
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2.6rem;
}
.card-image-amount-reload {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  background: url("../images/icon/btn-reload-w-s.svg") no-repeat 50% 50%;
}
.card-image-amount-reload::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0);
}

/* card-image type-vertical */
.card-image.type-vertical .card-image-inner {
  -webkit-transform: rotate(90deg) scale(0.63060748);
  transform: rotate(90deg) scale(0.63060748);
}

/* card-image type-irregular */
.card-image.type-irregular .card-image-inner img {
  top: 50%;
  left: 50%;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  border-radius: 7px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* logo-image */
.logo-image {
  position: relative;
  display: block;
  width: 36px;
}
.logo-image-inner {
  position: relative;
  display: block;
  padding-top: 100%;
}
.logo-image-inner::before {
  background: url("../images/common/logo-default.png") no-repeat 50% 50%;
  background-size: contain;
}
.logo-image-inner::before,
.logo-image-inner img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 12px;
}
.logo-image-inner:empty::before,
.logo-image-inner.is-error::before {
  content: "";
}
.logo-image-inner.is-error img {
  display: none;
}
/* 240125_제로페이 적립안내 추가 (이화정) */
.zeropay .logo-image.type-store {
  margin-top: 0;
}
.zeropay .logo-image.type-store .logo-image-inner,
.zeropay .new-logo-image.type-store .logo-image-inner {
  position: relative;
}
.zeropay .logo-image.type-store .logo-image-inner::after,
.zeropay .new-logo-image.type-store .logo-image-inner::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 12px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  background: #2c3590 url("/images/contents/logo_zeropay.png") no-repeat 50% / 60% auto;
  color: #ffffff;
  font-size: 11px;
  line-height: 10px;
  text-align: center;
}
/* //240125_제로페이 적립안내 추가 (이화정) */

/* logo-image size */
.logo-image.type-small {
  width: 30px;
}
.logo-image.type-small-regular {
  width: 32px;
}
.logo-image.type-small-regular .logo-image-inner::before,
.logo-image.type-small-regular .logo-image-inner img {
  border-radius: 8px;
}
.logo-image.type-medium {
  width: 42px;
}
.logo-image.type-medium-regular {
  width: 48px;
}
.logo-image.type-medium-regular .logo-image-inner::before,
.logo-image.type-medium-regular .logo-image-inner img {
  border-radius: 18px;
}
.logo-image.type-medium-large {
  width: 50px;
}
.logo-image.type-medium-large .logo-image-inner::before,
.logo-image.type-medium-large .logo-image-inner img {
  border-radius: 15px;
}

/* logo-image type-circle */
.logo-image.type-circle .logo-image-inner::before,
.logo-image.type-circle .logo-image-inner img {
  border-radius: 100%;
}

/* logo-image type-store */
.logo-image.type-store .logo-image-inner::before {
  background-image: url("../images/common/logo-default-store.png");
}

/* logo-image type-g-lab */
.logo-image.type-g-lab {
  width: 70px;
}
/* 23.01.04 추가 */
.logo-image.type-g-lab.type01 {
  width: 36px;
}
/* //23.01.04 추가 */
.logo-image.type-g-lab .logo-image-inner img {
  border-radius: 0;
}
.logo-image.type-g-lab .logo-image-inner::before {
  background-image: url("../images/common/logo-default-store.png");
}

/* logo-image type-1qpay */
.logo-image.type-1qpay .logo-image-inner::before {
  content: "";
  background-color: var(--gray-10);
  background-image: url("../images/contents/logo-1qpay.svg");
}

/* logo-image type-add */
.logo-image.type-add .logo-image-inner::before {
  content: "";
  background-color: var(--gray-10);
  background-image: url("../images/icon/ic-plus.svg");
}

/* logo-image type-global-brand */
.logo-image.type-global-brand .logo-image-inner::before {
  content: "";
  padding: 6px;
  background-color: var(--gray-10);
  background-origin: content-box;
}
.logo-image.type-global-brand-mastercard .logo-image-inner::before {
  background-image: url("../images/contents/global-card-brand/mastercard.png");
}
.logo-image.type-global-brand-visa .logo-image-inner::before {
  background-image: url("../images/contents/global-card-brand/visa.png");
}
.logo-image.type-global-brand-unionpay .logo-image-inner::before {
  background-image: url("../images/contents/global-card-brand/unionpay.png");
}
.logo-image.type-global-brand-amex .logo-image-inner::before {
  background-image: url("../images/contents/global-card-brand/amex.png");
}
.logo-image.type-global-brand-jcb .logo-image-inner::before {
  background-image: url("../images/contents/global-card-brand/jcb.png");
}
.logo-image.type-global-brand-local .logo-image-inner::before {
  background-image: url("../images/contents/global-card-brand/localcard.png");
}
/* 220615 */
.logo-image.type-subway .logo-image-inner::before {
  background-image: url("../images/icon/ic-default-subway.svg");
}

/* 2208026 logo-image type-zeropay */
.logo-image.type-zeropay {
  width: 66px;
}

/* logo-image type-benefit-icon */
.logo-image.type-benefit-icon {
  width: 27px;
}
.logo-image.type-benefit-icon .logo-image-inner::before,
.logo-image.type-benefit-icon .logo-image-inner img {
  border-radius: 8px;
}
.logo-image.type-benefit-icon .logo-image-inner:empty::before,
.logo-image.type-benefit-icon .logo-image-inner.is-error::before {
  background-image: url("../images/common/benefit-default-1.svg");
  background-size: auto;
}
.logo-image.type-benefit-icon .logo-image-inner::before {
  content: "";
  background-color: #f5f6f8;
  background-image: none;
}

/* logo-image type-detail-benefit */
.logo-image.type-detail-benefit {
  width: 40px;
}
.logo-image.type-detail-benefit .logo-image-inner::before,
.logo-image.type-detail-benefit .logo-image-inner img {
  border-radius: 0;
}
.logo-image.type-detail-benefit .logo-image-inner:empty::before,
.logo-image.type-detail-benefit .logo-image-inner.is-error::before {
  background-image: url("../images/common/benefit-default-2.svg");
  background-size: auto;
}
.logo-image.type-detail-benefit .logo-image-inner::before {
  content: "";
  background-color: transparent;
  background-image: none;
}

/* logo-image type-vip-thumb */
.logo-image.type-vip-thumb {
  width: 58px;
}
.logo-image.type-vip-thumb .logo-image-inner {
  padding-top: 62.5%;
}
.logo-image.type-vip-thumb .logo-image-inner::before {
  background-color: #f8f8f8;
  background-size: contain;
}
.logo-image.type-vip-thumb .logo-image-inner::before,
.logo-image.type-vip-thumb .logo-image-inner img {
  border-radius: 5px;
}
.logo-image.type-vip-thumb .logo-image-inner:empty::before,
.logo-image.type-vip-thumb .logo-image-inner.is-error::before {
  background-image: url("../images/common/logo-default-store.png");
}

/* 23.01.13 추가 */
.logo-image.type-food {
  z-index: 1;
}
/* //23.01.13 추가 */

/* global-card-brand */
.global-card-brand {
  display: block;
  width: 20px;
  height: 20px;
}
.global-card-brand img {
  display: block;
  width: 100%;
  height: 100%;
}
.global-card-brand.type-small {
  width: 30px;
  height: 30px;
}
.global-card-brand.type-regular {
  width: 36px;
  height: 36px;
}
.global-card-brand.type-medium {
  width: 40px;
  height: 40px;
}
.global-card-brand.type-medium-large {
  width: 44px;
  height: 44px;
}
.global-card-brand.type-large {
  width: 62px;
  height: 62px;
}
.global-card-brand.type-inline-block {
  display: inline-block;
  vertical-align: top;
}

.info-list.type-default .global-card-brand.type-inline-block,
.default-text .global-card-brand.type-inline-block {
  margin-top: -1px;
  margin-bottom: -1px;
}

/* slide-banner */
.slide-banner-inner {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}
.slide-banner-list:not(.swiper-wrapper) {
  display: none;
}
.slide-banner-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.slide-banner-link,
.slide-banner-image {
  display: block;
  border-radius: 10px;
}
.slide-banner-image {
  width: 100%;
  height: auto;
}
.slide-banner-controller {
  position: absolute;
  right: 20px;
  bottom: 12px;
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
/* 23.10.12 카드신청 완료 페이지 슬라이드 배너 컨트롤러 위치 수정 */
.slide-banner-controller.apply-slide-banner-controller {
  bottom: 0;
}
.slide-banner .swiper-pagination {
  display: block;
}
.slide-banner .swiper-pagination,
.slide-banner .swiper-button-prev,
.slide-banner .swiper-button-next,
.slide-banner .swiper-button-play,
.slide-banner .swiper-button-pause,
.slide-banner .swiper-button-toggle-play {
  -ms-flex: none;
  flex: none;
  -webkit-box-flex: 0;
}
.slide-banner .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;
}
.slide-banner .swiper-pagination-current {
  color: var(--secondary);
}
.slide-banner .swiper-button-prev,
.slide-banner .swiper-button-next,
.slide-banner .swiper-button-play,
.slide-banner .swiper-button-pause,
.slide-banner .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-banner .swiper-button-prev::before,
.slide-banner .swiper-button-next::before,
.slide-banner .swiper-button-play::before,
.slide-banner .swiper-button-pause::before,
.slide-banner .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-banner .swiper-button-prev::after,
.slide-banner .swiper-button-next::after {
  display: none;
}
.slide-banner .swiper-button-prev-text,
.slide-banner .swiper-button-next-text,
.slide-banner .swiper-button-play-text,
.slide-banner .swiper-button-pause-text,
.slide-banner .swiper-button-toggle-play-text {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  overflow: hidden;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.slide-banner .swiper-button-prev {
  order: 1;
  background-image: url("../images/icon/ic-left.svg");
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
}
.slide-banner .swiper-button-next {
  order: 3;
  background-image: url("../images/icon/ic-right.svg");
  -webkit-box-ordinal-group: 4;
  -ms-flex-order: 3;
}
.slide-banner .swiper-button-play {
  order: 4;
  background-image: url("../images/icon/ic-play.svg");
  -webkit-box-ordinal-group: 5;
  -ms-flex-order: 4;
}
.slide-banner .swiper-button-pause {
  order: 4;
  background-image: url("../images/icon/ic-pause.svg");
  -webkit-box-ordinal-group: 5;
  -ms-flex-order: 4;
}
.slide-banner .swiper-button-toggle-play {
  order: 4;
  -webkit-box-ordinal-group: 5;
  -ms-flex-order: 4;
}
.slide-banner .swiper-button-toggle-play.is-play {
  background-image: url("../images/icon/ic-play.svg");
}
.slide-banner .swiper-button-toggle-play.is-pause {
  background-image: url("../images/icon/ic-pause.svg");
}
.slide-banner.is-once .slide-banner-controller {
  display: none;
}

/* slide-banner type-full */
.slide-banner.type-full {
  margin-right: -24px;
  margin-left: -24px;
}

/* slide-banner type-first */
.slide-banner.type-first {
  margin-top: -30px;
}

/* slide-banner type-white */
.slide-banner.type-white .swiper-pagination {
  color: var(--gray-30);
}
.slide-banner.type-white .swiper-pagination-current {
  color: #fff;
}
.slide-banner.type-white .swiper-button-prev {
  background-image: url("../images/icon/ic-w-left.svg");
}
.slide-banner.type-white .swiper-button-next {
  background-image: url("../images/icon/ic-w-right.svg");
}
.slide-banner.type-white .swiper-button-play {
  background-image: url("../images/icon/ic-play-white.svg");
}
.slide-banner.type-white .swiper-button-pause {
  background-image: url("../images/icon/ic-pause-white.svg");
}
.slide-banner.type-white .swiper-button-toggle-play.is-play {
  background-image: url("../images/icon/ic-play-white.svg");
}
.slide-banner.type-white .swiper-button-toggle-play.is-pause {
  background-image: url("../images/icon/ic-pause-white.svg");
}

/* slide-banner type-notice */
.slide-banner.type-notice .slide-banner-controller {
  top: 25px;
  right: 24px;
  bottom: auto;
  padding: 3px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
}
.slide-banner.type-notice .slide-banner-controller > *:first-child {
  margin-left: 0;
}

/* 22.08.19 */
.slide-banner--travel .slide-banner-container {
  overflow: hidden;
}
.slide-banner--travel .slide-banner-inner {
  max-width: none;
}
.slide-banner--travel.is-once .slide-banner-inner {
  max-width: 640px;
}
.slide-banner--travel.on .swiper-button-pause {
  display: none;
}
.slide-banner--travel .swiper-button-pause {
  display: block;
}
.slide-banner--travel.on .swiper-button-play {
  display: block;
}
.slide-banner--travel .swiper-button-play {
  display: none;
}
.slide-banner--travel.is-once .swiper-button-wrap {
  display: none;
}
.slide-banner--travel .swiper-button-wrap {
  position: absolute;
  right: calc(10% + 40px);
  bottom: 30px;
  z-index: 5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.slide-banner--travel .banner-info {
  position: absolute;
  bottom: 18px;
  left: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  width: calc(100% - 46px);
  height: 110px;
  padding: 17px 24px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.85);
  color: #111;
  transform: translateX(-50%);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
}
.slide-banner--travel .banner-title {
  overflow: hidden;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slide-banner--travel .banner-text {
  display: -webkit-box;
  overflow: hidden;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 2rem;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.slide-banner--travel .slide-banner-image {
  border-radius: 15px;
}

/* banner */
.banner {
  max-width: 640px;
  margin: 35px auto;
}
.banner2 {
  max-width: 640px;
  margin: 20px auto;
}
.banner-link {
  display: block;
}
.banner-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
/* 22.11.28 */
.banner-list .banner {
  margin: 25px auto;
}
.banner-list .banner-image {
  border-radius: 15px;
}

/* link-row */
.link-row {
  font-size: 0;
  line-height: 0;
}
.link-row .ui-arrow {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: top;
}
.link-row .ui-tip {
  display: inline-block;
  vertical-align: top;
}

/* arrow */
.ui-arrow {
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.ui-arrow.type-small {
  font-size: 1.3rem;
  line-height: 18px;
}
.ui-arrow.type-small:after {
  width: 10px;
  height: 10px;
  margin-left: 2px;
}
.ui-arrow.type-tiny {
  font-size: 1.1rem;
  line-height: 18px;
}
.ui-arrow.type-tiny::after {
  width: 10px;
  background-image: url("../images/common/btn-more-s.svg");
  background-position: 100% 40%;
  background-size: auto 8px;
}
.ui-arrow.type-tiny.type-black::after {
  width: 10px;
  background-image: url("../images/common/btn-more-s-b.svg");
}
.ui-arrow.small-text:after {
  width: 8px;
  height: 8px;
  margin-left: 2px;
  background: url("../images/common/ic-button-arrow-s.svg");
}
.ui-arrow.type-medium::after {
  width: 20px;
  background-image: url("../images/icon/btn-more-l.svg");
  background-position: 100% 50%;
  background-size: auto 12px;
}
.ui-arrow-inner {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.ui-arrow-block {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding-right: 35px;
  text-align: left;
}
.ui-arrow::after,
.ui-arrow-block::after {
  content: "";
  -ms-flex: none;
  flex: none;
  -webkit-box-flex: 0;
}
.ui-arrow::after,
.ui-arrow-block::after,
.ui-arrow-button {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  background: url("../images/common/ic-button-arrow.png") no-repeat 100% 50% / auto 10px; /* 22.12.15 이미지 확장자 변경 */
  z-index: 1;
}
.ui-arrow.type-black::after,
.ui-arrow-block.type-black::after,
.ui-arrow-button.type-black {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background: url("../images/common/ic-button-arrow-b-14.svg") no-repeat 100% 50% / auto 10px;
}
.ui-arrow.type-underline {
  position: relative;
  display: inline-block;
  vertical-align: top;
}
.ui-arrow.type-underline::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gray-70);
}
.ui-arrow.type-underline:after {
  vertical-align: inherit;
  background-position-x: center;
}
.ui-arrow.type-black.type-underline::before {
  background: var(--basic);
}
.ui-arrow.type-black {
  color: var(--basic);
}
.ui-arrow.type-black::after,
.ui-arrow-block.type-black::after {
  width: 12px;
  background-image: url("../images/common/ic-button-arrow-b.png"); /* 22.12.15 이미지 확장자 변경 */
}
.ui-arrow.type-black.type-big::after {
  width: 22px;
  height: 22px;
  background-image: url("../images/common/ic-button-arrow-b-14.svg");
  background-size: auto 14px;
}
.ui-arrow.type-black-medium::after {
  width: 14px;
  height: 14px;
  background-image: url("../images/icon/btn-more-l-b.svg");
  background-size: 100% 100%;
}
.ui-arrow.color-secondary:after {
  background-image: url("../images/common/ic-button-arrow-p.svg");
}
.ui-arrow-block::after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.ui-arrow-block.type-narrow {
  padding-right: 18px;
}
.ui-arrow.type-text-default {
  font-size: 1.3rem;
  line-height: 18px;
}
.ui-arrow.type-text-default::after {
  width: 12px;
}
.ui-arrow.type-white::after {
  width: 12px;
  background-image: url("../images/icon/btn-more-w-s.svg");
}
.ui-arrow.type-primary::after,
.ui-arrow-block.color-primary::after, /*2022-08-26*/
.ui-arrow.color-primary::after {
  background-image: url("../images/icon/btn-more-g.svg");
}
.ui-arrow.type-align-top {
  align-items: flex-start;
  margin-top: 3px;
}
.ui-arrow.type-aside {
  justify-content: flex-end;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
}
.ui-arrow[disabled],
.ui-arrow.type-disabled {
  color: var(--gray-50);
}
.ui-arrow[disabled]::after,
.ui-arrow.type-disabled::after {
  background-image: url("../images/icon/btn-more-disabled.svg");
}
.ui-button-down,
.ui-button-more,
.js-ui-accordion__opener,
.ui-button-filter /*220720 ui-button-filter*/ {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  text-align: left;
  /* 
		230905 접근성 수정 
		*/
}

/* [2025-04-08 KJH] [WPM-] 알림함 컨텐츠 없을 때 */
.usage-default.type-line-medium-margin-last-none:not(:has(.usage-default-item)) ~ .ui-button-more {
  margin-top: 40px;
}

.js-ui-accordion__opener[disabled]::after {
  background-image: url("../images/common/ic-select-arrow-disabled.svg");
}
.js-ui-accordion__opener.type-no-arrow:after {
  display: none;
}

/* ui-arrow type-no-arrow */
.ui-arrow.type-no-arrow::after {
  background: none;
}

/* ui-arrow-block type-more */
.ui-arrow-block.type-more {
  -ms-flex: none;
  flex: none;
  width: auto;
  padding-right: 12px;
  -webkit-box-flex: 0;
}

/* 아래 화살표 추가 */
.ui-arrow.type-select::after {
  width: 10px;
  background-image: url("../images/common/ic-select-arrow.svg");
}

/* tip */
.ui-tip {
  position: relative;
  display: block;
  margin-top: 15px;
  padding: 11px 20px 11px 48px;
  border-radius: 20px;
  background-color: var(--primary-light);
  font-size: 1.3rem;
  line-height: 18px;
}
.ui-tip-title {
  position: absolute;
  top: 11px;
  left: 20px;
}
.ui-tip.ui-arrow-block {
  padding-right: 30px;
}
.ui-tip.ui-arrow-block::after {
  right: 20px;
  background-image: url("../images/icon/btn-more-g.svg");
}

/* ui-tip type-small */
.ui-tip.type-small {
  padding: 5px 15px 5px 38px;
  font-size: 1.2rem;
  line-height: 17px;
}
.ui-tip.type-small .ui-tip-title {
  position: absolute;
  top: 5px;
  left: 15px;
}

/* ui-tip type-small-side */
.ui-tip.type-small-side {
  padding: 5px 10px 5px 33px;
  font-size: 1.2rem;
  line-height: 17px;
}
.ui-tip.type-small-side .ui-tip-title {
  position: absolute;
  top: 5px;
  left: 10px;
}

/* ui-tip type-slim */
.ui-tip.type-slim {
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 14px;
}
.ui-tip.type-slim .ui-tip-title {
  top: 5px;
}

/* ui-tip type-no-title */
.ui-tip.type-no-title {
  padding-left: 20px;
}
.ui-tip.type-no-title.type-small {
  padding-left: 15px;
}
.ui-tip.type-no-title.type-small-side {
  padding-left: 10px;
}

/* 2022-09-15 voice-support */
.voice-support {
  margin: 35px 0 25px;
}
.voice-support .ui-tip {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-radius: 10px;
}
.voice-support .ui-tip .voice-support-phrase-01 {
  flex: 1;
}
.voice-support .ui-tip .voice-support-phrase-02 {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 24px;
}
.voice-support .ui-tip .voice-support-phrase-02::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: url(../images/icon/ic-voice-support.png) no-repeat center / 100% auto;
}

/* form-bottom */
.form-bottom {
  margin-top: 35px;
}
.type-none + .form-bottom {
  margin-top: 0;
}

/* form-bottom type-bottom-margin */
.form-bottom.type-bottom-margin {
  margin-bottom: 35px;
}

/* menu-link */
.menu-link-area {
  margin-top: 35px;
}
.menu-link-list .type-none {
  margin-top: -45px;
}
.menu-link-item {
  border: 1px solid var(--gray-30);
  border-radius: 6px;
}
/* 2022-08-26 */
.menu-link-item.type-senary {
  border-color: var(--primary);
}
.menu-link-item:not(:first-child) {
  margin-top: 10px;
}
.menu-link-item .form-flex-cell {
  font-size: inherit;
  line-height: inherit;
}
.menu-link-item a img.insurance-logo-img-s {
  height: 25px;
}
.menu-link-item a span {
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 1.8rem;
}
#cardInfDiv .menu-link-item a span {
  margin-bottom: 0px;
  font-weight: 400;
  font-size: 1.3rem;
}
#cardinfo .menu-link-item a span {
  margin-bottom: 0px;
  font-weight: 400;
  font-size: 1.3rem;
}
.menu-link-title {
  display: block;
  margin: 0 15px;
  padding: 14px 0 12px;
  border-bottom: 1px solid #e9ecef;
  color: var(--gray-70);
  line-height: 18px;
}
.menu-link-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  padding-top: 13px;
  padding-bottom: 13px;
  padding-left: 15px;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 22px;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.menu-link-button::after {
  right: 15px;
}
.menu-link-button.type-tel::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 4px;
  background: url("../images/icon/ic-tel-b.svg") no-repeat 50% 50%;
}
.menu-link-button.type-flex-column {
  -ms-flex-direction: column;
  flex-direction: column;
  align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-align: start;
  -ms-flex-align: start;
}
.menu-link-button.type-has-icon-36 {
  position: relative;
  -ms-flex-direction: column;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 15px 14px 66px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-align: start;
  -ms-flex-align: start;
}
.menu-link-button.type-has-icon-36:before {
  content: "";
  position: absolute;
  top: 17px;
  left: 15px;
  width: 36px;
  height: 36px;
}
.menu-link-button.type-icon-hana-money:before {
  background: url("../images/icon/ic-hana-money.svg") center center no-repeat;
}
.menu-link-button.type-icon-my-account:before {
  background: url("../images/icon/ic-my-account.svg") center center no-repeat;
}
/* 22.11.18 */
.menu-link-button.type-icon-card-statement:before {
  top: 50%;
  width: 36px;
  height: 36px;
  background: url("../images/icon/ic-card-statement.gif") center center no-repeat;
  background-size: 100% auto;
  transform: translateY(-50%);
}
.menu-link-button.type-no-left-padding {
  padding-left: 0;
}
.menu-link-item.type-group .menu-link-list {
  padding: 7px 0;
}
.menu-link-item.type-group .menu-link-item {
  margin-top: 0;
  border: none;
}
.menu-link-item.type-group .menu-link-button {
  padding-top: 7px;
  padding-bottom: 7px;
}
.menu-link-button .ui-notice {
  margin-top: 0;
  font-size: inherit;
}
.menu-link-button .menu-link-text {
  padding-left: 15px;
}
.menu-link-button .menu-link-text-right {
  margin-left: auto;
}
.menu-link-button .menu-link-text-sub {
  margin-top: 2px;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 18px;
}
.menu-link-button .logo-image {
  margin-top: -4px;
  margin-bottom: -4px;
}
.menu-link-button .menu-image {
  height: 22px;
}
.menu-link-button .menu-image img {
  margin-top: -4px;
  margin-bottom: -5px;
}

/* menu-link-button.js-ui-accordion__opener */
.menu-link-button.js-ui-accordion__opener {
  padding-right: 35px;
}
.menu-link-button.js-ui-accordion__opener::after {
  right: 15px;
}
.menu-link-button.font-weight-bold {
  font-weight: 700;
}

/* menu-link-list.type-line */
.menu-link-list.type-line .menu-link-item {
  border: none;
}
.menu-link-list.type-line .menu-link-item:not(:first-child) {
  margin-top: 0;
  border-top: 1px solid var(--gray-30);
  border-radius: 0;
}
.menu-link-list.type-line .menu-link-item.type-border-none {
  border-top: none;
}
.menu-link-list.type-line .menu-link-button {
  padding-top: 35px;
  padding-bottom: 35px;
}

/* 2023.10.16 해외이용가이드 메뉴 리스트 수정  */
.menu-link-list .menu-link-item.round-medium {
  border-radius: 15px;
}
.menu-link-list.type-icon {
}
.menu-link-list.type-icon .menu-link-item .menu-link-button {
  padding-top: 16px;
  padding-bottom: 16px;
}
.menu-link-list.type-icon .menu-link-item .menu-link-button i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin-right: 15px;
}
.menu-link-list.type-icon .menu-link-item .menu-link-button i.icon-small {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}
.menu-link-list.type-icon .menu-link-item .menu-link-button i img {
  object-fit: contain;
  object-position: center;
  width: 100%;
  height: 100%;
}
.menu-link-list.type-icon .menu-link-item .menu-link-button span {
  font-size: 15px;
  line-height: 20px;
}
.menu-link-list.type-icon .menu-link-item .menu-link-button span em {
  display: block;
  margin-bottom: 4px;
  color: var(--primary);
  font-style: normal;
  font-size: 13px;
  line-height: 17px;
}
.menu-link-list.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  row-gap: 12px;
  align-items: stretch;
  column-gap: 12px;
}
.menu-link-list.grid .menu-link-item {
  margin-top: 0;
}
.menu-link-list.grid .menu-link-item:not(.col-span) .menu-link-button {
  display: block;
  padding: 20px;
  text-align: center;
}
.menu-link-list.grid .menu-link-item:not(.col-span) .menu-link-button i {
  /* display:block; */
  margin: 0 auto 8px;
}
.menu-link-list.grid .menu-link-item.col-span {
  grid-column: span 2;
}
.menu-link-list.grid .menu-link-item.col-span .menu-link-button {
  display: flex;
}
.menu-link-list.grid .menu-link-item.col-span .menu-link-button.type-tel::before {
  display: none;
}

/* menu-horizontal-list */
.menu-horizontal-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-x: auto;
  margin: -30px -24px 0 -24px;
  padding: 35px 24px;
  background-color: #f4f6f8;
}
.menu-horizontal-item {
  -ms-flex: 1;
  flex: 1;
  -webkit-box-flex: 1;
}
.menu-horizontal-item + .menu-horizontal-item {
  margin-left: 12px;
}
.menu-horizontal-link {
  display: block;
  box-sizing: border-box;
  min-width: 150px;
  height: 100%;
  padding: 20px 15px;
  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;
}
.menu-horizontal-title {
  display: block;
  margin-top: 20px;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 20px;
  letter-spacing: -0.09rem; /* 22.09.02 라이프 수정 */
}
.menu-horizontal-text {
  display: block;
  margin-top: 5px;
  color: var(--gray-70);
  font-size: 1.4rem;
  line-height: 19px;
}
.menu-horizontal-icon {
  display: block;
  width: 36px;
  height: 36px;
  background: no-repeat 50% 50% / auto 100%;
}
/* 2022.08.09 type-direct */
/* 22.09.02 라이프 수정 */
.horizontal-list li.ui-tab-item {
  width: 40%;
  list-style-type: none;
  text-align: center;
}
/* //22.09.02 라이프 수정 */
.menu-horizontal-list.type-direct {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-x: auto;
  margin: -30px -24px 0 -24px;
  padding: 15px 24px 25px;
  background-color: #f4f6f8;
}
.type-direct .menu-horizontal-item + .menu-horizontal-item {
  margin-left: 6px;
}
.type-direct .menu-horizontal-link {
  display: block;
  box-sizing: border-box;
  min-width: auto;
  height: 100%;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  font-size: 1.3rem;
  line-height: 1.8rem;
  text-align: center;
}
.type-direct .menu-horizontal-link.js-tabpanel-active .menu-horizontal-icon {
  border: 2px solid #008882;
}
.type-direct .menu-horizontal-link.js-tabpanel-active .menu-horizontal-title {
  color: #008882;
  font-weight: 500;
}
.type-direct .menu-horizontal-title {
  display: block;
  margin-top: 10px;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.7rem;
  letter-spacing: -0.09rem; /* 22.09.02 라이프 수정 */
}
.type-direct .menu-horizontal-icon {
  display: block;
  box-sizing: border-box;
  width: 47px;
  height: 47px;
  margin: 0 auto;
  border-radius: 12px;
  background: #fff no-repeat 50% 50% / auto 26px;
  box-shadow: 0 3px 5px 0 rgba(217, 223, 235, 0.3);
}
.menu-horizontal-icon.align-right {
  margin: 0 0 0 auto;
}
/* 22.08.11 */
.menu-horizontal-link.align-center .menu-horizontal-icon {
  margin-right: auto;
  margin-left: auto;
}
.menu-horizontal-link .small-text.type-line-1 {
  padding-top: 10px;
}

.menu-horizontal-icon.type-01 {
  background-image: url("../images/icon/ic-watermachine.svg");
}
.menu-horizontal-icon.type-02 {
  background-image: url("../images/icon/ic-book.svg");
}
.menu-horizontal-icon.type-03 {
  background-image: url("../images/icon/ic-phone-02.svg");
}
.menu-horizontal-icon.type-04 {
  background-image: url("../images/icon/ic-apartmentfee.svg");
}
.menu-horizontal-icon.type-05 {
  background-image: url("../images/icon/ic-gas.svg");
}
.menu-horizontal-icon.type-06 {
  background-image: url("../images/icon/ic-electronic.svg");
}
.menu-horizontal-icon.type-07 {
  background-image: url("../images/icon/ic-social-insurance.svg");
}
.menu-horizontal-icon.type-08 {
  background-image: url("../images/icon/ic-phone-fee.svg");
}
.menu-horizontal-icon.type-09 {
  background-image: url("../images/icon/ic-school.svg");
}
.menu-horizontal-icon.type-10 {
  background-image: url("../images/icon/ic-rent.svg");
}
.menu-horizontal-icon.type-11 {
  background-image: url("../images/icon/ic-car-insurance.svg");
}
.menu-horizontal-icon.type-12 {
  background-image: url("../images/icon/ic-health-insurance.svg");
}
.menu-horizontal-icon.type-13 {
  background-image: url("../images/icon/ic-trip.svg");
}
.menu-horizontal-icon.type-14 {
  background-image: url("../images/icon/ic-pet.svg");
}
.menu-horizontal-icon.type-15 {
  background-image: url("../images/icon/ic-market.svg");
}
.menu-horizontal-icon.type-16 {
  background-image: url("../images/icon/ic-creditgrade.svg");
}
.menu-horizontal-icon.type-17 {
  background-image: url("../images/icon/ic-my-loan-1.svg");
}
.menu-horizontal-icon.type-18 {
  background-image: url("../images/icon/ic-my-loan-5.svg");
}
.menu-horizontal-icon.type-19 {
  background-image: url("../images/icon/ic-my-loan-3.svg");
}
.menu-horizontal-icon.type-20 {
  background-image: url("../images/icon/ic-my-shop-2.svg");
}
.menu-horizontal-icon.type-21 {
  background-image: url("../images/icon/ic-my-shop-3.svg");
}
.menu-horizontal-icon.type-22 {
  background-image: url("../images/icon/ic-my-shop-add.svg");
}
.menu-horizontal-icon.type-23 {
  background-image: url("../images/icon/ic-my-view-1.svg");
}
.menu-horizontal-icon.type-24 {
  background-image: url("../images/icon/ic-my-view-2.svg");
}
.menu-horizontal-icon.type-25 {
  background-image: url("../images/icon/ic-my-view-3.svg");
}
.menu-horizontal-icon.type-26 {
  background-image: url("../images/icon/ic-short-01.svg");
}
.menu-horizontal-icon.type-27 {
  background-image: url("../images/icon/ic-my-loan-4.svg");
}
/* 22.05.17 */
.menu-horizontal-icon.type-28 {
  background-image: url("../images/icon/ic-my-view-4.svg");
}
/* 22.06.10 */
.menu-horizontal-icon.type-29 {
  background-image: url("../images/icon/ic-travel-service.svg");
}
/* 22.08.09 */
.menu-horizontal-icon.type-30 {
  background-image: url("../images/icon/ic-my-loan_2.svg");
}
.menu-horizontal-icon.type-31 {
  background-image: url("../images/icon/ic-home-appliances.svg");
}
.menu-horizontal-icon.type-32 {
  width: 48px;
  height: 48px;
  background-image: url("../images/illustration/img-insurance-1.png");
}
.menu-horizontal-icon.type-33 {
  width: 48px;
  height: 48px;
  background-image: url("../images/illustration/img-insurance-2.png");
}
.menu-horizontal-icon.type-34 {
  background-image: url("../images/icon/ic-car-s.svg");
}
.menu-horizontal-icon.type-35 {
  background-image: url("../images/icon/ic-airplane-s.svg");
}
.menu-horizontal-icon.type-36 {
  background-image: url("../images/icon/ic-social-insurance-s-1.svg");
}
.menu-horizontal-icon.type-37 {
  background-image: url("../images/icon/ic-pet-s.svg");
}
.menu-horizontal-icon.type-38 {
  background-image: url("../images/icon/ic-market-s.svg");
}
.menu-horizontal-icon.type-39 {
  background-image: url("../images/icon/ic-car.svg");
}
.menu-horizontal-icon.type-40 {
  background-image: url("../images/icon/ic-realestatecare-04.png");
  /* background-image: url('../images/icon/ic-realestatecare-02.svg'); */
}
.menu-horizontal-icon.type-41 {
  background-image: url("../images/icon/ic-rental.svg");
}
.menu-horizontal-icon.type-42 {
  background-image: url("../images/icon/ic-fire.svg");
}
.menu-horizontal-icon.type-43 {
  background-image: url("../images/icon/notice-banner-02.png");
  background-size: 34px 34px;
}
.menu-horizontal-icon.type-44 {
  background-image: url("../images/icon/ic-bulb-02.svg");
}
/* .menu-horizontal-icon.type-44 {
	background-image: url('../images/icon/img-my-menu-01.png');
	background-size: 67px auto;
	background-position: center bottom;
}
.menu-horizontal-icon.type-45 {
	background-image: url('../images/icon/img-my-menu-02.png');
	background-size: 106px auto;
	background-position: center bottom -5px;
}
.menu-horizontal-icon.type-46 {
	background-image: url('../images/icon/img-my-menu-03.png');
	background-size: 72px auto;
	background-position: center bottom -2px;
} */
.menu-horizontal-icon.type-47 {
  background-image: url("../images/icon/ic-onethecar.svg");
}
.menu-horizontal-icon.type-48 {
  background-image: url("../images/icon/ic-travel-4.png");
  background-size: 36px 36px;
}
/* 23.03.20 추가 */
.menu-horizontal-icon.type-49 {
  background-image: url("../images/icon/ic-kinder.svg");
}
/* //23.03.20 추가 */

.menu-horizontal-icon.type-50 {
  background-image: url("../images/icon/ic_alls.webp");
}
.menu-horizontal-icon.type-50 + strong {
  color:#00a49d;
}
/* menu-horizontal-list - type-no-bg */
.menu-horizontal-list.type-no-bg {
  margin-top: 0;
  padding: 0 21px;
  background: transparent;

  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.menu-horizontal-list.type-no-bg::-webkit-scrollbar {
  display: none;
  width: 0; /* Remove scrollbar space */
  height: 0;
  background: transparent; /* Optional: just make scrollbar invisible */
  -webkit-appearance: none;
}

.type-no-bg .menu-horizontal-link {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 98px;
  padding: 20px 13px;
  border: 1px solid var(--gray-30);
  box-shadow: none;
  text-align: center;
}
.type-no-bg .menu-horizontal-link.is-active,
.type-no-bg .menu-horizontal-link.js-tabpanel-active {
  padding: 19px 12px;
  border: 2px solid var(--secondary);
}
.type-no-bg .menu-horizontal-icon {
  margin-right: auto;
  margin-left: auto;
}
.type-no-bg .menu-horizontal-title {
  position: relative;
  height: 42px;
  margin-top: 6px;
  font-weight: 400;
  letter-spacing: -0.06rem;
}
.type-no-bg .menu-horizontal-title:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.type-no-bg .menu-horizontal-title .title {
  display: inline-block;
  vertical-align: middle;
}

/* menu-horizontal-area type-mypage */
.menu-horizontal-area.type-mypage .menu-horizontal-list {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  background: none;
}
.menu-horizontal-area.type-mypage .menu-horizontal-link {
  min-width: 120px;
  padding: 14px;
  border: 1px solid var(--gray-30);
  box-shadow: none;
}

/* menu-horizontal-area type-mypage 22.08.11 */

/* 22.08.19 */
.menu-horizontal-area.type-mypage-2 {
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
  margin-top: -20px;
  margin-right: -24px;
  margin-left: -24px;
}
.menu-horizontal-area.type-mypage-2 .menu-horizontal-list {
  display: inline-flex;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 24px;
  background: none;
}
.menu-horizontal-area.type-mypage-2 .menu-horizontal-link {
  min-width: 146px;
  padding: 22px 15px 20px;
  color: #4a4a4a;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
}
.menu-horizontal-area.type-mypage-2 .menu-horizontal-link .xsmall-text {
  color: #3e3e3e;
}
.menu-horizontal-area.type-mypage-2 .menu-horizontal-icon {
  margin: 0 auto;
}
.menu-horizontal-area.type-mypage-2 .menu-horizontal-link.type-bg {
  color: #fff !important;
}
.menu-horizontal-area.type-mypage-2 .menu-horizontal-link.type-bg .xsmall-text {
  color: #fff;
}
.menu-horizontal-area.type-mypage-2 .type-bg.bg-01 {
  background: #3a63ff;
}
.menu-horizontal-area.type-mypage-2 .type-bg.bg-02 {
  background: #ef3a59;
}
.menu-horizontal-area.type-mypage-2 .type-bg.bg-03 {
  background: #00aaa2;
}
.menu-horizontal-area.type-mypage-2 .type-bg.bg-04 {
  background: #3e63ff;
}
.menu-horizontal-area.type-mypage-2 .type-bg .menu-horizontal-icon {
  box-sizing: border-box;
  height: 70px;
  margin-top: -22px;
}
.menu-horizontal-area.type-mypage-2 .type-bg.bg-01 .menu-horizontal-icon {
  width: 67px;
  background: url("../images/_dummy/img-my-menu-01.gif") no-repeat center top 5px / 68px auto;
}
.menu-horizontal-area.type-mypage-2 .type-bg.bg-02 .menu-horizontal-icon {
  width: 87px;
  background: url("../images/_dummy/img-my-menu-02.gif") no-repeat center top 5px / 88px auto;
}
.menu-horizontal-area.type-mypage-2 .type-bg.bg-03 .menu-horizontal-icon {
  width: 86px;
  background: url("../images/_dummy/img-my-menu-03.gif") no-repeat center top 6px / 87px auto;
}
.menu-horizontal-area.type-mypage-2 .type-bg.bg-04 .menu-horizontal-icon {
  width: 62px;
  background: url("../images/_dummy/img-my-menu-04.gif") no-repeat center top 8px / 62px auto;
}

/* menu-horizontal-area type-mypage-tile */
.menu-horizontal-area.type-mypage-tile .menu-horizontal-list {
  overflow: visible;
  -webkit-overflow-scrolling: auto;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  background: none;
}
.menu-horizontal-area.type-mypage-tile .menu-horizontal-link {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--gray-30);
  box-shadow: none;
}
.menu-horizontal-area.type-mypage-tile + .menu-horizontal-area.type-mypage-tile {
  margin-top: 12px;
}
.menu-horizontal-area.type-mypage-tile .menu-horizontal-item.type-mypage-tile-full .menu-horizontal-link {
  padding-top: 25px;
  padding-bottom: 25px;
}

/* 22.11.28 menu-horizontal-list - type-benefit-nav */
.menu-horizontal-list.type-benefit-nav {
  overflow: inherit;
  margin-top: 0;
  padding: 0 24px;
  background: transparent;
}
.type-benefit-nav .menu-horizontal-link {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 80px;
  padding: 13px;
  border-radius: 8px;
  box-shadow: 0 3px 5px 0 rgba(217, 223, 235, 0.3);
  text-align: center;
}
.type-benefit-nav .menu-horizontal-icon {
  margin-right: auto;
  margin-left: auto;
}
.type-benefit-nav .menu-horizontal-title {
  position: relative;
  height: auto;
  margin-top: 3px;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.9rem;
  letter-spacing: -0.06rem;
}
.type-benefit-nav .menu-horizontal-icon {
  display: block;
  width: 44px;
  height: 44px;
  background: no-repeat 50% 50% / auto 100%;
}
.type-benefit-nav .menu-horizontal-icon.type-1 {
  background-image: url("../images/icon/ic-all-benefit-loyal.png");
}
.type-benefit-nav .menu-horizontal-icon.type-2 {
  background-image: url("../images/icon/ic-all-benefit-global.png");
}
.type-benefit-nav .menu-horizontal-icon.type-3 {
  width: 42px;
  height: 42px;
  background-image: url("../images/icon/ic-all-benefit-lucky.png");
}
.benefit-tooltip.rating-info {
  position: absolute;
  bottom: -10px;
  left: 50%;
  z-index: 1;
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background: none;
  box-shadow: none;
  transform: translateX(-50%);
}
.benefit-tooltip .rating-info-text::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  display: block;
  margin-top: -5px;
  margin-left: -4px;
  border: 0 solid transparent;
  border-width: 5px 4px;
  border-bottom-color: #2f2f2f;
}
.benefit-tooltip .rating-info-text {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  padding: 4px 12px 3px;
  border-radius: 8px;
  background: #2f2f2f;
  color: #fff;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 17px;
  text-align: right;
  white-space: nowrap;
  transform: translateX(-50%);
}
.page-contents.type-benefit-home .benefit-tooltip.rating-info .skeleton-block {
  display: inline-block;
  vertical-align: top;
  width: 28px;
  height: 1.6rem;
  background: #545658;
}

/* 23.02.23 */
.menu-horizontal-list.type-vip-nav {
  overflow: inherit;
  margin-top: 0;
  padding: 0 24px;
  background: transparent;
}
.type-vip-nav .menu-horizontal-item + .menu-horizontal-item {
  position: relative;
  margin-left: 0;
}
.type-vip-nav .menu-horizontal-item + .menu-horizontal-item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 1px;
  height: 100%;
  background: #e5e5e5;
}
.type-vip-nav .menu-horizontal-link {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 80px;
  padding: 0;
  border-radius: 8px;
  box-shadow: none;
  text-align: center;
}
.type-vip-nav .menu-horizontal-icon {
  margin-right: auto;
  margin-left: auto;
}
.type-vip-nav .menu-horizontal-title {
  position: relative;
  height: auto;
  margin-top: 5px;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.6rem;
  letter-spacing: -0.06rem;
}
.type-vip-nav .menu-horizontal-icon {
  display: block;
  width: 40px;
  height: 40px;
  background: no-repeat 50% 50% / auto 100%;
}
.type-vip-nav .menu-horizontal-icon.type-1 {
  background-image: url("../images/icon/ic-royal-01.png");
}
.type-vip-nav .menu-horizontal-icon.type-2 {
  background-image: url("../images/icon/ic-royal-02.png");
}
.type-vip-nav .menu-horizontal-icon.type-3 {
  background-image: url("../images/icon/ic-royal-03.png");
}

/* account-empty */
.account-empty {
  overflow: hidden;
  margin: 0 -24px;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
}
.account-empty-object {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  -webkit-animation: account-empty-animation 10s infinite linear;
  animation: account-empty-animation 10s infinite linear;
}
.account-empty-object::before,
.account-empty-object::after {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 111.111111%;
  margin-left: 6.944444%;
  padding-top: 16.666666%;
  background: url("../images/illustration/account-empty.svg") no-repeat 0 0;
  background-size: 100% 100%;
}
@-webkit-keyframes account-empty-animation {
  0% {
    -webkit-transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-118.055556%);
  }
}
@keyframes account-empty-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-118.055556%);
  }
}
/* 22.12.16 */
.benefit-like .account-empty-object::before,
.benefit-like .account-empty-object::after {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 115.255556%;
  margin-left: 2.8%;
  padding-top: 20%;
  background: url("../images/illustration/img-all-benefit.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.slide-account-empty {
  position: relative;
  margin: 0 -24px;
  padding-bottom: 27px;
}
.slide-account-empty-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.slide-account-empty-item {
  overflow: hidden;
  width: 23.611111%;
}
.slide-account-inner {
  padding: 0 14.705882%;
}
.slide-account-empty-item img {
  width: 100%;
}
.slide-account-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-account-empty .swiper-button-prev,
.slide-account-empty .swiper-button-next,
.slide-account-empty .swiper-button-play,
.slide-account-empty .swiper-button-pause,
.slide-account-empty .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-account-empty .swiper-button-prev::before,
.slide-account-empty .swiper-button-next::before,
.slide-account-empty .swiper-button-play::before,
.slide-account-empty .swiper-button-pause::before,
.slide-account-empty .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-account-empty .swiper-button-prev::after,
.slide-account-empty .swiper-button-next::after {
  display: none;
}
.slide-account-empty .swiper-button-prev-text,
.slide-account-empty .swiper-button-next-text,
.slide-account-empty .swiper-button-play-text,
.slide-account-empty .swiper-button-pause-text,
.slide-account-empty .swiper-button-toggle-play-text {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  overflow: hidden;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.slide-account-empty .swiper-button-prev {
  order: 1;
  background-image: url("../images/icon/ic-left.svg");
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
}
.slide-account-empty .swiper-button-next {
  order: 3;
  background-image: url("../images/icon/ic-right.svg");
  -webkit-box-ordinal-group: 4;
  -ms-flex-order: 3;
}
.slide-account-empty .swiper-button-play {
  order: 2;
  background-image: url("../images/icon/ic-play.svg");
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
}
.slide-account-empty .swiper-button-pause {
  order: 2;
  background-image: url("../images/icon/ic-pause.svg");
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
}
.slide-account-empty .swiper-button-toggle-play {
  order: 2;
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
}
.slide-account-empty .swiper-button-toggle-play.is-play {
  background-image: url("../images/icon/ic-play.svg");
}
.slide-account-empty .swiper-button-toggle-play.is-pause {
  background-image: url("../images/icon/ic-pause.svg");
}

/* usage-default */
.usage-default::before {
  content: "";
  display: table;
}
.usage-default-list-title {
  margin-top: 25px;
  font-size: 1.5rem;
  line-height: 2.1rem;
}
.usage-default-list-title + .usage-default-list {
  margin-top: 0;
}
.usage-default-list {
  margin: -25px 0 0;
  padding: 0;
  list-style: none;
}
/* 23.01.04 추가 */
.usage-default-list.type-line li + li {
  margin-top: 25px;
  border-top: 1px solid var(--gray-30);
}
/* //23.01.04 추가 */
.usage-default-list .type-none {
  border-bottom: 1px solid var(--gray-30);
}
.usage-default-list .link-item.type-none.type-no-line {
  border: none;
}
.usage-default-item {
  padding-top: 25px;
}
.usage-default-item.type-cancel .usage-default-block {
  /*color: #ccc;*/
  color: var(--gray-80); /* 230904 접근성 수정 */
}
.usage-default-item.type-cancel .usage-default-etc-item {
  color: inherit;
}
.usage-default-item .logo-image {
  margin: 4px 10px 0 0;
}
.usage-default-item .logo-image.type-medium-margin {
  margin-right: 20px;
}
.usage-default-icon {
  width: 36px;
  height: 36px;
  margin-right: 20px;
  background: no-repeat 50% 50%;
}
.usage-default-icon.type-1 {
  background-image: url("../images/icon/usage-icon-1.svg");
}
.usage-default-icon.type-2 {
  background-image: url("../images/icon/usage-icon-2.svg");
}
.usage-default-icon.type-3 {
  background-image: url("../images/icon/usage-icon-3.svg");
}
.usage-default-icon.type-4 {
  background-image: url("../images/icon/usage-icon-4.svg");
}
.usage-default-icon.type-5 {
  background-image: url("../images/icon/usage-icon-5.svg");
}
.usage-default-icon.type-6 {
  background-image: url("../images/icon/usage-icon-6.svg");
}
.usage-default-icon.type-7 {
  background-image: url("../images/icon/usage-icon-7.svg");
}
.usage-default-icon.type-8 {
  background-image: url("../images/icon/usage-icon-8.svg");
}
.usage-default-icon.type-9 {
  background-image: url("../images/icon/usage-icon-9.svg");
}
.usage-default-icon.type-10 {
  background-image: url("../images/icon/usage-icon-10.svg");
}
.usage-default-icon.type-11 {
  background-image: url("../images/icon/usage-icon-11.svg");
}
.usage-default-icon.type-12 {
  background-image: url("../images/icon/usage-icon-12.svg");
}
.usage-default-icon.type-13 {
  background-image: url("../images/icon/usage-icon-13.svg");
}
.usage-default-icon.type-14 {
  background-image: url("../images/icon/usage-icon-14.svg");
}
.usage-default-icon.type-15 {
  background-image: url("../images/icon/usage-icon-15.svg");
}
.usage-default-icon.type-16 {
  background-image: url("../images/icon/usage-icon-16.svg");
}
.usage-default-icon.type-17 {
  background-image: url("../images/icon/usage-icon-17.svg");
}
.usage-default-icon.type-18 {
  background-image: url("../images/icon/usage-icon-18.svg");
}
.usage-default-icon.type-19 {
  background-image: url("../images/icon/usage-icon-19.svg");
}
.usage-default-icon.type-20 {
  background-image: url("../images/icon/usage-icon-20.svg");
}
.usage-default-icon.type-21 {
  background-image: url("../images/icon/usage-icon-21.svg");
}
.usage-default-icon.type-22 {
  background-image: url("../images/icon/usage-icon-22.svg");
}
/* 22.08.31 */
.usage-default-icon.type-23 {
  background-image: url("../images/icon/usage-icon-23.svg");
}
/* 23.07.02 */
.usage-default-icon.type-24 {
  background-image: url("../images/icon/usage-icon-24.svg");
}
/* 24.04.12 피싱케어 추가 (lyr) */
.usage-default-icon.type-25 {
  background-image: url("../images/icon/usage-icon-25.svg");
}
/* [24.08.16 : lyr] type-26~27 크로스마일 추가 : B_point_p037.html */
.usage-default-icon.type-26 {
  background-image: url("../images/icon/usage-icon-26.svg");
}
.usage-default-icon.type-27 {
  background-image: url("../images/icon/usage-icon-27.svg");
}

/* 24.09.03 스마트할인팩 아이콘 추가 - sayho */
.usage-default-icon.type-28 {
  background-image: url("../images/icon/usage-icon-28.svg");
}

/* [2024-11-08: KJH] '스마트할인팩' 아이콘 추가 */
/* [2025-01-17 확장자 변경 : HDH] */
.usage-default-icon.type-29 {
  background-image: url("../images/icon/life_ic_list01.svg");
}
.usage-default-icon.type-30 {
  background-image: url("../images/icon/life_ic_list02.svg");
}
.usage-default-icon.type-31 {
  background-image: url("../images/icon/life_ic_list03.svg");
}
.usage-default-icon.type-32 {
  background-image: url("../images/icon/life_ic_list04.svg");
}
.usage-default-icon.type-33 {
  background-image: url("../images/icon/life_ic_list05.svg");
}
.usage-default-icon.type-34 {
  background-image: url("../images/icon/life_ic_list06.svg");
}
.usage-default-icon.type-35 {
  background-image: url("../images/icon/life_ic_list07.svg");
}
/* //[2025-01-17 확장자 변경 : HDH] */
/* // [2024-11-08: KJH] 추가 */

/* [2025-02-12 : shj] 오토케어 프리미엄 */
.usage-default-icon.type-36 {
  background-image: url("../images/icon/usage-icon-36.svg");
}
/* // [2025-02-12 : shj] 오토케어 프리미엄 */

/* [2025-06-04 kho] [WPM-11313] 사장님케어 추가*/
.usage-default-icon.type-37 {
  background-image: url("../images/icon/usage-icon-37.svg");
}
/* //[2025-06-04 kho] [WPM-11313] 사장님케어 추가*/

.usage-default-icon.type-regular-margin {
  margin-right: 10px;
}
.usage-default-date {
  margin-bottom: 15px;
  color: var(--gray-70);
  font-weight: 400; /* 폰트스타일 수정 */
  font-size: 1.3rem;
  line-height: 17px;
}
.usage-default-item:not(:first-child) .usage-default-date,
.usage-default-item:not(:first-child) .usage-default-line-title {
  margin-top: 10px;
}
.usage-default-line-title {
  margin-bottom: 25px;
  padding-bottom: 13px;
  border-bottom: 1px solid #e9ecef;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 17px;
}
.usage-default-line-title .sub {
  margin-top: 2px;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 18px;
}
.usage-default-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  text-align: left;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
}
.ui-label > .usage-default-block {
  -ms-flex: 1;
  flex: 1;
  width: auto;
  min-width: 0;
  -webkit-box-flex: 1;
}
.usage-default-block.ui-arrow::after {
  /* width: 24px; 22.07.12 */
  width: 14px;
  height: 24px;
  margin-left: 4px;
}
.usage-default-block + .usage-default-block {
  margin-top: 25px;
}
.type-only-title .usage-default-block + .usage-default-block {
  margin-top: 15px;
}
.usage-default-block.type-flex-column .usage-default-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
}
.usage-default-block.type-flex-column .usage-default-right .type-vertical-bottom {
  margin-top: auto;
}
.usage-default-item.js-ui-accordion__item .usage-default-right {
  min-width: 125px;
} /* //건별즉시결제 우측 금액영역 가로값 관련 수정 */
.usage-default-left-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
  flex: 1;
  align-items: stretch;
  box-sizing: border-box;
  min-width: 0;
  text-align: left;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-box-flex: 1;
}
.usage-default-left {
  display: block;
  -ms-flex: 1;
  flex: 1;
  align-items: center;
  min-width: 0;
  -webkit-box-flex: 1;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.usage-default-left.type-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.usage-default-right {
  display: block;
  -ms-flex: none;
  flex: 0 0 auto;
  width: auto;
  margin-left: 5px;
  text-align: right;
  -webkit-box-flex: 0;
}
.usage-default-right.type-width-auto {
  width: auto;
}
.usage-default-title {
  display: block;
  overflow: hidden;
  font-size: 1.8rem;
  line-height: 2.4rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usage-default-title.type-multi-ellipsis {
  display: -webkit-box;
  max-height: 4.8rem;
  white-space: normal;
  word-break: keep-all; /*231020 줄바꿈*/
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.type-basic-text .usage-default-title {
  color: #222; /* 폰트스타일 수정 */
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 21px;
}
.usage-default-sum {
  display: block;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2.4rem;
}
.type-basic-text .usage-default-sum {
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 21px;
}
.usage-default-sum .ui-arrow {
  display: block;
  margin-left: auto;
  font-weight: inherit;
}
.usage-default-sum .ui-arrow:after {
  margin-top: -4.5px;
}
.usage-default-etc {
  display: block;
  margin: 2px 0 0 -8px;
  font-size: 0;
  line-height: 0;
}
.usage-default-etc-item {
  position: relative;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  max-width: 100%;
  padding-left: 17px;
  color: var(--gray-70);
  font-size: 1.2rem;
  line-height: 1.7rem;
  word-break: break-all;
}
.usage-default-etc-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  display: block;
  height: 9px;
  margin-top: -5px;
  border-left: 1px solid var(--gray-60);
}
.usage-default-etc-item:first-child {
  padding-left: 8px;
}
.usage-default-etc-item:first-child::before {
  display: none;
}
.usage-default-etc-item .ui-arrow-change {
  vertical-align: top;
  height: 1.7rem;
}
/* [2025-05-14 KEJ] [WPM-11124] 스타일 추가 */
.usage-default-left-plus .usage-default-etc-card::after{
  display: inline-block;
  content: '';
  width: 1px;
  height: 8px;
  margin: 0px 4px;
  background-color: #ebebeb;
}
.usage-default-left-plus .usage-default-etc-date::after{
  display: inline-block;
  content: '';
  width: 1px;
  height: 8px;
  margin: 0px 4px;
  background-color: #ebebeb;
}
.usage-default-left-plus .usage-default-etc .usage-default-etc-item span.color-primary{
  color: var(--primary) !important;
}
.total-amount-val .total-count--val{
  font-weight: 500;
}
/* [2025-05-14 KEJ] [WPM-11124] 스타일 추가 */

.usage-default-opener {
  display: block;
  -ms-flex: none;
  flex: none;
  width: 28px;
  height: 2.4rem;
  -webkit-box-flex: 0;
}
.usage-default-opener::after {
  width: 13px;
  background-image: url("../images/icon/btn-select-l.svg");
  background-size: auto auto;
}
.usage-default-layer::before {
  content: "";
  display: table;
}
.usage-default-layer.type-full {
  margin-right: -24px;
  margin-left: -24px;
}
.usage-default-contents {
  margin: 15px 26px 0 0;
}
.usage-default-contents.type-no-right-margin {
  margin-right: 0;
}
.usage-default-contents.type-left-checkbox {
  margin-left: 26px;
}
.usage-default-contents.type-gray {
  margin-right: 0;
  padding: 25px 24px;
  background-color: #f4f6f8;
}
.usage-default-etc-item .icon.type-right {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 4px;
  background: url("../images/icon/ic-list-arrow.svg") center center no-repeat;
}
.usage-default-brand {
  display: block;
  overflow: hidden;
  margin-bottom: 2px;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 1.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usage-default-brand.type-multi-ellipsis {
  display: -webkit-box;
  max-height: 3.6rem;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.usage-default-checkbox-block {
  margin-right: 10px;
}
.usage-default-badge {
  margin-bottom: 6px;
  font-size: 0;
  line-height: 0;
}
.usage-default-left.type-flex .logo-pick {
  margin-left: 5px;
}
.usage-default-vertical-card {
  position: relative;
  width: 26px;
  margin: 0 15px 0 0;
}
.usage-default-vertical-card::before {
  content: "";
  display: block;
  height: 40px;
}
.usage-default-vertical-card .card-image {
  position: absolute;
  top: 0;
  left: 50%;
  width: 40px;
  margin: 0;
  -webkit-transform: rotate(90deg) translateY(-50%);
  transform: rotate(90deg) translateY(-50%);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.usage-default-slot-val {
  display: inline-block;
  vertical-align: top;
}
.usage-default-head {
  padding: 25px 0;
}

/* usage-default type-line */
.usage-default.type-line {
  margin-top: 35px;
  padding-top: 35px;
  border-top: 1px solid var(--gray-30);
}

/* usage-default type-narrow-line */
.usage-default.type-narrow-line {
  margin-top: 25px;
  padding-top: 25px;
  border-top: 1px solid var(--gray-30);
}

/* usage-default-item type-line */
.usage-default-item.type-line {
  padding-bottom: 25px;
  border-bottom: 1px solid var(--gray-30);
}

/* usage-default type-line-medium-margin */
.usage-default.type-line-medium-margin > .usage-default-list {
  margin-top: -35px;
}
.usage-default.type-line-medium-margin > .usage-default-list > .usage-default-item {
  padding-top: 35px;
  padding-bottom: 35px;
  border-bottom: 1px solid var(--gray-30);
}

/* usage-default type-line-regular-margin */
.usage-default.type-line-regular-margin > .usage-default-list {
  margin-top: -25px;
}
.usage-default.type-line-regular-margin > .usage-default-list > .usage-default-item {
  padding-top: 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid var(--gray-30);
}

/* type-line-medium-margin-last-none */
/* type-line-regular-margin-last-none */
.usage-default.type-line-medium-margin-last-none > .usage-default-list > .usage-default-item:last-child,
.usage-default.type-line-regular-margin-last-none > .usage-default-list > .usage-default-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/* usage-default-item type-box */
.usage-default-item.type-box {
  padding: 0;
  border: 1px solid var(--gray-30);
  border-radius: 15px;
}
.usage-default-item.type-box .usage-default-block {
  padding: 20px;
}
.usage-default-item.type-box + .usage-default-item.type-box {
  margin-top: 10px;
}

/* usage-default type-point */
.usage-default.type-point .usage-default-list {
  margin-top: -12px;
}
.usage-default.type-point .usage-default-item {
  padding: 12px 15px;
  border-bottom: 1px solid var(--gray-30);
}
.usage-default.type-point .usage-default-item.type-total {
  padding-top: 15px;
  padding-bottom: 15px;
}

/* usage-default type-point type-line */
.usage-default.type-point.type-line {
  margin-top: 0;
  padding-top: 12px;
  border-top: 1px solid var(--gray-30);
}

/* usage-default-item type-total */
.usage-default-item.type-total {
  background-color: var(--gray-20);
}

/* usage-default-block type-align-middle */
.usage-default-block.type-align-middle,
.usage-default-block.type-align-middle .usage-default-left-group {
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.usage-default-block.type-align-middle .logo-image {
  margin-top: 0;
}

/* usage-default-left-group type-align-middle */
.usage-default-left-group.type-align-middle {
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.usage-default-left-group.type-align-middle .logo-image {
  margin-top: 0;
}

/* usage-default-right type-auto */
.usage-default-right.type-auto {
  width: auto;
}

/* usage-default-block type-event */
.usage-default-block.type-event .logo-image {
  margin-right: 20px;
}
.usage-default-block.type-event .usage-default-etc {
  margin-top: 12px;
}

/* usage-default-block type-disabled */
.usage-default-block.type-disabled .usage-default-brand,
.usage-default-block.type-disabled .usage-default-title,
.usage-default-block.type-disabled .usage-default-etc-item,
.usage-default-block.type-disabled .form-detail-title,
.usage-default-block.type-disabled .form-detail-group {
  color: var(--gray-50);
}
.usage-default-block.type-disabled .logo-image {
  opacity: 0.3;
}
.usage-default-block.type-disabled .usage-default-brand.color-primary,
.usage-default-block.type-disabled .usage-default-brand.color-vip {
  opacity: 0.4;
}
.usage-default-block.type-disabled .status-tag {
  border-color: var(--gray-20);
  background-color: var(--gray-20);
  color: var(--gray-70);
}

/* usage-default type-small-margin */
.usage-default.type-small-margin .usage-default-list {
  margin-top: -10px;
}
.usage-default.type-small-margin .usage-default-item {
  padding-top: 10px;
}

/* usage-default type-accordion-line */
.usage-default.type-accordion-line {
  border-top: 1px solid var(--gray-30);
}
.usage-default.type-accordion-line > .usage-default-list {
  margin-top: 0;
}
.usage-default.type-accordion-line > .usage-default-list > .usage-default-item {
  padding-top: 0;
  border-bottom: 1px solid var(--gray-30);
}
.usage-default.type-accordion-line > .usage-default-list > .usage-default-item > .usage-default-contents,
.usage-default.type-accordion-line
  > .usage-default-list
  > .usage-default-item
  > .usage-default-layer
  > .usage-default-contents {
  margin-top: 0;
}
.usage-default.type-accordion-line > .usage-default-list > .usage-default-item > .usage-default-layer,
.usage-default.type-accordion-line > .usage-default-list > .usage-default-item > .usage-default-contents {
  margin-bottom: -1px;
}

/* point-progress */
.point-progress-title {
  display: block;
  margin-bottom: 55px;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 21px;
}
.point-progress {
  position: relative;
  padding-top: 7px;
}
.point-progress-object {
  padding: 4px 16px 4px 4px;
  border-radius: 10px;
  background-color: #e6e9ef;
}
.point-progress-object-bar {
  position: relative;
  z-index: 20;
  /* [2024-06-19 : lyr] 실적 100% 초과 시 넘치지 않도록 max-width 추가 */
  max-width: 100%;
  height: 12px;
  padding-right: 12px;
  border-radius: 6px;
  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 );
}
.point-progress-object-bar::before {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background-color: #fff;
}
.point-progress-object-bar .chart-bubble {
  bottom: 100%;
  left: 100%;
  margin-bottom: 12px;
  margin-left: -6px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.point-progress-object-bar.type-left {
  padding-right: 0;
}
.point-progress-object-bar.type-left::before {
  display: none;
}
.point-progress-object-bar.type-left .chart-bubble {
  margin-left: -12px;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.point-progress-object-bar.type-left .chart-bubble::before {
  left: 15px;
  margin-left: 0;
}
.point-progress-object-bar.type-right .chart-bubble {
  margin-left: 12px;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
.point-progress-object-bar.type-right .chart-bubble::before {
  left: 100%;
  margin-left: -20px;
}
.point-progress-gradation {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  margin-right: 20px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
}
.point-progress-gradation-item {
  position: relative;
  z-index: 10;
  width: 20px;
  padding-top: 5px;
}
.point-progress-gradation-item:last-child {
  margin-right: -20px;
}
.point-progress-gradation-item-text {
  margin: 0 -20px;
  font-size: 1rem;
  line-height: 1.4rem;
  text-align: center;
  white-space: nowrap;
}
.point-progress-gradation-item:last-child .point-progress-gradation-item-text {
  position: absolute;
  right: 0;
  margin: 0;
  text-align: right;
  /* bottom: 0; */ /* 22.08.26 그래프 텍스트 위치 수정 */
}

/* point-progress-gradation-item type-custom */
.point-progress-gradation-item.type-custom {
  position: absolute;
  top: 0;
  left: 0;
  margin-right: 0;
}

/* point-progress type-loan */
.point-progress.type-loan .point-progress-object-bar::before {
  display: none;
}
.point-progress.type-loan .point-progress-gradation-item:first-child .point-progress-gradation-item-text {
  margin-right: -80px;
  margin-left: 0;
  text-align: left;
}
.point-progress.type-loan .point-progress-gradation-item:last-child .point-progress-gradation-item-text {
  margin-right: 0;
  margin-left: -80px;
  text-align: right;
}

/* point-progress type-gray */
.point-progress.type-gray .point-progress-object-bar {
  background: #e6e9ef;
}
.point-progress.type-gray .chart-bubble {
  border: 1px solid var(--gray-60);
  box-shadow: 0 2px 10px 0 rgba(202, 210, 226, 0.6);
}
.point-progress.type-gray .chart-bubble-text {
  color: var(--gray-70);
}
.point-progress.type-gray .chart-bubble::before {
  border: 0 solid var(--gray-60);
  border-width: 0 1px 1px 0;
}

/* point-progress type-slim */
.point-progress.type-slim .point-progress-object {
  padding: 0;
  border-radius: 3px;
}
.point-progress.type-slim .point-progress-object-bar {
  height: 6px;
  padding-right: 0;
  border-radius: 3px;
}
.point-progress.type-slim .point-progress-object-bar::before {
  display: none;
}
.point-progress.type-slim .point-progress-gradation {
  margin-right: 0;
}
.point-progress.type-slim .point-progress-gradation-item:last-child {
  margin-right: 0;
}
.point-progress.type-slim .point-progress-gradation-item.type-custom {
  margin-left: -10px;
}

/* point-progress type-secondary */
.point-progress.type-secondary .point-progress-object-bar {
  background: #1a8f8a;
  background: -moz-linear-gradient(left, #1a8f8a 0%, #029c94 100%);
  background: -webkit-linear-gradient(left, #1a8f8a 0%, #029c94 100%);
  background: linear-gradient(to right, #1a8f8a 0%, #029c94 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a8f8a', endColorstr='#029c94',GradientType=1 );
}

/* ui-count-badge */
.ui-count-badge {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  min-width: 20px;
  margin-top: 1px;
  margin-left: 6px;
  padding: 1px 7px 2px;
  border-radius: 10px;
  background: var(--basic);
  color: #fff;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.7rem;
  text-align: center;
}

/* slide-benefit */
.slide-benefit-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.slide-benefit-list:not(.swiper-wrapper) {
  display: none;
}
.slide-benefit-inner {
  box-sizing: border-box;
  padding: 10px 24px 0;
}
.slide-benefit > .swiper-object > .swiper-pagination-bullets {
  position: static;
  margin: 25px auto 30px;
  font-size: 0;
  text-align: center;
}

/* full-contents */
.full-contents {
  margin: 0 -24px;
}

/* 220824 event-case */
.event-case {
  text-align: center;
}
.event-case .image-wrap {
  margin: 0 auto;
}
.event-case.attend-check .image-wrap {
  width: 212px;
}
.event-case.donation-campaign .image-wrap {
  max-width: 296px;
}
.event-case.luckyball-gather .image-wrap {
  width: 172px;
}
.event-case.luckybag-drawingPop .image-wrap {
  width: 159px;
}
.event-case.spinnig-roulettePop .image-wrap.hanamoney {
  width: 102px;
}
.event-case.spinnig-roulettePop .image-wrap.gift {
  width: 162px;
}
.event-case .image-wrap .image-only {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
}
.event-case .page-info {
  margin-top: 14px;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 21px;
}
.event-case .page-info .page-info-title {
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 2rem;
  word-break: keep-all;
}

/* 220513 luckyball event */
.luckyball .page-info {
  margin-top: 14px;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 21px;
}
.luckyball .page-info .page-info-title {
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 2rem;
}
.luckyball .image-wrap {
  width: 217px;
  margin: 0 auto;
}
.luckyball .image-wrap .img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
}

.btn_lucky {
  position: fixed;
  z-index: 2000;
  /* top: 10%;
	left: 50%;
	transform: translateX(-50%); */
  width: 97px;
  height: 78px;
}
.btn_lucky .close {
  position: absolute;
  top: -10%;
  right: 2%;
  z-index: 101;
  width: 14px;
  height: 14px;
  background: url("/images/event/btn_close_luckyball.png") no-repeat 50% 50% / auto 16px;
}
.btn_lucky .luckyball img {
  width: 100%;
}
.btn_lucky img.img_luckyball {
  position: absolute;
  top: 0;
  left: 13%;
  z-index: 99;
  width: 69px;
  animation: btn_ani infinite 1.5s;
}
.btn_lucky img.img_luckyball02 {
  position: absolute;
  top: 0px;
  z-index: 101;
}

/* flower */
.pollen_wrap .pollen {
  position: absolute;
  width: 100%;
}
.pollen_wrap .pollen_01 {
  top: 0%;
  left: -20%;
  opacity: 0;
  animation: pollen_ani 5s;
}
.pollen_wrap .pollen_02 {
  top: 0%;
  right: -20%;
  opacity: 0;
  animation: pollen_ani 5s;
}
.pollen_wrap .pollen_03 {
  top: 15%;
  left: -20%;
  opacity: 0;
  animation: pollen_ani 5s;
}
.pollen_wrap .pollen_04 {
  top: 15%;
  right: -20%;
  opacity: 0;
  animation: pollen_ani 5s;
}

/* coin  */
.coin_01 {
  position: absolute;
  top: -17%;
  left: 37%;
  width: 100px;
  height: 100px;
  opacity: 0;
  animation: xAxis 2s cubic-bezier(0.3, 0.5, 0.7, 0.5);
}
.coin_01::before {
  content: "";
  display: block;
  width: 80%;
  height: 85%;
  background: url("/images/event/img-coin-01.png") no-repeat;
  background-size: contain;
  opacity: 0;
  animation: yAxis 1.5s cubic-bezier(0.5, 0.3, 0.62, 0.77);
}

.coin_02 {
  position: absolute;
  top: -3%;
  left: 30%;
  width: 100px;
  height: 100px;
  opacity: 0;
  animation: xAxis 2s cubic-bezier(0.25, 0.45, 0.7, 0.5);
}
.coin_02::before {
  content: "";
  display: block;
  width: 48%;
  height: 36%;
  background: url("/images/event/img-coin-02.png") no-repeat;
  background-size: contain;
  opacity: 0;
  animation: yAxis 1.5s 0.3s cubic-bezier(0.3, 0.27, 0.3, 0.64);
}

.coin_03 {
  position: absolute;
  top: 6%;
  left: 41%;
  width: 100px;
  height: 100px;
  opacity: 0;
  animation: xAxis_02 2s cubic-bezier(0.27, 0.4, 0.65, 0.45);
}
.coin_03::before {
  content: "";
  display: block;
  width: 32%;
  height: 36%;
  background: url("/images/event/img-coin-03.png") no-repeat;
  background-size: contain;
  opacity: 0;
  animation: yAxis 1.5s cubic-bezier(0.3, 0.3, 0.25, 0.54);
}

.coin_04 {
  position: absolute;
  top: -6%;
  left: 61%;
  width: 100px;
  height: 100px;
  opacity: 0;
  animation: xAxis 2s cubic-bezier(0.2, 0.3, 0.21, 0.6);
}
.coin_04::before {
  content: "";
  display: block;
  width: 27%;
  height: 28%;
  background: url("/images/event/img-coin-04.png") no-repeat;
  background-size: contain;
  opacity: 0;
  animation: yAxis 1.5s 0.2s cubic-bezier(0.3, 0.27, 0.3, 0.64);
}

.coin_05 {
  position: absolute;
  left: 54%;
  width: 100px;
  height: 100px;
  opacity: 0;
  animation: xAxis_02 2s cubic-bezier(0.1, 0.2, 0.5, 0.3);
}
.coin_05::before {
  content: "";
  display: block;
  width: 24%;
  height: 22%;
  background: url("/images/event/img-coin-05.png") no-repeat;
  background-size: contain;
  opacity: 0;
  animation: yAxis 1.5s 0.3s cubic-bezier(0.2, 0.18, 0.24, 0.5);
}

.coin_06 {
  position: absolute;
  top: 7%;
  left: 50%;
  width: 100px;
  height: 100px;
  opacity: 0;
  animation: xAxis 2s cubic-bezier(0.1, 0.3, 0.4, 0.4);
}
.coin_06::before {
  content: "";
  display: block;
  width: 49%;
  height: 49%;
  background: url("/images/event/img-coin-06.png") no-repeat;
  background-size: contain;
  opacity: 0;
  animation: yAxis 1.5s cubic-bezier(0.3, 0.27, 0.3, 0.6);
}

.coin_07 {
  position: absolute;
  top: 10%;
  left: 31%;
  width: 100px;
  height: 100px;
  opacity: 0;
  animation: xAxis_02 2s cubic-bezier(0.3, 0.45, 0.67, 0.54);
}
.coin_07::before {
  content: "";
  display: block;
  width: 54%;
  height: 49%;
  background: url("/images/event/img-coin-07.png") no-repeat;
  background-size: contain;
  opacity: 0;
  animation: yAxis 1.5s 0.2s cubic-bezier(0.25, 0.3, 0.4, 0.54);
}

.coin_08 {
  position: absolute;
  top: 16%;
  left: 39%;
  width: 100px;
  height: 100px;
  opacity: 0;
  animation: xAxis 2s cubic-bezier(0.1, 0.3, 0.4, 0.4);
}
.coin_08::before {
  content: "";
  display: block;
  width: 49%;
  height: 49%;
  background: url("/images/event/img-coin-06.png") no-repeat;
  background-size: contain;
  opacity: 0;
  animation: yAxis 1.5s cubic-bezier(0.3, 0.27, 0.3, 0.6);
}

.coin_09 {
  position: absolute;
  top: -17%;
  left: 56%;
  width: 100px;
  height: 100px;
  opacity: 0;
  animation: xAxis 2s cubic-bezier(0.25, 0.45, 0.7, 0.5);
}
.coin_09::before {
  content: "";
  display: block;
  width: 48%;
  height: 36%;
  background: url("/images/event/img-coin-02.png") no-repeat;
  background-size: contain;
  opacity: 0;
  animation: yAxis 1.5s 0.3s cubic-bezier(0.3, 0.27, 0.3, 0.64);
}

.coin_10 {
  position: absolute;
  top: 3%;
  left: 58%;
  width: 100px;
  height: 100px;
  opacity: 0;
  animation: xAxis 2s cubic-bezier(0.3, 0.5, 0.7, 0.5);
}
.coin_10::before {
  content: "";
  display: block;
  width: 80%;
  height: 85%;
  background: url("/images/event/img-coin-01.png") no-repeat;
  background-size: contain;
  opacity: 0;
  animation: yAxis 1.5s cubic-bezier(0.5, 0.3, 0.62, 0.77);
}

.coin_11 {
  position: absolute;
  top: -10%;
  left: 41%;
  width: 100px;
  height: 100px;
  opacity: 0;
  animation: xAxis_02 2s cubic-bezier(0.3, 0.45, 0.67, 0.54);
}
.coin_11::before {
  content: "";
  display: block;
  width: 77%;
  height: 77%;
  background: url("/images/event/img-coin-08.png") no-repeat;
  background-size: contain;
  opacity: 0;
  animation: yAxis 1.5s 0.2s cubic-bezier(0.25, 0.3, 0.4, 0.54);
}

.coin_12 {
  position: absolute;
  top: 2%;
  left: 61%;
  width: 100px;
  height: 100px;
  opacity: 0;
  animation: xAxis_02 2s cubic-bezier(0.27, 0.4, 0.65, 0.45);
}
.coin_12::before {
  content: "";
  display: block;
  width: 32%;
  height: 36%;
  background: url("/images/event/img-coin-03.png") no-repeat;
  background-size: contain;
  opacity: 0;
  animation: yAxis 1.5s cubic-bezier(0.3, 0.3, 0.25, 0.54);
}

.coin_13 {
  position: absolute;
  top: -6%;
  left: 61%;
  width: 100px;
  height: 100px;
  opacity: 0;
  animation: xAxis_02 2s cubic-bezier(0.2, 0.3, 0.21, 0.6);
}
.coin_13::before {
  content: "";
  display: block;
  width: 27%;
  height: 28%;
  background: url("/images/event/img-coin-04.png") no-repeat;
  background-size: contain;
  opacity: 0;
  animation: yAxis 1.5s 0.2s cubic-bezier(0.3, 0.27, 0.3, 0.64);
}

.coin_14 {
  position: absolute;
  top: -6%;
  left: 61%;
  width: 100px;
  height: 100px;
  opacity: 0;
  animation: xAxis 2s cubic-bezier(0.2, 0.3, 0.21, 0.6);
}
.coin_14::before {
  content: "";
  display: block;
  width: 27%;
  height: 28%;
  background: url("/images/event/img-coin-04.png") no-repeat;
  background-size: contain;
  opacity: 0;
  animation: yAxis 1.5s 0.2s cubic-bezier(0.3, 0.27, 0.3, 0.64);
}

.coin_15 {
  position: absolute;
  top: 16%;
  left: 39%;
  width: 100px;
  height: 100px;
  opacity: 0;
  animation: xAxis_02 2s cubic-bezier(0.1, 0.3, 0.4, 0.4);
}
.coin_15::before {
  content: "";
  display: block;
  width: 49%;
  height: 49%;
  background: url("/images/event/img-coin-06.png") no-repeat;
  background-size: contain;
  opacity: 0;
  animation: yAxis 1s cubic-bezier(0.3, 0.27, 0.3, 0.6);
}

.coin_16 {
  position: absolute;
  top: -3%;
  left: 30%;
  width: 100px;
  height: 100px;
  opacity: 0;
  animation: xAxis 2s cubic-bezier(0.25, 0.45, 0.7, 0.5);
}
.coin_16::before {
  content: "";
  display: block;
  width: 48%;
  height: 36%;
  background: url("/images/event/img-coin-02.png") no-repeat;
  background-size: contain;
  opacity: 0;
  animation: yAxis 1.5s 0.3s cubic-bezier(0.3, 0.27, 0.3, 0.64);
}

.coin_17 {
  position: absolute;
  top: -20%;
  left: 30%;
  width: 100px;
  height: 100px;
  opacity: 0;
  animation: xAxis_02 2s cubic-bezier(0.25, 0.45, 0.7, 0.5);
}
.coin_17::before {
  content: "";
  display: block;
  width: 48%;
  height: 36%;
  background: url("/images/event/img-coin-02.png") no-repeat;
  background-size: contain;
  opacity: 0;
  animation: yAxis 1.5s 0.3s cubic-bezier(0.3, 0.27, 0.3, 0.64);
}

/* coin animation */
@keyframes xAxis {
  1% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  80% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes yAxis {
  1% {
    opacity: 1;
  }
  50% {
    opacity: 1;
    transform: translateY(-150%) rotateX(720deg);
  }
  75% {
    opacity: 1;
  }
  80% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translateY(100%) rotateX(1440deg);
  }
}

@keyframes xAxis_02 {
  1% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  80% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}

/* flower animaiton */
@keyframes pollen_ani {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 0.5s;
  }
  100% {
    opacity: 0;
  }
}

/* button animation */
@keyframes btn_ani {
  0% {
    transform: translateY(-6px);
  }
  45% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-6px);
  }
}

/* 220623 push event */
.present_box {
  position: absolute;
  top: -65%;
  left: 50%;
  width: 175px;
  height: 122px;
  opacity: 1;
  transform: translateX(-50%);
  animation: push_big_x 2s cubic-bezier(0.3, 0.5, 0.7, 0.5) both;
}
.present_box::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("/images/push/img-present-box.png") no-repeat;
  background-size: contain;
  opacity: 1;
  animation: push_big_y 1.2s cubic-bezier(0.5, 0.3, 0.62, 0.77) both;
}
.low-height .present_box {
  top: -55%;
}
.coupon_box {
  position: absolute;
  top: -60%;
  left: 50%;
  width: 200px;
  height: 121px;
  opacity: 1;
  transform: translateX(-50%);
  animation: push_big_x 2s cubic-bezier(0.3, 0.5, 0.7, 0.5) both;
}
.coupon_box::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("../images/push/img-coupon.png") no-repeat;
  background-size: contain;
  opacity: 1;
  animation: push_big_y 1.2s cubic-bezier(0.5, 0.3, 0.62, 0.77) both;
}
.heart_box {
  position: absolute;
  top: -60%;
  left: 50%;
  width: 99px;
  height: 86px;
  opacity: 1;
  transform: translateX(-50%);
  animation: push_big_x 2s cubic-bezier(0.3, 0.5, 0.7, 0.5) both;
}
.heart_box::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("../images/push/img-heart.png") no-repeat;
  background-size: contain;
  opacity: 1;
  animation: push_big_y 1.2s cubic-bezier(0.5, 0.3, 0.62, 0.77) both;
}
/* 23.01.04 추가 */
.heart_box.zzim {
  top: 50%;
  transform: translate(-50%, -50%);
  animation: push_big_x_zzim 4.5s cubic-bezier(0.3, 0.5, 0.7, 0.5) both;
}
.heart_box.zzim::before {
  animation: push_big_y_zzim 3.7s cubic-bezier(0.5, 0.3, 0.62, 0.77) both;
}
/* //23.01.04 추가 */

@keyframes push_big_x {
  1% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(-50%);
  }
}
@keyframes push_big_y {
  1% {
    opacity: 1;
  }
  50% {
    opacity: 1;
    transform: scale(1.4);
  }
  75% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 23.01.04 추가 */
@keyframes push_big_x_zzim {
  1% {
    opacity: 1;
  }
  15% {
    opacity: 1;
  }
  30% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0.8;
  }
  95% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes push_big_y_zzim {
  1% {
    opacity: 1;
  }
  15% {
    opacity: 1;
    transform: scale(1.4);
  }
  30% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0.8;
  }
  95% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
/* //23.01.04 추가 */

.notice-balloon-box {
  overflow: hidden;
}
.notice-balloon-box .notice-balloon {
  margin-left: 6px;
}
.notice-balloon-box .notice-balloon img {
  width: 100%;
}
.notice-balloon-box .notice-balloon.ty01 {
  width: 86px;
  height: 24px;
}
.notice-balloon-box .notice-balloon.ty02 {
  width: 130px;
  height: 24px;
}
.notice-balloon-box .notice-balloon.ty03 {
  position: absolute;
  top: 70%;
  left: 50%;
  width: 126px;
  height: 28px;
  opacity: 0;
  transform: translateX(-50%);
}
.notice-balloon-box .notice-balloon.coming {
  animation: coming_ani 0.5s;
}
.notice-balloon-box .notice-balloon.coming02 {
  opacity: 1;
  animation: coming_ani02 1s;
}

@keyframes coming_ani {
  0% {
    transform: translateX(-100px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes coming_ani02 {
  0% {
    top: 50%;
    opacity: 0;
  }
  100% {
    top: 70%;
    opacity: 1;
  }
}

/* 230424 내카드관리 툴팁 텍스트 추가 */
.ui-button-tooltip-text-toggle {
  position: absolute;
  bottom: auto;
  left: 50%;
  display: block;
  padding: 7px 15px 6px;
  border-radius: 3px;
  background-color: #2c364e;
  color: #fff;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 17px;
  text-align: right;
  white-space: nowrap;
  transform: translateX(-50%);
}
.ui-button-tooltip-text-toggle::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  display: block;
  margin-left: -3px;
  border: 0 solid transparent;
  border-width: 4px 3px;
  border-bottom-color: #2c364e;
}
/* //230424 내카드관리 툴팁 텍스트 추가 */

/* 2023.05.24 comm 취소선 CHO */
.txt--through {
  text-decoration: line-through !important;
}

/* ====================== 230628 하나페이 BI 변경 =====================
  20230918 하나페이 BI 로고 사이즈 수정

  ====================== 230628 하나페이 BI 변경 =====================*/
.hanapay-logo-image {
  position: relative;
  display: block;
  /* width: 65px;
    height: 30px; */
  width: 52px;
  height: 22px;
  /* margin-top: 4px; */
  margin-top: 0;
  background: no-repeat 0 50%;
  background-image: url(/images/mypage_new_images/hanapay-logo-appicon03.png);
  /* background-size: 65px; */
  background-size: contain;
}
.hanapay-logo-image > span {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1px;
  line-height: 1px;
  opacity: 0;
  /* [24.07.16 : lyr] 접근성 수정 : 텍스트 숨김처리 시 [visibility: hidden]는 사용X */
  /* visibility: hidden; */
} /* 230906 접근성 수정 */
/* ====================== //230628 하나페이 BI 변경 =====================*/
/* ====================== 230918 VVIP 등급 표기 뱃지, 헤더 텍스트 메뉴 추가 =====================*/
.gnb-name-card-left {
  display: inline-flex;
  align-items: center;
}
.gnb-name-card-left .badge-vip,
.header-left .badge-vip {
  display: inline-flex;
  align-items: center;
  align-self: center;
  height: 18px;
  margin-left: 4px;
  padding: 0 6.5px;
  border-radius: 9px;
  /* background-color:rgb(236,227,214); */
  /* background-color: #d8b277; */
  /* [24.06.27 : lyr] 웹 접근성 컬러 조정 */
  background-color: var(--vip);
  /* color:rgb(128,96,64); */
  color: #fff;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
}
/* 2023-11-21 VIP 뱃지 옆에 화살표 추가 */
.gnb-name-card-left .badge-vip::after,
.header-left .badge-vip::after {
  content: " >";
  margin-left: 0.25em;
}
@media (max-width: 320px) {
  .gnb-name-card-left .badge-vip {
    font-size: 10px;
  }
}
.header-button.type-text {
  display: inline-flex;
  align-items: center;
  width: auto;
  font-weight: bold;
  font-size: 15px;
}
/* ====================== //230918 VVIP 등급 표기 뱃지, 헤더 텍스트 메뉴 추가 =====================*/

/* ====================== 20240214 페이지 스크롤 탭 추가 */
.ui-page-scroll-tap {
  position: sticky;
  top: 5rem;
  z-index: 50;
  display: flex;
  gap: 2.4rem;
  background-color: #ffffff;
}
.ui-page-scroll-tap .tab-list {
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  padding: 1.2rem 2.4rem;
  scroll-snap-type: x proximity;
  scroll-padding: 0 24px;
}
.ui-page-scroll-tap .tab-list::-webkit-scrollbar {
  display: none;
}
.ui-page-scroll-tap .tab-list .tab-list-item {
  scroll-snap-stop: normal;
  scroll-snap-align: start;
}
.ui-page-scroll-tap .tab-list .tab-list-link {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  height: 4rem;
  padding: 0 1.3rem 0 0.8rem;
  border: 1px solid var(--gray-30);
  border-radius: 2rem;
  color: var(--basic);
  font-size: 1.5rem;
}
.ui-page-scroll-tap .tab-list .tab-list-link.is-active {
  border-color: var(--basic);
  background-color: var(--basic);
  color: #ffffff;
}
.ui-page-scroll-tap .tab-list .tab-list-item i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.4rem;
  height: 2.4rem;
}
.ui-page-scroll-tap .tab-list .tab-list-item span {
  display: block;
  white-space: nowrap;
}
/* ====================== //20240214 페이지 스크롤 탭 추가 */

/* 240223 - 공통 class 추가 (lyr) */
.font-size-13 {
  font-size: 1.3rem;
}
.font-size-14 {
  font-size: 1.4rem;
}
.font-size-15 {
  font-size: 1.5rem;
}
.font-size-16 { /* [2026-07-24 kho] [WPM-15422] 추가. */
  font-size: 1.6rem !important;
}
.font-size-17 {
  font-size: 1.7rem !important;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.pos-relative {
  position: relative;
}

/* 24.04.16 메인 팝업 체크박스 수정 */
.ui-layer__outtop .ui-layer__outtop-left .ui-checkbox-object {
  width: 18px;
  height: 18px;
  background: url(/images/common/ic-borderless-checkbox.svg) no-repeat 0 50%;
}
.ui-layer__outtop .ui-layer__outtop-left .ui-checkbox:checked + .ui-label .ui-checkbox-object,
.ui-layer__outtop .ui-layer__outtop-left .ui-checkbox-block.is-checked .ui-label .ui-checkbox-object {
  width: 18px;
  height: 18px;
  background: url(/images/common/ic-borderless-checkbox-c.svg) no-repeat 0 50%;
}
/* [24.07.01 : lyr] 웹 접근성용 체크박스 focus outline 추가 */
.ui-layer__outtop .ui-checkbox-block {
  display: inline-block;
  vertical-align: middle;
}
.ui-layer__outtop .ui-checkbox-block:focus,
.ui-layer__outtop .ui-checkbox-block:focus-visible {
  border-radius: 0.4rem;
  box-shadow: 0 0 0 2px #000;
}

/* [2024-06-12 푸터 인증마크 width 추가 : HDH] */
.footer-marks-item {
  width: 49%;
}
.footer-marks .footer-nav-item .footer-nav-link {
  font-size: 1.2rem;
}

/* [24.07.02 : lyr] 웹 접근성 checkbox 사이즈 변경 (기존 24px => 신 18px), 모바일 모든 사이즈 공통 */
.ui-radio-object {
  width: 18px;
  height: 18px;
  background: url("../images/common/ic-radio.svg") no-repeat 0 50% / 100%;
}
.ui-radio-block.type-circle.type-small .ui-radio-object {
  width: 18px;
  height: 18px;
}
.ui-radio-block.type-circle.type-medium .ui-radio-object {
  width: 18px;
  height: 18px;
  background: url("../images/common/ic-radio.svg") no-repeat 0 50% / 100%;
}
/* [24.07.10 : lyr] 웹 접근성 checkbox 변경 / 회원가입의 약관 동의 */
.ui-checkbox-block.type-large .ui-checkbox-object {
  background: url("../images/common/ic-checkbox-l.svg") no-repeat 0 50% / 100%;
}

/* [2024-08-29 : FREEST] Common Slide Controller 스타일 정의 */
/* Common Slide Controller */
.common-slide .slide-controller {
  position: relative;
  margin-top: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  gap: 0.4rem;
}
.common-slide .slide-controller.pos-absolute {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 1rem;
}
.common-slide .slide-controller.pos-absolute.pos-top-left {
  top: 1.6rem;
  right: auto;
  bottom: auto;
  left: 1.6rem;
}
.common-slide .slide-controller.pos-absolute.pos-top-center {
  top: 1.6rem;
  right: auto;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
}
.common-slide .slide-controller.pos-absolute.pos-top-right {
  top: 1.6rem;
  right: 1.6rem;
  bottom: auto;
  left: auto;
}
.common-slide .slide-controller.pos-absolute.pos-bottom-right {
  top: auto;
  right: 1.6rem;
  bottom: 1.6rem;
  left: auto;
}
.common-slide .slide-controller.pos-absolute.pos-bottom-center {
  top: auto;
  right: auto;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
}
.common-slide .slide-controller.pos-absolute.pos-bottom-left {
  top: auto;
  right: auto;
  bottom: 1.6rem;
  left: 1.6rem;
}
.common-slide .slide-controller button,
.common-slide .slide-controller .swiper-pagination {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  margin: 0;
}
.common-slide .slide-controller .swiper-button-prev {
  position: relative;
  background: url("/images/icon/ic-left.svg") no-repeat center;
  background-size: 1.2rem;
}
.common-slide .slide-controller .swiper-button-next {
  position: relative;
  background: url("/images/icon/ic-right.svg") no-repeat center;
  background-size: 1.2rem;
}
.common-slide .slide-controller .swiper-button-prev::after,
.common-slide .slide-controller .swiper-button-next::after {
  display: none;
}
.common-slide .slide-controller .swiper-pagination {
  position: relative;
  width: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.common-slide .slide-controller .swiper-pagination .custom-text {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  color: #111111;
  gap: 0.125em;
}
.common-slide .slide-controller .swiper-pagination .current-text {
}
.common-slide .slide-controller .swiper-pagination .total-text {
}
.common-slide .slide-controller .swiper-button-play-toggle {
  position: relative;
  background: url("/images/icon/ic-play.svg") no-repeat center;
  background-size: 1.2rem;
}
.common-slide .slide-controller .swiper-button-play-toggle.is-playing {
  background-image: url("/images/icon/ic-pause.svg");
}
/* [24.09.03 : lyr] 공통 인디케이터 위치 변경 (참고/ 이용대금명세서 : MKSTMT1010M.web) */
.slide-banner {
  padding-bottom: 16px;
}
.slide-banner-controller {
  right: 50%;
  bottom: -16px;
  transform: translateX(50%);
}
.menu-top.type-banner-only .slide-banner,
.menu-top .slide-banner,
.gnb .slide-banner {
  padding-bottom: 24px;
}
/* [24.09.03 : lyr] 공통 인디케이터 위치 변경 (참고/ 자동납부 : MKATPA1000N.web) / 오른쪽 상단 */
.payment-wrap:not(.slide-banner) .slide-banner-controller {
  right: 20px;
  bottom: inherit;
  transform: none;
}
.slide-banner.type-notice,
.slide-banner.cont-top-slide {
  padding-bottom: 0;
}
.slide-banner.cont-top-slide .slide-banner-controller {
  bottom: 12px;
}
.slide-banner.type-notice .slide-banner-controller {
  transform: none;
}

/* [24.10.24 : lyr] [WPM-6649 : 운영 배포] [메일-요청] css 조정요청드립니다 (박선솔 주임님) */
/* 1. 즉시결제, 건별즉시결제 ==> 체크박스 - disable 체크박스 사이즈가 크게 상이합니다. (공통인듯합니다)
  ==> wcms 마이그레이션 하면서 이미지가 이전걸로 돌아간 이슈
  ==> 운영이 변경되야 할 이미지 : /images/common/ic-checkbox-c.svg, ic-checkbox-l.svg, ic-checkbox-l-d.svg
  ==> {common.css}
*/
.ui-checkbox-block.type-large .ui-checkbox[disabled] + .ui-label .ui-checkbox-object {
  background-size: 84%;
  background-position: center 1px !important;
}

/* // [24.10.24 : lyr] [메일-요청] css 조정요청드립니다 (박선솔 주임님) */

/* [2024-11-01: KJH] '잔액이 부족할 땐! 하이브리드 서비스' 추가 (.type-flex-column-2 클래스 생성) */
.menu-link-item .type-flex-column-2 .form-flex-cell .main-title {
  letter-spacing: -0.0375rem;
}
.menu-link-item .type-flex-column-2 .form-flex-cell .sub-title {
  display: block;
  padding-left: 0;
  font-size: 1.3rem;
  line-height: 1.38;
  font-weight: 700;
  letter-spacing: -0.0325rem;
}
.menu-link-item .type-flex-column-2 .form-flex-cell .default-text.color-primary {
  color: var(--primary);
  font-weight: 500;
  letter-spacing: -0.0325rem;
}
/* // [2024-11-01: KJH] '잔액이 부족할 땐! 하이브리드 서비스' 추가 (.type-flex-column-2 클래스 생성) */

/* [2024-11-06: KJH] [WPM-9038] [마이/메인] '앱 업데이트팝업 제작 요청'_'박선솔' 사전협의-2024-10-31: .layer-info-text 내부 ul 처리  */
.layer-info {
  font-weight: 500; /* 이제부터 font-weight: 300은 사용하지 않기로 하여 덮어씀 */
}
.layer-inf-text-flex {
  display: flex;
  gap: 16px;
}
.layer-inf-text-flex li {
  display: flex;
  align-items: center;
  gap: 16px;
}
.layer-inf-text-flex li:not(:last-of-type)::after {
  content: "";
  display: block;
  width: 1px;
  height: 64%;
  background-color: var(--gray-80);
}
/* // [2024-11-06: KJH] [WPM-9038] [마이/메인] '앱 업데이트팝업 제작 요청'_'박선솔' 사전협의-2024-10-31: .layer-info-text 내부 ul 처리  */

/* [2024-11-08: KJH] .type-debt */
.type-debt .ui-radio-block.type-tab .ui-label {
  border: 1px solid #e5e5e5;
  border-radius: 20px;
  height: 30px;
}
.type-debt .ui-radio-block.type-tab .ui-label.js-tabpanel-active {
  border: 1px solid var(--basic);
  background: var(--basic);
}
.page-contents.type-debt {
  padding-bottom: 60px;
}
.page-contents.type-debt .faq-list-area {
  margin-top: -30px;
}
.page-contents.type-debt .faq-list-area .faq-list:first-child {
  border-top: none;
}
/* // [2024-11-08: KJH] .type-debt */

/* [2024-11-12: LHJ] 이벤트팝업 전체팝업으로 수정 test */
#layer-apply-event-pop.layer-wrap--full .ui-layer__outtop {
  bottom: initial;
  top: 12px;
  padding: 0 16px;
  z-index: 9003;
}
#layer-apply-event-pop.layer-wrap--full .ui-layer__body-inner.none-header-type {
  height: 100vh;
  border-radius: 0;
}
#layer-apply-event-pop.layer-wrap--full .ui-layer__body .fix-scroll-header .fix-txt {
  border-radius: 0;
}
/* // [2024-11-12: LHJ] 이벤트팝업 전체팝업으로 수정 test */

/* ========================= [ [WPM-8513] 하나페이 주요화면 개편, 2024.12.12 ] ========================= */
/* 24.09.25 레이아웃 개편 - sayho */
.renewal_2024 .header.type-renewal {
  padding: 0;
  min-height: 50px;
  height: auto;
  flex-wrap: wrap;
  transition: 0.1s linear; /* [24.11.11 : lyr] ==> 헤더 스크롤 내리면 그림자 나오게 추가 */
  background: #fff;
}
/* [24.11.11 : lyr] ==> 헤더 스크롤 내리면 그림자 나오게 추가 */
.renewal_2024 .header.type-renewal.is-scroll {
  /*box-shadow: 1px 2px 8px rgb(0 0 0 / 25%);*/
  border-bottom: 1px solid #d6d6d6;
}
.renewal_2024 .header.type-renewal .header-title {
  display: flex;
  align-items: center;
}
/* [24.11.13 : lyr] 트래블버킷 : 헤더 */
[data-wrap="travelBucket"] .header-title {
  position: relative;
  z-index: 1;
}
[data-wrap="travelBucket"] .header.type-renewal.is-scroll {
  box-shadow: none;
}
/* // end .. [24.11.13 : lyr] 트래블버킷 : 헤더 */
.renewal_2024 .header.type-renewal .header-title h1 {
  font-size: 24px;
  line-height: 50px;
  font-weight: 700;
}
/* [25.02.14 : lyr] 서브 페이지 헤더 스타일 추가 */
.renewal_2024 .header.type-renewal .header-title .title-sub {
  padding-right: 10px;
  font-size: 18px;
  line-height: 50px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-inner {
  display: flex;
  width: 100%;
  padding: 0 16px;
  justify-content: space-between;
  min-height: 50px;
  align-items: center;
}
.toggle-my-type {
  margin-left: 12px;
  padding: 2px;
  /* background: rgba(0, 0, 0, 0.5); */
  /* background: linear-gradient(90deg, #808080 0%, #a5a5a5 50%, #808080 100%); */
  background: #a5a5a5;
  background: linear-gradient(90deg, #808080 0%, #a5a5a5 50%);
  font-size: 0;
  overflow: hidden;
  border-radius: 15px;
}
.toggle-my-type.is-active {
  background: linear-gradient(-90deg, #808080 0%, #a5a5a5 60%);
}
.toggle-my-type span {
  position: relative;
  z-index: 2;
  display: inline-block;
  padding: 6px 5px 5px;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
}
.toggle-my-type span.on {
  position: relative;
  z-index: 1;
  padding: 6px 5px 5px;
  border-radius: 15px;
  background: #fff;
  /* box-shadow: 60px 0 26px #808080; */
  color: #111;
}
/* .toggle-my-type span.on::before {
content: "";
position: absolute;
left: 90%;
top: -2px;
bottom: -2px;
width: 50px;
border-radius: 15px;
background: linear-gradient(-90deg, #808080 0%, #a5a5a5 50%);
} */
.header-utils {
  display: flex;
  align-items: center; /* [25.02.14 : lyr] 신규 아이콘과 기존 사이즈가 맞지 않는 것을 감안해 세로 가운데 정렬을 추가 */
  gap: 12px; /* [25.02.14 : lyr] 디자인 피그마 산출물과 gap 맞춤 */
}
.header-utils .btn-util {
  position: relative;
  text-align: center;
}
.header-utils .btn-util i,
.header-utils .btn-util i img {
  display: block;
  height: 32px; /* [25.02.14 : lyr] 아이콘 사이즈 28px ==> 32px로 변경 됨 (기존 아이콘 세로 사이즈가 32px이어서) */
  min-width: 32px; /* [25.02.14 : lyr] 아이콘 사이즈 28px ==> 32px로 변경 됨 (기존 아이콘 세로 사이즈가 32px이어서) */
  margin: 0 auto;
}
.renewal_2024 .header.type-renewal .header-utils .btn-util i,
.renewal_2024 .header.type-renewal .header-utils .btn-util i img {
  position: relative;
  z-index: 1;
}
.header-utils .btn-util .btn-util-txt {
  display: block;
  width: 100%;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
}
.header-utils .btn-util .badge {
  position: absolute;
  right: 0;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background: #f14a76;
}
.renewal_2024 .header.type-renewal .header-utils .btn-util .speech_bubble {
  position: absolute;
  top: 5.5px;
  top: 1.5px; /* [25.03.07 : lyr] fix-top-wrap의 각 메뉴에 텍스트를 빼고 아이콘만 유지하는 걸로 변경 되면서 [챗봇] 말풍선 위치 조정이 필요하여 수정 되었습니다 */
  right: calc(100% + 10px);
  z-index: 0;
  width: auto;
  /* display: none; */
  visibility: hidden;
  transform-origin: right;
}
.renewal_2024 .header.type-renewal .header-utils .btn-util .speech_bubble.on {
  /* display: block; */
  visibility: visible;
  opacity: 0;
  z-index: 10;
  animation: speechBubble 10s forwards 0.5s;
}
.renewal_2024 .header.type-renewal .header-utils .btn-util .speech_bubble p {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px;
  background: linear-gradient(90deg, #28b964 0%, #00aa78 50%, #02b4b9 91%);
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  border-radius: 15px;
  letter-spacing: -0.7px;
}
.renewal_2024 .header.type-renewal .header-utils .btn-util .speech_bubble p::after {
  content: "";
  position: absolute;
  right: -4px;
  top: calc(50% - 2px);
  display: block;
  width: 9px;
  height: 7px;
  background: url("/images/new_renewal/ic_speech_bubble.svg") no-repeat 0 0 / 100% auto;
  transform: translateY(-50%);
}
@keyframes speechBubble {
  0% {
    /* right: calc(-100% + 28px); */
    right: 100%;
    opacity: 0;
    transform: scaleX(0);
  }
  5% {
    right: calc(100% + 10px);
    opacity: 1;
    transform: scaleX(1);
  }
  95% {
    right: calc(100% + 10px);
    opacity: 1;
    transform: scaleX(1);
  }
  100% {
    /* right: calc(-100% + 28px); */
    right: 100%;
    opacity: 0;
    transform: scaleX(0);
  }
}
.dock-menu:has(ul.new-menu-list) {
  border: 0;
  background: transparent;
  transform: translateY(0px);
  transition: transform 0.7s ease 0s, background 0.35s linear 0s;
}
.is-menu-nav-opened .dock-menu:has(ul.new-menu-list) {
  background: rgba(0, 0, 0, 0.65);
}
/* [2025-07-31 KJH] [WPM-11558] 접근성 : 전체 메뉴 에서 하단 메뉴가 열리면 스크롤 방지 */
html.is-menu-nav-opened {
  overflow-y: hidden;
}
/* // [2025-07-31 KJH] [WPM-11558] 접근성 : 전체 메뉴 에서 하단 메뉴가 열리면 스크롤 방지 */
.dock-menu:has(ul.scrolling) {
  transform: translateY(100%);
}
.dock-menu-sub-area {
  position: absolute;
  bottom: 94px;
  left: 0;
  width: 100%;
  border-radius: 14px 14px 0 0;
  z-index: 1;
  height: 0;
  transition: 0.7s all;
}
.dock-menu-sub-area .main-btm-layer-contents {
  opacity: 0;
}
.dock-menu-sub-area .type-tab {
  position: absolute;
  width: 100%;
  top: -46px;
  border-radius: 16px 16px 0 0;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
  background: #fff;
  padding: 12px 16px 0;
  text-align: center;
  box-sizing: border-box;
  transition: 0.7s top;
}
/* 24.12.17 혜택버튼 수정으로 인해 추가 - sayho */
.dock-menu-sub-area .type-tab:has(.fix-bottom-modal-link) {
  top: -40px;
  padding: 0;
  background: linear-gradient(90deg, #28b964 0%, #00aa78 50%, #02b4b9 91%);
}
/* [2025-05-26 KJH] [WPM-] has 선택자 수정 */
.dock-menu-sub-area .type-tab.type-tab-benefit {
  top: -40px;
  padding: 0;
  background: linear-gradient(90deg, #28b964 0%, #00aa78 50%, #02b4b9 91%);
}

.dock-menu-sub-area .type-contents {
  position: absolute;
  width: 100%;
  top: -149px;
  border-radius: 16px 16px 0 0;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
  transition: 0.7s top;
  overflow: hidden;
  animation: modal-up-motion 0.7s ease-in-out 1;
}
@keyframes modal-up-motion {
  from {
    transform: translateY(10px);
  }
  to {
    transform: translateY(0);
  }
}
.dock-menu-sub-area .type-contents:not(:has(.swiper-slide-active .specification-item-block)) {
  top: -117px;
}
.dock-menu-sub-area .type-contents.is-folded,
.dock-menu-sub-area .type-contents.is-folded:not(:has(.swiper-slide-active .specification-item-block)) {
  top: -40px;
}
.dock-menu-sub-area.active .type-contents:not(:has(.swiper-slide-active .specification-item-block)) {
  top: 62px;
}
.dock-menu-sub-area .type-contents.scrolling:not(:has(.swiper-slide-active .specification-item-block)),
.dock-menu-sub-area .type-tab.scrolling,
.dock-menu-sub-area .type-contents.scrolling {
  top: 5px;
}
.dock-menu-sub-area .type-contents .scroll-contents {
  max-height: calc(100dvh - 62px);
  overflow-x: hidden;
  overflow-y: hidden;
  padding-top: 16px;
  box-sizing: border-box;
  border-radius: 24px 24px 0 0;
}

.dock-menu-sub-area .type-tab .fix-bottom-modal-link {
  display: flex;
  justify-content: space-between;
  width: 100%;
  /* padding: 8px 20px 8px; */
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  /* margin: -12px -16px -10px; */
  margin: 0;
  padding: 8px 16px;
}
.dock-menu-sub-area .type-tab .fix-bottom-modal-link::after {
  content: "";
  width: 24px;
  height: 24px;
  background: url("/images/new_renewal/ico_arr_layer_close.png") no-repeat 50% 50%;
  background-size: auto 24px;
  background-image: image-set(
    url("/images/new_renewal/ico_arr_layer_close.webp") type("image/webp"),
    url("/images/new_renewal/ico_arr_layer_close.png") type("image/png")
  );
  transform: translateY(-4%);
}
.dock-menu-sub-area .type-tab .fix-bottom-modal-link .fix-bottom-modal-txt {
  color: #fff;
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
}
.dock-menu-sub-area .type-contents .layer-top {
  position: relative;
}
/* [2025-07-09 kjy] [WPM-11558] 접근성 1차 심사 수정 */
.dock-menu-sub-area .type-contents .layer-top p {
  padding: 12px 40px 12px 16px;
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  /* background: linear-gradient(90deg, #22d26b 0%, #4ea0ff 50%, #0fc7cc 91%); */
  /* background: linear-gradient(90deg, #28b964 0%, #00aa78 50%, #02b4b9 91%);[24.12.13 : lyr] 배경컬러 원상복구 */
  background: linear-gradient(90deg, #08a561 0%, #01a272 50%, #009dac 91%);
  color: #fff;
}
.dock-menu-sub-area .type-contents .btn-layer-open {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  font-size: 1px;
  color: transparent;
  z-index: 10;
  text-align: left;
}
.dock-menu-sub-area .type-contents .btn-layer-open::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 24px;
  height: 24px;
  background: url("/images/new_renewal/ico_arr_layer_close.png") no-repeat 50% 50%;
  background-size: auto 24px;
  background-image: image-set(
    url("/images/new_renewal/ico_arr_layer_close.webp") type("image/webp"),
    url("/images/new_renewal/ico_arr_layer_close.png") type("image/png")
  );
  transform: translateY(-50%);
}
.fix-bottom-modal-menu {
  display: inline-flex;
  padding: 2px;
  border-radius: 20px;
  justify-content: center;
  background: rgba(153, 232, 210, 0.4);
  margin: 0 auto;
  height: 34px;
  box-sizing: border-box;
}
.fix-bottom-modal-menu .btn-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 30px 3px;
}
.fix-bottom-modal-menu .btn-menu span {
  display: inline-block;
  /* padding: 2px 0; */
  color: #111;
  font-size: 16px;
  /* line-height: 1; */
  font-weight: 400;
}
.fix-bottom-modal-menu .btn-menu .ic-tmoney {
  width: 16px;
  margin-right: 4px;
}
.fix-bottom-modal-menu .btn-menu.is-active {
  border-radius: 18px;
  /* background: #fff; */
  color: #111;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 12%);
  background: linear-gradient(90deg, #28b964 0%, #00aa78 50%, #02b4b9 91%);
  color: #fff;
}
.fix-bottom-modal-menu .btn-menu.is-active span {
  font-weight: 700;
  color: #fff;
}
/* [24.12.04 : lyr] 리뉴얼 전 혜택 > fix bottom 메뉴 bottom 위치 조정 */
.renewal_2024 .renew-benefit-fix-bottom-modal {
  bottom: 94px;
}
/* 24.09.25 기존에 있는 class 속성추가 - sayho */
.dock-menu-list.new-menu-list {
  position: relative;
  background: #fff;
  z-index: 2;
  opacity: 1;
}
.dock-menu-list.new-menu-list.is-hide {
  transform: translateY(100%);
}
.dock-menu-list.new-menu-list {
  padding: 12px 4px 20px;
  gap: 9px;
  transition: transform 0.4s ease 0s;
}
.dock-menu-list.new-menu-list.only-tabmenu {
  /* [24.12.03 : lyr] border-radius 주석처리 : 12.12 버전에는 플랫으로 배포 */
  /* border-radius: 24px 24px 0 0; */
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
}
.dock-menu-list.new-menu-list .dock-menu-link {
  box-sizing: border-box;  /* [25.05.27 : oh] */
  height: 62px; /* [25.05.27 : oh] */
  padding: 0 0 6px;
  color: #333;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}
.dock-menu-list.new-menu-list .dock-menu-link::before {
  width: auto;
  height: 36px;
  margin-bottom: 6px;
  background-position: 50% bottom;
  background-size: auto 36px;
}
.dock-menu-list.new-menu-list .dock-menu-item.is-active .dock-menu-link {
  font-weight: 700;
}
.dock-menu-list.new-menu-list .dock-menu-item.type-my .dock-menu-link::before {
  background-image: url(/images/new_renewal/ic_dock_menu_my.svg);
}
.dock-menu-list.new-menu-list .dock-menu-item.type-my.is-active .dock-menu-link::before {
  background-image: url(/images/new_renewal/ic_dock_menu_my_on.svg);
}
.dock-menu-list.new-menu-list .dock-menu-item.type-benefit .dock-menu-link::before {
  background-image: url(/images/new_renewal/ic_dock_menu_benefit.svg);
}
.dock-menu-list.new-menu-list .dock-menu-item.type-benefit.is-active .dock-menu-link::before {
  background-image: url(/images/new_renewal/ic_dock_menu_benefit_on.svg);
}
.dock-menu-list.new-menu-list .dock-menu-item.type-payment .dock-menu-link::before {
  background-image: url(/images/new_renewal/ic_dock_menu_pay.svg);
}
.dock-menu-list.new-menu-list .dock-menu-item.type-payment.is-active .dock-menu-link::before {
  background-image: url(/images/new_renewal/ic_dock_menu_pay_on.svg);
}
.dock-menu-list.new-menu-list .dock-menu-item.type-travel .dock-menu-link::before {
  background-image: url(/images/new_renewal/ic_dock_menu_travel.svg);
}
.dock-menu-list.new-menu-list .dock-menu-item.type-travel.is-active .dock-menu-link::before {
  background-image: url(/images/new_renewal/ic_dock_menu_travel_on.svg);
}
.dock-menu-list.new-menu-list .dock-menu-item.type-all .dock-menu-link::before {
  background-image: url(/images/new_renewal/ic_dock_menu_allmenu.svg);
}
.dock-menu-list.new-menu-list .dock-menu-item.type-all.is-active .dock-menu-link::before {
  background-image: url(/images/new_renewal/ic_dock_menu_allmenu_on.svg);
}
/* [2025.02.12 : lyr] 자산지출 메뉴 추가 */
.dock-menu-list.new-menu-list .dock-menu-item.type-capex .dock-menu-link::before {
  background-image: url(/images/new_renewal/ic_dock_menu_capex.svg);
}
.dock-menu-list.new-menu-list .dock-menu-item.type-capex.is-active .dock-menu-link::before {
  background-image: url(/images/new_renewal/ic_dock_menu_capex_on.svg);
}
/* // [2025.02.12 : lyr] 자산지출 메뉴 추가 */
.my-use-contents {
  display: block;
  padding: 0 16px;
}
.type-contents .my-use-top {
  position: relative;
  font-size: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
}
.type-contents .my-use-top .date {
  display: inline-flex;
  font-size: 16px;
  align-items: center;
  line-height: 1;
}
.type-contents .my-use-top::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  background: transparent;
}
.type-contents .my-use-top .date strong {
  margin-right: 4px;
  font-weight: 500;
}
.type-contents .my-use-top .date > em {
  display: inline-block;
  padding: 4px 6px 3px;
  background: #08aa54;
  border-radius: 10px;
  margin: 0 0 0 6px;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  font-weight: 400;
  font-style: normal;
  vertical-align: top;
}
.type-contents .my-use-top .date > em.type-gray {
  color: #424242;
  background: #eaeff4;
}
.type-contents .my-use-top .date .font-normal {
  font-weight: normal;
}
.type-contents .my-use-top .date-tab-box {
  display: none;
}
.type-contents .my-use-top a.type-link {
  position: relative;
  color: #111;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  flex: 0 0 auto;
}
.type-contents .my-use-top a.type-link + a.type-link {
  margin-left: 30px;
}
.type-contents .my-use-top a.type-link + a.type-link::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -15px;
  display: inline-block;
  height: 12px;
  width: 1px;
  background: #b1b7c4;
}
.type-contents .my-use-top a.type-link.active {
  font-weight: 700;
}
.dock-menu-sub-area
  .main-btm-layer-slide:has(.main-btm-layer-slide-controller:has(.swiper-pagination-bullet:only-child)) {
  padding-bottom: 20px;
}
.main-btm-layer-slide-controller {
  display: none;
}
.main-btm-layer-slide-controller .swiper-button-prev,
.main-btm-layer-slide-controller .swiper-button-next,
.main-btm-layer-slide-controller .swiper-pagination {
  position: static;
}
.main-btm-layer-slide-controller .swiper-button-prev,
.main-btm-layer-slide-controller .swiper-button-next {
  display: none;
}
.main-btm-layer-slide-controller .swiper-pagination-bullets {
  margin: 20px 0;
  padding: 4px 0;
}
.main-btm-layer-slide.topSlide01 .main-btm-layer-slide-controller.is-hide .swiper-pagination-bullets {
  margin: 10px 0;
}
/* .main-btm-layer-slide-controller .swiper-pagination-bullets .swiper-pagination-bullet {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border: 0;
  border-radius: 3px;
  background: #999ea0;
  margin: 0;
  transition: all 0.2s;
  scroll-snap-align: start;
}
.main-btm-layer-slide-controller .swiper-pagination-bullets .swiper-pagination-bullet + .swiper-pagination-bullet {
  margin: 0 0 0 5px;
}
.main-btm-layer-slide-controller .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 24px;
  background: #111;
} */
.dock-menu-sub-area .main-btm-section-box .main-btm-layer-slide .main-btm-layer-slide-controller .paginationbox {
  /* position: relative;
  width: 79px;
  margin: 0 auto;
  overflow: hidden; */
  /* scroll-snap-type: x proximity; */
}
/* .dock-menu-sub-area .main-btm-section-box .main-btm-layer-slide .main-btm-layer-slide-controller .paginationbox::before,
.dock-menu-sub-area .main-btm-section-box .main-btm-layer-slide .main-btm-layer-slide-controller .paginationbox::after {
  content: "";
  position: absolute;
  top: 0;
  display: block;
  width: 6px;
  height: 6px;
  z-index: 10;
} */
/* [2025-06-23 KJH] [WPM-11558] 접근성 스와이퍼 페이지네이션 버튼 크기 */
.main-btm-layer-slide-controller .swiper-pagination-bullets .swiper-pagination-bullet {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 0;
  border-radius: 0;
  scroll-snap-align: start;
  transition: width 0.2s;
}
/* [2025-07-21 kjy] [WPM-117770] APP 1차 접근성심사 명도대비 수정 */
.main-btm-layer-slide-controller .swiper-pagination-bullets .swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: #888888;
  border-radius: 3px;
  transition: width 0.2s, background-color 0.2s;
}
.main-btm-layer-slide-controller .swiper-pagination-bullets .swiper-pagination-bullet + .swiper-pagination-bullet {
  margin: 0;
}
.main-btm-layer-slide-controller .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 36px;
  background-color: transparent; /* [2025-08-14 kho] 접근성 수정 */
}
.main-btm-layer-slide-controller .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  width: 24px;
  background-color: #111;
}
.dock-menu-sub-area .main-btm-section-box .main-btm-layer-slide .main-btm-layer-slide-controller .paginationbox {
  position: relative;
  width: 120px;
  margin: 0 auto;
  overflow: hidden;
  /* scroll-snap-type: x proximity; */
}
.dock-menu-sub-area .main-btm-section-box .main-btm-layer-slide .main-btm-layer-slide-controller .paginationbox::before,
.dock-menu-sub-area .main-btm-section-box .main-btm-layer-slide .main-btm-layer-slide-controller .paginationbox::after {
  content: "";
  position: absolute;
  top: 0;
  display: block;
  width: 16px;
  aspect-ratio: 1;
  z-index: 10;
}
/* // [2025-06-23 KJH] [WPM-11558] 접근성 스와이퍼 페이지네이션 버튼 크기 */

.dock-menu-sub-area
  .main-btm-section-box
  .main-btm-layer-slide
  .main-btm-layer-slide-controller
  .paginationbox
  .swiper-pagination {
  /* display:flex; */
  display: block;
  /* flex-wrap: nowrap; */
  overflow-x: auto;
  padding: 0 12px;
  text-align: center;
  scrollbar-width: none;
  -ms-overflow-style: none;
  box-sizing: border-box;
  white-space: nowrap;
}


.dock-menu-sub-area
  .main-btm-section-box
  .main-btm-layer-slide
  .main-btm-layer-slide-controller
  .paginationbox::before {
  left: 0;
  background: -moz-linear-gradient(
    left,
    rgba(244, 246, 248, 1) 0%,
    rgba(244, 246, 248, 1) 5%,
    rgba(244, 246, 248, 0) 95%,
    rgba(244, 246, 248, 0) 100%
  );
  background: -webkit-linear-gradient(
    left,
    rgba(244, 246, 248, 1) 0%,
    rgba(244, 246, 248, 1) 5%,
    rgba(244, 246, 248, 0) 95%,
    rgba(244, 246, 248, 0) 100%
  );
  background: linear-gradient(
    to right,
    rgba(244, 246, 248, 1) 0%,
    rgba(244, 246, 248, 1) 5%,
    rgba(244, 246, 248, 0) 95%,
    rgba(244, 246, 248, 0) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
}
.dock-menu-sub-area .main-btm-section-box .main-btm-layer-slide .main-btm-layer-slide-controller .paginationbox::after {
  right: 0;
  background: -moz-linear-gradient(
    right,
    rgba(244, 246, 248, 1) 0%,
    rgba(244, 246, 248, 1) 5%,
    rgba(244, 246, 248, 0) 95%,
    rgba(244, 246, 248, 0) 100%
  );
  background: -webkit-linear-gradient(
    right,
    rgba(244, 246, 248, 1) 0%,
    rgba(244, 246, 248, 1) 5%,
    rgba(244, 246, 248, 0) 95%,
    rgba(244, 246, 248, 0) 100%
  );
  background: linear-gradient(
    to left,
    rgba(244, 246, 248, 1) 0%,
    rgba(244, 246, 248, 1) 5%,
    rgba(244, 246, 248, 0) 95%,
    rgba(244, 246, 248, 0) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
}
.dock-menu-sub-area
  .main-btm-section-box
  .main-btm-layer-slide
  .main-btm-layer-slide-controller
  .paginationbox.pagination-center
  .swiper-pagination {
  /* justify-content:center; */
}
.dock-menu-sub-area
  .main-btm-section-box
  .main-btm-layer-slide
  .main-btm-layer-slide-controller
  .paginationbox.pagination-center
  .swiper-pagination
  .swiper-pagination-bullet {
  display: inline-block;
}
.main-btm-section-box .main-btm-layer-slide {
  background: #f4f6f8;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 5px 10px 0px rgba(49, 119, 115, 0.25);
  position: relative;
  z-index: 1;
}
.main-btm-section-box .main-btm-layer-slide .swiper-slide {
  /* padding: 20px 20px 78px; */
  padding: 20px 20px 66px;
  box-sizing: border-box;
}
.main-btm-section-box .main-btm-layer-slide .swiper-slide:only-child {
  padding: 20px 20px 86px;
  box-sizing: border-box;
}
.main-btm-section-box .main-btm-layer-slide-controller .swiper-pagination-bullets {
  margin-top: 0;
}
.my-use-contents .my-payment-box {
  position: relative;
  margin-top: 10px;
}
.my-use-contents .my-payment-box::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  background: transparent;
}
.my-use-contents .my-payment-box .link-txt01 {
  display: flex;
  font-size: 2.8rem;
  line-height: 1;
  font-weight: 700; /* 24.12.12 수정 500=>700 수정 - sayho */
  align-items: center;
}
.dock-menu-sub-area.active .my-use-contents .my-payment-box .link-txt01 {
  font-size: 2.4rem;
}
.my-use-contents .my-payment-box .link-txt01::after {
  content: "";
  display: none;
  width: 12px;
  height: 12px;
  background: url(/images/new_renewal/ic_arrow_r_01.svg) no-repeat center / 12px;
  background-size: 12px;
  margin-left: 3px;
}
.renewal_2024 .dock-menu-sub-area .specification-item-block {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  margin-top: 12px;
}
.my-use-contents .my-payment-box .link-txt02 {
  display: flex;
  font-size: 16px;
  line-height: 1;
  align-items: center;
  white-space: nowrap;
}
.my-use-contents .my-payment-box .link-txt02::after {
  content: "";
  display: none;
  width: 12px;
  height: 12px;
  background: url(/images/new_renewal/ic_arrow_r_01.svg) no-repeat top left / 12px;
  background-size: 12px;
  margin-left: 3px;
}
.renewal_2024 .my-payment-box .specification-name {
  position: relative;
  max-width: 100px;
  padding-right: 16px;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: keep-all;
  white-space: nowrap;
  font-size: 16px;
  line-height: 1;
}
.renewal_2024 .my-payment-box .specification-name::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 1.5px;
  height: 12px;
  background-color: #666;
}
.main-btm-section-box {
  padding: 0 16px;
}
.main-btm-section-box .new-logo-image {
  width: 46px;
  margin-top: -2px;
}
.main-btm-section-box .new-mypage-section-head {
  margin-bottom: 20px;
}
.main-btm-section-box .new-mypage-section-head:has(.btn-cardlayer) {
  height: 18px;
}
.renewal_2024 .main-btm-section-box.section_recent_usage_history .type-nodata {
  margin-bottom: 50px;
}
.renewal_2024 .main-btm-section-box.section_recent_usage_history .usage-default-right .new-usage-default-sum {
  justify-content: flex-end;
}
/* 24.11.26 카드선택 추가 - sayho */
.main-btm-section-box .new-mypage-section-head .btn-cardlayer {
  display: flex;
  position: relative;
  padding: 8px 6px;
  color: #111;
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
  align-items: center;
  gap: 4px;
}
.main-btm-section-box .new-mypage-section-head .btn-cardlayer::before {
  content: "";
  display: block;
  width: 19px;
  height: 19px;
  background: url(/images/new_renewal/ic_card_layer.svg) no-repeat center / 19px;
}
.contents-wrap:has(.dock-menu-sub-area) {
  overflow: hidden;
}
.contents-wrap:has(.dock-menu-sub-area.active) {
  z-index: 1000;
}
.contents-wrap .dock-menu-sub-area {
  position: fixed;
  bottom: 94px;
  transition: 0.7s all;
  z-index: 9;
}
.contents-wrap .dock-menu-sub-area.is-native,
.contents-wrap .dock-menu-sub-area.btm0 {
  bottom: 0;
}
.contents-wrap .dock-menu-sub-area.active {
  bottom: 0;
  z-index: 20;
}
/* //24.11.26 카드선택 추가 - sayho */
.main-btm-section-box .new-usage-default-title {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 18px;
  margin-top: 0;
}
.main-btm-section-box .usage-default-etc {
  margin-top: 8px;
  margin-left: 10px;
}
.main-btm-section-box .usage-default-etc-item {
  line-height: 16px;
}
.main-btm-section-box .usage-default-etc-item .del-text {
  line-height: 16px;
}
.main-btm-section-box .new-usage-default-etc-item {
  padding-left: 0;
  margin-left: 0;
  font-size: 13px;
  line-height: 16px;
  font-weight: 400;
}
.main-btm-section-box .usage-default-sum,
.main-btm-section-box .new-usage-default-sum {
  margin-top: 0;
  line-height: 1;
  font-size: 1.8rem;
}
.btm-payment-btns {
  display: flex;
  gap: 8px;
  padding: 0 16px;
}
.btm-payment-btns li {
  flex: 1 1 auto;
}
.btm-payment-btns .ui-basic-button {
  display: block;
  padding: 12px 0;
  min-height: auto;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
}
.btm-payment-btns .ui-basic-button span {
  display: block;
  margin-top: 5px;
  color: #69777e;
  font-weight: 400;
}
/* [2025-05-09 KJH] [WPM-11101] 링크 버튼 수정 */
.btmPayment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-inline: 16px;
}
.btmPayment-item-col3 {
  width: calc((100% - 16px) / 3);
}
.btmPayment-item-col2 {
  width: calc((100% - 8px) / 2);
}
.btmPayment-item-col1 {
  width: 100%;
}
.btmPayment-btn {
  display: block;
  min-height: auto;
  padding-block: 12px;
  align-content: center;
  background-color: #fff;
  color: var(--basic);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  border: 1px solid var(--basic);
  border-radius: 6px;
}
/* // [2025-05-09 KJH] [WPM-11101] 링크 버튼 수정 */
.dock-menu-sub-area hr {
  border-color: #e9ecef;
  border-width: 0 0 1px 0;
  margin: 38px 16px;
}
.my-card-contents {
  display: flex;
  align-items: flex-start;
  flex: 0 0 auto;
  /* flex-wrap: wrap; */
  max-width: 100%;
}
.my-card-contents.is-loading a:not(:has(.is-skeleton-item)) {
  display: none;
}
.my-card-contents .card-image {
  width: 78px;
  -webkit-transform: rotate(90deg) translateY(-100%);
  transform: rotate(90deg) translateY(-100%);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  flex: 0 0 auto;
}
.my-card-contents .card-image .card-image-inner {
  background: #fff;
}
.my-card-contents .card-cont-right {
  text-align: left;
  flex: 1 1 auto;
  /* width: calc(100% - 92px); */
  overflow: hidden;
}
.my-card-contents .card-name {
  display: block;
  color: #536067;
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.my-card-contents .card-text {
  display: block;
  margin-top: 16px;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
}
.my-card-contents .card-payment {
  display: block;
  margin-top: 8px;
  font-size: 24px;
  line-height: 1;
  font-weight: 500;
}
.my-card-contents .card-payment strong {
  display: inline-block;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
}
.main-btm-section-box .btns-cardoption {
  position: relative;
  /* width: 100%; */
  margin-top: -38px;
  padding: 0 20px;
  z-index: 1;
  transform: translateY(-46px);
}
.main-btm-section-box:has(.swiper-pagination-bullet:only-child) .btns-cardoption {
  position: relative;
  /* width: 100%; */
  margin-top: -12px;
  padding: 0 20px;
  z-index: 1;
  transform: translateY(-46px);
}
/* [2025-07-16 kjy] [WPM-11777] APP 접근성 1차심사 수정 */
.main-btm-section-box .swiper-wrapper + .btns-cardoption {
  margin-top: -36px;
  transform: translateY(-10px);
}
/* [2025-07-16 kjy] [WPM-11777] APP 접근성 1차심사 수정 */
.main-btm-section-box:has(.swiper-pagination-bullet:only-child) .swiper-wrapper +.btns-cardoption {
  margin-top: -38px;
  transform: translateY(-20px);
}
.main-btm-section-box .btns-cardoption ul {
  display: flex;
  gap: 8px;
}
.main-btm-section-box .btns-cardoption ul li {
  flex: 1;
}
.main-btm-section-box .btns-cardoption ul li a {
  display: block;
  padding: 10px 0;
  border: 1px solid #000;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  font-weight: 500;
}
.main-btm-section-box .card-info {
  margin-top: -20px;
  padding: 40px 20px 24px;
  background: #e6fbfa;
  border-radius: 0 0 20px 20px;
}
.main-btm-section-box:has(.swiper-pagination-bullet:only-child) .card-info {
  margin-top: -46px;
}

/* [2025-07-16 kjy] [WPM-11777] APP 접근성 1차심사 수정 */
.main-btm-section-box:has(.swiper-pagination-bullet:only-child):has(.swiper-wrapper +.btns-cardoption) .card-info {
  margin-top: -20px;
}

.main-btm-section-box .card-info .card-info-link {
  display: block;
}
.main-btm-section-box .card-info .card-info-list .card-info-list-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  align-items: center;
}
.main-btm-section-box .card-info .card-info-list .card-info-list-item:last-child {
  margin-bottom: 20px;
}
.main-btm-section-box .card-info .card-info-list .card-info-list-item span {
  line-height: 20px;
}
.main-btm-section-box .card-info .info-txt {
  display: flex;
  color: #111;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  align-items: center;
}
.main-btm-section-box .card-info .sum-txt {
  font-size: 18px;
  font-weight: 400;
}
.main-btm-section-box .card-info .sum-txt em {
  font-style: normal;
  font-weight: 400;
}
.main-btm-section-box .card-info ul li:first-child .sum-txt,
.main-btm-section-box .card-info ul li:first-child .sum-txt em {
  display: flex;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  color: #111;
  align-items: center;
}
.main-btm-section-box .card-info .info-txt .total-txt {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  background: #111;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  color: #fff;
  vertical-align: top;
}
.main-btm-section-box .card-info .link-txt {
  display: block;
  padding-right: 15px;
  text-align: right;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  background: url(/images/new_renewal/ic_arrow_r_01.svg) no-repeat right / 12px;
  background-size: 12px 12px;
}
.bnts-customer {
  margin-top: 12px;
}
.bnts-customer ul {
  display: flex;
}
.bnts-customer ul li {
  flex: 1;
}
.bnts-customer ul li a {
  display: block;
  padding: 11px 0;
  color: #000;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  font-weight: 400;
}
.bnts-customer ul li a i {
  display: block;
  width: 44px;
  margin: 0 auto 3px;
}
.bnts-customer ul li a i img {
  width: 100%;
}
.bnts-customer ul li a br {
  display: none;
}
.btm-layer-banner {
  margin-top: 30px;
}
.btm-layer-banner a img {
  width: 100%;
}
.btm-layer-menu {
  margin: 0 -16px;
  overflow: hidden;
}
.btm-layer-menu ul {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 8px;
  padding: 0 16px;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;
}
.btm-layer-menu ul li {
  flex: 0 0 auto;
  width: 100px;
  scroll-snap-align: start;
}
.btm-layer-menu ul li a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 120px;
  padding: 15px 15px 14px;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 500;
  border-radius: 12px;
  box-sizing: border-box;
}
.btm-layer-menu ul li a.menu-bg-yellow {
  background: #fff7d5;
}
.btm-layer-menu ul li a.menu-bg-red {
  background: #ffeaee;
}
.btm-layer-menu ul li a.menu-bg-purple {
  background: #ececff;
}
.btm-layer-menu ul li a.menu-bg-green {
  background: #e1fedc;
}
.btm-layer-menu ul li a i {
  display: block;
  text-align: right;
}
.btm-layer-menu ul li a i img {
  height: 48px;
}
@media (max-width: 359px) {
  .bnts-customer ul li a br {
    display: inline;
  }
  .type-contents .new-logo-image {
    display: none;
  }
  .type-contents .new-usage-default-title,
  .main-btm-section-box .usage-default-etc {
    margin-left: 0;
  }
  .dock-menu-list.new-menu-list .dock-menu-link {
    font-size: 12px;
  }
}
.dock-menu-sub-area .btm-bnr-contents {
  position: absolute;
  bottom: 0;
  width: 100%;
  transition: 0.7s transform;
  transform: translateY(0);
}
/* .dock-menu-sub-area .btm-bnr-contents::after {
  content: "";
  display: block;
  inset: auto 0 -1px 0;
  height: 1px;
  background-color: #ffffff;
} */
.dock-menu-sub-area .btm-bnr-contents.is-hide,
.dock-menu-sub-area .btm-bnr-contents.scrolling {
  transform: translateY(100%);
}
.dock-menu-sub-area .btm-bnr-contents .bnr-img {
  display: block;
  height: 100%;
}
.dock-menu-sub-area .btm-bnr-contents .bnr-img img {
  width: 100%;
}
.dock-menu-sub-area .btm-bnr-contents .btm-bnr-txtbox {
  width: 100%;
}
.dock-menu-sub-area .btm-bnr-contents .btns-close-layer {
  position: absolute;
  right: 10px;
  bottom: 14.27vw;
  display: block;
  width: 40px;
  height: 40px;
  background: url(/images/new_renewal/ico-header-close_white.svg) no-repeat center / 18px auto;
  font-size: 1px;
  color: transparent;
}
.dock-menu-sub-area .btm-bnr-contents .btns-close-layer.type-black {
  background: url(/images/new_renewal/ico-header-close_black.svg) no-repeat center / 18px auto;
}
.dock-menu-sub-area.active .type-contents .mypage-section-title-link02 {
  font-size: 1.8rem;
  padding-right: 16px;
  /* background: url("/images/contents/ic_arrow_r_03.png") no-repeat 100% 50% / 12px; */
  background: url(/images/new_renewal/ic_arrow_r_01.svg) no-repeat right center / 12px;
  line-height: 1;
}

/* 24.10.08 레이어 오픈 - sayho */
.dock-menu-sub-area.active {
  bottom: 0;
  height: 100dvh;
  background: transparent;
}
.dock-menu-sub-area.active .main-btm-layer-contents {
  /* display: block; */
  opacity: 1;
}
.dock-menu-sub-area::before {
  content: "";
  position: fixed;
  left: 0;
  top: -100vh;
  right: 0;
  bottom: 0;
  display: block;
  background: rgba(31, 37, 49, 0.6);
  visibility: hidden;
  opacity: 0;
  transition: 0.7s all;
}
.dock-menu-sub-area.active::before {
  visibility: visible;
  opacity: 1;
}
.dock-menu-sub-area.active .type-tab {
  top: -53px;
}
.dock-menu-sub-area.active .type-contents {
  background: #fff;
  position: absolute;
  left: 0;
  width: 100%;
  top: 62px;
}
.dock-menu-sub-area.active .my-use-contents .my-payment-box {
  margin-top: 20px;
}
.dock-menu-sub-area.active .type-contents .layer-top p {
  display: none;
}
.dock-menu-sub-area.active .type-contents .scroll-contents {
  padding: 40px 0 40px;
  background: none;
  overflow-y: auto;
}
.dock-menu-sub-area.active .type-contents .btn-layer-open {
  position: absolute;
  height: 40px;
  top: 0;
  right: 0;
  /* bottom: calc(100vh - 140px); */
  /* bottom: calc(100dvh - 40px); */
  bottom: auto;
  transform: rotate(0);
  width: 100%;
  background: #fff;
  border-radius: 24px 24px 0 0;
}
.dock-menu-sub-area.active .type-contents .btn-layer-open::after {
  left: auto;
  right: 16px;
  transform: translate(0, -50%) rotate(180deg);
  background: url(/images/new_renewal/ico_arr_layer_open.png) no-repeat 50% 50% / auto 24px;
}
.dock-menu-sub-area.active .type-contents .my-use-top .date {
  font-size: 1.8rem;
  line-height: 1;
}
.dock-menu-sub-area.active .type-contents .my-use-top::after {
  display: none;
}
.dock-menu-sub-area .main-btm-layer-slide.topSlide01 {
  margin-bottom: 20px;
}
.dock-menu-sub-area.active .main-btm-layer-slide-controller {
  display: flex;
}
.dock-menu-sub-area.active .main-btm-layer-slide-controller:has(.swiper-pagination-bullet:only-child) {
  display: none;
}
.dock-menu-sub-area.active .main-btm-layer-slide-controller .swiper-pagination {
  z-index: 0;
}
.dock-menu-sub-area.active:has(.main-btm-layer-slide-controller:has(.swiper-pagination-bullet:only-child))
  .main-btm-layer-slide {
  padding-bottom: 8px;
}
.dock-menu-sub-area.active .type-contents .my-use-top .date-tab-box {
  display: flex;
  align-items: center;
}
.dock-menu-sub-area.active .my-use-contents .my-payment-box .link-txt01 {
  font-weight: 700;
}
.dock-menu-sub-area.active .my-use-contents .my-payment-box .link-txt01::after,
.dock-menu-sub-area.active .my-use-contents .my-payment-box .link-txt02::after {
  display: inline-block;
}
.dock-menu-sub-area.active .my-use-contents .my-payment-box .link-txt01.non-icon::after,
.dock-menu-sub-area.active .my-use-contents .my-payment-box .link-txt02.non-icon::after,
.renewal_2024 .my-payment-box .specification-name.non-icon::after,
.dock-menu-sub-area.active .my-use-contents .my-payment-box .specification-name.non-icon::after {
  display: none;
}
.dock-menu-sub-area.active .my-use-contents .my-payment-box::after {
  display: none;
}
/* 24.10.31 명세서 스켈레톤 */
.my-card-contents.is-skeleton .card-image .card-image-inner {
  opacity: 0;
}
/* [24.11.13 : lyr] 스켈레톤 추가 */
.my-use-contents .my-payment-box .link-txt01.is-loading,
.renewal_2024 .dock-menu-sub-area .specification-item-block.is-loading {
  display: none;
}
.renewal_2024 .dock-menu-sub-area .specification-item-block.is-skeleton-item,
.dock-menu-sub-area.active .my-use-contents .my-payment-box .link-txt01.is-skeleton-item {
  display: none;
}
.renewal_2024 .my-use-contents .my-payment-box .specification-item-block.is-skeleton-item.is-loading,
.renewal_2024 .my-use-contents .my-payment-box .link-txt01.is-skeleton-item.is-loading,
.renewal_2024 .my-use-contents .my-payment-box .link-txt02.is-skeleton-item.is-loading {
  position: relative;
  display: flex;
  height: 24px;
  border-radius: 20px;
  overflow: hidden;
  background-color: transparent;
}
.renewal_2024 .my-use-contents .my-payment-box .specification-item-block.is-skeleton-item.is-loading::before,
.renewal_2024 .my-use-contents .my-payment-box .link-txt01.is-skeleton-item.is-loading::before,
.renewal_2024 .my-use-contents .my-payment-box .link-txt02.is-skeleton-item.is-loading::before {
  content: "";
  position: absolute;
  left: -100%;
  transform: translateY(-50%);
  top: 50%;
  display: block;
  width: 100%;
  height: calc(100vw * 25 / 100);
  filter: blur(20px);
  background-color: #eee;
  animation: skeletonAni 3s linear infinite;
}
.renewal_2024 .my-use-contents .my-payment-box .specification-item-block.is-skeleton-item::before,
.renewal_2024 .my-use-contents .my-payment-box .specification-item-block.is-skeleton-item.is-loading .link-txt02::after,
.renewal_2024 .my-use-contents .my-payment-box .link-txt01.is-skeleton-item::before,
.renewal_2024 .my-use-contents .my-payment-box .link-txt02.is-skeleton-item::before {
  display: none;
}
.renewal_2024
  .my-use-contents
  .my-payment-box
  .specification-item-block.is-skeleton-item.is-loading
  .link-txt02::after {
  display: none;
}
/* // end .. [24.11.13 : lyr] 스켈레톤 추가 */
.dock-menu-sub-area.active .my-use-contents .my-payment-box .link-txt02.is-skeleton-item {
  display: flex !important;
  height: 24px;
}
/* [24.11.15 : lyr] 스켈레톤 추가 */
.dock-menu-sub-area.active .my-use-contents .my-payment-box .link-txt02.is-skeleton-item {
  display: flex;
  height: 16px;
  position: relative;
  overflow: hidden;
  background-color: transparent;
}
.dock-menu-sub-area.active .my-use-contents .my-payment-box .link-txt02.is-skeleton-item::before {
  content: "";
  position: absolute;
  left: -100%;
  transform: translateY(-50%);
  top: 50%;
  display: block;
  width: 100%;
  height: calc(100vw * 25 / 100);
  filter: blur(20px);
  background-color: #eee;
  animation: skeletonAni 3s linear infinite;
}
/* // end .. [24.11.15 : lyr] 스켈레톤 추가 */
.dock-menu-sub-area.active .my-use-contents .my-payment-box .is-skeleton-item.link-txt01::after,
.dock-menu-sub-area.active .my-use-contents .my-payment-box .is-skeleton-item.link-txt02::after {
  display: none;
}
.my-card-contents.is-skeleton > * {
  /* display: none !important; */
}
.my-card-contents .is-skeleton-item {
  display: none;
}
.my-card-contents .is-skeleton-item.is-loading {
  display: block;
}
/* [24.11.15 : lyr] 스켈레톤 추가 */
.my-card-contents .is-skeleton-item .card-image-inner {
  /* background: #eee; */
  border-radius: 4px;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: var(--skeleton-bg-color);
}
.my-card-contents .is-skeleton-item .card-image-inner::before {
  content: "";
  position: absolute;
  top: 100%;
  transform: translateY(0%);
  left: -20px;
  display: block;
  width: 150%;
  height: 100%;
  filter: blur(10px);
  background-color: #e8ebed;
  animation: skeletonAni2 3s linear infinite;
}
.my-card-contents > .is-skeleton-item .card-name,
.my-card-contents > .is-skeleton-item .card-text {
  height: 14px;
  /* background: #eee; */
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  /* background-color: transparent; */
  background: var(--skeleton-bg-color);
}
.my-card-contents > .is-skeleton-item .card-name::before,
.my-card-contents > .is-skeleton-item .card-text::before {
  content: "";
  position: absolute;
  left: -100%;
  transform: translateY(-50%);
  top: 50%;
  display: block;
  width: 100%;
  height: calc(100vw * 25 / 100);
  filter: blur(20px);
  background-color: #e8ebed;
  animation: skeletonAni 3s linear infinite;
}
.my-card-contents > .is-skeleton-item .card-payment {
  height: 24px;
  background: #eee;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  background-color: transparent;
}
.my-card-contents > .is-skeleton-item .card-payment::before {
  content: "";
  position: absolute;
  left: -100%;
  transform: translateY(-50%);
  top: 50%;
  display: block;
  width: 100%;
  height: calc(100vw * 25 / 100);
  filter: blur(20px);
  background-color: #e8ebed;
  animation: skeletonAni 3s linear infinite;
}
/* // end .. [24.11.15 : lyr] 스켈레톤 추가 */
.main-btm-section-box .card-info.is-loading ul {
  display: none;
}
.main-btm-section-box .card-info .is-skeleton-item {
  display: none;
}
.main-btm-section-box .card-info.is-loading ul.is-skeleton-item {
  display: block;
}
/* [24.11.15 : lyr] 스켈레톤 추가 */
.main-btm-section-box .card-info ul.is-skeleton-item .sum-txt {
  height: 18px;
  width: 45px;
  background: #eee;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  background-color: transparent;
}
.main-btm-section-box .card-info ul.is-skeleton-item .sum-txt::before {
  content: "";
  position: absolute;
  left: -100%;
  transform: translateY(-50%);
  top: 50%;
  display: block;
  width: 100%;
  height: calc(100vw * 25 / 100);
  filter: blur(20px);
  background-color: #eee;
  animation: skeletonAni 3s linear infinite;
}
/* // end ... [24.11.15 : lyr] 스켈레톤 추가 */
/* //24.09.25 레이아웃 개편 - sayho */

/* [24.11.01: lyr] [WPM-8513] 하나페이 주요화면 개편 (리뉴얼 클래스 : .type-renewal) */
/* [24.12.10 : lyr] 전체메뉴 css 정리 (레이어형, 페이지형) */
.renewal_2024 .gnb-name-card {
  padding: 10px 16px;
}
.renewal_2024 .gnb-name-card-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 26px;
  font-size: 1.3rem;
  color: #111;
}
.renewal_2024 .gnb-head .menu-nav-bar,
.renewal_2024 .page-gnb-head .menu-nav-bar {
  padding-right: 16px;
}
.renewal_2024 .gnb-head .menu-nav-bar-opener,
.renewal_2024 .page-gnb-head .menu-nav-bar-opener {
  width: 54px;
  background: linear-gradient(90deg, transparent 0%, #fff 50%);
}
.renewal_2024 .gnb-head .menu-nav-bar-opener::before,
.renewal_2024 .page-gnb-head .menu-nav-bar-opener::before {
  left: inherit;
  right: 16px;
  background: url("/images/new_renewal/ico_unfold.png") no-repeat center / 14px 14px;
  background-image: image-set(
    url("/images/new_renewal/ico_unfold.webp") type("image/webp"),
    url("/images/new_renewal/ico_unfold.png") type("image/png")
  );
}
.renewal_2024 .gnb-head .menu-nav-layer-doc,
.renewal_2024 .page-gnb-head .menu-nav-layer-doc {
  padding: 20px 16px;
}
.renewal_2024 .gnb-head .menu-nav-layer-list,
.renewal_2024 .page-gnb-head .menu-nav-layer-list {
  margin: -18px 0 0 -16px;
}
.renewal_2024 .gnb-head .menu-nav-layer-item,
.renewal_2024 .page-gnb-head .menu-nav-layer-item {
  padding: 18px 0 0 16px;
}
.renewal_2024 .gnb-head .menu-nav-bar-link,
.renewal_2024 .page-gnb-head .menu-nav-bar-link {
  margin-left: 16px;
}
.renewal_2024 .gnb-head .menu-nav-bar-item:first-child .menu-nav-bar-link,
.renewal_2024 .page-gnb-head .menu-nav-bar-item:first-child .menu-nav-bar-link {
  margin-left: 16px;
  padding-left: 0;
}
.renewal_2024 .menu-group {
  margin-top: 50px;
}
.renewal_2024 .menu-group .menu-title {
  line-height: 1;
  color: #3f3f3f;
}
.renewal_2024 .menu-group.new_menu {
  margin: 0 -16px 0;
  padding: 50px 16px 0;
}
.renewal_2024 .menu-group.type-bg-gray {
  margin-left: -16px;
  margin-right: -16px;
  padding: 35px 16px;
}
.renewal_2024 .menu-top {
  margin: 0;
  padding: 0;
  background: linear-gradient(0deg, #fff 0%, #fff 100%);
}
.renewal_2024 .menu-top-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 -16px;
  padding: 20px 16px;
  background-color: #f4f6f8;
}
.renewal_2024 .menu-top .slide-banner {
  margin: 0;
  padding-bottom: 0;
}
.renewal_2024 .menu-top .slide-banner .swiper-wrapper {
  width: 100%;
}
.renewal_2024 .menu-top .slide-banner .slide-banner-controller {
  bottom: 0;
  right: 0;
  transform: none;
}
.renewal_2024 .menu-top .recent_menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 30px;
}
.renewal_2024 .menu-top .recent_menu .recent_menu-title {
  font-size: 1.3rem;
  font-weight: 500;
  color: #3f3f3f;
}
.renewal_2024 .menu-top .recent_menu .recent_menu-area {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  margin: 0 -16px;
  padding: 0 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: 16px;
}
.renewal_2024 .menu-top .recent_menu .recent_menu-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 34px;
  padding: 6px 14px;
  font-size: 1.4rem;
  line-height: 1;
  overflow: hidden;
  border-radius: 20px;
  box-sizing: border-box;
  scroll-snap-align: start;
  border: 1px solid #a1a1a1;
  color: #111;
}
.renewal_2024 .contents-wrap.type-renewal .ui-input-block.type-search .ui-input {
  border: 1px solid #5e5e5e;
}
.renewal_2024 .contents-wrap.type-renewal .ui-input-block.type-search .ui-input-search {
  background: url("/images/new_renewal/ico_intengrated_search.png") no-repeat 3px center / 22px 22px;
  background-image: image-set(
    url("/images/new_renewal/ico_intengrated_search.webp") type("image/webp"),
    url("/images/new_renewal/ico_intengrated_search.png") type("image/png")
  );
}
/* 페이지형 전체메뉴 */
.renewal_2024 .contents-wrap.type-renewal .page-contents {
  padding-right: 16px;
  padding-left: 16px;
}
/* // 페이지형 전체메뉴 */
/* 레이어형 전체메뉴 */
.renewal_2024.layer-wrap.layer-gnb {
  padding: 30px 16px 35px;
  box-sizing: border-box;
}
.renewal_2024.layer-wrap.layer-gnb .gnb-head .header {
  padding: 13px 16px;
}
.renewal_2024.layer-wrap.layer-gnb .gnb-name-card {
  padding: 10px 16px;
}
.renewal_2024.layer-wrap.layer-gnb .gnb-body-doc {
  padding: 0 16px;
}
/* // 레이어형 전체메뉴 */

/* 마이메인 리뉴얼 (.type-main-renewal) */
.renewal_2024 * .js-masking-item {
  display: flex !important;
}
.renewal_2024 * .js-masking-item-before {
  display: none !important;
}
.renewal_2024 *.is-masking .js-masking-item {
  display: none !important;
}
.renewal_2024 *.is-masking .js-masking-item-before {
  display: flex !important;
}
/* 버튼 그룹 공통 (.btn_list) */
.btn_list-wrap {
  width: 100%;
}
.btn_list {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.btn_list .btn_list-items {
  width: 100%;
}
.btn_list .btn_link {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.btn_list .btn_link-text {
  position: relative;
  z-index: 1;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 400;
  color: #111;
}
.btn_list.unflex {
  justify-content: flex-start;
}
.btn_list.unflex .btn_list-items {
  width: auto;
}
.btn_list.type_graborder .btn_link {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 34px;
  padding: 0 14px;
  border-radius: 20px;
  background-color: #ddd;
}
.btn_list.type_graborder.type_graborder-color1 .btn_link {
  background: linear-gradient(90deg, #37d0d7 0%, #be34a9 100%);
}
.btn_list.type_graborder.type_graborder-color2 .btn_link {
  background: linear-gradient(-40deg, #6c48e5 0%, #2eb7c7 100%);
}
.btn_list.type_graborder.type_graborder-color3 .btn_link {
  background: linear-gradient(321deg, #37d0d7 20.39%, rgba(0, 0, 0, 0), #ff9c9c 81.78%),
    linear-gradient(6deg, #6c48e5 65%, #2eb7c7 97.97%);
}
.btn_list.type_graborder .btn_link::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: 20px;
  background-color: #fff;
}
.renewal_2024 .contents-wrap.type-main-renewal .btn_list .btn_link-text {
  font-size: 1.5rem;
  font-weight: 500; /* 24.12.12 추가 - sayho */
}
/* [2025-07-09 oh] 11790-208456517 마이 해외지원금 버튼 영역 'New!' 태그 추가 */
.renewal_2024 .contents-wrap.type-main-renewal .btn_list .btn_list-items .badge-new {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -0.9rem;
  right: -1.9rem;
  width: 4rem;
  min-width: 4rem;
  height: 1.8rem;
  padding: 0;
  color: #fff;
  letter-spacing: 0.03em;
  background: url(/images/new_renewal/badge_w11790_250708.png) 0 0 no-repeat;
  background-size: 4rem auto;
}
/* [2025-09-02 kho] [WPM-12401] 마이 해외지원금 버튼 영역 'travlog' 태그 추가 */
.renewal_2024 .contents-wrap.type-main-renewal .btn_list .btn_list-items .badge-travlog, .renewal_2024 .contents-wrap.type-main-renewal .btn_list .btn_list-items .badge-2026 {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -0.7rem;
  right: -0.4rem;
  width: 5.4rem;
  min-width: 5.4rem;
  height: 1.7rem;
  padding: 0;
  color: #fff;
  letter-spacing: 0.03em;
  background: url(/images/new_renewal/badge_w12401_travlog.png) 0 0 no-repeat;
  background-size: 100% auto;
  background-image: image-set(
    url("/images/new_renewal/badge_w12401_travlog.webp") type("image/webp"),
    url("/images/new_renewal/badge_w12401_travlog.png") type("image/png")
  );
}
.badge-travlog, .renewal_2024 .contents-wrap.type-main-renewal .btn_list .btn_list-items .badge-2026 {
  background: url(/images/new_renewal/badge_w12401_2026.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 4.0rem;
  min-width: 4.0rem;
  height: 1.7rem;
}
.renewal_2024 .contents-wrap.type-main-renewal * {
  box-sizing: border-box;
}
.renewal_2024 .contents-wrap.type-main-renewal strong {
  font-weight: bold;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .section_card-amount i img,
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .type-nodata i img,
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .section_mycard i img,
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .section_recent_usage_history i img,
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .section_remaining-limit i img,
.renewal_2024 .contents-wrap.type-main-renewal .section_hanamoney i img,
.renewal_2024 .contents-wrap.type-main-renewal .top-notification i img,
.renewal_2024 .contents-wrap.type-main-renewal .section_quick i img,
.renewal_2024 .contents-wrap.type-main-renewal .section_banner i img,
.renewal_2024 .contents-wrap.type-main-renewal .section_mymenu i img,
.renewal_2024 .contents-wrap.type-main-renewal .section_asset_expenditure i img,
.renewal_2024 .contents-wrap.type-main-renewal .section_starx2_news i img,
.renewal_2024 .contents-wrap.type-main-renewal .section_financial_service i img,
.renewal_2024 .contents-wrap.type-main-renewal .section_full_banner i img,
.renewal_2024 .contents-wrap.type-main-renewal .section_life_service i img {
  width: 100%;
  object-fit: cover;
}

.renewal_2024 .contents-wrap.type-main-renewal .img_case01 {
  width: 100%;
  margin-bottom: 160px;
}
.renewal_2024 .contents-wrap.type-main-renewal .img_case02 {
  width: 100%;
  margin-bottom: 100px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents {
  padding: 0;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .top-notification {
  display: flex;
  justify-content: space-between;
  height: 48px;
  padding: 0 16px;
  background-color: #fff;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 3px 6px rgb(0 0 0 / 10%);
  margin-top: -48px;
  transition: margin-top 1s;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .top-notification .btn-link {
  width: 100%;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .top-notification
  .btn-link.noti-warning
  .top-notification-title
  .accent {
  color: #f14a76;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .top-notification
  .btn-link.noti-overseas
  .top-notification-title
  .accent {
  color: #2776ce;
}
/* [25.02.14 : lyr] 마이/메인 > 마이데이터 만료예정자 유도 넛지 */
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .top-notification
  .btn-link.noti-expire-nudge
  .top-notification-dday {
  font-size: 1.3rem;
  font-weight: bold;
  color: #0ca2b7;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .top-notification-contents {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .top-notification .top-notification-contents::after {
  content: "";
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  background: url(/images/new_renewal/ic_arrow_r_01.svg) no-repeat center / 12px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .top-notification .btn-link.join {
  flex: 0 0 55px;
  padding: 16px 0;
  text-align: right;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .top-notification
  .btn-link.login
  .top-notification-contents::after {
  display: none;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .top-notification-title,
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .top-notification-link-text {
  font-size: 1.4rem;
  font-weight: 400;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .top-notification-title {
  flex: 1;
  min-width: 0;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .top-notification-contents .top-notification-icon {
  flex: 0 0 16px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .top-notification-icon {
  display: flex;
  align-items: center;
  flex: 0 0 8px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .top-notification-link-text {
  text-decoration: underline;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .top-notification-icon .ico_header-noti {
  width: 16px;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .top-notification
  .top-notification-icon
  .ico_header-arrow {
  height: 14px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section {
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section .page-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section .page-section-inner {
  height: 100%;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section .btn_list-wrap {
  height: 100%;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section .page-link-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  line-height: 1;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section .page-link-title::after {
  content: "";
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  background: url(/images/new_renewal/ic_arrow_r_01.svg) no-repeat center / 12px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section .page-link-text {
  font-size: 2rem;
  font-weight: bold;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section .page-title-btn {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #111;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section .page-title-btn::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section .page-title-btn.btn_refresh::before {
  background: url("/images/new_renewal/ico_refresh.svg") no-repeat center / 14px;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section
  .page-title-btn.btn_refresh.is-animate::before {
  animation: refresh_spin 0.7s infinite ease-in;
}
/* 배너 팝업 닫기 애니메이션 */
@keyframes refresh_spin {
  to {
    transform: rotate(360deg);
  }
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section .intersection-inner {
  width: 100%;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section .page-section-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
}
.renewal_2024 .main-btm-section-box .type-nodata {
  margin: 40px 0;
}
.renewal_2024 .main-btm-section-box .type-nodata .amount_nodata-desc,
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section
  .page-section-wrap.type-nodata
  .amount_nodata-desc {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin: 20px 0;
}
.renewal_2024 .main-btm-section-box .type-nodata .amount_nodata-desc p,
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section
  .page-section-wrap.type-nodata
  .amount_nodata-desc
  p {
  font-size: 1.7rem;
  line-height: 1.4;
  font-weight: 500;
  text-align: center;
  color: #111;
}
.renewal_2024 .main-btm-section-box .type-nodata .amount_nodata-desc .link-text,
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section
  .page-section-wrap.type-nodata
  .amount_nodata-desc
  .link-text {
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg, #28b964 0%, #00aa78 50%, #02b4b9 91%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 500;
}
.renewal_2024 .main-btm-section-box .type-nodata .amount_nodata-desc .link-text::after,
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section
  .page-section-wrap.type-nodata
  .amount_nodata-desc
  .link-text::after {
  content: "";
  position: absolute;
  bottom: -1px;
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, #28b964 0%, #00aa78 50%, #02b4b9 91%);
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section .page-section-box {
  width: 100%;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section-text {
  font-size: 1.4rem;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section-icon {
  display: flex;
  align-items: center;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section .flex-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .amount_box-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .amount_box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .amount_box-title {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .amount_box-text {
  font-size: 1.5rem;
  font-weight: 400;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .amount_box-icon {
  display: flex;
  align-items: center;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .amount_box-link {
  display: flex;
  align-items: center;
  line-height: 1;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .amount_box-link.arr_right {
  position: relative;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .amount_box-link.arr_right::after {
  content: "";
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  background: url(/images/new_renewal/ic_arrow_r_01.svg) no-repeat center / 12px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .amount_box-link .amount_box-price,
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .amount_box-link .amount_box-text {
  font-size: 2.8rem;
  font-weight: 700; /* 24.12.12 수정 500=>700 - sayho */
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .amount_box-button {
  display: flex;
  align-items: center;
}
/* 마이메인 리뉴얼 > 섹션 > 하나머니 */
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_hanamoney {
  padding: 24px 16px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_hanamoney .page-section-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_hanamoney .amount_box {
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_hanamoney .amount_block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_hanamoney
  .amount_box-icon
  .logo_symbol {
  width: 24px;
  height: 24px;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_hanamoney
  .amount_block
  .money_status {
  display: flex;
  align-items: center;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_hanamoney .money_status-img {
  height: 80px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_hanamoney .money_status-img img {
  height: 100%;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_hanamoney
  .amount_box-link
  .amount_box-text {
  font-size: 2.8rem;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_hanamoney
  .amount_box-area
  .amount_box:first-child {
  height: 80px;
}

/* 마이메인 리뉴얼 > 섹션 > 퀵메뉴 */
/* [25.02.03 : lyr] 퀵메뉴 디자인 리뉴얼, 2/11 운영배포 완료 */
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_quick {
  justify-content: center;
  padding: 0 16px;
  box-sizing: border-box;
  background: transparent;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_quick .btn_list .btn_list-items {
  width: 100%;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_quick.type_case1 {
  background: linear-gradient(96deg, rgba(19, 201, 190, 0) 12.75%, #d5ffcc 98.97%),
    linear-gradient(348deg, #eae3ff 25.39%, #ddfbff 90.78%);
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_quick.type_case1
  .btn_list
  .btn_link-text {
  color: #111;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_quick.type_case2 {
  background: #dcf7f5;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_quick.type_case2
  .btn_list
  .btn_link-text {
  color: #111;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_quick .btn_list-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_quick .btn_list {
  gap: 8px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_quick .btn_list .btn_link {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 111px;
  border-radius: 12px;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_quick
  .btn_list
  .btn_list-items:nth-child(1)
  .btn_link {
  background-color: #d8f3f2;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_quick
  .btn_list
  .btn_list-items:nth-child(2)
  .btn_link {
  background-color: #e2f0ff;
}
/* [25.02.25 : lyr] [WPM-9815] 카드추천/VIP 버튼 노랑으로 변경 */
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_quick
  .btn_list
  .btn_list-items:nth-child(3)
  .btn_link {
  background-color: #fff8da;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_quick
  .btn_list
  .btn_link
  .btn_link-icon {
  display: flex;
  align-items: center;
  width: 30px;
  height: 30px;
  margin-left: 12px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_quick .btn_list .btn_link-text {
  padding: 0;
  font-size: 1.6rem; /*24.12.18 수정 1.5rem => 1.6rem - sayho*/
  font-weight: 500; /* 24.12.12 수정 400 => 500 - sayho */
  line-height: 2rem;
  margin-top: 10px;
  margin-left: 12px;
  color: #111;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_quick
  .btn_list
  .btn_link-text
  strong {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_quick
  .btn_list
  .btn_link-text
  strong::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: url(/images/new_renewal/ic_arrow_r_01.svg) no-repeat center / 12px;
}

.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_quick .btn_list .btn_link-sub-text {
  padding: 0;
  font-size: 1.2rem;
  font-weight: 500;
  text-align: left;
  color: #888;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}
/* Skeleton */
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_quick.is-skeleton-item.is-loading {
  background-color: transparent;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_quick.is-skeleton-item.is-loading
  .btn_list
  .btn_list-items:nth-child(1)
  .btn_link,
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_quick.is-skeleton-item.is-loading
  .btn_list
  .btn_list-items:nth-child(2)
  .btn_link,
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_quick.is-skeleton-item.is-loading
  .btn_list
  .btn_list-items:nth-child(3)
  .btn_link {
  width: 100%;
  height: 111px;
  background-color: var(--skeleton-bg-dk-color);
}
/* // [25.02.03: lyr] 퀵메뉴 디자인 리뉴얼 */

.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_banner {
  padding: 0;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_banner .banner_area {
  margin: 20px 16px 0;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_banner .banner_area {
  position: relative;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_banner .banner_area.is-active {
  animation: slideOut 1s cubic-bezier(0.61, -0.04, 0.09, 0.98);
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_banner
  .banner_area
  .banner_area-close {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 40px;
  height: 40px;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_banner
  .banner_area
  .banner_area-close-icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url("/images/new_renewal/ico_banner_close.svg") no-repeat center / 18px;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_banner
  .banner_area.type-white
  .banner_area-close-icon {
  background: url("/images/new_renewal/ico_banner_close_w.png") no-repeat center / 28px;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_banner
  .banner_area
  .banner_area-link {
  display: block;
  margin-bottom: 1px;
  padding: 10px;
  border-radius: 14px;
  border: 1.5px solid #d6d6d6;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_banner
  .banner_area
  .banner_area-link
  img {
  width: 100%;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_banner[data-banner-id="banner01"] {
  max-height: 0;
  height: 100%;
  overflow: hidden;
  transition: 0.4s all;
  animation: slideIn 4s forwards cubic-bezier(0.61, -0.04, 0.09, 0.98);
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_banner[data-banner-id="banner01"].active {
  height: auto;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_mymenu {
  padding: 22px 16px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_mymenu .my_menu-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 4px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_mymenu .my_menu-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_mymenu .my_menu-link .my_menu-text {
  font-size: 1.3rem;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_mymenu .my_menu-icon {
  width: 76px;
  height: 76px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_asset_expenditure {
  padding: 40px 16px;
  /* background-color: #f6f9fa; */
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure
  .page-section-title.arr_right {
  display: flex;
  align-items: center;
  position: relative;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure
  .page-section-title.arr_right::after {
  content: "";
  display: block;
  width: 6px;
  height: 10px;
  background: url("/images/new_renewal/ico_arr_link_right02.png") no-repeat center / 6px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_asset_expenditure .amount_box {
  gap: 8px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_asset_expenditure .amount_box-area {
  gap: 22px;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure
  .amount_box-area.asset {
  margin-bottom: 25px;
  color: #000; /* 24.12.12 추가 - sayho */
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure
  .amount_box-area.expenditure {
  color: #b55a5a;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure
  .amount_box-area.expenditure
  .amount_box-price,
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure
  .amount_box-area.asset
  .amount_box-price {
  font-size: 2.4rem;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure
  .amount_box-title {
  gap: 0;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure
  .amount_box-button {
  padding: 5px 5px 5px 8px;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure
  .amount_box-button
  .ico_refresh {
  width: 14px;
  height: 14px;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure
  .page-section-box {
  border-top: 1px solid #e1e1e1;
  padding-top: 25px;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure
  .page-section-box:first-child {
  border-top: 0;
  padding-top: 0;
}
/* 별별뉴스 통이미지 영역 */
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_starx2_news {
  padding: 0;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_starx2_news .tstar_news-link,
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_starx2_news .tstar_news-link img {
  width: 100%;
}
/* // 별별뉴스 통이미지 영역으로 */
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_financial_service {
  padding: 40px 16px 30px;
  border-top: 10px solid #f5f5f5;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_financial_service .flex-wrap {
  gap: 16px;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .flex-wrap
  .intersection-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  margin-top: -8px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_financial_service .finansv-link {
  flex: 1 1 calc(50% - 12px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100vw * 160 / 360);
  padding: 20px 16px;
  border-radius: 8px;
  background-color: #ddd;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .finansv-link.finansv-link-type1 {
  background: linear-gradient(134deg, #faecf7 0.07%, #faf5ec 98.53%);
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .finansv-link.finansv-link-type2 {
  background: linear-gradient(134deg, #faf5ec 0.07%, #faecf7 98.53%);
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .finansv-link.finansv-link-type3 {
  background: linear-gradient(134deg, #d8f7fe 0.07%, #e0f6e3 98.53%);
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .finansv-link.finansv-link-type3
  .finansv-text {
  color: #033a31;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .finansv-link.finansv-link-type4 {
  background: linear-gradient(134deg, #ececec 0.07%, #f6f6f6 98.53%);
}
/* [25.02.07 : lyr] 오토카드 할부 디자인 */
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .finansv-link.finansv-link-type5 {
  background: linear-gradient(134deg, #d8f7fe 0.07%, #e0f6e3 98.53%);
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .finansv-link.finansv-link-type5
  .finansv-text {
  color: #033a31;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .finansv-link.finansv-link-type5
  .finansv-amount
  .font-size-15 {
  padding-right: 4px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_financial_service .finansv-banner {
  position: relative;
  flex: 1 1 calc(50% - 12px);
  display: flex;
  flex-direction: column;
  height: calc(100vw * 160 / 360);
  border-radius: 8px;
  overflow: hidden;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .finansv-banner
  .finansv-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .finansv-banner
  .finansv-img
  img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .finansv-banner
  .finansv-title {
  position: absolute;
  z-index: 1;
  top: 20px;
  left: 16px;
  color: #414d84;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .finansv-banner
  .finansv-title
  strong {
  font-weight: bold;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .finansv-banner.finansv-banner-type1
  .finansv-title {
  color: #414d84;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .finansv-banner.finansv-banner-type2
  .finansv-title {
  color: #333;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_financial_service .finansv-title {
  font-size: 1.6rem;
  font-weight: 500;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .finansv-contents
  .finansv-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 22px;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1;
  border-radius: 10px;
  /* skeleton animation add */
  position: relative;
  overflow: hidden;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .finansv-contents
  .finansv-badge.pink {
  background-color: #ff4f8f;
  color: #fff;
}
/* [25.02.07 : lyr] 오토카드 할부 디자인, badge color green 추가 */
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .finansv-contents
  .finansv-badge.green {
  background-color: #00a4b7;
  color: #fff;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .finansv-contents
  .finansv-amount {
  font-size: 2.4rem;
  font-weight: 700; /* 24.12.12 수정 500=>700 - sayho */
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .finansv-contents
  .finansv-amount.type-arrow {
  position: relative;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .finansv-contents
  .finansv-amount.type-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  background: url(/images/new_renewal/ic_arrow_r_01.svg) no-repeat center / 12px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_financial_service .finansv-amount {
  margin-top: 4px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_financial_service .finansv-text {
  font-size: 1.5rem; /* [24.12.13 : lyr] 1.4rem=>1.5rem 수정 */
  line-height: 22px;
  font-weight: 700; /* [24.12.13 : lyr] 500=>700 수정 */
  color: #252e33; /* [24.12.13 : lyr] #536067=>#252e33 수정 */
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_financial_service .loan-list li {
  width: 100%;
  margin-top: 8px;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .loan-list
  li:first-child {
  margin-top: 0;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .loan-list
  .loan-list-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-radius: 8px;
  background: #f6f9fa;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .loan-list
  .loan-list-text {
  display: inline-block;
  font-size: 1.7rem;
  font-weight: 500;
  color: #333;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .loan-list
  .loan-list-text
  span {
  padding-left: 2px;
  font-weight: 400;
  color: #888;
}
/* [2025-07-09 kjy] [WPM-11558] 접근성 1차 심사 수정 */
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .loan-list
  .loan-list-btn {
  position: relative;
  display: inline-block;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 500;
  /* background: linear-gradient(90deg, #28b964 0%, #00aa78 50%, #02b4b9 91%); */
  background: linear-gradient(90deg, #08a561 0%, #01a272 50%, #009dac 91%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* [2025-07-09 kjy] [WPM-11558] 접근성 1차 심사 수정 */
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .loan-list
  .loan-list-btn::after {
  content: "";
  position: absolute;
  bottom: -1px;
  display: block;
  width: 100%;
  height: 1px;
  /* background: linear-gradient(90deg, #28b964 0%, #00aa78 50%, #02b4b9 91%); */
  background: linear-gradient(90deg, #08a561 0%, #01a272 50%, #009dac 91%);
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_full_banner {
  padding: 0;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_full_banner .full_banner-link {
  display: block;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_full_banner .full_banner-link img {
  width: 100%;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_life_service {
  padding: 48px 16px 30px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_life_service .lifesv-link {
  display: block;
  width: 100%;
  margin-top: 24px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_life_service .lifesv-link img {
  width: 100%;
  max-width: 100%;
}
.renewal_2024 .contents-wrap.type-main-renewal .footer-wrap {
  padding: 30px 0 80px;
  background-color: transparent;
}
.renewal_2024 .contents-wrap.type-main-renewal .footer-wrap .footer-inner {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 30px;
  background: #fff;
}
.renewal_2024 .contents-wrap.type-main-renewal .footer-wrap .footer-info-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}
.renewal_2024 .contents-wrap.type-main-renewal .footer-wrap .footer-info-list li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-right: 11px;
  background-color: #536067;
}
.renewal_2024 .contents-wrap.type-main-renewal .footer-wrap .footer-info-list li:first-child::before {
  display: none;
}
.renewal_2024 .contents-wrap.type-main-renewal .footer-wrap .footer-info-list li.hanapay_guide::before {
  display: none;
}
.renewal_2024 .contents-wrap.type-main-renewal .footer-wrap .footer-info-link {
  display: inline-block;
  font-size: 1.4rem;
  color: #536067;
}
.renewal_2024 .contents-wrap.type-main-renewal .footer-wrap .footer-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 16px;
}
.renewal_2024 .contents-wrap.type-main-renewal .footer-wrap .footer-btn-logout {
  width: 78px;
  padding: 5px 0;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  border-radius: 20px;
  border: 1px solid #a2a2a2;
}
.renewal_2024 .contents-wrap.type-main-renewal .footer-wrap .footer-btn-hanapay-guide {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  gap: 5px;
  width: 50%;
  padding: 18px 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  border-radius: 12px;
  background-color: #f3f3f3;
  color: #101010;
}
.renewal_2024 .contents-wrap.type-main-renewal .footer-wrap .footer-btn-hanapay-guide i {
  display: inline-block;
  width: 24px;
  height: 24px;
}
.renewal_2024 .contents-wrap.type-main-renewal .footer-wrap .footer-btn-hanapay-guide i img {
  width: 100%;
}
/* 스켈레톤 추가 > 마이 메인 */
.renewal_2024 .contents-wrap.type-main-renewal .page-contents {
  --skeleton-bg-color: #eee;
  --skeleton-bg-lt-color: #f3f3f3;
  --skeleton-bg-dk-color: #e6e6e6;
  --skeleton-bg-color-ani-01: #fff;
  --skeleton-bg-color-ani-02: #f7f7f7;
  --skeleton-bg-color-ani-03: #f3f3f3;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents:not(.is-skeleton) .page-section {
  display: block;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.is-skeleton-item,
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.is-loading {
  display: none;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.is-skeleton-item.is-loading {
  display: block;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.is-skeleton-item * {
  background-color: transparent;
  color: transparent;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.is-skeleton-item a,
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.is-skeleton-item button {
  overflow: hidden;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.is-skeleton-item i > * {
  display: none;
}
/* skeleton----common */
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .is-skeleton-item .amount_box .amount_box-title,
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.is-skeleton-item .page-section-title,
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .is-skeleton-item .amount_box .amount_box-link,
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .is-skeleton-item .amount_box .money_status,
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .is-skeleton-item .btn_list .btn_link,
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .is-skeleton-item .btn_link,
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_mymenu.is-skeleton-item
  .my_menu-link,
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.is-skeleton-item .finansv-amount,
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.is-skeleton-item .finansv-text {
  display: inline-block;
  padding: 0 16px;
  border-radius: 20px;
  background: var(--skeleton-bg-color);
  /* skeleton animation add */
  position: relative;
  overflow: hidden;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.is-skeleton-item .finansv-title::before,
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .is-skeleton-item .amount_box .amount_box-title::before,
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.is-skeleton-item
  .page-section-title::before,
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .is-skeleton-item .amount_box .amount_box-link::before,
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .is-skeleton-item .amount_box .money_status::before,
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .is-skeleton-item .btn_list .btn_link::before,
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_mymenu.is-skeleton-item
  .my_menu-link::before,
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service.is-skeleton-item
  .finansv-badge.pink::before,
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service.is-skeleton-item
  .finansv-badge.green::before,
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.is-skeleton-item .finansv-amount::before,
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.is-skeleton-item .finansv-text::before {
  content: "";
  position: absolute;
  left: -100%;
  transform: translateY(-50%);
  top: 50%;
  display: block;
  width: 100%;
  height: calc(100vw * 25 / 100);
  filter: blur(20px);
  background: var(--skeleton-bg-color-ani-01);
  animation: skeletonAni 3s linear infinite;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.is-skeleton-item .finansv-title {
  border-radius: 20px;
  background: var(--skeleton-bg-color);
  /* skeleton animation add */
  position: relative;
  overflow: hidden;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .is-skeleton-item .page-link-title::after,
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .is-skeleton-item .amount_box .arr_right::after {
  display: none;
}
/* skeleton----custom */
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.is-skeleton-item .page-section-title {
  width: 120px;
  height: 30px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .is-skeleton-item .amount_box .amount_box-title {
  width: calc(100vw * 25 / 100);
  height: 20px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .is-skeleton-item .amount_box .amount_box-link {
  width: calc(100vw * 40 / 100);
  height: 35px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .is-skeleton-item .amount_box .money_status {
  width: calc(100vw * 25 / 100);
  height: 80px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .is-skeleton-item .amount_box .money_status-text {
  color: transparent;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .is-skeleton-item .btn_list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .is-skeleton-item .btn_list.unflex .btn_list-items {
  width: 100%;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .is-skeleton-item .btn_list.type_graborder .btn_link {
  background: var(--skeleton-bg-color);
  /* skeleton animation add */
  position: relative;
  overflow: hidden;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .is-skeleton-item
  .btn_list.type_graborder.type_graborder-color2
  .btn_link,
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .is-skeleton-item
  .btn_list.type_graborder.type_graborder-color3
  .btn_link {
  background: var(--skeleton-bg-color);
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .is-skeleton-item
  .btn_list.type_graborder.type_graborder-color2
  .btn_link::before,
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .is-skeleton-item
  .btn_list.type_graborder.type_graborder-color3
  .btn_link::before {
  background: var(--skeleton-bg-color-ani-03);
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.is-skeleton-item
  .finansv-link.finansv-link-type1,
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.is-skeleton-item
  .finansv-link.finansv-link-type2,
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.is-skeleton-item
  .finansv-link.finansv-link-type3,
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.is-skeleton-item
  .finansv-link.finansv-link-type4,
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.is-skeleton-item
  .finansv-link.finansv-link-type5 {
  background: var(--skeleton-bg-lt-color);
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.is-skeleton-item .finansv-title {
  width: calc(100vw * 20 / 100);
  height: 20px;
  background: var(--skeleton-bg-dk-color);
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.is-skeleton-item .finansv-amount {
  display: block;
  width: calc(100vw * 25 / 100);
  height: 26px;
  background: var(--skeleton-bg-dk-color);
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.is-skeleton-item .finansv-text {
  display: block;
  width: calc(100vw * 16 / 100);
  height: 22px;
  margin-bottom: 6px;
  background: var(--skeleton-bg-dk-color);
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_quick.is-skeleton-item {
  background: var(--skeleton-bg-lt-color);
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_quick.is-skeleton-item
  .page-section-inner,
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_quick.is-skeleton-item
  .btn_list-wrap {
  height: 100%;
  /* padding: 0; */
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_quick.is-skeleton-item
  .btn_list
  .btn_list-items {
  display: flex;
  align-items: center;
  justify-content: center;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_quick.is-skeleton-item
  .btn_list
  .btn_link {
  width: 50px;
  height: 50px;
  background: var(--skeleton-bg-dk-color);
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_quick.is-skeleton-item
  .btn_list
  .btn_link::before {
  filter: blur(15px);
  background: var(--skeleton-bg-color-ani-03);
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_mymenu.is-skeleton-item
  .my_menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_mymenu.is-skeleton-item
  .my_menu-link {
  width: 60px;
  height: 60px;
  margin: 4px;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_mymenu.is-skeleton-item
  .my_menu-link::before {
  filter: blur(15px);
  background: var(--skeleton-bg-color-ani-01);
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure.is-skeleton-item
  .page-section-title {
  background: var(--skeleton-bg-dk-color);
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure.is-skeleton-item
  .amount_box
  .amount_box-link::before,
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure.is-skeleton-item
  .page-section-title::before {
  background: var(--skeleton-bg-color-ani-03);
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure.is-skeleton-item
  .amount_box
  .amount_box-title {
  width: 70px;
  background: var(--skeleton-bg-dk-color);
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .section_asset_expenditure.is-skeleton-item
  .amount_box
  .amount_box-title::before {
  background: var(--skeleton-bg-color-ani-03);
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure.is-skeleton-item
  .amount_box
  .amount_box-link {
  background: var(--skeleton-bg-dk-color);
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure.is-skeleton-item
  .btn_list.type_graborder.type_graborder-color2
  .btn_link,
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure.is-skeleton-item
  .btn_list.type_graborder.type_graborder-color3
  .btn_link {
  background: var(--skeleton-bg-dk-color);
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service.is-skeleton-item
  .finansv-badge.green,
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service.is-skeleton-item
  .finansv-badge.pink {
  width: calc(100vw * 16 / 100);
  overflow: hidden;
  background: var(--skeleton-bg-dk-color);
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service.is-skeleton-item
  .finansv-badge.green::before,
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service.is-skeleton-item
  .finansv-badge.pink::before {
  background: var(--skeleton-bg-color-ani-03);
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service.is-skeleton-item
  .finansv-title::before {
  background: var(--skeleton-bg-color-ani-03);
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service.is-skeleton-item
  .finansv-amount::before {
  background: var(--skeleton-bg-color-ani-03);
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service.is-skeleton-item
  .finansv-text::before {
  background: var(--skeleton-bg-color-ani-03);
}
/* 배너 팝업 열기 애니메이션 */
@keyframes slideIn {
  0% {
    opacity: 0;
    max-height: 0;
  }
  20%,
  100% {
    opacity: 1;
    max-height: 1000px;
  }
}
/* 배너 팝업 닫기 애니메이션 */
@keyframes slideOut {
  0%,
  20% {
    opacity: 1;
    max-height: 1000px;
  }
  100% {
    opacity: 0;
    max-height: 0;
  }
}
/* 스켈레톤 애니메이션 */
@keyframes skeletonAni {
  0% {
    opacity: 1;
  }
  80% {
    left: 110%;
    opacity: 1;
  }
  100% {
    left: 110%;
    opacity: 0;
  }
}
@keyframes skeletonAni2 {
  0% {
    top: 100%;
    opacity: 1;
  }
  80% {
    top: -110%;
    opacity: 1;
  }
  100% {
    top: -110%;
    opacity: 0;
  }
}

/* ========================= [ 큰글씨 모드 ] ========================= */
.renewal_2024 .header.type-renewal.large-mode .header-utils .btn-util .btn-util-txt {
  margin-top: 0;
  font-size: 1.8rem;
  font-weight: 500;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section .page-section-inner {
  padding: 30px 20px;
  border-radius: 14px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.03);
  background-color: #fff;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .amount_box-area {
  gap: 12px;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section .amount_block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section .amount_block.flex-wrap {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
  text-align: left;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section
  .amount_block.flex-wrap
  .amount_block-desc {
  display: flex;
  align-items: center;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section
  .amount_block.flex-wrap
  .amount_block-desc::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 12px;
  margin: 0 10px;
  background-color: #666;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section
  .amount_block.flex-wrap
  .amount_block-desc:last-child:after {
  display: none;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section
  .amount_block
  .amount_block-expected-price,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section
  .amount_block
  .amount_block-desc {
  font-size: 1.6rem;
  font-weight: 500;
  color: #333;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents {
  background-color: #f3f3f3;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section .page-link-title {
  gap: 4px;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section .page-link-title::after {
  content: "";
  flex: 0 0 14px;
  display: block;
  width: 14px;
  height: 14px;
  background: url(/images/new_renewal/ic_arrow_r_01.svg) no-repeat center / 17px;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .amount_box-title .amount_box-text {
  font-size: 2rem;
  font-weight: bold;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section .page-link-text {
  font-size: 2rem;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .amount_box-link .amount_box-price,
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .amount_box-link .amount_box-text {
  font-size: 2.6rem;
  font-weight: bold;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .amount_box-text {
  font-size: 1.6rem;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .amount_box-link .amount_box-price.arr_right {
  display: flex;
  align-items: center;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .amount_box-link
  .amount_box-price.arr_right::after {
  content: "";
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-left: 2px;
  background: url(/images/new_renewal/ic_arrow_r_01.svg) no-repeat center / 17px;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section.section_hanamoney {
  padding: 16px 16px 0;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_hanamoney
  .page-section-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 20px;
  background-color: #fff;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_hanamoney
  .amount_box-link.arr_right {
  gap: 2px;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_hanamoney
  .amount_box-link
  .amount_box-text {
  font-size: 2.6rem;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_hanamoney
  .amount_box-link.arr_right::after {
  width: 14px;
  height: 14px;
  background: url(/images/new_renewal/ic_arrow_r_02.svg) no-repeat center / 14px;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section.section_hanamoney .amount_block {
  flex-wrap: wrap;
  gap: 12px;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_hanamoney
  .amount_block
  .amount_box-link,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_hanamoney
  .amount_block
  .amount_box-title {
  width: 100%;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_hanamoney
  .amount_block
  .amount_box-title::after {
  display: none;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_hanamoney
  .amount_box-area {
  flex-direction: row;
  align-items: center;
  height: 80px;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_hanamoney
  .amount_box-banner {
  display: flex;
  align-items: center;
  height: 80px;
  flex: 0 0 auto;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_hanamoney
  .amount_box-banner
  img {
  height: 100%;
}

.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section.section_card-amount {
  padding: 16px 16px 0;
  overflow: hidden;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_card-amount
  .page-section-inner {
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_card-amount
  .amount_block
  .amount_box-withdrawal-date {
  font-size: 1.6rem;
  font-weight: 500;
  color: #333;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_card-amount
  .amount_box-slider {
  display: flex;
  /* flex-direction: column-reverse; */
  flex-direction: column;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_card-amount
  .amount_box-slider
  .swiper-slide
  .amount_box-area {
  padding: 30px 20px;
  border-radius: 14px;
  box-shadow: 1px 3px 20px rgba(0, 0, 0, 3%);
  background-color: #fff;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_card-amount
  .amount_box-slider
  .slide-controller {
  position: relative;
  margin-top: 16px;
  margin-bottom: 8px;
  /* 24.11.26 추가 - sayho */
  font-size: 0;
  height: 8px;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_card-amount
  .amount_box-slider
  .swiper-button-prev,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_card-amount
  .amount_box-slider
  .swiper-button-next {
  display: none;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_card-amount
  .amount_box-slider
  .swiper-pagination-bullet {
  border-radius: 50px;
  background-color: #999ea0;
  border: 0;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_card-amount
  .amount_box-slider
  .swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 0;
  margin-top: 0;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_card-amount
  .amount_box-slider
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 24px;
  background-color: #111;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_card-amount
  .amount_box-link.arr_right {
  gap: 2px;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_card-amount
  .amount_block.flex-wrap
  .amount_block-desc {
  font-weight: 400;
  line-height: 1.4;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section.section_mycard {
  padding: 16px 16px 0;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_mycard
  .page-section-inner {
  padding: 30px 20px;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_mycard
  .page-link-title
  .acent {
  color: #00a1b1;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_mycard
  .mycard_list-wrap {
  margin-top: 24px;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section.section_mycard .mycard_list {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section .intersection-inner {
  align-items: normal;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_mycard
  .mycard_list-area {
  display: flex;
  align-items: center;
  gap: 16px;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section.section_mycard .mycard_list-box {
  flex: 1;
  min-width: 0;
}
/* [25.01.23 : lyr] 큰글씨 모드 is-error, no images 추가 (card-image 구조 수정) */
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_mycard
  .mycard_list-cardimg,
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section.section_mycard .card-image {
  flex: 0 0 60px;
  height: 95px;
  display: flex;
  align-items: center;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_mycard
  .card-image
  .card-image-inner {
  flex: 1;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_mycard
  .mycard_list-cardimg
  img,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_mycard
  .card-image
  .card-image-inner
  img,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_mycard
  .card-image
  .card-image-inner:empty::before,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_mycard
  .card-image
  .card-image-inner.is-error::before {
  width: 100%;
  transform: rotate(90deg) scale(1.6);
}
/* // [25.01.23 : lyr] 큰글씨 모드 is-error, no images 추가 (card-image 구조 수정) */
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_mycard
  .mycard_list-link {
  display: block;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_mycard
  .mycard_list-link
  .card_name {
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 400;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: #8e8e8e;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_mycard
  .mycard_list-link
  .amount_used {
  position: relative;
  width: 100%;
  margin-top: 8px;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  color: #111;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section.section_mycard .btn_list {
  gap: 4px;
  margin-top: 12px;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_mycard
  .btn_list
  .btn_link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  border-radius: 5px;
  background-color: #fff;
  border: 1px solid #333;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_mycard
  .btn_list
  .btn_link
  .btn_link-text {
  font-size: 1.5rem;
  font-weight: 400;
  color: #111;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section.section_mycard .mycard_more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin: 30px auto 0;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_mycard
  .mycard_more
  .mycard_more-text {
  font-size: 1.4rem;
  font-weight: 500;
  color: #313131;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section.section_recent_usage_history {
  padding: 16px 16px 0;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_recent_usage_history
  .page-section-inner {
  padding: 30px 24px;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_recent_usage_history
  .usage-default-etc {
  justify-content: flex-end;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_recent_usage_history
  .usage-default-block-cancel
  .new-usage-default-title {
  font-weight: 400;
  color: #8e8e8e;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_recent_usage_history
  .usage-default-block-cancel
  .new-usage-default-sum {
  font-weight: 400;
  color: #8e8e8e;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section .usage-default-list {
  margin-top: 0;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section .usage-default-item {
  padding-top: 24px;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section .usage-default-item:first-child {
  padding-top: 0;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section
  .usage-default-list
  .new-logo-image {
  display: none;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section .new-usage-default-title {
  margin: 0;
  font-size: 2rem;
  line-height: 1.4;
  font-weight: 500;
  color: #121212;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section .new-usage-default-sum {
  margin-top: 0;
  font-size: 2rem;
  line-height: 1.4;
  font-weight: bold;
  color: #121212;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section .usage-default-etc {
  margin-top: 0;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section .usage-default-sum {
  height: 28px;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section .usage-default-etc .del-text,
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section .usage-default-sum .del-text {
  position: relative;
  height: 19px;
  margin-top: 4px;
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 400;
  color: #8e8e8e !important;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section
  .new-usage-default-sum
  .del-text::before {
  background-color: #8e8e8e;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section .new-usage-default-etc-item {
  height: 19px;
  margin-top: 4px;
  margin-left: 0;
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 400;
  color: #8e8e8e;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section
  .usage-default-etc-item.color-wrong {
  height: 19px;
  margin-top: 6px;
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: 400;
  color: #fb0000 !important;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section.section_remaining-limit {
  padding: 16px 16px 0;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_remaining-limit
  .intersection-inner {
  gap: 10px;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_remaining-limit
  .amount_box-link.arr_right::after {
  width: 14px;
  height: 14px;
  background: url(/images/new_renewal/ic_arrow_r_04.png) no-repeat center / 14px;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_remaining-limit
  .page-section-inner {
  padding: 30px 24px;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_remaining-limit
  .amount_box-link.arr_right {
  justify-content: flex-end;
  flex: 1 1 auto;
  gap: 2px;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_remaining-limit
  .amount_block
  .amount_block-desc {
  margin-top: 12px;
  font-weight: 400;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section.section_mymenu {
  padding: 16px 16px 0;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_mymenu
  .page-section-inner {
  padding: 30px 24px;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section.section_mymenu .my_menu {
  margin-top: 16px;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section.section_mymenu .my_menu-list {
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 14px 2px;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section.section_mymenu .my_menu-link {
  gap: 2px;
  padding: 0;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section.section_mymenu .my_menu-icon {
  width: 88px;
  height: 88px;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_mymenu
  .my_menu-link
  .my_menu-text {
  font-size: 1.8rem;
  font-weight: 500;
}

.renewal_2024 .contents-wrap.type-main-renewal.large-mode .footer-wrap {
  padding-bottom: 0;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .footer-wrap .footer-info-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 30px 16px 28px;
  background-color: transparent;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .footer-wrap .footer-info-list li {
  width: 100%;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .footer-wrap .footer-info-list li::before {
  display: none;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .footer-wrap .footer-info-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .footer-wrap .footer-info-link::after {
  content: "";
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  background: url(/images/new_renewal/ic_arrow_r_01.svg) no-repeat center / 17px;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .footer-wrap .footer-info-link-icon img {
  width: 100%;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .footer-wrap .footer-info-link-icon {
  display: flex;
  align-items: center;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .footer-wrap .footer-info-link-icon.f_icon {
  flex: 0 0 44px;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .footer-wrap .footer-info-link-text {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .footer-wrap .footer-info-link-title {
  font-size: 2rem;
  font-weight: 400;
  text-align: left;
  color: #111;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .footer-wrap .footer-info-link-desc {
  font-size: 1.7rem;
  font-weight: 400;
  color: #8e8e8e;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .footer-wrap .footer-btn-logout {
  position: relative;
  border-radius: 0;
  border: 0;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .footer-wrap .footer-btn-area {
  gap: 56px;
  padding: 16px 0 50px;
}

.renewal_2024 .contents-wrap.type-main-renewal.large-mode .footer-wrap .footer-btn-logout,
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .footer-wrap .footer-btn-area button,
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .footer-wrap .footer-btn-area a {
  position: relative;
  display: inline-block;
  width: 72px;
  height: auto;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 400;
  color: #111;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .footer-wrap .footer-btn-area button::after,
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .footer-wrap .footer-btn-area a::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -29px;
  display: inline-block;
  width: 1.5px;
  height: 14px;
  background-color: #666;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .footer-wrap .footer-btn-area a:last-child:after {
  display: none;
}

/* 24.11.25 큰글씨 모드 nodata타입 추가 - sayho */
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section.type-nodata {
  padding-top: 16px;
  padding-bottom: 0;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section.type-nodata .page-section-inner {
  padding: 0;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section.type-nodata .amount_box-area {
  padding: 30px 20px 34px;
  background: #fff;
  border-radius: 14px;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.type-nodata
  .amount_box-title.arr_right::after {
  content: "";
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  background: url(/images/new_renewal/ic_arrow_r_01.svg) no-repeat center / 17px;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.type-nodata
  .amount_box-area
  .amount_nodata-desc {
  width: 100%;
  padding-bottom: 21px;
  margin-top: 24px;
  text-align: center;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.type-nodata
  .amount_box-area
  .amount_nodata-desc
  p {
  margin-bottom: 20px;
  color: #111;
  font-size: 17px;
  line-height: 1;
  font-weight: 500;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section
  .amount_box-area
  .amount_nodata-desc
  .link-text {
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg, #28b964 0%, #00aa78 50%, #02b4b9 91%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 500;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.type-nodata
  .amount_box-area
  .amount_nodata-desc
  .link-text::after {
  content: "";
  position: absolute;
  bottom: -1px;
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, #28b964 0%, #00aa78 50%, #02b4b9 91%);
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section.type-nodata .intersection-inner {
  display: block;
}
/* //24.11.25 큰글씨 모드 nodata타입 추가 - sayho */
/* [24.12.03 : lyr] 큰글씨 모드 스켈레톤 추가 */
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section.is-skeleton-item {
  background-color: transparent;
  color: transparent;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_mycard
  .btn_list
  .btn_link,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_mycard
  .mycard_list-link
  .card_name,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_mycard
  .mycard_list-link
  .amount_used,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_mycard
  .mycard_list-cardimg,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_mycard
  .amount_block.flex-wrap
  .amount_block-desc,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_card-amount
  .amount_block.flex-wrap
  .amount_block-desc,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_card-amount
  .amount_box-link
  .amount_box-price,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_card-amount
  .amount_block
  .amount_box-withdrawal-date,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_card-amount
  .amount_box-title
  .amount_box-text,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_hanamoney
  .amount_box-banner,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_hanamoney
  .amount_box-link
  .amount_box-price,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_hanamoney
  .amount_box-title
  .amount_box-text {
  display: inline-block;
  padding: 0 16px;
  border-radius: 20px;
  background: var(--skeleton-bg-color);
  position: relative;
  overflow: hidden;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_mycard
  .btn_list
  .btn_link::before,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_mycard
  .mycard_list-link
  .card_name::before,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_mycard
  .mycard_list-link
  .amount_used::before,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_mycard
  .mycard_list-cardimg::before,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_card-amount
  .amount_block.flex-wrap
  .amount_block-desc::before,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_card-amount
  .amount_box-link
  .amount_box-price::before,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_card-amount
  .amount_block
  .amount_box-withdrawal-date::before,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_card-amount
  .amount_box-title
  .amount_box-text::before,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_hanamoney
  .amount_box-banner::before,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_hanamoney
  .amount_box-link
  .amount_box-price::before,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_hanamoney
  .amount_box-title
  .amount_box-text::before {
  content: "";
  position: absolute;
  left: -100%;
  transform: translateY(-50%);
  top: 50%;
  display: block;
  width: 100%;
  height: calc(100vw * 25 / 100);
  filter: blur(20px);
  background: var(--skeleton-bg-color-ani-01);
  animation: skeletonAni 3s linear infinite;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_card-amount
  .amount_block
  .amount_box-withdrawal-date,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_card-amount
  .amount_box-title
  .amount_box-text,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_hanamoney
  .amount_box-title
  .amount_box-text {
  width: calc(100vw * 25 / 100);
  height: 20px;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_card-amount
  .amount_box-link,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_hanamoney
  .amount_box-link {
  height: 26px;
}
/* 화살표 가림 */
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_mycard
  .page-link-title::after,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_card-amount
  .amount_box-link
  .amount_box-price.arr_right::after,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_hanamoney
  .amount_box-link::after {
  display: none;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_card-amount
  .amount_box-link
  .amount_box-price,
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_hanamoney
  .amount_box-link
  .amount_box-price {
  width: calc(100vw * 45 / 100);
  height: 26px;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_hanamoney
  .amount_box-banner {
  width: 80px;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_card-amount
  .amount_block.flex-wrap
  .amount_block-desc {
  width: calc(100vw * 55 / 100);
  height: 16px;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_mycard
  .mycard_list-wrap {
  margin-top: 0;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_mycard
  .mycard_list-cardimg {
  height: 100px;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_mycard
  .mycard_list-link
  .card_name {
  display: block;
  width: calc(100vw * 25 / 100);
  height: 16px;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_mycard
  .mycard_list-link
  .amount_used {
  display: block;
  width: calc(100vw * 35 / 100);
  height: 26px;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_mycard
  .btn_list
  .btn_link {
  display: block;
  height: 33px;
  border: none;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.is-skeleton-item.section_mycard
  .mycard_more {
  display: none;
}
/* // [24.12.03 : lyr] 큰글씨 모드 스켈레톤 추가 */
/* // end .. ========================= [ 큰글씨 모드 ] ========================= */

/* // [24.11.01: lyr] [WPM-8513] 하나페이 주요화면 개편 */

/* 24.12.11 토스트팝업, 확대 - sayho */
.layer-toast {
  position: fixed;
  top: 30%;
  left: 50%;
  padding: 8px 16px;
  transform: translate(-50%, 0);
  background: rgba(18, 18, 18, 0.8);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 1.8rem;
  line-height: 2.3rem;
  white-space: nowrap;
  font-weight: 400;
  opacity: 0;
  visibility: hidden;
  transition: 0.7s all;
}
.layer-toast i {
  width: 32px;
  height: 32px;
  background: url(/images/new_renewal/ic_scale_zoom.svg) no-repeat center / 100%;
}
.layer-toast.is-show {
  opacity: 1;
  visibility: visible;
  z-index: 999;
}
/* [25.01.10: lyr] [WPM-???] [마이/메인] '마이탭 모달 퍼블수정 요청'_'박선솔' 사전협의-2024-12-30 */
.renewal_2024 .contents-wrap.type-main-renewal .footer-wrap .footer-info-link {
  font-size: 1.6rem;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_banner
  .page-section-inner {
  padding: 16px 16px 0;
  background-color: transparent;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_banner
  .page-section-inner
  .section_banner-link {
  display: block;
}
.renewal_2024
  .contents-wrap.type-main-renewal.large-mode
  .page-contents
  .page-section.section_banner
  .page-section-inner
  .section_banner-link
  img {
  width: 100%;
}
/* 팝업형 GNB */
.renewal_2024 .layer-gnb .gnb-head .header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  align-items: center;
}
.renewal_2024 .layer-gnb .gnb-head .header .header-right {
  display: flex;
  gap: 16px;
}
.renewal_2024 .layer-gnb .gnb-head .header .header-right .btn-util {
  position: relative;
  text-align: center;
}
.renewal_2024 .layer-gnb .gnb-head .header .header-right .btn-util i {
  position: relative;
  z-index: 1;
}
.renewal_2024 .layer-gnb .gnb-head .header .header-right .btn-util i,
.renewal_2024 .layer-gnb .gnb-head .header .header-right .btn-util i img {
  display: block;
  height: 28px;
  min-width: 28px;
  margin: 0 auto;
}
.renewal_2024 .layer-gnb .gnb-head .header .header-right .btn-util .badge {
  position: absolute;
  right: 0;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background: #f14a76;
}
.renewal_2024 .layer-gnb .gnb-head .header .header-right .btn-util .btn-util-txt {
  display: block;
  width: 100%;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
}
.renewal_2024 .layer-gnb .gnb-head .header .header-right .btn-util .speech_bubble {
  position: absolute;
  top: 5.5px;
  top: 1.5px; /* [25.03.07 : lyr] fix-top-wrap의 각 메뉴에 텍스트를 빼고 아이콘만 유지하는 걸로 변경 되면서 [챗봇] 말풍선 위치 조정이 필요하여 수정 되었습니다 */
  right: calc(100% + 10px);
  z-index: 0;
  width: auto;
  /* display: none; */
  visibility: hidden;
  transform-origin: right;
}
.renewal_2024 .layer-gnb .gnb-head .header .header-right .btn-util .speech_bubble p {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px;
  background: linear-gradient(90deg, #28b964 0%, #00aa78 50%, #02b4b9 91%);
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  border-radius: 15px;
  letter-spacing: -0.7px;
}
.renewal_2024 .layer-gnb .gnb-head .header .header-right .btn-util .speech_bubble p::after {
  content: "";
  position: absolute;
  right: -4px;
  top: calc(50% - 2px);
  display: block;
  width: 9px;
  height: 7px;
  background: url(/images/new_renewal/ic_speech_bubble.svg) no-repeat 0 0 / 100% auto;
  transform: translateY(-50%);
}
.renewal_2024 .layer-gnb .gnb-head .header .header-right .btn-util .speech_bubble.on {
  visibility: visible;
  opacity: 0;
  z-index: 10;
  animation: speechBubble 10s forwards 0.5s;
}
.renewal_2024 .layer-gnb .gnb-head .header .header-title .title {
  font-size: 24px;
  line-height: 50px;

  font-weight: 700;
}
.renewal_2024 .layer-gnb .gnb-body-doc {
  padding: 0 16px;
}
/* 하나1Q 에서 실행했을 때 붙는 클래스 (.call_hana1q) */
.renewal_2024.call_hana1q .contents-wrap.type-main-renewal .page-contents .page-section.section_life_service {
  padding-bottom: 170px;
}
.renewal_2024.call_hana1q .dock-menu-sub-area .type-contents.is-folded,
.renewal_2024.call_hana1q
  .dock-menu-sub-area
  .type-contents.is-folded:not(:has(.swiper-slide-active .specification-item-block)) {
  top: -40px;
}
.renewal_2024.call_hana1q .dock-menu-sub-area .type-contents:not(:has(.swiper-slide-active .specification-item-block)) {
  top: -133px;
}
/* [2025-04-11 KJH] [WPM-] 하나원큐에서 진입시 명세서 팝업 클릭 후 위치 */
.renewal_2024.call_hana1q
  .dock-menu-sub-area.active
  .type-contents:not(:has(.swiper-slide-active .specification-item-block)) {
  top: 62px;
}
.renewal_2024.call_hana1q
  .dock-menu-sub-area
  .type-contents.scrolling:not(:has(.swiper-slide-active .specification-item-block)),
.renewal_2024.call_hana1q .dock-menu-sub-area .type-tab.scrolling,
.renewal_2024.call_hana1q .dock-menu-sub-area .type-contents.scrolling {
  top: -11px;
}
.renewal_2024.call_hana1q .dock-menu-sub-area .type-tab:has(.fix-bottom-modal-link) {
  top: 54px;
}
.renewal_2024.call_hana1q .dock-menu-sub-area .type-tab:has(.fix-bottom-modal-menu) {
  top: 49px;
}

/* //[25.01.10: lyr] [WPM-???] [마이/메인] '마이탭 모달 퍼블수정 요청'_'박선솔' 사전협의-2024-12-30 */
/* [WPM-9519] [쇼핑/보험/대출] '쇼핑 미로그인 화면'_'서민경' 사전협의-2024-12-19 */
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_shopping {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  height: calc(100vh - 145px);
  padding: 0;
  background-color: #fff;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_shopping .page-section-inner {
  width: 100%;
  height: auto;
  padding: 0 16px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_shopping .logout-main-title {
  font-size: 20px;
  font-weight: 500;
  text-align: center;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_shopping .logout-main-visual-img {
  margin-top: 4px;
  text-align: center;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_shopping
  .logout-main-visual-img
  img {
  width: 234px;
}
/* [25.05.16: jy] 모바일웹 자산, 결제 소개화면 */
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_shopping.type2 {
  height: calc(100vh - 190px);
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_shopping.type2 .shopping_guide-slide .swiper-pagination {
  bottom: 0;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_shopping.type2 .shopping_guide-slide .btn_list {
  margin-top: 12px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_shopping .logout-main-visual .logout-main-title.font-weight-bold {
  font-weight: 700;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_shopping .logout-main-visual .logout-main-sub {
  display: block;
  margin-top: 6px;
  color: #999;
  font-size: 18px;
  font-weight: 500;
  line-height: 125%;
  letter-spacing: -0.25px;
  text-align: center;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_shopping .logout-main-visual .logout-main-visual-img.v2 img {
  width: 268px;
}
/* // [25.05.16: jy] 모바일웹 자산, 결제 소개화면 */
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_shopping .logout-flowing_logo {
  margin: 12px -16px;
  overflow: hidden;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_shopping .logout-flowing_logo-img {
  display: flex;
  gap: 16px;
  width: 1732px;
  animation: autoScrollHor 15s linear infinite;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_shopping
  .logout-flowing_logo-img
  img {
  height: 40px;
}
@keyframes autoScrollHor {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, 0);
  }
}
/* [25.03.07 : lyr] 가이드용 슬라이드 추가 */
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_shopping .shopping_guide-slide {
  position: relative;
  height: 400px;
  margin: 0 -16px;
  overflow: hidden;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_shopping
  .shopping_guide-slide
  .swiper-wrapper {
  height: 318px;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_shopping
  .shopping_guide-slide
  .btn_list {
  position: relative;
  padding: 0 16px;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_shopping
  .shopping_guide-slide
  .btn_list::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 1;
  height: 80px;
  background: linear-gradient(0deg, #fff 50%, transparent 100%);
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_shopping
  .shopping_guide-slide
  .btn_list
  .ui-button {
  position: relative;
  z-index: 1;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_shopping
  .shopping_guide-slide-controller {
  position: absolute;
  bottom: 5px;
  left: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0;
  transform: translateY(220%);
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_shopping
  .shopping_guide-slide
  .swiper-pagination {
  display: flex;
  justify-content: center;
  gap: 5px;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_shopping
  .shopping_guide-slide
  .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  margin: 0;
  border: 0;
  border-radius: 6px;
  background: #999ea0;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_shopping
  .shopping_guide-slide
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 24px;
  background: #111;
}
/* [25.01.13 : lyr] 쇼핑 비로그인, 트래블버킷 비로그인 메인 > 하단 회색 배경 제어 (footer & 하단 fix bottom menu의 유무에 따른 여백 제어) */
/* [25.01.21 : lyr] js-fake-bottom의 위치 케이스 추가 */
#wrap .renewal_2024 ~ .js-fake-bottom,
#wrap .renewal_2024 .page-section.section_shopping ~ .js-fake-bottom {
  padding-bottom: 140px;
  background-color: #f8f8f8;
}
#wrap.is-native .renewal_2024 ~ .js-fake-bottom,
#wrap.is-native .renewal_2024 .page-section.section_shopping ~ .js-fake-bottom {
  padding-bottom: 0;
  background-color: #fff;
}
#wrap [data-wrap="travelBucket"] ~ .footer-wrap {
  padding-bottom: 140px;
  background-color: #f8f8f8;
}
#wrap.is-native [data-wrap="travelBucket"] ~ .footer-wrap {
  padding-bottom: 0;
  background-color: #fff;
}
/* // [WPM-9519] [쇼핑/보험/대출] '쇼핑 미로그인 화면'_'서민경' 사전협의-2024-12-19 */

/* [25.01.17 : lyr] [WPM-9815] 금융서비스 텍스트 롤링 추가 */
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_financial_service .type-rolling {
  position: relative;
  height: 22px;
  overflow: hidden;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .type-rolling
  .finansv-text {
  animation: autoScrollVer 4s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
@keyframes autoScrollVer {
  0% {
    transform: translateY(0);
  }
  16.666667% {
    transform: translateY(-22px);
  }
  33.333333% {
    transform: translateY(-22px);
  }
  50% {
    transform: translateY(-22px);
  }
  66.666667% {
    transform: translateY(-44px);
  }
  83.333333% {
    transform: translateY(-44px);
  }
  100% {
    transform: translateY(-44px);
  }
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_financial_service
  .finansv-text
  .color-green {
  padding: 0 1px 0 3px;
  color: #029c94;
}
/* // [25.01.17 : lyr] [WPM-9815] 금융서비스 텍스트 롤링 추가 */
/* [25.01.17 : lyr] [WPM-9815] 마이화면 상단 하나머니 영역 스켈레톤 미노출 처리 (금액만 스켈레톤) */
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_hanamoney
  .amount_box
  .amount_box-link.is-loading {
  display: none;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_hanamoney
  .amount_box
  .amount_box-link.is-skeleton-item.is-loading {
  display: inline-block;
  width: calc(100vw * 40 / 100);
  height: 38px;
  padding: 0 16px;
  border-radius: 20px;
  background: var(--skeleton-bg-color);
  position: relative;
  overflow: hidden;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_hanamoney
  .amount_box
  .amount_box-link.is-skeleton-item.is-loading::before {
  content: "";
  position: absolute;
  left: -100%;
  transform: translateY(-50%);
  top: 50%;
  display: block;
  width: 100%;
  height: calc(100vw * 25 / 100);
  filter: blur(20px);
  background: var(--skeleton-bg-color-ani-01);
  animation: skeletonAni 3s linear infinite;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_hanamoney
  .amount_box
  .amount_box-link.is-skeleton-item.arr_right::after {
  display: none;
}
/* // [25.01.17 : lyr] [WPM-9815] 마이화면 상단 하나머니 영역 스켈레톤 미노출 처리 (금액만 스켈레톤) */
/* // end .. ========================= [ [WPM-8513] 하나페이 주요화면 개편 ] ========================= */

/* [25.02.03 : lyr] 카드 세로로 세우기 */
.slide-card .card-detail.type-vertical {
  width: 250px;
}
.slide-card .card-detail.type-vertical .card-image .card-image-inner {
  -webkit-transform: rotate(90deg) scale(0.63060748);
  transform: rotate(90deg) scale(0.63060748);
}

/* [25.02.14 : lyr] 마이/메인 > 마이데이터 만료예정자 유도 넛지 */
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure
  .page-section-box {
  padding: 25px 0;
  border-top: 0;
  border-bottom: 1px solid #e1e1e1;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure
  .page-section-box:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure
  .amount_box-area.asset {
  margin-bottom: 0;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_asset_expenditure .expire-nudge {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 16px;
  text-align: left;
  border-radius: 17px;
  background: linear-gradient(270deg, #2bd3f0 0%, #03cdc5 100%);
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure
  .expire-nudge::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: 16px;
  background-color: #fff;
}
/* 250423 */
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure
  .expire-nudge::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: url(/images/new_renewal/ic_arrow_r_green.png) no-repeat center / 12px;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure
  .expire-nudge-block
  + .expire-nudge-block {
  margin-top: 8px;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure
  .expire-nudge-dday {
  display: inline-block;
  padding: 4px 8px;
  font-size: 1.6rem;
  font-weight: bold;
  border-radius: 16px;
  background: linear-gradient(270deg, #0ca2b7 0%, #4b81d5 100%);
  color: #fff;
}
/* 250423 */
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure
  .expire-nudge-text {
  /* margin-top: 8px; */
  font-size: 1.6rem;
  font-weight: 500;
  color: #111;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure
  .expire-nudge-text
  strong {
  font-weight: bold;
  color: #8a6cff;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure
  .expire-nudge-desc {
  margin-top: 4px;
  font-size: 1.2rem;
  font-weight: 400;
  color: #6b7583;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure
  .expire-nudge-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 250423
  .renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure
  .expire-nudge-link::after {
  content: "";
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  background: url(/images/new_renewal/ic_arrow_r_01.svg) no-repeat center / 12px;
} */
/* // [25.02.14 : lyr] 마이/메인 > 마이데이터 만료예정자 유도 넛지 */

/* [25.02.28 : lyr] 툴팁 */
.renewal_2024 .btn_list .btn_list-items {
  position: relative;
}
.renewal_2024 .btn_list .btn_list-items .tooltip-box {
  position: absolute;
  top: -30px;
  right: 0;
}
.renewal_2024 .tooltip-box span {
  position: relative;
  padding: 4px 10px;
  font-size: 13px;
  line-height: 1;
  font-weight: 400;
  white-space: nowrap;
  border-radius: 20px;
  background: linear-gradient(90deg, #2b77f0, #db5fb0);
  color: #fff;
}
.renewal_2024 .tooltip-box span::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: -9px;
  z-index: -1;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  transform: translate(-50%, -80%) rotate(45deg);
  background: linear-gradient(55deg, #9e68c6 0%, #ba64bc 90%);
}
/* // 툴팁 */
/* [25.03.05 : lyr] 자산ㆍ지출 > nodata 디자인 타입 추가 */
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section
  .page-section-wrap.type-nodata
  .amount_nodata-desc-type2 {
  width: 100%;
  padding: 16px;
  text-align: center;
  border-radius: 16px;
  background: #f4f6f8;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section
  .page-section-wrap.type-nodata
  .amount_nodata-desc-type2
  .nodata-icon {
  display: inline-block;
  width: 70px;
  margin: 0 auto;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section
  .page-section-wrap.type-nodata
  .amount_nodata-desc-type2
  .nodata-icon
  img {
  width: 100%;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section
  .page-section-wrap.type-nodata
  .amount_nodata-desc-type2
  .nodata-title {
  margin-top: 19px;
  font-size: 16px;
  font-weight: 600;
  color: #111;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section
  .page-section-wrap.type-nodata
  .amount_nodata-desc-type2
  .nodata-text {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: #666;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section
  .page-section-wrap.type-nodata
  .amount_nodata-desc-type2
  hr {
  margin: 12px 0;
  border: 0;
  border-top: 1px solid #d0d6dd;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section
  .page-section-wrap.type-nodata
  .amount_nodata-desc-type2
  .link-text {
  font-size: 16px;
  font-weight: 500;
  color: #029c94;
}
/* // nodata 디자인 타입 추가*/

/* [25.03.12 : lyr] 마이메인 추가수정 */
/* 쿠팡 팝업을 띄울 때 하단 탭바와 곂치는 현상 수정 */
.fix-bottom-wrap {
  z-index: 490;
}
.renewal_2024 .layer-gnb .gnb-head .header .header-right {
  gap: 12px;
}
.renewal_2024 .layer-gnb .gnb-head .header .header-right .btn-util i,
.renewal_2024 .layer-gnb .gnb-head .header .header-right .btn-util i img {
  width: 32px;
  height: 32px;
}
/* // [25.03.12 : lyr] 마이메인 추가수정 */

/* [25.03.17 : lyr] 헤더 아이콘 사이즈 맞춤 */
.renewal_2024 .header.type-renewal .header-utils .btn-util i img {
  width: 32px;
}

/* [25.03.17 : lyr] 비로그인 메인 헤더 아이콘 사이즈 32*32로 수정 (선배포불가) */
.heander-logoff-main .header-right {
  gap: 12px;
}
.heander-logoff-main .btn-util,
.heander-logoff-main .btn-util i {
  width: 32px;
  height: 32px;
}
.heander-logoff-main .btn-util i img {
  width: 100%;
}

/* [25.03.27 : lyr] 헤더 > 홈 버튼 화이트 버전 추가 (MYO_001_250327.html) */
[data-wrap="onethecard"] .header-title {
  font-weight: 500 !important;
}
[data-theme="dark"] .fix-top-wrap .header .header-button.type-home {
  background-image: url("/images/icon/ic-header-home_w.svg");
}

/* [25.03.25 : lyr] 헤더 > 홈 버튼 추가 */
.renewal_2024 .header.type-renewal .header-utils .btn-util.ic-home i {
  display: flex;
  align-items: center;
  justify-content: center;
}
.renewal_2024 .header.type-renewal .header-utils .btn-util.ic-home i img {
  min-width: 26px;
  width: 26px;
  height: 26px;
}

/* [25.04.14 : KJH] WPM-10817 지출 노티 문구 추가 */
.spendingAdvice {
  margin-top: 16px;
}
.spendingAdvice-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 12px 24px;
  background-color: #f5f8f8;
  border-radius: 14px;
}
.spendingAdvice-txt small {
  display: block;
  color: #374248;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}
.spendingAdvice-txt strong {
  display: block;
  color: #111;
  font-size: 15px;
  line-height: 1.5;
}
.spendingAdvice-greenTxt {
  display: flex;
  align-items: center;
  column-gap: 2px;
  font-size: 12px;
  background: linear-gradient(90deg, #28b964 0%, #00aa78 50%, #02b4b9 91%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.spendingAdvice-greenTxt::after {
  content: "";
  width: 12px;
  height: 12px;
  background: url(/images/new_renewal/ic_arrow_r_green.png) no-repeat center / contain;
}

/* [25.04.14 : KJH] WPM-10817 정기수집 미수행 고객 대비 풀팝업 추가 */
.type-longTime {
  position: relative;
}
.type-longTime-inner {
  position: absolute;
  left: 35px;
  top: 50%;
  transform: translateY(-150%);
}
.longTime-tit {
  color: #888;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
}
.longTime-txt {
  margin-top: 8px;
  color: #000;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.5;
}
.longTime-desc {
  display: block;
  margin-top: 16px;
  color: #029c94;
  font-weight: 400;
  font-size: 14px;
}
.ui-basic-button.type-underline {
  font-size: 1.4rem;
  color: #666666;
  text-decoration: underline;
  border: 0;
}
/* [25.04.21 반영예정 : oh] 10765 : 입력창 자동확대 방지를 위한 마크업 수정요청 */
.search-word-area .ui-input#menuKeyword,
.search-word-area .ui-input#keyword,
.search-word-area .ui-input#schTxt {
  width: 123.1%;
  height: 59.1px;
  padding: 8.6px 57.8px 8.6px 18.5px;
  font-size: 16px;
  transform: scale(0.8125);
  transform-origin: top left;
}
.toggle-search-form .ui-input-block.type-search {
  height: 48px;
}
.toggle-search-form .ui-input-block.type-search .ui-input#schTxt {
  padding-left: 54.15px;
}

/* [2025-04-30 KJH] [WPM-11020] 금융상품으로 결제 추가 */
.financePayment .btm-payment-btns {
  padding: unset;
}
.financePayment .btm-payment-btns li {
  flex: 1;
}
.financePayment .btm-payment-btns .ui-basic-button span {
  display: inline-block;
}
/* // [2025-04-30 KJH] [WPM-11020] 금융상품으로 결제 추가 */

/* [2025-04-30 KJH] [WPM-11032] 금액 부분 구조 수정 */
.my-paymentAmount {
  margin-left: 4px;
  color: #00a049;
}
/* // [2025-04-30 KJH] [WPM-11032] 금액 부분 구조 수정 */

/* [2025-05-09 kho] [WPM-11047] 이용내역 없을 때 별님이 이미지 보이기. with_star_img 추가 */
/* 마이메인 모달 > 최근이용내역 */
.renewal_2024 .main-btm-section-box .type-nodata.with_star_img {
  margin: 24px 0 38px;
}
.renewal_2024 .main-btm-section-box .type-nodata.with_star_img .amount_nodata-desc {
  padding-top: 88px;
  background: url(/images/etc/img_speaker_star.png) no-repeat 50% 0 / auto 80px;
}
/* 마이메인 큰글씨모드 > 최근이용내역 */
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section.type-nodata.with_star_img .amount_box-area .amount_nodata-desc {
  margin-top: 12px;
  padding-bottom: 10px;
}
.renewal_2024 .contents-wrap.type-main-renewal.large-mode .page-contents .page-section.type-nodata.with_star_img .amount_box-area .amount_nodata-desc .intersection-inner {
  padding-top: 100px;
  background: url(/images/etc/img_speaker_star.png) no-repeat 50% 0 / auto 92px;
}
/* //[2025-05-09 kho] [WPM-11047] 이용내역 없을 때 별님이 이미지 보이기. with_star_img 추가 */

/* [2025-05-13 : oh] [WPM-11164] 장기카드대출(카드론) 이용 동의 후 안내 화면 신규 요청 */
.ui-buttons-list.type-wrap .ui-buttons-item.type-full ~ .ui-buttons-item.type-full:not(.fixed-link-type) { /* [2025-05-14 kho] :not(.fixed-link-type) 추가 */
  margin-top: 1.2rem;
}
.ui-buttons-list.type-wrap .ui-buttons-item.type-full + .ui-buttons-item.type-full .type-underline {
  margin-top: -1rem;
}
/* [2025-06-13 : oh] 11515 상단 3개 버튼 영역 및 빠른 메뉴 영역 퍼블 작업 요청 */
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_hanamoney.amount_box_only {
  margin-top:-1.4rem;
  padding-top: 0 !important;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_hanamoney.amount_box_only .amount_box-area .amount_box:first-child {
  height:auto;
}

.border-underline {
  border-bottom: 1px solid #666;
}

/* [2025-08-26 KEJ] [WPM-12189] 추가 */
.section_quick_2025 .btn_list .btn_link {
  display: block;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_quick.section_quick_2025 .btn_list .btn_link-text{
  font-size: 1.5rem;
  line-height: inherit;
  margin: 0px;
  padding: 14px 0px 0px 14px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_quick.section_quick_2025 .btn_list .btn_link-text strong::after{
  display: none !important;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_quick.section_quick_2025 .btn_list .btn_link-sub-text{
  font-size: 1.3rem;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_quick.section_quick_2025 .btn_list .btn_link .btn_link-icon{
  display: block;
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 72px;
  height: 59px;
}

.section_quick_2025 .motion_vip_img {
  position: absolute;
  bottom: 0px;
  right: 0px;
  display: inline-block;
  will-change: transform;
  animation: motion_vip_img 1s ease-in-out infinite alternate;
}

@keyframes motion_vip_img {
  to {
      transform: translateY(-3px);
  }
}

.btn_link.type_classic{
  background-color: #e7edf1 !important;
}
.btn_link.type_royal{
  background-color: #fff5d6 !important;
}
.btn_link.type_first{
  background-color: #e8efff !important;
}
.btn_link.type_vvip{
  background-color: #f2ebff !important;
}
.btn_link.type_me{
  background-color: #e8ecff !important;
}
/* //[2025-08-26 KEJ] [WPM-12189] 추가 */


/* [2025-09-19 KJH] [WPM-] 하나원큐에서 소비쿠폰 화면 대응 / [2026-04-08 kho] [고유가 피해지원] .consumption- 셀렉터에 .gov- 셀렉터 추가(정부지원) */
/* layer-clause-detail */
.layer-clause-detail .ui-layer__body-inner {
  padding-top: 10px;
}

/* layer-flow-control */
.layer-flow-control {
  z-index: 999999;
  opacity: 1;
}
.flow-control {
  box-sizing: border-box;
  width: 320px;
  padding: 40px 20px 20px;
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
}
.flow-control-logo {
  width: 66px;
  height: 18px;
  margin: 0 auto 25px;
  background: url("/images/common/footer-logo.svg") no-repeat 50% 50%;
}
.flow-control-title {
  margin: 0 0 10px;
  font-size: 2.1rem;
  line-height: 3rem;
  text-align: center;
}
.flow-control-title strong {
  font-weight: 700;
}
.flow-control-text {
  margin: 0;
  color: var(--gray-80);
  font-size: 1.5rem;
  line-height: 2.2rem;
  text-align: center;
}
.flow-control-info {
  margin-top: 25px;
  padding: 20px;
  border-radius: 6px;
  background-color: var(--gray-20);
}
.flow-control-info-title {
  margin: 0;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.flow-control-info-text {
  margin: 10px 0 0;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.flow-control-info .link-row {
  margin-top: 10px;
}
.flow-control-progress {
  display: none;
}

/* 하단 버튼 */
.gov-page-contents .page-buttons .ui-basic-button,
.gov-page-contents .ui-buttons button,
.gov-page-contents .ui-basic-button.type-underline,
.consumption-page-contents .page-buttons .ui-basic-button,
.consumption-page-contents .ui-buttons button,
.consumption-page-contents .ui-basic-button.type-underline {
  font-size: 1.7rem;
}
/* // 하단 버튼 */

/* 스크롤 내렸을 때 버튼 */
.gov-page-contents .page-buttons .ui-button[data-pageEndActive],
.consumption-page-contents .page-buttons .ui-button[data-pageEndActive] {
  border-color: var(--gray-30);
  background-color: var(--gray-30);
  color: var(--gray-60);
  pointer-events: none;
  transition: 0.2s;
}
.gov-page-contents .page-buttons.is-bottom .ui-button[data-pageEndActive],
.consumption-page-contents .page-buttons.is-bottom .ui-button[data-pageEndActive] {
  border-color: var(--primary);
  background-color: var(--primary);
  color: #fff;
  pointer-events: unset;
}

/* 모달 내용 */
.layer-info {
  font-size: 1.7rem;
  line-height: 1.5;
}
/* // 모달 내용 */

/* 소비쿠폰 사용 가능 매장 찾기 */
.gov-page-contents .stickyBanner,
.consumption-page-contents .stickyBanner {
  position: sticky;
  top: 50px;
  z-index: 1;
  width: 100%;
  height: 28.8888vw;
  margin-top: 38px;
  background-color: #fff;
}
.gov-page-contents .stickyBanner-link,
.consumption-page-contents .stickyBanner-link {
  display: block;
  width: 100%;
  height: 24.4444vw;
  margin: 0 auto;
}
.gov-page-contents .stickyBanner-link img,
.consumption-page-contents .stickyBanner-link img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
/* // 소비쿠폰 사용 가능 매장 찾기 */

/* // [2025-09-19 KJH] [WPM-] 하나원큐에서 소비쿠폰 화면 대응 */

/* [2025-10-21 kho] [WPM-12815] 알림함 광고배너영역 추가 */
.page-contents.type-notify .usage-default-item.type-ad .banner:first-child {
  margin-top: 0;
}
/* //[2025-10-21 kho] [WPM-12815] 알림함 광고배너영역 추가 */

/* [2025-12-03 KJH] 아이폰 15에서 팝업 터치 역역 오류 수정 */
/* @supports (font: -apple-system-body) {
  html,
  body,
  #wrap {
    overflow: hidden;
  }

  .layout-wrap {
    height: 100%;
    overflow-y: auto;
  }
} */
/* // [2025-12-03 KJH] 아이폰 15에서 팝업 터치 역역 오류 수정 */

/* [2026-02-25 kho] [WPM-13946] 즉시결제 완료화면 버튼 툴팁 추가 */
/* 툴팁 배경색 */
.ui-button-tooltip-text.tooltip-bg-lightblue1 {
  color: #000;
  background: #def4f3;
}
.ui-button-tooltip-text.tooltip-bg-lightblue1::after {
  border-width: 6px 4px 0;
  border-top-color: #def4f3;
}

/* 아이콘 있는 툴팁 */
.ui-button-tooltip-text.type-icon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  width: max-content;
  text-align: center;
  padding: 6px 16px 5px;
  line-height: 20px;
  letter-spacing: -0.02em;
}
.ui-button-tooltip-text.type-icon .tooltip-icon {
  height: 20px;
  overflow: hidden;
}
.ui-button-tooltip-text.type-icon .tooltip-icon img {
  display: block;
  height: 100%;
}
/* //[2026-02-25 kho] [WPM-13946] 즉시결제 완료화면 버튼 툴팁 추가 */

/* [2026-09-03 kho] [WPM-15605] 쇼핑 메인 개편 */
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_shopping .shopping_guide-slide-v2608 {
  height: auto;
  padding-bottom: 20px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .page-section.section_shopping .shopping_guide-slide-v2608 .swiper-wrapper {
  height: auto;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .section_shopping .shopping_guide-slide-v2608 .logout-main-visual-img {
  margin-top: 0;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .section_shopping .shopping_guide-slide-v2608 .logout-main-visual-img img {
  width: 100%;
  max-width: 360px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .section_shopping .shopping_guide-slide-v2608 .shopping_guide-slide-controller,
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .section_shopping .shopping_guide-slide-v2608 .swiper-pagination {
  bottom: 0;
  transform: none;
  margin-block: 0;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .section_shopping .shopping_guide-slide-v2608 .btn_list {
  margin-top: -48px;
}
.renewal_2024 .contents-wrap.type-main-renewal .page-contents .section_shopping .shopping_guide-slide-v2608 .btn_list::before {
  display: none;
}
/* //[2026-09-03 kho] [WPM-15605] 쇼핑 메인 개편 */
