/*

  ! 주의 !
  본 파일은 "EUC-KR"로 인코딩 되어있습니다.
  "UTF-8"로 설정하면 본 주석의 텍스트가 깨져 보입니다.
  작업 전 반드시 인코딩 모드 "EUC-KR"로 변경 후 작업해주세요.

  ! Warning !
  This file is encoded in "EUC-KR".
  If you set it To "UTF-8", the text in this comment will appear corrupted.
  Before Proceeding, be sure to change the encoding mode to "EUC-KR"
  
 */

/* completion */
.page-contents.type-completion {
  padding-top: 40px;
}
.page-contents.type-completion + .ui-notice-wrap {
  padding: 36px 24px;
}
.offer-area {
  padding: 20px;
  border-radius: 6px;
  background-color: var(--gray-20);
  color: var(--basic);
}
.offer-title {
  margin-bottom: 10px;
  padding-left: 23px;
  background: url("/images/icon/ic-suggest.svg") no-repeat 0 2px / auto 18px;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 22px;
}
.offer-text {
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 18px;
}
.offer-buttons {
  margin-top: 10px;
}
/* type-login */
@keyframes showItemUp {
  0% {
      opacity: 0;
      transform: translateY(30px);
  }
  100% {
      opacity: 1;
      transform: translateY(0px);
  }
}
.page-contents.type-login {
  padding-top: 35px;
}
.type-login .page-title {
  margin-bottom: 40px;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 3.3rem;
  animation: 0.5s 0s ease-in-out both showItemUp;
}
.type-login .big-text {
  animation: 0.5s 0s ease-in-out both showItemUp;
}
.type-login .big-text + .ui-buttons {
  margin-top: 75px;
}
.type-login .form-bottom + .ui-buttons,
.type-login .ui-buttons .ui-buttons-item + .ui-buttons-item {
  margin-top: 48px;
}
.type-login .ui-buttons .ui-buttons-item {
  text-align: center;
}
.js-ui-tab-panel + .ui-buttons {
  margin-top: 16px;
}
.type-login .ui-buttons .ui-buttons-item.align-right {
  text-align: right;
}
.type-login .ui-buttons .ui-buttons-item .ui-button {
  position: relative;
  display: inline-flex;
  align-items: center; /* [24.11.08 : lyr] [다른방법으로 로그인] 옆에 화살표 정렬 수정 */
}
.type-login .ui-buttons .ui-buttons-item .ui-button + .ui-button {
  margin-left: 12px;
}
.type-login .ui-buttons .ui-buttons-item .ui-button + .ui-button:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--primary);
  transform: translateY(-50%);
}
.type-login .page-buttons.type-fixed {
  padding: 0;
  border-top: 0;
}
.ui-button.type-new {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 106px;
  border-radius: 28px 28px 0 0;
  background-color: #f4f6f8;
  font-size: 15px;
}
.ui-button.type-new.type-white {
  background-color: #fff;
}
.ui-button.type-new span {
  display: block;
  margin-right: 5px;
  color: #fc4b77;
  font-weight: 700;
  font-size: 10px;
}
.ui-button.type-new strong {
  display: block;
  margin-left: 3px;
}
.type-login .big-text + .page-tab-panel.type-login {
  margin-top: 33px;
}
.type-login .login-tit-wrap {
  display: flex;
  justify-content: center;
}
.type-login .login-tit-wrap .tit {
  margin-right: 5px;
  color: #585858;
  font-size: 1.4rem;
}
.type-login .login-tit-wrap + .easy-pw-wrap {
  margin-top: 17px;
}
.support-list {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.support-item {
  position: relative;
  padding-left: 13px;
  line-height: 18px;
}
.support-item + .support-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 5px;
  width: 3px;
  height: 3px;
  border-radius: 100%;
  background-color: var(--primary);
  transform: translateY(-50%);
}
.login-method {
  margin-top: 35px;
  text-align: center;
}
.login-method-title {
  position: relative;
  margin-bottom: 25px;
  color: var(--gray-70);
  font-size: 13px;
  line-height: 18px;
}
.login-method-title::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background-color: var(--gray-30);
}
.login-method-title .inner {
  position: relative;
  padding: 0 10px;
  background-color: #fff;
}
.login-method-item:not(:first-child) {
  margin-top: 12px;
}
.login-method-button {
  width: 100%;
  height: 48px;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
  font-size: 15px;
  line-height: 20px;
}
.login-method-button::before {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  background: no-repeat 50% 50% / 100% auto;
}
.type-app .login-method-button::before {
  background-image: url("/images/icon/ic-login-app.svg");
}
.type-certificate .login-method-button::before {
  background-image: url("/images/icon/ic-login-certificate.svg");
}
.type-disposable .login-method-button::before {
  background-image: url("/images/icon/ic-login-disposable.svg");
}
.login-method-list2 .login-method-item:not(:first-child) {
  margin-top: 0;
}
.login-method-list2 .login-method-item + .login-method-item {
  border-top: 1px solid #e3e3e3;
}
.login-method-list2 .login-method-button {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 8px;
  border: 0;
}
.login-method-list2 .login-method-button::before {
  width: 25px;
  height: 20px;
  margin-right: 36px;
}
.login-method-list2 .type-simple .login-method-button::before {
  /* 250117 확장자 변경 */
  background: url("/images/icon/ic-login-simple.svg") no-repeat center / 100% 20px;
}
.login-method-list2 .type-id .login-method-button::before {
  /* 250117 확장자 변경 */
  background: url("/images/icon/ic-login-id.svg") no-repeat center / 19px 20px;
}
.login-method-list2 .type-certificate .login-method-button::before {
  /* 250117 확장자 변경 */
  background: url("/images/icon/ic-login-certificate.svg") no-repeat center / 19px 19px;
}
.login-method-list2 .type-app .login-method-button::before {
  background: url("/images/common/logo-appicon02.png") no-repeat center / 21px 19px;
}
.login-method-list2 .type-easy-pw .login-method-button::before {
  /* 250117 확장자 변경 */
  background: url("/images/icon/ic-login-easy-pw.svg") no-repeat center / 20px 20px;
}
.login-method-list2.type-no-line .login-method-button::before {
  margin-right: 20px;
}
/* 22.08.18 라인 추가 */
/* .login-method-list2.type-no-line .login-method-item + .login-method-item {
border-top: 0;
}
.login-method-list2.type-no-line .login-method-button {
height: 50px;
}*/
.layer-container.layer-login-new .ui-layer {
  background-color: #f4f6f8;
}
.layer-container.layer-login-new .header__title {
  display: flex;
  align-items: center;
  font-weight: 300;
  font-size: 16px;
  line-height: 1;
}
.layer-container.layer-login-new .header__title span {
  display: inline-block;
  margin-right: 5px;
  color: #fc4b77;
  font-weight: 700;
  font-size: 13px;
}
.layer-container.layer-login-new .header__title strong {
  display: inline-block;
  margin-left: 5px;
  font-weight: 500;
}
.layer-wrap--slide .layer-container.layer-login-new .ui-layer__head .header {
  padding-top: 48px;
  padding-bottom: 38px;
}
.layer-container.layer-login-new .ui-layer__body:last-child .ui-layer__body-inner {
  padding-bottom: 48px;
}
.join-type-tit {
  color: #666;
  font-weight: 500;
  font-size: 16px;
}
.join-type-tit + .join-type-list {
  margin-top: 8px;
}
.join-type-list li + li {
  margin-top: 15px;
}
.join-type-list li .join-type-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 86px;
  padding: 0 22px;
  border-radius: 15px;
  background-color: #fff;
  font-weight: 700;
  font-size: 19px;
}
.join-type-list li .join-type-button:before {
  content: "";
  display: block;
  width: 25px;
  height: 28px;
  margin-right: 15px;
}
.join-type-list li.type-simple .join-type-button:before {
  background: url("/images/icon/ico-new-simple.png") no-repeat center / 100%;
}
.join-type-list li.type-join .join-type-button:before {
  background: url("/images/icon/ico-new-join.png") no-repeat center / 100%;
}
.join-type-list li.type-app .join-type-button:before {
  background: url("/images/common/logo-appicon02.png") no-repeat center / 100%;
}
/* 23.08.03 아이콘 추가 mj*/
.join-type-list li.type-loan .join-type-button:before {
  background: url("/images/icon/ico-new-loan.png") no-repeat center / 100%;
  background-size: 25px 28px;
}
/* // 23.08.03 아이콘 추가 */

.join-type-list li .join-type-button:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 22px;
  display: block;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background: url("/images/icon/btn-more-l.svg") no-repeat 100% 50% / auto 12px;
}
.join-type-list + .join-type-tit {
  margin-top: 56px;
}
.join-type-list li.type-app .join-type-button .txt-area {
  text-align: left;
}
.join-type-list li.type-app .join-type-button .txt-area strong {
  font-weight: 700;
}
.join-type-list li.type-app .join-type-button .txt-area p {
  color: #707070;
  font-weight: 300;
  font-size: 14px;
}
/* type-confirm-result */
.type-confirm-result .info-result {
  padding-top: 115px;
  background: no-repeat 0 0 / 90px auto;
  font-weight: 300;
  font-size: 2.1rem;
  line-height: 30px;
}
.info-result.type-id {
  background-image: url("/images/icon/ic-find-complete.svg");
}
.type-confirm-result.type-none {
  padding-top: 60px;
}
.type-confirm-result.type-none .info-result.type-id {
  background-image: url("/images/icon/ic-find-error.svg");
}
/* customer center */
.type-center-main .page-title {
  position: relative;
  margin-bottom: 0;
  padding-bottom: 156px;
}
.type-center-main .page-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 131px;
  height: 131px;
  background: url("/images/contents/cs-01.gif") no-repeat 50% 50%/100% auto;
  transform: translateX(-50%);
}
.type-center-main .form-bottom {
  margin-top: 25px;
}
.inquiry-item:first-child {
  border-top: 1px solid var(--gray-30);
}
.inquiry-item {
  border-bottom: 1px solid var(--gray-30);
}
.inquiry-item .item-block {
  padding-top: 25px;
  padding-bottom: 25px;
}
.inquiry-item .item-title {
  font-size: 1.5rem;
  line-height: 21px;
  word-break: break-all;
}
.inquiry-item .item-title .category {
  padding-right: 4px;
}
.inquiry-item .item-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  margin-top: 8px;
  color: var(--gray-70);
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.inquiry-item .tag {
  width: 49px;
  margin-right: 6px;
  border-radius: 13px;
  background-color: var(--gray-20);
  font-size: 1.2rem;
  line-height: 26px;
  text-align: center;
}
.inquiry-item.type-ing .tag {
  background-color: rgba(var(--secondary-rgb), 0.12);
  color: var(--secondary);
}
.inquiry-item.type-ing .tag.color-vip {
  background-color: rgba(var(--vip-rgb), 0.12);
}
.inquiry-item .item {
  position: relative;
}
.inquiry-item .item + .item {
  margin-left: 8px;
  padding-left: 9px;
}
.inquiry-item .item + .item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 10px;
  margin-top: -5px;
  background-color: var(--gray-60);
}
.inquiry-item.type-none {
  padding: 25px 0;
  text-align: center;
}
.inquiry-item.type-none::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  min-height: 150px;
}
.inquiry-item.type-none .item-text {
  display: inline-block;
  vertical-align: middle;
  font-size: 1.5rem;
  line-height: 22px;
}
.page-contents.type-chatting,
.page-contents.type-external {
  padding: 0;
}
.faq-category .ui-select-block::before {
  right: 15px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: url("/images/common/ic-select-arrow.svg") no-repeat 100% 50% / 100% auto;
}
.faq-category .ui-select {
  height: 48px;
  padding-right: 30px;
  padding-left: 15px;
  border: 1px solid #111; /* var(--secondary); */
  border-radius: 15px;
  font-size: 1.3rem;
}
.faq-list-area {
  margin-top: 25px;
}
.faq-total {
  margin-bottom: 15px;
}
.faq-list {
  border-top: 1px solid var(--gray-30);
}
.faq-item {
  border-bottom: 1px solid var(--gray-30);
}
.faq-item.js-accordion-opened {
  border-bottom-color: var(--gray-20);
}
.faq-opener {
  position: relative;
  padding: 25px 35px 25px 26px;
  font-size: 1.5rem;
  line-height: 21px;
}
.faq-opener::before {
  content: "Q";
  position: absolute;
  top: 28px;
  left: 0;
  width: 16px;
  border-radius: 8px;
  background-color: var(--basic);
  color: #fff;
  font-weight: 500;
  font-size: 1rem;
  line-height: 16px;
  text-align: center;
}
.faq-list-area .js-ui-accordion__layer {
  margin: 0 -24px;
}
.faq-contents {
  padding: 25px 24px;
  background-color: #f4f6f8;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 18px;
}
.faq-list-area.type-no-top-border {
  margin-top: -25px;
}
.faq-list-area.type-no-top-border .faq-list {
  border-top: none;
}
/* type-complaint-result */
.type-complaint-result .info-detail-title {
  color: var(--gray-70);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 21px;
}
/* card */
.card-select {
  overflow: auto;
  margin: 0 -24px;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
}
.card-select::before,
.card-select::after {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 24px;
}
.card-select-item {
  display: inline-block;
  vertical-align: top;
  width: 128px;
  font-size: 1rem;
  line-height: 1.2;
  white-space: normal;
}
.card-select-item .ui-label {
  overflow: hidden;
  margin: 0 -24px;
  padding: 0 24px;
}
.card-select-item:not(:first-child) {
  margin-left: 24px;
}
.card-select .card-image {
  margin: 15px auto;
}
.card-select .card-image-inner {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}
.card-select .ui-radio-object {
  margin: 0 auto;
}
.card-select .ui-label-text {
  color: var(--gray-70);
  font-size: 1.5rem;
  line-height: 22px;
}
.card-select .ui-radio:checked + .ui-label .ui-label-text {
  color: var(--basic);
}
/* card brand */
.card-brand-select .ui-radio-block.type-box {
  flex: 0 0 150px;
}
.card-brand-select .card-brand-logo {
  display: block;
  width: 90px;
  height: 48px;
  margin: 10px auto 20px;
}
.card-brand-select .card-brand-logo .img {
  max-width: 100%;
  max-height: 100%;
}
.card-brand-select .card-brand-logo .img.selected,
.card-brand-select .ui-radio:checked + .ui-label .card-brand-logo .img {
  display: none;
}
.card-brand-select .ui-radio:checked + .ui-label .card-brand-logo .img.selected {
  display: block;
}
/* toggle list */
.toggle-info-list {
  margin-top: 35px;
  padding: 0 15px;
  border-radius: 6px;
  background-color: var(--gray-20);
}
.toggle-info-item {
  position: relative;
  padding: 20px 50px 20px 0;
}
.toggle-info-item + .toggle-info-item {
  border-top: 1px solid var(--gray-30);
}
.toggle-info-item.type-wide {
  padding-top: 23px;
  padding-bottom: 23px;
}
.toggle-info-item .ui-toggle-block {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.toggle-info-title {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.toggle-info-title.type-align-top {
  align-items: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
}
.toggle-info-title .ui-button-question {
  margin-left: 5px;
}
.toggle-info-title .ui-tooltip-opener .ui-button-question {
  margin-left: 0;
}
.toggle-info-title .ui-tooltip-wrap {
  margin-left: 5px;
}
.toggle-info-title .title {
  font-size: 1.7rem;
  line-height: 24px;
}
.toggle-info-title .title .off-text {
  display: none;
}
.toggle-info-title .title.is-area-disabled .on-text {
  display: none;
}
.toggle-info-title .title.is-area-disabled .off-text {
  display: inline;
}
.toggle-info-text {
  margin-top: 4px;
  color: var(--gray-70);
  font-size: 1.3rem;
}
/* toggle-list accordion */
.toggle-info-item.js-ui-accordion__item {
  padding: 0;
}
.toggle-info-item.js-ui-accordion__item .toggle-info-title {
  padding: 22px 0;
}
.toggle-info-accordion-opener {
  width: 18px;
  height: 18px;
  margin-left: 4px;
}
.toggle-info-accordion-opener::after {
  right: 50%;
  margin-right: -6px;
  background: url("/images/common/btn-selectbox-s-b.svg") center center no-repeat;
  transform: rotate(180deg);
}
.toggle-info-accordion-opener.js-accordion-active::after {
  transform: rotate(0deg);
}
.toggle-info-accordion-contents {
  padding: 20px 5px;
  border-top: 1px solid var(--gray-30);
}
/* toggle-small-list */
.toggle-small-list {
  box-sizing: border-box;
  padding: 0 15px;
}
.toggle-small-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  box-sizing: border-box;
  padding: 14px 0;
  font-size: 1.5rem;
  line-height: 20px;
}
.toggle-small-title {
  -ms-flex: 1;
  flex: 1;
  -webkit-box-flex: 1;
}
/* layer - sns */
.sns-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
}
.sns-item {
  -ms-flex: none;
  flex: none;
  text-align: center;
  -webkit-box-flex: 0;
}
.sns-area-inner {
  margin: 25px 17.948718%;
}
.sns-area-inner .sns-item {
  margin-top: 0;
}
.sns-button {
  display: block;
  width: 100%;
  font-size: 1.2rem;
  line-height: 1.7rem;
}
.sns-button::before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto 8px;
  border-radius: 12px;
  background: #f4f6fa no-repeat 50% 0 / 100% auto;
}
.sns-checkbox {
  position: relative;
  font-size: 0;
  line-height: 0;
}
.sns-checkbox .ui-radio {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.sns-checkbox .ui-radio:checked + .ui-label .sns-button::after {
  content: "";
  position: absolute;
  top: 0;
  display: block;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  border: solid 2px var(--primary);
  border-radius: 12px;
  background: url("/images/common/ic-radio-c.svg") no-repeat 50% 50% / 22px auto;
  background-color: rgba(var(--primary-rgb), 0.3);
}
.sns-item.type-sms .sns-button::before,
.sns-item.type-url .sns-button::before {
  box-shadow: inset 0 0 0 1px var(--gray-30);
}
.sns-item.type-kakao .sns-button::before {
  background-image: url("/images/icon/ic-sns-kakao.png");
}
/* 2025-10-16 카카오톡 작업중 추가 */
.sns-item.type-kakao .sns-tooltip {
  display: none;
  position: absolute;
  top: -28px;
  left: 0;
  right: 0;
  width: 50px;
  height: 26px;
  background: url("../images/icon/ic-sns-tooltip.svg") no-repeat center / 50px 26px;
}
.sns-item.type-kakao .sns-checkbox .ui-radio:disabled + .ui-label .sns-tooltip {
  display: block;
}
.sns-item.type-facebook .sns-button::before {
  background-image: url("/images/icon/ic-sns-facebook.png");
}
.sns-item.type-sms .sns-button::before {
  background-image: url("/images/icon/ic-sns-sms.png");
}
.sns-item.type-twitter .sns-button::before {
  background-image: url("/images/icon/ic-sns-twitter.png");
}
.sns-item.type-instagram .sns-button::before {
  background-image: url("/images/icon/ic-sns-instagram.png");
}
.sns-item.type-url .sns-button::before {
  background-image: url("/images/icon/ic-sns-urlcopy.png");
}
.sns-item.type-qr .sns-button::before {
  background-image: url("/images/icon/ic-sns-qr.png");
}
.sns-item.type-kakao-story .sns-button::before {
  background-image: url("/images/icon/ic-kakaostory.png");
}
.sns-item.type-naver-blog .sns-button::before {
  background-image: url("/images/icon/ic-blog.png");
}
.sns-item.type-email .sns-button::before {
  background-image: url("/images/icon/ic-email.png");
}
/* sns-area type-center */
.sns-area.type-center .sns-list {
  justify-content: space-around;
  -ms-flex-pack: distribute;
}
.sns-area.type-gap .sns-list{
  justify-content: center;
  gap: 50px;
}
/* layer - card-detail */
.card-detail-top-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-x: auto;
  margin: 0 -24px;
  padding: 0 37px;
}
.card-detail-top-item {
  flex: 1 0 50%;
  box-sizing: border-box;
  padding: 0 8px;
}
.card-detail-top .card-image {
  width: 128px;
  margin: 0 auto;
}
.card-detail-top .card-image-inner {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}
.card-detail-top .card-detail-name {
  margin-top: 15px;
  font-size: 1.5rem;
  line-height: 22px;
  text-align: center;
}
/* layer - zip */
.layer-wrap--zip .ui-tab-panel,
.layer-wrap--zip .ui-layer__body .header {
  padding-top: 30px;
}
.layer-wrap--zip .ui-layer__body:last-child .ui-layer__body-inner {
  padding-bottom: 30px;
}
.layer-wrap--zip .search-word-area {
  margin-bottom: 30px;
}
.layer-wrap--zip .info-text {
  margin-bottom: 25px;
  font-weight: 300;
  font-size: 2.1rem;
  line-height: 30px;
}
.layer-wrap--zip .ui-radio-group.type-toggle {
  margin-bottom: 35px;
}
.layer-wrap--zip .search-word-address .info-list {
  margin-top: 25px;
}
.layer-wrap--zip .page-section.type-line .type-none:first-child {
  margin-top: -35px;
}
.layer-wrap--zip .page-section.type-line .type-none:last-child {
  margin-bottom: -35px 0;
}
.zip-area {
  font-size: 1.2rem;
}
.zip-item + .zip-item {
  margin-top: 25px;
}
.zip-head {
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e9ecef;
}
.zip-head .total {
  display: block;
  margin-bottom: 4px;
  font-size: 1.3rem;
}
.zip-head .text {
  color: var(--gray-70);
  font-weight: 300;
  line-height: 17px;
}
.zip-item-head {
  display: block;
  margin-bottom: 12px;
}
.zip-item-head.type-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.zip-item-head .number,
.zip-item-head .title {
  display: block;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 24px;
}
.zip-item-head.type-flex .date-aside {
  display: block;
  margin-left: auto;
  color: var(--gray-70);
  font-size: 1.5rem;
  line-height: 22px;
}
.zip-item {
  display: block;
  box-sizing: border-box;
  width: 100%;
  text-align: left;
}
.zip-item.type-button .zip-item-head {
  margin-bottom: 4px;
}
.zip-item-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  width: 100%;
  -webkit-box-align: start;
  -ms-flex-align: start;
}
.zip-item-block:not(:last-child) {
  margin-bottom: 8px;
}
.zip-item-block .category {
  width: 44px;
  margin: 2px 8px 0 0;
  border: 1px solid var(--basic);
  border-radius: 9px;
  font-size: 1.1rem;
  line-height: 16px;
  text-align: center;
}
.zip-item-block .text {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  font-size: 1.5rem;
  line-height: 22px;
  text-align: left;
  -webkit-box-flex: 1;
}
.zip-confirm-area .type-none {
  padding: 35px 0;
}
.zip-confirm-area .type-none::after {
  min-height: auto;
}
.zip-confirm {
  padding: 20px 15px;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
  text-align: center;
}
.zip-confirm .value {
  font-size: 1.5rem;
  line-height: 20px;
}
.zip-confirm .text {
  margin-top: 15px;
  color: var(--gray-70);
  font-size: 1.3rem;
  line-height: 18px;
}
.zip-confirm .ui-basic-button {
  margin-top: 15px;
}
/* page-contents type-menu */
.page-contents.type-menu::before {
  content: "";
  display: block;
  height: 100px;
}
.page-contents.type-menu {
  padding-top: 0;
  padding-bottom: 0;
}
.page-contents.type-menu.is-no-case::before {
  height: 54px;
}
.page-contents.type-menu.is-no-case .menu-nav-layer-wrap {
  top: 104px;
}
.type-benefit-home .basic-text {
  font-weight: 400;
}
.type-benefit-home .small-text {
  font-weight: 300;
}
/* page-contents type-legacy-coupon */
.page-contents.type-legacy-coupon .link-item.type-none {
  padding-top: 0;
}
/* page-contents type-card-list */
.page-contents.type-card-list {
  padding-top: 0;
}
.page-contents.type-card-list .slide-banner {
  margin: 0 -24px 30px;
}
.cards {
  margin-top: 35px;
}
.cards .card-list .card-item:not(:first-child) {
  margin-top: 25px;
}
.cards .card-list .card-image {
  width: 128px;
  margin-top: 0;
}
@media (max-width: 360px) {
  .cards .card-list .card-image {
      width: 108px;
  }
}
.cards .card-list .card-name {
  white-space: normal;
}
/* page-contents type-card-detail, type-card-detail-slide */
.page-contents.type-card-detail .ui-tab-panel .ui-notice:first-child,
.page-contents.type-card-detail-slide .ui-tab-panel .ui-notice:first-child {
  margin-top: 0;
}
.page-contents.type-card-detail-slide {
  position: relative;
  padding-top: 0;
}
.card-detail-tip {
  overflow: hidden;
  opacity: 0;
}
.card-detail-tip.is-show {
  opacity: 1;
}
.card-detail-tip-inner .ui-tip {
  margin: 0;
}
.card-detail-top-at-once .card-detail-tip-inner {
  padding-top: 30px;
}
.card-detail-top-wcms {
  padding-top: 30px;
}
.page-contents.type-card-detail-slide .card-detail {
  z-index: 999;
  margin: 0 -24px -25px;
  padding: 30px 24px;
  background-color: #fff;
}
.page-contents.type-card-detail-slide .slide-card-pagination {
  margin-top: 15px;
}
.page-contents.type-card-detail-slide ~ .page-buttons.type-fixed {
  z-index: 998;
}
.page-contents.type-card-detail-slide .card-detail-benefit-wrap {
  margin-bottom: 25px;
}
.card-detail-middle-wcms {
  margin: 35px 0 25px;
}
.card-detail {
  position: relative;
  display: block;
  text-align: center;
}
.card-detail .card-image {
  width: 220px;
  margin: 0 auto 35px;
}
.card-detail-title {
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 30px;
}
.card-detail-text {
  margin-top: 5px;
  color: var(--gray-70);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 22px;
  word-break: keep-all;
  width: 100%;
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
}
.card-detail-badges {
  margin-top: 25px;
  font-size: 0;
}
.card-detail-badges .ui-badge + .ui-badge {
  margin-left: 8px;
}
.card-benefit-list {
  margin-bottom: 35px;
}
.card-benefit-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  margin-top: 25px;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.card-benefit-item .logo-image {
  margin-right: 10px;
}
.card-benefit-icon {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  background: no-repeat 50% 50% / auto 100%;
}
.card-benefit-icon.type-1 {
  background-image: url("/images/icon/ic-card-d-l-01.svg");
}
.card-benefit-icon.type-2 {
  background-image: url("/images/icon/ic-card-d-l-02.svg");
}
.card-benefit-icon.type-3 {
  background-image: url("/images/icon/ic-card-d-l-03.svg");
}
.card-benefit-icon.type-4 {
  background-image: url("/images/icon/ic-card-d-l-04.svg");
}
.card-benefit-icon.type-5 {
  background-image: url("/images/icon/ic-card-d-l-05.svg");
}
.card-benefit-icon.type-6 {
  background-image: url("/images/icon/ic-card-d-l-06.svg");
}
.card-benefit-info {
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  -webkit-box-flex: 1;
}
.card-benefit-title {
  font-size: 1.5rem;
  line-height: 22px;
}
.card-benefit-title em {
  font-style: normal;
}
.card-benefit-button {
  width: 30px;
  height: 30px;
  background: url("/images/icon/btn-card-add.svg") no-repeat 100% 50% / auto 20px;
}
.card-benefit-text {
  margin-top: 4px;
  color: var(--gray-70);
}
.card-detail-benefit-wrap {
  margin: 25px auto 0;
  font-size: 0;
  line-height: 0;
  text-align: center;
}
.card-detail-benefit-list {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  max-width: 272px;
  text-align: left;
}
.card-detail-benefit-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.card-detail-benefit-item:not(:first-child) {
  margin-top: 12px;
}
.card-detail-benefit-item .logo-image {
  margin-right: 7px;
}
.card-detail-benefit-icon {
  width: 27px;
  height: 27px;
  margin-right: 7px;
  background: no-repeat 50% 50% / auto 100%;
}
.card-detail-benefit-icon.type-1 {
  background-image: url("/images/icon/ic-card-d-s-01.svg");
}
.card-detail-benefit-icon.type-2 {
  background-image: url("/images/icon/ic-card-d-s-02.svg");
}
.card-detail-benefit-icon.type-3 {
  background-image: url("/images/icon/ic-card-d-s-03.svg");
}
.card-detail-benefit-icon.type-4 {
  background-image: url("/images/icon/ic-card-d-s-04.svg");
}
.card-detail-benefit-icon.type-5 {
  background-image: url("/images/icon/ic-card-d-s-05.svg");
}
.card-detail-benefit-icon.type-6 {
  background-image: url("/images/icon/ic-card-d-s-06.svg");
}
.card-detail-benefit-icon.type-7 {
  background-image: url("/images/icon/ic-card-d-s-07.svg");
}
.card-detail-benefit-icon.type-8 {
  background-image: url("/images/icon/ic-card-detail-01.svg");
}
.card-detail-benefit-icon.type-9 {
  background-image: url("/images/icon/ic-card-detail-02.svg");
}
.card-detail-benefit-icon.type-10 {
  background-image: url("/images/icon/ic-card-detail-03.svg");
}
.card-detail-benefit-icon.type-11 {
  background-image: url("/images/icon/ic-card-detail-04.svg");
}
.card-detail-benefit-icon.type-12 {
  background-image: url("/images/icon/ic-card-detail-05.svg");
}
.card-detail-benefit-icon.type-13 {
  background-image: url("/images/icon/ic-card-detail-07.svg");
}
.card-detail-benefit-icon.type-14 {
  background-image: url("/images/icon/ic-card-detail-06.svg");
}
.card-detail-benefit-icon.type-15 {
  background-image: url("/images/icon/ic-card-detail-10.svg");
}
.card-detail-benefit-icon.type-16 {
  background-image: url("/images/icon/ic-card-detail-11.svg");
}
.card-detail-benefit-icon.type-17 {
  background-image: url("/images/icon/ic-card-detail-12.svg");
}
.card-detail-benefit-icon.type-18 {
  background-image: url("/images/icon/ic-card-detail-08.svg");
}
.card-detail-benefit-icon.type-19 {
  background-image: url("/images/icon/ic-card-detail-09.svg");
}
.card-detail-benefit-icon.type-20 {
  background-image: url("/images/icon/ic-card-detail-13.png");
}
.card-detail-benefit-icon.type-21 {
  background-image: url("/images/icon/ic-card-detail-14.png");
}
.card-detail-benefit-icon.type-22 {
  background-image: url("/images/icon/ic-card-detail-15.png");
}
.card-detail-benefit-icon.type-23 {
  background-image: url("/images/icon/ic-card-detail-16.png");
}
.card-detail-benefit-icon.type-24 {
  background-image: url("/images/icon/ic-card-detail-17.png");
}
.card-detail-benefit-icon.type-25 {
  background-image: url("/images/icon/ic-card-detail-18.png");
}
.card-detail-benefit-text {
  -ms-flex: 1;
  flex: 1;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.8rem;
  -webkit-box-flex: 1;
}
.card-detail-notice {
  margin-top: 25px;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 20px;
  text-align: left;
}
.card-detail .ui-card-brand {
  height: 17px;
  margin-right: 3px;
}
.slide-card {
  position: relative;
  margin: 0 -24px;
}
.slide-card-list:not(.swiper-wrapper) {
  display: none;
}
.slide-card .slide-card-item {
  width: auto;
  padding: 0 15px;
}
.slide-card .card-detail {
  width: 220px;
  transition: 0.5s;
}
.slide-card .card-detail .card-image {
  width: 100%;
  transition: 0.5s;
}
.slide-card .card-detail .card-image * {
  transition: 0.5s;
}
.slide-card .card-detail .ui-arrow {
  display: inline-flex;
}
.slide-card .card-detail .ui-arrow.type-select::after {
  display: none;
  margin-left: 5px;
}
/* 22.09.19 카드명 수정 */
.basic-text .global-card-arrow {
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 18px;
  margin-left: 5px;
  background: url("/images/common/ic-select-arrow.svg") no-repeat 100% 50% / auto 10px;
}
.basic-text.global-card-text {
  padding: 0 5px;
  word-break: keep-all;
}
/* 22.09.19 카드명 수정 */
.slide-card .card-detail .global-card-brand {
  display: inline-block;
  vertical-align: top;
  margin: -2px 3px 0;
}
.slide-card-pagination .swiper-object {
  position: relative;
  width: 88px;
  margin: 25px auto 0;
  transition: 0.5s;
}
.slide-card-pagination.is-hide {
  display: none;
}
.slide-card-pagination .swiper-object::before,
.slide-card-pagination .swiper-object::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 10;
  display: block;
  width: 8px;
  height: 100%;
}
.slide-card-pagination .swiper-object::before {
  left: 0;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 0) 95%, rgba(255, 255, 255, 0) 100%);
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 0) 95%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 0) 95%, rgba(255, 255, 255, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
}
.slide-card-pagination .swiper-object::after {
  right: 0;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 1) 95%, rgba(255, 255, 255, 1) 100%);
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 1) 95%, rgba(255, 255, 255, 1) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 1) 95%, rgba(255, 255, 255, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
}
.slide-card-pagination-item {
  width: auto;
  padding: 0 4px;
}
.slide-card-pagination-item:first-child {
  padding-left: 16px;
}
.slide-card-pagination-item:last-child {
  padding-right: 16px;
}
.slide-card-pagination-button {
  display: block;
  width: 8px;
  height: 8px;
  border: 1px solid #8c8c8c;
  /* background-color: var(--gray-40); */
  border-radius: 100%;
  /* 2023-07-19 웹접근성 수정 */
  background-color: transparent;
  transition: background-color 0.3s;
}
.slide-card-pagination-item.swiper-slide-thumb-active .slide-card-pagination-button {
  border: 1px solid var(--basic);
  /* 2023-07-19 웹접근성 수정 */
  background-color: var(--basic);
  /* background-color: #000; */
}
.slide-card .swiper-button-prev,
.slide-card .swiper-button-next {
  position: absolute;
  top: 0;
  display: block;
  width: 15px;
  height: 140px;
  margin: 0;
  background: no-repeat 50% 50%;
}
.slide-card .swiper-button-prev::before,
.slide-card .swiper-button-next::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0);
}
.slide-card .swiper-button-prev::after,
.slide-card .swiper-button-next::after {
  display: none;
}
.slide-card .swiper-button-prev-text,
.slide-card .swiper-button-next-text {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  overflow: hidden;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.slide-card .swiper-button-prev {
  left: 50%;
  margin-left: -128px;
  background-image: url("/images/icon/ic-left.svg");
}
.slide-card .swiper-button-next {
  right: 50%;
  margin-right: -128px;
  background-image: url("/images/icon/ic-right.svg");
}
/* 22.10.11 내카드관리 화살표 삭제 */
.slide-card .swiper-button-prev,
.slide-card .swiper-button-next {
  display: none;
}
.slide-card .card-detail-title {
  margin-top: 35px;
}
.slide-card .card-detail-text {
  margin-right: -30px;
  margin-left: -30px;
}
.slide-card .swiper-object.swiper-object-once .swiper-button-prev,
.slide-card .swiper-object.swiper-object-once .swiper-button-next {
  display: none;
}
.slide-card-info-item:not(.is-active) {
  display: none;
}
.slide-card-dim {
  position: fixed;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: none;
  background-color: rgba(0, 0, 0, 0.65);
}
.slide-card-dim-close {
  position: absolute;
  top: 100%;
  left: 50%;
  display: none;
  width: 40px;
  height: 40px;
  margin: 35px 0 0 -20px;
  border-radius: 100%;
  background: #fff url("/images/common/btn-pop-close.svg") no-repeat 50% 50% / auto 15px;
}
.js-slide-card-el {
  display: none;
}
.slide-card-head {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 30px 24px 0;
  background-color: #fff;
  text-align: left;
}
.slide-card-title {
  margin: 0;
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.7rem;
}
.swiper-pagination-bullets {
  display: block;
  margin-top: 25px;
  font-size: 0;
  text-align: center;
}
.swiper-pagination-bullet {
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  border: 1px solid #8c8c8c;
  /* background-color: var(--gray-40); */
  border-radius: 100%;
  /* 2023-07-18 웹접근성 수정 */
  background-color: transparent;
  opacity: 1;
  transition: background-color 0.3s;
}
/* 22.08.03 스와이퍼 추가 */
.slide-card2 {
  position: relative;
  margin: 0 -24px;
}
.slide-card2 .slide-card-item {
  width: auto;
  padding: 0 15px;
}
.slide-card2 .card-detail {
  width: 220px;
}
.slide-card2 .card-detail .card-image {
  width: auto;
}
.slide-card2 .card-detail .ui-arrow {
  display: inline-flex;
}
.slide-card2 .card-detail .ui-arrow.type-select::after {
  margin-left: 5px;
}
.slide-card2 .card-detail .global-card-brand {
  display: inline-block;
  vertical-align: top;
  margin: -2px 3px 0;
}
.slide-card2 .swiper-button-prev,
.slide-card2 .swiper-button-next {
  position: absolute;
  top: 0;
  display: block;
  width: 15px;
  height: 140px;
  margin: 0;
  background: no-repeat 50% 50%;
}
.slide-card2 .swiper-button-prev::before,
.slide-card2 .swiper-button-next::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0);
}
.slide-card2 .swiper-button-prev::after,
.slide-card2 .swiper-button-next::after {
  display: none;
}
.slide-card2 .swiper-button-prev-text,
.slide-card2 .swiper-button-next-text {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  overflow: hidden;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.slide-card2 .swiper-button-prev {
  left: 50%;
  margin-left: -128px;
  background-image: url("/images/icon/ic-left.svg");
}
.slide-card2 .swiper-button-next {
  right: 50%;
  margin-right: -128px;
  background-image: url("/images/icon/ic-right.svg");
}
.slide-card2 .card-detail-title {
  margin-top: 35px;
}
.slide-card2 .card-detail-text {
  margin-right: -30px;
  margin-left: -30px;
}
.slide-card2 .swiper-object.swiper-object-once .swiper-button-prev,
.slide-card2 .swiper-object.swiper-object-once .swiper-button-next {
  display: none;
}
/* //22.08.03 스와이퍼 추가 */
.card-comparison-section {
  margin-top: 35px;
  font-size: 1.3rem;
  line-height: 18px;
}
.card-comparison-items {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.card-comparison-items::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background-color: var(--gray-30);
}
.card-comparison-item {
  flex: 1 0 50%;
  box-sizing: border-box;
}
.card-comparison-item:first-child:not(:last-child) {
  padding-right: 20px;
}
.card-comparison-item + .card-comparison-item {
  padding-left: 20px;
}
.card-comparison-item .info-list {
  color: inherit;
}
.card-comparison-title {
  margin-bottom: 10px;
  font-size: inherit;
}
.layer-wrap--find .ui-select-list {
  margin-top: 15px;
  margin-bottom: -15px;
}
.layer-wrap--find .ui-select-list .ui-label-text {
  font-weight: 400;
}
.layer-wrap--find .ui-select-list input:checked + .ui-label::after,
.layer-wrap--find .ui-select-list .ui-radio-block.is-checked .ui-label::after {
  top: 50%;
  transform: translateY(-50%);
}
.layer-wrap--find .type-none {
  margin-bottom: -35px;
}
/* page-contents type-change-limit */
.type-change-limit .section-title {
  margin-bottom: 15px;
}
.type-change-limit .form-list:not(:first-child) {
  margin-top: 25px;
}
/* page-contents type-auth-revocation */
.type-auth-revocation .ui-radio-group.type-full .ui-label-text .form-detail-item:not(:first-child) {
  margin-top: 2px;
}
.type-auth-revocation .ui-radio-group.type-full .form-detail-title {
  padding-right: 9px;
}
.type-auth-revocation .ui-radio-group.type-full .form-detail-group {
  justify-content: flex-start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
}
/* page-contents electronic-signature */
.electronic-signature {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 20px;
}
.electronic-signature-box {
  width: 60px;
  margin-left: auto;
  padding: 1px 0;
  border: 1px solid var(--point);
  border-radius: 10px;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 12px;
  text-align: center;
}
.electronic-signature-title {
  padding: 1px 0;
  color: var(--point);
}
.electronic-signature-text {
  padding: 1px 0;
  border-top: 1px solid var(--point);
  border-bottom: 1px solid var(--point);
}
/* page-contents type-selected-card */
.type-selected-card .card-list .form-detail {
  margin-top: 15px;
  margin-left: 32px;
}
/* page-contents type-privacy */
.privacy-area {
  margin: 35px auto 0;
}
.privacy-area,
.privacy-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.privacy-area .hyphen,
.privacy-group {
  margin-bottom: 20px;
}
.privacy-area .hyphen {
  width: 14px;
  margin: 0 9px;
}
.privacy-area .privacy-item {
  width: 14px;
  height: 14px;
  margin: 0 9px;
  border-radius: 50%;
  background-color: var(--gray-30);
}
.privacy-area .privacy-item.is-active {
  background-color: var(--primary);
}
.privacy-area .privacy-item .for-a11y.enter-text {
  display: none;
}
.privacy-area .privacy-item.is-active .for-a11y.enter-text {
  display: block;
}
/* account-verify */
.account-verify-notice {
  height: 180px;
  text-align: center;
}
.account-verify-notice::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.account-verify-notice-text {
  display: inline-block;
  vertical-align: middle;
  font-size: 1.8rem;
  line-height: 26px;
}
.account-verify-notice-text::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  background: url("/images/icon/ic-coin-s.svg") no-repeat 50% 50% / auto 100%;
}
.account-verify-step-item + .account-verify-step-item {
  margin-top: 35px;
}
.account-verify-step-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 25px;
  font-size: 1.7rem;
  line-height: 22px;
}
.account-verify-step-title .num {
  margin-right: 8px;
}
.account-verify-confirm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 20px;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
}
.account-verify-confirm .ui-badge {
  height: 26px;
}
.account-verify-info:not(:last-child) {
  -ms-flex: 1;
  flex: 1;
  margin-left: 12px;
  -webkit-box-flex: 1;
}
.account-verify-info:last-child {
  text-align: right;
}
.account-verify-info-title {
  margin-bottom: 8px;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 22px;
}
.account-verify-info-contents {
  font-size: 1.7rem;
  line-height: 24px;
}
.account-verify-info-name {
  overflow: hidden;
}
.account-verify-info-name-digit {
  position: relative;
  float: left;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  border: 1px solid var(--secondary);
  border-radius: 8px;
}
.account-verify-info-name-digit::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 3px;
  background-color: var(--secondary);
}
/* page-contents type-card-health-info */
.type-card-health-info .card-detail-top {
  padding-top: 45px;
}
/* page-contents type-guide-smartshopping */
.type-guide-smartshopping .info-list.type-text-large .info-item:not(:first-child) {
  margin-top: 10px;
}
/* page-contents type-pay-service */
.service-group.type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 6px;
}
.service-group.type-grid.type-col2 {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* 20230915 저해상도 디바이스에서 그리드 배열 1열로 조정 */
@media (max-width: 375px) {
  .service-group.type-grid.type-col2 {
      grid-template-columns: 1fr;
  }
}
.service-item.type-box {
  padding: 25px 0 20px;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
  text-align: center;
}
.service-item .service-title {
  margin-top: 10px;
  font-weight: 400;
  font-size: 1.3rem;
}
.service-item .service-conditions {
  margin-top: 15px;
}
.service-item .service-conditions .ui-button {
  width: auto;
  margin: 0 auto;
}
.service-item .service-conditions .success-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 9px 0;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 19px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.service-item .service-conditions .success-text::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  background: url("/images/common/ic-checkbox-l-s.svg") no-repeat 100% 50%;
}
.service-item.type-box.success {
  background-color: var(--gray-20);
}
.service-item.type-box.success .service-title {
  color: var(--gray-70);
}
.service-img .img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 35px;
  margin: 0 auto;
}
/* page-contents pay-group */
.pay-group .pay-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  text-align: left;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.pay-group .pay-item.success {
  background-color: #f8f8f8;
}
.pay-group .pay-item .service-img.no-bg {
  border: 2px solid #e5e5e5;
  border-radius: 14px;
}
.pay-group .pay-item .service-img.no-bg .img {
  width: 38px;
  height: 38px;
}
.pay-group .pay-item .service-img .img {
  width: 42px;
  height: 42px;
  max-height: 42px;
  border-radius: 12px; /* [2025-07-04 oh] : 11747-208447523 배민페이 로고 (정사각형, 가로형) 배포 요청 */
}
.pay-group .pay-item .service-conditions {
  margin-left: 10px;
}
.pay-group .pay-item .service-conditions .service-title {
  margin-bottom: 2px;
  font-weight: 500;
  font-size: 1.6rem;
}
.pay-group .pay-item .service-conditions .success-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  margin-top: 0px;
  font-size: 1.3rem;
  line-height: 18px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.pay-group .pay-item .service-conditions .success-text::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  background: url("/images/common/ic-checkbox-l-s.svg") no-repeat 100% 50%;
}
.pay-group .pay-item .service-conditions .pay-button {
  margin-top: 0px;
  text-decoration: underline;
  white-space: nowrap;
}
/* page-contents type-expire */
.form-detail.type-line-bottom {
  margin-bottom: 35px;
  padding-bottom: 35px;
  border-bottom: 1px solid var(--gray-30);
}
.process.type-change .process-list::before {
  display: none;
}
.process.type-change .process-item.type-left-line::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 0;
  left: 6px;
  display: block;
  width: 1px;
  height: 100%;
  background: url("/images/etc/ic-stepline.svg") repeat-y 0 0;
}
.process-item.type-align-baseline {
  align-items: baseline;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
}
.process-item.type-align-baseline::before {
  height: 6px;
}
.process-stage {
  position: relative;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 0.15rem solid transparent;
  border-radius: 5px;
  background-color: #fff;
}
.process-stage::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  border: 0.15rem solid var(--gray-60);
  border-radius: 3px;
  background-color: #fff;
  transform: translate(-50%, -50%);
}
.process-stage.is-active {
  border-color: var(--secondary);
}
.process-stage.is-active::after {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background-color: var(--secondary);
}
/* layer-card-mbti */
.layer-card-mbti .ui-layer__foot {
  display: none;
}
.layer-card-mbti .step-slide[data-step-slide-index="9"] .check-detail-title {
  display: none;
}
.layer-card-mbti .step-slide[data-step-slide-index="9"] ~ .ui-layer__foot {
  display: block;
}
/* layer-card-mbti-main */
.layer-card-mbti-main .ui-layer__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
}
.layer-card-mbti-main .card-mbti {
  -ms-flex: 1;
  flex: 1;
  padding: 0;
  -webkit-box-flex: 1;
}
.layer-card-mbti-main .card-mbti::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.layer-card-mbti-main .card-mbti-inner {
  display: inline-block;
  vertical-align: middle;
}
.layer-card-mbti-main .mbti-tags {
  margin: auto 0 0;
  padding: 45px 0 35px;
}
/* openbanking */
/* card-result */
.card-list .card-info .card-result-group {
  display: block;
}
.card-list .card-info .card-result-group::after {
  content: "";
  display: block;
  clear: both;
}
.card-list .card-info .card-result-group .card-result:not(:first-of-type) {
  margin-left: 7px;
  padding-left: 8px;
}
.card-list .card-info .card-result-group .card-result:not(:first-of-type)::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 1px;
  height: 9px;
  margin-top: -5px;
  background-color: var(--gray-60);
}
.card-list .card-info .card-result {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  float: left;
  margin-top: 2px;
  color: var(--gray-70);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.8rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.card-list .card-result.type-icon-o::after,
.card-list .card-result.type-icon-x::after,
.card-list .card-result.type-icon-check::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 2px;
  background: no-repeat 0 50%;
}
.card-list .card-result.type-icon-o::after {
  background-image: url("/images/icon/ic-o.svg");
}
.card-list .card-result.type-icon-x::after {
  background-image: url("/images/icon/ic-x.svg");
}
.card-list .card-result.type-icon-check::after {
  width: 14px;
  height: 14px;
  margin-left: 4px;
}
.card-list .card-result.type-icon-check::after {
  background-image: url("/images/common/ic-checkbox.svg");
}
.card-list .card-result.type-icon-check.is-checked::after {
  background-image: url("/images/common/ic-checkbox-c.svg");
}
.card-list .card-number-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  font-size: 1.2rem;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
}
.card-total-amount {
  position: relative;
  margin-top: 15px;
  padding-right: 28px;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 24px;
}
.ui-label + .card-total-amount {
  margin-left: 78px;
}
.card-info .card-total-amount {
  display: block;
  margin-top: 2px;
  text-align: left;
}
.card-info .card-total-amount.align-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 0;
  text-align: right;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.card-info .card-total-amount .reload-button {
  margin-left: 2px;
}
.card-info .card-total-amount-val.type-text-large {
  display: block;
  font-size: 2.1rem;
  line-height: 21px;
}
.card-list .card-item.js-ui-accordion__item .ui-checkbox-block.type-no-padding {
  padding: 0;
}
.card-list .card-layer-contents.js-ui-accordion__layer.type-padding-left,
.card-list.type-input .card-layer-contents.js-ui-accordion__layer {
  padding-left: 32px;
}
.selected-value {
  margin-bottom: 25px;
  font-weight: 300;
}
/* card-list -card-item.type-box */
.card-list .card-item.type-box {
  padding: 20px;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
}
.card-list .card-item.type-box.js-ui-accordion__item:not(:first-child) {
  margin-top: 10px;
}
.card-list .card-item.type-box .form-detail {
  margin-top: 25px;
}
.card-list .card-item.type-box .card-total-amount {
  margin-top: 5px;
  line-height: 30px;
}
.card-list .card-item.type-box .card-total-amount-val.type-text-large {
  line-height: inherit;
}
/* checkbox - disabled */
.card-list.type-active-disabled .ui-checkbox[disabled] + .ui-label,
.card-list.type-active-disabled .ui-checkbox[disabled] + .ui-label .card-number,
.card-list.type-active-disabled .ui-checkbox[disabled] ~ .card-total-amount {
  color: #ccc;
}
.card-list.type-active-disabled .ui-checkbox[disabled] + .ui-label .card-number-item:not(:last-of-type)::after {
  background-color: #ccc;
}
.card-list.type-active-disabled .ui-checkbox[disabled] + .ui-label .logo-image {
  opacity: 0.4;
}
/* ui-select-list 선택시 스타일 미적용 */
.ui-select-list.type-unset input:checked + .ui-label,
.ui-select-list.type-unset .ui-radio-block.is-checked .ui-label {
  color: unset;
}
.card-list .ui-checkbox-list {
  margin-top: 2px;
}
.card-list .ui-checkbox-list,
.card-list .ui-checkbox-list .ui-checkbox-block .ui-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.card-list .ui-checkbox-list .ui-checkbox-block {
  margin-right: 15px;
}
.card-list .ui-checkbox-list .ui-checkbox-block .ui-label-text {
  margin-left: 0;
}
/* page-contents type-notify */
.page-contents.type-notify .usage-default-checkbox-block {
  margin-top: 1px;
}
.page-contents.type-notify .usage-default-right .usage-default-etc {
  margin-top: 3px;
}
.page-contents.type-notify .usage-default-right .link-row {
  margin-top: 6px;
  text-align: right;
}
.page-contents.type-notify .usage-default-item .banner {
  margin-top: 12px;
  margin-bottom: 0;
}
/* type-join-completion */
.type-join-completion ~ .guide-info-list {
  margin: 0 24px 35px;
  padding-left: 66px;
  background: var(--gray-20) url("/images/contents/img-1q-logo.svg") no-repeat 20px 50%;
}
/* type-gate-life */
.page-contents.type-life-main {
  padding-top: 0;
}
.page-contents.type-life-main .slide-banner-controller {
  top: 100%;
  bottom: auto;
  margin-top: 5px;
}
.page-contents.type-life-main .slide-banner {
  padding-bottom: 20px;
}
.life-main-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 231121 반응형 수정 */
  margin-top: -15px;
}
.life-main-item {
  flex-basis: 33.3333%;
  box-sizing: border-box;
  min-height: 170px;
  margin-top: 15px;
  padding-right: 7px;
  text-align: center;
  white-space: nowrap;
}
.life-main-item.type-wide {
  flex-basis: 50%;
}
/* life-main-item type-full */
.life-main-item.type-full {
  flex-basis: 100%;
}
.life-main-item.type-full .life-main-block {
  padding-right: 30px;
  padding-left: 30px;
  text-align: left;
}
.life-main-item.type-full .life-main-icon {
  left: 30px;
  margin-left: 0;
}
.life-main-block {
  position: relative;
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding: 80px 0 20px;
  border: 1px solid #c9cdd8;
  border-radius: 20px;
}
.life-main-block::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.life-main-icon {
  position: absolute;
  top: 30px;
  left: 50%;
  width: 48px;
  height: 48px;
  margin-left: -24px;
}
.life-main-icon img {
  width: 100%;
  height: 100%;
}
/* 23.03.16 신규추가 */
.life-main-icon.type-border img {
  border-radius: 50%;
}
/* //23.03.16 신규추가 */
.life-main-text {
  display: inline-block;
  vertical-align: middle;
  color: #1f1f1f;
  letter-spacing: -1px;
  white-space: normal;
}
.life-main-text-title {
  display: block;
  margin-bottom: 4px;
  color: #191919;
  font-size: 15px;
  line-height: 16px;
}
.life-main-text-title span {
  display: block;
  font-size: 11px;
}
/* type-card-affiliate */
.section-title.big-text .title {
  font-size: 2.4rem;
  line-height: 3.3rem;
}
.card-list.type-affiliate .card-item:not(:first-child) {
  margin-top: 25px;
  padding-top: 25px;
  border-top: 1px solid var(--gray-30);
}
.card-list.type-affiliate .card-name {
  margin-bottom: 5px;
}
.card-list.type-affiliate .card-info-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 15px;
  line-height: 17px;
}
.card-list.type-affiliate .card-info-block .card-info-title {
  margin-right: 5px;
}
.card-list.type-affiliate .card-info-block .card-info-text {
  color: var(--gray-70);
  font-weight: 300;
  font-size: 1.2rem;
}
/* .card-list type-accordion*/
.card-affiliate-layer.js-ui-accordion__layer {
  display: block;
  height: auto;
}
.card-affiliate-layer .card-item:not(.type-preview) {
  display: none;
}
.card-affiliate-layer.js-accordion-opened .card-item,
.card-affiliate-item.js-accordion-animated .card-affiliate-layer .card-item {
  display: block;
}
.card-affiliate-opener::after {
  top: 0;
  right: auto;
  bottom: 0;
  height: auto;
}
.card-affiliate-image-area {
  position: relative;
  width: 70px;
  margin: 0 14px 0 0;
}
.card-affiliate-image-area::before {
  content: "";
  display: block;
  height: 75px;
}
.card-affiliate-image-area .card-badges {
  margin-top: 15px;
  text-align: center;
}
.card-affiliate-image-area .card-image {
  position: absolute;
  top: 0;
  left: 50%;
  width: 75px;
  margin: 0;
  -webkit-transform: rotate(90deg) translateY(-50%);
  transform: rotate(90deg) translateY(-50%);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.page-title .page-title-top-img {
  display: block;
  margin-bottom: 10px;
  line-height: 1;
}
/* check-list */
.check-list .check-list-item {
  font-size: 1.5rem;
  line-height: 20px;
}
.check-list .check-list-item::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  background: url("/images/icon/ic-checking.svg") no-repeat;
}
.check-list .check-list-item + .check-list-item {
  margin-top: 10px;
}
/* ui-checkbox-list-title */
.ui-select-terms .ui-checkbox-block.type-large + .ui-select-terms-layer .ui-checkbox-list-title .paragraph {
  font-weight: 400;
}
.ui-select-terms .ui-checkbox-block.type-large + .ui-select-terms-layer .ui-checkbox-list-title .paragraph::before {
  display: none;
}
.ui-select-terms .ui-checkbox-block.type-large + .ui-select-terms-layer .ui-checkbox-list-title .ui-arrow {
  margin-right: 4px;
}
/* page-contents type-multi-home */
.page-contents.type-multi-home {
  position: relative;
  min-height: 560px;
  padding: 0;
}
/* layer-multi-priority-payment-card */
.layer-multi-priority-payment-card {
  position: static;
  top: auto;
  bottom: 0;
  display: block;
  overflow: visible;
  height: auto;
  opacity: 1;
}
.layer-multi-priority-payment-card .layer-container {
  position: static;
  overflow: visible;
  height: auto;
}
.layer-multi-priority-payment-card .ui-layer {
  position: fixed;
  z-index: 2001;
  background-color: var(--gray-20);
  box-shadow: 0 0 0 1px var(--gray-30) inset;
  -webkit-transform: none;
  transform: none;
}
.layer-multi-priority-payment-card.js-layer-opened .header__button--opener {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.layer-multi-priority-payment-card .ui-layer.js-accordion-opened {
  background-color: #fff;
  box-shadow: 0 0 0 1px #fff inset;
}
.layer-multi-priority-payment-card .ui-layer:not(.js-accordion-animated) .js-ui-accordion__layer.js-accordion-opened {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-direction: column;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-flex: 1;
}
.layer-multi-priority-payment-card-dim {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 0;
  height: 0;
  background: rgba(31, 37, 49, 0.6);
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.layer-multi-priority-payment-card .ui-layer.js-accordion-opened ~ .layer-multi-priority-payment-card-dim,
.layer-multi-priority-payment-card .ui-layer.js-accordion-animated ~ .layer-multi-priority-payment-card-dim {
  width: 100%;
  height: 100%;
}
.layer-multi-priority-payment-card .ui-layer.js-accordion-opened ~ .layer-multi-priority-payment-card-dim {
  opacity: 1;
}
/* layer-notice */
.layer-notice .ui-layer__outtop .ui-label-text {
  color: var(--gray-40);
}
.layer-notice .ui-layer > .ui-layer__body {
  border-radius: 15px 15px 0 0;
}
.layer-notice .slide-banner-inner {
  max-width: none;
}
/* layer-app-off */
.layer-app-off .ui-layer > .ui-layer__body {
  border-radius: 15px 15px 0 0;
}
.layer-app-off .ui-layer__foot .ui-basic-button {
  border-radius: 0;
}
/* layer-qr-code */
.layer-qr-code .ui-layer__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
/* page-contents type-app-download */
.page-contents.type-app-download {
  padding: 0;
}
.page-contents.type-app-download,
.app-download-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
}
.app-download-wrap,
.app-download-image {
  /*-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;*/
  min-height: 0;
}
.app-download-wrap {
  min-height: 500px;
}
.app-download-image {
  position: relative;
  overflow: hidden;
  background-color: var(--secondary);
}
.app-download-image::before {
  /*content: '';
display: block;
padding-top: 80%;*/
}
.app-download-image img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
}
.app-download-info {
  -ms-flex: none;
  flex: none;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
  -webkit-box-flex: 0;
}
.store-box {
  padding: 25px 24px;
}
.store-box .type-store {
  margin-bottom: -10px;
}
.store-buttons {
  box-sizing: border-box;
  margin-top: 15px;
  border: 1px solid var(--basic);
  border-radius: 6px;
  font-size: 0;
}
.store-button-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.store-button-item {
  position: relative;
  width: 50%;
}
.store-button-item:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 1px;
  height: 14px;
  margin-top: -7px;
  background-color: var(--basic);
}
.store-button {
  display: block;
  height: 48px;
  border-radius: 6px;
  background: no-repeat center;
}
.store-button.type-google {
  background-image: url("/images/etc/store-google.svg");
}
.store-button.type-apple {
  background-image: url("/images/etc/store-apple.svg");
}
.store-button.type-google2 {
  background-image: url("/images/etc/store-google-2.svg");
}
.store-button.type-apple2 {
  background-image: url("/images/etc/store-apple-2.svg");
}
/* page-contents type-app-download type-bg */
.page-contents.bg-gradient {
  /*
background: #6a4bcb;
background: -moz-linear-gradient(top, #d093fe 0%, #00d3c1 100%);
                               background: -webkit-linear-gradient(top, #d093fe 0%, #00d3c1 100%);
                               background: linear-gradient(to bottom, #00d3c1 0%, #d093fe 100%);
                               filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d093fe', endColorstr='#00d3c1',GradientType=0 );
*/
  background: #d8f3f2;
}
.bg-gradient .app-download-image {
  position: static;
  height: auto;
  background-color: transparent;
}
.bg-gradient .app-download-image img {
  position: static;
  /*bottom: 35%;
top: auto;
left:50%;
margin-left:-45%;
width: 90vw;*/
  margin: 0 auto;
}
.bg-gradient .app-download-info {
  z-index: 10;
  box-shadow: none;
}
.bg-gradient .store-box {
  padding: 8px 24px 35px;
}
.app-download-title {
  color: #006069;
  font-size: 3rem;
  line-height: 40px;
  text-align: center;
}
.app-download-title .app-download-logo {
  height: 3.2rem;
  margin-bottom: 0.5rem;
}
/* form-bottom type-store */
.form-bottom.type-store .store-button {
  border: 1px solid #fff;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
/* apply-contents */
.apply-contents {
  display: none;
}
.apply-contents.is-active {
  display: block;
}
/* page-contents type-blur-empty */
.page-contents.type-blur-empty .ui-tab.type-nav {
  margin-bottom: 0;
}
.page-contents.type-blur-empty .blur-empty {
  margin-bottom: -35px;
}
/* page-contents type-landing */
.page-contents.type-landing {
  padding: 140px 0;
  text-align: center;
}
.landing-logo {
  width: 120px;
  height: 60px;
  margin: 0 auto;
  background: url("/images/common/splash-1qpay-logo.svg") no-repeat 50% 50%;
}
/* page-contents type-landing2 */
.page-contents.type-landing2 {
  padding: 0;
  text-align: center;
}
.page-contents.type-landing2 .landing-img {
  display: block;
  width: 100%;
}
.page-contents.type-landing2 .landing-img img {
  width: 100%;
}
/* 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;
}
/* page-contents type-app-intro */
.page-contents.type-app-intro {
  position: relative;
  padding: 0;
}
.app-intro-floating {
  position: absolute;
  right: 20px;
  bottom: 10px;
  left: 20px;
  z-index: 10;
}
.app-intro-floating-link {
  display: block;
  padding: 15px;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}
.app-intro-floating-link .form-flex-cell + .form-flex-cell {
  margin-left: 15px;
}
/* page-contents type-tutorial */
.page-contents.type-tutorial {
  position: relative;
  padding: 0;
}
/* page-contents type-guide-intro */
.page-contents.type-guide-intro {
  position: relative;
  padding: 0;
}
.page-contents.type-guide-intro .tutorial-slide {
  bottom: 80px;
  height: auto;
}
.page-guide-buttons {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 10px 19px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background-color: var(--gray-30);
}
.guide-buttons-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.guide-buttons-item {
  flex: 1 1 40%;
  margin: 5px;
}
.guide-button {
  display: block;
  padding: 11px 10px;
  border-radius: 50px;
  background-color: #fff;
  font-size: 1.3rem;
  line-height: 1.8rem;
  text-align: center;
}
/* tutorial-slide */
.tutorial-slide {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.tutorial-slide-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tutorial-slide-list:not(.swiper-wrapper) {
  display: none;
}
.tutorial-slide > .swiper-object,
.tutorial-slide > .swiper-object > .swiper,
.tutorial-slide-scroller,
.tutorial-slide-scroller > .swiper-object,
.tutorial-slide-scroller > .swiper-object > .swiper {
  width: 100%;
  height: 100%;
}
.tutorial-slide > .swiper-object > .swiper-pagination-bullets {
  right: 24px;
  margin: 0;
}
.tutorial-slide > .swiper-object > .swiper-pagination-bullets > .swiper-pagination-bullet {
  margin: 0;
}
.tutorial-slide > .swiper-object > .swiper-pagination-bullets > .swiper-pagination-bullet + .swiper-pagination-bullet {
  margin-top: 8px;
}
.tutorial-slide-block {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  height: 100%;
  min-height: 500px;
  padding: 45px 24px 0;
}
.tutorial-slide-title {
  margin-bottom: 25px;
  font-weight: 500;
  font-size: 3rem;
  line-height: 4rem;
  text-align: center;
}
.tutorial-slide-text {
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 2.4rem;
  text-align: center;
}
.tutorial-slide-image {
  position: absolute;
  top: 250px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  box-sizing: border-box;
  width: 240px;
  margin: 0 auto;
  border: 2px solid var(--basic);
  border-bottom: none;
  border-radius: 30px 30px 0 0;
  background-color: #fff;
  box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, 0.1);
}
.tutorial-slide-image::before {
  content: "";
  position: absolute;
  top: 38px;
  right: 12px;
  bottom: 0;
  left: 12px;
  display: block;
  border-radius: 14px 14px 0 0;
  background: no-repeat 50% 50% #f1f1f1;
}
.tutorial-slide-image.type-1::before {
  background-image: url("/images/contents/multi-tutorial-1.svg");
}
.tutorial-slide-image.type-2::before {
  background-image: url("/images/contents/multi-tutorial-2.svg");
}
.tutorial-slide-image.type-3::before {
  background-image: url("/images/contents/multi-tutorial-3.svg");
}
.tutorial-slide-image.type-4::before {
  background-image: url("/images/contents/multi-tutorial-4.svg");
}
.tutorial-slide-image.type-5 {
  background-image: url("/images/contents/app-intro-1.gif");
}
.tutorial-slide-image.type-6 {
  background-image: url("/images/contents/app-intro-2.gif");
}
.tutorial-slide-image.type-7 {
  background-image: url("/images/contents/app-intro-3.gif");
}
.tutorial-slide-image.type-8 {
  background-image: url("/images/contents/app-intro-4.gif");
}
.tutorial-slide.is-min-size .tutorial-slide-title {
  margin-bottom: 15px;
}
.tutorial-slide.is-min-size .tutorial-slide-image {
  top: 230px;
}
/* tutorial-slide type-app-intro */
.tutorial-slide.type-app-intro .tutorial-slide-block {
  padding-top: 20px;
}
.tutorial-slide.type-app-intro .tutorial-slide-title {
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 4.8rem;
  text-align: left;
}
.tutorial-slide.type-app-intro .tutorial-slide-text {
  color: var(--gray-70);
  font-weight: 400;
  font-size: 2rem;
  line-height: 2.7rem;
  text-align: left;
}
.tutorial-slide.type-app-intro .tutorial-slide-image {
  top: 130px;
  width: 100%;
  border: none;
  border-radius: 0;
  background-color: transparent;
  background-position: 50% 100%;
  background-size: 360px auto;
  background-repeat: no-repeat;
  box-shadow: none;
}
.tutorial-slide.type-app-intro .tutorial-slide-image::before {
  display: none;
}
/* page-contents type-guide */
.page-contents.type-guide {
  position: relative;
  padding: 0;
}
/* guide-slide */
.guide-slide {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.guide-slide-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.guide-slide-list:not(.swiper-wrapper) {
  display: none;
}
.guide-slide > .swiper-object,
.guide-slide > .swiper-object > .swiper,
.guide-slide-scroller,
.guide-slide-scroller > .swiper-object,
.guide-slide-scroller > .swiper-object > .swiper {
  width: 100%;
  height: 100%;
}
.guide-slide-block {
  box-sizing: border-box;
  height: auto;
  padding: 10px 24px 50px;
}
.guide-slide-title {
  margin-bottom: 25px;
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.8rem;
}
.guide-slide-controller {
  position: absolute;
  bottom: 27px;
  left: 0;
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 0;
  margin-bottom: 8px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.guide-slide-controller .swiper-pagination {
  display: block;
}
.guide-slide-controller .swiper-pagination,
.guide-slide-controller .swiper-button-prev,
.guide-slide-controller .swiper-button-next,
.guide-slide-controller .swiper-button-play,
.guide-slide-controller .swiper-button-pause,
.guide-slide-controller .swiper-button-toggle-play {
  -ms-flex: none;
  flex: none;
  -webkit-box-flex: 0;
}
.guide-slide-controller .swiper-pagination-bullets {
  position: static;
  order: 2;
  width: auto;
  margin: 0 0 0 6px;
  font-size: 0;
  line-height: 0;
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
}
.guide-slide-controller .swiper-pagination-bullets .swiper-pagination-bullet {
  display: inline-block;
  vertical-align: top;
  margin: 0;
}
.guide-slide-controller .swiper-pagination-bullets .swiper-pagination-bullet + .swiper-pagination-bullet {
  margin-left: 8px;
}
.guide-slide-controller .swiper-button-prev,
.guide-slide-controller .swiper-button-next,
.guide-slide-controller .swiper-button-play,
.guide-slide-controller .swiper-button-pause,
.guide-slide-controller .swiper-button-toggle-play {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  display: inline-block;
  vertical-align: top;
  width: 16px;
  height: 16px;
  margin: 0 0 0 6px;
  background: no-repeat 50% 50%;
}
.guide-slide-controller .swiper-button-prev::before,
.guide-slide-controller .swiper-button-next::before,
.guide-slide-controller .swiper-button-play::before,
.guide-slide-controller .swiper-button-pause::before,
.guide-slide-controller .swiper-button-toggle-play::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0);
}
.guide-slide-controller .swiper-button-prev::after,
.guide-slide-controller .swiper-button-next::after {
  display: none;
}
.guide-slide-controller .swiper-button-prev-text,
.guide-slide-controller .swiper-button-next-text,
.guide-slide-controller .swiper-button-play-text,
.guide-slide-controller .swiper-button-pause-text,
.guide-slide-controller .swiper-button-toggle-play-text {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  overflow: hidden;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.guide-slide-controller .swiper-button-prev {
  order: 1;
  margin-left: 0;
  background-image: url("/images/icon/ic-left.svg");
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
}
.guide-slide-controller .swiper-button-next {
  order: 3;
  background-image: url("/images/icon/ic-right.svg");
  -webkit-box-ordinal-group: 4;
  -ms-flex-order: 3;
}
.guide-slide-controller .swiper-button-play {
  order: 4;
  background-image: url("/images/icon/ic-play.svg");
  -webkit-box-ordinal-group: 5;
  -ms-flex-order: 4;
}
.guide-slide-controller .swiper-button-pause {
  order: 4;
  background-image: url("/images/icon/ic-pause.svg");
  -webkit-box-ordinal-group: 5;
  -ms-flex-order: 4;
}
.guide-slide-controller .swiper-button-toggle-play {
  order: 4;
  -webkit-box-ordinal-group: 5;
  -ms-flex-order: 4;
}
.guide-slide-controller .swiper-button-toggle-play.is-play {
  background-image: url("/images/icon/ic-play.svg");
}
.guide-slide-controller .swiper-button-toggle-play.is-pause {
  background-image: url("/images/icon/ic-pause.svg");
}
/* layer-clause-detail */
.layer-clause-detail .ui-layer__body-inner {
  padding-top: 10px;
}
/* page-contents type-clause-detail */
.page-contents.type-clause-detail {
  padding-top: 10px;
}
/* store-logos */
.store-logos {
  display: block;
}
.store-logos::before {
  content: "";
  display: table;
}
.store-logos-list {
  display: block;
  margin: -15px 0 0 -10px;
  padding: 0;
  list-style: none;
  font-size: 0;
  line-height: 0;
}
.store-logos-item {
  display: inline-block;
  vertical-align: top;
  padding: 15px 0 0 10px;
}
.store-logos-cell {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  min-height: 50px;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.store-logos-text {
  font-size: 1.3rem;
  line-height: 1.8rem;
}
/* store-logos type-service */
.store-logos.type-service .store-logos-list {
  margin: -8px 0 0 -8px;
}
.store-logos.type-service .store-logos-item {
  padding: 8px 0 0 8px;
}
/* store-logos type-guide */
.store-logos.type-guide .store-logos-list {
  margin: -15px 0 0 -15px;
}
.store-logos.type-guide .store-logos-item {
  padding: 15px 0 0 15px;
}
/* layer-affiliate-membership */
.process-text .sub .info-item + .info-item {
  margin-top: 4px;
}
.process-text .process-img {
  margin-left: -28px;
}
.ui-icon-add-membership {
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 26px;
  margin-top: -2px;
  background: url("/images/icon/ic-add-membership.svg") no-repeat 50% 50% / auto 100%;
}
.process-sub-text {
  margin-left: 28px;
}
.icon-traffic {
  display: inline-block;
  vertical-align: middle;
  margin-top: -2px;
  background: no-repeat 50% 50%/100% auto;
}
.icon-traffic.type-1 {
  width: 20px;
  height: 20px;
  background-image: url("/images/icon/ic-traffic-1.svg");
}
.icon-traffic.type-2 {
  width: 30px;
  height: 20px;
  background-image: url("/images/icon/ic-traffic-2.svg");
}
/* page-contents type-benefit-home */
.page-contents.type-benefit-home .rating-info .skeleton-block {
  display: inline-block;
  vertical-align: top;
  width: 66px;
  height: 2.4rem;
}
.page-contents.type-benefit-home .rating-info .skeleton-block:nth-child(2) {
  width: 55px;
}
.page-contents.type-benefit-home .benefit-nav-count .skeleton-block {
  width: 24px;
  height: 2.2rem;
}
.page-contents.type-benefit-home .counting-nav-head-count2 .skeleton-block {
  width: 24px;
  height: 1.9rem;
  margin: -2px 0;
  padding: 2px 0;
}
/* page-contents type-my-benefit */
.page-contents.type-my-benefit .total-amount-val .skeleton-block {
  width: 140px;
  height: 3.3rem;
}
.page-contents.type-my-benefit .my-benefit-list-wrap .skeleton-block {
  height: 60px;
}
.page-contents.type-my-benefit .form-detail-group .skeleton-block {
  width: 140px;
  height: 22px;
}
.page-contents.type-my-benefit .ui-select-block.type-card .card-image-inner::before {
  background: var(--skeleton);
}
.page-contents.type-my-benefit .ui-select-block.type-card .skeleton-block {
  display: inline-block;
  vertical-align: top;
  width: 67.41573%;
  height: 26px;
}
/* page-contents type-my-results */
.page-contents.type-my-results .skeleton-before .card-image-inner::before {
  background: var(--skeleton);
}
.page-contents.type-my-results .skeleton-before .card-name,
.page-contents.type-my-results .skeleton-before .card-number {
  border-radius: 3px;
  background: var(--skeleton);
}
.page-contents.type-my-results .skeleton-before .card-name {
  width: 80px;
  height: 24px;
}
.page-contents.type-my-results .skeleton-before .card-number {
  width: 150px;
  height: 17px;
}
.page-contents.type-my-results .skeleton-before .point-progress-object {
  background: var(--skeleton);
}
.page-contents.type-my-results .skeleton-before .point-progress-object-bar {
  opacity: 0;
}
.page-contents.type-my-results .skeleton-before .point-progress-gradation-item-text::before {
  content: "";
  display: block;
  width: 20px;
  height: 1.4rem;
  margin: 0 auto;
  border-radius: 3px;
  background: var(--skeleton);
}
.page-contents.type-my-results .skeleton-before .ui-buttons-item .skeleton-block {
  height: 1.8rem;
  padding: 9px;
}
.page-contents.type-my-results .rating-card-val .skeleton-block {
  display: inline-block;
  vertical-align: top;
  width: 50px;
  height: 2.3rem;
}
.page-contents.type-my-results .skeleton-before .title {
  width: 65px;
  height: 24px;
  border-radius: 3px;
  background: var(--skeleton);
}
/* page-contents type-membership */
.page-contents.type-membership {
  padding-top: 10px;
}
.membership-bottom {
  background-color: #f4f6f8;
}
.membership-bottom {
  padding: 35px 24px 30px;
  background-color: #f4f6f8;
}
.membership-bottom .guide-info-list {
  margin: 0;
  padding: 0;
  background-color: transparent;
}
.membership-bottom .guide-info-item {
  padding: 0;
}
.img-area.type-membership {
  width: 90px;
  margin-top: 35px;
  text-align: center;
}
/* layer-firecracker */
.layer-firecracker {
  background-image: url("/images/common/popup_confetti.gif");
  background-position: 50% 0;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.layer-firecracker2::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  z-index: 10002;
  display: block;
  width: 100%;
  height: 300px;
  background-image: url("/images/common/popup_confetti.gif");
  background-position: 50% 0;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
/* page-contents type-faq-main */
.page-contents.type-faq-main .faq-contents .wcms-data {
  color: #666;
  font-size: 14px;
}
.page-contents.type-faq-main .faq-contents .wcms-data a {
  color: inherit;
}
/* notice-tell */
.notice-tell {
  margin-top: 4px;
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.notice-tell-item {
  position: relative;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  max-width: 100%;
  padding-left: 17px;
  color: var(--gray-70);
  word-break: break-all;
}
.notice-tell-item:first-child {
  padding-left: 0;
}
.notice-tell-item:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  display: block;
  height: 10px;
  margin-top: -5px;
  border-left: 1px solid var(--gray-60);
}
/* life-top-img */
.life-top-img img {
  display: block;
  width: 100%;
}
/* global-card-brand-group */
.global-card-brand-group {
  margin-top: -25px;
  margin-left: -5px;
  font-size: 0;
  line-height: 0;
}
.slide-card .card-detail .global-card-brand-group .global-card-brand {
  margin: 0 0 0 5px;
}
/* page-contents type-store-landing */
.page-contents.type-store-landing {
  padding-top: 40px;
  padding-bottom: 40px;
}
.page-contents.type-store-landing .ui-loading {
  position: relative;
  top: auto;
  left: auto;
  margin-top: 80px;
  -webkit-transform: none;
  transform: none;
}
.page-contents.type-store-landing .ui-loading-block {
  margin: 0 auto;
}
/* 20220510*/
.cont_deli .page-title {
}
.cont_deli .page-title strong {
  position: relative;
  z-index: 10;
  display: inline-block;
}
.cont_deli .page-title strong:after {
  content: "";
  position: absolute;
  bottom: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 10px;
  background-color: #e5faf9;
}
.bene_box {
  position: relative;
}
.bene_box + .bene_box {
  margin-top: 38px;
  padding-top: 28px;
  border-top: 1px solid #e5e5e5;
}
.bene_box + .bene_box:before {
  content: "";
  position: absolute;
  top: -18px;
  left: 50%;
  display: block;
  width: 37px;
  height: 37px;
  background: url("/images/contents/deli_tour/ic_plus.png") no-repeat center center;
  background-size: contain;
  transform: translate(-50%, 0);
}
.bene_box ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.bene_box ul li {
  flex: 1;
  margin-right: 10px;
  padding: 20px 0;
  border-radius: 10px;
  background-color: #f0f6ff;
  font-size: 12px;
  text-align: center;
}
.bene_box ul li:last-child {
  margin-right: 0;
}
.bene_box ul li img {
  display: block;
  width: 52px;
  margin: 0 auto 8px;
  border-radius: 10px;
}
.bene_box ul li strong {
  display: block;
  margin-bottom: 2px;
}
.bene_box.ty02 ul li {
  background-color: #fcfbe3;
}
.bene_box.ty03 ul li {
  background-color: #f6effe;
}
.bene_box .tit {
  position: relative;
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 27px;
}
.bene_box .tit strong {
  display: block;
  margin-bottom: -8px;
  font-size: 18px;
}
.bene_box .tit span {
  font-weight: 400;
  font-size: 12px;
}
.bene_box .tit span strong {
  display: inline;
  font-size: 12px;
}
.bene_box .tit .ui-basic-button {
  position: absolute;
  top: 50%;
  right: 0;
  width: 151px;
  transform: translate(0, -50%);
}
.map_wrap {
  margin: 0 -24px;
  padding: 30px 24px;
  background: #f8f8f8 url("/images/contents/deli_tour/local_img.png") no-repeat center center;
  background-size: contain;
}
.map_wrap .tit {
  margin-bottom: 13px;
  color: #000;
  font-weight: 400;
  font-size: 15px;
  text-align: center;
}
.map_wrap .tit span {
  vertical-align: baseline;
  color: #00a49d;
}
.local_select:before {
  right: 15px;
}
.local_select .ui-button {
  padding: 0 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
}
.local_list {
}
.local_list ul {
}
.local_list > ul > li {
  padding: 20px 0;
  border-bottom: 1px solid #e5e5e5;
}
.local_list > ul > li .flag {
  margin-bottom: 8px;
}
.local_list > ul > li .flag span {
  display: inline-block;
  width: 78px;
  height: 20px;
  border-radius: 10px;
  background-color: #01a6a0;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}
.local_list > ul > li .flag.ty02 span {
  background-color: #6a4bcb;
}
/*  */
.local_list > ul > li .name {
  margin-bottom: 5px;
  color: #111;
  font-weight: 700;
  font-size: 20px;
}
.local_list > ul > li .info {
  margin-bottom: 9px;
  color: #666;
  font-size: 12px;
}
.local_list > ul > li .info ul li {
  margin-bottom: 3px;
}
.local_list > ul > li .info ul li:last-child {
  margin-bottom: 0;
}
.local_list > ul > li .info ul li span {
  position: relative;
  display: inline-block;
}
.local_list > ul > li .info ul li span + span {
  display: inline-block;
  margin-left: 10px;
}
.local_list > ul > li .info ul li span + span:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  display: inline-block;
  width: 1px;
  height: 11px;
  background-color: #e5e5e5;
  transform: translateY(-50%);
}
.local_list > ul > li .hash_tag {
  color: #01a6a0;
  font-size: 12px;
}
.bene_box.deli {
  padding-bottom: 0;
  border-bottom: 0;
}
.bene_box.deli:after {
  display: none;
}
.bene_box.deli .tit {
  font-weight: 400;
  font-size: 15px;
}
.bene_box.deli .tit span {
  font-size: 15px;
}
.bene_box.deli ul {
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
}
.bene_box.deli ul li {
  position: relative;
}
.bene_box.deli ul li:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -23px;
  z-index: 2;
  display: block;
  width: 37px;
  height: 37px;
  background: url("/images/contents/deli_tour/ic_plus.png") no-repeat center center;
  background-size: contain;
  transform: translateY(-50%);
}
.bene_box.deli ul li:last-child:after {
  display: none;
}
.bene_box.deli ul li.food {
  background-color: #e8f9f8;
}
.bene_box.deli ul li.bread {
  background-color: #f5f3fb;
}
.bene_box.deli ul li img {
  width: 70px;
}
.cont_deli .guide-info-item {
  padding-bottom: 10px;
}
.cont_deli .guide-info-title {
  color: #000;
  font-size: 18px;
}
.cont_deli .guide-info-text {
  color: #000;
  font-size: 12px;
}
.cont_deli .guide-info-icon.icon_map {
  width: 66px;
  height: 66px;
  background: url("/images/contents/deli_tour/ic_map.png") no-repeat center center;
  background-size: contain;
}
.cont_deli .wcms-list-item {
  color: #666;
  font-size: 12px;
}
.cont_deli .ui-select-list .ui-label {
  width: 100%;
}
/* 20220510*/
.contents-wrap.contents-hamoca .page-header {
  padding: 38px 24px 31px 24px;
  background-color: #b4b1fb;
}
.contents-wrap.contents-hamoca .page-header .header-title {
  margin-bottom: 15px;
  color: #fff;
  font-weight: 400;
  font-size: 2.2rem;
  text-align: center;
}
.contents-wrap.contents-hamoca .page-header .header-title span {
  font-weight: 300;
}
.contents-wrap.contents-hamoca .hamoca119-img img {
  width: 100%;
}
.contents-wrap.contents-hamoca .page-contents {
  background-color: #f4f6f8;
}
.contents-wrap.contents-hamoca .ui-buttons-list .ui-buttons-item .txt {
  margin-top: 7px;
  color: #878787;
  font-weight: 300;
  font-size: 1.3rem;
  text-align: center;
}
.contents-wrap.contents-hamoca .ui-buttons-list .ui-buttons-item:nth-child(2) {
  margin-top: 15px;
}
.contents-wrap.contents-hamoca .ui-buttons-list .ui-buttons-item .circle-phone {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 9px;
  border-radius: 50%;
  background: #e5e5e5 url("/images/icon/ic-phone-center.png") no-repeat center / 15px 12px;
}
/* 220721 */
.contents-wrap.contents-hamoca-02 .page-header {
  padding: 50px 24px 35px 24px;
  background-color: #e2e6e9;
}
.contents-wrap.contents-hamoca-02 .page-header .header-title {
  margin-bottom: 15px;
  color: #000;
  font-weight: 400;
  font-size: 1.9rem;
  text-align: center;
}
.contents-wrap.contents-hamoca-02 .page-header .header-title span {
  font-weight: 300;
}
.contents-wrap.contents-hamoca-02 .page-header .type-card119-01 {
  display: block;
  height: 67px;
  padding: 13px 58px;
  border-color: #409dac;
  border-radius: 45px;
  background-color: #409dac;
  color: #fff;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 2rem;
}
.contents-wrap.contents-hamoca-02 .page-header .type-card119-01 span {
  display: block;
  margin-top: 2px;
  font-size: 1.2rem;
  line-height: 1.7rem;
}
.contents-wrap.contents-hamoca-02 .page-header .type-card119-02 {
  display: block;
  padding: 5px 10px;
  color: #455b5e;
  font-size: 1.4rem;
  line-height: 1.9rem;
}
.contents-wrap.contents-hamoca-02 .page-header .type-card119-02 span {
  position: relative;
}
.contents-wrap.contents-hamoca-02 .page-header .type-card119-02 span::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #788182;
}
.section-title .title.ty-card119 {
  color: #323232;
  font-weight: 500 !important;
  font-size: 1.7rem;
  line-height: 2rem;
}
/* tel-menu-list */
.tel-menu-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 12px;
}
.tel-menu-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.tel-menu-text {
  display: block;
  margin: 7px 0;
  color: #323232;
  font-size: 1.5rem;
  line-height: 2rem;
}
.card119-tel-menu {
  display: block;
  height: 58px;
}
.card119-tel-menu img {
  height: 100%;
}
.banner-center {
  width: calc(100% + 48px);
  margin-left: -24px;
  background-color: #f6f6f6;
}
.page-center {
  padding-top: 0;
}
.header-center {
  background-color: #f6f6f6;
}
.ui-basic-button.type-center {
  border: none;
  background-color: #409dac;
  color: #fff;
}
.ui-basic-button.type-card119-01 {
  min-height: auto;
  padding: 7px 5px 8px;
  border-radius: 4px;
  color: #323232;
  font-size: 1.5rem;
  line-height: 2rem;
}
.ui-basic-button.type-card119-02 {
  min-height: auto;
  padding: 7px 5px 8px;
  border-color: #f474aa;
  border-radius: 4px;
  background-color: #f474aa;
  color: #fff;
  font-size: 1.5rem;
  line-height: 2rem;
}
.contents-wrap.contents-hamoca-02 .type-card119-03 {
  display: inline-block;
  padding: 5px 10px;
  color: #5c7275;
  font-size: 1.4rem;
  line-height: 1.9rem;
}
.contents-wrap.contents-hamoca-02 .type-card119-03 span {
  position: relative;
}
.contents-wrap.contents-hamoca-02 .type-card119-03 span::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #5c7275;
}
/* 금융 한눈에 보기 */
.type-lview .form-bottom {
  margin-top: 20px;
}
/* 모든 혜택 */
.page-contents.type-benefit-home .menu-top {
  padding: 20px 24px 35px 24px;
}
.page-contents.type-benefit-home .rating-info {
  padding: 15px 20px;
}

/* benefit-like 22.11.28 */
.ico-data1q {
  display: inline-block;
  vertical-align: top;
  color: #ff4880;
  font-weight: bold;
  font-size: 13px;
  line-height: 17px;
  letter-spacing: -0.8px;
}
.benefit-like .slide-account-benefit {
  display: block;
  margin-top: 20px;
  padding: 24px 0;
  border-radius: 15px;
  background: #e7f1f4;
}
.benefit-like .slide-account-benefit .slide-account-empty-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.benefit-like .slide-account-benefit .slide-account-inner {
  position: relative;
  width: 88%;
  padding: 0;
}
.benefit-like .slide-account-benefit .slide-account-inner:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.benefit-like .slide-account-benefit .menu-horizontal-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: auto;
  padding: 10px 5px 5px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
  font-size: 1.4rem;
  line-height: 1.4rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
}
.benefit-like .slide-account-benefit .menu-horizontal-icon {
  display: block;
  width: 38px;
  height: 38px;
  margin: 0 auto;
}
.benefit-like .slide-account-benefit .menu-horizontal-title {
  margin-top: 3px;
}
.benefit-like .slide-account-text {
  display: block;
  font-size: 1.5rem;
  line-height: 1.8rem;
  text-align: center;
}
.benefit-like .accordion-list {
  overflow: hidden;
  border: none;
  border-radius: 0;
}
.benefit-like .accordion-item {
  box-sizing: border-box;
  border: 1px solid transparent;
  border-top: 1px solid var(--gray-30);
}
.benefit-like .accordion-item:first-child {
  border-top: 1px solid transparent;
}
.benefit-like .accordion-opener {
  display: block;
  box-sizing: border-box;
  padding: 9px 17px;
  background: #fff;
}
.benefit-like .accordion-opener:after {
  right: 20px;
}
.benefit-like .accordion-opener:before {
  display: none;
}
.benefit-like .accordion-opener.js-accordion-active {
  background: #e7f1f4;
}
.benefit-like .accordion-opener.js-accordion-active:before {
  display: none;
}
.benefit-like .accordion-item.js-accordion-opened:not(:last-child) {
  border-bottom: 1px solid #707070;
}
.benefit-like .accordion-item:not(.js-accordion-opened):last-child .accordion-opener:before {
  display: none;
}
.benefit-like .accordion-item.js-accordion-opened {
  overflow: hidden;
  border: 1px solid #707070;
  border-radius: 10px;
}
.benefit-like .accordion-item.js-accordion-opened + .accordion-item {
  border: 1px solid transparent;
}
.benefit-like .accordion-opener-title {
  display: block;
  box-sizing: border-box;
  padding-right: 20px;
  color: var(--basic);
  font-size: 1.5rem;
  line-height: 22px;
}
.benefit-like .accordion-opener-text {
  display: block;
  box-sizing: border-box;
  margin-top: 5px;
  padding-right: 20px;
  color: var(--gray-70);
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 18px;
}
.benefit-like .accordion-contents {
  box-sizing: border-box;
  padding: 12px 20px 12px 45px;
  font-weight: 300;
  line-height: 18px;
}
.benefit-detail-like-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.benefit-detail-like-item:not(:first-child) {
  margin-top: 12px;
}
.benefit-detail-like-item .rank {
  width: 28px;
  font-weight: 900;
  font-size: 18px;
}
.benefit-detail-like-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  background: no-repeat 50% 50% / auto 100%;
}
.benefit-detail-like-text {
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.5rem;
}
.benefit-detail-like-link {
  display: block;
  overflow: hidden;
  color: #383838;
  font-weight: normal;
  font-size: 1.4rem;
  line-height: 1.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.benefit-detail-like-link + .benefit-detail-like-link {
  margin-top: 10px;
}
.benefit-like .accordion-item.no-item .accordion-opener:after {
  display: none;
}
.benefit-like .accordion-item.no-item .js-ui-accordion__layer {
  display: none !important;
  height: 0 !important;
}
.menu-horizontal-icon.type-like-01,
.benefit-detail-like-icon.type-like-01 {
  background-image: url("/images/icon/ic-like-1.png");
}
/* 온라인쇼핑 */
.menu-horizontal-icon.type-like-02,
.benefit-detail-like-icon.type-like-02 {
  background-image: url("/images/icon/ic-like-2.png");
}
/* 홈쇼핑 */
.menu-horizontal-icon.type-like-03,
.benefit-detail-like-icon.type-like-03 {
  background-image: url("/images/icon/ic-like-3.png");
}
/* 패션 */
.menu-horizontal-icon.type-like-04,
.benefit-detail-like-icon.type-like-04 {
  background-image: url("/images/icon/ic-like-4.png");
}
/* 백화점 */
.menu-horizontal-icon.type-like-05,
.benefit-detail-like-icon.type-like-05 {
  background-image: url("/images/icon/ic-like-5.png");
}
/* 아울렛 */
.menu-horizontal-icon.type-like-06,
.benefit-detail-like-icon.type-like-06 {
  background-image: url("/images/icon/ic-like-6.png");
}
/* 복합몰 */
.menu-horizontal-icon.type-like-07,
.benefit-detail-like-icon.type-like-07 {
  background-image: url("/images/icon/ic-like-7.png");
}
/* 대형마트 */
.menu-horizontal-icon.type-like-08,
.benefit-detail-like-icon.type-like-08 {
  background-image: url("/images/icon/ic-like-8.png");
}
/* 마트 */
.menu-horizontal-icon.type-like-09,
.benefit-detail-like-icon.type-like-09 {
  background-image: url("/images/icon/ic-like-9.png");
}
/* 편의점 */
.menu-horizontal-icon.type-like-10,
.benefit-detail-like-icon.type-like-10 {
  background-image: url("/images/icon/ic-like-10.png");
}
/* H&B */
.menu-horizontal-icon.type-like-11,
.benefit-detail-like-icon.type-like-11 {
  background-image: url("/images/icon/ic-like-11.png");
}
/* 배달 */
.menu-horizontal-icon.type-like-12,
.benefit-detail-like-icon.type-like-12 {
  background-image: url("/images/icon/ic-like-12.png");
}
/* 미식 */
.menu-horizontal-icon.type-like-13,
.benefit-detail-like-icon.type-like-13 {
  background-image: url("/images/icon/ic-like-13.png");
}
/* 커피 */
.menu-horizontal-icon.type-like-14,
.benefit-detail-like-icon.type-like-14 {
  background-image: url("/images/icon/ic-like-14.png");
}
/* 패스트푸드 */
.menu-horizontal-icon.type-like-15,
.benefit-detail-like-icon.type-like-15 {
  background-image: url("/images/icon/ic-like-15.png");
} /* F&B */
.menu-horizontal-icon.type-like-16,
.benefit-detail-like-icon.type-like-16 {
  background-image: url("/images/icon/ic-like-16.png");
}
/* 구독&공유 */
.menu-horizontal-icon.type-like-17,
.benefit-detail-like-icon.type-like-17 {
  background-image: url("/images/icon/ic-like-17.png");
} /* 호텔 */
.menu-horizontal-icon.type-like-18,
.benefit-detail-like-icon.type-like-18 {
  background-image: url("/images/icon/ic-like-18.png");
}
/* 골프&리조프 */
.menu-horizontal-icon.type-like-19,
.benefit-detail-like-icon.type-like-19 {
  background-image: url("/images/icon/ic-like-19.png");
}
/* 운동 */
.menu-horizontal-icon.type-like-20,
.benefit-detail-like-icon.type-like-20 {
  background-image: url("/images/icon/ic-like-20.png");
}
/* 게임*/
.menu-horizontal-icon.type-like-21,
.benefit-detail-like-icon.type-like-21 {
  background-image: url("/images/icon/ic-like-21.png");
}
/* 인테리어 */
.menu-horizontal-icon.type-like-22,
.benefit-detail-like-icon.type-like-22 {
  background-image: url("/images/icon/ic-like-22.png");
} /* 교육 */
.menu-horizontal-icon.type-like-23,
.benefit-detail-like-icon.type-like-23 {
  background-image: url("/images/icon/ic-like-23.png");
}
/* 반려동물 */
.menu-horizontal-icon.type-like-24,
.benefit-detail-like-icon.type-like-24 {
  background-image: url("/images/icon/ic-like-24.png");
}
/* 키즈 */
.menu-horizontal-icon.type-like-25,
.benefit-detail-like-icon.type-like-25 {
  background-image: url("/images/icon/ic-like-25.png");
}
/* 해외결제 */
.menu-horizontal-icon.type-like-26,
.benefit-detail-like-icon.type-like-26 {
  background-image: url("/images/icon/ic-like-26.png");
}
/* 해외여행 */
.menu-horizontal-icon.type-like-27,
.benefit-detail-like-icon.type-like-27 {
  background-image: url("/images/icon/ic-like-27.png");
}
/* 해외직구 */
.menu-horizontal-icon.type-like-28,
.benefit-detail-like-icon.type-like-28 {
  background-image: url("/images/icon/ic-like-28.png");
}

/*  */
.menu-horizontal-icon.type-like-29,
.benefit-detail-like-icon.type-like-29 {
  background-image: url("/images/icon/ic-like-29.png");
}

/* 트래블로그 팝업 */
.type-travlog .slide-banner .slide-banner-controller {
  top: 0;
}
.type-travlog .slide-banner .swiper-pagination-current {
  color: #fff;
}
.type-travlog {
  background: linear-gradient(139deg, rgba(109, 104, 231, 1), rgba(200, 124, 217, 1));
}
.type-travlog .travlog-inr {
  position: relative;
  width: 100%;
}
.type-travlog .travlog-inr img {
  width: 100%;
}
.type-travlog .travlog-inr .img_card {
  position: absolute;
  top: calc(50% - 116px);
  left: calc(50% - 140px);
  width: 280px;
}
.type-travlog.ui-layer__body .travlog-txt-title {
  padding: 30px 0 20px 0;
  color: #ffe80a;
  font-weight: 300;
  font-size: 1.5rem;
  text-align: center;
}
.type-travlog.ui-layer__body .travlog-txt-title strong {
  color: #fff;
  font-size: 2.8rem;
}
.type-travlog.ui-layer__body .travlog-txt-text {
  padding: 0 0 20px 20px;
  color: #ffe80a;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 2rem;
}
/* 2022.11.18 내카드관리 */
.header.is-scroll {
  z-index: 1000;
}
/* 20230918 내카드 관리 스크롤 버벅임 이슈 수정 */
.my-card-fix.slide-card {
  position: relative;
  /* top: 50px; */
  border-bottom: 1px solid transparent;
  background: #fff;
}
.my-card-fix.slide-card.is-scroll {
  position: relative;
  right: 0;
  /* height:0; */
  /* top: 50px; */
  left: 0;
  z-index: 100;
  box-sizing: border-box;
  /* border-bottom: 1px solid var(--gray-30); */
  /*            transition:.5s;*/
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.my-card-fix.slide-card.is-scroll::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.my-card-fix.slide-card.is-scroll .card-detail {
  display: block;
  width: auto;
  max-width: 220px;
}
.my-card-fix.slide-card.is-scroll .card-detail .card-image {
  width: 100px;
  margin: 10px auto 10px;
}
.my-card-fix.slide-card.is-scroll .swiper-slide {
  opacity: 0;
}
.my-card-fix.slide-card.is-scroll .swiper-slide.swiper-slide-active {
  opacity: 1;
}
.my-card-fix.slide-card.is-scroll .slide-card-pagination {
  overflow: hidden;
  height: 0;
  opacity: 0;
}
.my-card-fix.slide-card.is-scroll .slide-card-pagination .swiper-object {
  display: none;
  margin-top: 0;
}
.my-card-fix.slide-card.is-scroll .global-card-brand.type-medium {
  display: none;
  width: 32px;
  height: 32px;
}
.my-card-fix.slide-card.is-scroll .card-detail .ui-arrow {
  min-width: calc(100% - 76px);
  max-width: 182px;
  height: 32px;
}
.my-card-fix.slide-card.is-scroll .card-detail .ui-arrow .basic-text {
  overflow: hidden;
  font-size: 1.4rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-card-fix.slide-card.is-scroll .card-detail .ui-arrow .basic-text .global-card-arrow {
  display: none;
}
.my-card-fix.slide-card.is-scroll .global-card-brand.type-medium:last-child {
  display: block;
}
.my-card-fix.slide-card.is-scroll .card-detail .card-flex {
  display: flex;
  align-items: flex-end;
  margin-bottom: 10px;
}
.my-card-fix.slide-card.is-scroll .card-detail .card-flex .global-card-brand-group {
  margin: 0 6px 0 0;
}
.my-card-fix.slide-card.is-scroll .card-detail .margin-top-minus-5.basic-text {
  vertical-align: baseline;
  overflow: hidden;
  width: calc(100% - 38px);
  height: 32px;
  line-height: 32px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 22.11.24 push */
.layer-wrap.layer-new-push .ui-layer__body {
  position: relative;
  overflow: inherit;
}
.layer-wrap.layer-new-push .content-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.layer-wrap.layer-new-push .header_title {
  font-size: 1.8rem;
}
.layer-wrap.layer-new-push .date {
  height: 240px;
  margin: 0 auto;
  background: url("/images/contents/img_push_letter.gif") no-repeat top center;
  background-size: 242px auto;
}
.layer-wrap.layer-new-push .date .txt {
  position: absolute;
  top: 44px;
  overflow: hidden;
  width: 100%;
  text-align: center;
  opacity: 0;
}
.layer-wrap.layer-new-push .date .txt.txt_ani {
  animation: fadein 4s ease-in-out;
  animation-delay: 0.2s;
}
@keyframes fadein {
  0% {
      opacity: 0;
  }
  10% {
      opacity: 0;
      transform: translateY(20px);
  }
  30%,
  100% {
      opacity: 1;
      transform: none;
  }
}
.layer-wrap.layer-new-push .date .year {
  font-weight: 700;
  font-size: 15px;
}
.layer-wrap.layer-new-push .date .money {
  color: #00a49d;
  font-weight: bold;
  font-size: 25px;
}
.layer-wrap.layer-new-push .section-title .title {
  color: #111;
  font-weight: 500;
  font-size: 18px;
}
.layer-wrap.layer-new-push .basic-text {
  line-height: 1.8;
}
.layer-wrap.layer-new-push .tooltip-box-wrap {
  display: flex;
  justify-content: flex-end;
}
.layer-wrap.layer-new-push .tooltlp-box {
  position: relative;
  width: 198px;
  height: 62px;
  text-align: right;
}
.layer-wrap.layer-new-push .tooltlp-box.type-01 {
  margin-top: -27px;
}
.layer-wrap.layer-new-push .tooltlp-box button {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 62px;
  height: 62px;
  background: url("/images/icon/ico-letter.png") no-repeat;
  background-size: cover;
}
.layer-wrap.layer-new-push .tooltlp-box .ui-button-tooltip {
  right: 65px;
  bottom: 15%;
  left: auto;
  margin-bottom: 0;
  transform: translateX(0);
}
.layer-wrap.layer-new-push .tooltlp-box .ui-button-tooltip .ui-button-tooltip-text:after {
  top: 30%;
  right: -12px;
  left: auto;
  border-width: 7px 6px;
  transform: rotate(-90deg);
}
/* march-rank-area 22.12.09 */
.match-rank-block {
  position: relative;
  display: block;
  margin-top: 7px;
}
.match-rank-select {
  position: unset !important;
  display: inline-block;
}
.match-rank-area .match-rank-label {
  position: relative;
  display: inline-block;
  height: 37px;
  margin-right: 2px;
  padding: 0 30px 0 13px;
  border: 1px solid var(--primary-dark);
  border-radius: 8px;
  background-color: #fbffff;
  color: var(--primary-dark);
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 31px;
  text-align: left;
}
.match-rank-area .match-rank-label::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 10px;
  display: block;
  width: 15px;
  height: 6px;
  background: url(/images/icon/btn-select-l-green.svg) no-repeat 100% 50% / 100% auto;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}
.match-rank-area .js-dropdown-opened .match-rank-label::before {
  top: 14px;
  right: 9px;
  background: url(/images/icon/btn-select-l-green-on.svg) no-repeat 100% 50% / 100% auto;
}
.match-rank-area .match-rank-label-text {
  font-size: 1.8rem;
  line-height: 37px;
}
.match-rank-area .match-rank-option-area {
  position: absolute;
  left: 0;
  z-index: 15;
  width: 100%;
  margin: 0 -24px !important;
  padding: 8px 24px 15px;
  background: #fff;
}
.match-rank-area .type-grid .ui-radio-block .ui-label {
  min-height: 40px;
}
.match-rank-area .type-grid:not(.type-grid-basic) .ui-radio-block .ui-label {
  padding-top: 5px;
  padding-bottom: 5px;
}
.match-rank-area .type-grid:not(.type-grid-basic) .type-box .ui-label-text,
.match-rank-area .type-panel .type-box .ui-label-text {
  font-size: 1.7rem;
  line-height: 18px;
}
.ui-radio-block.type-tab .ui-radio:checked + .ui-label .ui-label-text .color-secondary {
  color: #fff !important;
}
/* 23.01.12 top-autoloan-agent */
.top-autoloan-agent {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0 -24px;
  padding: 54px 24px 102px;
  background: #f2f4f8;
}
.top-autoloan-agent:before {
  content: "";
  position: absolute;
  right: -31px;
  bottom: 28px;
  display: inline-block;
  width: 151px;
  height: 158px;
  background: url("/images/contents/top-autoloan-agent.png") no-repeat center center / 100% 100%;
}
.top-autoloan-agent:after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  display: block;
  width: 100%;
  height: 35px;
  border-radius: 0 35px 0 0;
  background: #fff;
}
.top-autoloan-agent .page-title .big-text {
  font-size: 2.6rem;
}
.top-autoloan-agent .page-info-text {
  color: #444;
}
/* 23.01.12 fix-bottom-wrap ui-input-block type-msg */
.ui-input-block.type-msg .ui-input {
  height: 48px;
  margin: 0;
  padding-right: 47px;
  padding-left: 24px;
  border: 1px solid var(--gray-40);
  border-width: 1px 0 0 0;
  font-size: 1.5rem;
  text-align: left;
}
.ui-input-block.type-msg .ui-input::-webkit-input-placeholder {
  color: var(--gray-40);
  -webkit-text-fill-color: var(--gray-40);
}
.ui-input-block.type-msg .ui-input::-moz-placeholder {
  color: var(--gray-40);
  -webkit-text-fill-color: var(--gray-40);
}
.ui-input-block.type-msg .ui-input:-ms-input-placeholder {
  color: var(--gray-40);
  -webkit-text-fill-color: var(--gray-40);
}
.ui-input-block.type-msg .ui-input:-moz-placeholder {
  color: var(--gray-40);
  -webkit-text-fill-color: var(--gray-40);
}
.ui-input-block.type-msg.is-focus .ui-input {
  padding-right: 71px;
}
.ui-input-msg {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 48px;
  background: url("/images/icon/ic-msg-send.png") no-repeat 5px 50% / 20px 18px;
}
/* 23.01.12 chat-qna-area */
.chat-qna-area {
  color: var(--gray-70);
}
.chat-qna-box {
  padding: 15px 0;
}
.chat-qna-date {
  display: block;
  padding-bottom: 15px;
  font-size: 1.2rem;
  line-height: 1.5rem;
  text-align: center;
}
.chat-qna-block {
  position: relative;
  display: block;
}
.chat-qna-block:after {
  content: "";
  display: block;
  clear: both;
}
.chat-qna-text {
  display: inline-block;
  max-width: 70%;
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.chat-qna-time {
  display: block;
  margin-top: 10px;
  font-size: 1.2rem;
  line-height: 1.5rem;
}
.chat-qna-block.type-user {
  text-align: right;
}
.chat-qna-block.type-user .chat-qna-text {
  padding: 15px;
  border-radius: 15px 15px 0 15px;
  background: #00a49d;
  color: #fff;
  text-align: left;
}
.chat-qna-block.type-system {
  padding-top: 44px;
}
.chat-qna-block.type-system:before {
  content: "톡상담사";
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  height: 36px;
  padding-left: 45px;
  background: url("/images/icon/ic-chat-qna.png") no-repeat 0% 0% / 36px 36px;
  color: var(--basic);
  font-size: 1.5rem;
  line-height: 36px;
}
.chat-qna-block.type-system .chat-qna-text {
  padding: 15px;
  border-radius: 0 15px 15px 15px;
  background: #f2f4f8;
  color: var(--basic);
  text-align: left;
}
.chat-qna-block + .chat-qna-block {
  margin-top: 15px;
}
.chat-qna-block.type-user + .type-user,
.chat-qna-block.type-system + .type-system {
  margin-top: 8px;
}

/* push_popup 23.04.06 */
.layer-receipt-2 .header {
  padding: 28px 24px 25px;
}
.layer-receipt-2 .firecracker {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 400px;
  height: 160px;
  margin-top: -25px;
  background: url(/images/common/bg-firecracker.png) no-repeat center center;
  background-size: contain;
  transform: translateX(-50%);
}
.layer-receipt-2 .content-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 30px 0;
  /*    overflow: hidden;*/
  /*    background: url(/images/common/layer-receipt-2-cont.png) repeat 50% 100%;*/
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}
.layer-receipt-2 .content-wrap::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 0%;
  width: 100%;
  height: 30px;
  background: url(/images/common/layer-receipt-2-header.png) repeat-x 0 0;
  background-size: contain;
}
.layer-receipt-2 .content-wrap::after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0%;
  width: 100%;
  height: 30px;
  background: url(/images/common/layer-receipt-2-header.png) repeat-x 0 0;
  background-size: contain;
  transform: rotate(180deg);
}
.layer-receipt-2 .benefit-top {
  position: relative;
  margin-bottom: 0;
  padding: 35px 0;
  border-bottom: none;
  color: var(--basic);
  text-align: center;
}
.layer-receipt-2 .benefit-top::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: calc(100% - 60px);
  height: 1px;
  background: var(--gray-30);
  transform: translateX(-50%);
}
.layer-receipt-2 .benefit-top .amount {
  position: relative;
  z-index: 2;
}
.layer-receipt-2 .benefit-top .amount .money {
  color: var(--basic);
  font-weight: 500;
  font-size: 3rem;
  line-height: 3.7rem;
}
.layer-receipt-2 .benefit-top .amount .money span {
  font-weight: 700;
}
/*
.layer-receipt-2 .benefit-top .circle{
width: 130px;
height: 130px;
margin: 0 auto;
position: absolute;
left: 50%;
top: 7%;
transform: translate(-50%);
border-radius: 50%;
background: radial-gradient(circle, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 70%) 30%, rgb(247 0 0 / 0%) 100%);
z-index: 1;
}
*/
.layer-receipt-2 .benefit-top p {
  margin-bottom: 5px;
  font-size: 1.5rem;
  line-height: 1.25;
}
.layer-receipt-2 .benefit-cont {
  padding: 15px 30px 38px;
}
.layer-receipt-2 .benefit-cont .form-detail-item {
  align-items: center;
}
.layer-receipt-2 .benefit-cont .form-detail-item:not(:first-child) {
  margin-top: 17px;
}
.layer-receipt-2 .benefit-cont .form-detail-title {
  display: inline-flex;
  align-items: center;
  padding-right: 0;
}
.layer-receipt-2 .benefit-cont .form-detail-title img {
  width: 60px;
  margin-right: 5px;
}
.layer-receipt-2 .benefit-cont .form-detail-title span {
  font-weight: normal;
}
.layer-receipt-2 .benefit-cont .form-detail-group span {
  margin-right: 2px;
  color: var(--primary);
}

/* 2023.04.06 */
.ui-layer__body.inner-scroll {
  overflow: hidden;
}
.ui-layer__body.inner-scroll .ui-layer__body-inner {
  padding: 0 24px;
}
.link-arrow {
  display: inline-block;
}
.link-arrow::after {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 28px;
  height: 28px;
  background-image: url("/images/common/ic-button-arrow-b-14.svg");
  background-position: 50% 50%;
  background-size: auto 14px;
  background-repeat: no-repeat;
}
/* 2023.08.07 추가 */
h2.pos-relative {
  position: relative;
}
h2 .btn-use {
  position: absolute;
  top: -1px;
  right: 0;
  z-index: 2;
  display: block;
  vertical-align: top;
  padding: 0 15px;
  border: 2px solid #707070;
  border-radius: 1.7rem;
  background: #fff;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 2.6rem;
  white-space: nowrap;
}
/* //2023.08.07 추가 */
.benefit-scroll-box {
  position: relative;
  overflow: hidden;
  margin-bottom: 40px;
  border-radius: 16px;
  text-align: right;
}
.benefit-scroll-box .btn-use {
  position: absolute;
  z-index: 2;
  display: block;
  vertical-align: top;
  padding: 0 15px;
  border: 2px solid #707070;
  border-radius: 1.7rem;
  background: #fff;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 3rem;
  white-space: nowrap;
}
.benefit-scroll-box .benefit-scroll {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow-x: auto;
  overflow-y: hidden;
  background: #f0f0f0;
  text-align: left;
  white-space: nowrap;
}
.benefit-scroll-box::before,
.benefit-scroll-box::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 2;
  display: block;
  width: 42px;
  height: 34px;
}
.benefit-scroll-box::before {
  left: 50px;
  background: linear-gradient(to left, rgba(240, 240, 240, 0), rgba(240, 240, 240, 1), #f0f0f0 100%);
}
.benefit-scroll-box::after {
  right: 0;
  border-radius: 0 16px 16px 0;
  background: linear-gradient(to right, rgba(240, 240, 240, 0), rgba(240, 240, 240, 1), #f0f0f0 150%);
}
.benefit-scroll-box .benefit-scroll {
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
}
.benefit-scroll-box .benefit-scroll .scroll-inner {
  padding: 7px 0;
  -webkit-animation: use-benefit-animation 17s infinite linear;
  animation: use-benefit-animation 17s infinite linear;
}
@-webkit-keyframes use-benefit-animation {
  0% {
      margin-left: 0;
  }
  100% {
      margin-left: -1074px;
  }
}
@keyframes use-benefit-animation {
  0% {
      margin-left: 0;
  }
  100% {
      margin-left: -1074px;
  }
}
.benefit-scroll-box .benefit-scroll span.swiper-slide {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: 34px;
}
.benefit-scroll::-webkit-scrollbar {
  display: none;
}
.benefit-scroll-box .benefit-scroll span {
  display: inline-block;
  vertical-align: top;
  margin: 0 15px;
}
.benefit-scroll-box .benefit-scroll span img {
  height: 20px;
}
.benefit-slide {
  overflow: hidden;
  width: 100%;
  margin: 0 -24px;
  padding: 30px 24px 20px;
}
.benefit-slide .swiper-slide.bounce01 {
  animation: ani-bounce 2s ease-in-out infinite;
}
.benefit-slide .swiper-slide.bounce02 {
  animation: ani-bounce 2s 1.25s ease-in-out infinite;
}
@keyframes ani-bounce {
  0% {
      transform: translateY(0);
  }
  30% {
      transform: translateY(-10px);
  }
}
.benefit-slide .swiper-wrapper {
  transition-timing-function: linear !important;
  -webkit-transition-timing-function: linear !important;
}
.benefit-slide .swiper-slide {
  width: auto;
  margin-right: 15px;
}
.benefit-slide .slide-card-item:last-child {
}
.benefit-slide .card-detail {
  box-sizing: border-box;
  /*	width:140px;*/
  width: 95px;
  border-radius: 12px;
}
.benefit-slide .card-detail > img {
  width: 100%;
}
.benefit-slide .card-detail .item-logo {
  position: relative;
  width: 77px;
  margin: 0 auto 9px;
  padding-bottom: 77px;
}
.benefit-slide .card-detail .item-logo img {
  position: absolute;
  top: 50%;
  left: 50%;
  object-fit: contain;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
}
.benefit-slide .card-detail .txt-benefit01 {
  display: block;
  overflow: hidden;
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.3rem;
  line-height: 1.7rem;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.benefit-slide .card-detail .txt-benefit02 {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  margin-top: 4px;
  color: rgba(255, 255, 255, 1);
  font-size: 1.6rem;
  line-height: 2.1rem;
  text-align: left;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.benefit-slide .card-detail.bg-basic {
  background: var(--basic) !important;
}
.benefit-slide .card-detail.bg-primary {
  background: var(--primary) !important;
}
.benefit-slide .card-detail.bg-primary-dark {
  background: var(--primary-dark) !important;
}
.benefit-slide .card-detail.bg-secondary {
  background: var(--secondary) !important;
}
.benefit-slide .card-detail.bg-point {
  background: var(--point) !important;
}
.benefit-slide .card-detail.bg-blue {
  background: #19a6ff !important;
}
.benefit-slide .card-detail.bg-red {
  background: #fa1050 !important;
}
.benefit-slide .card-detail.bg-yellow {
  background: #fdb43b !important;
}
.benefit-slide .card-detail.bg-purple {
  background: #652d8d !important;
}
.tab-box {
  display: flex;
  flex-direction: column;
}
.tab-box .tab-underline {
  position: relative;
  display: flex;
  flex: none;
  width: 100%;
  -webkit-box-flex: 0;
}
.tab-box .tab-underline::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: 0;
  left: -24px;
  height: 1px;
  background: #e5e5e5;
}
.tab-box .tab-underline li {
  display: inline-flex;
}
.tab-box .tab-underline li a {
  display: block;
  padding: 19px 19px 17px;
  color: #a2a2a2;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.9rem;
}
.tab-box .tab-underline li.tab-active a {
  position: relative;
  color: #111;
}
.tab-box .tab-underline li.tab-active a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #111;
}
.tab-box .tab-container {
  overflow: auto;
  width: 100%;
  height: calc(100vh - 195px);
  padding-bottom: 30px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tab-box .tab-container::-webkit-scrollbar {
  display: none;
}
.tab-box .tab-cont {
  display: none;
  padding: 28px 0;
}
.is-android-os .tab-box .tab-cont {
  padding-bottom: 40px;
}
.tab-box .tab-cont .tab-cont-title {
  margin-top: 40px;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.1rem;
}
.tab-box .tab-cont .tab-cont-title:first-child {
  margin-top: 0;
}
.tab-box .tab-cont .benefit-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: -13px;
  margin-left: -5px;
}
.tab-box .tab-cont .benefit-list li {
  float: left;
  width: calc(25% - 10px);
  margin-top: 26px;
  padding: 0 5px;
  text-align: center;
}
.tab-box .tab-cont .benefit-list li .img-logo {
  position: relative;
  display: inline-block;
  width: 90%;
  margin-bottom: 7px;
  padding-bottom: 90%;
  border-radius: 20px;
  background: #f4f4f4;
}
.tab-box .tab-cont .benefit-list li .img-logo img {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
.tab-box .tab-cont .benefit-list li .name {
  display: block;
  color: #111;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.8rem;
  word-break: break-word;
}
/* 2023.04.11 */
.guide-txt-box {
  margin-top: 40px;
  padding: 24px;
  border-radius: 12px;
  background: var(--gray-20);
}
.page-buttons.wide-type {
  padding: 0;
}
.page-buttons.wide-type .ui-basic-button {
  border-radius: 0;
}
.pagetop-gradation::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 40px;
  background: linear-gradient(to bottom, #fafafa, #fff 100%) !important;
}

/* 2023.04.20 트래블로그 카드 개별페이지 */
.usr_travlog_join .js-fake-button {
  display: none !important;
}
.usr_travlog_join .tit {
  font-weight: 300;
  font-size: 2.4rem;
  line-height: 3.1rem;
}
.usr_travlog_join .tit_sub {
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 2.3rem;
}
.usr_travlog_join .tit_sub em {
  position: relative;
  z-index: 2;
  font-weight: 700;
  font-style: normal;
}
.usr_travlog_join .tit_sub em::before {
  content: "";
  position: absolute;
  top: -0.3rem;
  right: 0rem;
  z-index: -1;
  object-fit: cover;
  width: 6.7rem;
  height: 2.7rem;
  -webkit-mask-image: url(/images/card/img_line_circle.svg);
  mask-image: url(/images/card/img_line_circle.svg);
  -webkit-mask-size: 100%;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.usr_travlog_join .type_flex {
  display: flex;
  margin-top: 2rem;
}
.usr_travlog_join .type_flex .swiper-container {
  overflow: hidden;
  width: 33%;
  margin-right: 2rem;
  border-radius: 1.4rem;
  background: transparent;
  box-shadow: 6px 8px 8px rgba(88, 77, 112, 0.4);
}
.usr_travlog_join .type_flex .swiper-container .swiper-slide {
  overflow: hidden;
  background: transparent;
}
.usr_travlog_join .type_flex .swiper-container img {
  display: block;
  overflow: hidden;
  width: 100%;
  background: transparent;
}
.usr_travlog_join .type_flex .wrap_info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: calc(67% - 2rem);
}
.usr_travlog_join .type_flex .wrap_info .txt {
  margin-top: 1.8rem;
  font-size: 2rem;
  line-height: 2.6rem;
}
.usr_travlog_join .btn_primary {
  padding: 0.95rem 1.4rem;
  font-size: 1.6rem;
  line-height: 2.1rem;
}
.usr_travlog_join .type_check,
.usr_travlog_join .type_credit {
  position: relative;
  margin-top: 3.3rem;
}
.usr_travlog_join .type_check .tit_sub em::before {
  background-color: #13c9be;
}
.usr_travlog_join .type_check .type_flex .wrap_info .txt {
  color: #43b9c7;
}
.usr_travlog_join .type_credit {
  margin-top: 4.6rem;
}
.usr_travlog_join .type_credit::before {
  content: "";
  position: absolute;
  top: -2.6rem;
  right: /*1.7rem*/ 0;
  width: 18.33rem;
  height: 9.66rem;
  background: url(/images/card/img_txt_new.png);
  background-size: 100%;
  transform: rotate(-5deg);
}
.usr_travlog_join .type_credit .tit_sub em::before {
  background-color: #f17952;
}
.usr_travlog_join .type_credit .type_flex .wrap_info .txt {
  color: #b168a9;
}

a.btn_primary.btn_credit,
button.btn_primary.btn_credit {
  background: linear-gradient(100.33deg, #ffaba6 7.68%, #9d6fe8 83.12%);
}
/* //2023.04.20 트래블로그 카드 개별페이지 */

/* 2023.04.25 이벤트 상단 fixed 타입추가 */
.fix-scroll-header {
  position: fixed;
  top: 50px;
  left: 0;
  z-index: 100;
  display: none;
  width: 100%;
  border-bottom: 1px solid #ddd;
}
.fix-txt {
  padding: 5px 24px;
  background: #fff;
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.5;
}
.fix-scroll-header + .header__button--close {
  position: absolute;
  top: 12px;
  right: 24px;
  z-index: 10;
  display: block;
}
.ev-stit {
  display: block;
  font-size: 1.6rem;
}
.fix-scroll-header.fixed {
  display: block;
}
.fix-scroll-header.fixed .fix-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-layer__body-inner.none-header-type {
  overflow: auto;
  height: 90vh;
  padding-top: 0;
  border-radius: 15px 15px 0 0;
}
.ui-layer__body .fix-scroll-header.fixed {
  position: static;
}
.ui-layer__body .fix-scroll-header.fixed .fix-txt {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
  padding: 10px 42px 10px 24px;
  border-radius: 15px 15px 0 0;
  transition: inherit;
}
.ui-layer__body .fix-scroll-header.fixed + .header__button--close {
  position: absolute;
  top: 12px;
  right: 24px;
  z-index: 10;
  display: block;
}
.fix-scroll-header.fixed .fix-txt br {
  display: none;
}
.fix-scroll-header.fixed .fix-txt .ev-stit {
  display: none;
}
.ui-layer__body-inner.none-header-type .ui-layer__body {
  overflow: hidden;
}
.ui-layer__body-inner.none-header-type .full-contents-pop {
  margin: 0 -24px;
}
.ui-layer__body.none-scroll {
  overflow: hidden;
}
/* //2023.04.25 이벤트 상단 fixed 타입추가 */

/* 23.04.26 MKLGN2000M.web */
.page-buttons.tiptxt_bold .ui-button,
.ui-layer.tiptxt_bold .header__title {
  font-weight: 500;
}
.page-buttons.tiptxt_bold .ui-button > span,
.ui-layer.tiptxt_bold .header__title > span {
  font-weight: 300;
}
.page-buttons.tiptxt_bold .ui-button > strong,
.ui-layer.tiptxt_bold .header__title > strong {
  font-weight: 500;
}

/* 23.04.21  해외특화카드 메뉴 페이지 작업*/
.oversize-card [class^="img_"] {
  display: inline-block;
  background-position: 50%;
  background-size: 100%;
  background-repeat: no-repeat;
}

.oversize-card {
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

/* 상단비주얼 */
.oversize-card .section_top_visual {
  position: relative;
  width: 100%;
}
.oversize-card .visual_gsp_card {
  position: relative;
  padding-top: 13.1%;
  padding-bottom: 57.77%;
  background: #154a9e url(/images/contents/my-branch/card-global-page-top_bg.png) no-repeat center bottom;
  background-size: 100% auto;
  /*
background-size: 100vw;
min-height: 100vw;
padding: 5rem 2.3333rem 0;
*/
}
.oversize-card .visual_gsp_card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding-bottom: 42.47%;
}

.oversize-card .visual_gsp_card .wrap_tit {
  text-align: center;
  /*    margin-bottom: 4.2rem;*/
}
.oversize-card .visual_gsp_card .wrap_tit .wrap_tit_bubble {
  position: relative;
  display: inline-block;
  width: 39.1%;
  margin: 0 auto;
  padding: 0.9rem;
  border-radius: 10px;
  background: #002663;
}
.oversize-card .visual_gsp_card .wrap_tit_bubble img {
  width: 100%;
  height: auto;
  text-align: center;
}
.oversize-card .visual_gsp_card .wrap_tit .wrap_tit_bubble:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 10px solid #002663;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  transform: translateX(-50%);
}
.oversize-card .visual_gsp_card .wrap_tit .wrap_tit_txt img {
  width: 30.1rem;
  height: auto;
}

.oversize-card .visual_gsp_card .move {
  position: relative;
  z-index: 10;
  padding-top: 42px;
}

.oversize-card .visual_gsp_card .img_airplane {
  position: absolute;
  top: 54.77%;
  left: 12.16%;
  width: 46.29%;
  height: 25.68%;
  background-image: url(/images/contents/my-branch/card-global-page-airplane.png);
  animation: airplane 2.8s ease-in-out infinite;
}
.oversize-card .visual_gsp_card .img_cloud1 {
  position: absolute;
  right: 38.33%;
  bottom: 13.5%;
  width: 11.11%;
  height: 7.94%;
  background-image: url(/images/contents/my-branch/card-global-page-cloud1.png);
  animation: cloud1 3s ease-in-out infinite;
}
.oversize-card .visual_gsp_card .img_cloud2 {
  position: absolute;
  right: 12.03%;
  bottom: 27.75%;
  width: 12.59%;
  height: 8.59%;
  background-image: url(/images/contents/my-branch/card-global-page-cloud2.png);
  animation: cloud2 6s 0.6s ease-in-out infinite;
}
@keyframes airplane {
  60% {
      transform: translateX(1rem);
  }
}

@keyframes cloud1 {
  60% {
      transform: translateY(-0.7rem);
  }
}

@keyframes cloud2 {
  60% {
      transform: translateY(1rem);
  }
}
.oversize-card .card_guide {
  overflow: hidden;
  background-color: #ffef3e;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
}

.oversize-card .card_guide .card_guide_object {
  display: flex;
  vertical-align: top;
  flex-direction: row;
  width: 1038px;
  padding: 12px 0 19px;
  animation: globalNotice 10s infinite linear;
}

@keyframes globalNotice {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-50%);
  }
}

.oversize-card .card_guide .card_guide_object img {
  width: 100%;
  height: 40px;
}

.oversize-card .hotCard {
  padding: 13.5% 0;
  background-color: #383838;
  text-align: center;
}

.oversize-card .hotCard a {
  position: relative;
  display: block;
  background: url(/images/contents/my-branch/card-global-page-pang_1.png) no-repeat center top;
  background-size: 92.77% auto;
}
.oversize-card .hotCard a .hotCard_tit {
  margin-bottom: 2.4rem;
}
.oversize-card .hotCard a .hotCard_tit img {
  width: 52.94%;
  height: auto;
}
.oversize-card .hotCard .hotCard_tit p {
  color: #fff;
  font-weight: 500;
  font-size: 1.1rem;
}
.oversize-card .hotCard .card_img {
  position: relative;
}
.oversize-card .hotCard .img_popcard {
  width: 50.18%;
}

.oversize-card .hotCard .hotCard_txt {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.2;
  letter-spacing: -0.25px;
}
.oversize-card .hotCard .hotCard_txt h4 {
  margin-bottom: 10px;
  color: #fff;
  font-size: 1.7rem;
}

.oversize-card .page-section.bg-gray {
  background: #f7f7f7;
}

.oversize-card .page-section.rank {
  padding: 4.4rem 0 4.8rem;
}
.oversize-card .card-rank {
  position: relative;
  margin: 0 2.4rem;
}
.oversize-card .card-rank + .card-rank {
  margin-top: 3.2rem;
}
.oversize-card .card-rank img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.oversize-card .card-rank .tit_sub {
  position: relative;
  padding: 0 0 1.3rem 0.9rem;
}
.oversize-card .card-rank .tit_sub.tit01::before,
.oversize-card .card-rank .tit_sub.tit02::before,
.oversize-card .card-rank .tit_sub.tit03::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 3px;
  width: 7.2rem;
  height: 6rem;
  background-size: contain !important;
}
.oversize-card .card-rank .tit_sub.tit01::before {
  background: url(/images/contents/my-branch/card-global-page-ic_airport.png) no-repeat right;
}

.oversize-card .card-rank .tit_sub.tit02::before {
  background: url(/images/contents/my-branch/card-global-page-ic_overseas.png) no-repeat right;
}

.oversize-card .card-rank .tit_sub.tit03::before {
  background: url(/images/contents/my-branch/card-global-page-ic_lounge.png) no-repeat right;
}
.oversize-card .card-rank .card-rank-item {
  border-radius: 1rem;
  background: white;
}
.oversize-card .card-rank .rank-cell.type-card {
  width: 5.8rem;
  height: 9.2rem;
  min-height: 9.2rem;
  margin: 0 2.7rem 0 0;
}
.oversize-card .card-rank .card-image {
  width: 100%;
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
.oversize-card .card-rank .card-image-inner {
  padding: 0;
  border-radius: 0;
}
.oversize-card .card-rank .rank-block {
  align-items: center;
  padding: 2rem 2.4rem;
}
.oversize-card .card-rank .rank-title {
  color: var(--gray-70);
  font-size: 1.1rem;
  line-height: 1.2;
}
.oversize-card .card-rank .rank-text-item {
  color: var(--basic);
  font-size: 1.2rem;
  line-height: 1.5;
}
.oversize-card .wrap_loop_scrl.gsp_kr_store {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 15px 0 0;
}

.oversize-card .wrap_loop_scrl ul {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: 1872px;
  height: 100%;
  transition-property: transform;
  transform: translateX(0);
}
.oversize-card .loopList1 {
  animation: loopList1 18000ms linear infinite;
}
@keyframes loopList1 {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-50%);
  }
}
.oversize-card .wrap_loop_scrl li {
  position: relative;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  margin: 0 6px;
  border-radius: 50%;
}
.oversize-card .wrap_loop_scrl.gsp_kr_store li {
  width: 60px;
  height: 60px;
  margin: 0 6px;
}
.oversize-card .wrap_loop_scrl img {
  max-width: 100%;
  height: auto;
}

.oversize-card .benefit-wrap {
  position: relative;
  padding: 30px 0 65px;
}
.oversize-card .benefit-wrap h2 img {
  display: block;
  width: 100%;
  margin: 0 auto;
}

/* MKLGN2000M.web _ 로그인 CHO */
.layer-wrap .header__title.text-tit-type,
.layer-wrap .header__title.text-tit-type strong,
.contents-wrap .page-buttons.text-tit-type .ui-button.type-new {
  font-weight: 500;
}

/* MKCDCM1000M.web _ 카드상세 CHO */
.ico-data1q {
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px 0 0;
  color: #ff4880;
  font-weight: bold;
  font-size: 13px;
  line-height: 17px;
  letter-spacing: -0.8px;
}

/* B_my_p005.html 실적 충족 상세내역 CHO */
.cord_name_textus {
  display: flex;
  width: 100%;
  margin: 15px 0 0;
}
.cord_name_textus .card-details-img {
  margin: 0 10px 0 0;
}
.cord_name_textus .card-details-name {
  overflow: hidden;
  margin: 0;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* open_02_p018.html 오픈뱅킹 계좌 추가 CHO */
.menu-link-item-pd20 {
  padding: 20px !important;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
}

/* htmp:B_coupon_p003_230512.html 2023.05.11 추가 */
.banner-slide-contents {
  position: relative;
  /* display: none; 230901 접근성기간 숨김처리 LHJ */
}
.banner-coupon-container {
  overflow: hidden;
  padding-bottom: 22px;
}
.banner-slide-contents .swiper-pagination {
  position: static;
  display: inline-block;
  width: auto;
  margin-top: 0;
}
/* 2023.08.29 결제탭 재생정지버튼 */
.banner-coupon-slide-controller {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  margin-top: 5px;
  text-align: center;
}
.banner-coupon-slide-controller .btn-banner-coupon-controller {
  vertical-align: top;
  margin-top: 1px;
}
.banner-coupon-slide-controller .btn-banner-coupon-controller.stop {
  width: 15px;
  height: 15px;
  background: url(../images/icon/ic-pause.svg) center no-repeat;
  background-size: 100%;
}

.banner-coupon-slide-controller .btn-banner-coupon-controller.play {
  width: 15px;
  height: 15px;
  background: url(../images/icon/ic-play.svg) center no-repeat;
  background-size: 100%;
}

/* C_login_p001_app.html 로그인 */
.page-buttons .ui-button.type-new,
.layer-container.layer-login-new .header__title {
  font-weight: 500;
}

/* mkca10 | MOB02000000--type2.html 카드신청 2023.05.17 CHO */
.area-over-brand.card-brand-selector .ui-form-radio-block {
  position: relative;
}
.area-over-brand.card-brand-selector .ui-button-tooltip-text {
  top: -25px;
  right: 10px;
  bottom: auto;
  left: auto;
  z-index: 10;
  display: none;
  border-radius: 18px;
  text-align: center;
  transform: inherit;
}
.area-over-brand.card-brand-selector .ui-form-radio-block.on .ui-button-tooltip-text {
  display: block;
}
.area-over-brand.card-brand-selector .ui-button-tooltip-text::after {
  right: 31px;
  left: auto;
}
.area-over-brand.card-brand-selector .ui-button-tooltip-text.bgColor_8665ef::after {
  border-top-color: #8665ef;
}

/* mkca10 | MOB02000000--type2.html 카드신청 230713 말풍선 css 추가 */
/* mkca10 | MOB02000000--type2.html 카드신청 230714 font-size 수정 */
.area-over-brand.card-brand-selector .ui-button-tooltip-text.for-trvl-check {
  top: -45px;
  width: 160px;
  height: 40px;
  background-color: #e44d76;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 20px;
  white-space: normal;
}
.area-over-brand.card-brand-selector .ui-button-tooltip-text.for-trvl-check span {
  color: #ffeeb6;
}
.area-over-brand.card-brand-selector .ui-button-tooltip-text.for-trvl-check::after {
  border-top-color: #e44d76;
}

/* 230517 하나머니 랜딩페이지 추가 */
.header.type-hm {
  background-color: #6873cf;
}
.header-logo.type-1qpay-logo .header-logo-image {
  width: auto;
  height: 24px;
  background: url(../images/common/ic-header-home-w.svg) left center no-repeat;
}

.header-logo.type-1qpay-logo .header-tit {
  display: inline-block;
  padding-left: 32px;
  color: #fff;
  font-weight: 500;
  font-size: 2rem;
  line-height: 22px;
}
.header-button.hm-loading {
  width: 84.428px;
  background-image: url(../images/common/header-logo-hana-money.svg);
}
.ui-loading-block.hm-loading {
  width: auto;
  height: auto;
  background: none;
  text-align: center;
}
.ui-loading-block.hm-loading > div {
  display: block;
  margin-top: 15px;
  color: var(--basic);
  font-weight: 300;
  font-size: 2.1rem;
  line-height: 30px;
  letter-spacing: 0.53px;
}
/* 230517 하나머니 랜딩페이지 추가 */

/* 230519 라이프 한눈에 개편 */
.page-life-gnb-head {
}
/* life-main-item type-full */
.life-main-item.type-half {
  flex-basis: 50%;
}

.new-life-main-item {
  box-sizing: border-box;
  /*    flex-basis: 50%;*/
  width: 49%;
  /*max-width: 50%;*/
  height: auto;
  margin-top: 16px;
  text-align: left;
  /*margin-right: 12px;*/
  white-space: nowrap;
}
.new-life-main-item:nth-child(2n) {
  margin-right: 0;
}
.new-life-main-block {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 17px 15px;
  border: 1px solid #c9cdd8;
  border-radius: 20px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
}
.new-life-main-text {
  width: calc(100% - 30px);
  height: auto;
}
.new-life-main-text strong {
  display: block;
  color: #111;
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.3px;
}
.new-life-main-text span {
  display: block;
  width: calc(100% - 10px);
  height: auto;
  margin-top: 5px;
  color: #888;
  font-weight: normal;
  font-size: 1.2rem;
  letter-spacing: -0.24px;
  white-space: normal;
  word-break: keep-all;
}
.new-life-main-icon {
  position: absolute;
  right: 11px;
  bottom: 17px;
  width: 36px;
  height: 36px;
}
.new-life-main-icon img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
/**/
.fixed-top-banner {
  position: fixed;
  top: 50px;
  left: 0;
  z-index: 1000;
  width: 100%;
  background-color: #fff;
}
.fixed-top-menu {
  position: fixed;
  top: 250px;
  left: 0;
  z-index: 1000;
  width: 100%;
  background-color: #fff;
}
.fixed-top-banner .slide-banner-item {
  background: #f4f6f8;
}
.fixed-top-banner .slide-banner-item a {
  width: 100%;
  text-align: center;
}
.fixed-top-banner .slide-banner-item a img {
  width: 360px;
  height: 200px;
}
/* 230519 //라이프 한눈에 개편 */

/* ====================== 230612 NEW 혜택 (한동희) =====================*/
/*스크롤 이벤트: 배경색 변경*/
.bg-color-gray {
  background-color: rgb(249, 250, 251);
}
.bg-color-01 {
  /*베경 1 230808 */
  background: -moz-linear-gradient(top, rgba(241, 74, 118, 0) 0%, rgba(241, 74, 118, 0.5) 50%, rgba(241, 74, 118, 0) 100%);
  background: -webkit-linear-gradient(top, rgba(241, 74, 118, 0) 0%, rgba(241, 74, 118, 0.5) 50%, rgba(241, 74, 118, 0) 100%);
  background: linear-gradient(to bottom, rgba(241, 74, 118, 0) 0%, rgba(241, 74, 118, 0.5) 50%, rgba(241, 74, 118, 0) 100%);
  opacity: 1 !important;
}
.bg-color-02 {
  /*베경 2*/
  background: -moz-linear-gradient(top, rgba(246, 86, 87, 0) 0%, rgba(246, 86, 87, 0.5) 50%, rgba(246, 86, 87, 0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(246, 86, 87, 0) 0%, rgba(246, 86, 87, 0.5) 50%, rgba(246, 86, 87, 0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(246, 86, 87, 0) 0%, rgba(246, 86, 87, 0.5) 50%, rgba(246, 86, 87, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  opacity: 1 !important;
}
/*
.bg-color-02 {
background: -moz-linear-gradient(top, rgba(58,149,248,0) 0%, rgba(58,149,248,0.5) 50%, rgba(58,149,248,0) 100%);
background: -webkit-linear-gradient(top, rgba(58,149,248,0) 0%,rgba(58,149,248,0.5) 50%,rgba(58,149,248,0) 100%);
background: linear-gradient(to bottom, rgba(58,149,248,0) 0%,rgba(58,149,248,0.5) 50%,rgba(58,149,248,0) 100%);
opacity: 1 !important;
}
*/
.bg-color-03 {
  /*베경 3*/
  background: -moz-linear-gradient(top, rgba(242, 111, 4, 0) 0%, rgba(242, 111, 4, 0.5) 50%, rgba(242, 111, 4, 0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(242, 111, 4, 0) 0%, rgba(242, 111, 4, 0.5) 50%, rgba(242, 111, 4, 0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(242, 111, 4, 0) 0%, rgba(242, 111, 4, 0.5) 50%, rgba(242, 111, 4, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  opacity: 1 !important;
}
.bg-color-04 {
  /*베경 4*/
  background: -moz-linear-gradient(top, rgba(91, 215, 55, 0) 0%, rgba(91, 215, 55, 0.5) 50%, rgba(91, 215, 55, 0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(91, 215, 55, 0) 0%, rgba(91, 215, 55, 0.5) 50%, rgba(91, 215, 55, 0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(91, 215, 55, 0) 0%, rgba(91, 215, 55, 0.5) 50%, rgba(91, 215, 55, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  opacity: 1 !important;
}

.my-pick-button .color-red {
  color: #ffdc9c;
}
#new-benefit-contents-wrap {
  z-index: 1;
  overflow: hidden;
}
.benefit-default-banner-section {
  position: relative;
}
.benefit-page-section .bg-layer {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  z-index: -1;
  box-sizing: border-box;
  width: calc(100% + 48px);
  height: 200%;
  margin: 0 -24px;
  opacity: 0;
  transition: opacity 0.75s;
  transform: translateY(-50%);
}
.benefit-banner {
  overflow: hidden;
  width: 100%;
  max-width: 640px;
  margin: 16px auto;
  border-radius: 8px;
  text-align: center;
}
.benefit-banner-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.benefit-section {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 24px 20px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 3px 5px 0 rgba(217, 223, 235, 0.3);
}
.greeting-box .greeting-text {
  color: rgb(17, 17, 17);
  font-size: 1.8rem;
  line-height: 3rem;
}
.greeting-box .greeting-text span {
  font-weight: 600;
}
.greeting-box .membership-date {
  margin-top: 12px;
  color: rgb(128, 128, 128);
  font-size: 1.2rem;
}
.vvip-text-icon {
  position: absolute;
  top: 24px;
  right: 20px;
  padding: 5px 10px;
  border-radius: 15px;
  background-color: rgb(154, 124, 77);
  color: #fff;
}
.benefit-banner.my-pick-banner {
  position: relative;
}
.my-pick-button {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: rgba(0, 0, 0, 0.15);
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.my-pick-button p {
  color: #fff;
  font-weight: 500;
  font-size: 1.5rem;
}
.benefit-page-section h2.benefit-section-title {
  margin-bottom: 6px;
  font-size: 1.8rem;
  line-height: 2.7rem;
}
/*서비스 혜택*/
.new-benefit-slide {
  position: relative;
  /*margin: 0 -24px;/* 주석 해제(혜택메인 카드 슬라이드) - 24.08.26 - sayho */
  box-sizing: border-box;
  /* 가로스크롤 추가(혜택메인 카드 슬라이드) - 24.08.26 - sayho */
  /* overflow-x:auto; */
}
.new-benefit-slide-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: visible;
  padding: 10px 0;
  transition-timing-function: linear;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.new-benefit-slide .swiper {
  overflow: visible !important;
}
.benefit-banner-slide-item {
  overflow: hidden;
  box-sizing: border-box;
  width: 120px;
  min-width: 120px;
  margin-right: 12px;
  border-radius: 8px;
  box-shadow: 0 3px 6px 0 rgba(217, 223, 235, 0.3);
}
.benefit-banner-slide-item .benefit-image-banner-link {
  width: 100%;
}
.benefit-banner-slide-item img {
  width: 100%;
}
/*
.benefit-banner-slide-item .banner-item-title {
font-size: 1.5rem;
font-weight: 500;
line-height: 2.1rem;
}
.benefit-banner-slide-item.bg-01 {
background: url("/images/new_benefit_images/benefit_service_travel.png") no-repeat center;
background-color: #fff;
background-size: 120px;
}
.benefit-banner-slide-item.bg-02 {
background: url("/images/new_benefit_images/benefit_service_ncnc.png") no-repeat center;
background-color: #fff;
background-size: 120px;
}
.benefit-banner-slide-item.bg-03 {
background: url("/images/new_benefit_images/03_service_ai%20restaurant.png") no-repeat center;
background-color: #fff;
background-size: 120px;
}
*/
.benefit-banner-slide-item:first-child {
  margin-left: 24px;
}
.benefit-banner-slide-item:last-child {
  margin-right: 24px;
}
/*운세*/
.benefit-page-section .section-fortune {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 48px 0 26px 0;
  padding: 0 8px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.benefit-page-section .section-fortune p {
  color: rgb(51, 51, 51);
  font-size: 1.6rem;
  line-height: 2.2rem;
}
.benefit-page-section .section-fortune img {
  width: 70px;
}
/*월 받은 혜택*/
.benefit-section.month-benefit {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.benefit-section.month-benefit::after {
  content: "";
  position: absolute;
  top: calc(50% - 10px);
  right: 20px;
  width: 20px;
  height: 20px;
  background: url("/images/icon/benefit_btn_arrow.svg") no-repeat center;
}
.benefit-section.month-benefit .month-benefit-image {
  width: 40px;
  height: 40px;
}
.benefit-section.month-benefit .month-benefit-text {
  margin-left: 10px;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2.4rem;
}
.benefit-section.month-benefit .month-benefit-title {
  color: rgb(136, 136, 136);
  font-size: 1.5rem;
  line-height: 2.2rem;
}
.benefit-section.month-benefit .month-benefit-amount {
  color: rgb(51, 51, 51);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 3rem;
}
/*좋아할만한*/
.new-benefit-like-title {
  font-weight: 600;
  font-size: 1.8rem;
}
.new-benefit-like-text {
  margin-top: 8px;
  color: rgb(136, 136, 136);
  font-weight: 400;
  font-size: 1.5rem;
}
.new-benefit-section-title .title {
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 24px;
}
.accordion-item.new-benefit-accordion-item {
  border: none !important;
}
/* 상단 버튼 메뉴 */
.new-benefit-fix-bottom-button {
  position: fixed;
  right: 0;
  bottom: 59px;
  left: 0;
  z-index: 1000;
  box-sizing: border-box;
  width: 100%;
  padding: 16px 24px;
  background-color: #fff;
  box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.11);
}
.new-benefit-fix-bottom-button.if-app {
  bottom: 0px;
}
.new-benefit-menu-list {
  /* 230727 수정 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.new-benefit-menu-top {
  overflow-x: auto; /* 230906 접근성 수정 */
  margin: 14px 0;
}
.new-benefit-menu-top .swiper {
  overflow-x: auto; /* 230906 접근성 수정 */
}
.new-benefit-menu-list .new-benefit-menu-item {
  display: block;
  box-sizing: border-box;
  width: calc(100% / 3 - 8px);
  min-width: 96px;
  margin-right: 12px;
  padding: 12px 10px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 3px 6px 0 rgba(217, 223, 235, 0.3);
  font-weight: 500;
  font-size: 1.5rem;
}
.new-benefit-menu-title {
  color: rgb(17, 17, 17);
}
.new-benefit-menu-amount-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.new-benefit-menu-amount-box img {
  width: 24px;
}
.new-benefit-menu-amount span.color-purple {
  color: rgb(134, 101, 239);
}
.new-benefit-menu-amount span.color-vip {
  color: rgb(151, 124, 77);
}
.fix-bottom-modal.if-app {
  bottom: 0px;
}
/* ====================== //230612 NEW 혜택 (한동희) =====================*/
/* ====================== 230628 NEW 혜택 스켈레톤 추가 =====================*/
/*new-benefit-skeleton*/
.new-type-benefit-home {
  display: block;
}
.new-benefit-skeleton {
  display: none;
}
.contents-wrap.is-skeleton .new-benefit-skeleton {
  display: block;
}
.new-benefit-skeleton {
  width: 100%;
  margin-top: 0;
}
#new-benefit-contents-wrap.is-skeleton .new-type-benefit-home {
  display: none;
}
.new-benefit-skeleton .benefit-skeleton-head {
  width: 100%;
  height: 50px;
  background-color: #fff;
  box-shadow: 0 -1px 0 var(--gray-30) inset;
}
.benefit-skeleton-contents-wrap {
  padding: 0 24px;
}
.new-benefit-skeleton .benefit-skeleton-menu-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 26px 0;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.new-benefit-skeleton .benefit-skeleton-menu-top .menu-top-item {
  box-sizing: border-box;
  width: calc(100% / 3);
  min-width: 96px;
  height: 81px;
  margin-right: 12px;
  padding: 12px 10px;
  border-radius: 8px;
  background-color: #fff;
}
.new-benefit-skeleton .benefit-skeleton-menu-top .menu-top-item:last-child {
  margin-right: 0;
}
.new-benefit-skeleton .benefit-skeleton-menu-top .menu-top-item div {
  width: 80%;
  height: 20px;
  border-radius: 4px;
  background-color: var(--skeleton);
}
.new-benefit-skeleton .benefit-skeleton-menu-top .menu-top-item div:last-child {
  width: 100%;
  margin-top: 15px;
}
.new-benefit-skeleton .benefit-skeleton-section {
  box-sizing: border-box;
  width: 100%;
  height: 180px;
  margin: 16px auto;
  padding: 24px 20px;
  border-radius: 8px;
  background-color: #fff;
}
.new-benefit-skeleton .benefit-skeleton-section.type-default {
  height: 280px;
}
.new-benefit-skeleton .benefit-skeleton-section div {
  width: 50%;
  height: 30px;
  margin-top: 15px;
  border-radius: 4px;
  background-color: var(--skeleton);
}
.new-benefit-skeleton .benefit-skeleton-section div:last-child {
  width: 60%;
  margin-top: 20px;
}
.benefit-page-section.section-like {
  margin-top: 48px;
  margin-bottom: 48px;
}
/* ====================== //230628 NEW 혜택 스켈레톤 추가 =====================*/
/* ====================== 230630 러키볼 이벤트 아이템 추가 =====================*/
#new-benefit-contents-wrap .lucky-ball-item {
  position: absolute;
  z-index: 100;
  width: 80px;
}
/* ====================== //230630 러키볼 이벤트 아이템 추가 =====================*/

/* 2023.07.20 하나Pay 인증하기 */
.hanaPay-certificate-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 50vh;
  text-align: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}
.hanaPay-certificate-content p {
  position: relative;
  width: 100%;
  margin-bottom: 30px;
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 3rem;
}
.hanaPay-certificate-content p.bio::before {
  content: "";
  display: block;
  width: 224px;
  height: 224px;
  margin: 0 auto 30px;
  background: no-repeat 0 0 / 100%;
}
.hanaPay-certificate-content p.bio.type-02::before {
  margin-bottom: 0;
  background-image: url("/images/contents/img-hanaPay-certificate_type2.png");
}
.hanaPay-certificate-content p.bio.type-04::before {
  background-image: url("/images/contents/img-hanaPay-certificate_type4.png");
}
.hanaPay-certificate-content p.bio.type-05::before {
  background-image: url("/images/contents/img-hanaPay-certificate_type5.png");
}
.hanaPay-certificate-content img {
  width: 80%;
  max-width: 400px;
  margin-bottom: 30px;
}

/* =====230725 혜택 좋아할만한 비로그인 슬라이더 추가====== */
.slide-account-benefit.new-benefit-type-swiper .slide-account-inner::before {
  display: none;
}
.slide-account-benefit.new-benefit-type-swiper .slide-account-empty-item {
  width: 21%;
}
.slide-account-benefit.new-benefit-type-swiper .slide-account-inner img {
  width: 68px;
  height: 68px;
}
/* ======230725 특별한 제휴 혜택 인디케이터 추가======== */
.new-benefit-slide .slide-account-controller {
  bottom: -20px;
}
.new-benefit-slide .swiper-button-prev,
.new-benefit-slide .swiper-button-next,
.new-benefit-slide .swiper-button-play,
.new-benefit-slide .swiper-button-pause,
.new-benefit-slide .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%;
}
.new-benefit-slide .swiper-button-prev::before,
.new-benefit-slide .swiper-button-next::before,
.new-benefit-slide .swiper-button-play::before,
.new-benefit-slide .swiper-button-pause::before,
.new-benefit-slide .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);
}
.new-benefit-slide .swiper-button-prev::after,
.new-benefit-slide .swiper-button-next::after {
  display: none;
}
.new-benefit-slide .swiper-button-prev-text,
.new-benefit-slide .swiper-button-next-text,
.new-benefit-slide .swiper-button-play-text,
.new-benefit-slide .swiper-button-pause-text,
.new-benefit-slide .swiper-button-toggle-play-text {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  overflow: hidden;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.new-benefit-slide .swiper-button-prev {
  order: 1;
  background-image: url("../images/icon/ic-left.svg");
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
}
.new-benefit-slide .swiper-button-next {
  order: 3;
  background-image: url("../images/icon/ic-right.svg");
  -webkit-box-ordinal-group: 4;
  -ms-flex-order: 3;
}
.new-benefit-slide .swiper-button-play {
  order: 2;
  background-image: url("../images/icon/ic-play.svg");
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
}
.new-benefit-slide .swiper-button-pause {
  order: 2;
  background-image: url("../images/icon/ic-pause.svg");
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
}
.new-benefit-slide .swiper-button-toggle-play {
  order: 2;
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
}
.new-benefit-slide .swiper-button-toggle-play.is-play {
  background-image: url("../images/icon/ic-play.svg");
}
.new-benefit-slide .swiper-button-toggle-play.is-pause {
  background-image: url("../images/icon/ic-pause.svg");
}

/* 230731 월 받은 혜택 스켈레톤 추가 */
.month-benefit-text.is-skeleton .skeleton-month-benefit-amount {
  box-sizing: border-box;
  width: 150px;
  height: 25px;
  margin-top: 5px;
  border-radius: 8px;
  background: var(--skeleton);
}
.month-benefit-text.is-skeleton .month-benefit-amount {
  display: none;
}

/* B_event_p016.html 하나Pay 티머니 적립내역 */
.t-money {
  box-sizing: border-box;
  width: 100%;
  padding: 0 12px;
  font-size: 14px;
}
.t-money .page-section-title {
  padding: 30px 25px 0;
}
.t-money .page-section-title .title {
  font-weight: 300;
  font-size: 2.2rem;
  line-height: 1.3;
}
.t-money .title .name {
  font-weight: 500;
}
.t-money-calendar-swiper {
  position: relative;
  overflow: hidden;
}
.t-money-calendar-swiper .calendar-controller .btn {
  position: absolute;
  top: 40px;
  z-index: 5;
  display: block;
  width: 24px;
  height: 24px;
  background-position: 50%;
  background-repeat: no-repeat;
}
.t-money-calendar-swiper .calendar-controller .btn.prev {
  left: 20px;
  background-image: url("/images/icon/btn-prevarrow-l.svg");
}
.t-money-calendar-swiper .calendar-controller .btn.next {
  right: 20px;
  background-image: url("/images/icon/btn-nextarrow-l.svg");
}
.t-money-calendar-swiper .calendar-controller .btn.swiper-button-disabled {
  opacity: 0.3;
}
.t-money .calendar-slide .month {
  padding: 40px 0 20px;
  font-size: 1.8rem;
  text-align: center;
}
.t-money .calendar-table th {
  width: calc(100% / 7);
  padding-bottom: 5px;
  font-weight: 400;
  font-size: 1.6rem;
  text-align: center;
}
.t-money .calendar-table td {
  padding: 5px 0;
  font-size: 1.6rem;
  text-align: center;
}
.t-money .calendar-table td .day {
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  line-height: 36px;
}
.t-money .calendar-table td.disabled {
  color: var(--gray-50);
}
.t-money .calendar-table td .day {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 36px;
}
.t-money .calendar-table td.save .day::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 36px;
  height: 36px;
  background: #ffffff url("/images/event/tmoney-stamp.png") no-repeat 50% / 36px;
}
.t-money .calendar-table td.today .day {
  background: #eceefb;
}
.my-tmoney-info {
  margin: 30px 12px 0;
  padding: 20px;
  border-radius: 14px;
  background: #eceefb;
}
.my-tmoney-info > div {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.my-tmoney-info .my-tmoney-card {
  height: 26px;
  margin-bottom: 20px;
  line-height: 26px;
}
.my-tmoney-info .my-tmoney-card .card-img {
  width: 41.3px;
  height: 26px;
  background: url("/images/common/card-default.svg") no-repeat 0 50% / 41.3px 26px;
}
.my-tmoney-info .my-tmoney-card .card-img img {
  display: block;
  width: 100%;
}
.my-tmoney-info .my-tmoney-card .card-name {
  overflow: hidden;
  box-sizing: border-box;
  width: calc(100% - 100px);
  height: 26px;
  padding: 0 10px;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-tmoney-info .my-tmoney-card .card-status {
  box-sizing: border-box;
  width: 58px;
  color: #3996fc;
  font-size: 12px;
  text-align: right;
}
.my-tmoney-info .my-tmoney-card .card-status::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 5px;
  height: 5px;
  margin-right: 5px;
  border-radius: 50%;
  background: #3996fc;
}
.my-tmoney-info .my-tmoney-card .card-status.end {
  color: var(--point);
}
.my-tmoney-info .my-tmoney-card .card-status.end::before {
  background-color: var(--point);
}
.my-tmoney-info .my-tmoney-save {
  height: 32px;
  font-size: 14px;
  line-height: 32px;
}
.my-tmoney-info .my-tmoney-save h5 {
  height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  background: #ffffff;
  font-size: 13px;
  line-height: 32px;
}
.my-tmoney-info .my-tmoney-save .price {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
  align-items: center;
}
.my-tmoney-info .my-tmoney-save .price img {
  width: auto;
  height: 32px;
  margin-right: 5px;
}
.my-tmoney-info .my-tmoney-save .price span {
  color: var(--secondary);
  font-weight: 700;
  font-size: 30px;
  line-height: 32px;
  letter-spacing: -1px;
}
.my-tmoney-info + p {
  margin: 8px 32px 30px 12px;
  color: var(--gray-70);
  font-weight: 300;
  font-size: 13px;
}
.tmoney-faq-wrap {
  padding: 0 24px 30px;
}
.tmoney-faq-wrap .tmoney-faq {
  padding: 20px;
  border-radius: 14px;
  background: var(--gray-10);
}
.tmoney-faq-wrap .tmoney-faq p {
  position: relative;
  padding-left: 20px;
  color: var(--gray-80);
  font-weight: 300;
  font-size: 13px;
}
.tmoney-faq-wrap .tmoney-faq p::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
}
.tmoney-faq-wrap .tmoney-faq .faq_a {
  margin-top: 15px;
}
.tmoney-faq-wrap .tmoney-faq .faq_q::before {
  content: "Q";
  background: #000000;
}
.tmoney-faq-wrap .tmoney-faq .faq_a::before {
  content: "A";
  background: var(--secondary);
}
.tmoney-faq-wrap .align-center {
  padding-top: 30px;
}
.tmoney-faq-wrap .align-center a {
  font-size: 13px;
}
.tmoney-faq-wrap .align-center a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 3px;
  border-top: 2px solid #000000;
  border-right: 2px solid #111111;
  transform: rotate(45deg);
}

/* 2023.08.14 form radio 추가 */
.form-detail-group-radio {
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gray-30);
}
.form-detail-group-radio:last-child {
  padding-bottom: 0;
  border: 0;
}
.form-detail-group-radio .ui-label-text {
  margin-left: 5px;
  font-weight: 400;
}
.form-detail-group-radio .ui-label-text strong {
  font-weight: 500;
}
.form-detail-group-radio .ui-radio + .ui-label .ui-label-text {
  color: var(--gray-70);
}
.form-detail-group-radio .ui-radio:checked + .ui-label .ui-label-text {
  color: var(--primary);
}
.form-detail-group-radio > p {
  font-weight: 400;
  font-size: 15px;
  line-height: 17px;
}
.form-detail-group-radio > p strong {
  font-weight: 500;
  font-size: 15px;
  line-height: 17px;
}

/* 결제탭 재생정지버튼 */
.benefit-slide-controller {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.benefit-slide-controller .btn-benefit-slide-controller.stop {
  width: 15px;
  height: 15px;
  background: url(../images/icon/ic-pause.svg) center no-repeat;
  background-size: 100%;
}

.benefit-slide-controller .btn-benefit-slide-controller.play {
  width: 15px;
  height: 15px;
  background: url(../images/icon/ic-play.svg) center no-repeat;
  background-size: 100%;
}

/* 2023.08.21 */
.wcms-data .wcms-list.list-block .wcms-list-item {
  position: relative;
  display: block;
  padding-left: 10px;
}
.wcms-data .wcms-list.list-block .wcms-list-item.type-dot::before {
  position: absolute;
  left: 0;
}

/* 2023.08.10 사다리게임 css */
.ladder-contents {
  position: relative;
  margin-bottom: 24px;
  padding: 24px 0;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 0 12px 0px rgba(217, 223, 235, 0.8);
}
.ladder_area {
  position: relative;
  padding: 54px 0 0 0;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
}
.ladder_area.action::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: block;
  background-color: transparent;
}
.ladder_area .before {
  z-index: 1;
}
.ladder_area .before .start-box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% - 40px);
  height: 123px;
  border-radius: 15px;
  background: rgb(216, 243, 242);
}
.ladder_area .before .start-box::before {
  content: "";
  position: absolute;
  top: -28px;
  left: 50%;
  width: 48px;
  height: 48px;
  background-image: url(/images/contents/icon_carrot.png);
  background-size: 100% auto;
  transform: translateX(-50%);
}

.ladder_area .before .start-box .first-box {
  text-align: center;
}
.ladder_area .before .start-box .first-box p {
  margin: 0;
}
.ladder_area .before .start-box .first-box p * {
  display: block;
}
.ladder_area .before .start-box .first-box p span {
  color: rgb(136, 136, 136);
  font-weight: 400;
  font-size: 15px;
  line-height: 19px;
}
.ladder_area .before .start-box .first-box p strong {
  margin-top: 4px;
  color: rgb(17, 17, 17);
  font-weight: bold;
  font-size: 20px;
  line-height: 25px;
}
.ladder_area .before .start-box .first-box button,
.result-box .btn-game-reset,
.ladder_area #reload {
  display: inline-block;
  margin-top: 8px;
  padding: 0 18px;
  border-radius: 5px;
  background: rgb(1, 166, 160);
  color: #fff;
  font-size: 12px;
  line-height: 27px;
}
.ladder_area .before .start-box .secont-box p {
  color: rgb(17, 17, 17);
  font-size: 16px;
  line-height: 32px;
  /*margin-top:4px;*/
  text-align: center;
}
.ladder_area .before .start-box .secont-box p span {
  display: inline-block;
  width: 32px;
  margin-right: 4px;
  border-radius: 50%;
  background: #fff;
  color: rgb(0, 136, 130);
  font-size: 15px;
  line-height: 32px;
  text-align: center;
}
.ladder_area #reload {
  display: none;
}
.mascot {
  position: absolute;
  top: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border: 4px solid rgb(216, 243, 242);
  border-radius: 50%;
  background: rgb(0, 164, 157);
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  line-height: 20px;
}
.mascot.selected {
  background: #fff;
  color: rgb(0, 164, 157);
}
#players {
  width: 100%;
  padding: 0 40px;
}
#players .mascot:first-child {
  left: 20px;
}
#players .mascot:nth-child(2) {
  left: calc((100% - 80px) / 5 + 20px);
}
#players .mascot:nth-child(3) {
  left: calc(((100% - 80px) / 5 * 2) + 20px);
}
#players .mascot:nth-child(4) {
  left: calc(((100% - 80px) / 5 * 3) + 20px);
}
#players .mascot:nth-child(5) {
  left: calc(((100% - 80px) / 5 * 4) + 20px);
}
#players .mascot:last-child {
  left: calc(((100% - 80px) / 5 * 5) + 20px);
}
#products {
  position: relative;
  height: 44px;
  margin-top: 0.8rem;
}
#products > div {
  position: absolute;
}
#products > div img {
  width: 44px;
}
#products > div:first-child {
  left: 20px;
}
#products > div:nth-child(2) {
  left: calc((100% - 80px) / 5 + 20px);
}
#products > div:nth-child(3) {
  left: calc(((100% - 80px) / 5 * 2) + 20px);
}
#products > div:nth-child(4) {
  left: calc(((100% - 80px) / 5 * 3) + 20px);
}
#products > div:nth-child(5) {
  left: calc(((100% - 80px) / 5 * 4) + 20px);
}
#products > div:last-child {
  left: calc(((100% - 80px) / 5 * 5) + 20px);
}
#products::after {
  content: "";
  display: block;
  clear: both;
}
#ladder {
  position: relative;
  height: 220px;
  padding: 0 40px;
}
#ladder .before {
  position: absolute;
  top: -54px;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  padding-top: 54px;
  transform: translate(-50%, 0);
}
#ladder table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
#ladder td {
  position: relative;
  box-sizing: border-box;
  width: 20%;
  height: 10%;
}
#ladder td {
  border-left: 2px solid rgb(213, 213, 213);
}
#ladder td:last-child {
  border-right: 2px solid rgb(213, 213, 213);
}
#ladder .lean {
  border-bottom: 2px solid rgb(213, 213, 213);
}
#ladder .sway {
  border-bottom: 2px solid rgb(0, 164, 157) !important;
}
#ladder .lway {
  border-left: 2px solid rgb(0, 164, 157) !important;
}
#ladder .rway {
  border-right: 2px solid rgb(0, 164, 157) !important;
}
#ladder .sway::before,
#ladder .lway::before,
#ladder .rway::before,
#ladder .sway::after,
#ladder .lway::after,
#ladder .rway::after {
  content: "";
  position: absolute;
  display: block;
}
#ladder .lway::before {
  top: -3px;
  bottom: -3px;
  left: 0;
  width: 0;
  margin-left: -3px;
  border: 3px solid rgb(0, 164, 157);
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
}
#ladder .rway::before {
  top: -3px;
  right: 0;
  bottom: -3px;
  width: 0;
  margin-right: -3px;
  border: 3px solid rgb(0, 164, 157);
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
}
#ladder .sway::after {
  right: -3px;
  bottom: 0;
  left: -3px;
  height: 0;
  margin-bottom: -3px;
  border: 3px solid rgb(0, 164, 157);
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
}
.result-box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: none;
  padding: 20px 18px;
  border-radius: 15px;
  background: #fff;
}
.result-box .result-inner {
  position: absolute;
  top: 22px;
  right: 20px;
  bottom: 22px;
  left: 20px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  padding: 12px 22px 20px;
  border-radius: 15px;
  background: rgb(216, 243, 242);
}
.result-box .result-top {
  width: 100%;
  /*padding-top:12px;*/
  text-align: center;
}
.result-box .result-top::before {
  content: "";
  display: inline-block;
  width: 150px;
  height: 98px;
  background-position: center 50%;
  background-size: 150px auto;
  background-repeat: no-repeat;
}
.result-box .result-top p {
  margin: 0;
  color: rgb(17, 17, 17);
  font-size: 20px;
  line-height: 30px;
  text-align: center;
}
.result-box .result-top p span {
  display: inline-block;
  width: 38px;
  margin-left: 4px;
  border-radius: 50%;
  background: rgb(0, 164, 157);
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  line-height: 38px;
  text-align: center;
}
.result-box .btn-game-reset {
  display: block;
  margin: 10px auto;
}
.result-box.result01 .result-top::before {
  background-image: url("/images/contents/img_result-box_top01.png");
}
.result-box.result02 .result-top::before {
  background-image: url("/images/contents/img_result-box_top02.png");
}
.result-box.result03 .result-top::before {
  background-image: url("/images/contents/img_result-box_top03.png");
}
.result-box.result04 .result-top::before {
  background-image: url("/images/contents/img_result-box_top04.png");
}
.result-box.result05 .result-top::before {
  background-image: url("/images/contents/img_result-box_top05.png");
}
.result-box.result06 .result-top::before {
  background-image: url("/images/contents/img_result-box_top06.png");
}
.result-box a {
  position: relative;
  display: block;
  width: 100%;
  padding: 15px;
  border-radius: 15px;
  background: rgb(242, 255, 254);
}
.result-box a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  display: inline-block;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  background-position: center 50%;
  background-size: auto 44px;
  background-repeat: no-repeat;
}
.result-box.result01 a::after {
  background-image: url("/images/contents/img_korean_street.png");
}
.result-box.result02 a::after {
  background-image: url("/images/contents/img_result_japanese.png");
}
.result-box.result03 a::after {
  background-image: url("/images/contents/img_result_chinese.png");
}
.result-box.result04 a::after {
  background-image: url("/images/contents/img_result_korean.png");
}
.result-box.result05 a::after {
  background-image: url("/images/contents/img_result_western.png");
}
.result-box.result06 a::after {
  background-image: url("/images/contents/img_result_western02.png");
}
.result-box a > span {
  color: rgb(17, 17, 17);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
}
.result-box a > span::after {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 18px;
  background-image: url("/ATTACH/MKA/images/md/btn_arrow_l.png");
  background-position: center 50%;
  background-size: auto 18px;
  background-repeat: no-repeat;
}
.result-box a > span strong {
  color: rgb(17, 17, 17);
  font-weight: bold;
  font-size: 14px;
  line-height: 18px;
}
.result-box a p {
  margin-top: 5px;
}
.result-box a p span {
  color: rgb(136, 136, 136);
  font-size: 12px;
  line-height: 17px;
}

/* 23.09.07 viva-touch popup bg 추가 */
.viva-touch-bg {
  padding: 45px 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.viva-touch-bg.ing {
  background-image: url(../images/contents/img_vivatouch_ing.png);
}

.viva-touch-bg.finish {
  background-image: url(../images/contents/img_vivatouch_finish.png);
}

.viva-touch-bg.error {
  background-image: url(../images/contents/img_vivatouch_error.png);
}

/* //23.09.07 viva-touch popup bg 추가 */

/* 2023.09.20 */
.info-step {
  display: flex;
  flex-wrap: wrap;
}
.info-step li {
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 5px;
  border: 1px solid #e6e9ef;
  border-radius: 15px;
  color: #111;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
}
.info-step li span {
  position: absolute;
  top: -9999px;
  color: #111;
  font-size: 14px;
  line-height: 30px;
  visibility: hidden;
}
.info-step li.on {
  flex: 1;
  background: var(--secondary);
  color: #fff;
}
.info-step li.on span {
  position: static;
  display: inline-block;
  margin-left: 5px;
  color: #fff;
  visibility: visible;
}
.info-step-cont-box {
  margin-top: 20px;
}
.info-step-cont-box .info-step-cont {
  display: none;
}
.info-step-cont-box .info-step-cont.on {
  display: block;
}
.total-box-item.side-ty {
  justify-content: space-between;
}
.total-box-item.side-ty .total-box-val {
  flex: none;
}

/* 231018 내카드관리 토글버튼 수정 한동희 */
.pay-option-radio-wrap {
  margin: 25px 0 50px 0;
}
.pay-option-radio-wrap .ui-button-tooltip {
  display: none;
  margin-top: -5px;
}
.pay-option-radio-wrap input[type="radio"]:checked ~ .ui-button-tooltip {
  display: block;
}

/*231013 니콘내콘 페이지 한동희*/
.ncnc-page-wrap {
  background-color: #28293c;
}
.ncnc-page-wrap .header {
  background-color: #fd1e71;
}
.ncnc-page-wrap .ncnc-page-header {
  width: 100%;
  /*    margin-top: -50px;*/
}
.ncnc-page-wrap .ncnc-page-header img {
  width: 100%;
}
/* 231213 수정 */
.ncnc-page-wrap .ncnc-page-contents {
  padding: 30px 24px 50px;
}
.ncnc-page-wrap .ncnc-page-contents .ui-select-multiple-item.type-all .ui-label {
  border: none;
  color: #fff;
}
.ncnc-page-wrap .ui-checkbox-block.type-large .ui-checkbox-object {
  margin-left: 5px;
  background-image: url(../images/common/line_circle_check_off.svg);
  background-size: 22px;
}
.ncnc-page-wrap .ui-checkbox-block.type-large .ui-checkbox:checked + .ui-label .ui-checkbox-object {
  background: url(../images/common/red_circle_check_on.svg) no-repeat 0 50%;
  background-size: 22px;
}
.ncnc-page-wrap .ui-checkbox-block.type-large .ui-label-text {
  margin-left: 4px;
}
.ncnc-page-wrap .ui-checkbox-block .ui-label-text {
  font-weight: 600;
  font-size: 13px;
}
.ncnc-page-wrap .ui-select-multiple-item {
  margin-bottom: 10px;
  padding: 10px 5px;
  border-radius: 14px;
  background-color: #fff;
  font-weight: 600;
}
.ncnc-page-wrap .ui-select-multiple-item .ncnc-color-red {
  color: #fd1e71;
}
.ncnc-page-wrap .ui-select-multiple-item.type-all {
  margin-bottom: 0;
  padding: 0;
  background-color: transparent;
}
/* 231213 수정 */
.ncnc-page-wrap .ui-buttons {
  position: sticky;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  padding: 20px 0;
  background-color: #28293c;
}
.ncnc-page-wrap .ui-buttons .ui-buttons-item .ui-button {
  padding: 15px 0;
  border-radius: 14px;
  font-weight: 600;
  font-size: 20px;
}
.ncnc-page-wrap .ui-basic-button.type-primary {
  border-color: #fd1e71;
  background-color: #fd1e71;
  color: #fff;
}
.ncnc-page-wrap .ui-basic-button.type-primary[isCheck] {
  border-color: var(--gray-30);
  background-color: var(--gray-30);
  color: var(--gray-60);
}
.ncnc-page-wrap .ui-checkbox-object {
  width: 22px;
  height: 22px;
  background: url(../images/common/circle_check_off.svg) no-repeat 0 50%;
  background-size: 22px;
}
.ncnc-page-wrap .ui-checkbox:checked + .ui-label .ui-checkbox-object {
  background: url(../images/common/red_circle_check_on.svg) no-repeat 0 50%;
  background-size: 22px;
}
.ncnc-page-wrap .ui-select-multiple-item .ui-arrow-button {
  width: 16px;
  height: 16px;
  background-image: url(../images/icon/ic-header-back.png);
  background-size: 16px;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}
/*//231013 니콘내콘 페이지 한동희*/

/* 2023.10.10 */
.ui-flex-download {
  display: flex;
  justify-content: space-between;
}
.ui-flex-download > .ui-flex-txt {
  display: flex;
  flex: 1;
  align-items: center;
  font-size: 16px;
}
.ui-flex-download > .ui-button {
  flex: 0;
  min-width: 130px;
}
.cont-layer-graph-box {
  margin-top: 35px;
}
.cont-layer-graph-box .layer-txt {
  color: rgb(17, 17, 17);
  font-weight: 400;
  font-size: 15px;
  line-height: 19px;
  text-align: center;
}
.cont-layer-graph-box .info-item {
  color: rgb(136, 136, 136);
  font-weight: 300;
  font-size: 12px;
  line-height: 15px;
}
.cont-layer-graph-box .info-item::before {
  top: 6px;
}
.cont-layer-graph-box .img-graph {
  width: 100%;
  margin-top: 27px;
}

/*231018 카드이용내역 말풍선 추가 한동희 231206 수정*/
/* 24.02.26 모션수정 */
.ui-button-tooltip.page-card-usage {
  margin-bottom: -5px;
}
.ui-button-tooltip.page-card-usage .ui-button-tooltip-text {
  left: calc(100% - 218px);
  font-size: 1.2rem;
  /* transform: scale(0); */
  transform-origin: center bottom;
}
.ui-button-tooltip.page-card-usage .ui-button-tooltip-text.tooltip-ani-on {
  /* animation: tooltipAniOn 0.55s ease-in-out forwards; */
  animation: tooltip-move02 0.5s infinite alternate;
}
/* .ui-button-tooltip.page-card-usage .ui-button-tooltip-text.tooltip-ani-off {
animation: tooltipAniOff 0.55s ease-in-out forwards;
} */
@keyframes tooltipAniOn {
  0% {
      transform: scale(0);
  }
  80% {
      transform: scale(1.15);
  }
  100% {
      transform: scale(1);
  }
}
@keyframes tooltipAniOff {
  0% {
      transform: scale(1);
  }
  100% {
      transform: scale(0);
  }
}
/* 24.02.26 모션 추가 */
@keyframes tooltip-move02 {
  0% {
      transform: translateY(0);
  }
  100% {
      transform: translateY(-3px);
  }
}

.total-amount-right {
  position: relative;
}
.total-amount-right .card-all-text {
  position: absolute;
  bottom: 13px;
  left: -10px;
  font-weight: 500;
}

/* SSSSSSSSSSSSSSSSSSSSSSSSSSSSSS [ 카드 상세 리뉴얼 ] SSSSSSSSSSSSSSSSSSSSSSSSSSSSSS */
/* 
작업자 : 장준혁 
작성일 : 2023.10.17.
최종 수정일 : 2023.11.03.
*/
.type-card-detail-slide.new-type .card-detail-top-wcms .type-top-area {
  margin-right: -24px;
  margin-left: -24px;
  padding-right: 24px;
  padding-left: 24px;
  background-color: #ebebed;
}
.type-card-detail-slide.new-type .card-detail-top-wcms .type-top-area .wcms-info {
  margin-right: 0;
  margin-left: 0;
}
.type-card-detail-slide.new-type {
  overflow-y: hidden;
}
.type-card-detail-slide.new-type * {
  box-sizing: border-box;
  word-wrap: break-word;
  word-break: keep-all;
}
.type-card-detail-slide.new-type h2 {
  font-weight: bold;
}
.type-card-detail-slide.new-type h2 ~ div:not(.accordion-list) {
  margin-top: 27px;
}
.type-card-detail-slide.new-type h2 ~ .accordion-list {
  margin-top: 5px;
}
.type-card-detail-slide.new-type .page-contents-top {
  margin-right: -24px;
  margin-left: -24px;
  padding-right: 24px;
  padding-left: 24px;
  background-color: #ffffff;
  transition: 0.5s all;
}
.type-card-detail-slide.new-type .page-contents-top .wcms-info {
  margin-top: 0;
  margin-right: -24px;
  margin-bottom: 0;
  margin-left: -24px;
  padding-top: 10px;
  padding-right: 24px;
  padding-bottom: 10px;
  padding-left: 24px;
  background-color: #f5f5f5;
  background-image: none;
  color: var(--black);
  font-size: 14px;
  text-align: center;
}
.type-card-detail-slide.new-type .page-contents-top .card-detail-top-btns + .wcms-info {
  margin-top: 15px;
}
/* 카드 슬라이드 Start */
.type-card-detail-slide.new-type .card-detail {
  margin-bottom: 0;
  padding: 0;
  background-color: transparent;
}
body .type-card-detail-slide.new-type .card-detail {
  transition: 0.5s all;
}
body:not(.is-dim) .type-card-detail-slide.new-type .card-detail {
  z-index: 0;
}
body.is-dim .type-card-detail-slide.new-type .page-contents-top {
}
body.is-dim .type-card-detail-slide.new-type .card-detail {
  z-index: 999;
  margin-top: 57px;
  background-color: #ffffff;
  background-image: none !important;
}

.type-card-detail-slide.new-type .card-detail .slide-card {
  margin-right: 0;
  margin-left: 0;
  background-color: transparent;
}

.type-card-detail-slide.new-type .card-detail .slide-card .slide-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.type-card-detail-slide.new-type .card-detail .slide-card .slide-card-bg img {
  display: block;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}
.type-card-detail-slide.new-type .card-detail .slide-card .swiper-button-prev,
.type-card-detail-slide.new-type .card-detail .slide-card .swiper-button-next {
  display: block;
  height: 100%;
}
.type-card-detail-slide.new-type .card-detail .slide-card .swiper {
  transition: 0.5s background;
}
body.is-dim .type-card-detail-slide.new-type .card-detail .slide-card .swiper {
  background-color: #ffffff;
}
.type-card-detail-slide.new-type .card-detail .slide-card .swiper-button-prev {
  left: 24px;
  margin: 0;
  background-image: url(/images/card-detail/btn_prevarrow_l.png);
  background-position: left center;
  background-size: contain;
  background-repeat: no-repeat;
}
.type-card-detail-slide.new-type .card-detail .slide-card .swiper-button-next {
  right: 24px;
  margin: 0;
  background-image: url(/images/card-detail/btn_nextarrow_l.png);
  background-position: right center;
  background-size: contain;
  background-repeat: no-repeat;
}
.type-card-detail-slide.new-type .card-detail .slide-card .slide-card-item .card-image::before {
  /* content:'';
position: absolute;
bottom:-20px;
width:100%;
left:50%;
transform-origin:center bottom;
transform: translateX(-50%) scale(0.5, 0.02);
background-color:rgba(0,0,0,0.2);
display:block;
height: 100%;
filter:blur(100px);
border-radius:50%; */
}
.type-card-detail-slide.new-type .card-detail .slide-card .slide-card-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 524px;
  height: 348px;
  padding-top: 30px;
}
.type-card-detail-slide.new-type .card-detail .slide-card .slide-card-item .card-image {
  width: 240px;
  height: 240px;
  margin-bottom: 0;
}

.type-card-detail-slide.new-type .card-detail .slide-card .slide-card-item .card-image.type-vertical .card-image-inner {
  transform: rotate(90deg) scale(1);
}
.type-card-detail-slide.new-type .card-detail .slide-card .slide-card-item .card-image .card-image-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 0;
}
.type-card-detail-slide.new-type .card-detail .slide-card .slide-card-item .card-image .card-image-inner:empty::before,
.type-card-detail-slide.new-type .card-detail .slide-card .slide-card-item .card-image .card-image-inner.is-error::before {
  top: auto;
  left: auto;
  width: 100%;
  height: auto;
  padding-top: 63.060748%;
  border-radius: 3.5%/5.6%;
  background-image: url(/images/card-detail/sample_card.png);
  background-size: cover;
}
.type-card-detail-slide.new-type .card-detail .slide-card .slide-card-item .card-image .card-image-inner img {
  object-fit: contain;
  object-position: center;
}

.type-card-detail-slide.new-type .slide-card-info {
  position: relative;
  margin-right: -24px;
  margin-left: -24px;
  padding-top: 37px;
  padding-right: 24px;
  padding-left: 24px;
  transition: 0.5s all;
}
body.is-dim .type-card-detail-slide.new-type .slide-card-info {
  z-index: 999;
  padding-top: 0;
  padding-bottom: 30px;
  background-color: #ffffff;
}
.type-card-detail-slide.new-type .slide-card-info .card-detail-badges {
  margin-top: 0;
  margin-bottom: 18px;
}
.type-card-detail-slide.new-type .slide-card-info .card-detail-text {
  margin-top: 0;
  margin-bottom: 5px;
  color: #000000;
  font-size: 15px;
  line-height: 19px;
}
.type-card-detail-slide.new-type .slide-card-info .card-detail-title {
  font-weight: bold;
  font-size: 24px;
  line-height: 33px;
}
.type-card-detail-slide.new-type .slide-card-info .card-detail-annual-fee,
.type-card-detail-slide.new-type .slide-card-info .card-detail-target-user {
  display: inline-flex;
  align-items: center;
  margin-top: 9px;
  font-size: 12px;
}
.type-card-detail-slide.new-type .slide-card-info .card-detail-target-user {
  display: flex;
}
.type-card-detail-slide.new-type .slide-card-info .card-detail-annual-fee::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin-left: 2px;
  /* 250117 확장자 수정 */
  background-image: url(/images/card-detail/btn_nextarrow_l.svg);
  background-position: right center;
  background-size: contain;
}
.type-card-detail-slide.new-type .slide-card-info .card-detail-annual-fee dl,
.type-card-detail-slide.new-type .slide-card-info .card-detail-target-user dl {
  display: flex;
  align-items: flex-start;
  color: var(--gray-80);
  line-height: 1.6;
}
.type-card-detail-slide.new-type .slide-card-info .card-detail-target-user dl {
  align-items: flex-start;
}
.type-card-detail-slide.new-type .slide-card-info .card-detail-annual-fee dl dt,
.type-card-detail-slide.new-type .slide-card-info .card-detail-target-user dl dt {
  display: inline-flex;
  align-items: center;
}
.type-card-detail-slide.new-type .slide-card-info .card-detail-annual-fee dl dt::after,
.type-card-detail-slide.new-type .slide-card-info .card-detail-target-user dl dt::after {
  content: "";
  display: block;
  width: 1px;
  height: 9px;
  margin-right: 4px;
  margin-left: 4px;
  background-color: #d9d9d9;
}
/* 카드 슬라이드 End */

/* 상단 스킵 버튼 */
.btn-top-slide-skip {
  width: 100%;
  height: 18px;
  margin-top: 40px;
  margin-bottom: 40px;
  background-image: url(/images/card-detail/btn_scroll_down.png);
  background-position: center;
  background-size: 18px auto;
  background-repeat: no-repeat;
}
.is-scrolled .btn-top-slide-skip {
  display: none;
}

/* 주요혜택 슬라이드 Start */
.type-card-detail-slide.new-type .key-benefit-slide-banner {
  overflow: hidden;
  margin: 0 -24px;
  margin-bottom: -15px;
  padding-bottom: 15px;
}
.type-card-detail-slide.new-type .key-benefit-slide-banner h2 {
  padding: 0 24px;
}
.type-card-detail-slide.new-type .key-benefit-slide-banner .slide-banner-inner {
  max-width: 100%;
}
.type-card-detail-slide.new-type .key-benefit-slide-banner .slide-banner-inner .swiper {
  overflow: visible;
  margin-right: -24px;
  margin-left: -24px;
  padding-right: 24px;
  padding-left: 24px;
}
.type-card-detail-slide.new-type .key-benefit-slide-banner .slide-banner-controller {
  top: -27px;
  right: 24px;
  bottom: auto;
  transform: translateY(-100%);
}
.type-card-detail-slide.new-type .key-benefit-slide-banner .slide-banner-list {
  margin-right: -24px;
  margin-left: -24px;
  padding-right: 24px;
  padding-left: 24px;
}

.type-card-detail-slide.new-type .key-benefit-slide-banner .slide-banner-item {
  width: 242px;
  height: 276px;
  border-radius: 24px;
  background-position: center top;
  background-size: contain;
  background-repeat: no-repeat;
  color: var(--basic);
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);
  text-align: center;
}
.type-card-detail-slide.new-type .key-benefit-slide-banner .slide-banner-item a {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  padding: 26px 24px 33px;
  padding-top: 152px;
  border-radius: 24px;
}
.type-card-detail-slide.new-type .key-benefit-slide-banner .slide-banner-item + .slide-banner-item {
  margin-left: 30px;
}
.type-card-detail-slide.new-type .key-benefit-slide-banner .slide-banner-item i {
  display: block;
  width: 104px;
  height: 104px;
  margin-right: auto;
  margin-bottom: 22px;
  margin-left: auto;
}
.type-card-detail-slide.new-type .key-benefit-slide-banner .slide-banner-item i img {
  display: block;
  object-fit: contain;
  object-position: center;
  width: 100%;
  height: 100%;
}
.type-card-detail-slide.new-type .key-benefit-slide-banner .slide-banner-item .key-benefit-slide-banner-title {
  font-weight: bold;
  font-size: 18px;
  line-height: 24px; /*margin-top:auto;*/
}
.type-card-detail-slide.new-type .key-benefit-slide-banner .slide-banner-item .key-benefit-slide-banner-sub-title {
  margin-top: 5px;
  font-size: 13px;
  line-height: 19px;
}
.type-card-detail-slide.new-type .key-benefit-slide-banner .swiper-object.swiper-object-once .slide-banner-list {
  width: auto;
}
.type-card-detail-slide.new-type .key-benefit-slide-banner .swiper-object.swiper-object-once .slide-banner-item {
  margin-right: auto;
  margin-left: auto;
}
/* 주요혜택 슬라이드 End */

/* 주요 혜택 팝업 아코디언 Start */
.accordion-list.simple-type.no-header-border.contents-border-box .accordion-contents .ui-notice + .accordion-section {
  margin-top: 36px;
}
.accordion-list.simple-type.no-header-border.contents-border-box .accordion-contents .accordion-section-head {
  margin-bottom: 10px;
}
.accordion-list.contents-border-box .accordion-contents .table_ty {
  border-top: 1px solid #e5e5e5;
}
.accordion-list.contents-border-box .accordion-contents .table_ty table tr th,
.accordion-list.contents-border-box .accordion-contents .table_ty table tr td {
  padding: 10px 6px;
  border-color: #e5e5e5;
  border-right: 0 !important;
  border-left: 0 !important;
  background-color: transparent;
  font-size: 12px;
}
.accordion-list.contents-border-box .accordion-contents .table_ty table tr th {
  font-weight: 500;
}

.accordion-list.key-benefit-accordion .accordion-opener {
  display: flex;
  align-items: center;
}
.accordion-list.key-benefit-accordion .accordion-opener .benefit-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-right: 10px;
  border-radius: 15px;
}
.accordion-list.key-benefit-accordion .accordion-opener .benefit-icon img {
  object-fit: contain;
  object-position: center;
  width: 30px;
  height: 30px;
}
.accordion-list.key-benefit-accordion .accordion-opener .accordion-opener-title {
  line-height: normal;
}
.accordion-list.key-benefit-accordion .accordion-opener .accordion-opener-title span {
  display: block;
  font-weight: 500;
  font-size: 15px;
}
.accordion-list.key-benefit-accordion .accordion-opener .accordion-opener-title em {
  display: block;
  margin-top: 6px;
  color: #888888;
  font-style: normal;
  font-size: 13px;
}
/* 주요 혜택 팝업 아코디언 End */

/* 이벤트 배너 목록 Start */
.type-card-detail-slide.new-type .event-banner-wcms {
}
.type-card-detail-slide.new-type .event-banner-wcms .event-banner-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 27px;
}
.type-card-detail-slide.new-type .event-banner-wcms .event-banner-list-item {
  overflow: hidden;
  border-radius: 8px;
}

.type-card-detail-slide.new-type .event-banner-wcms .event-banner-list-link {
  display: block;
}
.type-card-detail-slide.new-type .event-banner-wcms .event-banner-list-link img {
  display: block;
  width: 100%;
  max-width: 100%;
}
/* 이벤트 배너 목록 End */

.type-card-detail-slide.new-type .box-information .info-list {
  margin-right: -24px;
  margin-left: -24px;
  padding-top: 20px;
  padding-right: 24px;
  padding-bottom: 20px;
  padding-left: 24px;
  background-color: #f8f8f8;
  color: #666666;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.03em;
}
.type-card-detail-slide.new-type .box-information .info-list .info-item {
  padding-left: 1.3em;
}
.type-card-detail-slide.new-type .box-information .info-list .info-item::before {
  content: "※";
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  background-color: transparent;
}

.type-card-detail-slide.new-type .common-information .info-list {
  /* font-size:12px; */
}
.type-card-detail-slide.new-type .common-information .info-item {
  color: var(--basic);
}
.type-card-detail-slide.new-type .common-information .info-item + .info-item {
  margin-top: 12px;
}
.type-card-detail-slide.new-type .common-information .info-item.type-presa {
  padding-left: 1.3em;
}
.type-card-detail-slide.new-type .common-information .info-item.type-indent,
.type-card-detail-slide.new-type .common-information .info-item.type-indent-block {
  padding-left: 1em;
}
.type-card-detail-slide.new-type .common-information .info-item.type-presa::before,
.type-card-detail-slide.new-type .common-information .info-item.type-indent::before,
.type-card-detail-slide.new-type .common-information .info-item.type-indent-block::before {
  top: 0;
  left: 0;
  display: block;
  width: auto;
  height: auto;
  background-color: transparent;
}
.type-card-detail-slide.new-type .common-information .info-item.type-presa::before {
  content: "※";
}
.type-card-detail-slide.new-type .common-information .info-item.type-indent::before,
.type-card-detail-slide.new-type .common-information .info-item.type-indent-block::before {
  content: "-";
}

/* 연회비 팝업 */
.card-annual-info {
}
.card-annual-info .card-annual-info-list {
}
.card-annual-info .card-annual-info-item {
}
.card-annual-info .card-annual-info-item + .card-annual-info-item {
  margin-top: 15px;
}
.card-annual-info .card-annual-title {
  font-size: 15px;
}
.card-annual-info .card-annual-text {
  margin-top: 6px;
  color: var(--gray-60);
  font-size: 13px;
}
.card-annual-info .card-annual-info-list + .info-list {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e5e5e5;
}
.card-annual-info .info-list {
}
.card-annual-info .info-list .info-item {
  color: var(--gray-80);
  font-size: 13px;
  line-height: 17px;
}
.card-annual-info .info-list .info-item + .info-item {
  margin-top: 5px;
}

/* 신규 카드 상세 내부 레거시 팝업 */
.type-card-detail-slide.new-type .popup {
}
.type-card-detail-slide.new-type .popup .popup_wrap {
  max-width: calc(100vw - 60px);
}
/* 카드 상세 내 이벤트 팝업 */
.layer-wrap .coupon-detail-buttons.type-only:empty {
  margin-top: 0 !important;
}
.layer-wrap .coupon-detail-buttons.type-only:empty + .page-section-group {
  margin-top: 0 !important;
  border-top: 0 !important;
}
.ui-layer__body-inner.none-header-type::-webkit-scrollbar {
  display: none;
}
.ui-layer__body-inner.none-header-type .fix-scroll-header.fixed .fix-txt {
  border-bottom: 1px solid var(--gray-30);
}
.type-card-detail-slide.new-type .slide-card-dim-close {
  margin-top: 16px;
}
/* EEEEEEEEEEEEEEEEEEEEEEEEEEEEEE [ 카드 상세 리뉴얼 ] EEEEEEEEEEEEEEEEEEEEEEEEEEEEEE */

/* 퀵버튼 */
.quick-side-button {
  position: fixed;
  right: 24px;
  /* [2024-09-26 : shj] [WPM-8234] [금융/자동차금융] '오토금융 적합성 화면 수정'_'허지혜'-2024-08-20 (김동엽: 넵 그럼 공통으로 수정 부탁 드리겠습니다.) */
  /* bottom: 96px; */
  top: 75px;
}
.quick-side-button ul {
  padding: 2px 8px;
  border: 1px solid rgb(67, 174, 165);
  border-radius: 4px;
  background-color: rgba(245, 255, 255, 0.9);
}
.quick-side-button ul li {
  position: relative;
}
.quick-side-button ul li::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: 1px;
  background: rgb(98, 172, 165);
}
.quick-side-button ul li:last-child::after {
  display: none;
}
.quick-side-button ul li a {
  display: block;
  padding: 4px 0;
  color: rgb(17, 17, 17);
  font-size: 13px;
  line-height: 17px;
  text-align: center;
}
.quick-side-button ul li a.ico-phone::before {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 16px;
  height: 16px;
  background: url(../images/contents/ico_phone.png) no-repeat center / 100%;
}
.quick-side-button .close-quick-side-button {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #949494;
  font-size: 0;
}
.quick-side-button .close-quick-side-button::after {
  content: "";
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  background: url(../images/aicc/btn_close.png) no-repeat center;
  background-size: 0.8rem;
}

/* ===231031 혜택 개선 (한동희)=== */
/* 231205 수정 */
.renew-type-benefit-home-wrap {
  overflow: hidden;
}
.page-contents.renew-type-benefit-home {
  padding-top: 63px;
  padding-bottom: 100px;
  background-color: transparent;
}
/* 24.03.14 추가 */
.page-contents.renew-type-benefit-home.if-logout {
  padding-bottom: 40px;
}
.page-contents.renew-type-benefit-home span.color-purple {
  color: #8665ef;
}
.page-contents.renew-type-benefit-home .benefit-section-title {
  font-weight: 700;
}
/* 상단 고정 탭 */
.page-fixed-tabs {
  position: fixed;
  top: 5rem;
  left: 0;
  z-index: 100;
  width: 100%;
  background-color: #ffffff;
}
.page-fixed-tabs ul {
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  box-sizing: border-box;
  width: auto;
  min-width: 100%;
  padding: 1.2rem 2.4rem 1.2rem;
}
.page-fixed-tabs ul::-webkit-scrollbar {
  display: none;
}
.page-fixed-tabs ul li {
  flex: 0 0 auto;
}
.page-fixed-tabs ul li a {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  align-items: center;
  height: 4rem;
  padding: 0 1.3rem 0 0.8rem;
  border: 1px solid var(--gray-30);
  border-radius: 3.5rem;
  color: var(--basic);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: normal;
  transition: 0.25s all;
}
.page-fixed-tabs ul li a i + span,
.page-fixed-tabs ul li a span + i {
  /* margin-left: 0.3rem; */
}
.page-fixed-tabs ul li a i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.4rem;
  height: 2.4rem;
}
.page-fixed-tabs ul li a i img {
  object-fit: contain;
  object-position: center;
  width: 100%;
  height: 100%;
}
.page-fixed-tabs ul li.on a {
  border: 0;
  background-color: var(--basic);
  color: #ffffff;
}
/**/
.renew-type-benefit-home-wrap .section-special-benefit {
  margin-top: 45px;
}
.renew-type-benefit-home-wrap .new-benefit-slide.type-renew .new-benefit-slide-list {
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.renew-type-benefit-home-wrap .new-benefit-slide.type-renew .benefit-banner-slide-item {
  display: block;
  overflow: hidden;
  width: 140px;
  margin-right: 15px;
  box-shadow: none;
}
.renew-type-benefit-home-wrap .new-benefit-slide.type-renew .benefit-banner-slide-item-link {
  /*display: block;*/
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.renew-type-benefit-home-wrap .new-benefit-slide.type-renew .benefit-banner-slide-item .slide-item-img-wrap {
  width: 100%;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.renew-type-benefit-home-wrap .new-benefit-slide.type-renew .benefit-banner-slide-item .slide-item-img-wrap img {
  display: block;
  width: 110px; /* 24.03.08 이화정 수정 */
  height: auto; /* 24.03.08 이화정 수정 */
  /*width: 100%;*/
  border-radius: 10px;
  /* box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.03); */
}
.renew-type-benefit-home-wrap .new-benefit-slide.type-renew .benefit-banner-slide-item .slide-item-text-wrap {
  width: 100%;
  margin-top: 15px;
}
.renew-type-benefit-home-wrap .new-benefit-slide.type-renew .benefit-banner-slide-item .slide-item-text-wrap .slide-item-title {
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 15px;
  line-height: 15px;
}
.renew-type-benefit-home-wrap .new-benefit-slide.type-renew .benefit-banner-slide-item .slide-item-text-wrap .slide-item-text {
  color: rgb(102, 102, 102);
  font-size: 13px;
  line-height: 21px;
}
.renew-type-benefit-home-wrap .benefit-page-section.section-join-benefit {
  margin-top: 45px;
}
.renew-type-benefit-home-wrap .benefit-page-section.section-join-benefit .benefit-section-title {
  margin-bottom: 15px;
}
.renew-type-benefit-home-wrap .benefit-page-section.section-join-benefit .join-benefit-item {
  display: block;
  overflow: hidden;
  width: 100%;
  margin-bottom: 12px;
  border-radius: 10px;
  box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.03);
}
/**/
.renew-type-benefit-home-wrap .benefit-page-section.section-join-benefit .join-benefit-item-link {
  display: block;
  width: 100%;
}
.renew-type-benefit-home-wrap .benefit-page-section.section-join-benefit .join-benefit-item-link img {
  width: 100%;
}
.renew-type-benefit-home-wrap .benefit-page-section.section-join-benefit .join-benefit-item-link:last-child {
  margin-bottom: 0;
}
.renew-type-benefit-home-wrap .benefit-page-section.section-join-benefit .join-benefit-item.item-fortune .join-benefit-item-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  height: 22.92vw;
  padding-left: 26.5%;
  background: url("/images/new_benefit_images/fortune_cookie.gif") no-repeat;
  background-color: rgb(239, 223, 205);
  background-position: 6% center;
  background-size: 20%;
}
.renew-type-benefit-home-wrap .benefit-page-section.section-join-benefit .join-benefit-item.item-fortune .join-benefit-item-link p {
  font-size: 16px;
  line-height: 22px;
}
/*내 실적 조회*/
.layer-monthly-benefit-chart-wrap .section-my-record {
  margin-top: 36px;
}
.layer-monthly-benefit-chart-wrap .section-my-record .benefit-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.layer-monthly-benefit-chart-wrap .section-my-record .benefit-section-head .benefit-section-title {
  margin-bottom: 0;
}
.layer-monthly-benefit-chart-wrap .section-my-record .months-tab-list ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.layer-monthly-benefit-chart-wrap .section-my-record .months-tab-list ul li.gray-divider {
  position: relative;
}
.layer-monthly-benefit-chart-wrap .section-my-record .months-tab-list ul li.gray-divider::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 1px;
  height: 12px;
  background-color: rgb(193, 193, 193);
  color: #888;
  font-size: 15px;
}
.layer-monthly-benefit-chart-wrap .section-my-record .months-tab-list ul li a {
  padding-right: 12px;
}
.layer-monthly-benefit-chart-wrap .section-my-record .months-tab-list ul li:last-child a {
  padding: 0 0 0 12px;
  border-right: none;
}
.layer-monthly-benefit-chart-wrap .section-my-record .months-tab-list ul li.tab-on {
  color: #111;
  font-weight: 600;
}
.layer-monthly-benefit-chart-wrap .section-my-record .month_tab_cont > div:first-child {
  display: none;
}
.layer-monthly-benefit-chart-wrap .section-my-record .my-record-card-item {
  margin: 15px 0;
  padding: 24px 20px;
  border-radius: 10px;
  background-color: #f9fafb;
  /* box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.03); */
}
/* 24.03.14 수정 */
.layer-monthly-benefit-chart-wrap .section-my-record .my-record-card-item .card-item-top {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  min-height: 74px;
}
.layer-monthly-benefit-chart-wrap .section-my-record .my-record-card-item .card-item-image-wrap {
  position: relative;
  width: 47px;
  margin-right: 15px;
}
.layer-monthly-benefit-chart-wrap .section-my-record .my-record-card-item .card-item-image-wrap:empty::before,
.layer-monthly-benefit-chart-wrap .section-my-record .my-record-card-item .card-item-image-wrap.is-error::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 75px;
  background: url(../images/common/card-default-vertical.svg) no-repeat 50% 50%;
  background-size: cover;
}
.layer-monthly-benefit-chart-wrap .section-my-record .my-record-card-item .card-item-image {
  width: 47px;
}
.layer-monthly-benefit-chart-wrap .section-my-record .my-record-card-item .card-item-image.type-horizontal {
  width: 75px;
  margin-right: -13px;
  transform: rotate(90deg) translateX(27px);
  transform-origin: 50% 25%;
}
.layer-monthly-benefit-chart-wrap .section-my-record .my-record-card-item .card-item-title {
  font-size: 12px;
}
.layer-monthly-benefit-chart-wrap .section-my-record .my-record-card-item .card-item-text-wrap {
  margin-top: 5px;
}
.layer-monthly-benefit-chart-wrap .section-my-record .my-record-card-item .card-item-text {
  margin-top: 6px;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  word-break: keep-all;
}
.layer-monthly-benefit-chart-wrap .section-my-record .my-record-card-item .point-progress {
  margin-top: 24px;
}
/*231121*/
.layer-monthly-benefit-chart-wrap .section-my-record .my-record-card-item .point-progress.type-green-purple-gradient .point-progress-object-bar {
  position: relative;
  background: none;
}
.layer-monthly-benefit-chart-wrap .section-my-record .my-record-card-item .point-progress.type-green-purple-gradient .point-progress-object-bar::after {
  content: "";
  position: absolute;
  width: 0;
  height: 6px;
  border-radius: 3px;
  /* background: -moz-linear-gradient(
left,
rgb(93, 237, 216) 0%,
rgb(2, 160, 153) 100%
);
background: -webkit-linear-gradient(
left,
rgb(93, 237, 216) 0%,
rgb(2, 160, 153) 100%
);
background: linear-gradient(
to right,
rgb(93, 237, 216) 0%,
rgb(2, 160, 153) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgb(93,237,216)', endColorstr='rgb(2,160,153)',GradientType=1 ); */
  background-color: #00a49d;
}
.layer-monthly-benefit-chart-wrap .section-my-record .my-record-card-item .point-progress.type-green-purple-gradient .point-progress-object-bar.progress-bar-ani::after {
  animation: 0.75s 0.15s ease-in-out both progressBarAni;
}
@keyframes progressBarAni {
  0% {
      width: 0;
  }
  100% {
      width: 100%;
  }
}

.renew-type-benefit-home-wrap .renew-type-benefit-home .section-like {
  margin-top: 45px;
  margin-bottom: 0;
  overflow: hidden;
}
.renew-type-benefit-home-wrap .renew-type-benefit-home .section-like .benefit-section {
  border-radius: 10px;
  box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.03);
}
/*내 응모, 찜*/
.renew-type-benefit-home-wrap .benefit-bottom-my-section {
  box-sizing: border-box;
  margin-top: 45px;
  padding: 17px 0;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.03);
}
.renew-type-benefit-home-wrap .benefit-bottom-my-section ul {
  display: flex;
  justify-content: center;
  align-items: center;
}
.renew-type-benefit-home-wrap .benefit-bottom-my-section ul li {
  position: relative;
  width: 50%;
  font-weight: 500;
  font-size: 15px;
}
.renew-type-benefit-home-wrap .benefit-bottom-my-section ul li:first-child::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  width: 1px;
  height: 12px;
  background-color: rgb(193, 193, 193);
}
.renew-type-benefit-home-wrap .benefit-bottom-my-section ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
}
.renew-type-benefit-home-wrap .benefit-bottom-my-section .icon-image-box {
  width: 19px;
  height: 19px;
  margin-right: 4px;
}
.renew-type-benefit-home-wrap .benefit-bottom-my-section .icon-image-box.type01 {
  background: url("/images/new_benefit_images/ic_benefit_bottom_check.png") no-repeat;
  background-size: 19px 19px;
}
.renew-type-benefit-home-wrap .benefit-bottom-my-section .icon-image-box.type02 {
  background: url("/images/new_benefit_images/ic_benefit_bottom_heart.png") no-repeat;
  background-size: 19px 19px;
}
/*NEW 하단 모달*/
.renew-benefit-fix-bottom-modal {
  position: fixed;
  right: 0;
  bottom: 58px;
  left: 0;
  z-index: 1000;
  box-sizing: border-box;
  width: 100%;
  padding: 20.5px 24px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-color: #fff;
  box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.11);
}
.renew-benefit-fix-bottom-modal.if-app {
  bottom: 0px;
}
.renew-benefit-fix-bottom-modal .fix-bottom-modal-link {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.renew-benefit-fix-bottom-modal .fix-bottom-modal-link::after {
  content: "";
  position: absolute;
  right: 0;
  width: 20px;
  height: 20px;
  background: url("/images/mypage_new_images/btn_arrow_down_2x.png") no-repeat;
  background-size: 20px;
  transform: rotate(180deg); /* [24-10-29 LHJ : 받은혜택 팝업 화살표 방향 변경] */
}
.renew-benefit-fix-bottom-modal .fix-bottom-modal-txt-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.renew-benefit-fix-bottom-modal .fix-bottom-modal-txt {
  box-sizing: border-box;
  margin-left: 5px;
  padding-left: 30px;
  background: url("/images/new_benefit_images/ic_fixed_bottom_graph.png") no-repeat;
  background-size: 24px;
  color: #111;
  font-weight: bold;
  font-size: 1.6rem;
}
/*월 받은 혜택 모달*/
.layer-monthly-benefit-chart-wrap .layer-benefit-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.layer-monthly-benefit-chart-wrap .layer-benefit-section-head h2 {
  font-size: 1.8rem;
  line-height: 2.7rem;
  font-weight: 700;
}
.layer-monthly-benefit-chart-wrap .months-tab-list ul {
  display: flex;
  justify-content: center;
  align-items: center;
}
.layer-monthly-benefit-chart-wrap .months-tab-list ul li.gray-divider {
  position: relative;
}
.layer-monthly-benefit-chart-wrap .months-tab-list ul li.gray-divider::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 1px;
  height: 12px;
  background-color: rgb(193, 193, 193);
  color: #888;
  font-size: 15px;
}
.layer-monthly-benefit-chart-wrap .months-tab-list ul li a {
  padding-right: 12px;
  font-size: 15px;
}
.layer-monthly-benefit-chart-wrap .months-tab-list ul li:last-child a {
  padding: 0 0 0 12px;
  border-right: none;
}
.layer-monthly-benefit-chart-wrap .months-tab-list ul li.tab-on {
  color: #111;
  font-weight: 600;
}
.layer-monthly-benefit-chart-wrap .month_tab_cont > div:first-child {
  display: none;
}
.layer-monthly-benefit-chart-wrap .header__title {
  display: flex;
  align-items: center;
  padding-left: 30px;
  background: url("/images/new_benefit_images/ic_fixed_bottom_graph.png") no-repeat;
  background-position: left 4px;
  background-size: 24px;
}
.layer-monthly-benefit-chart-wrap .header__title img {
  width: 24px;
  margin-right: 6px;
}
.layer-monthly-benefit-chart-wrap .tab-month-content .amount-title {
  /* margin-top: 20px; */
  font-weight: 600;
  font-size: 30px;
  /* text-align: center; */
}
.layer-monthly-benefit-chart-wrap .tab-month-content .compare-text {
  margin-top: 6px;
  color: #00a49d;
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  /* text-align: center; */
}
.layer-monthly-benefit-chart-wrap .benefit-chart-box {
  position: relative;
  overflow: visible !important;
  width: 100%;
  margin-top: 30px;
}
.layer-monthly-benefit-chart-wrap .month-chart-box {
  position: relative;
}
.layer-monthly-benefit-chart-wrap span.tag-this-month {
  position: absolute;
  right: 9%;
  bottom: -5px;
  padding: 3px 7px;
  border-radius: 8.5px;
  background-color: #00a49d;
  color: #fff;
  font-size: 10px;
}
.layer-monthly-benefit-chart-wrap .highcharts-container {
  overflow: visible !important;
}
.layer-monthly-benefit-chart-wrap .highcharts-tooltip-box {
  fill: transparent;
  stroke-width: 0;
}
.layer-monthly-benefit-chart-wrap .area-monthly-chart .chart-bubble {
  position: absolute;
  padding: 6px 13px 5px;
  border: 1px solid #00a49d;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 2px 10px 0 rgba(202, 210, 226, 0.6);
  white-space: nowrap;
  transform: translateX(-50%) translateY(-70%);
}
.layer-monthly-benefit-chart-wrap .area-monthly-chart .chart-bubble::before {
  border-color: #00a49d;
}
.layer-monthly-benefit-chart-wrap .area-monthly-chart .chart-bubble .chart-bubble-text {
  color: #00a49d;
}
.layer-monthly-benefit-chart-wrap .highcharts-area {
  opacity: 0.2;
}
.layer-monthly-benefit-chart-wrap .benefit-chart-detail-list {
  margin-top: 36px;
}
.layer-monthly-benefit-chart-wrap .benefit-chart-detail-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 21px;
  color: rgb(136, 136, 136);
  font-size: 15px;
  line-height: 20px;
}
.layer-monthly-benefit-chart-wrap .benefit-chart-detail-list li:last-child {
  margin-bottom: 0;
}
.layer-monthly-benefit-chart-wrap .benefit-chart-detail-list li p:last-child {
  color: #111;
}
.layer-monthly-benefit-chart-wrap .tab-month-content .ui-basic-button {
  border-color: rgb(229, 229, 229);
}
/*스켈레톤*/
.renew-type-benefit-home-wrap .section-special-benefit.is-skeleton .new-benefit-slide {
  display: none;
}
.renew-type-benefit-home-wrap .section-special-benefit .skeleton-new-benefit-slide {
  display: none;
}
.renew-type-benefit-home-wrap .section-special-benefit.is-skeleton .skeleton-new-benefit-slide {
  display: flex;
  width: 130%;
  margin-top: 15px;
}
.renew-type-benefit-home-wrap .section-special-benefit.is-skeleton .skeleton-new-benefit-slide .skeleton-new-benefit-slide-item .skeleton-image-box {
  box-sizing: border-box;
  width: 180px;
  height: 180px;
  margin-right: 15px;
  padding: 20px;
  border-radius: 10px;
  background-color: var(--skeleton);
  box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.03);
  text-align: center;
}
.renew-type-benefit-home-wrap .section-special-benefit.is-skeleton .skeleton-new-benefit-slide .skeleton-text-box p:first-child {
  display: inline-block;
  width: 80%;
  height: 15px;
  margin-top: 15px;
  border-radius: 6px;
  background-color: var(--skeleton);
}
.renew-type-benefit-home-wrap .section-special-benefit.is-skeleton .skeleton-new-benefit-slide .skeleton-text-box p:last-child {
  display: inline-block;
  width: 80%;
  height: 21px;
  margin-top: 5px;
  border-radius: 6px;
  background-color: var(--skeleton);
}
.renew-type-benefit-home-wrap .section-join-benefit.is-skeleton .join-benefit-item-link {
  display: none;
}
.renew-type-benefit-home-wrap .section-join-benefit .skeleton-join-benefit-item {
  display: none;
}
.renew-type-benefit-home-wrap .section-join-benefit.is-skeleton .skeleton-join-benefit-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 23vw;
  margin-bottom: 12px;
  padding: 16px 20px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.03);
}
.renew-type-benefit-home-wrap .section-join-benefit.is-skeleton .skeleton-join-benefit-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--skeleton);
}
.renew-type-benefit-home-wrap .section-join-benefit.is-skeleton .skeleton-join-benefit-text-box {
  margin-left: 12px;
}
.renew-type-benefit-home-wrap .section-join-benefit.is-skeleton .skeleton-join-benefit-item-subtit {
  width: 80px;
  height: 15px;
  border-radius: 6px;
  background-color: var(--skeleton);
}
.renew-type-benefit-home-wrap .section-join-benefit.is-skeleton .skeleton-join-benefit-item-tit {
  width: 120px;
  height: 20px;
  margin-top: 6px;
  border-radius: 6px;
  background-color: var(--skeleton);
}

/*쿠폰함*/
.renew-type-benefit-home-wrap .section-coupon-box {
  position: relative;
  margin-top: 35px;
  z-index: 1;
}
.renew-type-benefit-home-wrap .section-coupon-box .coupon-box-list {
  margin-top: 15px;
  padding: 0 20px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.03);
}
.renew-type-benefit-home-wrap .section-coupon-box .coupon-box-list .coupon-box-item {
  box-sizing: border-box;
  width: 100%;
  height: 64px;
  border-bottom: 1px solid rgba(217, 223, 235, 0.3);
}
.renew-type-benefit-home-wrap .section-coupon-box .coupon-box-list .coupon-box-item:last-child {
  border-bottom: none;
}
.renew-type-benefit-home-wrap .section-coupon-box .coupon-box-list .coupon-box-item-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-right: 22px;
  background: url("/images/icon/btn-more.png") no-repeat 100% 50%;
  background-size: 10px;
}
.renew-type-benefit-home-wrap .section-coupon-box .coupon-box-list .coupon-box-item-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.renew-type-benefit-home-wrap .section-coupon-box .coupon-box-list .coupon-box-item-left .coupon-box-icon {
  width: 36px;
  height: 36px;
  margin-right: 6px;
  background: url("/images/new_benefit_images/ic_coupoun_box_recieved.png") no-repeat 50% 50%;
  background-size: 100%;
}

.renew-type-benefit-home-wrap .section-coupon-box .coupon-box-list .coupon-box-item-left .coupon-box-icon.type-recommend {
  width: 24px; /* 24.04.22 수정 */
  height: 24px; /* 24.04.22 수정 */
  background: url("/images/new_benefit_images/ic_coupoun_box_recommend.png") no-repeat 50% 50%;
  background-size: 100%;
}
.renew-type-benefit-home-wrap .section-coupon-box .coupon-box-list .coupon-box-item-left .coupon-box-icon.type-vip {
  width: 20px;
  height: 20px;
  background: url("/images/new_benefit_images/ic_coupoun_box_vip.png") no-repeat 50% 50%;
  background-size: 100%;
}
.renew-type-benefit-home-wrap .section-coupon-box .coupon-box-list .coupon-box-item-left .coupon-box-icon.type-event {
  width: 20px;
  height: 20px;
  background: url("/images/new_benefit_images/ic_coupoun_box_event.png") no-repeat 50% 50%;
  background-size: 100%;
}
.renew-type-benefit-home-wrap .section-coupon-box .coupon-box-list .item-title {
  font-size: 17px;
}
.renew-type-benefit-home-wrap .section-coupon-box .coupon-box-list .item-amount {
  color: var(--secondary);
  font-weight: 500;
  font-size: 15px;
}
.renew-type-benefit-home-wrap .section-coupon-box .coupon-box-list .coupon-box-item-left span.tag-hana-pick {
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 8.5px;
  background-color: var(--primary);
  color: #fff;
  font-size: 12px;
}

/*쿠폰함 스켈레톤*/
.renew-type-benefit-home-wrap .section-coupon-box.is-skeleton .coupon-box-item-link {
  display: none;
}
.renew-type-benefit-home-wrap .section-coupon-box .skeleton-coupon-item {
  display: none;
}
.renew-type-benefit-home-wrap .section-coupon-box.is-skeleton .skeleton-coupon-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
}
.renew-type-benefit-home-wrap .section-coupon-box.is-skeleton .skeleton-coupon-item .skeleton-image {
  width: 30px;
  height: 30px;
  margin-right: 6px;
  border-radius: 50%;
  background-color: var(--skeleton);
}
.renew-type-benefit-home-wrap .section-coupon-box.is-skeleton .skeleton-coupon-item .skeleton-item-title {
  width: 40%;
  height: 20px;
  margin-right: 6px;
  border-radius: 6px;
  background-color: var(--skeleton);
}
.renew-type-benefit-home-wrap .section-coupon-box.is-skeleton .skeleton-coupon-item .skeleton-item-number {
  width: 20px;
  height: 20px;
  margin-left: auto;
  border-radius: 6px;
  background-color: var(--skeleton);
}
.renew-type-benefit-home-wrap .section-event-list {
  margin-top: 45px;
}
/* 내실적조회 스켈레톤 */
.renew-type-benefit-home-wrap .section-my-record.is-skeleton .my-record-card-item .card-item-image-wrap,
.renew-type-benefit-home-wrap .section-my-record.is-skeleton .my-record-card-item .card-item-text-wrap {
  display: none;
}
.renew-type-benefit-home-wrap .section-my-record.is-skeleton .my-record-card-item .skeleton-card-item-image {
  width: 47px;
  height: 75px;
  border-radius: 5px;
  background-color: var(--skeleton);
}
.renew-type-benefit-home-wrap .section-my-record.is-skeleton .my-record-card-item .skeleton-card-text-wrap {
  width: calc(100% - 65px);
  margin-left: 15px;
}
.renew-type-benefit-home-wrap .section-my-record.is-skeleton .my-record-card-item .skeleton-card-text-wrap .skeleton-card-item-title {
  width: 70%;
  height: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 3px;
  background-color: var(--skeleton);
}
.renew-type-benefit-home-wrap .section-my-record.is-skeleton .my-record-card-item .skeleton-card-text-wrap .skeleton-card-item-text {
  width: 100%;
  height: 18px;
  margin-top: 5px;
  border-radius: 3px;
  background-color: var(--skeleton);
}
.renew-type-benefit-home-wrap .section-my-record.is-skeleton .my-record-card-item .point-progress-gradation {
  visibility: hidden;
}
/* 월 받은혜택 CASE: is-loading */
.layer-monthly-benefit-chart-wrap .ui-layer {
  height: 91.6%;
}
.layer-monthly-benefit-chart-wrap .ui-layer .modal-banner-body-wrap,
.layer-monthly-benefit-chart-wrap .ui-layer .modal-banner-body-wrap .ui-layer__body {
  height: 100%;
}
.layer-monthly-benefit-chart-wrap .chart-loading-wrap {
  display: none;
}
/* .layer-monthly-benefit-chart-wrap.is-loading .month_tab_cont,
.layer-monthly-benefit-chart-wrap.is-loading .layer-benefit-section-head {
display: none;
}
.layer-monthly-benefit-chart-wrap.is-loading
.ui-layer
.modal-banner-body-wrap
.ui-layer__body-inner {
padding: 0;
} */
.layer-monthly-benefit-chart-wrap.is-loading .ui-layer__body-inner {
  display: none;
}
.layer-monthly-benefit-chart-wrap .ui-layer__body-inner {
  display: block;
}
.layer-monthly-benefit-chart-wrap .month_tab_cont {
  display: block;
}
.layer-monthly-benefit-chart-wrap .layer-benefit-section-head {
  display: flex;
}
.layer-monthly-benefit-chart-wrap.is-loading .chart-loading-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.layer-monthly-benefit-chart-wrap.is-loading .chart-loading-image {
  width: 123px;
  height: 166px;
  margin-top: -140px;
  background: url("/images/new_benefit_images/loading_coin_drop.gif") no-repeat center center;
  background-size: 100% 100%;
}
.layer-monthly-benefit-chart-wrap.is-loading .chart-loading-wrap p {
  position: relative;
  width: 100%;
  margin-top: 40px;
  font-weight: 500;
  font-size: 17px;
  text-align: center;
}
.layer-monthly-benefit-chart-wrap.is-loading .chart-loading-wrap p::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  animation: loadingTextAni 2s linear infinite;
}
@keyframes loadingTextAni {
  0% {
      content: "내가 받은 혜택을 불러오고 있어요 ";
  }
  30% {
      content: "내가 받은 혜택을 불러오고 있어요 .";
  }
  60% {
      content: "내가 받은 혜택을 불러오고 있어요 ..";
  }
  100% {
      content: "내가 받은 혜택을 불러오고 있어요 ...";
  }
}
/* 24.01.11 추가 */
.layer-monthly-benefit-chart-wrap .tab-month-content-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 20px;
}
.layer-monthly-benefit-chart-wrap .btn-benefit-detail {
  position: relative;
  width: 19px;
  height: 19px;
  margin-left: 9px;
  /* margin-top: 15px;
padding-right: 25px;
font-size: 1.3rem;
color: #111;
line-height: 1.8rem; */
}
.layer-monthly-benefit-chart-wrap .btn-benefit-detail span {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
  background-image: url(/images/icon/ic_arrow_up_white.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 10px;
  background-color: #111;
  border-radius: 50%;
}
.layer-monthly-benefit-chart-wrap .btn-benefit-detail span.opened {
  transform: rotate(180deg);
}
.renew-type-benefit-home-wrap .new-benefit-text-banner {
  margin-top: 15px;
  padding: 7px 20px;
  background-color: #fff;
  border-radius: 10px;

  box-shadow: 0 3px 5px 0 rgba(217, 223, 235, 0.3);
}
.renew-type-benefit-home-wrap .new-benefit-text-banner .new-benefit-text-banner-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-right: 22px;
  background: url(/images/icon/btn-more.png) no-repeat 100% 50%;
  background-size: 10px;
  font-weight: 500;
}
.renew-type-benefit-home-wrap .new-benefit-text-banner .new-benefit-text-item-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.renew-type-benefit-home-wrap .new-benefit-text-banner .new-benefit-text-icon {
  width: 25px;
  height: 25px;
  margin-right: 6px;
  background: url(/images/new_benefit_images/ic_bell_new_benefit.gif) no-repeat 50% 50%;
  background-size: 100%;
}
.renew-type-benefit-home-wrap .new-benefit-text-banner p.item-title {
  font-size: 1.3rem;
  /* font-weight: bold; */
}
.layer-monthly-benefit-chart-wrap .layer-benefit-section {
  padding-bottom: 36px;
  border-bottom: 1px solid #e9ecef;
}
.renew-type-benefit-home-wrap .section-coupon-box .coupon-box-logout {
  margin-top: 15px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.03);
  overflow: hidden;
}
.renew-type-benefit-home-wrap .section-coupon-box .coupon-box-logout h3.page-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.38px;
}
.renew-type-benefit-home-wrap .section-coupon-box .coupon-box-logout .coupon-logo-list {
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
}
.renew-type-benefit-home-wrap .section-coupon-box .coupon-logo-list-object {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  -webkit-animation: coupon-list-animation 10s infinite linear;
  animation: coupon-list-animation 10s infinite linear;
}
.renew-type-benefit-home-wrap .section-coupon-box .coupon-logo-list-object::before,
.renew-type-benefit-home-wrap .section-coupon-box .coupon-logo-list-object::after {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 222.2222222%;
  padding-top: 16.666666%;
  margin-left: 6.944444%;
  background: url(/images/illustration/img-openbank-bank.svg) no-repeat 0 0;
  background-size: 100% 100%;
}
.renew-type-benefit-home-wrap .section-coupon-box .coupon-logo-list-object::before {
  background: url(/images/new_benefit_images/benefit_coupon_logo_bg_01.png) no-repeat 0 0;
  background-size: 100% 100%;
}
.renew-type-benefit-home-wrap .section-coupon-box .coupon-logo-list-object::after {
  background: url(/images/new_benefit_images/benefit_coupon_logo_bg_01.png) no-repeat 0 0;
  background-size: 100% 100%;
}
@-webkit-keyframes coupon-list-animation {
  0% {
      -webkit-transform: translateX(0);
  }
  100% {
      -webkit-transform: translateX(-229.5%);
  }
}
@keyframes coupon-list-animation {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-229.5%);
  }
}
.layer-monthly-benefit-chart-wrap .my-record-card-item.type-no-record {
  padding: 25px 0 30px;
}
.layer-monthly-benefit-chart-wrap .my-record-card-item .img-case-empty-wrap {
  text-align: center;
}
.layer-monthly-benefit-chart-wrap .my-record-card-item .img-case-empty-box {
  width: 76px;
  height: 60px;
  margin: 0 auto;
  background: url(/images/new_benefit_images/my_record_case_empty.gif) no-repeat;
  background-size: 100% 100%;
}
.layer-monthly-benefit-chart-wrap .my-record-card-item .benefit-empty-text {
  margin-top: 16px;
}
/* 24.01.16 */
.renew-type-benefit-home-wrap .benefit-page-section.section-event-list {
  position: relative;
  height: auto;
}
.renew-type-benefit-home-wrap .benefit-page-section.section-event-list .benefit-event-tabs {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  height: 32px;
  overflow-x: auto;
  margin-top: 1.2rem;
  margin-bottom: 1.5rem;
  margin-left: -2.4rem;
  margin-right: -2.4rem;
  padding-left: 2.4rem;
  padding-right: 2.4rem;
}
/* 24.02.22 수정 */
.renew-type-benefit-home-wrap .benefit-page-section.section-event-list .benefit-event-tabs-wrap {
  width: 100%;
  /* height: 35px; */
  background-color: #f9fafb;
  overflow: hidden;
  /* overflow-x: auto; */
  margin: 0 -24px;
  padding: 0 24px;
}
/* 24.02.22 수정 */
.renew-type-benefit-home-wrap .benefit-page-section.section-event-list .benefit-event-tabs-wrap.fixed-active {
  position: fixed;
  top: 50px;
  left: 24px;
  width: 100%;
  /* margin-left: -24px;
margin-right: -24px; */
  padding-left: 24px;
  padding-right: 24px;
  z-index: 999;
  background-color: #fff;
  /* transition: all 1s; */
  box-sizing: border-box;
}
/* 24.02.22 추가 */
.renew-type-benefit-home-wrap .benefit-page-section.section-event-list .benefit-banner:first-of-type {
  margin-top: 0;
}

.renew-type-benefit-home-wrap .benefit-page-section.section-event-list .benefit-event-tab {
  font-size: 1.4rem;
  font-weight: normal;
  flex: 0 0 auto;
  /* color: #888; */
  color: #111;
}
.renew-type-benefit-home-wrap .benefit-page-section.section-event-list .benefit-event-tab a {
  height: 3rem;
  padding: 0 1.2rem;
  display: flex;
  align-items: center;
  /* border-radius: 1.5rem;
background-color: #ffffff;
border: 1px solid #888888; */
}
/* 24.02.22 수정 */
.renew-type-benefit-home-wrap .benefit-page-section.section-event-list .benefit-event-tab.type-all.active {
  background-color: #111;
  border-color: #111;
  color: #fff;
}
.renew-type-benefit-home-wrap .event-list-top-btn-box {
  width: 100%;
  margin-top: 35px;
  text-align: center;
}
.renew-type-benefit-home-wrap .event-list-top-btn {
  width: 40px;
  height: 40px;
  background: url(/images/new_benefit_images/event_list_btn_top.png) no-repeat;
  background-size: cover;
}
.renew-type-benefit-home-wrap .benefit-page-section.section-not-logged-in {
  margin-top: 15px;
}
/* 24.02.05 */
.renew-type-benefit-home-wrap .section-coupon-box .coupon-box-logout .page-title {
  margin: 15px 0 10px;
}
.renew-type-benefit-home-wrap .section-coupon-box .coupon-box-logout .ui-button {
  width: fit-content;
  margin: 0 auto 36px;
}
.renew-type-benefit-home-wrap .page-button-top-wrap {
  display: none;
}
/* =========//231031 혜택 개선 (한동희)========= */

/* 내문서 신규 23.11.22 추가 */
.contents-wrap.my-doc-ty {
  background: #f4f6f8;
}
.contents-wrap.my-doc-ty .page-contents {
  background: #f4f6f8;
}
.section-title .title.tit-ty01 {
  color: #111;
  font-weight: 500;
  font-size: 15px;
  line-height: 19px;
}
.doc-scroll-box {
  margin: 15px -24px 0;
}
.doc-scroll-box ul {
  overflow-x: auto;
  font-size: 0;
  white-space: nowrap;
  scrollbar-width: none;
}
.doc-scroll-box ul::-webkit-scrollbar {
  display: none;
}
.doc-scroll-box ul li {
  display: inline-block;
  vertical-align: top;
  width: 90px;
  margin-right: 12px;
  box-shadow: 0 3px 5px rgba(217, 223, 235, 0.3);
}
.doc-scroll-box ul li:first-child {
  margin-left: 24px;
}
.doc-scroll-box ul li:last-child {
  margin-right: 24px;
}
.doc-scroll-box ul li a {
  display: table;
  width: 100%;
  padding-top: 56px;
  padding-bottom: 10px;
  border-radius: 10px;
  background-color: #fff;
  background-position: 50% 10px;
  background-size: 40px auto;
  background-repeat: no-repeat;
  text-align: center;
}
.doc-scroll-box ul li a.img01 {
  background-image: url(/images/contents/ico_doc_scrollbox01.png);
}
.doc-scroll-box ul li a.img02 {
  background-image: url(/images/contents/ico_doc_scrollbox02.png);
}
.doc-scroll-box ul li a.img03 {
  background-image: url(/images/contents/ico_doc_scrollbox03.png);
}
.doc-scroll-box ul li a.img04 {
  background-image: url(/images/contents/ico_doc_scrollbox04.png);
}
.doc-scroll-box ul li a p {
  display: table-cell;
  vertical-align: middle;
  height: 34px;
  font-size: 13px;
  line-height: 17px;
}
.doc-list-box ul li {
  margin-top: 18px;
}
.doc-list-box ul li a {
  position: relative;
  display: block;
  padding: 20px 35px 20px 70px;
  border-radius: 10px;
  background-color: #fff;
  background-position: 15px 50%;
  background-size: 40px auto;
  background-repeat: no-repeat;
  box-shadow: 0 3px 5px rgba(217, 223, 235, 0.3);
}
.doc-list-box ul li a:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  display: block;
  width: 20px;
  height: 18px;
  margin-top: -9px;
  background: url(/images/contents/btn_more_doc_list.png) no-repeat 0 0 / auto 18px;
}
.doc-list-box ul li.img01 a {
  background-image: url(/images/contents/ico_doc_listbox01.png);
}
.doc-list-box ul li.img02 a {
  background-image: url(/images/contents/ico_doc_listbox02.png);
}
.doc-list-box ul li.img03 a {
  background-image: url(/images/contents/ico_doc_listbox03.png);
}
.doc-list-box ul li.img04 a {
  background-image: url(/images/contents/ico_doc_listbox04.png);
}
.doc-list-box ul li.img05 a {
  background-image: url(/images/contents/ico_doc_listbox05.png);
}
.doc-list-box ul li.img06 a {
  background-image: url(/images/contents/ico_doc_listbox06.png);
}
.doc-list-box ul li.img07 a {
  background-image: url(/images/contents/ico_doc_listbox07.png);
}
.doc-list-box ul li.img08 a {
  background-image: url(/images/contents/ico_doc_listbox08.png);
}
.doc-list-box ul li a em {
  display: block;
  color: rgb(0, 164, 157);
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 18px;
}
.doc-list-box ul li a em span {
  margin-left: 4px;
  padding: 0 7px;
  border-radius: 9px;
  font-size: 14px;
  line-height: 18px;
}
/* [2024-05-27 내 문서 폰트사이즈 수정 : HDH] */
.doc-list-box ul li a em span.smaller-font-size {
  padding: 2px 7px;
  font-size: 12px;
}
.doc-list-box ul li a em span.flag01 {
  background: rgba(0, 164, 157, 0.15);
  color: rgb(0, 164, 157);
}
.doc-list-box ul li a em span.flag02 {
  background: rgba(241, 74, 118, 0.15);
  color: rgb(241, 74, 118);
}
.doc-list-box ul li a strong {
  display: block;
  margin-top: 6px;
  color: #111;
  font-weight: bold;
  font-size: 17px;
  line-height: 20px;
  word-break: keep-all;
}
.doc-list-box ul li a .rolling-txt-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 26px;
  margin-top: 12px;
  border-radius: 13px;
  background: rgb(245, 245, 245);
}
.doc-list-box ul li a .rolling-txt-box p {
  position: absolute;
  top: 0;
  left: calc(100vw - 153px);
  padding: 0 12px;
  color: rgb(102, 102, 102);
  font-size: 13px;
  line-height: 26px;
  white-space: nowrap;
}
.doc-list-box ul li a .rolling-txt-box p.txt-rolling-type01 {
  box-sizing: border-box;
  width: 560px;
  animation: scrolltype01 18s linear 0.5s infinite;
}
.doc-list-box ul li a .rolling-txt-box p.txt-rolling-type02 {
  box-sizing: border-box;
  width: 445px;
  animation: scrolltype02 18s linear 0.5s infinite;
}
@keyframes scrolltype01 {
  from {
      left: calc(100vw - 153px);
  }

  to {
      left: -560px;
  }
}
@-webkit-keyframes scrolltype01 {
  from {
      left: calc(100vw - 153px);
  }

  to {
      left: -560px;
  }
}
@keyframes scrolltype02 {
  from {
      left: calc(100vw - 153px);
  }

  to {
      left: -445px;
  }
}
@-webkit-keyframes scrolltype02 {
  from {
      left: calc(100vw - 153px);
  }

  to {
      left: -445px;
  }
}
.doc-list-box ul li a .doc-tootip {
  position: absolute;
  top: -14px;
  right: 20px;
  padding: 0 9px;
  border-radius: 13px;
  background: rgb(250, 99, 139);
  color: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
  font-weight: 400;
  font-size: 14px;
  line-height: 26px;
}
.doc-list-box ul li a .doc-tootip::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  display: block;
  margin-left: -3px;
  border: 6px solid;
  border-color: transparent;
  border-top-color: rgb(250, 99, 139);
}

/* 해외결제 설정 */
.landing-my-use .landing-my-use-tab {
  position: sticky;
  top: 50px;
  z-index: 100;
}
.landing-my-use .landing-my-use-tab ul {
  display: flex;
}
.landing-my-use .landing-my-use-tab li {
  position: relative;
  display: flex;
  flex: 1;
  background: #fff;
}
.landing-my-use .landing-my-use-tab li a {
  position: relative;
  flex: 1;
  color: #888;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  text-align: left;
  padding: 22px 0 25px 24px;
}
.landing-my-use .landing-my-use-tab li::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  opacity: 0.3;
}
.landing-my-use .landing-my-use-tab li:nth-child(1)::before {
  background: url(/images/contents/bg_landing_tab01.png) no-repeat right bottom / 85px 45px;
}
.landing-my-use .landing-my-use-tab li:nth-child(2)::before {
  background: url(/images/contents/bg_landing_tab02.png) no-repeat right bottom / 85px 45px;
}
.landing-my-use .landing-my-use-tab li.on a {
  color: #111;
}
.landing-my-use .landing-my-use-tab li.on:nth-child(1) {
  background: #d5efff;
}
.landing-my-use .landing-my-use-tab li.on:nth-child(2) {
  background: #ffddf2;
}
.landing-my-use .landing-my-use-tab li.on::after {
  opacity: 1;
}
.landing-my-use .landing-tab-cont01 {
  padding-top: 50px;
  background: linear-gradient(to bottom, #d5efff 60%, #ffddf2);
}
.landing-my-use .landing-tit-box {
  position: relative;
}
.landing-my-use .landing-tit-box::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 0;
  display: block;
}
.landing-my-use .landing-tit-box h2 {
  position: relative;
  z-index: 1;
  padding-left: 24px;
  color: #111;
  font-weight: 300;
  font-size: 24px;
  line-height: 32px;
}
.landing-my-use .landing-tit-box h2 strong {
  font-weight: 700;
}
.landing-my-use .landing-tit-box.landing-bgimg01 {
  box-sizing: border-box;
  height: 183px;
  padding-top: 50px;
}
.landing-my-use .landing-tit-box.landing-bgimg01::after {
  right: 0;
  width: 180px;
  height: 183px;
  background: url(/images/contents/bg_landing_tit01.png) no-repeat right bottom / 180px 183px;
}
.landing-my-use .landing-tit-box02 {
  position: relative;
}
.landing-my-use .landing-tit-box02::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 0;
  display: block;
}
.landing-my-use .landing-tit-box02 h2 {
  position: relative;
  z-index: 1;
  padding-left: 24px;
  color: #111;
  font-weight: 300;
  font-size: 18px;
  line-height: 23px;
}
.landing-my-use .landing-tit-box02 h2 strong {
  display: block;
  margin-top: 12px;
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
}
.landing-my-use .landing-tit-box02.landing-bgimg02 {
  box-sizing: border-box;
  height: 183px;
  padding-top: 50px;
}
.landing-my-use .landing-tit-box02.landing-bgimg02::after {
  right: 0;
  width: 180px;
  height: 183px;
  background: url(/images/contents/bg_landing_tit02.png) no-repeat right bottom / 180px 183px;
}
.landing-my-use .landing-tit-box02.landing-bgimg03 {
  box-sizing: border-box;
  height: 163px;
  padding-top: 50px;
}
.landing-my-use .landing-tit-box02.landing-bgimg03::after {
  right: 24px;
  width: 180px;
  height: 163px;
  background: url(/images/contents/bg_landing_tit03.png) no-repeat right bottom / 180px 163px;
}
.landing-my-use .landing-tit-box02.landing-bgimg04 {
  box-sizing: border-box;
  height: 163px;
  padding-top: 50px;
}
.landing-my-use .landing-tit-box02.landing-bgimg04::after {
  right: 0;
  width: 180px;
  height: 163px;
  background: url(/images/contents/bg_landing_tit04.png) no-repeat right bottom / 180px 163px;
}
.landing-my-use .landing-tit-box02.landing-bgimg05 {
  box-sizing: border-box;
  height: 163px;
  padding-top: 50px;
}
.landing-my-use .landing-tit-box02.landing-bgimg05::after {
  right: 0;
  width: 180px;
  height: 163px;
  background: url(/images/contents/bg_landing_tit05.png) no-repeat right bottom / 180px 163px;
}
.landing-my-use .landing-select-card-box {
  position: relative;
  padding: 0 24px;
}
.landing-my-use .landing-select-card-box .ui-select-block.type-card {
  border-radius: 6px;
  background: none;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.11);
}
.landing-my-use .landing-select-card-box .ui-select-block.type-card .ui-select {
  padding-right: 42px;
  background: #fff;
  font-weight: 700;
  line-height: 34px;
}
.landing-my-use .landing-select-card-box .ui-select-block.type-card::before {
  z-index: 20;
  background: url(/images/icon/btn-fold-l.png) no-repeat 0 center / auto 8px;
}
.landing-my-use .landing-select-card-box .ui-select-block.type-card .ui-select .card-image {
  width: 54px;
  height: 34px;
}
.landing-my-use .landing-select-card-box .option-tolltip {
  position: absolute;
  top: -28px;
  left: 17px;
  width: 178px;
  height: 50px;
  background: url(/images/contents/bg_landing_tooltip.png) no-repeat 0 0 /178px auto;
}
.landing-my-use .landing-select-card-box .option-tolltip p {
  padding-top: 9px;
  color: #fff;
  font-size: 11px;
  line-height: 26px;
  text-align: center;
}
.landing-my-use .landing-card-option-box .option-list {
  display: flex;
  margin-top: 15px;
  padding: 0 24px;
}
.landing-my-use .landing-card-option-box .option-list li {
  flex: 1;
  text-align: center;
}
.landing-my-use .landing-card-option-box .option-list li .card-option {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.11);
  font-size: 0;
}
.landing-my-use .landing-card-option-box .option-list li .card-option.option-y {
  background: #fff url(/images/contents/icon_yes.png) no-repeat 50% 50% /22px auto;
}
.landing-my-use .landing-card-option-box .option-list li .card-option.option-n {
  background: #fff url(/images/contents/icon_no.png) no-repeat 50% 50% /22px auto;
}
.landing-my-use .landing-card-option-box .option-list li p {
  margin-top: 10px;
  font-size: 13px;
  line-height: 17px;
  text-align: center;
}
.landing-my-use .landing-card-option-box .landing-card-option-list {
  padding: 0 24px;
}
.landing-my-use .landing-card-option-box .landing-card-option-list li {
  margin-top: 24px;
  padding: 24px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.11);
}
.landing-my-use .landing-card-option-box .landing-card-option-list li .option-title {
  padding-bottom: 16px;
  padding-left: 20px;
  border-bottom: 1px solid rgba(112, 112, 112, 0.2);
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  text-indent: -20px;
}
.landing-my-use .landing-card-option-box .landing-card-option-list li .option-txt {
  margin-top: 24px;
  font-weight: 700;
  font-size: 16px;
  line-height: 27px;
}
.landing-my-use .landing-card-option-box .landing-card-option-list li .option-txt > span {
  display: inline-block;
  vertical-align: top;
  padding: 0 20px;
  border-radius: 17px 17px 0 17px;
  font-size: 16px;
  line-height: 33px;
}

.landing-my-use .landing-card-option-box .landing-card-option-list li .option-txt strong {
  display: block;
  margin-top: 8px;
}
.landing-my-use .landing-card-option-box .landing-card-option-list li .option-txt strong .icon-visa {
  display: inline-block;
  vertical-align: top;
  width: 47px;
  height: 27px;
  background: #fff url(/images/contents/imt_txt_visa.png) no-repeat 50% 50% /47px auto;
  font-size: 0;
}
.landing-my-use .landing-card-option-box .landing-card-option-list li .option-txt strong > img {
  vertical-align: top;
  height: 50px;
  transform: translateY(-11px);
}
.landing-my-use .landing-card-option-box .landing-card-option-list li .option-txt.opt-yes {
  color: #387bff;
}
.landing-my-use .landing-card-option-box .landing-card-option-list li .option-txt.opt-yes > span {
  background: #387bff;
  color: #fff;
}
.landing-my-use .landing-card-option-box .landing-card-option-list li .option-txt.opt-no {
  color: #ff5777;
}
.landing-my-use .landing-card-option-box .landing-card-option-list li .option-txt.opt-no > span {
  background: #ff5777;
  color: #fff;
}
.landing-my-use .landing-card-option-box .landing-card-option-list li .option-txt02 {
  margin-top: 14px;
  color: #666;
  font-size: 14px;
  line-height: 20px;
}
.landing-my-use .landing-card-option-box .landing-card-option-list li .options-btns {
  margin-top: 15px;
  text-align: right;
}
.landing-my-use .landing-card-option-box .landing-card-option-list li .btn-setting {
  display: inline-block;
  padding: 12px 15px 11px;
  border-radius: 20px;
  background: #f5f5f5;
  color: #111;
  font-size: 13px;
  line-height: 17px;
}
.landing-my-use .landing-card-option-box .landing-card-option-list li .btn-setting::after {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 14px;
  height: 17px;
  background: url(/images/icon/btn_more_setting.png) no-repeat 100% 50% / auto 11px;
}
.landing-my-use .landing-tab-cont02 {
  padding-bottom: 60px;
  background: linear-gradient(to bottom, #ffddf2, rgb(217, 235, 255), rgb(216, 167, 237));
}
.landing-my-use .landing-acordion-box {
  padding: 0 24px;
}
.landing-my-use .landing-acordion-box + .landing-acordion-box {
  margin-top: 24px;
}
.landing-my-use .landing-acordion-box .accordion-list {
  border-radius: 10px;
}
.landing-my-use .landing-acordion-box .accordion-opener {
  padding: 24px 26px;
  background: #fff;
}
.landing-my-use .landing-acordion-box .accordion-opener-title {
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
}
.landing-my-use .landing-acordion-box .accordion-contents.type-narrow {
  background: #fff;
}
.landing-my-use .landing-acordion-box .accordion-opener.js-accordion-active:before {
  display: none;
}
.landing-my-use .landing-acordion-box .js-ui-accordion__opener::after {
  background: url(/images/icon/btn_more_setting.png) no-repeat 50% 50% / auto 11px;
  transform: rotate(+90deg);
}
.landing-my-use .landing-acordion-box .js-ui-accordion__opener.js-accordion-active::after {
  background: url(/images/icon/btn_more_setting.png) no-repeat 50% 50% / auto 11px;
  transform: rotate(+270deg);
}
.landing-my-use .landing-acordion-box .landing-acordion-txt {
  padding: 24px 6px 0;
  border-top: 1px solid rgba(112, 112, 112, 0.2);
}
.landing-my-use .landing-acordion-box .landing-acordion-txt p,
.landing-my-use .landing-acordion-box .landing-acordion-txt ul li {
  color: rgb(102, 102, 102);
  font-size: 14px;
  line-height: 21px;
}
.landing-my-use .landing-acordion-box .landing-acordion-txt ul li {
  position: relative;
  padding-left: 8px;
}
.landing-my-use .landing-acordion-box .landing-acordion-txt ul li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  display: inline-block;
  width: 2px;
  height: 2px;
  background: rgb(102, 102, 102);
}
/* 2024-01-19 랜딩 배너 추가 */
.landing-my-use .landing-banner {
  position: relative;
  padding: 0 24px;
  margin: 30px 0;
}
.landing-my-use .landing-banner .banner {
  display: block;
  border-radius: 10px;
  background: linear-gradient(rgb(218, 248, 244), rgb(255, 243, 201));
  display: flex;
  padding: 8px 12px;
  gap: 8px;
  align-items: center;
  margin: 0;
  max-width: none;
}
.landing-my-use .landing-banner .banner .banner-img {
  display: block;
  width: 70px;
  height: 70px;
  flex: 0 0 70px;
}
.landing-my-use .landing-banner .banner .banner-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.landing-my-use .landing-banner .banner .banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 15px;
  line-height: 19px;
  letter-spacing: -0.38px;
}
.landing-my-use .landing-banner .banner .banner-text .title {
  font-weight: 700;
}
.landing-my-use .landing-banner .banner .banner-text .sub-title {
}

/* WPM-4994 내 카드관리 상단 고정바 : 이화정 */
.mycard-contents .clone-box {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1001;
  display: none;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  padding: 0 24px;
  border-bottom: 1px solid #e8e8e8;
  background: #fff;
}
.mycard-contents .clone-box .card-image {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  width: 50px;
}
.mycard-contents .clone-box .card-image .card-image-inner {
  width: 100%;
}
.mycard-contents .clone-box .card-flex {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  width: calc(100% - 50px);
}
.mycard-contents .clone-box .card-flex .basic-text {
  overflow: hidden;
  height: 2rem;
  padding-left: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mycard-contents .slide-card.my-card-fix.is-scroll .clone-box {
  display: flex;
}
/* //WPM-4994 내 카드관리 상단 고정바 : 이화정 */

/* SSSSSSSSSSSSSSSSSSSSSSSSSSSSSS 2021-01-02 인기카드 개편 : 장준혁 SSSSSSSSSSSSSSSSSSSSSSSSSSSSSS */
/* 공통 */
.new-recommended-cards {
  overflow-x: hidden;
  padding: 0;
}
.new-recommended-cards * {
  box-sizing: border-box;
  /* font-weight: inherit; */
  font-size: inherit;
  /* color: inherit; */
}
.new-recommended-cards .card-image {
  position: relative;
}
.new-recommended-cards .card-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.new-recommended-cards .card-image.type-vertical .card-image-inner {
  transform: none;
}
.new-recommended-cards .card-image img {
  position: relative;
  z-index: 1;
  object-fit: contain;
  object-position: center;
  width: 100%;
  height: 100%;
}
.new-recommended-cards .card-image.is-error::before {
  background-image: url("/images/common/card-default.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.new-recommended-cards .card-image.vertical.is-error::before {
  background-image: url("/images/common/card-default-vertical.svg");
}
.new-recommended-cards .card-image.is-error img {
  display: none;
}
.new-recommended-cards .page-section {
  padding: 38px 24px 35px;
}
.new-recommended-cards .page-section .section-title {
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: stretch;
  margin-bottom: 20px;
}
.new-recommended-cards .page-section .section-title .title {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 18px;
  line-height: 26px;
}
.new-recommended-cards .page-section .section-title.type-block .title {
  display: block;
  word-break: keep-all;
}
.new-recommended-cards .page-section .section-title .title i {
  display: inline-block;
  width: 20px;
  height: 20px;
}
.new-recommended-cards .page-section .section-title .title i img {
  object-fit: contain;
  object-position: center;
  width: 100%;
  height: 100%;
}
.new-recommended-cards .page-section .section-title p {
  font-weight: 400;
  font-size: 15px;
  word-break: keep-all;
}
.new-recommended-cards .page-section .section-title .btn-select {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.new-recommended-cards .page-section .section-title .btn-select span {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.new-recommended-cards .page-section .section-title .btn-select::after {
  content: "";
  display: inline-block;
  /* margin-left:4px; */
  width: 18px;
  height: 18px;
  background: url("/images/common/btn-tab-open-b.svg") no-repeat center center / 12px auto;
}
.new-recommended-cards .page-section .section-title .sub-title {
  display: block;
  gap: 8px;
  font-weight: 500;
  font-size: 17px;
}
.new-recommended-cards .section-partition {
  display: block;
  height: 10px;
  margin-top: 0;
  margin-right: -24px;
  margin-bottom: 0;
  margin-left: -24px;
  border: none;
  background-color: rgb(245, 245, 245);
}
.new-recommended-cards .page-tab-panel {
  margin-bottom: 10px;
}
/* 신규카드 */
.new-recommended-cards .new-cards {
  overflow-x: auto;
  margin-right: -24px;
  margin-left: -24px;
  padding-right: 24px;
  padding-left: 24px;
}
.new-recommended-cards .new-cards::-webkit-scrollbar {
  display: none;
}
.new-recommended-cards .new-cards .new-cards-list {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.new-recommended-cards .new-cards .new-cards-item {
  width: 140px;
  flex: 0 0 140px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.new-recommended-cards .new-cards .new-cards-link {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.new-recommended-cards .new-cards .card-image {
  overflow: hidden;
  width: 140px;
  height: 88px;
  border-radius: 6px;
  /* background: url("/images/common/card-default.svg") no-repeat center center / cover; */
}
.new-recommended-cards .new-cards .card-image.vertical.is-error::before {
  background-image: url("/images/common/card-default.svg");
}
.new-recommended-cards .new-cards .card-image img {
  width: 140px;
  height: 88px;
}
.new-recommended-cards .new-cards .card-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.new-recommended-cards .new-cards .card-text .title {
  font-weight: 500;
  font-size: 15px;
  line-height: 21px;
}
.new-recommended-cards .new-cards .card-text .info {
  color: rgb(102, 102, 102);
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
}
.new-recommended-cards .new-cards .new-cards-item .card-image.vertical {
}
.new-recommended-cards .new-cards .new-cards-item .card-image.vertical img {
  transform: rotate(-90deg) scale(calc(140 / 88), calc(140 / 88));
  transform-origin: center center;
}
/* 또래카드 */
.new-recommended-cards .peer-cards .slide-recommended-card {
  overflow-x: auto;
  margin-right: -24px;
  margin-left: -24px;
  padding-right: 24px;
  padding-left: 24px;
}
.new-recommended-cards .peer-cards .slide-recommended-card::-webkit-scrollbar {
  display: none;
}
.new-recommended-cards .peer-cards .slide-recommended-card .slide-card-list:not(.swiper-wrapper) {
  display: flex;
  gap: 20px;
}
.new-recommended-cards .peer-cards .slide-recommended-card .slide-card-list.swiper-wrapper .slide-card-item {
  margin-right: 20px;
}
.new-recommended-cards .peer-cards .slide-recommended-card .slide-card-item {
  width: 225px;
}
.new-recommended-cards .peer-cards .slide-recommended-card .card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 225px;
  height: 372px;
  padding: 80px 20px 20px 20px;
  border-radius: 10px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.new-recommended-cards .peer-cards .slide-recommended-card .card::before {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  backdrop-filter: blur(50px) brightness(1.5) contrast(0.8) saturate(2.5);
}
.new-recommended-cards .peer-cards .slide-recommended-card .card::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  background: rgba(0, 0, 0, 0.2);
}
.new-recommended-cards .peer-cards .slide-recommended-card .card > * {
  position: relative;
  z-index: 1;
}
.new-recommended-cards .peer-cards .slide-recommended-card .card .card-benefit {
  position: absolute;
  inset: 20px 20px auto 20px;
  padding: 6px 15px;
  border-radius: 15px;
  background-color: rgba(0, 0, 0, 0.15);
  color: #ffffff;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}
.new-recommended-cards .peer-cards .slide-recommended-card .card .card-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 124px;
  height: 124px;
  margin: 0 auto;
}
.new-recommended-cards .peer-cards .slide-recommended-card .card .card-image::before {
  content: "";
  position: absolute;
  inset: 0;
  top: 50%;
  left: 50%;
  z-index: 0;
  display: block;
  width: 124px;
  height: 79px;
  border-radius: 5px;
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%);
}
.new-recommended-cards .peer-cards .slide-recommended-card .card .card-image.vertical::before {
  width: 79px;
  height: 124px;
}
.new-recommended-cards .peer-cards .slide-recommended-card .card .card-image.is-error::before {
}
.new-recommended-cards .peer-cards .slide-recommended-card .card .card-image.vertical.is-error::before {
}
.new-recommended-cards .peer-cards .slide-recommended-card .card .card-image img {
  position: relative;
  z-index: 1;
  object-fit: contain;
  object-position: center;
  overflow: hidden;
  width: 124px;
  height: 79px;
  border-radius: 5px;
}
.new-recommended-cards .peer-cards .slide-recommended-card .card .card-image.vertical img {
  /* width: 79px;
height: 124px; */
  transform: rotate(90deg);
}
.new-recommended-cards .peer-cards .slide-recommended-card .card .card-text {
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: center;
  margin-top: 20px;
  color: #ffffff;
  text-align: center;
}
.new-recommended-cards .peer-cards .slide-recommended-card .card .card-text .benefit {
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
}
.new-recommended-cards .peer-cards .slide-recommended-card .card .card-text .name {
  font-size: 13px;
  line-height: 18px;
  opacity: 0.8;
}
.new-recommended-cards .peer-cards .slide-recommended-card .card .btn-detail {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 42px;
  margin-top: auto;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.05);
}
.new-recommended-cards .peer-cards .slide-recommended-card .card .btn-detail span {
  font-weight: 500;
  font-size: 13px;
  line-height: 17px;
}

/* 또래카드 슬라이드 */
.new-recommended-cards .peer-cards .slide-recommended-card .swiper-object .swiper {
  margin-right: -24px;
  margin-left: -24px;
  padding-right: 24px;
  padding-left: 24px;
}
.new-recommended-cards .peer-cards .slide-recommended-card .swiper-controller {
}
.new-recommended-cards .peer-cards .slide-recommended-card .swiper-pagination {
  position: relative;
  bottom: auto;
  margin-top: 20px;
}
.new-recommended-cards .peer-cards .slide-recommended-card .swiper-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border: 0;
  background-color: rgb(214, 214, 214);
  opacity: 1;
}
.new-recommended-cards .peer-cards .slide-recommended-card .swiper-pagination .swiper-pagination-bullet-active {
  background-color: rgb(17, 17, 17);
}
/* 지금 뜨는 인기카드 */
.new-recommended-cards .hot-popular-cards {
  display: flex;
  flex-direction: column;
}
.new-recommended-cards .hot-popular-cards .section-title {
  margin-bottom: 9px;
}
.new-recommended-cards .popular-cards {
  display: flex;
  display: flex;
  flex-direction: column;
}
.new-recommended-cards .popular-cards .popular-cards-list {
  align-items: flex-start;
  align-self: stretch;
}
.new-recommended-cards .popular-cards .popular-cards-list-item {
  display: flex;
  gap: 24px;
  align-items: center;
  width: 100%;
  padding-top: 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid rgb(229, 229, 229);
}
.new-recommended-cards .popular-cards .popular-cards-list-link {
  display: flex;
  flex: 1 1 auto;
  gap: 24px;
  align-items: center;
}
.new-recommended-cards .popular-cards .popular-cards-list-link::after {
  content: "";
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: url("/images/common/ic-button-arrow.svg") no-repeat center center / auto 10px;
}
.new-recommended-cards .popular-cards .card-image {
  display: block;
  flex: 0 0 57px;
  overflow: hidden;
  width: 57px;
  height: 91px;
  border-radius: 5px;
}
.new-recommended-cards .popular-cards .card-image::before {
  background-image: url("/images/common/card-default-vertical.svg");
}
.new-recommended-cards .popular-cards .card-image img {
  width: 100%;
  height: 100%;
}
.new-recommended-cards .popular-cards .card-image:not(.vertical) img {
  transform: rotate(90deg) scale(calc(91 / 57), calc(91 / 57));
}
.new-recommended-cards .popular-cards .card-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.new-recommended-cards .popular-cards .card-text .title {
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
}
.new-recommended-cards .popular-cards .card-text .tip {
  display: inline-flex;
  gap: 0.25em;
  padding: 6px 15px;
  border-radius: 13.5px;
  background-color: rgb(216, 243, 242);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
}
.new-recommended-cards .popular-cards .card-text .tip strong {
  font-weight: 500;
}
.new-recommended-cards .popular-cards .card-text .benefit {
  color: rgb(102, 102, 102);
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
}
.new-recommended-cards .popular-cards .btn-more {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  align-self: flex-end;
  width: auto;
  margin-top: 25px;
}
.new-recommended-cards .popular-cards .btn-more span {
  font-size: 13px;
  line-height: 18px;
}
.new-recommended-cards .popular-cards .btn-more::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: url("/images/common/ic-btn-light-next.svg") no-repeat center / contain;
}
/* 혜택별로 살펴보는 인기카드 */
.new-recommended-cards .benefit-popular-cards {
  background-color: rgb(245, 245, 245);
}
.new-recommended-cards .best-cards {
  overflow-x: auto;
  margin-right: -24px;
  margin-left: -24px;
  padding-right: 24px;
  padding-left: 24px;
}
.new-recommended-cards .best-cards::-webkit-scrollbar {
  display: none;
}
.new-recommended-cards .best-cards .best-cards-list {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.new-recommended-cards .best-cards .best-cards-list-item {
  position: relative;
  flex: 0 0 220px;
}
.new-recommended-cards .best-cards .best-cards-list-item::before {
  content: attr(data-rank);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  background-color: rgb(134, 101, 239);
  color: #ffffff;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
}
.new-recommended-cards .best-cards .best-cards-list-link {
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: 30px 24px 24px 24px;
  border-radius: 6px;
  border-radius: 6px;
  background-color: #ffffff;
  box-shadow: 0 3px 5px 0 rgba(217, 223, 235, 0.3);
}
.new-recommended-cards .best-cards .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
}
.new-recommended-cards .best-cards .card .card-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 16px;
}
.new-recommended-cards .best-cards .card .card-text .benefit {
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
}
.new-recommended-cards .best-cards .card .card-text .name {
  color: rgb(124, 124, 124);
  font-size: 13px;
  line-height: 18px;
}
.new-recommended-cards .best-cards .card .card-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  margin: auto auto 20px;
}
.new-recommended-cards .best-cards .card .card-image.vertical {
}
.new-recommended-cards .best-cards .card .card-image.is-error::before {
  top: 50%;
  left: 50%;
  width: 120px;
  height: 74px;
  border-radius: 6px;
  transform: translate(-50%, -50%);
  /* background-image:url('/images/common/card-default-vertical.svg'); */
}
.new-recommended-cards .best-cards .card .card-image.vertical.is-error::before {
  width: 74px;
  height: 120px;
}
.new-recommended-cards .best-cards .card .card-image.is-error::before {
}
.new-recommended-cards .best-cards .card .card-image img {
  overflow: hidden;
  width: 120px;
  height: 74px;
  border-radius: 6px;
}
.new-recommended-cards .best-cards .card .card-image.vertical img {
  /* width: 74px;
height: 120px; */
  transform: rotate(90deg);
}
.new-recommended-cards .best-cards .card-benefit {
  padding: 6px 10px;
  border-radius: 15px;
  background-color: rgb(236, 230, 255);
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -0.33px;
}
.new-recommended-cards .best-cards .card-benefit .point {
  color: rgb(134, 101, 239);
}
/* 혜택별 카드 찾기 */
.new-recommended-cards .find-benefit-type {
}
.new-recommended-cards .tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.new-recommended-cards .tags-list .tag-list-item {
}
.new-recommended-cards .tags-list .tag-list-link {
  padding: 8px 14px;
  border: 1px solid rgb(229, 229, 229);
  border-radius: 20px;
}
.new-recommended-cards .tags-list .tag-list-link.on {
  border-color: rgb(134, 101, 239);
  background-color: rgb(134, 101, 239);
  color: #ffffff;
}
.new-recommended-cards .tags-list .tag-link-text {
  font-size: 14px;
  line-height: 19px;
}
.new-recommended-cards .btn-find-recommended {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 48px;
  margin-top: 30px;
  border-radius: 6px;
  background-color: var(--primary);
}
.new-recommended-cards .btn-find-recommended span {
  color: #ffffff;
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
}
/* 기타 메뉴 */
.new-recommended-cards .bottom-menus {
}
.new-recommended-cards .bottom-menus .menu-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.new-recommended-cards .bottom-menus .menu-list .menu-item {
  margin: 0;
}
.new-recommended-cards .bottom-menus .menu-list .menu-link {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  height: 60px;
  padding: 0 15px 0 20px;
  border: 1px solid rgb(229, 229, 229);
  border-radius: 6px;
}
.new-recommended-cards .bottom-menus .menu-list .menu-link::after {
  content: "";
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: url("/images/common/ic-button-arrow.svg") no-repeat center / auto 10px;
}
.new-recommended-cards .bottom-menus .menu-list .menu-icon {
  flex: 0 0 33px;
  width: 33px;
  height: 33px;
  margin: 0;
}
.new-recommended-cards .bottom-menus .menu-list .menu-icon img {
  object-fit: contain;
  object-position: center;
  width: 100%;
  height: 100%;
}
.new-recommended-cards .bottom-menus .menu-list .menu-text {
  flex: 1 1 auto;
  font-weight: 500;
  text-align: left;
}
/* 카드 전체보기 배너 */
.new-recommended-cards .bottom-banners {
  /* padding-bottom:0; */
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 0;
}
.new-recommended-cards .bottom-banners button {
  overflow: hidden;
  border-radius: 15px;
}
.new-recommended-cards .btn-view-all-cards {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-left: 30px;
  background-color: rgb(236, 230, 255);
}
.new-recommended-cards .btn-view-all-cards span {
  flex: 1 1 auto;
  font-weight: bold;
  font-size: 18px;
  line-height: 21px;
  letter-spacing: -0.9px;
  text-align: left;
}
.new-recommended-cards .btn-view-all-cards .icon-cards {
  width: 130px;
  height: 80px;
}
.new-recommended-cards .btn-view-all-cards .icon-cards img {
  object-fit: cover;
  object-position: left center;
  width: 100%;
  height: 100%;
}
/* 카드 목록 */
.new-recommended-cards .usage-area-head {
  padding-bottom: 0;
  border-bottom: 0;
}
.new-recommended-cards .cards {
  margin-top: 25px;
}
.new-recommended-cards .cards .card-image img {
  position: absolute;
  inset: 0;
}
/* EEEEEEEEEEEEEEEEEEEEEEEEEEEEEE 2021-01-02 인기카드 개편 : 장준혁 EEEEEEEEEEEEEEEEEEEEEEEEEEEEEE */


/* vip 우수회원 메인 개편 */
.vip-main2024 .page-contents {
  padding-top: 0;
  padding-bottom: 0;
}

.vip-main-top {
  margin: 0 -24px;
  padding: 82px 0 32px;
  background: url("/images/vip/images/common/bg_vip_top.png") no-repeat center bottom / cover;
  text-align: center;
  overflow: hidden;
}
.vip-main-top .vip-tit {
  display: inline-block;
  width: 208px;
  padding-bottom: 32px;
}

.vip-main-top .vip-tit img {
  width: 100%;
}

.vip-main-top p {
  position: relative;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #f8f5ef;
  margin: 0 24px;
  padding: 24px 0;
  color: #f8f5ef;
  font-size: 13px;
  line-height: 18px;
}


.vip-main-top p:after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 50%;
  top: -50px;
  width: 100px;
  height: 100px;
  background: url("/images/vip/images/common/img_vip_stamp.png") no-repeat center center / 100%;
  transform: translateX(62px);
}

.vip-main-top .user-link {
  display: block;
  margin: 24px 24px 0;
  color: #f8f5ef;
  font-size: 17px;
  line-height: 21px;
  background: url("/images/vip/images/common/ico_more.png") no-repeat right center / 12px auto;
}
.vip-main-top .user-link em {
  color: #f8f5ef;
  font-weight: 600;
  font-style: normal;
}
.vip-main-contents {
  margin: 0 -24px;
  padding: 32px 24px;
  background-color: #f4f5f7;
}
.vip-main-contents > *:first-child {
  margin-top: 0;
}

/* [2025-04-25 KEJ] [WPM-10749] vip 상단 이미지 5월 변경 건 신규 추가*/
.vip-may-event-con .vip-main-top{
  background: url("/images/vip/images/common/bg_vip_may_top.png") no-repeat center bottom / cover;
}
.vip-may-event-con .vip-main-top .vip-tit-w100 {
  display: inline-block;
  width: 100%;
}
.vip-may-event-con .vip-main-top .vip-tit-w100 img {
  width: 100%;
}

.vip-may-event-con .vip-main-top .user-link {
  display: block;
  margin: 24px 24px 0;
  color: #00221a;
  font-size: 17px;
  line-height: 21px;
  background: url("/images/vip/images/common/ico_more02.png") no-repeat right center / 12px auto;
}
.vip-may-event-con .vip-main-top .user-link em {
  color: #00221a;
  font-weight: 600;
  font-style: normal;
}
.vip-may-event-con .vip-main-top p:after {
  display: none;
}

.vip-may-event-con .vip-main-top .vip-tit-sub {
  position: relative;
  color: #00221a;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
}

.vip-may-event-con .vip-main-top p {
  position: relative;
  border-bottom: 1px solid #00221a;
  border-top: none;
  margin: 8px 24px 0px;
  padding: 0px 0 20px;
  color: #00221a;
  font-size: 13px;
  line-height: 18px;
  font-weight: 300;
}
/* [2025-04-28 KEJ] [WPM-10901] 배너추가 */
.vip-main-contents .vip-may-event-bn{
  display: block;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.vip-main-contents .vip-may-event-bn .vip-may-event-bn-img{
  width: 100%;
  height: auto;
}
/* //[2025-04-28 KEJ] [WPM-10901] 배너추가 */

/* [2025-05-02 KEJ] [WPM-10866] 배너 추가 */
.vip-may-event-con .vip-couponbox-banner{
  margin: 0 -24px;
}
.vip-may-event-con .vip-couponbox-banner img{
  width: 100%;
  height: auto;
}
/* //[2025-05-02 KEJ] [WPM-10866] 배너 추가 */


/* //[2025-04-25 KEJ] [WPM-10749] vip 상단 이미지 5월 변경 건 신규 추가*/

.vip-banner-birthday {
  position: relative;
  display: block;
  margin-top: 12px;
  padding: 24px 20px;
  background-image: linear-gradient(to right, #1e1b1b 26%, #393636 100%);
  border-radius: 12px;
  overflow: hidden;
}
.vip-banner-birthday::after {
  content: "";
  display: block;
  width: 127px;
  height: 100px;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: url("/images/vip/images/common/ico_banner_birthday.png") no-repeat right center / auto 100px;
}
.vip-banner-birthday .txt-birthday img {
  height: 17px;
}
.vip-banner-birthday p {
  margin-top: 4px;
  color: #d7be9b;
  font-size: 13px;
  line-height: 16px;
}
/* [2025-05-12 KEJ] [WPM-11126] vip-banner-stamp 추가 */
.vip-banner-stamp,
.vip-banner-thankyou,
.vip-banner-reward {
  position: relative;
  display: block;
  margin-top: 12px;
  padding: 24px 100px 24px 20px;
  background-image: linear-gradient(to right, #1e1b1b 26%, #393636 100%);
  border-radius: 12px;
  overflow: hidden;
}
.vip-banner-thankyou::after {
  content: "";
  display: block;
  width: 127px;
  height: 100px;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: url("/images/vip/images/common/ico_banner_thankyou.png") no-repeat right center / auto 81px;
}
/* [2025-05-12 KEJ] [WPM-11126] vip-banner-stamp 높이 추가 */
.vip-banner-stamp{
  height: 100px;
  box-sizing: border-box;
}

/* [2025-05-12 KEJ] [WPM-11126] vip-banner-stamp::after 추가 */
.vip-banner-stamp::after{
  content: "";
  display: block;
  width: 127px;
  height: 100px;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: url(/images/vip/images/common/vip-gift-reward_stamp_img.png) no-repeat 85% center / auto 81px;
}

.vip-banner-reward::after {
  content: "";
  display: block;
  width: 127px;
  height: 100px;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: url("/images/vip/images/common/img_reward.png") no-repeat right center / auto 81px;
}

/* [2025-05-12 KEJ] [WPM-11126] vip-banner-stamp txt 스타일 추가 */
.vip-banner-stamp .txt-stamp{
  display: block;
  width: 118px;
}

.vip-banner-stamp .txt-stamp img{
  width: 100%;
}

/* [2025-05-12 KEJ] [WPM-11126] vip-banner-stamp 추가 */
.vip-banner-reward .txt-reward img,
.vip-banner-thankyou .txt-thankyou img,
.vip-banner-stamp .txt-stamp img {
  height: 17px;
}

/* [2025-05-12 KEJ] [WPM-11126] vip-banner-stamp 추가 */
.vip-banner-reward p,
.vip-banner-thankyou p,
.vip-banner-stamp p
 {
  margin-top: 4px;
  color: #d7be9b;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.3px;
}
.vip-banner01 {
  position: relative;
  display: flex;
  min-height: 64px;
  margin-top: 12px;
  padding: 16px 0 16px 12px;
  border-radius: 12px;
  background-color: #fff;
  align-items: center;
  box-shadow: 0 3px 5px 0 rgba(217, 223, 235, 0.31);
  box-sizing: border-box;
}
.vip-banner01.img01::before {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  margin-right: 8px;
  background: url("/images/vip/images/common/ico_banner_vip.png") no-repeat center center / 64px auto;
}
.vip-banner01 p {
  color: #1e1b1b;
  font-size: 15px;
  line-height: 20px;
}
.vip-banner01 .txt-benefit {
  display: inline-block;
  margin-top: 4px;
  padding: 0 6px;
  color: #b48e5a;
  font-size: 15px;
  line-height: 23px;
  background: rgba(164, 141, 111, 0.1);
  border-radius: 12px;
}
.vip-banner02 {
  position: relative;
  display: block;
  margin-top: 12px;
  padding: 20px;
  border-radius: 12px;
  align-items: center;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.vip-banner02::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #111;
  opacity: 0.4;
}
.vip-banner02 p {
  position: relative;
  color: #f8f5ef;
  font-size: 15px;
  line-height: 20px;
}
.vip-banner02 span {
  position: relative;
  display: block;
  color: #e5ba96;
  font-size: 13px;
  line-height: 18px;
}
.vip-banner03 {
  position: relative;
  display: block;
  min-height: 200px;
  margin-top: 12px;
  padding: 24px 20px 0;
  border-radius: 12px;
  background-image: linear-gradient(to top, #586f5e 67%, #47594c);
  box-sizing: border-box;
}
.vip-banner03.img01::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 23px;
  width: 122px;
  height: 113px;
  background: url("/images/vip/images/common/ico_banner_check.png") no-repeat center center / cover;
}
.vip-banner03 span {
  display: block;
  color: #f8f5ef;
  font-size: 15px;
  line-height: 20px;
}
.vip-banner03 p {
  margin-top: 4px;
  color: #f8f5ef;
  font-size: 20px;
  line-height: 28px;
}
.item-flexbox {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.item-flexbox .item {
  flex: 1 1 0;
  position: relative;
  padding: 15px 16px;
  border-radius: 12px;
  box-shadow: 0 3px 5px 0 rgba(217, 223, 235, 0.31);
}
.item-flexbox .couponbox01 strong,
.item-flexbox .couponbox02 strong {
  display: block;
  color: #b48e5a;
  font-size: 17px;
  line-height: 21px;
  font-weight: bold;
}
.item-flexbox .couponbox01 span,
.item-flexbox .couponbox02 span {
  color: #1e1b1b;
  font-size: 10px;
  line-height: 13px;
  font-weight: bold;
}
.item-flexbox .item.couponbox01,
.item-flexbox .item.couponbox02 {
  background: #fff;
}
.item-flexbox .item.couponbox01::after,
.item-flexbox .item.couponbox02::after {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.item-flexbox .item.couponbox01::after {
  background: url("/images/vip/images/common/ico_banner_coupon01.png") no-repeat center center / 48px;
}
.item-flexbox .item.couponbox02::after {
  background: url("/images/vip/images/common/ico_banner_coupon02.png") no-repeat center center / 48px;
}
.item-flexbox .item.vip-contents-box01,
.item-flexbox .item.vip-contents-box02 {
  background: #1e1b1b;
  min-height: 100px;
  box-sizing: border-box;
}
.item-flexbox .item.vip-contents-box01 span,
.item-flexbox .item.vip-contents-box02 span {
  color: #e5ba96;
  font-size: 15px;
  line-height: 20px;
}
.item-flexbox .item.vip-contents-box01::after,
.item-flexbox .item.vip-contents-box02::after {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  position: absolute;
  right: 12px;
  bottom: 12px;
}
.item-flexbox .item.vip-contents-box01::after {
  background: url("/images/vip/images/common/ico_banner_contents01.png") no-repeat center center / 64px;
}
.item-flexbox .item.vip-contents-box02::after {
  background: url("/images/vip/images/common/ico_banner_contents02.png") no-repeat center center / 64px;
}
.vip-banner-card {
  margin-top: 32px;
  padding: 32px 0 24px;
  background: url("/images/vip/images/common/bg_vip_cardbox.png") no-repeat center center / cover;
  text-align: center;
  border-radius: 12px;
}
.vip-banner-card strong {
  display: block;
  font-size: 20px;
  line-height: 25px;
  background: conic-gradient(#fff 25%, #d7be9b 42%, #fff) repeat-y center top / auto 25px;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.vip-banner-card .card-img {
  position: relative;
  display: block;
  margin-top: 25px;
  padding-bottom: 24px;
  background: url("/images/vip/images/common/bg_card_shadow.png") no-repeat 60% 95% / 245px auto;
}
.vip-banner-card .card-img img {
  position: relative;
  width: 180px;
}
.vip-banner-card .card-img::after {
  content: "";
  display: block;
  width: 245px;
  height: 37px;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-90px);
}
.vip-banner-card p {
  color: #fff;
  font-size: 13px;
  line-height: 18px;
}
.vip-banner-card .aco-box {
  margin-top: 8px;
}
.vip-banner-card .aco-btn button {
  position: relative;
  padding-right: 18px;
  color: #dcb99b;
  text-decoration: underline;
  font-size: 13px;
  line-height: 18px;
}
.vip-banner-card .aco-btn button::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  position: absolute;
  right: 0;
  top: 0;
  background: url("/images/vip/images/common/ico_aco_btn.png") no-repeat center center / 12px auto;
}
.vip-banner-card .aco-btn.active button::after {
  top: 6px;
  transform: rotate(180deg);
}
.vip-banner-card .aco-cont {
  display: none;
  padding: 0 42px;
}
.vip-banner-card .aco-cont ul {
  margin-top: 8px;
  padding: 12px 0;
}
.vip-banner-card .aco-cont ul li {
  display: flex;
  margin-top: 8px;
}
.vip-banner-card .aco-cont ul li:first-child {
  margin-top: 0;
}
.vip-banner-card .aco-cont ul li span {
  flex: 0 0 auto;
  width: 24px;
}
.vip-banner-card .aco-cont ul li span img {
  width: 100%;
}
.vip-banner-card .aco-cont ul li p {
  margin-left: 8px;
  font-size: 13px;
  line-height: 24px;
  text-align: left;
}
.vip-banner-card .card-link {
  margin-top: 16px;
  font-size: 0;
}
.vip-banner-card .card-link a {
  display: inline-block;
  width: 128px;
  margin: 8px 4px 0;
  background: #b4825a;
  color: #fff;
  font-size: 15px;
  line-height: 40px;
  border-radius: 6px;
  text-align: center;
}
.vip-banner-card .card-benefit-box {
  /* margin-top:8px; */
}
.vip-banner-card .card-benefit-box ul li {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.vip-banner-card .card-benefit-box ul li .txt-benefit-left {
  flex: 1 1 0;
  width: 40%;
  color: #fff;
  font-size: 13px;
  line-height: 23px;
  text-align: right;
}
.vip-banner-card .card-benefit-box ul li .txt-benefit-right {
  flex: 1 1 0;
  width: 60%;
  color: #fff;
  font-size: 15px;
  line-height: 23px;
  text-align: left;
}
.vip-banner-card .card-benefit-box ul li.txt-big-type .txt-benefit-left {
  color: #cdb99b;
  font-size: 17px;
  line-height: 29px;
}
.vip-banner-card .card-benefit-box ul li.txt-big-type .txt-benefit-right em {
  padding: 0 8px;
  background: rgba(164, 141, 111, 0.1);
  color: #b48e5a;
  font-size: 17px;
  line-height: 29px;
  font-style: normal;
  border-radius: 15px;
}
.vip-title {
  margin-top: 44px;
  color: #1e1b1b;
  font-size: 16px;
  line-height: 20px;
}
.vip-title.type-link {
  padding-right: 24px;
  background: url("/images/vip/images/common/ico_more02.png") no-repeat 100% 50% / 12px auto;
  font-size: 16px;
  line-height: 20px;
}
.vip-title a {
  display: inline-block;
  font-size: 16px;
  line-height: 20px;
}
.vip-title a .link-count-numb {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  line-height: 20px;
  color: #fff;
  padding: 0 8px;
  border-radius: 10px;
  background-color: #1e1b1b;
  vertical-align: top;
}
.vip-img-banner {
  display: block;
  margin-top: 12px;
}
.vip-img-banner img {
  width: 100%;
  border-radius: 10px;
}
.vip-slide-banner {
  position: relative;
  border-radius: 12px;
}
.vip-slide-banner img {
  width: 100%;
}
/* .vip-slide-banner::before {
content: "";
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background: #111;
opacity: 0.4;
} */
.vip-slide-banner .slide-txt01 {
  position: absolute;
  top: 24px;
  left: 20px;
  color: #e5ba96;
  font-size: 15px;
  line-height: 20px;
  z-index: 1;
}
.vip-slide-banner .slide-txt02 {
  position: absolute;
  top: 49px;
  left: 20px;
  color: #f8f5ef;
  font-size: 20px;
  line-height: 28px;
  font-weight: bold;
  z-index: 1;
}
.vip-banner-slide {
  margin-top: 12px;
  border-radius: 12px;
  overflow: hidden;
}
.vip-user-info {
  margin: 0 -24px;
  padding: 50px 24px 0;
  background: #f4f5f7;
}
.vip-user-info .txt-user-level {
  position: relative;
  padding-top: 40px;
}
.vip-user-info .txt-user-level::after {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  top: -8px;
  right: 0;
  background: url("/images/vip/images/common/img_vip_stamp.png") no-repeat center center / 100px auto;
}
.vip-user-info .txt-user-level p {
  padding: 24px 0;
  border-top: 1px solid #1e1b1b;
  border-bottom: 1px solid #1e1b1b;
  color: #1e1b1b;
  font-size: 20px;
  line-height: 28px;
}
.vip-user-info .txt-user-level p strong {
  font-weight: 700;
}
.vip-user-info .btn-info-box {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}
.vip-user-info .btn-info-box a {
  position: relative;
  padding-right: 10px;
  color: #1e1b1b;
  font-size: 13px;
  line-height: 18px;
  border-bottom: 1px solid #1e1b1b;
}
.vip-user-info .btn-info-box a::after {
  content: ">";
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  line-height: 18px;
}
.btn-vip-shadowbox {
  display: block;
  padding: 15px 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 5px 0 rgba(217, 223, 235, 0.31);
}
.btn-vip-shadowbox::after {
  content: ">";
  display: inline-block;
  margin-left: 3px;
  vertical-align: top;
  font-size: 13px;
  line-height: 15px;
}
.btn-vip-shadowbox.vip-user-search {
  position: relative;
  padding-left: 44px;
}
.btn-vip-shadowbox.vip-user-search::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  display: block;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  background: url("/images/vip/images/common/ico_vip_search.png") no-repeat center center / 100% auto;
}
.vip-level-box {
  margin: 32px -24px 0;
  padding: 40px 24px;
  background: #1e1b1b;
}
.vip-level-box p {
  position: relative;
  color: #f8f5ef;
  font-size: 17px;
  line-height: 21px;
}
.vip-level-box p::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -12px;
  display: block;
  width: 72px;
  height: 66px;
  margin-top: -12px;
  background: url("/images/vip/images/common/img_vip_stamp02.png") no-repeat center center / 100% auto;
}
.vip-level-box table {
  margin-top: 12px;
}
.vip-level-box table th,
.vip-level-box table td {
  padding: 8px;
  color: #f8f5ef;
  font-size: 10px;
  line-height: 13px;
  text-align: center;
}
.vip-level-box table th {
  background: rgba(248, 245, 239, 0.1);
  font-weight: 500;
}
.vip-level-box table td:first-child {
  font-size: 13px;
  line-height: 18px;
}
.vip-level-box table td {
  border-bottom: 1px solid #f8f5ef;
}
.vip-level-box .card-link {
  margin-top: 24px;
  text-align: center;
}
.vip-level-box .card-link a {
  display: inline-block;
  padding: 0 24px;
  background: #b4825a;
  color: #fff;
  font-size: 15px;
  line-height: 40px;
  border-radius: 6px;
}
.fix-top-wrap ~ .contents-wrap.vip-main2024 {
  padding-top: 0;
}
.fix-top-wrap.vip-normal-type .header,
.fix-top-wrap.vip-first-type .header {
  background-color: transparent;
}
.fix-top-wrap.vip-first-type .header .header-title {
  color: #ffffff;
}
.fix-top-wrap.vip-first-type .header .header-button.type-back {
  background-image: url("/images/icon/ico-header-back_white.svg");
}
.fix-top-wrap.vip-first-type .header .header-button.type-menu {
  background-image: url("/images/icon/ico-header-menu_white.svg");
}
.fix-top-wrap.vip-first-type .header .header-button.type-close {
  background-image: url("/images/icon/ico-header-close_white.svg");
}
.fix-top-wrap.vip-first-type .header .header-button.type-home {
  background-image: url("/images/icon/ic-header-home_w.svg");
}

/* [2025-04-25 KEJ] [WPM-10749] vip 상단 이미지 5월 변경 건 신규 추가*/
.fix-top-wrap.vip-may-event-wrap .header {
  background-color: transparent;
}
.fix-top-wrap.vip-may-event-wrap .header .header-title {
  color: #000000;
}
.fix-top-wrap.vip-may-event-wrap .header .header-button.type-back {
  background-image: url("/images/icon/ico-header-back_black.svg");
}
.fix-top-wrap.vip-may-event-wrap .header .header-button.type-menu {
  background-image: url("/images/icon/ico-header-menu_black.svg");
}
.fix-top-wrap.vip-may-event-wrap .header .header-button.type-close {
  background-image: url("/images/new_renewal/ic_header_close.svg");
}
.fix-top-wrap.vip-may-event-wrap .header .header-button.type-home {
  background-image: url("/images/icon/ic-header-home_b.svg");
}
/* //[2025-04-25 KEJ] [WPM-10749] vip 상단 이미지 5월 변경 건 신규 추가*/


.vip-normal-type {
}
/* //vip 우수회원 메인 개편 */

/* vip 우수회원 등급안내 개편 (이화정) */
.vip-grade-top {
  margin: -30px -24px 0;
  padding: 50px 24px;
  background: url("/images/vip/images/common/bg_vip_top.png") no-repeat center bottom / cover;
  text-align: center;
  overflow: hidden;
}
.vip-grade-top .user-grade > p {
  font-size: 2.1rem;
  font-weight: 700;
  background: linear-gradient(to bottom, #ffffff, #d7be9b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /*text-shadow: 1px 1px 0 #000;*/
}
.vip-grade-top .grade-info-list {
  margin: 20px 0;
  padding: 20px 0;
  border-top: 1px solid #f8f5ef;
  border-bottom: 1px solid #f8f5ef;
}
.vip-grade-top .grade-info-list li {
  display: flex;
  margin-top: 5px;
  align-items: center;
  font-size: 1.3rem;
  line-height: 24px;
  height: 24px;
  color: #ffffff;
}
.vip-grade-top .grade-info-list li:first-child {
  margin-top: 0;
}
.vip-grade-top .grade-info-list li span {
  display: block;
  width: 40%;
  text-align: left;
  font-weight: 100;
}
.vip-grade-top .grade-info-list li span::before {
  content: "";
  display: inline-block;
  margin-top: -3px;
  width: 24px;
  height: 24px;
  margin-right: 5px;
  vertical-align: middle;
  /* background: #fff; */
  border-radius: 6px;
}
.vip-grade-top .grade-info-list li span.ico-level01::before {
  background: url(/images/vip/images/common/ico_vip_level01.png) no-repeat center center / 100% auto;
}
.vip-grade-top .grade-info-list li span.ico-level02::before {
  background: url(/images/vip/images/common/ico_vip_level02.png) no-repeat center center / 100% auto;
}
.vip-grade-top .grade-info-list li span.ico-level03::before {
  background: url(/images/vip/images/common/ico_vip_level03.png) no-repeat center center / 100% auto;
}
.vip-grade-top .grade-info-list li strong {
  display: block;
  width: 60%;
  text-align: right;
  font-size: 1.7rem;
  font-weight: 500;
}
.vip-grade-top .point-progress-title {
  /*margin-bottom: 40px;*/
  font-size: 12px;
  line-height: 18px;
  text-align: left;
  color: #ffffff;
  font-weight: 500;
}
.vip-grade-top .point-progress-title span {
  display: block;
  font-size: 13px;
  line-height: 18px;
  font-weight: 300;
}
.vip-grade-top .point-progress-object-bar {
  background: linear-gradient(to right, #ebd5b7 0%, #c18c44 100%);
}
.vip-grade-top .chart-bubble {
  border-color: var(--vip);
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.5);
}
.vip-grade-top .chart-bubble-text {
  color: var(--vip);
}
.vip-grade-top .point-progress {
  padding-right: 70px;
}
.vip-grade-top .point-progress-object {
  padding-right: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background-color: #fff;
}
.vip-grade-top .point-progress-gradation {
  margin-right: 0;
}
.vip-grade-top .point-progress-gradation-item {
  color: #ffffff;
  font-weight: 300;
}
.vip-grade-top .point-progress-gradation-item:last-child .point-progress-gradation-item-text {
  text-align: center;
}
.vip-grade-top .point-progress-gradation-item.vvip {
  width: 70px;
  position: absolute;
  top: 2px;
  right: 0;
  margin-right: 0;
  padding-left: 15px;
  box-sizing: border-box;
}
.vip-grade-top .point-progress-gradation-item.vvip::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  display: block;
  width: 13px;
  height: 20px;
  margin-bottom: 5px;
  background: #fff;
}
.vip-grade-top .point-progress-gradation-item.vvip::before {
  content: "";
  position: relative;
  display: block;
  width: 100%;
  height: 20px;
  margin-bottom: 5px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 1;
  background: #fff url(/images/vip/images/common/ic_vip.gif) no-repeat 20px 0;
  background-size: 20px auto;
}
.vip-grade-top .point-progress-gradation-item.vvip.active::before {
  background-color: #b48e5a;
}

.vip-grade-top .ui-buttons {
  margin-top: 20px;
}
.vip-grade-benefit {
  margin-top: 24px;
  overflow: hidden;
}
.vip-grade-benefit .accordion-list {
  margin-top: 15px;
}
.vip-grade-benefit .accordion-contents .tit {
  height: 30px;
  margin: 20px 0 10px;
  padding: 0 10px;
  background: #f5f5f5;
  color: var(--vip);
  font-size: 1.4rem;
  line-height: 30px;
}
.vip-grade-benefit .accordion-contents .tit:first-child {
  margin-top: 0;
}
.vip-grade-benefit .accordion-item .info-item.type-presa {
  font-size: 1.3rem;
  font-weight: 300;
}
.vip-grade-benefit .accordion-item .info-item.type-presa + .info-item.type-presa {
  margin-top: 5px;
}
/* //vip 우수회원 등급안내 개편 (이화정) */

/* vip 우수회원 등급안내 badge 추가 */
.ui-badge.vip-title-badge {
  margin-left: 8px;
  min-width: 25px;
  font-weight: normal;
  line-height: 19px;
}
.vip-grade-benefit .accordion-contents .tit.plus_title {
  color: var(--vip-dark);
  background-color: var(--warning-light);
}
.vip-grade-benefit .accordion-contents .tit.plus_title .ui-badge.type-plus.vip-title-badge {
  margin-top: 6.5px;
  line-height: 17px;
  color: var(--warning-light);
  background-color: #455a4b;
  font-size: 1rem;
}

/* vip 생일축하 이벤트 */
.contents-wrap.vip-birthday-cont .page-contents {
  padding: 25.833vw 6.666vw 0;
  background: url(/images/vip/images/common/bg_vip_birthday.png) no-repeat center top/ 100%;
}
.contents-wrap.vip-birthday-cont .page-contents * {
  letter-spacing: -0.3px;
}
.contents-wrap.vip-birthday-cont .page-contents .vit-birthday-title {
  display: block;
  margin-top: 3.333vw;
  color: #fff;
  font-size: 10vw;
  line-height: 12.222vw;
  text-align: center;
}
.contents-wrap.vip-birthday-cont .page-contents .vit-birthday-title span {
  color: #e7d887;
}
.contents-wrap.vip-birthday-cont .page-contents .txt-cont-birthday {
  color: #dbefe9;
  font-size: 5.555vw;
  line-height: 7.222vw;
  text-align: center;
}
.contents-wrap.vip-birthday-cont .page-contents .txt-cont-birthday02 {
  color: #fff;
  font-size: 5.555vw;
  line-height: 7.222vw;
  text-align: center;
}
.contents-wrap.vip-birthday-cont .page-contents .vit-birthday-title + .txt-cont-birthday {
  margin-top: 81.944vw;
}
.contents-wrap.vip-birthday-cont .page-contents .txt-cont-birthday + .txt-cont-birthday {
  margin-top: 6.667vw;
}
.contents-wrap.vip-birthday-cont .btns-area {
  margin-top: 10vw;
}
.contents-wrap.vip-birthday-cont .btns-area a {
  display: block;
  background: #ecdc8d;
  border-radius: 1.666vw;
  color: #010101;
  font-size: 4.444vw;
  line-height: 12.777vw;
  text-align: center;
}
.contents-wrap.vip-birthday-cont .txt-cont-birthday-guid {
  color: #afc4c6;
  font-size: 4vw;
  line-height: 5vw;
  text-align: left;
}
.contents-wrap.vip-birthday-cont .txt-cont-birthday-guid::before {
  content: "*";
  display: inline-block;
  margin-right: 0.833vw;
  vertical-align: top;
  transform: translateY(0.833vw);
}
.contents-wrap.vip-birthday-cont .txt-cont-birthday-guid a {
  display: inline-block;
  margin-top: 2vw;
  padding: 0 5.277vw;
  border: 1px solid #afc4c6;
  background: #11191b;
  font-size: 4.444vw;
  line-height: 7.777vw;
  border-radius: 1.111vw;
}
.contents-wrap.vip-birthday-cont .txt-cont-birthday-guid + .txt-cont-birthday-guid {
  margin-top: 3.333vw;
}
.contents-wrap.vip-birthday-cont .btns-area + .txt-cont-birthday-guid {
  margin-top: 6.666vw;
}
.contents-wrap.vip-birthday-cont .banner-vip-birthday {
  display: block;
  margin-top: 6.666vw;
}
.contents-wrap.vip-birthday-cont .banner-vip-birthday img {
  width: 100%;
}
.contents-wrap.vip-birthday-cont .vip-birthday-notice {
  margin: 10vw -6.666vw 0;
  padding: 7.222vw 6.666vw 15.833vw;
  background: #101010;
}
.contents-wrap.vip-birthday-cont .vip-birthday-notice strong {
  display: block;
  color: #c3c3c3;
  font-size: 4.444vw;
  line-height: 5.555vw;
}
.contents-wrap.vip-birthday-cont .vip-birthday-notice strong::before {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 5vw;
  height: 5vw;
  margin-right: 1.111vw;
  margin-top: 0.277vw;
  background: url(/images/vip/images/common/ico_notice01.png) no-repeat center center / 100%;
}
.contents-wrap.vip-birthday-cont .vip-birthday-notice ul li {
  /* position: relative;
padding-left: 3.333vw;
margin-top: 4.444vw; */
  color: #c3c3c3;
  /* font-size: 4.444vw;
line-height: 5.555vw; */
}
.contents-wrap.vip-birthday-cont .vip-birthday-notice ul li.type-presa {
  /* padding-left:6vw; */
  font-weight: 700;
  color: #fff;
}
.contents-wrap.vip-birthday-cont .vip-birthday-notice ul li::before {
  /* content: "";
display: block;
width: 1.111vw;
height: 1.111vw;
position: absolute;
left: 0.555vw;
top: 2.222vw;
background: #c3c3c3;
border-radius: 100%; */
}
.contents-wrap.vip-birthday-cont .vip-birthday-notice ul li.info-item::before {
  /* top:2.222vw; */
}
.contents-wrap.vip-birthday-cont .vip-birthday-notice ul li.type-presa::before {
  /* top:0; */
}
.vip-birthday-notice .use-notice-opener {
  background-image: url(../images/icon/ic-notice.svg);
}

.vip-birthday-letter-cont .page-contents {
  padding: 0;
}
.vip-birthday-letter-cont .letter-cont-top {
  position: relative;
  text-align: center;
  background: url(/images/vip/images/common/bg_letter_cont_top.png) no-repeat 0 0 / cover;
  box-sizing: border-box;
  height: 100vh;
}
.vip-birthday-letter-cont .letter-cont-top .top-fullpage {
  position: relative;
  padding-bottom: 33px;
  top: 50%;
  transform: translateY(-55%);
  box-sizing: border-box;
}
.vip-birthday-letter-cont .letter-cont-top .txt-cont-birthday-letter {
  margin-top: 14px;
  color: #000;
  font-size: 18px;
  line-height: 20px;
}
.vip-birthday-letter-cont .letter-cont-top .img-letter-cont-top-txt {
  width: 220px;
}
.vip-birthday-letter-cont .letter-cont-top .vip-birthday-letter-title {
  display: block;
  margin-top: 14px;
  color: #000;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.5px;
}
.vip-birthday-letter-cont .letter-cont-top .vip-birthday-letter-title span {
  font-weight: 700;
  color: #000;
}
.vip-birthday-letter-cont .letter-cont-top .img-letter-cont-top-bnr {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}
.vip-birthday-letter-cont .letter-cont-top .img-letter-cont-top-bnr img {
  width: 100%;
}
.vip-birthday-letter-cont .letter-cont-top .txt-cont-birthday-letter02 {
  position: absolute;
  left: 50%;
  top: 93%;
  margin-left: -25px;
  width: 48.888%;
  text-align: left;
}
.vip-birthday-letter-cont .letter-cont-top .txt-cont-birthday-letter02 img {
  width: 100%;
  max-width: 176px;
}
.vip-birthday-letter-cont .letter-cont-btm {
  padding-top: 95px;
  background: #f4d0a5;
  text-align: center;
}
.vip-birthday-letter-cont .letter-cont-btm .txt-letter-cont-btm {
  color: #000;
  font-size: 20px;
  line-height: 28px;
  text-align: center;
}
.vip-birthday-letter-cont .letter-cont-btm .txt-letter-cont-btm strong {
  color: #000;
  font-weight: 700;
}
.vip-birthday-letter-cont .letter-cont-btm .btn-wraps-center {
  margin: 24px 24px 0;
}
.vip-birthday-letter-cont .letter-cont-btm .btn-wraps-center a {
  display: block;
  background: #262626;
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  line-height: 48px;
  text-align: center;
}
.vip-birthday-letter-cont .letter-cont-btm .btn-link-txt {
  position: relative;
  display: inline-block;
  margin: 24px auto 0;
  color: #3d2820;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
}
.vip-birthday-letter-cont .letter-cont-btm .btn-link-txt::before {
  content: "*";
  display: inline-block;
  margin-top: 5px;
  margin-right: 5px;
  font-size: 16px;
  line-height: 1;
  vertical-align: top;
}
.vip-birthday-letter-cont .letter-cont-btm .btn-link-txt::after {
  content: "";
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  height: 1px;
  background: #3d2820;
}
.vip-birthday-letter-cont .letter-cont-btm .bnr-link {
  display: block;
  margin: 48px 24px 0;
}
.vip-birthday-letter-cont .letter-cont-btm .bnr-link img {
  width: 100%;
}
.vip-birthday-letter-cont .letter-cont-btm .letter-cont-btm-notice {
  margin-top: 50px;
  padding: 24px 25px 54px;
  background: #edc798;
  text-align: left;
}
.vip-birthday-letter-cont .letter-cont-btm .letter-cont-btm-notice strong {
  display: block;
  color: #5d5144;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
}
.vip-birthday-letter-cont .letter-cont-btm .letter-cont-btm-notice strong::before {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 18px;
  height: 18px;
  margin-right: 4px;
  margin-top: 1px;
  background: url(/images/vip/images/common/ico_notice02.png) no-repeat center center / 100%;
}
.vip-birthday-letter-cont .letter-cont-btm .letter-cont-btm-notice ul li {
  /* position: relative;
margin-top: 12px;
padding-left: 9px;
color: #5d5144;
font-size: 16px;
line-height: 20px; */
}
.vip-birthday-letter-cont .letter-cont-btm .letter-cont-btm-notice ul li.type-presa {
  font-weight: 700;
}
.vip-birthday-letter-cont .letter-cont-btm .letter-cont-btm-notice ul li::before {
  /* content: "";
position: absolute;
left: 0;
top: 7px;
display: block;
width: 4px;
height: 4px;
background: #5d5144;
border-radius: 100%; */
}

.layer-wrap.vip-letter-popup .ui-layer__body-inner {
  padding: 36px 0 20px;
  max-width: 320px;
  width: auto;
  margin: 0 24px;
  background: #f5f0ea;
  border-radius: 12px;
}
.layer-wrap.vip-letter-popup .ui-layer {
  background: transparent;
}
.layer-wrap.vip-letter-popup .ui-layer__body-inner .txt-letter-popup01 {
  font-size: 18px;
  line-height: 22px;
  text-align: center;
}
.layer-wrap.vip-letter-popup .ui-layer__body-inner .txt-letter-popup01 img {
  width: 45px; /* 25.03.10 before:81px, after:45px  - sayho */
  vertical-align: top;
  margin-top: 2px;
}
.layer-wrap.vip-letter-popup .ui-layer__body-inner .txt-letter-popup02 {
  width: 100%;
  margin-top: 2px;
  text-align: center;
}
.layer-wrap.vip-letter-popup .ui-layer__body-inner .txt-letter-popup02 img {
  max-width: 260px;
  width: 100%;
}
.layer-wrap.vip-letter-popup .ui-layer__body-inner .img-vip-birthday-cake {
  width: 100%;
}
.layer-wrap.vip-letter-popup .ui-layer__body-inner .ui-buttons {
  padding: 20px 24px 0;
}
.layer-wrap.vip-letter-popup .ui-layer__body-inner::before {
  content: "";
  position: absolute;
  right: 35px;
  top: -40px;
  display: block;
  width: 67px;
  height: 89px;
  background: url(/images/vip/images/common/img_vip_popup_obj01.png) no-repeat center center / 100% auto;
}
.layer-wrap.vip-letter-popup .ui-layer__body-inner::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 53%;
  display: block;
  width: 55px;
  height: 58px;
  background: url(/images/vip/images/common/img_vip_popup_obj02.png) no-repeat center center / 100% auto;
}

.layer-wrap.vip-letter-popup02 .ui-layer {
  border-radius: 12px;
}
.layer-wrap.vip-letter-popup02 .ui-layer__body-inner {
  padding: 36px 0 20px;
  width: 320px;
  border-radius: 12px;
}
.layer-wrap.vip-letter-popup02 .popup-vip-item-box {
  max-width: 320px;
  text-align: center;
}
.layer-wrap.vip-letter-popup02 .img-item {
  display: block;
}
.layer-wrap.vip-letter-popup02 .img-item img {
  width: 173px;
}
.layer-wrap.vip-letter-popup02 .popup-vip-item-box .item-desc {
  margin-top: 20px;
  color: #000;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
}
.layer-wrap.vip-letter-popup02 .popup-vip-item-box .item-desc strong {
  display: block;
  color: #000;
  font-size: 22px;
  line-height: 26px;
}
.form-group.group-flex-box {
  display: flex;
  gap: 16px;
}
.form-group.group-flex-box .ui-select-block {
  flex: 1 1 auto;
}
/* //vip 생일축하 이벤트 */

/* vip 우수회원 출석체크 (이화정) */
.vip-attendance {
  box-sizing: border-box;
  width: 100%;
  background: #f4f5f7;
}
.vip-attendance .page-section-title {
  padding: 30px 24px;
  background: url("/images/vip/images/common/bg_vip_top.png") no-repeat center bottom / cover;
}
.vip-attendance .page-section-title .title {
  font-size: 2.1rem;
  font-weight: 700;
  background: linear-gradient(to bottom, #ffffff, #d7be9b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}
.vip-attendance .title .name {
  font-weight: 500;
}
.vip-attendance-calendar {
  position: relative;
  overflow: hidden;
  padding: 24px;
}
.vip-attendance-calendar .txt-main {
  margin-bottom: 12px;
  color: #111;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2.4rem;
  text-align: center;
  font-weight: bold;
}
.vip-attendance-calendar .txt-main span {
  font-size: 1.3rem;
  line-height: 1.8rem;
  font-weight: 500;
}
.vip-attendance-calendar .txt-main + .info-list {
  margin: 10px 0;
}
.vip-attendance-calendar .calendar-wrap {
  padding: 24px 14px 10px;
  background: #ffffff;
  border-radius: 24px;
}
.vip-attendance-calendar .calendar-wrap .calendar-title {
  display: flex;
  padding: 0 5px;
  margin-bottom: 15px;
  align-items: center;
  justify-content: space-between;
}
.vip-attendance-calendar .calendar-wrap .calendar-title .month {
  font-size: 2.4rem;
  font-weight: 700;
}
.vip-attendance-calendar .calendar-wrap .calendar-title .attendance-days {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 36px;
  line-height: 36px;
  padding: 0 8px 0 4px;
  background: #f5f5f5;
  border-radius: 18px;
  font-size: 1.4rem;
}
.vip-attendance-calendar .calendar-wrap .calendar-title .attendance-days strong {
  display: inline-block;
  min-width: 30px;
  text-align: center;
  height: 28px;
  line-height: 28px;
  padding: 0 5px;
  margin-right: 5px;
  border-radius: 14px;
  background: rgba(164, 141, 111, 0.1);
  font-size: 1.5rem;
  font-weight: 500;
  color: #b48e5a;
}
.vip-attendance .calendar-table th {
  width: calc(100% / 7);
  padding-bottom: 5px;
  font-weight: 400;
  font-size: 1.6rem;
  text-align: center;
}
.vip-attendance .calendar-table td {
  padding: 5px 0;
  font-size: 1.6rem;
  text-align: center;
}
.vip-attendance .calendar-table td .day {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  line-height: 32px;
  background: #f4f5f7;
}
.vip-attendance .calendar-table td .day.save {
  color: #ffffff;
  background: var(--vip);
}
.vip-attendance .ui-buttons.type-full {
  margin-top: 15px;
}
.img-box-full {
  width: 100%;
}
.img-box-full img {
  width: 100%;
}
.vip-attendance-calendar .info-item.type-presa {
  font-weight: 700;
}
/* //vip 우수회원 출석체크 (이화정) */

/* 2024.01.29 버튼 텍스트 gradient 추가 */
.txt-gradient-type01 {
  background: linear-gradient(to right, #00a49b 0%, #8f6cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-size: 200% auto;
  font-size: 1.5rem;
  font-weight: 600;
  animation: anitxt 1s linear infinite alternate;
}
@keyframes anitxt {
  0% {
      background-position: 0 0;
  }
  100% {
      background-position: 100% 0;
  }
}
/* //2024.01.29 버튼 텍스트 gradient 추가 */

/* 2024.02.01 보험진단 관련 */
.pop-txt-ins {
  padding-top: 106px;
  text-align: center;
  background: url(/images/contents/ico_popup_ins.png) no-repeat center 0 / auto 92px;
}
.pop-txt-ins .txt-type01 {
  margin-bottom: 11px;
  color: #111;
  font-size: 18px;
  line-height: 22px;
  font-weight: bold;
}
.pop-txt-ins p {
  margin-top: 6px;
}
.pop-txt-ins p span {
  display: inline-block;
  padding: 0 18px;
  border-radius: 17px;
  background: #f4f6f8;
  color: #888;
  font-size: 14px;
  line-height: 34px;
}
.pop-txt-ins .img-pop-txt {
  width: 186px;
}
.ins-tooltip {
  position: relative;
  padding-left: 10px;
  font-size: 16px;
  line-height: 22px;
}
.ins-tooltip::before {
  content: "*";
  display: block;
  position: absolute;
  left: 0;
  top: 4px;
}
.ins-tooltip .btn-tooltip {
  font-size: 0;
  line-height: 0;
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 3px 0 0 4px;
  background: url(/images/icon/ic-notice.svg) no-repeat 0 0 / 100% auto;
  vertical-align: top;
}
.bnr-pop-ins {
  display: block;
  margin-top: 20px;
}
.bnr-pop-ins img {
  width: 100%;
  border-radius: 10px;
}

.pop-health-info-cont {
  max-height: 395px;
  padding-bottom: 0;
  padding-top: 10px;
  overflow-y: auto;
}
.pop-health-info-cont h3 {
  font-size: 15px;
  color: #000;
  line-height: 19px;
  font-weight: 700;
  margin-bottom: 10px;
}
.pop-health-info-cont h4 {
  font-size: 13px;
  color: #111;
  line-height: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
.pop-health-info-cont .txt {
  font-size: 13px;
  color: #666;
  line-height: 19px;
  word-break: keep-all;
}
.pop-health-info-cont .txt + .info-desc,
.pop-health-info-cont .txt + h4,
.pop-health-info-cont .info-desc + h3 {
  margin-top: 30px;
}
.pop-health-info-cont .info-desc li {
  position: relative;
  line-height: 18px;
  font-size: 12px;
  color: #888;
  padding-left: 15px;
  font-weight: 300;
  word-break: keep-all;
}
.pop-health-info-cont .info-desc li + li {
  margin-top: 6px;
}
.pop-health-info-cont .info-desc li::before {
  content: "※";
  position: absolute;
  left: 0;
}
.pop-health-info-cont .health-state {
  padding-bottom: 14px;
}
.pop-health-info-cont .health-state dl {
  display: flex;
  align-items: center;
  height: 56px;
  border-radius: 10px;
}
.pop-health-info-cont .health-state dl + dl {
  margin-top: 8px;
}
.pop-health-info-cont .health-state dl.good {
  border: 1px dotted #4cb4af;
}
.pop-health-info-cont .health-state dl.good dt {
  color: #01a6a0;
}
.pop-health-info-cont .health-state dl.normal {
  border: 1px dotted #a1a1a1;
}
.pop-health-info-cont .health-state dl.normal dt {
  color: #111;
}
.pop-health-info-cont .health-state dl.lack {
  border: 1px dotted #d27b7b;
}
.pop-health-info-cont .health-state dl.lack dt {
  color: #ce2d2d;
}
.pop-health-info-cont .health-state dl dt {
  width: 45%;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
}
.pop-health-info-cont .health-state dl dd {
  font-size: 13px;
  line-height: 16px;
  color: #666;
}
/* //2024.02.01 보험진단 관련 */

/* 2024.02.05 하나페이 쇼핑쿠폰 배너 추가 */
.bnr-coupang-link {
  display: block;
  margin-top: 24px;
}
.bnr-coupang-link img {
  width: 100%;
  border-radius: 10px;
}

/* 2024.01.23 금융사기예방하기 - 심플모드전용 */
.cotents-simple-guide {
  margin: -30px -24px -35px;
  padding: 54px 24px 35px;
  background: #f4f6f8;
}
.cotents-simple-guide .cotents-simple-guide-box + .cotents-simple-guide-box {
  margin-top: 96px;
}
.cotents-simple-guide .guide-title {
  color: #000;
  font-size: 28px;
  line-height: 34px;
  font-weight: bold;
}
.cotents-simple-guide .guide-title + * {
  margin-top: 40px;
}
.cotents-simple-guide .guide-title.ico-warning {
  position: relative;
  padding-bottom: 18px;
}
.cotents-simple-guide .guide-title.ico-warning::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -35px;
  display: block;
  width: 72px;
  height: 72px;
  background: url("/images/mypage_new_images/ico_warning.png") no-repeat 0 0 / 100%;
}
.cotents-simple-guide .simple-guide-list li a {
  position: relative;
  display: flex;
  margin-top: 16px;
  padding: 16px 20px 16px 16px;
  background: #fff;
  color: #000;
  font-size: 16px;
  line-height: 24px;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
}
.cotents-simple-guide .simple-guide-list li a::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
}
.cotents-simple-guide .simple-guide-list li a.icon01::before {
  background: url("/images/mypage_new_images/ico_simple_guidelist01.png") no-repeat 0 0 / 100%;
}
.cotents-simple-guide .simple-guide-list li a.icon02::before {
  background: url("/images/mypage_new_images/ico_simple_guidelist02.png") no-repeat 0 0 / 100%;
}
.cotents-simple-guide .simple-guide-list li a.icon03::before {
  background: url("/images/mypage_new_images/ico_simple_guidelist03.png") no-repeat 0 0 / 100%;
}
.cotents-simple-guide .simple-guide-list li a::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  display: inline-block;
  width: 9px;
  height: 20px;
  margin-top: -10px;
  background: url("/images/mypage_new_images/ico_simple_link_arrow.png") no-repeat 0 center / 100% auto;
  vertical-align: top;
}
.cotents-simple-guide .btm-link-box {
  margin-top: 24px;
}
.cotents-simple-guide .btm-link-box a {
  color: #666;
  font-size: 16px;
  line-height: 20px;
}
.cotents-simple-guide .btm-link-box a::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 20px;
  margin-left: 3px;
  background: url("/images/mypage_new_images/ico_simple_link_arrow.png") no-repeat 0 center / 100% auto;
  vertical-align: top;
}
.cotents-simple-guide .simple-guide-list02 > li {
  margin-top: 24px;
  padding: 32px 20px;
  background: #fff;
  border-radius: 10px;
}
.cotents-simple-guide .simple-guide-list02 > li .list-tit {
  display: flex;
  font-size: 21px;
  line-height: 28px;
  font-weight: bold;
  align-items: flex-start;
  gap: 6px;
}
.cotents-simple-guide .simple-guide-list02 > li .list-tit em {
  display: inline-block;
  width: 24px;
  margin-top: 1px;
  background: #000;
  border-radius: 100%;
  color: #fff;
  font-size: 14px;
  line-height: 24px;
  font-style: normal;
  flex: 0 0 auto;
  text-align: center;
}
.cotents-simple-guide .simple-guide-list02 > li .list-tit + p {
  margin-top: 12px;
}
.cotents-simple-guide .simple-guide-list02 > li p {
  margin-top: 8px;
  color: #666;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.7px;
}
.cotents-simple-guide .guide-inner-list {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.cotents-simple-guide .guide-inner-list li {
  flex: 1 1 0;
  text-align: center;
}
.cotents-simple-guide .guide-inner-list li a {
  display: block;
  padding: 16px 0;
  background: #f4f6f8;
  border-radius: 10px;
  font-size: 18px;
  line-height: 24px;
}
.cotents-simple-guide .guide-inner-list li a::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto 8px;
}
.cotents-simple-guide .guide-inner-list li.ico-inner-list01 a::before {
  background: url("/images/mypage_new_images/ico_simple_innerlist01.png") no-repeat 0 center / 100% auto;
}
.cotents-simple-guide .guide-inner-list li.ico-inner-list02 a::before {
  background: url("/images/mypage_new_images/ico_simple_innerlist02.png") no-repeat 0 center / 100% auto;
}
.cotents-simple-guide .guide-inner-list li a span {
  font-size: 21px;
  line-height: 28px;
  font-weight: bold;
}
.cotents-simple-guide .simple-guide-list02 > li .ui-basic-button {
  margin-top: 24px;
}
.cotents-simple-guide .contents-share-box {
  margin-top: 36px;
  padding-bottom: 80px;
  text-align: center;
}
.cotents-simple-guide .contents-share-box a {
  display: flex;
  height: 65px;
  padding: 0 16px;
  border-radius: 8px;
  background-color: #fff;
  align-items: center;
  color: var(--primary);
  font-size: 18px;
  line-height: 32px;
  font-weight: bold;
  box-shadow: 0 3px 5px 0 rgba(217, 223, 235, 0.3);
  justify-content: center;
}
.cotents-simple-guide .contents-share-box a span::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  background: url("/images/mypage_new_images/ico_simple_share.png") no-repeat center center / 100% auto;
  vertical-align: top;
}
/* //2024.01.23 금융사기예방하기 - 심플모드전용 */

/* ============ 24.02.05 해택탭 쇼핑 영역 css 추가 ============ */
.renew-type-benefit-home .benefit-shopping {
  position: relative;
  margin-top: 4.5rem;
  margin-bottom: 4rem;
  z-index: 0;
}
.renew-type-benefit-home .benefit-shopping * {
  box-sizing: border-box;
}
.benefit-shopping.is-skeleton .mypage-section-load {
  display: none;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section-head {
  margin-bottom: 1.5rem;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section-head .mypage-section-title-link02 {
  padding-right: 0;
  background: none;
}
.renew-type-benefit-home .benefit-shopping .benefit-shopping-tabs {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  overflow-x: auto;
  margin-bottom: 1.5rem;
  margin-left: -2.4rem;
  margin-right: -2.4rem;
  padding-left: 2.4rem;
  padding-right: 2.4rem;
  position: relative;
}

.renew-type-benefit-home .benefit-shopping .benefit-shopping-tabs::-webkit-scrollbar {
  display: none;
}
.renew-type-benefit-home .benefit-shopping .benefit-shopping-tabs .benefit-shopping-tab {
  color: #888888;
  font-size: 1.4rem;
  font-weight: normal;
  flex: 0 0 auto;
}
.renew-type-benefit-home .benefit-shopping .benefit-shopping-tabs .benefit-shopping-tab.active {
  color: #ffffff;
}
.renew-type-benefit-home .benefit-shopping .benefit-shopping-tabs .benefit-shopping-tab a {
  height: 3rem;
  padding: 0 1.2rem;
  display: flex;
  align-items: center;
  border-radius: 1.5rem;
  background-color: #ffffff;
  border: 1px solid #888888;
}
.renew-type-benefit-home .benefit-shopping .benefit-shopping-tabs .benefit-shopping-tab.active a {
  background-color: #111111;
  border-color: #111111;
}

.renew-type-benefit-home .benefit-shopping .benefit-shopping-slide {
  margin-left: -2.4rem;
  margin-right: -2.4rem;
  padding-left: 2.4rem;
  padding-right: 2.4rem;
}
.renew-type-benefit-home .benefit-shopping .benefit-shopping-slide-list {
  /* padding: 0 24px; */
}
.renew-type-benefit-home .benefit-shopping .benefit-shopping-slide-item {
  position: relative;
}
.renew-type-benefit-home .benefit-shopping .benefit-shopping-slide-item::after {
  position: absolute;
  z-index: -1;
  opacity: 0;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: 0.5s background 0.5s opacity;
  border-radius: 1rem;
}
.benefit-shopping .benefit-shopping-slide-item:not(.swiper-slide-active):not(.swiper-slide-visible)::after {
  z-index: 2;
  background-color: #e8e8e8;
  opacity: 1;
}
.renew-type-benefit-home .benefit-shopping .benefit-shopping-slide-item + .benefit-shopping-slide-item {
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section {
  padding: 2.6rem 2rem 2rem 2rem;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section .new-mypage-section-head {
  position: relative;
  padding-right: calc((100vw * 80 / 360) + 1.2rem);
  margin-bottom: 2.5rem;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section .mypage-section-title {
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section .mypage-section-title-link02 {
  font-size: 1.6rem;
  line-height: 2.2rem;
  background: none;
  padding-right: 0;
  align-items: flex-end;
}
@media (max-width: 360px) {
  .renew-type-benefit-home .benefit-shopping .new-mypage-section .new-mypage-section-head {
      padding-right: calc((100vw * 60 / 360) + 1.2rem);
  }
  .renew-type-benefit-home .benefit-shopping .new-mypage-section .mypage-section-title-link02 {
      font-size: 1.5rem;
  }
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section .mypage-section-title-img {
  width: calc(100vw * 80 / 360);
  height: calc(100vw * 80 / 360);
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  right: 0;
  max-width: 8rem;
  max-height: 8rem;
}
@media (max-width: 360px) {
  .renew-type-benefit-home .benefit-shopping .new-mypage-section .mypage-section-title-img {
      width: calc(100vw * 60 / 360);
      height: calc(100vw * 60 / 360);
  }
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section .mypage-section-title-img img {
  object-fit: contain;
  object-position: center;
  width: 100%;
  height: 100%;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section .shopping-list {
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  padding: 0 2rem;
  margin: 0 -2rem;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section .shopping-list::-webkit-scrollbar {
  display: none;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section .shopping-list .shopping-list-item {
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section .shopping-list .shopping-list-item a {
  border-radius: 1rem;
  background-color: #ffffff;
  padding: 0.8rem 0.8rem 1.6rem 0.8rem;
  display: block;
  height: 17.5rem;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section .shopping-list .img {
  width: calc(11rem + 1.6rem);
  height: calc(8.4rem + 0.8rem);
  padding: 0.8rem 0.8rem 0 0.8rem;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section .shopping-list .img img {
  object-fit: contain;
  object-position: center;
  width: 100%;
  height: 100%;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section .shopping-list .text {
  padding: 1.5rem 1.5rem 1.5rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section .shopping-list .shopping-list-item a {
  padding: 0;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section .shopping-list .shopping-list-item-shop {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--gray-80);
  letter-spacing: -0.04rem;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section .shopping-list .shopping-list-item-title {
  color: var(--basic);
  font-size: 1.43rem;
  font-weight: bold;
  line-height: 1.7rem;
  letter-spacing: -0.05rem;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
}
.benefit-shopping .new-mypage-section .shopping-list .shopping-list-item-discount {
  font-size: 1.3rem;
  font-weight: bold;
  color: #f14a76;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.coupang {
  /* background-color: #d1ecff; */
  background-color: #e9ebff;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live {
  background-color: #ffe3e3;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box {
  height: 17.5rem;
  border-radius: 1rem;
  background-color: #ffffff;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box h5 {
  color: #ef5758;
  font-weight: bold;
}

.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box .coupon-tooltip-box {
  position: absolute;
  top: 100%;
  max-width: 24rem;
  max-height: 4.3rem;
  left: 50%;
  transform: translateX(-50%) scale(0);
  transform-origin: center top;
  width: calc(100vw * 240 / 360);
  height: calc(100vw * 43 / 360);
}
.benefit-shopping .new-mypage-section.live.swiper-slide-active .box .coupon-tooltip-box {
  animation: shoppingCouponToolTipAniOn 0.5s 0.5s ease-in-out forwards;
}
@keyframes shoppingCouponToolTipAniOn {
  0% {
      transform: translateX(-50%) scale(0);
  }
  80% {
      transform: translateX(-50%) scale(1.15);
  }
  100% {
      transform: translateX(-50%) scale(1);
  }
}

.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box .coupon-tooltip-box img {
  object-fit: contain;
  object-position: center;
  width: 100%;
  height: 100%;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.off-air {
  text-align: center;
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  justify-content: center;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.off-air h5 {
  font-size: 1.5rem;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.off-air .timer {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--basic);
  font-weight: bold;
  justify-content: center;
  font-size: 3.4rem;
  line-height: 4.3rem;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .live-goods {
  font-size: 1.3rem;
  font-weight: 500;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
@media (max-width: 360px) {
  .renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.off-air .timer {
      font-size: 3rem;
  }
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.on-air {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  justify-content: center;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.on-air a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.on-air .box-img {
  min-width: calc(100vw * 88 / 360);
  width: calc(100vw * 88 / 360);
  height: calc(100vw * 110 / 360);
  border-radius: 1rem;
  overflow: hidden;
  max-width: 8.8rem;
  max-height: 11rem;
}
@media (max-width: 360px) {
  .renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.on-air .box-img {
      min-width: calc(100vw * 66 / 360);
      width: calc(100vw * 66 / 360);
      height: calc(100vw * 82.5 / 360);
  }
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.on-air .box-img img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.on-air .box-text {
  padding: 0.7rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.on-air .box-text .tags {
  display: flex;
  gap: 0.4rem;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.on-air .box-text .tags .tag {
  color: #ef5758;
  font-size: 1.1rem;
  font-weight: bold;
  border-radius: 0.2rem;
  border: 0.2rem solid #ef5758;
  display: flex;
  align-items: center;
  padding: 0 0.6rem;
  height: 2rem;
  line-height: 1.4rem;
}
.benefit-shopping .new-mypage-section.live .box.on-air .box-text .tags .tag.on-air span {
  position: relative;
}
.benefit-shopping .new-mypage-section.live .box.on-air .box-text .tags .tag.on-air span::after {
  content: "";
  width: 0.2rem;
  height: 0.2rem;
  background-color: #ef5758;
  border-radius: 50%;
  top: 0;
  right: 0;
  transform: translateX(100%);
  position: absolute;
  display: block;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.on-air .box-text h5 {
  font-size: 1.3rem;
  line-height: calc(14 / 11);
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.on-air .box-text .title {
  font-size: 1.5rem;
  line-height: calc(18 / 13);
  font-weight: bold;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 360px) {
  .renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.on-air .box-text h5 {
      font-size: 1.3rem;
  }
  .renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.on-air .box-text .title {
      font-size: 1.2rem;
  }
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.on-air .coupon-tooltip-box {
  margin-top: -2.3rem;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.on-air .remaining-timer {
  display: flex;
  gap: 0.25em;
  font-size: 1.5rem;
  line-height: calc(1.8 / 1.5);
  align-items: center;
  font-weight: 500;
}
@media (max-width: 360px) {
  .renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.on-air .remaining-timer {
      font-size: 1.3rem;
      gap: 0.125rem;
  }
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.on-air .remaining-timer i {
  display: block;
  /* width:20px; */
  height: 20px;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.on-air .remaining-timer i img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.renew-type-benefit-home .benefit-shopping .new-mypage-section.gifticon {
  background-color: #f8eee5;
}

/* 마이 메인 하단 혜택이 있는 쇼핑 스켈레톤 */
.benefit-shopping.is-skeleton .mypage-section-skeleton {
  display: block;
}
.renew-type-benefit-home .benefit-shopping .mypage-section-skeleton .benefit-shopping-tabs {
  background-color: #f4f6fa;
  height: 3rem;
  width: 19rem;
  margin-bottom: 1.5rem;
}
.renew-type-benefit-home .benefit-shopping .mypage-section-skeleton .benefit-shopping-slide {
  overflow: hidden;
}
.renew-type-benefit-home .benefit-shopping .mypage-section-skeleton .benefit-shopping-slide-list {
}
.renew-type-benefit-home .benefit-shopping .mypage-section-skeleton .benefit-shopping-slide-item {
  position: relative;
  background-color: #f4f6fa;
}
.renew-type-benefit-home .benefit-shopping .mypage-section-skeleton .benefit-shopping-slide-item::after {
  content: none;
}
.renew-type-benefit-home .benefit-shopping .mypage-section-skeleton .benefit-shopping-slide-item::before,
.renew-type-benefit-home .benefit-shopping .mypage-section-skeleton .benefit-shopping-slide-item::after {
  content: "";
  position: absolute;
  border-radius: 1rem;
  background-color: #f4f6fa;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.03);
}
.benefit-shopping .mypage-section-skeleton .benefit-shopping-slide-item::before {
  top: 0;
  right: 100%;
  margin-right: 1.2rem;
  width: 100%;
  height: 100%;
}
.renew-type-benefit-home .benefit-shopping .mypage-section-skeleton .benefit-shopping-slide-item::after {
  top: 0;
  left: 100%;
  margin-left: 1.2rem;
  width: 100%;
  height: 100%;
}
.benefit-shopping .mypage-section-skeleton .benefit-shopping-slide-item .new-mypage-section-head {
}
.benefit-shopping .mypage-section-skeleton .benefit-shopping-slide-item .new-mypage-section-head .mypage-section-title {
  background-color: transparent;
  flex: 1 1 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: auto;
}
.benefit-shopping .mypage-section-skeleton .benefit-shopping-slide-item .new-mypage-section-head .mypage-section-title::before {
  width: 13rem;
  height: 1.9rem;
  content: "";
  display: block;
  flex: 0 0 auto;
  background-color: #fff;
}
.benefit-shopping .mypage-section-skeleton .benefit-shopping-slide-item .new-mypage-section-head .mypage-section-title::after {
  width: 9.5rem;
  height: 1.9rem;
  content: "";
  display: block;
  flex: 0 0 auto;
  background-color: #fff;
}
.benefit-shopping .mypage-section-skeleton .benefit-shopping-slide-item .new-mypage-section-head .mypage-section-title-img {
  background-color: #fff;
  border-radius: 50%;
}
.benefit-shopping .mypage-section-skeleton .benefit-shopping-slide-item .shopping-list {
  display: flex;
  overflow: hidden;
  margin: 0 -2rem;
  padding: -2rem;
}
.benefit-shopping .mypage-section-skeleton .benefit-shopping-slide-item .shopping-list-item {
  border-radius: 1rem;
  width: 11.6rem;
  height: 15rem;
  background-color: #fff;
  flex: 0 0 auto;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.no-data .img-box-no-data {
  width: 108px;
  height: 78px;
  background: url("/images/mypage_new_images/live_shopping_ic_no_data.png") no-repeat center center / 100% auto;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.no-data .text-box-no-data {
  position: relative;
  margin-left: -20px;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.no-data .text-box-no-data p {
  font-size: 13px;
  letter-spacing: -0.52px;
  font-weight: 600;
  color: #f32c2d;
}
.benefit-shopping .new-mypage-section.live .box.no-data .text-box-no-data .loading-ani-box {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 19px;
  height: 15px;
  left: calc(100% + 5px);
  bottom: -3px;
  content: "...";
}
.benefit-shopping .new-mypage-section.live .box.no-data .text-box-no-data .loading-ani-box span {
  width: 3px;
  height: 3px;
  background-color: #f32c2d;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.5s;
}
.benefit-shopping .new-mypage-section.live .box.no-data .text-box-no-data .loading-ani-box span:nth-child(1) {
  animation: noDataTextAni01 1.5s ease-in-out infinite;
}
.benefit-shopping .new-mypage-section.live .box.no-data .text-box-no-data .loading-ani-box span:nth-child(2) {
  animation: noDataTextAni02 1.5s ease-in-out infinite;
}
.benefit-shopping .new-mypage-section.live .box.no-data .text-box-no-data .loading-ani-box span:nth-child(3) {
  animation: noDataTextAni03 1.5s ease-in-out infinite;
}
@keyframes noDataTextAni01 {
  0% {
      opacity: 0;
  }
  33% {
      opacity: 1;
  }
  66% {
      opacity: 1;
  }
  100% {
      opacity: 1;
  }
}
@keyframes noDataTextAni02 {
  0% {
      opacity: 0;
  }
  33% {
      opacity: 0;
  }
  66% {
      opacity: 1;
  }
  100% {
      opacity: 1;
  }
}
@keyframes noDataTextAni03 {
  0% {
      opacity: 0;
  }
  33% {
      opacity: 0;
  }
  66% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.gifticon .box {
  height: 17.5rem;
  border-radius: 1rem;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3rem;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.gifticon .coupon-logo-list {
  width: 100%;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.gifticon .coupon-logo-list-object {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  -webkit-animation: coupon-list-animation-01 10s infinite linear;
  animation: coupon-list-animation-01 10s infinite linear;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.gifticon .coupon-logo-list-object::before,
.renew-type-benefit-home .benefit-shopping .new-mypage-section.gifticon .coupon-logo-list-object::after {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 222.2222222%;
  padding-top: 16.666666%;
  margin-left: 6.944444%;
  /* background: url(/images/illustration/img-openbank-bank.svg) no-repeat 0 0; */
  background-size: 100% 100%;
}
.benefit-shopping .new-mypage-section.gifticon .coupon-logo-list-object::before {
  background: url(/images/new_benefit_images/benefit_coupon_logo_bg_01.png) no-repeat 0 0;
  background-size: 100% 100%;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.gifticon .coupon-logo-list-object::after {
  background: url(/images/new_benefit_images/benefit_coupon_logo_bg_01.png) no-repeat 0 0;
  background-size: 100% 100%;
}
@-webkit-keyframes coupon-list-animation-01 {
  0% {
      -webkit-transform: translateX(0);
  }
  100% {
      -webkit-transform: translateX(-229.5%);
  }
}
@keyframes coupon-list-animation-01 {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-229.5%);
  }
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.gifticon .gifticon-btn-tag {
  padding: 8px 42px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.52px;
  color: #fff;
  background: linear-gradient(107deg, #00cbbf 0%, #00a49d 97%);
  border-radius: 60px;
}
/* 해외직구 추가 */
.renew-type-benefit-home .benefit-shopping .new-mypage-section.oversea {
  background-color: #e5f8e9;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.oversea .box {
  height: 17.5rem;
  border-radius: 1rem;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3rem;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.oversea .coupon-logo-list {
  width: 100%;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.oversea .coupon-logo-list-object {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  -webkit-animation: coupon-list-animation-02 8s infinite linear;
  animation: coupon-list-animation-02 8s infinite linear;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.oversea .coupon-logo-list-object::before,
.renew-type-benefit-home .benefit-shopping .new-mypage-section.oversea .coupon-logo-list-object::after {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 200%;
  padding-top: 30px;
  margin-left: 6.944444%;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.oversea .coupon-logo-list-object::before {
  background: url(/images/mypage_new_images/oversea_brand_logo_list.png) no-repeat 0 0;
  background-size: contain;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.oversea .coupon-logo-list-object::after {
  background: url(/images/mypage_new_images/oversea_brand_logo_list.png) no-repeat 0 0;
  background-size: contain;
}
@-webkit-keyframes coupon-list-animation-02 {
  0% {
      -webkit-transform: translateX(0);
  }
  100% {
      -webkit-transform: translateX(-207%);
  }
}
@keyframes coupon-list-animation-02 {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-207%);
  }
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.oversea .oversea-btn-tag {
  padding: 8px 42px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.52px;
  color: #fff;
  background: linear-gradient(278deg, #009522 97%, #12ae33 5%);
  border-radius: 60px;
}
.renew-type-benefit-home .benefit-shopping .benefit-shopping-tabs {
  padding-top: 43px;
  margin-top: -43px;
}
.renew-type-benefit-home .benefit-shopping .benefit-shopping-tab {
  position: relative;
}
.renew-type-benefit-home .benefit-shopping .benefit-shopping-tab .oversea-bubble-text-box {
  position: absolute;
  top: -40px;
  left: calc(50% - 40px);
  width: 79px;
}
.renew-type-benefit-home .benefit-shopping .benefit-shopping-tab .oversea-bubble-text-box img {
  width: 100%;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .on-air-timer-box {
  position: absolute;
  right: 9px;
  bottom: 13px;
  display: flex;
  align-items: center;
  color: #f32c2d;
  letter-spacing: -0.36px;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .on-air-timer-box p {
  margin-right: 5px;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .on-air-progress-bar-box {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  background: #e6e9ef;
  border-radius: 0 0 1rem 1rem;
  overflow: hidden;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .on-air-progress-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 10%;
  height: 100%;
  background: linear-gradient(to left, #ff2224 100%, #ff8283 0%);
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section-head {
  position: relative;
  z-index: 10;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.on-air .box-img.is-error {
  background: url(/images/mypage_new_images/live-shopping_error-img.png) no-repeat;
  background-size: 100% 100%;
}
.renew-type-benefit-home .benefit-shopping .new-mypage-section.live .box.on-air .box-img.is-error img {
  visibility: hidden;
}
/*  */
.renew-type-benefit-home .benefit-shopping .new-mypage-section {
  margin-bottom: 33px;
  border-radius: 10px;
}
.renew-type-benefit-home .benefit-shopping .mypage-section-skeleton {
  display: none;
}
.renew-type-benefit-home .benefit-shopping .mypage-section-title {
  margin: 0;
  font-size: 1.8rem;
  line-height: 2.6rem;
  font-weight: 700;
}
.renew-type-benefit-home .benefit-shopping .mypage-section-title-link02 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex !important;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: inherit;
}
.renew-type-benefit-home .benefit-shopping .mypage-section-title-link02 span::after {
  display: inline-block;
  vertical-align: baseline;
  content: "";
  width: 0.9rem;
  height: 1rem;
  background-image: url(../images/common/ic-button-arrow-b.svg);
  filter: brightness(calc(1500% * 102 / 255));
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: right center;
  margin-left: 0.3rem;
  margin-top: 0px;
  margin-bottom: 1px;
}
.renew-type-benefit-home .benefit-shopping .shopping-bg-layer {
  content: "";
  position: absolute;
  top: calc(50% + 40px);
  left: 0;
  z-index: -1;
  box-sizing: border-box;
  width: calc(100% + 48px);
  height: 200vw;
  margin: 0 -24px;
  transition: opacity 0.75s;
  transform: translateY(-50%);
  opacity: 0;
  transition: all 0.75s;
  transition-timing-function: ease-out;
}
/* 쿠팡쇼핑 배경색 */
.renew-type-benefit-home .benefit-shopping .shopping-bg-layer.shopping-bg-color-01 {
  background: -moz-linear-gradient(top, rgba(167, 175, 255, 0) 0%, rgba(167, 175, 255, 1) 50%, rgba(167, 175, 255, 0) 100%);
  background: -webkit-linear-gradient(top, rgba(167, 175, 255, 0) 0%, rgba(167, 175, 255, 1) 50%, rgba(167, 175, 255, 0) 100%);
  background: linear-gradient(to bottom, rgba(167, 175, 255, 0) 0%, rgba(167, 175, 255, 1) 50%, rgba(167, 175, 255, 0) 100%);
}
/* 라이브 배경색 */
.renew-type-benefit-home .benefit-shopping .shopping-bg-layer.shopping-bg-color-02 {
  background: -moz-linear-gradient(top, rgba(253, 194, 194, 0) 0%, rgba(253, 194, 194, 1) 50%, rgba(253, 194, 194, 0) 100%);
  background: -webkit-linear-gradient(top, rgba(253, 194, 194, 0) 0%, rgba(253, 194, 194, 1) 50%, rgba(253, 194, 194, 0) 100%);
  background: linear-gradient(to bottom, rgba(253, 194, 194, 0) 0%, rgba(253, 194, 194, 1) 50%, rgba(253, 194, 194, 0) 100%);
}
/* 기프티콘 배경색 */
.renew-type-benefit-home .benefit-shopping .shopping-bg-layer.shopping-bg-color-03 {
  background: -moz-linear-gradient(top, rgba(249, 211, 177, 0) 0%, rgba(249, 211, 177, 1) 50%, rgba(249, 211, 177, 0) 100%);
  background: -webkit-linear-gradient(top, rgba(249, 211, 177, 0) 0%, rgba(249, 211, 177, 1) 50%, rgba(249, 211, 177, 0) 100%);
  background: linear-gradient(to bottom, rgba(249, 211, 177, 0) 0%, rgba(249, 211, 177, 1) 50%, rgba(249, 211, 177, 0) 100%);
}
/* 해외직구 배경색 */
.renew-type-benefit-home .benefit-shopping .shopping-bg-layer.shopping-bg-color-04 {
  background: -moz-linear-gradient(top, rgba(158, 239, 175, 0) 0%, rgba(158, 239, 175, 1) 50%, rgba(158, 239, 175, 0) 100%);
  background: -webkit-linear-gradient(top, rgba(158, 239, 175, 0) 0%, rgba(158, 239, 175, 1) 50%, rgba(158, 239, 175, 0) 100%);
  background: linear-gradient(to bottom, rgba(158, 239, 175, 0) 0%, rgba(158, 239, 175, 1) 50%, rgba(158, 239, 175, 0) 100%);
}
.renew-type-benefit-home .benefit-shopping .shopping-bg-layer.on {
  opacity: 1;
}
.renew-type-benefit-home .section-join-benefit {
  position: relative;
  z-index: 1;
}
/* ============ //24.02.05 해택탭 쇼핑 영역 css 추가 ============ */
/* ========= 24.02.14 혜택탭 css 수정 ============= */
.renew-type-benefit-home .bg-layer {
  z-index: 0;
}
/* .renew-type-benefit-home .benefit-default-banner-section {
margin-top: 45px;
} */
.renew-type-benefit-home .benefit-default-banner-section .benefit-banner-list {
  position: relative;
  z-index: 1;
}
.renew-type-benefit-home .benefit-default-banner-section .benefit-banner {
  margin: 0 auto;
}
.renew-type-benefit-home .benefit-shopping .benefit-section-title {
  margin-bottom: 15px;
}
.renew-type-benefit-home .section-coupon-box .coupon-box-logout .coupon-observe-date {
  margin-bottom: 15px;
  color: #888;
  text-align: center;
  font-size: 13px;
}
/* ========= //24.02.14 혜택탭 css 수정 ============= */

/* 유효기간 말료예정카드 24.02.22 */
.form-detail-item.addr-select-box {
  display: block;
}
.form-detail-item.addr-select-box .form-detail-group {
  text-align: left;
  display: block;
}
.form-detail-item.addr-select-box .ui-radio-group {
  display: block;
}
.form-detail-item.addr-select-box .ui-radio-group .ui-radio-block + .ui-radio-block {
  margin-left: 0;
  margin-top: 10px;
}
.form-detail-item.addr-select-box .no-data-addr {
  text-align: center;
  padding-top: 8px;
}
.form-detail-item.addr-select-box .ui-label-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 240228 - 행운의 쇼핑복권 스타일 추가 (lyr) */
.lottery-ticket--text-box {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(22rem - 4rem);
  height: 5.4rem;
  padding: 0 2rem;
  transform: translateX(-50%);
  background: url("/ATTACH/MKA/images/event/img-lottery-ticket--txt-box.png") no-repeat top left;
  background-size: contain;
}
.lottery-ticket--text-box span {
  font-size: 1.8rem;
  color: #fff;
}
.lottery-ticket--text-box span.number {
  font-weight: bold;
}
.lottery-ticket--text-box span.number .count {
  padding-right: 0.4rem;
}

/* 240228 혜택탭 수정 */
.renew-type-benefit-home .benefit-page-section .benefit-default-banner-section {
  margin-bottom: 24px;
}
.renew-type-benefit-home .benefit-page-section .benefit-default-banner-section:last-child {
  margin-bottom: 0;
}
.renew-type-benefit-home .intersection-inner {
  transition: 0.35s !important;
  transition-delay: 0.15s !important;
}
.renew-type-benefit-home .benefit-event-tab {
  height: 3rem;
  border-radius: 1.5rem;
  /* background-color: #ffffff; */
  border: 1px solid #888888;
  box-sizing: border-box;
}
.renew-type-benefit-home .benefit-event-tab.type-shopping.active {
  background: url(/images/new_benefit_images/btn_bg_shopping.gif);
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  border: none;
}
.renew-type-benefit-home .benefit-event-tab.type-travel.active {
  background: url(/images/new_benefit_images/btn_bg_travel.gif);
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  border: none;
}
.renew-type-benefit-home .benefit-event-tab.type-travelog.active {
  background: url(/images/new_benefit_images/btn_bg_travlog.gif);
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  border: none;
}
.renew-type-benefit-home .benefit-event-tab.type-etc.active {
  background: url(/images/new_benefit_images/btn_bg_etc.gif);
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  border: none;
}
.renew-type-benefit-home .benefit-event-tab.type-sale.active {
  background: url(/images/new_benefit_images/btn_bg_sale.gif);
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  border: none;
}
.renew-type-benefit-home .benefit-default-banner-section .benefit-image-banner-link .lottie-container svg {
  display: block;
}
/* 24.03.04 혜택탭 수정 */
.renew-type-benefit-home-wrap .benefit-page-section.section-event-list .benefit-event-tabs-wrap .benefit-event-tabs::-webkit-scrollbar {
  display: none;
}
.renew-type-benefit-home .benefit-shopping .benefit-section-title {
  position: relative;
  z-index: 1;
}

/* 24.03.08 이벤트 제목 화살표 수정 : 이화정 */
.renew-type-benefit-home-wrap .section-event-list .benefit-section-title .section-event-list-link-01,
.layer-monthly-benefit-chart-wrap .section-my-record-link-01 {
  display: flex;
  align-items: center;
}
.renew-type-benefit-home-wrap .section-event-list .benefit-section-title .section-event-list-link-01::after,
.layer-monthly-benefit-chart-wrap .section-my-record-link-01::after {
  content: "";
  display: block;
  vertical-align: baseline;
  width: 0.9rem;
  height: 1rem;
  background: url("/images/common/ic-button-arrow-b.svg") no-repeat right center / auto 100%;
  margin-left: 0.3rem;
  margin-top: 6px;
  margin-bottom: 6px;
  filter: brightness(calc(1500% * 102 / 255));
}

/* 24.03.12 혜택텝 쿠폰함 비로그인 스켈레톤 추가 */
.renew-type-benefit-home-wrap .coupon-box-logout .coupon-customer-num {
  display: inline-block;
}
.renew-type-benefit-home-wrap .coupon-box-logout.is-skeleton .coupon-customer-num {
  display: none;
}
.renew-type-benefit-home-wrap .coupon-box-logout .coupon-customer-num .skeleton-coupon-customer-num {
  display: none;
}
.renew-type-benefit-home-wrap .coupon-box-logout.is-skeleton .skeleton-coupon-customer-num {
  display: inline-block;
  width: 100px;
  height: 20px;
  margin-bottom: -4px;
  background-color: var(--skeleton);
  border-radius: 3px;
}
.renew-type-benefit-home-wrap h2.benefit-section-title {
  line-height: 2.3rem;
}
.renew-type-benefit-home-wrap .benefit-section-title .benefit-section-title-sub {
  font-size: 1.5rem;
  font-weight: 500;
}
/* SSSSSSSSSSSSSSSSSSSSSSSSSSSSSS [ 카드 상세 리뉴얼 ] SSSSSSSSSSSSSSSSSSSSSSSSSSSSSS */
/* 
작업자 : 장준혁 
작성일 : 2023.10.17.
최종 수정일 : 2023.11.03.

수정자 : 이유리
최종 수정일 : 2024.05.09.
*/
.type-card-detail-slide.new-type .card-detail-top-wcms .type-top-area {
  margin-right: -24px;
  margin-left: -24px;
  padding: 2rem 2.4rem 1rem;
  background-color: #e0e7ff;
}
.type-card-detail-slide.new-type .card-detail-top-wcms .type-top-area .wcms-info {
  margin-right: 0;
  margin-left: 0;
}
.type-card-detail-slide.new-type {
  overflow-y: hidden;
}
.type-card-detail-slide.new-type * {
  box-sizing: border-box;
  word-wrap: break-word;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.type-card-detail-slide.new-type h2 {
  font-weight: bold;
}
.type-card-detail-slide.new-type .page-section-title {
  text-align: center;
}
/* [2024-05-16 : lyr] 주요혜택, 이용안내 폰트 사이즈 1.6rem 으로 수정 */
.type-card-detail-slide.new-type .page-section-title .title_1 {
  position: relative;
  display: inline-block;
  font-size: 1.6rem;
  font-weight: bold;
}
.type-card-detail-slide.new-type .page-section-title .title_1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: inline-block;
  width: 100%;
  height: 1px;
  background-color: #000;
}
.type-card-detail-slide.new-type h2 ~ .accordion-list {
  margin-top: 5px;
}
.type-card-detail-slide.new-type .page-contents-top {
  position: relative;
  overflow: hidden;
  margin-right: -24px;
  margin-left: -24px;
  padding-right: 24px;
  padding-left: 24px;
  background-color: #ffffff;
  transition: 0.5s all;
}
.type-card-detail-slide.new-type .page-contents-top .wcms-info {
  margin-top: 0;
  margin-right: -24px;
  margin-bottom: 0;
  margin-left: -24px;
  padding-top: 10px;
  padding-right: 24px;
  padding-bottom: 10px;
  padding-left: 24px;
  background-color: #f5f5f5;
  background-image: none;
  color: var(--black);
  font-size: 14px;
  text-align: center;
}
.type-card-detail-slide.new-type .page-contents-top .card-detail-top-btns + .wcms-info {
  margin-top: 15px;
}
/* 카드 슬라이드 Start */
.type-card-detail-slide.new-type .card-detail {
  position: relative;
  margin-bottom: 0;
  padding: 0;
  background-color: transparent;
  background: -moz-linear-gradient(top, #fff 0%, #e0e7ff 100%);
  background: -webkit-linear-gradient(top, #fff 0%, #e0e7ff 100%);
  background: linear-gradient(to bottom, #e0e7ff 0%, #fff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#E0E7FF',GradientType=0 );
}
body .type-card-detail-slide.new-type .card-detail {
  transition: 0.5s all;
}
body:not(.is-dim) .type-card-detail-slide.new-type .card-detail {
  z-index: 999;
}
body.is-dim .type-card-detail-slide.new-type .card-detail {
  margin: 20px -4px 0;
}
.type-card-detail-slide.new-type .card-detail::before {
  content: "";
  position: absolute;
  top: -2.4rem;
  left: -2.4rem;
  width: calc(100% + 4.8rem);
  height: 300px;
  display: block;
  transition: none;
  opacity: 0;
  background: -moz-linear-gradient(top, transparent 0%, #4e5159 100%);
  background: -webkit-linear-gradient(top, transparent 0%, #4e5159 100%);
  background: linear-gradient(to bottom, #4e5159 0%, transparent 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='transparent', endColorstr='#4e5159',GradientType=0 );
}
body.is-dim .type-card-detail-slide.new-type .card-detail::before {
  opacity: 1;
}
.type-card-detail-slide.new-type .card-detail .slide-card {
  margin-right: 0;
  margin-left: 0;
  background-color: transparent;
}
.is-dim .type-card-detail-slide.new-type .card-detail .slide-card {
  padding-top: 0;
}

.type-card-detail-slide.new-type .card-detail .slide-card .slide-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.type-card-detail-slide.new-type .card-detail .slide-card .slide-card-bg img {
  display: block;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  margin-top: -0.2rem;
}
.type-card-detail-slide.new-type .card-detail .slide-card .swiper-button-prev,
.type-card-detail-slide.new-type .card-detail .slide-card .swiper-button-next {
  display: block;
  height: 100%;
}
.type-card-detail-slide.new-type .card-detail .slide-card .swiper {
  transition: 0.5s background-color;
}
body.is-dim .type-card-detail-slide.new-type .card-detail .slide-card .swiper {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: #ffffff;
}
.type-card-detail-slide.new-type .card-detail .slide-card .swiper-button-prev {
  left: 24px;
  margin: 0;
  background-image: url(/images/card-detail/btn_prevarrow_l.png);
  background-position: left center;
  background-size: contain;
  background-repeat: no-repeat;
}
.type-card-detail-slide.new-type .card-detail .slide-card .swiper-button-next {
  right: 24px;
  margin: 0;
  background-image: url(/images/card-detail/btn_nextarrow_l.png);
  background-position: right center;
  background-size: contain;
  background-repeat: no-repeat;
}
/* [2024-05-16 : lyr] height 사이즈 수정 (기존 268px → 240px) */
.type-card-detail-slide.new-type .card-detail .slide-card .slide-card-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 524px;
  /* height: 348px; */
  height: 240px;
  padding-top: 0;
}
/* [2024-05-16--2차 : lyr] margin 조정 */
.type-card-detail-slide.new-type .card-detail .slide-card .slide-card-list .swiper-slide {
  margin: -4px 0;
}
/* [2024-05-16 : lyr] height 240px로 수정 (기존 300px) */
.is-dim .type-card-detail-slide.new-type .card-detail .slide-card .slide-card-item {
  height: 240px;
  margin: 3rem;
}
/* [2024-05-16 : lyr] 사이즈 직사각으로 조정, 마진 0 */
.type-card-detail-slide.new-type .card-detail .slide-card .slide-card-item .card-image {
  width: 240px;
  height: 151px;
  margin: 0;
}
/* [2024-05-16 : lyr] rotate, scale 추가 */
.type-card-detail-slide.new-type .card-detail .slide-card .slide-card-item .card-image.type-vertical {
  transform: rotate(90deg) scale(1);
}

/* [2024-05-16 : lyr] type-irregular 타입 추가 */
.type-card-detail-slide.new-type .card-detail .slide-card.is-scroll .slide-card-item .card-image.type-irregular {
  width: 240px;
  height: 240px;
}
.type-card-detail-slide.new-type .card-detail .slide-card.is-scroll .slide-card-item .card-image.type-irregular .card-image-inner {
  transform: scale(1);
}
.type-card-detail-slide.new-type .card-detail .slide-card.is-scroll .slide-card-item .card-image.type-irregular .card-image-inner img {
  height: auto;
}
.type-card-detail-slide.new-type .card-detail .slide-card .slide-card-list.type-vertical-margin .swiper-slide {
  margin: 40px 0;
}
.is-dim .type-card-detail-slide.new-type .card-detail .slide-card .slide-card-list.type-vertical-margin .swiper-slide {
  margin: 3rem;
}
/* [2024-05-16 : lyr] rotate 삭제 */
.type-card-detail-slide.new-type .card-detail .slide-card .slide-card-item .card-image.type-vertical .card-image-inner {
  transform: scale(1);
}
.type-card-detail-slide.new-type .card-detail .slide-card .slide-card-item .card-image .card-image-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 0;
}
.type-card-detail-slide.new-type .card-detail .slide-card .slide-card-item .card-image .card-image-inner:empty::before,
.type-card-detail-slide.new-type .card-detail .slide-card .slide-card-item .card-image .card-image-inner.is-error::before {
  top: auto;
  left: auto;
  width: 100%;
  height: auto;
  padding-top: 63.060748%;
  border-radius: 3.5%/5.6%;
  background-image: url(/images/card-detail/sample_card.png);
  background-size: cover;
}
/* [2024-05-16 : lyr] position: relative; 삭제 */
.type-card-detail-slide.new-type .card-detail .slide-card .slide-card-item .card-image .card-image-inner img {
  object-fit: contain;
  object-position: center;
  /* 240426 - 높이 값 고정 (lyr)*/
  height: calc(240px * (214 / 340));
  overflow: hidden;
}
/* [2024-05-16 : lyr] 카드의 위 아래 여백을 동일하게 하기 위해 padding-top을 1rem으로 수정 */
.type-card-detail-slide.new-type .slide-card-info {
  position: relative;
  margin-right: -24px;
  margin-left: -24px;
  padding-top: 1rem;
  padding-right: 24px;
  padding-left: 24px;
  transition: 0.5s all;
}
body.is-dim .type-card-detail-slide.new-type .slide-card-info {
  z-index: 999;
  margin: 0 -4px;
  padding-top: 0;
  padding-bottom: 30px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #ffffff;
}
.type-card-detail-slide.new-type .slide-card-info .card-detail-badges {
  margin-top: 0;
  margin-bottom: 18px;
}
/* [2024-05-16 : lyr] margin 전체 0 으로 수정 */
.type-card-detail-slide.new-type .slide-card-info .card-detail-text {
  max-width: 100%;
  margin: 0;
  color: #000000;
  font-size: 1.5rem;
  line-height: 19px;
}
body.is-dim .type-card-detail-slide.new-type .slide-card-info .card-detail-text {
  max-width: 240px;
  margin: 0 auto 5px;
}
/* [2024-05-16 : lyr] margin-top 1rem 추가 */
.type-card-detail-slide.new-type .slide-card-info .card-detail-title {
  margin-top: 1rem;
  font-weight: bold;
  font-size: 24px;
  line-height: 30px;
}
.is-dim .type-card-detail-slide.new-type .slide-card-info-item {
  text-align: center;
}
.type-card-detail-slide.new-type .slide-card-info-item .slide-card-title {
  display: inline-block;
  margin: 0 auto 1.5rem;
  padding: 0 1rem;
  border-radius: 10rem;
  font-size: 1.3rem;
  background-color: var(--basic);
  color: #fff;
}
/*  [2024-05-16--2차 : lyr] margin-top 1.5rem 으로 수정 */
.type-card-detail-slide.new-type .slide-card-info .card-detail-annual-fee,
.type-card-detail-slide.new-type .slide-card-info .card-detail-target-user {
  width: 100%;
  margin-top: 1.5rem;
  padding: 1.8rem;
  border-radius: 1.5rem;
  border: 1px solid #d9d9d9;
}
.type-card-detail-slide.new-type .slide-card-info .card-detail-annual-fee {
  justify-content: space-between;
}
.type-card-detail-slide.new-type .slide-card-info .card-detail-target-user,
.type-card-detail-slide.new-type .slide-card-info .card-detail-annual-fee .type-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
/* [2024-05-02 : lyr] 연회비/브랜드 텍스트 길어져도 화살표 잘 보이게 수정 */
.type-card-detail-slide.new-type .slide-card-info .card-detail-annual-fee .type-link {
  width: 90%;
}
.type-card-detail-slide.new-type .slide-card-info .card-detail-target-user .title,
.type-card-detail-slide.new-type .slide-card-info .card-detail-annual-fee .title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111;
}
.type-card-detail-slide.new-type .slide-card-info .card-detail-target-user .desc,
.type-card-detail-slide.new-type .slide-card-info .card-detail-annual-fee .desc {
  color: var(--gray-80);
}
/* [2024-05-16 : lyr] margin-top 1rem, margin-bottom 0으로 수정 */
.type-card-detail-slide.new-type .slide-card-info-item .card-detail-badges {
  margin-top: 1rem;
  margin-bottom: 0;
}
.type-card-detail-slide.new-type .slide-card-info-item .card-detail-badges .ui-badge {
  padding: 0;
  background-color: #fff;
}
.type-card-detail-slide.new-type .slide-card-info-item .card-detail-badges .ui-badge + .ui-badge {
  margin-left: 1rem;
}
.type-card-detail-slide.new-type .slide-card-info-item .card-detail-badges .ui-badge.type-icon-more::after,
.type-card-detail-slide.new-type .slide-card-info-item .card-detail-badges .ui-badge.type-icon-share::after {
  display: none;
}
.type-card-detail-slide.new-type .slide-card-info-item .card-detail-badges .ui-badge .icon-more,
.type-card-detail-slide.new-type .slide-card-info-item .card-detail-badges .ui-badge .icon-share {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 1.3rem;
  border-radius: 1rem;
  vertical-align: middle;
}
.type-card-detail-slide.new-type .slide-card-info-item .card-detail-badges .ui-badge .icon-more {
  width: 1rem;
  height: 1rem;
  background: url(../images/icon/btn-more-b.svg) var(--gray-20) no-repeat center;
  background-size: 13px 12.3px;
}
.type-card-detail-slide.new-type .slide-card-info-item .card-detail-badges .ui-badge.is-active .icon-more {
  background: url(../images/icon/btn-more-1-b.svg) var(--gray-20) no-repeat center;
}
.type-card-detail-slide.new-type .slide-card-info-item .card-detail-badges .ui-badge .icon-share {
  width: 1.5rem;
  height: 1.5rem;
  background: url(../images/icon/btn-share.svg) var(--gray-20) no-repeat center;
}
/* 카드 슬라이드 End */

/* tip 박스 수정 */
.type-card-detail-slide.new-type .card-detail-top-at-once {
  margin-left: -2.4rem;
  margin-right: -2.4rem;
  background-color: #e0e7ff;
}
.type-card-detail-slide.new-type .card-detail-tip-inner {
  width: calc(100% - 4.8rem);
  margin: 0 auto;
  padding-top: 2rem;
  padding-bottom: 1rem;
}
.type-card-detail-slide.new-type .card-detail-tip-inner .ui-tip {
  border-radius: 0.6rem;
  background-color: #fff;
  color: #666;
}

/* 상단 스킵 버튼 */
.btn-top-slide-skip {
  width: 100%;
  height: 18px;
  margin-top: 40px;
  /* margin-bottom: 40px; */
  margin-bottom: 20px;
  background-image: url(/images/card-detail/btn_scroll_down.png);
  background-position: center;
  background-size: 18px auto;
  background-repeat: no-repeat;
  transform: rotate(180deg);
}
.btn-top-slide-skip.mb-0 {
  margin-bottom: 0;
}
.is-scrolled .btn-top-slide-skip {
  display: block;
}

/* 주요혜택 start */
/*  [2024-05-16--2차 : lyr] margin-top 1.9rem 으로 수정 */
.type-card-detail-slide.new-type .benefit-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 1.9rem;
}
.type-card-detail-slide.new-type .benefit-list .benefit-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.8rem;
  border-radius: 1.5rem;
  cursor: pointer;
  background-color: var(--gray-10);
}
.type-card-detail-slide.new-type .benefit-list .benefit-item::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin-left: 2px;
  /* 250117 확장자 수정 : HDH */
  background-image: url(/images/card-detail/btn_nextarrow_l.svg);
  background-position: right center;
  background-size: contain;
}
.ui-layer__body .type-card-detail-slide.new-type .benefit-list .benefit-item::after {
  display: none;
}
.type-card-detail-slide.new-type .benefit-list .benefit-item + .benefit-item {
  margin-top: 0;
}
.type-card-detail-slide.new-type .benefit-list .benefit-item .benefit-icon {
  width: 5.2rem;
  height: 5.2rem;
  margin-left: 0;
  padding: 0.5rem;
  border-radius: 1.2rem;
  background-color: #fff;
}
.type-card-detail-slide.new-type .benefit-list .benefit-item .benefit-desc {
  flex: 1 1 0;
}
.type-card-detail-slide.new-type .benefit-list .benefit-item .benefit-icon img {
  width: 100%;
  height: 100%;
}
.type-card-detail-slide.new-type .benefit-list .benefit-item .benefit-desc h1,
.type-card-detail-slide.new-type .benefit-list .benefit-item .benefit-desc .benefit-title {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--basic);
}
.type-card-detail-slide.new-type .benefit-list .benefit-item .benefit-desc p {
  font-size: 1.3rem;
  color: #8c8c8c;
}
/* [2025-07-31 KEJ] [WPM-] 추가 */

/* 점 */
.type-card-detail-slide.new-type .benefit-list .benefit-item .benefit-desc .blt1 {position:relative;display: inline-block;padding-left:6px;}
.type-card-detail-slide.new-type .benefit-list .benefit-item .benefit-desc .blt1:before {content:"";position:absolute;left:0;top:7px;width:2px;height:2px;background-color:#999;}
/* 하이픈 */
.type-card-detail-slide.new-type .benefit-list .benefit-item .benefit-desc .blt2 {position:relative;display: inline-block;padding-left:8px;}
.type-card-detail-slide.new-type .benefit-list .benefit-item .benefit-desc .blt2:before {content:"";position:absolute;left:0;top:7px;width:3px;height:1px;background-color:#999;}
/* 당구장표시 */
.type-card-detail-slide.new-type .benefit-list .benefit-item .benefit-desc .blt3 {position:relative;display: inline-block;padding-left:12px;}
.type-card-detail-slide.new-type .benefit-list .benefit-item .benefit-desc .blt3:before {content:"※";position:absolute;left:0;top:0;font-size:11px;}
.type-card-detail-slide.new-type .benefit-list .benefit-item .benefit-desc p.blt3 {margin-top:4px;}

/* 별표 */
.type-card-detail-slide.new-type .benefit-list .benefit-item .benefit-desc .blt6 {position:relative;display: inline-block;padding-left:8px;font-size:11px;}
.type-card-detail-slide.new-type .benefit-list .benefit-item .benefit-desc .blt6:before {content:"*";position:absolute;left:0;top:3px;font-size:11px;}

/* //[2025-07-31 KEJ] [WPM-] 추가 */

/* 주요혜택 end */

/* 주요 혜택 상세 내용 Start */
.ui-layer__body .type-card-detail-slide.new-type .benefit-list {
  margin-top: 0;
}
.ui-layer__body .type-card-detail-slide.new-type .benefit-list .benefit-item {
  padding: 0 0 1rem;
  background: #fff;
}
.ui-layer__body .type-card-detail-slide.new-type .benefit-contents {
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 20px;
}
.ui-layer__body .type-card-detail-slide.new-type .benefit-contents .ui-notice {
  margin-top: 0;
}
.ui-layer__body .type-card-detail-slide.new-type .benefit-contents .benefit-contents-section-head {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.ui-layer__body .type-card-detail-slide.new-type .benefit-contents .benefit-contents-section-head .title {
  font-size: 1.4rem;
  line-height: 18px;
  font-weight: 700;
}
/* 주요 혜택 상세 내용 End */

/* 이벤트 배너 목록 Start */
.type-card-detail-slide.new-type .event-banner-wcms .event-banner-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 27px;
}
.type-card-detail-slide.new-type .event-banner-wcms .event-banner-list-item {
  overflow: hidden;
  border-radius: 8px;
}

.type-card-detail-slide.new-type .event-banner-wcms .event-banner-list-link {
  display: block;
}
.type-card-detail-slide.new-type .event-banner-wcms .event-banner-list-link img {
  display: block;
  width: 100%;
  max-width: 100%;
}
/* 이벤트 배너 목록 End */

.type-card-detail-slide.new-type .box-information .info-list {
  margin-right: -24px;
  margin-left: -24px;
  padding-top: 20px;
  padding-right: 24px;
  padding-bottom: 20px;
  padding-left: 24px;
  background-color: #f8f8f8;
  color: #666666;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.03em;
}
.type-card-detail-slide.new-type .box-information .info-list .info-item {
  padding-left: 1.3em;
}
.type-card-detail-slide.new-type .box-information .info-list .info-item::before {
  content: "※";
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  background-color: transparent;
}

.type-card-detail-slide.new-type .common-information .info-item {
  color: var(--basic);
}
.type-card-detail-slide.new-type .common-information .info-item + .info-item {
  margin-top: 12px;
}
.type-card-detail-slide.new-type .common-information .info-item.type-presa {
  padding-left: 1.3em;
}
.type-card-detail-slide.new-type .common-information .info-item.type-indent,
.type-card-detail-slide.new-type .common-information .info-item.type-indent-block {
  padding-left: 1em;
}
.type-card-detail-slide.new-type .common-information .info-item.type-presa::before,
.type-card-detail-slide.new-type .common-information .info-item.type-indent::before,
.type-card-detail-slide.new-type .common-information .info-item.type-indent-block::before {
  top: 0;
  left: 0;
  display: block;
  width: auto;
  height: auto;
  background-color: transparent;
}
.type-card-detail-slide.new-type .common-information .info-item.type-presa::before {
  content: "※";
}
.type-card-detail-slide.new-type .common-information .info-item.type-indent::before,
.type-card-detail-slide.new-type .common-information .info-item.type-indent-block::before {
  content: "-";
}

/* 연회비 팝업 */
.card-annual-info .card-annual-info-item + .card-annual-info-item {
  margin-top: 15px;
}
.card-annual-info .card-annual-title {
  font-size: 15px;
}
.card-annual-info .card-annual-text {
  margin-top: 6px;
  color: var(--gray-60);
  font-size: 13px;
}
.card-annual-info .card-annual-info-list + .info-list {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e5e5e5;
}
.card-annual-info .info-list .info-item {
  color: var(--gray-80);
  font-size: 13px;
  line-height: 17px;
}
.card-annual-info .info-list .info-item + .info-item {
  margin-top: 5px;
}
/* 신규 카드 상세 내부 레거시 팝업 */
.type-card-detail-slide.new-type .popup .popup_wrap {
  max-width: calc(100vw - 60px);
}
/* 카드 상세 내 이벤트 팝업 */
.layer-wrap .coupon-detail-buttons.type-only:empty {
  margin-top: 0 !important;
}
.layer-wrap .coupon-detail-buttons.type-only:empty + .page-section-group {
  margin-top: 0 !important;
  border-top: 0 !important;
}
.ui-layer__body-inner.none-header-type::-webkit-scrollbar {
  display: none;
}
.ui-layer__body-inner.none-header-type .fix-scroll-header.fixed .fix-txt {
  border-bottom: 1px solid var(--gray-30);
}
.type-card-detail-slide.new-type .card-detail-top-oneline-txt {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.8rem;
  margin: 0 -2.4rem;
  font-size: 1.2rem;
  text-align: center;
  background-color: #f4f5f9;
}
/* 카드 신청하기 버튼 slide 아래로 조정 */
.type-card-detail-slide.new-type.page-contents.type-card-detail-slide ~ .page-buttons.type-fixed {
  z-index: 1001;
}
body.is-dim .type-card-detail-slide.new-type.page-contents.type-card-detail-slide ~ .page-buttons.type-fixed {
  z-index: 998;
}
/* EEEEEEEEEEEEEEEEEEEEEEEEEEEEEE [ 카드 상세 리뉴얼 ] EEEEEEEEEEEEEEEEEEEEEEEEEEEEEE */

/* 240314 받은혜택 페이지 말풍선 */
.ui-button-tooltip.page-card-usage.type-item-bottom {
  bottom: -16px;
  z-index: 10;
  left: calc(50% - 10px);
}
.ui-button-tooltip.page-card-usage.type-item-bottom .ui-button-tooltip-text::after {
  top: -8px;
  border-width: 4px 3px;
  border-top-color: transparent;
  border-bottom-color: #2c364e;
}
/* //240314 받은혜택 페이지 말풍선 */

/* 금융혜택몰 24.04.04 */
.cont-top-slide .slide-banner-link,
.cont-top-slide .slide-banner-image {
  border-radius: 0;
}
.cont-top-slide .slide-banner-controller {
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
}
.cont-flex-btm-gray {
  background: #f4f6f8;
  flex: 1;
}
.cont-flex-btm-gray .ui-page-scroll-tap {
  background: #f4f6f8;
}
.section-tab-scroll {
  margin-top: 28px;
  padding: 0 20px;
}
.section-tab-scroll + .section-tab-scroll {
  margin-top: 56px;
}
.section-tab-scroll .section-title-icon {
  width: 36px;
}
.section-tab-scroll .section-title-icon img {
  width: 100%;
}
.benefit-contents-box {
  display: block;
  margin-top: 15px;
  padding: 16px;
  border-radius: 10px;
  background: #fff;
}
.benefit-contents-box.link-type {
  position: relative;
}
.benefit-contents-box.link-type::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: url(/images/icon/btn_more_setting.png) no-repeat 0 0 / 10px auto;
}
.benefit-contents-box + .benefit-contents-box {
  margin-top: 15px;
}
.benefit-contents-box .flag-box {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.benefit-contents-box .flag-box span {
  display: inline-flex;
  border-radius: 13px;
  padding: 0 10px;
  /* 24.05.13 수정 font-size: 12px; */
  font-size: 14px;
  line-height: 26px;
  font-weight: 500;
}
/* 24.05.13 추가 */
.benefit-contents-box .flag-box span.hot,
.benefit-contents-box .flag-box span.new {
  font-size: 12px;
}
.benefit-contents-box .flag-box span i {
  display: inline-block;
  width: 24px;
  margin-left: -4px;
}
.benefit-contents-box .flag-box span i img {
  width: 100%;
}
.benefit-contents-box .flag-box span.type-loan,
.benefit-contents-box .flag-box span.type-fune {
  background: #d8f3f2;
  color: #008882;
}
.benefit-contents-box .flag-box span.type-ins,
.benefit-contents-box .flag-box span.type-rent {
  background: #fee7ec;
  color: #be113f;
}
.benefit-contents-box .flag-box span.type-inv {
  background: #fff4dc;
  color: #c65300;/* [2026-07-09 KEJ] 접근성 수정 */
}
.benefit-contents-box .flag-box span.type-sav,
.benefit-contents-box .flag-box span.type-auto {
  background: #e2f0ff;
  color: #2776ce;
}
.benefit-contents-box .flag-box span.type-subs {
  background: #fff4dc;
  color: #c88d00;
}
.benefit-contents-box .flag-box span.type-shop {
  background: #ece6ff;
  color: #6a4bcb;
}
.benefit-contents-box .flag-box span.new {
  background-image: linear-gradient(117deg, #8054ff -11%, #23a9e2 58%, #23e2d7 92%);
  color: #fff;
  font-weight: 700;
}
.benefit-contents-box .flag-box span.hot {
  background-image: linear-gradient(120deg, #f33 -11%, #e513dc 106%);
  color: #fff;
  font-weight: 700;
}
.benefit-contents-box .flag-box span.type01 {
  background: #ece6ff;
  color: #6a4bcb;
}
.benefit-contents-box .txt-box {
  /* 24.05.13 수정 margin-top: 12px; */
  /* 24.05.13 수정 font-size: 14px; */
  margin-top: 17px;
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 18px;
  font-weight: 400;
}
/* 24.05.13 추가 */
.benefit-contents-box .color-txt-box {
  margin-top: 24px;
}
.benefit-contents-box .txt-box strong {
  display: inline-block;
  /* 24.05.13 수정 margin-bottom: 6px; */
  /* 24.05.13 수정 font-size: 16px; */
  font-size: 18px;
  /* 24.05.13 수정 line-height: 21px; */
  line-height: 24px;
  /* 24.05.13 수정 font-weight: 500; */
  font-weight: 600;
}
/* [2024-05-16 : hdh] display: block → inline-block 수정 */
.benefit-contents-box .txt-box span {
  display: inline-block;
  margin-top: 6px;
}
.benefit-contents-box .txt-box .date {
  display: inline-block;
  margin-top: 12px;
  color: #888;
  font-size: 12px;
  line-height: 15px;
}
.benefit-contents-box .txt-box .price {
  display: inline-block;
  margin-top: 6px;
  color: #888;
  font-size: 12px;
  line-height: 15px;
}
/* [2024-05-16 : hdh] margin-top: 0 추가 */
.benefit-contents-box .txt-box .txt-primary {
  margin-top: 0;
  color: #00a49d;
}
.benefit-contents-box .txt-box02 {
  display: flex;
  justify-content: space-between;
  /* 24.05.13 수정 margin-top: 12px; */
  align-items: center; /* 24.05.13 추가 */
  padding: 12px 14px;
  background: #d8f3f2;
  border-radius: 6px;
}
.benefit-contents-box .txt-box02 + .txt-box02 {
  margin-top: 4px;
}
.benefit-contents-box .txt-box02 em {
  color: #111;
  /* 24.05.13 수정 font-size: 15px; */
  font-size: 16px;
  line-height: 20px;
  font-style: normal;
  /* 24.05.13 수정 font-weight: 500; */
  font-weight: bold;
}
.benefit-contents-box .txt-box02 .right {
  text-align: right;
}
.benefit-contents-box .txt-box02 .right strong {
  display: block;
  color: #029c94;
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
}
.benefit-contents-box .txt-box02 .right span {
  color: #666;
  font-size: 12px;
  line-height: 15px;
  font-weight: 500;
}
.benefit-contents-box .txt-box03 {
  /* 24.05.13 수정 margin-top: 12px; */
  padding: 12px 14px;
  background: #fee7ec;
  border-radius: 6px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  /* text-align:center; */
}
.benefit-contents-box .txt-box03 em {
  font-style: normal;
  color: #be113f;
}
.benefit-contents-box .txt-box03 em span {
  font-size: 12px;
}
.benefit-contents-box .txt-box04 {
  /* 24.05.13 수정 margin-top: 12px; */
  padding: 12px 14px;
  background: #fff4dc;
  border-radius: 6px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  /* text-align:center; */
}
.benefit-contents-box .txt-box04 span {
  color: #c65300; /* [2026-07-09 KEJ] 접근성수정 */
}
.benefit-contents-box .sav-box {
  display: flex;
  margin-top: 12px;
  padding: 19px 0;
  background: #e2f0ff;
  /* border-radius: 12px; */
  border-radius: 6px;
}
.benefit-contents-box .sav-box div {
  position: relative;
  flex: 1;
  text-align: center;
}
.benefit-contents-box .sav-box div + div::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  display: inline-block;
  width: 1px;
  height: 36px;
  margin-top: -18px;
  background: #b5cce5;
}
.benefit-contents-box .sav-box strong {
  display: block;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}
.benefit-contents-box .sav-box span {
  display: block;
  margin-top: 2px;
  color: #2776ce;
  /* 24.05.13 수정 font-size: 15px; */
  font-size: 16px;
  line-height: 20px;
  /* 24.05.13 수정 font-weight: 500; */
  font-weight: 600;
}
/* [2025-06-16 KJH] [WPM-205975251] 보조 텍스트 추가*/
.benefit-contents-box .txt-desc {
  margin-top: 10px;
  font-size: 11px;
}
.benefit-contents-box02 {
  display: block;
  margin-top: 15px;
  border-radius: 10px;
  background: #d5f4ee;
}
.benefit-contents-box02 .top-box {
  padding: 16px;
}
.benefit-contents-box02 .top-box .box-sub-tit {
  font-size: 12px;
  line-height: 15px;
}
.benefit-contents-box02 .top-box strong {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  line-height: 21px;
}
.benefit-contents-box02 .top-box .hashtag-box {
  margin-top: 8px;
  font-size: 0;
}
.benefit-contents-box02 .top-box .hashtag-box span {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  background: #caede6;
  border-radius: 11px;
  color: #00706b;
  font-size: 10px;
  line-height: 21px;
  font-weight: 400;
}
.benefit-contents-box02 .link-txt {
  position: relative;
  padding: 12px 16px;
  background: #b6e8de;
  border-radius: 0 0 10px 10px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
}
.benefit-contents-box02 .link-txt::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: url(/images/icon/btn_more_setting.png) no-repeat 0 0 / 10px auto;
}
.section-tab-scroll .section-guide-box {
  margin-top: 15px;
  text-align: center;
}
.section-tab-scroll .section-guide-box p {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}
.section-tab-scroll .section-guide-box p.ins-type::before {
  content: "";
  display: block;
  height: 70px;
  background: url(/images/contents/bnr_mall_ins.png) no-repeat center top / 70px auto;
}
.section-tab-scroll .section-guide-box p.subs-type::before {
  content: "";
  display: block;
  height: 70px;
  background: url(/images/contents/bnr_life_subs.png) no-repeat center top / 70px auto;
}
/* 24.05.13 수정 .section-tab-scroll .section-guide-box a {
display: inline-block;
margin-top: 12px;
padding: 0 10px;
background: #029c94;
border-radius: 4px;
color: #fff;
font-size: 12px;
line-height: 27px;
} */

/* 보험 24.04.04 */
.ui-page-scroll-tap.type-tab {
  background: #fff;
}
.ui-page-scroll-tap.type-tab .tab-list {
  padding: 0 2.4rem;
  gap: 2.8rem;
}
.ui-page-scroll-tap.type-tab .tab-list .tab-list-link {
  position: relative;
  height: 5.4rem;
  padding: 0;
  color: #a2a2a2;
  background: #fff;
  border: 0;
  font-weight: 400;
}
.ui-page-scroll-tap.type-tab .tab-list .tab-list-link.is-active {
  color: var(--basic);
  font-weight: 500;
}
.ui-page-scroll-tap.type-tab .tab-list .tab-list-link.is-active::after {
  content: "";
  display: block;
  width: 100%;
  height: 0.3rem;
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--basic);
}
.section-title .sub02 {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  line-height: 21px;
}
.section-title .sub02 .txt-primary {
  color: #00a49d;
}
.cont-ins-box {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 84px; /* 24.05.14 추가 */
  margin-top: 15px;
  padding: 24px 20px;
  background: #fff;
  border-radius: 10px;
  box-sizing: border-box; /* 24.05.14 추가 */
}
.cont-ins-box .txt-area {
  position: relative;
  display: flex;
  align-items: center;
}
.cont-ins-box .txt-area p {
  position: relative;
  padding-right: 13px;
  color: #111;
  font-size: 16px;
  line-height: 21px;
  font-weight: 500;
}
.cont-ins-box .txt-area p span {
  display: block;
  margin-top: 4px;
  color: #888;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
}
.cont-ins-box .txt-area i {
  display: inline-block;
  width: 36px;
  height: 36px;
  margin-right: 12px;
  flex: 0 0 auto;
}
.cont-ins-box .txt-area i img {
  width: 100%;
  border-radius: 10px;
}
.cont-ins-box .txt-flag {
  padding: 4px 6px 4px 5px;
  background-color: #ebebeb;
  color: #666;
  /* font-style: normal; */
  font-size: 1rem;
  line-height: 1.3rem;
  font-weight: 700;
  text-align: center;
  border-radius: 4px;
  white-space: nowrap;
}
.cont-ins-box .txt-benefit {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  position: relative;
  /* 24.05.13 수정 height: 27px; */
  /* 24.05.14 수정 height: 36px; */
  padding: 8px;
  background: #d8f3f2;
  border-radius: 4px;
  color: #008882;
  /* 24.05.13 수정 font-size: 12px; */
  font-size: 14px;
  font-weight: 400;
  text-align: center;
}
.cont-ins-box .txt-benefit i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 9px;
}
.cont-ins-box .txt-benefit i img {
  width: 100%;
}
.cont-ins-box-area {
  --paddinBlock: 24px;
  --paddingInline: 20px;
  
  position: relative;
}
.cont-ins-box-area .cont-ins-box {
  padding: var(--paddinBlock) var(--paddingInline);
}
.cont-ins-box-area .gra-bubble.-pos-top-right {
  top: calc(var(--paddinBlock) - 1rem) ;
  right: var(--paddingInline);
}
.cont-ins-box .txt-area .grid-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 1행 2칸 */
  align-items: center;
  column-gap: 0.6rem;
}
.cont-ins-box .txt-area .grid-item-wide {
  grid-column: 1 / 3;
}

/* [2026-03-16 KJH] [WPM-14155] 응모마감 팝업 */
.layer-evt-deadline-img {
  width: 124px;
  margin: 0 auto;
}
.layer-evt-deadline-img img {
  display: block;
  width: 100%;
}

/* 24.04.09 나의자산연결유도 추가 C_mjoin_p010--type2_240405.html */
.contents-event-complete {
  padding: 18px 0;
  background: #592fbc;
  text-align: center;
  border-radius: 15px;
}
.contents-event-complete img {
  display: block;
}
.contents-event-complete .img-top {
  margin: 0 auto;
  width: 100%;
  max-width: 270px;
}
.contents-event-complete .img-coupon {
  margin: 0 auto;
  width: 100%;
  max-width: 198px;
}
.contents-event-complete .btn-coupon {
  display: block;
  width: 100%;
  max-width: 294px;
  height: 78px;
  margin: -40px auto 0;
}
.contents-event-complete .btn-coupon img {
  width: 100%;
  max-width: 294px;
  vertical-align: top;
}
.contents-event-complete .event-complete-txt {
  display: flex;
  color: #fff;
  justify-content: center;
  gap: 4px;
}
.contents-event-complete .event-complete-txt span {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}
.contents-event-complete .event-complete-txt .swiper-slide.slide-list-item {
  width: auto;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  white-space: nowrap;
}
.contents-event-complete .event-complete-txt strong {
  font-weight: 700;
}
.contents-event-complete .event-complete-txt-slide {
  margin: 0;
}
.contents-event-complete .txt-sub {
  margin-top: -4px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  line-height: 18px;
  font-weight: 400;
}
.btn-coupon-next {
  margin-top: 10px;
  text-align: center;
}
.btn-coupon-next a {
  display: inline-block;
  margin: 0 auto;
  color: #000;
  font-size: 11px;
  line-height: 18px;
  font-weight: 400;
  text-decoration: underline;
}

/* 비로그인 모바일웹 24.04.12 */
/* [2024-08-19 : shj] 헤더 변경 */
.heander-logoff-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  /* background: #000; */
  z-index: 10;
}
/* [2025-07-03 KJH] [WPM-11558] 접근성 폰트 사이즈 수정 */
.heander-logoff-main h1 {
  width: 80px;
  height: 21px;
  color: transparent;
  font-size: 1px;
  line-height: 0;
  background: url(/images/icon/ic-logoff-h1-logo.png) no-repeat 0 0 / 100% auto;
}
.heander-logoff-main .header-right {
  gap: 15px;
}
.heander-logoff-main .header-right .btn-chatbot {
  width: 32px;
  height: 32px;
}
.heander-logoff-main .header-right .btn-chatbot img {
  width: 100%;
}
.heander-logoff-main .header-right .btn-login {
  position: relative;
  padding: 0 10px;
  border: 1px solid #fff;
  border-radius: 2px;
  color: #fff;
  font-size: 13px;
  line-height: 30px;
}
.heander-logoff-main .header-right .btn-login .logoff-login-bubble {
  position: absolute;
  bottom: -42px;
  left: 50%;
  transform: translateX(-50%);
}
.heander-logoff-main .header-right .btn-login .logoff-login-bubble img {
  width: auto;
  height: 42px;
}

.heander-logoff-main .header-right .btn-menu {
  width: 24px;
  height: 24px;
  background: url(/images/icon/ic-logoff-menu.png) no-repeat center center / 24px auto;
  font-size: 0;
  line-height: 0;
}
/* [2024-08-23 : shj] 풀기 */
.heander-logoff-main.bg-white {
  background: #fff;
}
.heander-logoff-main.bg-white h1 {
  background: url(/images/icon/ic-logoff-h1-logo-02.png) no-repeat 0 0 / 100% auto;
}
.heander-logoff-main.bg-white .header-right .btn-login {
  border: 1px solid #111;
  color: #111;
}
.heander-logoff-main.bg-white .header-right .btn-menu {
  background: url(/images/icon/ic-logoff-menu-02.png) no-repeat center center / 24px auto;
}

.logoff-main .section-top-slide .banner-slide-contents02 .swiper-slide {
  padding-top: 50px;
}
.section-top-slide .banner-slide-contents02 {
  position: relative;
}
.section-top-slide .banner-logoff-container {
  overflow: hidden;
  padding-bottom: 24px;
}
.section-top-slide .banner-slide-contents02 .swiper-pagination {
  position: static;
  display: inline-block;
  width: auto;
  margin-top: 0;
}
.section-top-slide .banner-slide-contents02 {
  overflow: hidden;
}
.section-top-slide .banner-slide-contents02 .swiper-slide {
  text-align: center;
}
.section-top-slide .banner-slide-contents02 .swiper-pagination {
  margin-top: 5px;
  vertical-align: top;
}
.section-top-slide .banner-slide-contents02 .swiper-pagination-bullet {
  width: 4px;
  height: 4px;
  margin: 0 2px;
  border: 0;
  background: rgba(51, 61, 66, 0.5);
}
.section-top-slide .banner-slide-contents02 .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 20px;
  height: 4px;
  border-radius: 2px;
  background: rgba(51, 61, 66, 1);
}
.section-top-slide .banner-logoff-slide-controller {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0;
}
.section-top-slide .banner-logoff-slide-controller .btn-banner-logoff-controller {
  vertical-align: top;
  margin-top: 1px;
  margin-left: 10px;
}
.section-top-slide .banner-logoff-slide-controller .btn-banner-logoff-controller.stop {
  width: 12px;
  height: 12px;
  background: url(/images/icon/ic-pause.svg) center no-repeat;
  background-size: 100%;
}
.section-top-slide .banner-logoff-slide-controller .btn-banner-logoff-controller.play {
  width: 12px;
  height: 12px;
  background: url(/images/icon/ic-play.svg) center no-repeat;
  background-size: 100%;
}
.page-contents.logoff-main {
  padding: 0;
}
.page-contents.logoff-main h2 {
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
}
@media (max-width: 360px) {
  .page-contents.logoff-main h2 {
      font-size: 18px;
  }
}
.section-top-banner {
  padding: 30px 24px 0;
}
.section-top-banner a {
  position: relative;
  display: block;
  padding: 20px;
  border-radius: 16px;
}
.section-top-banner a::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.section-top-banner a p {
  padding-right: 68px;
  color: #111;
  font-size: 16px;
  line-height: 21px;
  font-weight: 700;
}
.section-top-banner a span {
  display: block;
  margin-top: 13px;
  color: #00a49d;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.section-top-banner a span::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 2px;
  background: url(/images/icon/ic-arrow-primary.png) no-repeat 0 0 / 100% auto;
}
.section-top-banner a.bnr-type01 {
  background: #e1f5f4;
}
.section-top-banner a.bnr-type01::after {
  right: 15px;
  width: 68px;
  height: 80px;
  background: url(/images/icon/ic-logoff-bnr01.png) no-repeat 0 0 / 100% auto;
}
.section-top-banner a.bnr-img {
  padding: 0;
  border-radius: 0;
}
.section-top-banner a.bnr-img img {
  width: 100%;
  border-radius: 10px;
}
.section-card-tab {
  padding: 40px 24px 0; /* [2025-08-06 kho] padding-bottom 삭제 */
}
.section-card-tab h2::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  margin-left: 5px;
  background: url(/images/icon/ic-logoff-tit01.png) no-repeat 0 0 / 100% auto;
  vertical-align: top;
}
.section-card-tab .card-tab {
  display: flex;
  gap: 4px;
  margin-top: 12px;
}
.section-card-tab .card-tab a {
  display: block;
  padding: 0 13px;
  border: 1px solid #e5e5e5;
  border-radius: 15px;
  font-size: 14px;
  line-height: 28px;
  font-weight: 400;
}
.section-card-tab .card-tab .active a {
  border-color: #8665ef;
  background: #8665ef;
  color: #fff;
}
.page-contents.logoff-main .main-card-list,
.page-contents.apply-main .main-card-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.page-contents.logoff-main .section-card-tab .main-card-list {
  display: none;
}
.page-contents.logoff-main .section-card-tab .main-card-list.is-show {
  display: flex;
}
.page-contents.apply-main .main-card-list li,
.page-contents.logoff-main .main-card-list li {
  width: 33.33%;
  margin-top: 20px;
  text-align: center;
}
.page-contents.logoff-main .section-card-tab .main-card-list li {
  display: none;
}
.page-contents.logoff-main .section-card-tab .main-card-list li.is-show {
  display: block !important;
}
.page-contents.apply-main .main-card-list li img,
.page-contents.logoff-main .main-card-list li img {
  width: 70px;
}
.page-contents.logoff-main .main-card-list li .txt01,
.page-contents.apply-main .main-card-list li .txt01 {
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 6px;
  color: #181818;
  font-size: 13px;
  line-height: 18px;
}
.page-contents.logoff-main .main-card-list li .txt02,
.page-contents.apply-main .main-card-list li .txt02 {
  display: block;
  margin-top: 2px;
  color: #181818;
  font-size: 13px;
  line-height: 18px;
  word-break: keep-all;
}
.page-contents.logoff-main .main-card-list li .txt-hash,
.page-contents.apply-main .main-card-list li .txt-hash {
  display: block;
  margin-top: 6px;
  color: #181818;
  font-size: 11px;
  line-height: 14px;
}
.page-contents.logoff-main .main-card-list li .txt-hash span,
.page-contents.apply-main .main-card-list li .txt-hash span {
  color: #8665ef;
}
.page-contents.logoff-main .main-card-list li .card-img,
.page-contents.apply-main .main-card-list li .card-img {
  position: relative;
  display: block;
  width: 70px;
  padding-top: 111px;
  margin: 0 auto;
}
.page-contents.logoff-main .main-card-list li .card-img img,
.page-contents.apply-main .main-card-list li .card-img img {
  position: absolute;
  left: 100%;
  top: 0;
  width: 111px;
  height: 70px;
  transform: rotate(90deg);
  transform-origin: 0 0;
}
.section-card-tab .btn-more a {
  display: flex;
  width: 100%;
  height: 48px;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.section-card-tab .btn-more a::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  background: url(/images/icon/ic-select-arrow-black.svg) no-repeat 0 0 / 100% auto;
}
.section-card-tab .btn-more.type-show a::after {
  transform: rotate(180deg);
}
.section-rolling-banner {
  margin-top: 24px; /* [2025-08-06 kho] 추가 */
  padding: 40px 0;
  background: #c3ebea url(/images/contents/bg-rolling-section.png) no-repeat 100% 0 / 360px auto;
}
.page-contents.logoff-main .section-rolling-banner h2 {
  padding: 0 24px;
  font-size: 25px;
  line-height: 32px;
}
.page-contents.logoff-main .section-rolling-banner h2 span {
  font-weight: 400;
}
.rolling-banner-slide {
  margin-top: 35px;
  /* 24.05.29 수정 : sayho : padding-left: 24px; */
  padding: 0 24px;
  overflow: hidden;
}
.rolling-banner-slide .swiper {
  overflow: visible;
}
.rolling-banner-slide li {
  display: flex;
  height: auto;
}
.rolling-banner-slide li a {
  display: block;
  padding: 20px 16px;
  background: #fff;
  border-radius: 14px;
  text-align: center;
}
.rolling-banner-slide li a img {
  width: 77.12%;
}
.rolling-banner-slide li a p {
  margin: 24px -5px 0;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
}
.rolling-banner-slide li a p strong {
  font-weight: 700;
  word-break: keep-all;
}
.rolling-banner-slide .swiper-button-prev-text,
.rolling-banner-slide .swiper-button-next-text {
  font-size: 0;
}
.rolling-banner-slide .rolling-banner-slide-controller {
  position: relative;
  text-align: center;
  margin-top: 10px;
}
.rolling-banner-slide .rolling-banner-slide-controller .swiper-pagination {
  position: static;
  display: inline-block;
  width: auto;
  margin-top: 2px;
  vertical-align: top;
}
.rolling-banner-slide .rolling-banner-slide-controller .rolling-banner-controller {
  vertical-align: top;
  margin-left: 4px;
}
.rolling-banner-slide .rolling-banner-slide-controller .rolling-banner-controller.stop {
  width: 12px;
  height: 12px;
  background: url(/images/icon/ic-pause.svg) center no-repeat;
  background-size: 100%;
}
.rolling-banner-slide .rolling-banner-slide-controller .rolling-banner-controller.play {
  width: 12px;
  height: 12px;
  background: url(/images/icon/ic-play.svg) center no-repeat;
  background-size: 100%;
}
.section-mycard {
  padding: 40px 24px;
}
.section-mycard h2::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  margin-left: 5px;
  background: url(/images/icon/ic-logoff-tit02.png) no-repeat 0 0 / 100% auto;
  vertical-align: top;
}
.section-loan-list {
  padding: 40px 24px;
  background: #f4f6f8;
}
.section-loan-list .loan-list {
  margin-top: 14px;
  background: #fff;
  border-radius: 14px;
}
.section-loan-list .loan-list li {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
}
.section-loan-list .loan-list li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: calc(100% - 48px);
  height: 1px;
  margin: 0 24px;
  background: #e5e5e5;
}
.section-loan-list .loan-list li:last-child:after {
  display: none;
}
.section-loan-list .loan-list li p {
  flex: 1 1 auto;
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
}
.section-loan-list .loan-list li a {
  flex: 0 0 auto;
  padding: 0 10px;
  border-radius: 4px;
  background: #029c94;
  color: #fff;
  font-size: 12px;
  line-height: 26px;
  font-weight: 400;
}
.section-bnr-slide {
  padding: 40px 24px 0;
}
.section-bnr-slide .banner-slide-contents {
  overflow: hidden;
}
.section-bnr-slide .banner-slide-contents .swiper-pagination {
  margin-top: 5px;
  vertical-align: top;
}
.section-bnr-slide .banner-slide-contents .swiper-pagination-bullet {
  width: 4px;
  height: 4px;
  margin: 0 2px;
  border: 0;
  background: rgba(51, 61, 66, 0.5);
}
.section-bnr-slide .banner-slide-contents .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 20px;
  height: 4px;
  border-radius: 2px;
  background: rgba(51, 61, 66, 1);
}
.section-bnr-slide .banner-slide-contents .banner-coupon-slide-controller .btn-banner-coupon-controller.stop,
.section-bnr-slide .banner-slide-contents .banner-coupon-slide-controller .btn-banner-coupon-controller.play {
  width: 12px;
  height: 12px;
  margin-left: 10px;
}
.section-customer {
  padding: 40px 24px 40px;
}
.section-customer .customer-list {
  margin-top: 14px;
}
.section-customer .customer-list li {
  margin-top: 12px;
}
.section-customer .customer-list li a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 11px 30px 11px 20px;
  background: #f4f6fb;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
}
.section-customer .customer-list li a::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 34px;
  margin-right: 18px;
}
.section-customer .customer-list li a::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: url(/images/icon/benefit_btn_arrow.svg) no-repeat 0 0 / 100% auto;
}
.section-customer .customer-list li.img01 a::before {
  background: url(/images/icon/ic-customer-list01.png) no-repeat 0 0 / 100% auto;
}
.section-customer .customer-list li.img02 a::before {
  background: url(/images/icon/ic-customer-list02.png) no-repeat 0 0 / 100% auto;
}
.section-app-down {
  padding: 40px 0;
  /* background: #f8f8f8; */
  text-align: center;
}
.section-app-down p {
  font-size: 18px;
  line-height: 21px;
  font-weight: 700;
}
.section-app-down a {
  display: block;
  margin-top: 15px;
  padding-top: 70px;
  color: #00a49d;
  font-size: 15px;
  line-height: 18px;
  font-weight: 500;
  background: url(/images/icon/ic-hanapay-logo.png) no-repeat 50% 0 / 55px auto;
}
.section-app-down a::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 2px;
  background: url(/images/icon/ic-arrow-primary.png) no-repeat 0 0 / 100% auto;
}

/* 24.04.12 이벤트 상세 상단 광고베너 영역 추가 */
.mka-event-top-banner-link {
  display: block;
  margin: 20px -24px -18px; /* [2025-04-10 kho] [WPM-10700] 수정 */
}
.mka-event-top-banner-link img {
  display: block;
  width: 100%;
}

/* 24.04.16 혜택탭 css 수정 */
.benefit-page-section.section-event-list .benefit-banner-list {
  min-height: 800px;
}
/* 하나pick 24.04.18 sayho */
.page-contents.hana-pick-contents {
  padding: 0 0 35px 0;
}
.page-contents.hana-pick-contents section {
  margin-top: 48px;
}
.page-contents.hana-pick-contents section:first-child {
  margin-top: 0;
}
.page-contents.hana-pick-contents h2 {
  padding: 0 24px;
}
.page-contents.hana-pick-contents .title-text {
  padding: 0 24px;
  line-height: 18px;
  font-weight: 400;
}
.page-contents.hana-pick-contents .section-coupon .title-text {
  color: #888;
}
.page-contents.hana-pick-contents .top-section {
  position: relative;
  min-height: 321px;
  padding-top: 164px;
  box-sizing: border-box;
}
@media (max-width: 360px) {
  .page-contents.hana-pick-contents .top-section {
      padding-top: 45.5%;
  }
}
.page-contents.hana-pick-contents .top-section .top-banner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  text-align: center;
  height: 322px;
}
.page-contents.hana-pick-contents .top-section .top-banner img {
  width: 100%;
  max-width: 360px;
}
.page-contents.hana-pick-contents .top-section .txt-alert-box {
  position: relative;
  margin: 0 24px;
}
.page-contents.hana-pick-contents .top-section .txt-alert-box .alert-box {
  display: flex;
  margin-bottom: 16px;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
  border-radius: 16px;
}
.page-contents.hana-pick-contents .top-section .txt-alert-box .alert-box a {
  display: flex;
  align-items: center;
  color: #000;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}
.page-contents.hana-pick-contents .top-section .txt-alert-box .alert-box a img {
  width: 24px;
  height: 24px;
  margin-right: 6px;
}
.page-contents.hana-pick-contents .top-section .txt-alert-box .alert-box .alert-close {
  width: 18px;
  height: 18px;
  background: url(/images/icon/btn_pick_alert_close.png) no-repeat 0 0 / 100% auto;
  font-size: 0;
  line-height: 0;
  flex: 0 0 auto;
}
.page-contents.hana-pick-contents .top-section .my-benefit-box {
  position: relative;
  margin: 0 24px;
  padding: 32px 0 24px;
  background: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  text-align: center;
}
.page-contents.hana-pick-contents .top-section .my-benefit-box .benefit-box-top p {
  color: #888;
  font-size: 13px;
  line-height: 18px;
}
.page-contents.hana-pick-contents .top-section .my-benefit-box .benefit-box-top span {
  display: block;
  margin-top: 4px;
  color: #029c94;
  font-size: 26px;
  line-height: 35px;
  font-weight: 700;
}
.page-contents.hana-pick-contents .top-section .my-benefit-box .benefit-box-top span strong {
  font-size: 28px;
  font-weight: 700;
}
.page-contents.hana-pick-contents .top-section .my-benefit-box .my-pick-cont {
  display: flex;
  margin-top: 24px;
}
.page-contents.hana-pick-contents .top-section .my-benefit-box .my-pick-cont .txt-my-pick {
  display: block;
  color: #888;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}
.page-contents.hana-pick-contents .top-section .my-benefit-box .my-pick-cont .txt-my-benefit {
  display: block;
  margin-top: 4px;
  color: #111;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
}
.page-contents.hana-pick-contents .top-section .my-benefit-box .my-pick-cont .txt-my-benefit strong {
  font-size: 20px;
  font-weight: 700;
}
/* [2024-07-04 : shj] > 추가 */
.page-contents.hana-pick-contents .top-section .my-benefit-box .benefit-box-top span::after,
.page-contents.hana-pick-contents .top-section .my-benefit-box .my-pick-cont .txt-my-benefit::after {
  content: ">";
  padding-left: 10px;
  font-weight: 500;
}

.page-contents.hana-pick-contents .top-section .my-benefit-box .my-pick-cont > div {
  flex: 1;
}
.page-contents.hana-pick-contents .top-section .my-benefit-box .my-pick-cont > div + div {
  position: relative;
}
.page-contents.hana-pick-contents .top-section .my-benefit-box .my-pick-cont > div + div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  width: 1px;
  height: 40px;
  background: #e5e5e5;
  transform: translateY(-50%);
}
.page-contents.hana-pick-contents .top-section .top-cont-btns {
  position: absolute;
  right: 24px;
  top: 24px;
  font-size: 0;
}
.page-contents.hana-pick-contents .top-section .top-cont-btns a {
  display: inline-block;
  padding: 0 8px;
  margin-left: 6px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 13px;
  color: #888;
  font-size: 12px;
  line-height: 24px;
  font-weight: 400;
}
.section-hot-pick .benefit-slide {
  position: relative;
  margin: 0;
  padding: 20px 24px 30px;
  box-sizing: border-box;
}
.section-hot-pick .benefit-slide .card-detail {
  width: 100px;
}
/* 2024.06.03 접근성 play/stop 버튼 추가 sayho */
.section-hot-pick .benefit-slide .benefit-slide-controller .swiper-pagination {
  position: static;
  display: inline-block;
  width: auto;
  margin: 3px 5px 0 0;
}
.section-pick-list {
  position: relative;
  padding-top: 28px;
}
.section-pick-list .section-title,
.section-coupon .section-title {
  margin-bottom: 4px;
}
.section-pick-list > * {
  position: relative;
}
.section-pick-list::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 182px;
  border-radius: 0 0 30px 30px;
}
.section-pick-list.title-bg01::before {
  background-image: linear-gradient(95deg, #e8fffe -91%, #80cdca 166%);
}
.section-pick-list.title-bg02::before {
  background-image: linear-gradient(95deg, #f2eeff -91%, #c3b2f7 166%);
}
.pick-item-list {
  margin-top: 40px;
  padding: 0 24px;
}
.pick-item-list li {
  margin-top: 12px;
}
.pick-item-list li:first-child {
  margin-top: 0;
}
.pick-item-list li a {
  display: flex;
  align-items: center;
  padding: 24px 20px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
}
.pick-item-list li a::after {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  background: url(/images/icon/btn-more-l.svg) no-repeat 0 0 / 100% auto;
}
.pick-item-list li a .ic-benefit {
  width: 50px;
  height: 50px;
  margin-right: 12px;
  flex: 0 0 auto;
}
.pick-item-list li a .ic-benefit img {
  width: 100%;
  border-radius: 16px;
}
.pick-item-list li a .benefit-box {
  flex: 1;
}
.pick-item-list li a .benefit-box span {
  color: #666;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
}
.pick-item-list li a .benefit-box p {
  margin-top: 4px;
  color: #111;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}
/* 2024.06.03 이미지타입 추가 - sayho */
.pick-item-list li.type-image a {
  position: relative;
  padding: 0;
  overflow: hidden;
}
.pick-item-list li.type-image a::after {
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -5px;
}
.pick-item-list li.type-image a img {
  width: 312px;
}
@media (max-width: 360px) {
  .pick-item-list li.type-image a img {
      width: 100%;
  }
}

.section-coupon .coupon-list {
  margin-top: 20px;
}
.section-coupon .coupon-list ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  padding: 0 24px;
}
.section-coupon .coupon-list ul li {
  display: flex;
  width: 146px;
  flex: 0 0 146px;
}
.section-coupon .coupon-list ul li a {
  display: block;
  width: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  overflow: hidden;
}
.section-coupon .coupon-list ul li .coupon-img {
  display: block;
  width: 100%;
  height: 144px;
  border-bottom: 2px dashed #e5e5e5;
}
.section-coupon .coupon-list ul li .coupon-img img {
  width: 100%;
}
.section-coupon .coupon-list ul li .coupon-info {
  padding: 16px 12px 20px;
}
.section-coupon .coupon-list ul li .coupon-info p {
  height: 36px;
  font-size: 14px;
  line-height: 18px;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* [2025-08-04 kjy] [WPM-11777] 1차APP접근성수정 */
.section-coupon .coupon-list ul li .coupon-info .txt-price01 {
  display: block;
  position: relative;
  margin-top: 4px;
  color: #111;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}
.section-coupon .coupon-list ul li .coupon-info .txt-price01 em {
  display: inline-block;
  margin: 1px 4px 0 0;
  color: #be113f;
  font-style: normal;
  font-size: 14px;
  line-height: 24px;
  font-weight: 700;
  vertical-align: top;
}
/* [2025-08-04 kjy] [WPM-11777] 1차APP접근성수정 */
.section-coupon .coupon-list ul li .coupon-info .txt-price02 {
  position: relative;
  color: #888;
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
  text-decoration: line-through;
}
.section-pick-total .section-title {
  margin-bottom: 0;
}
.section-pick-total .pick-contents-tab .pick-tab-box {
  display: flex;
  padding: 0 24px;
  border-bottom: 1px solid #e5e5e5;
  gap: 28px;
}
.section-pick-total .pick-contents-tab .pick-tab-box li {
  flex: 0 0 auto;
}
.section-pick-total .pick-contents-tab .pick-tab-box li a {
  position: relative;
  display: block;
  padding: 17px 0;
  color: #888;
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
}
.section-pick-total .pick-tab-box li.active a {
  color: #111;
  font-weight: 500;
}
.section-pick-total .pick-tab-box li.active a::after {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -1px;
  background: #111;
}
.section-pick-total .pick-contents-inner-tab {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 24px 24px 12px;
  overflow-x: auto;
}
.section-pick-total .pick-contents-inner-tab li {
  flex: 0 0 60px;
}
.section-pick-total .pick-contents-inner-tab li a {
  display: flex;
  width: auto;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}
.section-pick-total .pick-contents-inner-tab li a span {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
  flex: 0 0 auto;
  box-sizing: border-box;
  background-color: #f5f5f5;
  border-radius: 50%;
}
.section-pick-total .pick-contents-inner-tab li a span img {
  position: relative;
  width: 56px;
  margin-top: 2px;
}
.section-pick-total .pick-contents-inner-tab li a em {
  margin-top: 8px;
  font-style: normal;
  color: #888;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}
.section-pick-total .pick-contents-inner-tab li.active a span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, #4cb8c4, #3cd3ad);
  border-radius: 50%;
}
.section-pick-total .pick-contents-inner-tab li.active a em {
  color: #111;
}
.pick-contents-list {
  padding: 0 24px;
}
.pick-contents-list li {
  position: relative;
  display: flex;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid #e5e5e5;
}
.pick-contents-list li .ic-benefit {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  margin-right: 12px;
}
.pick-contents-list li .ic-benefit img {
  width: 100%;
  border-radius: 16px;
}
.pick-contents-list li .benefit-box {
  flex: 1;
}
.pick-contents-list li .benefit-box .txt-brand {
  display: block;
  color: #666;
  font-size: 14px;
  line-height: 18px;
}
.pick-contents-list li .benefit-box p {
  margin-top: 4px;
  color: #111;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}
/* [2025-07-22 kjy] [WPM-11777] APP접근성1차심사 : color변경(명도대비) */
.pick-contents-list li .btn-pick {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 11px;
  height: 30px;
  margin-left: 12px;
  background: #d8f3f2;
  border-radius: 15px;
  color: #2776CE;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
}
.pick-contents-list li .btn-pick::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(/images/icon/btn_pick_heart.png) no-repeat 0 0 / 100% auto;
  margin: 2px 2px 0 -2px;
}
.pick-contents-list li .btn-pick.end {
  position: relative;
  display: flex;
  padding: 0 14px;
  background: #e5e5e5;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  color: #888;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}
.pick-contents-list li .btn-pick.active {
  position: relative;
  display: flex;
  padding: 0 14px;
  background: #e5e5e5;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  color: #111;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}
.pick-contents-list li .btn-pick.end::before,
.pick-contents-list li .btn-pick.active::before {
  display: none;
}
.pick-contents-list li .benefit-box .txt-date {
  display: block;
  margin-top: 10px;
  font-style: normal;
  color: #888;
  font-size: 11px;
  line-height: 17px;
  font-weight: 400;
}
.pick-contents-list li .benefit-box .txt-date .flag01 {
  display: inline-block;
  margin-right: 4px;
  padding: 0 4px;
  border-radius: 4px;
  background: #fee7ec;
  color: #f14a76;
  font-size: 10px;
  line-height: 17px;
  vertical-align: top;
}
.pick-contents-list li .txt-date02 {
  position: absolute;
  right: 24px;
  top: 27px;
  font-style: normal;
  color: #888;
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
}
.pick-contents-box .btn-pick-all {
  margin-top: 36px;
  padding: 0 24px;
}
.pick-contents-box .btn-pick-all a {
  display: block;
  border: 1px solid #111;
  border-radius: 6px;
  font-size: 15px;
  line-height: 48px;
  text-align: center;
}
.pick-contents-box .nodata-mypick {
  padding: 120px 0;
  text-align: center;
  color: #111;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}
.pick-contents-box .nodata-mypick span {
  color: #008882;
}
.layer-my-pick h3 {
  color: #111;
  font-size: 17px;
  line-height: 21px;
  font-weight: 500;
}
.layer-my-pick .sub-text {
  color: #888;
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
}
.layer-my-pick .step-list-mypick > li {
  margin-top: 40px;
}
.layer-my-pick .step-list-mypick .step-title {
  color: #111;
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
}
.layer-my-pick .step-list-mypick .step-title .step-numb {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  background: #111;
  border-radius: 9px;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  font-weight: 400;
  text-align: center;
}
.layer-my-pick .step-list-mypick .step-title strong {
  color: #029c94;
  font-weight: 700;
}
.layer-my-pick .pick-contents-list {
  margin-top: 16px;
}
.layer-my-pick .pick-contents-list li {
  padding: 24px 20px;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
}
.layer-my-pick .pick-contents-list li + li {
  margin-top: 12px;
}
.layer-my-pick .pick-contents-list li.type-highlight {
  position: relative;
  background-image: linear-gradient(to bottom, #4cb8c4, #3cd3ad);
  border-color: transparent;
}
.layer-my-pick .pick-contents-list li.type-highlight > * {
  position: relative;
}
.layer-my-pick .pick-contents-list li.type-highlight::before {
  content: "";
  display: block;
  position: absolute;
  left: 2px;
  top: 2px;
  right: 2px;
  bottom: 2px;
  border-radius: 14px;
  background: #fff;
}
.my-pick-detail {
  position: relative;
}
.mypick-detail-title {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  padding: 32px 0 40px;
  border-bottom: 1px solid #e5e5e5;
  background: #fff;
  z-index: 10;
}
.mypick-detail-title .ic-benefit {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  margin-right: 12px;
}
.mypick-detail-title .ic-benefit img {
  width: 100%;
  border-radius: 16px;
}
.mypick-detail-title h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 20px;
  line-height: 28px;
}
.mypick-detail-title h3 span {
  width: 100%;
  color: #888;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
}
.mypick-detail-cont .mypick-detail-section {
  margin-top: 40px;
}
.mypick-detail-cont .mypick-detail-section h4 {
  margin-bottom: 10px;
  color: #111;
  font-size: 17px;
  line-height: 21px;
  font-weight: 700;
}
.mypick-detail-cont .mypick-detail-section p {
  color: #888;
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
}
.mypick-detail-cont .mypick-detail-section p a {
  display: block;
  word-break: break-all;
}
.my-pick-detail .slide-benefit .slide-benefit-item img {
  width: 100%;
  border-radius: 12px;
}
.my-pick-detail .slide-benefit > .swiper-object > .swiper-pagination-bullets {
  margin: 16px 0 0;
}
.my-pick-detail .use-notice-area + .use-notice-area {
  margin-top: 8px;
}
.my-pick-detail .use-notice-area .info-item p a {
  word-break: break-all;
}

/* 24.04.22 혜택탭 개선 추가 및 수정 */
.renew-benefit-fix-bottom-modal.type-color-bg {
  background: linear-gradient(179deg, #23a699 2%, #029c8c 95%);
}
.renew-benefit-fix-bottom-modal.type-color-bg .fix-bottom-modal-txt {
  color: #fff;
  font-weight: 500;
  background: url(/images/new_benefit_images/ic_graph_modal_closed.gif) no-repeat;
  background-size: 24px;
}
.renew-benefit-fix-bottom-modal.type-color-bg .fix-bottom-modal-link::after {
  filter: invert();
}
.layer-monthly-benefit-chart-wrap .header__title.type-new-icon {
  background: url(/images/new_benefit_images/ic_graph_modal_open.gif) no-repeat;
  background-position: left 4px;
  background-size: 24px;
}
.layer-monthly-benefit-chart-wrap .tab-month-content.is-skeleton .month-benefit-amount-skeleton {
  display: block;
  width: 150px;
  height: 35px;
  background-color: var(--skeleton);
  border-radius: 8px;
}
.layer-monthly-benefit-chart-wrap .tab-month-content.is-skeleton .amount-title {
  display: none;
}
.layer-monthly-benefit-chart-wrap .tab-month-content .month-benefit-amount-skeleton {
  display: none;
}
.layer-monthly-benefit-chart-wrap .section-my-record.type-shopping {
  padding-top: 36px;
  border-top: 1px solid #e9ecef;
}
.layer-monthly-benefit-chart-wrap .section-my-record.type-shopping .ui-rangeslider .rangeslider--horizontal .rangeslider__handle {
  top: 14px;
  margin-top: 0;
  width: 6px;
  height: 6px;
  margin-left: -11px;
}
.layer-monthly-benefit-chart-wrap .section-my-record.type-shopping .area-my-shopping .point-progress {
  margin-top: 50px;
}
.layer-monthly-benefit-chart-wrap .section-my-record.type-shopping .area-my-shopping .my-shopping-banner-link {
  display: block;
  width: 100%;
  margin-top: 24px;
  border-radius: 10px;
  overflow: hidden;
}
.layer-monthly-benefit-chart-wrap .section-my-record.type-shopping .area-my-shopping .my-shopping-banner-link img {
  width: 100%;
}
.layer-monthly-benefit-chart-wrap .section-my-record.type-shopping .area-my-shopping .my-shopping-info-text {
  margin-top: 12px;
  font-size: 1.1rem;
  color: #888;
}
.layer-monthly-benefit-chart-wrap .section-my-record-link-01 {
  font-weight: 700;
}
.layer-monthly-benefit-chart-wrap .area-my-shopping .point-progress-object-bar {
  background: linear-gradient(89deg, #00a49d 0%, #008882 100%);
}
.layer-monthly-benefit-chart-wrap .area-my-shopping .chart-bubble {
  border-color: #00a49d;
}
.layer-monthly-benefit-chart-wrap .area-my-shopping .chart-bubble::before {
  border-color: #00a49d;
}
.layer-monthly-benefit-chart-wrap .area-my-shopping .chart-bubble-text {
  color: #00a49d;
}

/* 보험진단 개인화팝업 - 마데작업이였던부분 일부 긁어옴 24.04.19 sayho */
.ui-layer.layer-hea {
  background: #f8f8f8;
}
.ui-layer.layer-hea .ui-layer__foot {
  background: #fff;
}
.ui-layer.layer-hea .ui-layer__body .hea-top-box {
  padding: 0 24px 30px;
}
.top-tab-box {
  position: relative;
}
.top-tab-box .btn-health-info {
  position: absolute;
  bottom: 50%;
  right: 0;
  transform: translateY(50%);
}
.top-tab-box .btn-health-info .my-select-type * {
  font-size: 13px;
  line-height: 15px;
  color: #888;
}
.top-tab-box .btn-health-info .my-select-type:after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 4px;
  background: url("/images/icon/my-2-ic-Tooltip.png") no-repeat 0 0 / 100% auto;
  vertical-align: top;
}
.btn-tab-box {
  font-size: 0;
  margin-left: -5px;
}
.btn-tab-box li {
  display: inline-block;
  margin-left: 5px;
}
.btn-tab-box li button {
  padding: 0 14px;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 15px;
  color: #111;
  font-size: 14px;
  line-height: 28px;
  font-weight: 400;
}
.btn-tab-box li.active button {
  background: #111;
  color: #fff;
  border-color: #111;
  font-weight: 700;
}
.hea-main-graph {
  margin-top: 15px;
  border-radius: 10px;
  background: #fff;
  padding: 20px;
}
.hea-graph-box {
  position: relative;
  width: 100%;
}
.hea-graph-box::before {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  top: 65px;
  border-bottom: 1px dotted #aaa;
}
.hea-graph-box::after {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  bottom: 22px;
  border-bottom: 1px solid #eee;
}
.hea-main-graph.img-graph {
  padding: 0;
}
.hea-main-graph.img-graph .hea-graph-box::before,
.hea-main-graph.img-graph .hea-graph-box::after {
  display: none;
}
.hea-graph-box ul {
  display: flex;
  justify-content: center;
  padding-bottom: 22px;
}
.hea-graph-box ul li {
  position: relative;
  display: flex;
  width: 30px;
  height: 130px;
  padding: 0 12px;
  align-items: flex-end;
}
.hea-graph-box ul li .bar {
  position: relative;
  display: block;
  width: 100%;
  background: #01a6a0;
  border-radius: 8px 8px 0 0;
}
.hea-graph-box ul li.lack-type .bar {
  background: #ce2d2d;
}
.hea-graph-box ul li.half-type .bar {
  background: #faac00;
}
.hea-graph-box ul li.lack-type .bar::after {
  content: "부족";
  position: absolute;
  left: -4px;
  top: -30px;
  right: -4px;
  display: block;
  color: #ce2d2d;
  border: 1px solid #ce2d2d;
  background: #fff;
  font-size: 11px;
  line-height: 20px;
  text-align: center;
  border-radius: 11px;
  font-weight: 700;
}
.hea-graph-box ul li em {
  position: absolute;
  bottom: -22px;
  left: 0;
  display: block;
  width: 100%;
  color: #888;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  font-weight: 400;
  font-style: normal;
}
.hea-main-top-banner {
  display: flex;
  background: #fff;
  margin-top: 15px;
  padding: 8px 15px;
  border-radius: 10px;
  align-items: center;
}
.hea-main-top-banner::before {
  content: "";
  display: block;
  width: 78px;
  height: 78px;
  flex: 0 0 auto;
}
.hea-main-top-banner .banner-txt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: 8px;
  flex: 1;
}
.hea-main-top-banner .banner-txt p {
  font-size: 15px;
  line-height: 20px;
}
.hea-main-top-banner .banner-txt p strong {
  font-weight: bold;
}
.hea-main-top-banner .banner-txt p .txt-red {
  color: #ce2d2d;
}
.hea-main-top-banner .banner-txt p .type-link {
  display: block;
  margin-top: 4px;
  color: rgba(102, 102, 102, 0.8);
  font-size: 13px;
  line-height: 17px;
}
.hea-main-top-banner .banner-txt p .type-link::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 17px;
  margin-left: 5px;
  background: url("/images/md/my-2-ic-arrow_t_grey.png") no-repeat center / auto 11px;
  vertical-align: top;
}
.hea-main-top-banner.hea-top-banner01::before {
  background: url("/images/md/img_hea_banner01.png") no-repeat 0 0 / 100% auto;
}
.hea-main-top-banner.hea-top-banner02::before {
  background: url("/images/md/img_hea_banner02.png") no-repeat 0 0 / 100% auto;
}
.hea-main-top-banner.hea-top-banner03 {
  background: #e3e7ff;
}
.hea-main-top-banner.hea-top-banner03::before {
  background: #e3e7ff url("/images/contents/img_hea_banner03.png") no-repeat 0 0 / 100% auto;
}
.ui-layer.layer-hea .hea-btm-box {
  background: #fff;
  padding: 30px 20px;
}

/* 이벤트 참여 불가 팝업 24.03.29 -- 하나페이로 이동날짜:24.04.23 */
.guide-desc-box {
  padding: 0 24px;
}
.guide-desc-box .event-guide-desc {
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
  text-align: center;
}
.guide-desc-box .event-guide-desc strong {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 20px;
  line-height: 27px;
  font-weight: 700;
}
.guide-desc-box .event-guide-desc::before {
  content: "";
  display: block;
  height: 70px;
  margin-bottom: 15px;
  background: url(/images/contents/ic-guide-desc.png) no-repeat 50% 50% / auto 100%;
}
.popup-gray-box {
  margin-top: 15px;
  padding: 15px 20px;
  background: #f4f6f8;
  border-radius: 10px;
}
.popup-gray-box ul {
  margin-top: 0;
}
.popup-gray-box ul li {
  position: relative;
  padding-left: 10px;
  color: #999;
  font-size: 13px;
  line-height: 17px;
}
.popup-gray-box ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  display: block;
  width: 6px;
  height: 1px;
  background: #999;
}
.popup-gray-box ul li + li {
  margin-top: 4px;
}
/* 보험진단 관련 2024.02.01 -- 하나페이로 이동날짜:24.04.23 */
.pop-txt-ins {
  padding-top: 106px;
  text-align: center;
  background: url(/images/md/ico_popup_ins.png) no-repeat center 0 / auto 92px;
}
.pop-txt-ins .txt-type01 {
  margin-bottom: 11px;
  color: #111;
  font-size: 18px;
  line-height: 22px;
  font-weight: bold;
}
.pop-txt-ins p {
  margin-top: 6px;
}
.pop-txt-ins p span {
  display: inline-block;
  padding: 0 18px;
  border-radius: 17px;
  background: #f4f6f8;
  color: #888;
  font-size: 14px;
  line-height: 34px;
}
.pop-txt-ins .img-pop-txt {
  width: 186px;
}
.bnr-pop-ins {
  display: block;
  margin-top: 20px;
}
.bnr-pop-ins strong {
  display: block;
}
.bnr-pop-ins strong::after {
  content: "";
  display: inline-block;
  margin-left: 5px;
  background-image: url(/images/md/my-2-ic-arrow_t_black.png);
  background-size: 100% 100%;
  width: 7px;
  height: 12px;
}
.bnr-pop-ins img {
  width: 100%;
  border-radius: 10px;
}
.ins-pop-box {
  padding: 155px 24px 0;
  background-size: 220px auto;
  background-position: center top;
  background-repeat: no-repeat;
}
.ins-pop-box.img02 {
  background-image: url(/images/contents/img_ins_popup02.png);
}
.ins-pop-box .ins-pop-list {
  margin-top: 25px;
}
.ins-pop-box .ins-pop-list li {
  position: relative;
  margin-top: 7px;
  padding-left: 10px;
  color: #999;
  font-size: 13px;
  line-height: 18px;
}
.ins-pop-box .ins-pop-list li::before {
  content: "*";
  display: block;
  position: absolute;
  left: 0;
  top: 3px;
}
.ins-pop-box .ins-pop-desc {
  margin-top: 5px;
  color: #111;
  font-size: 17px;
  line-height: 21px;
  font-weight: bold;
  text-align: center;
}

/* 
카드바우처 체크박스 아이콘 추가 24.05.02 sayho
[2024-05-31 : lyr] 아이콘 추가 img05~07
*/
.ui-checkbox-block-head.icon-img01,
.ui-checkbox-block-head.icon-img02,
.ui-checkbox-block-head.icon-img03,
.ui-checkbox-block-head.icon-img04,
.ui-checkbox-block-head.icon-img05,
.ui-checkbox-block-head.icon-img06,
.ui-checkbox-block-head.icon-img07,
.ui-checkbox-block-head.icon-img08,
.ui-checkbox-block-head.icon-img09,
.ui-checkbox-block-head.icon-img10 {
  padding-left: 68px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.ui-checkbox-block-head.icon-img01::before,
.ui-checkbox-block-head.icon-img02::before,
.ui-checkbox-block-head.icon-img03::before,
.ui-checkbox-block-head.icon-img04::before,
.ui-checkbox-block-head.icon-img05::before,
.ui-checkbox-block-head.icon-img06::before,
.ui-checkbox-block-head.icon-img07::before,
.ui-checkbox-block-head.icon-img08::before,
.ui-checkbox-block-head.icon-img09::before,
.ui-checkbox-block-head.icon-img10::before {
  content: "";
  position: absolute;
  left: 14px;
  display: block;
  width: 40px;
  height: 40px;
  background-size: 40px auto;
  background-repeat: no-repeat;
  background-position: 0 0;
}
.ui-checkbox-block-head.icon-img01::before {
  background-image: url(/images/contents/ico_acco_img01.png);
}
.ui-checkbox-block-head.icon-img02::before {
  background-image: url(/images/contents/ico_acco_img02.png);
}
.ui-checkbox-block-head.icon-img03::before {
  background-image: url(/images/contents/ico_acco_img03.png);
}
.ui-checkbox-block-head.icon-img04::before {
  background-image: url(/images/contents/ico_acco_img04.png);
}
.ui-checkbox-block-head.icon-img05::before {
  background-image: url(/images/contents/ico_acco_img05.png);
}
.ui-checkbox-block-head.icon-img06::before {
  background-image: url(/images/contents/ico_acco_img06.png);
}
.ui-checkbox-block-head.icon-img07::before {
  background-image: url(/images/contents/ico_acco_img07.png);
}
.ui-checkbox-block-head.icon-img08::before {
  background-image: url(/images/jadecard/icon/ico_benefit__percent.png);
  background-size: 32px;
  background-position: center;
}
/* [2025-09-25 KEJ] [WPM-12623] 추가 */
.ui-checkbox-block-head.icon-img09::before {
  background-image: url('/images/contents/ico_acco_img09.png');
}
.ui-checkbox-block-head.icon-img10::before {
  background-image: url('/images/contents/ico_acco_img10.png');
}
/* //[2025-09-25 KEJ] [WPM-12623] 추가 */

/* [2024-05-31 : lyr] 바우처 선택 - 제이드 페이지만 사용하는 클래스 추가 (배경색으로 선택 유무 구분을 확실하게 줌) */
.icon-acco-box--jadecard .ui-checkbox-block.type-box .ui-checkbox:checked + .ui-label {
  transition: 0.1s all;
  background-color: #eaf7f6;
}
.icon-acco-box--jadecard .ui-checkbox-group.type-full .ui-label-text {
  flex: 1 1 auto;
}
/* 인기카드 개편 sayho 24.05.07 */
.page-contents.apply-main {
  padding: 20px 0 0;
  /* margin:0 -24px; */
}
.page-contents.apply-main .section-top-slide {
  margin: 32px 0 40px;
  padding: 0 24px;
}
.apply-main h2 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}
.card-search-box {
  position: relative;
  margin: 0 24px;
}
.card-search-box input {
  width: 100%;
  padding: 15px 40px 15px 15px;
  border: 1px solid #111;
  border-radius: 15px;
  font-size: 13px;
  line-height: 18px;
  box-sizing: border-box;
}
.card-search-box button {
  position: absolute;
  top: 12px;
  right: 15px;
  width: 25px;
  height: 25px;
  font-size: 0;
  line-height: 0;
  background: url(/images/icon/ic-header-search.svg) no-repeat center center / 20px auto;
}
.section-best-benefit {
  padding: 40px 24px;
  background: #f4f6f8;
}
.section-best-benefit h2::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  margin-left: 5px;
  background: url(/images/icon/ic-logoff-tit02.png) no-repeat 0 0 / 100% auto;
  vertical-align: top;
}
.section-best-benefit .sub-txt {
  margin-top: 8px;
  color: #888;
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
}
.section-best-benefit .sorting-area {
  margin: 24px 0 0 0;
}
.section-best-benefit .ui-radio-block.type-tab .ui-label,
.section-best-benefit .ui-checkbox-block.type-tab .ui-label {
  background: #fff;
}
.section-best-benefit .sorting-contents::before {
  display: none;
}
.section-best-benefit .sorting-list {
  display: flex;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  flex-wrap: wrap;
  gap: 4px;
}
.sorting-card-list {
  margin: 33px 0;
  padding: 24px;
  background: #fff;
  border-radius: 8px;
}
.sorting-card-list li {
  display: flex;
  gap: 16px;
}
.sorting-card-list li + li {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e5e5e5;
}
.sorting-card-list li .card-img,
.sorting-card-list li .card-img {
  position: relative;
  width: 70px;
  padding-top: 111px;
  margin: 0 auto;
  flex: 0 0 auto;
  border-radius: 4px;
  overflow: hidden;
}
.sorting-card-list li .card-img img,
.sorting-card-list li .card-img img {
  position: absolute;
  left: 100%;
  top: 0;
  width: 111px;
  height: 70px;
  transform: rotate(90deg);
  transform-origin: 0 0;
}
.sorting-card-list li .card-img em {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  width: 20px;
  height: 20px;
  background: #8665ef;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-style: normal;
  font-size: 10px;
  z-index: 1;
}
.sorting-card-list li .right {
  flex: 1;
}
.sorting-card-list li .right .card-name {
  display: block;
  color: #111;
  font-size: 17px;
  line-height: 21px;
  font-weight: 500;
}
.sorting-card-list li .right p {
  margin-top: 8px;
  color: #666;
  font-size: 13px;
  line-height: 18px;
  word-break: keep-all;
}
.sorting-card-list li .right p + p {
  margin-top: 0;
}
.apply-main .section-customer {
  padding-top: 40px;
}
.section-customer .customer-list.white-type li a {
  background: #fff;
  border: 1px solid #d9d9d9;
}
.section-customer .customer-list li.img03 a::before {
  width: 36px;
  height: 36px;
  margin-right: 6px;
  background: url(/images/icon/ic-customer-list03.png) no-repeat 0 0 / 100% auto;
}
.section-customer .customer-list li.img04 a::before {
  width: 36px;
  height: 36px;
  margin-right: 6px;
  background: url(/images/icon/ic-customer-list04.png) no-repeat 0 0 / 100% auto;
}
.logoff-main .section-top-slide .banner-slide-contents02 .swiper-slide {
  height: 400px;
}
.apply-main .section-top-slide .banner-slide-contents02 .swiper-slide {
  height: 400px;
  border-radius: 14px;
  overflow: hidden;
}
.section-top-slide .banner-slide-contents02 .swiper-slide a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.section-top-slide .banner-slide-contents02 .swiper-slide a .bnr-top-txt {
  position: relative;
  padding: 34px 24px;
  text-align: left;
  z-index: 10;
}
.section-top-slide .banner-slide-contents02 .swiper-slide a .bnr-top-txt em {
  font-size: 15px;
  line-height: 21px;
  font-style: normal;
  font-weight: bold;
}
.section-top-slide .banner-slide-contents02 .swiper-slide a .bnr-top-txt .flag-txt01 {
  padding: 0 4px;
  border-radius: 6px;
  background: #cac0ff;
  color: #6534f2;
  font-style: normal;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
.section-top-slide .banner-slide-contents02 .swiper-slide a .bnr-top-txt strong {
  display: block;
  margin-top: 4px;
  font-size: 24px;
  line-height: 32px;
  font-weight: bold;
}
.logoff-main .section-top-slide .banner-slide-contents02 .swiper-slide a .bnr-top-txt strong {
  font-size: 26px;
  line-height: 34px;
}
@media (max-width: 360px) {
  .section-top-slide .banner-slide-contents02 .swiper-slide a .bnr-top-txt strong {
      font-size: 22px;
  }
  .logoff-main .section-top-slide .banner-slide-contents02 .swiper-slide a .bnr-top-txt strong {
      font-size: 24px;
  }
}
.section-top-slide .banner-slide-contents02 .swiper-slide a .bnr-top-txt .txt-hash {
  margin-top: 5px;
}
.section-top-slide .banner-slide-contents02 .swiper-slide a .bnr-top-txt .txt-hash span {
  display: block;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
.section-top-slide .banner-slide-contents02 .swiper-slide a .bnr-top-txt .img-logo {
  margin-top: 10px;
}
.section-top-slide .banner-slide-contents02 .swiper-slide a .bnr-top-txt .img-logo img {
  width: 55px;
  vertical-align: top;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani01 {
  background: #000;
}
.logoff-main .section-top-slide .banner-slide-contents02 .swiper-slide.ani01 {
  background: #000;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani01 em {
  color: #1cebc5;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani01 strong {
  color: #fff;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani01 .txt-hash span {
  color: #d9d9d9;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani02 {
  background-color: #d4ddff;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani02 em {
  color: #6534f2;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani02 strong {
  color: #111;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani02 .txt-hash span {
  color: #111;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani03 {
  background: #c7ebff;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani03 em {
  color: #0844e0;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani03 strong {
  color: #111;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani03 .txt-hash span {
  color: #111;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani04 {
  background: #1b1b1b;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani04 em {
  color: #ff7c32;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani04 strong {
  color: #fff;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani04 .txt-hash span {
  color: #d9d9d9;
}
/* [2024-10-30: KJH] bg 컬러 변경 
----------------------------------
[2025-01-24: MJ] bg 및 em 컬러 변경 */
.section-top-slide .banner-slide-contents02 .swiper-slide.ani05 {
  background: #e5fffe;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani05 em {
  color: #5837cd;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani05 strong {
  color: #111;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani05 .txt-hash span {
  color: #111;
}
/* 2024.06.04 트래블로그 500만 배너추가 - sayho */
.section-top-slide .banner-slide-contents02 .swiper-slide.ani06 {
  background: #000 url(/images/contents/ani-assets/img-anibox06-item01.png) no-repeat right bottom / cover;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani06 em,
.section-top-slide .banner-slide-contents02 .swiper-slide.ani06 strong,
.section-top-slide .banner-slide-contents02 .swiper-slide.ani06 .txt-hash span {
  color: #fff;
}
.logoff-main .section-top-slide .banner-slide-contents02 .swiper-slide.ani02 {
  background-image: linear-gradient(to bottom, #715dff, #a799ff 12%, #cac0ff 31%, #e2d2ff 50%, #cedeff);
}
.logoff-main .section-top-slide .banner-slide-contents02 .swiper-slide.ani02::before {
  /* content:'';
position:absolute;
top:0;
left:0;
right:0;
height:309px;
background-image:linear-gradient(to bottom, rgb(111 96 255), rgba(255,255,255,0) 70%);
opacity: .75; */
}
.logoff-main .section-top-slide .banner-slide-contents02 .swiper-slide.ani03 {
  background-image: linear-gradient(to bottom, #195dff, #72acff 12%, #b0e1ff 31%, #c8f6ff 50%, #c5ecff);
}
/* 
[2024-08-19 : shj] 배경색 그라데이션 제거
========================================
[2024-10-30: KJH] 배경색 상단에서 변경하여 아래 bg 코드 주석 처리
*/
.logoff-main .section-top-slide .banner-slide-contents02 .swiper-slide.ani05 {
  /* [2024-08-23 : shj] 풀기 */
  /* background-color: #d1fbf1; */
  /* background-image: linear-gradient(to bottom, #007646, #70c5a4 12%, #aaead2 31%, #d1fbf1 50%, #d7f1fc); */
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani01 .ani-items {
  position: absolute;
  right: 0;
  bottom: 0;
}
.section-top-slide .banner-slide-contents02 .swiper-slide .ani-items .ani-item01,
.section-top-slide .banner-slide-contents02 .swiper-slide .ani-items .ani-item02,
.section-top-slide .banner-slide-contents02 .swiper-slide .ani-items .ani-item03 {
  position: absolute;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani01 .ani-items .ani-item01 {
  right: 27px;
  bottom: 34px;
  transform: translate(260px, 0);
  transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
  z-index: 1;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani01 .ani-items .ani-item01 img {
  width: 223px;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani01 .ani-items .ani-item02 {
  right: 23px;
  bottom: 102px;
  transform: translate(-300px, 0);
  opacity: 0;
  transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1), opacity 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
  z-index: 2;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani01 .ani-items .ani-item02 img {
  width: 245px;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani01 .ani-items .ani-item03 {
  right: 40px;
  bottom: 0;
  transform: translate(0, 110px);
  transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
  z-index: 0;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani01 .ani-items .ani-item03 img {
  width: 312px;
}

.section-top-slide .banner-slide-contents02 .swiper-slide.ani02 .ani-items .ani-item01 {
  right: 40px;
  bottom: 109px;
  transform: translate(200px, 0);
  transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
  z-index: 2;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani02 .ani-items .ani-item01 img {
  width: 158px;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani02 .ani-items .ani-item02 {
  right: 24px;
  bottom: 15px;
  transform: translate(0, 160px);
  transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
  z-index: 1;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani02 .ani-items .ani-item02 img {
  width: 253px;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani02 .ani-items .ani-item03 {
  right: 14px;
  bottom: 67px;
  transform: translate(0, -100px);
  opacity: 0;
  transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1), opacity 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani02 .ani-items .ani-item03 img {
  width: 251px;
}

.section-top-slide .banner-slide-contents02 .swiper-slide.ani03 .ani-items .ani-item01 {
  right: 40px;
  bottom: 27px;
  transform: translate(220px, 0) scale(1);
  transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
  z-index: 2;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani03 .ani-items .ani-item01 img {
  width: 197px;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani03 .ani-items .ani-item02 {
  right: 14px;
  bottom: 86px;
  transform: translate(0, 0) scale(0.2);
  opacity: 0;
  transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1), opacity 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
  z-index: 1;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani03 .ani-items .ani-item02 img {
  width: 245px;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani03 .ani-items .ani-item03 {
  right: 0;
  bottom: 0;
  transform: translate(0, 80px);
  transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani03 .ani-items .ani-item03 img {
  width: 360px;
}

.section-top-slide .banner-slide-contents02 .swiper-slide.ani04 .ani-items .ani-item01 {
  right: 0;
  bottom: 0;
  transform: translate(240px, 240px);
  transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
  z-index: 2;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani04 .ani-items .ani-item01 img {
  width: 220px;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani04 .ani-items .ani-item02 {
  right: 0;
  bottom: 60px;
  transform: translate(150px, -250px);
  transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
  z-index: 1;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani04 .ani-items .ani-item02 img {
  width: 138px;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani04 .ani-items .ani-item03 {
  right: 83px;
  bottom: 0;
  transform: translate(-250px, 150px);
  transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani04 .ani-items .ani-item03 img {
  width: 263px;
}

/*[25-01-24 : MJ] 이미지파일 위치 변경*/
.section-top-slide .banner-slide-contents02 .swiper-slide.ani05 .ani-items .ani-item01 {
  right: 16px;
  bottom: 30px;
  transform: translate(0, 250px);
  transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
  z-index: 1;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani05 .ani-items .ani-item01 img {
  width: 201px;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani05 .ani-items .ani-item02 {
  transform: translate(300px, 0);
  right: 130px;
  bottom: 126px;
  transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
  z-index: 2;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani05 .ani-items .ani-item02 img {
  width: 78px;
  transform: rotate(-40deg);
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani05 .ani-items .ani-item03 {
  /* right: 16px;
bottom: 0; */
  transform: translate(0, -40px);
  right: 34px;
  bottom: 45px;
  transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1), opacity 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
  opacity: 0;
  z-index: 3;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani05 .ani-items .ani-item03 img {
  /* width: 286px; */
  width: 190px;
}
/*[25-01-24 : MJ] 이미지 변경*/

/* 트래블로그 환종53종 추가 - sayho - 24.07.24 */
.section-top-slide .banner-slide-contents02 .swiper-slide.ani11 {
  background-color: #d8f2ff;
}
/* [2024-08-19 : shj] 배경색 그라데이션 제거 */
.logoff-main .section-top-slide .banner-slide-contents02 .swiper-slide.ani11 {
  /* [2024-08-23 : shj] 풀기 */
  background-color: #d8f2ff;
  /* background-image: linear-gradient(to bottom, #24d781, #f9f47f); */
  /* background: url(/images/contents/ani-assets/img-anibox11-item04.png) no-repeat right bottom;
background-size: cover; */
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani11 .ani-items .ani-item01 {
  right: 40px;
  bottom: 109px;
  transform: translate(200px, 0);
  transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
  z-index: 2;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani11 .ani-items .ani-item01 img {
  width: 173px;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani11 .ani-items .ani-item02 {
  right: 24px;
  bottom: 15px;
  transform: translate(0, 160px);
  transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
  z-index: 1;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani11 .ani-items .ani-item02 img {
  width: 253px;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani11 .ani-items .ani-item03 {
  right: 14px;
  bottom: 67px;
  transform: translate(0, -100px);
  opacity: 0;
  transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1), opacity 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani11 .ani-items .ani-item03 img {
  width: 251px;
}

/* 트래블로그 환종53종 추가 - sayho - 24.08.07 */
.section-top-slide .banner-slide-contents02 .swiper-slide.ani12 em {
  color: #c60000;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani12 {
  background-color: #ffdace;
  /* background: url(/images/contents/ani-assets/img-anibox12-item01.png) no-repeat right bottom;
background-size: cover; */
}
/* [2024-08-19 : shj] 배경색 그라데이션 제거 */
.logoff-main .section-top-slide .banner-slide-contents02 .swiper-slide.ani12 {
  /* [2024-08-23 : shj] 풀기 */
  background-color: #ffdace;
  /* background-image: linear-gradient(to bottom, #ff8575 13%, #ffead7 67%); */
  /* background: url(/images/contents/ani-assets/img-anibox12-item01.png) no-repeat right bottom;
background-size: cover; */
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani12 .ani-items .ani-item01 {
  right: 32px;
  bottom: 15px;
  transform: translate(200px, 0);
  transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
  z-index: 0;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani12 .ani-items .ani-item01 img {
  width: 148px;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani12 .ani-items .ani-item02 {
  right: 18px;
  bottom: 41px;
  transform: translate(0, 160px);
  transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
  z-index: 2;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani12 .ani-items .ani-item02 img {
  width: 214px;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani12 .ani-items .ani-item03 {
  right: 39px;
  bottom: 18px;
  transform: translate(0, -100px);
  opacity: 0;
  transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1), opacity 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
  z-index: 1;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani12 .ani-items .ani-item03 img {
  width: 148px;
}
/* 24.08.21 트래블GO 체크카드 추가 - sayho */
.section-top-slide .banner-slide-contents02 .swiper-slide.ani13 {
  background-color: #192023;
}
.logoff-main .section-top-slide .banner-slide-contents02 .swiper-slide.ani13 {
  background-color: #192023;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani13 em {
  color: #10dfd2;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani13 strong {
  color: #fff;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani13 .ani-items .ani-item01 {
  right: 0;
  bottom: 0;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani13 .ani-items .ani-item01 img {
  width: 267px;
}

/* 트래블GO 카드 추가 - sayho - 24.08.27 */
/* .section-top-slide .banner-slide-contents02 .swiper-slide.ani13 .ani-items .ani-item01 {
right: 0;
bottom: 0;
transform: translate(200px, 0);
transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
z-index: 0;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani13 .ani-items .ani-item01 img {
width: 192px;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani13 .ani-items .ani-item02 {
right: 100px;
bottom: 0;
transform: translate(0, 210px);
transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
z-index: 1;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani13 .ani-items .ani-item02 img {
width: 190px;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani13 .ani-items .ani-item03 {
right: 66px;
bottom: 104px;
transform: translate(0, -100px);
opacity: 0;
transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1), opacity 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
z-index: 2;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani13 .ani-items .ani-item03 img {
width: 164px;
} */

/* [2024-08-28  24.08.21 트래블GO 체크카드 추가 (ani13 > ani14) : HDH] */
.section-top-slide .banner-slide-contents02 .swiper-slide.ani14 {
  background-color: #192023;
}
.logoff-main .section-top-slide .banner-slide-contents02 .swiper-slide.ani14 {
  background-color: #192023;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani14 em {
  color: #10dfd2;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani14 strong {
  color: #fff;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani14 .ani-items .ani-item01 {
  right: 0;
  bottom: 0;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani14 .ani-items .ani-item01 img {
  width: 267px;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani14 .ani-items .ani-item01 {
  right: 0;
  bottom: 0;
  transform: translate(200px, 0);
  transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
  z-index: 0;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani14 .ani-items .ani-item01 img {
  width: 192px;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani14 .ani-items .ani-item02 {
  right: 100px;
  bottom: 0;
  transform: translate(0, 210px);
  transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
  z-index: 1;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani14 .ani-items .ani-item02 img {
  width: 190px;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani14 .ani-items .ani-item03 {
  right: 66px;
  bottom: 104px;
  transform: translate(0, -100px);
  opacity: 0;
  transition: transform 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1), opacity 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
  z-index: 2;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani14 .ani-items .ani-item03 img {
  width: 164px;
}

/* [2024-10-14 트래블GO 체크카드 추가 (ani15) : HDH] */
.section-top-slide .banner-slide-contents02 .swiper-slide.ani15 {
  background-color: #17264c;
}
.logoff-main .section-top-slide .banner-slide-contents02 .swiper-slide.ani15 {
  background-color: #17264c;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani15 em {
  color: #10dfd2;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani15 strong {
  color: #fff;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani15 .ani-items .ani-item01 {
  right: 0;
  bottom: 0;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani15 .ani-items .ani-item01 img {
  width: 128px;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani15 .ani-items .ani-item01 {
  right: 150px;
  bottom: 101px;
  transform: translate(0, -100px);
  transition: all 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
  z-index: 2;
  opacity: 0;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani15 .ani-items .ani-item02 img {
  width: 266px;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani15 .ani-items .ani-item02 {
  right: 30px;
  bottom: 0;
  transform: translate(100px, 0);
  transition: all 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
  z-index: 1;
  opacity: 0;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani15 .ani-items .ani-item03 img {
  width: 208px;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani15 .ani-items .ani-item03 {
  right: 72px;
  bottom: 23px;
  transform: translate(0, 100px);
  opacity: 0;
  transition: all 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1), opacity 0.6s 0.3s cubic-bezier(0.05, 1, 0.88, 1);
  z-index: 0;
}

.section-top-slide .banner-slide-contents02 .swiper-slide.swiper-slide-active .ani-items .ani-item01,
.section-top-slide .banner-slide-contents02 .swiper-slide.swiper-slide-active .ani-items .ani-item02,
.section-top-slide .banner-slide-contents02 .swiper-slide.swiper-slide-active .ani-items .ani-item03 {
  transform: translate(0, 0) scale(1);
  opacity: 1;
}

/* [2024-05-13 보험상세 타이틀 사이즈 수정 : HDH] */
.section-title.type-insurance-detail .title {
  font-size: 22px;
  line-height: 3rem;
  font-weight: 700;
}
.section-title.type-insurance-detail .sub02 {
  font-size: 18px;
  line-height: 22px;
}

/* [2024-05-13 보험상세 탭메뉴 배경색 수정 : HDH] */
.tab-list.type-bg-white .tab-list-item .tab-list-link {
  background-color: #fff;
}
.tab-list.type-bg-white .tab-list-item .tab-list-link.is-active {
  background-color: var(--basic);
}

/* [2024-05-29 로그인페이지 아이콘 수정 : HDH] */
.join-type-list li.type-simple-3d .join-type-button:before {
  background: url(/images/icon/ico-new-simple-3d.png) no-repeat center / 100%;
  background-size: 25px 28px;
}
.join-type-list li.type-join-3d .join-type-button:before {
  background: url(/images/icon/ico-new-join-3d.png) no-repeat center / 100%;
  background-size: 25px 28px;
}
.join-type-list li.type-loan-3d .join-type-button:before {
  background: url(/images/icon/ico-new-loan-3d.png) no-repeat center / 100%;
  background-size: 25px 28px;
}

/* [2024-05-29 가맹점 간편 조회 페이지 디자인 개선 : HDH] */
.page-section-group.page-certify-p007 h2.page-title {
  margin-top: 42px;
}
.page-section-group.page-certify-p007 .main-img-box {
  padding-bottom: 35px;
  margin-bottom: 35px;
  /* border-bottom: 1px solid #e5e5e5; */
  text-align: right;
}
.page-section-group.page-certify-p007 .main-img-box img {
  width: 97px;
}

/* 2024.06.04 하나매거진(신규) - sayho */
.page-contents.page-magazine {
  padding: 0;
}
.section-magazine-top {
  position: relative;
  padding: 51px 24px 64px;
  /* background: #C7EDEA url(/images/contents/magazine/bg_magazine_top11.png) no-repeat 0 0 / 100% auto; */
  background: #FFE2F9 url(/images/contents/magazine/bg_magazine_top12.png) no-repeat 0 0 / 100% auto;
}
.section-magazine-top .top-title {
  position: relative;
  padding: 0 20px;
  z-index: 1;
}
.section-magazine-top .top-title span {
  position: relative;
  display: inline-block;
  font-size: 20px;
  line-height: 27px;
  font-weight: 500;
}
.section-magazine-top .top-title span::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #111;
}
.section-magazine-top .top-title h2 {
  margin-top: 10px;
}
.section-magazine-top .top-title h2 img {
  /* width:216px; */
  width: 119px;
}
/* 24.09.11 흰색타입 추가 - sayho */
.section-magazine-top .top-title.type-white span {
  color: #fff;
}
.section-magazine-top .top-title.type-white span::after {
  background: #fff;
}
.section-magazine-top .top-banner {
  position: relative;
  margin-top: -20px;
}
.section-magazine-top .top-banner .bnr-img {
  width: 100%;
  border-radius: 24px;
}
.section-magazine-top .top-banner .motion-img {
  position: absolute;
  left: 50%;
  top: 59%;
  width: 66%;
  transform: translate(-50%, -50%);
  animation: ani-bounce02 3s 1s ease-in-out infinite;
}
@keyframes ani-bounce02 {
  0% {
      margin-top: 0;
  }
  40% {
      margin-top: 5px;
  }
}
.section-magazine-top .select-list {
  margin-top: 24px;
}
.section-magazine-top .select-list li + li {
  margin-top: 8px;
}
.section-magazine-top .select-list a {
  display: inline-block;
  padding: 7px 16px 7px 34px;
  background-color: rgba(255, 255, 255, 0.8);
  background-position: 4px center;
  background-repeat: no-repeat;
  background-size: 24px auto;
  border-radius: 35px;
  /* font-size: 14px; */
  line-height: 18px;
  font-weight: 500;
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.15);
  /* 24.09.12 폰트 크기 수정 - sayho */
  font-size: 16px;
  border-radius: 16px;
}
.section-magazine-top .select-list a.ic-img01 {
  background-color: #ffe6b1;
  background-image: url(/images/contents/magazine/ic_select_list01.png);
}
.section-magazine-top .select-list a.ic-img02 {
  background-image: url(/images/contents/magazine/ic_select_list02.png);
}
.section-magazine-top .select-list a.ic-img03 {
  background-image: url(/images/contents/magazine/ic_select_list03.png);
}
.section-magazine-top .select-list a.ic-img04 {
  background-image: url(/images/contents/magazine/ic_select_list04.png);
}
.section-magazine-top .select-list a.ic-img05 {
  background-image: url(/images/contents/magazine/ic_select_list05.png);
}
.section-magazine-top .select-list a.ic-img06 {
  background-image: url(/images/contents/magazine/ic_select_list06.png);
}
/* [2024-07-01 : shj] 추가 */
.section-magazine-top .select-list a.ic-img08 {
  background-color: #dff4a4;
  background-image: url(/images/contents/magazine/ic_select_list08.png);
}
.section-magazine-top .select-list a.ic-img09 {
  background-image: url(/images/contents/magazine/ic_select_list09.png);
}
/* // [2024-07-01 : shj] 추가 */
/* 24.08.27 별별뉴스 아이콘 추가 sayho */
.section-magazine-top .select-list a.ic-img10 {
  background-color: #c4faff;
  background-image: url(/images/contents/magazine/ic_select_list10.png);
}
/* //24.08.27 별별뉴스 아이콘 추가 sayho */
/* 24.11.08 별별뉴스 아이콘 추가 sayho */
.section-magazine-top .select-list a.ic-img11 {
  background-image: url(/images/contents/magazine/ic_select_list11.png);
}
/* [2024-12-09 : shj] 추가 */
.section-magazine-top .select-list a.ic-img12 {
  background-image: url(/images/contents/magazine/ic_select_list12.png);
}
/* //24.11.08 별별뉴스 아이콘 추가 sayho */
.section-magazine-top .coupon-detail-buttons {
  top: 24px;
  right: 24px;
  bottom: inherit;
}
.page-magazine .section-magazine-cont {
  position: relative;
  margin-top: -24px;
  padding: 36px 24px 68px;
  border-radius: 24px 24px 0 0;
}
.page-magazine .section-magazine-cont h3,
.page-magazine .section-magazine-cont h3 a {
  position: relative;
  color: #111;
  font-size: 21px;
  line-height: 30px;
  font-weight: 700;
}
.page-magazine .section-magazine-cont h3 a {
  display: block;
  padding-right: 20px;
}
.page-magazine .section-magazine-cont h3 a::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -6px;
  width: 12px;
  height: 12px;
  background: url(/images/contents/magazine/ic_magazine_card_link.png) no-repeat right center / 12px auto;
}
.magazin-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-top: 12px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.magazin-card .magazin-card-top {
  width: 100%;
  flex: 0 0 auto;
  /* [2024-08-01 : shj] 변경 */
  /* padding: 24px 20px 40px; */
  padding: 24px 20px 32px;
  box-sizing: border-box;
}
.magazin-card .magazin-card-top h4 {
  font-size: 20px;
  line-height: 27px;
  font-weight: 700;
  color: #000;
}
.magazin-card .magazin-card-top p {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: #000;
}
.magazin-card .magazin-card-top .txt-hash {
  margin-top: 10px;
}
.magazin-card .magazin-card-top .txt-hash span {
  display: inline-block;
  font-size: 14px;
  line-height: 18px;
  color: #888;
  font-weight: 400;
}
.magazin-card .magazin-img {
  flex: 0 0 auto;
  width: 100%;
}
.magazin-card .magazin-img img {
  width: 100%;
}
.magazin-card .card-link {
  position: absolute;
  bottom: 24px;
  left: 44px;
  right: 44px;
  padding: 12px 0;
  text-align: center;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-weight: 400;
  border-radius: 6px;
}
.magazin-card .card-link span {
  position: absolute;
  top: -28px;
  left: 50%;
  padding: 6px 10px 6px 31px;
  border-radius: 18px;
  font-size: 13px;
  line-height: 18px;
  transform: translateX(-50%);
  background: #029c94;
  white-space: nowrap;
  font-weight: 500;
}
/* 24.09.04 개발팀요청으로 태그 추가 - sayho */
.magazin-card .card-link span em {
  font-style: normal;
}
.magazin-card .card-link span::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  margin-top: -9px;
  display: block;
  width: 18px;
  height: 18px;
  background: #fff url(/images/contents/img-hanamoney.png) no-repeat center center / 10px auto;
  border-radius: 50%;
}
.magazin-card .card-link span::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-top: 7px solid #029c94;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.magazin-card .magazin-prd-box {
  width: 100%;
}
.magazin-card .magazin-prd-box ul {
  display: flex;
  padding-bottom: 22px;
}
.magazin-card .magazin-prd-box ul li {
  width: 50%;
  padding: 0 14px;
  text-align: center;
}
.magazin-card .magazin-prd-box .img {
  width: 100%;
  display: block;
  max-width: 120px;
  margin: 0 auto;
}
.magazin-card .magazin-prd-box .img img {
  width: 100%;
}
.magazin-card .magazin-prd-box .tit {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.magazin-card .magazin-prd-box .price-txt {
  height: 40px;
}
.magazin-card .magazin-prd-box .price-txt .sale {
  color: #ce2d2d;
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
}
.magazin-card .magazin-prd-box .price-txt .price {
  color: #111;
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: -1px;
}
.magazin-card .magazin-prd-box .price-txt del {
  display: block;
  color: #888;
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
}
.magazin-card .magazin-prd-box .btn-link {
  display: inline-block;
  margin-top: 8px;
  padding: 0 16px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  line-height: 30px;
}
/* [2024-08-01 : shj] 상품 1개일 경우 */
.magazin-card .magazin-prd-box ul li.one-col {
  width: 100%;
}
.magazin-card .magazin-prd-box ul li.one-col .img {
  max-width: 100%;
}
.magazin-card .magazin-prd-box ul li.one-col .price-txt {
  height: auto;
}
.magazin-card .magazin-prd-box ul li.one-col .price-txt del {
  display: inline-block;
}
.magazin-card .magazin-prd-box ul li.one-col .btn-link {
  margin-top: 14px;
  width: 100%;
  line-height: 44px;
  box-sizing: border-box;
}
/* // [2024-08-01 : shj] 상품 1개일 경우 */

.section-magazine-cont.magazine-cont01 {
  background: #fff;
}
.section-magazine-cont.magazine-cont01 .magazin-card img {
  width: 100%;
}
.section-magazine-cont.magazine-cont01 h3 {
  padding-left: 30px;
  background: url(/images/contents/magazine/ic_magazine_title.png) no-repeat left center / 26px auto;
}
.section-magazine-cont.magazine-cont02 {
  background: #d8f3f2;
}
.section-magazine-cont.magazine-cont03 {
  background: #ece6ff;
}
.section-magazine-cont.magazine-cont04 {
  background: #fee7ec;
}
.section-magazine-cont.magazine-cont05 {
  background: #e2f0ff;
}
.section-magazine-cont.magazine-cont06 {
  background: #f4ffd6;
}
.section-magazine-cont.magazine-cont07 {
  /* [2024-08-01 : shj] 변경 */
  /* background: #f4ffd6; */
  background: #ffefdf;
}
.section-magazine-cont.magazine-cont08 {
  background: #e1ffe6;
}
.section-magazine-cont.magazine-cont09 {
  background: #ffdbef;
}
/* [2024-12-09 : shj] 추가 */
.section-magazine-cont.magazine-cont10 {
  background: #ebe0d4;
}
.section-magazine-cont.magazine-event {
  background: #fff;
}
.page-magazine .usage-default-item:nth-child(1) {
  border-top: 1px solid #e5e5e5;
}
.page-magazine .usage-default-list {
  margin-top: 10px;
}
.section-magazine-cont.magazine-finance {
  background: #f4f6f8;
  overflow: hidden;
}
.section-magazine-cont.magazine-finance h3.finance-title span {
  display: block;
  color: #00a49d;
  font-size: 16px;
  line-height: 21px;
  font-weight: 500;
}
.page-magazine .section-magazine-cont h3.finance-title a::after {
  position: static;
  display: inline-block;
  margin: 8px 0 0 6px;
  vertical-align: top;
}

.finance-slide-box {
}
.finance-lab.expanded {
  border-radius: 0;
  transition: 0.5s all;
  overflow-x: hidden;
}
.finance-lab.expanded.is-first {
  border-radius: 40px 0 0 40px;
}
.section-magazine-cont.magazine-finance .lab-slide {
  position: relative;
  margin-top: 20px;
  margin-left: -24px;
  margin-right: -24px;
  padding: 0 24px;
  overflow: visible;
}
.section-magazine-cont.magazine-finance .lab-slide .swiper-wrapper {
  align-items: stretch;
}
.section-magazine-cont.magazine-finance .lab-slide .swiper-slide {
  width: 312px;
  max-width: calc(100vw - 48px);
  margin-right: 8px;
}
.section-magazine-cont.magazine-finance .lab-slide .swiper-controller,
.lab-detail-slide .swiper-controller {
  position: absolute;
  top: 0;
  margin-top: -26px;
  right: 24px;
  transform: translateY(-100%);
  background-color: rgba(17, 17, 17, 0.4);
  border-radius: 21px;
  color: #ffffff;
  display: flex;
  align-items: center;
  z-index: 2;
  padding: 0 6px;
  height: 18px;
}
.section-magazine-cont.magazine-finance .lab-slide .swiper-controller button,
.section-magazine-cont.magazine-finance .lab-slide .swiper-controller .swiper-pagination,
.lab-detail-slide .swiper-controller button,
.lab-detail-slide .swiper-controller .swiper-pagination {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  font-size: 10px;
  color: #ffffff;
  position: relative;
  width: auto;
  height: auto;
  margin-top: 0;
  letter-spacing: normal;
  flex: 0 0 auto;
  font-weight: 500;
}
.section-magazine-cont.magazine-finance .lab-slide .swiper-controller button,
.lab-detail-slide .swiper-controller button {
  width: 12px;
  height: 12px;
  margin-left: 5px;
}
.section-magazine-cont.magazine-finance .lab-slide .swiper-controller button.swiper-button-prev,
.section-magazine-cont.magazine-finance .lab-slide .swiper-controller button.swiper-button-next,
.lab-detail-slide .swiper-controller button.swiper-button-prev,
.lab-detail-slide .swiper-controller button.swiper-button-next {
  font-weight: 600;
}
.section-magazine-cont.magazine-finance .lab-slide .swiper-controller button.swiper-button-prev,
.lab-detail-slide .swiper-controller button.swiper-button-prev {
  margin-left: 0;
}
.section-magazine-cont.magazine-finance .lab-slide .swiper-controller button.swiper-button-toggle-play,
.lab-detail-slide .swiper-controller button.swiper-button-toggle-play {
  display: flex;
  align-items: center;
  padding: 2px;
  justify-content: center;
}
.section-magazine-cont.magazine-finance .lab-slide .swiper-controller button.swiper-button-toggle-play.is-play::after,
.lab-detail-slide .swiper-controller button.swiper-button-toggle-play.is-play::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 6.6px solid #ffffff;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}
.section-magazine-cont.magazine-finance .lab-slide .swiper-controller button.swiper-button-toggle-play.is-pause::before,
.section-magazine-cont.magazine-finance .lab-slide .swiper-controller button.swiper-button-toggle-play.is-pause::after,
.lab-detail-slide .swiper-controller button.swiper-button-toggle-play.is-pause::before,
.lab-detail-slide .swiper-controller button.swiper-button-toggle-play.is-pause::after {
  width: 2px;
  height: 8px;
  background-color: #ffffff;
  content: "";
  display: block;
  margin: 0 1px;
  border-radius: 1px;
}
.section-magazine-cont.magazine-finance .lab-slide .swiper-controller button::after,
.lab-detail-slide .swiper-controller button::after {
  font-size: 10px;
  line-height: 18px;
}
.section-magazine-cont.magazine-finance .lab-slide .swiper-controller button span,
.lab-detail-slide .swiper-controller button span {
  font-size: 0;
}
.section-magazine-cont.magazine-finance .lab-slide .swiper-controller .swiper-pagination,
.lab-detail-slide .swiper-controller .swiper-pagination {
  display: flex;
  align-items: center;
  width: auto;
  order: 0;
  letter-spacing: 2.5px;
}
.section-magazine-cont.magazine-finance .lab-slide .swiper-controller button + button,
.section-magazine-cont.magazine-finance .lab-slide .swiper-controller button + .swiper-pagination,
.lab-detail-slide .swiper-controller button + button,
.lab-detail-slide .swiper-controller button + .swiper-pagination {
  margin-left: 4px;
}

/* 하나금융연구소 팝업 */
.lab-detail-slide {
  width: 100%;
}
.lab-detail-slide img {
  max-width: 100%;
  display: block;
}
.lab-detail-slide .swiper-controller {
  right: 2.4rem;
  bottom: calc(100vw * 40 / 375);
  margin-top: 0;
  transform: translateY(0);
  top: auto;
}

.section-magazine-cont.magazine-finance .lab-slide .list-item {
  height: auto;
}
.section-magazine-cont.magazine-finance .lab-slide .list-item a {
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.section-magazine-cont.magazine-finance .lab-slide .list-item .list-item-image {
  max-height: 206px;
  height: calc(100vw * (206 / 375));
  flex: 0 0 auto;
}
.section-magazine-cont.magazine-finance .lab-slide .list-item .list-item-image img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}
.section-magazine-cont.magazine-finance .lab-slide .list-item .list-item-text {
  padding: 20px 20px 24px;
  background-color: #ffffff;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.section-magazine-cont.magazine-finance .lab-slide .list-item .list-item-text h4 {
  font-size: 18px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-height: 26px;
  font-weight: bold;
}
.section-magazine-cont.magazine-finance .lab-slide .list-item .list-item-text .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 12px;
}
.section-magazine-cont.magazine-finance .lab-slide .list-item .list-item-text .tags li {
  background-color: #f8f7fc;
  color: var(--gray-50);
  font-size: 14px;
  line-height: 19px;
  padding: 5px 9px;
  border-radius: 16px;
}
.section-magazine-cont .trend-list {
  margin-top: 10px;
}
.section-magazine-cont .trend-list li + li {
  margin-top: 16px;
}
.section-magazine-cont .trend-list li a {
  display: flex;
  padding: 16px 20px;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
}
.section-magazine-cont .trend-list li .image {
  display: block;
  width: 50px;
}
.section-magazine-cont .trend-list li .image img {
  width: 100%;
}
.section-magazine-cont .trend-list li .right-txt span {
  display: block;
  color: #888;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
}
.section-magazine-cont .trend-list li .right-txt strong {
  display: block;
  margin-top: 5px;
  color: #111;
  font-size: 16px;
  line-height: 21px;
  font-weight: 700;
}
.section-magazine-cont .btm-share-cont {
  margin-top: 40px;
  padding: 20px 24px 30px;
  text-align: center;
}
.section-magazine-cont .btm-share-cont p {
  font-size: 20px;
  line-height: 27px;
  font-weight: 500;
}
.section-magazine-cont .btm-share-cont p span {
  color: #008882;
  font-size: 16px;
  line-height: 21px;
  font-weight: 400;
}
.section-magazine-cont .btm-share-cont .btns-btm-share-cont {
  display: flex;
  margin-top: 24px;
  justify-content: center;
  gap: 8px;
}
.section-magazine-cont .btm-share-cont .btns-btm-share-cont a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.15);
  font-size: 16px;
  line-height: 21px;
  font-weight: 500;
}
.section-magazine-cont .btm-share-cont .btns-btm-share-cont a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 1px 3px 0 0;
  vertical-align: top;
}
.section-magazine-cont .btm-share-cont .btns-btm-share-cont a.btm-btns01::before {
  background: url(/images/contents/magazine/ic_btm_btns01.png) no-repeat center center / 100% auto;
}
.section-magazine-cont .btm-share-cont .btns-btm-share-cont a.btm-btns02::before {
  background: url(/images/contents/magazine/ic_btm_btns02.png) no-repeat center center / 100% auto;
}
/* 하나매거진 구독완료 레이어팝업 */
.layer-wrap--confirm .header__title.type-light.font-weight-bold {
  font-weight: 700;
}
.txt-magazine01 {
  padding-bottom: 190px;
  background: url(/images/contents/magazine/img_magazine_txt01.png) no-repeat center bottom / auto 141px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
  text-align: center;
}
.txt-magazine02 {
  padding-bottom: 190px;
  background: url(/images/contents/magazine/img_magazine_txt02.png) no-repeat center bottom / auto 141px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
  text-align: center;
}

.magazine-sorting-contents {
  position: relative;
  background: #f4f6f8;
  padding-top: 66px;
}
.magazine-sorting-contents .magazine-sortingbox {
  margin-top: 24px;
}
.magazine-sorting-contents .magazine-sortingbox .magazin-card {
  margin-top: 0;
}
.page-fixed-tabs ul li a[data-keyword-name="keyword-all"] {
  padding-left: 1.3rem;
}

/* [2024-06-07 우수회원 라운지 메인 배너 영역 추가 : HDH] */
.vip-banner01.type-new {
  display: block;
  padding: 16px;
}
.vip-banner01.type-new .banner-amount-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  padding: 10px 12px;
  background-color: #f8f8f8;
  border-radius: 8px;
}
.vip-banner01.type-new .banner-amount-box:last-child {
  margin-bottom: 0;
}
.vip-banner01.type-new .banner-tit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-weight: 500;
}
.vip-banner01.type-new .banner-tit::after {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  background: url(/images/vip/images/common/ico_banner_vip_giftbox.png) no-repeat;
  background-size: 100%;
}
.vip-banner01.type-new .banner-amount-box .banner-amount-text {
  font-size: 12px;
  line-height: 18px;
}
.vip-banner01.type-new .banner-amount-box .banner-amount-text strong {
  font-weight: 600;
}
.vip-banner01.type-new .banner-amount-box .banner-amount-num {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.38px;
  color: #b48e5a;
}

/* [2024-06-27 트래블버킷 오픈 이벤트 배너] */
.section-top-slide .banner-slide-contents02 .swiper-slide.ani07 {
  background: #303030 url(/images/contents/ani-assets/img-anibox07-item01.png) no-repeat right bottom;
  background-size: cover;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani07 em {
  background: linear-gradient(96deg, #f5e644 1%, #1bfbe5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani07 strong,
.section-top-slide .banner-slide-contents02 .swiper-slide.ani07 .txt-hash span {
  color: #fff;
}

/* [2024-06-14 고객센터 메인 베너 추가] */
.page-contents.type-center-main .banner.type-double-banner {
  display: flex;
  gap: 14px;
}

/* [2024-06-14 포인트 기부 신청 페이지 말풍선 추가] */
.page-point-donation-tooltip-wrap {
  position: relative;
  width: 100%;
  height: 42px;
  margin: -10px 0;
}
.page-point-donation-tooltip-wrap .ui-button-tooltip.page-point-donation {
  left: 0;
  bottom: 0;
  transform: translateX(0);
}
.page-point-donation-tooltip-wrap .ui-button-tooltip.page-point-donation .ui-button-tooltip-text {
  left: 88px;
  bottom: 0;
  transform: translateX(0);
}

/* [2024-06-17 구독 picks 브릿지 화면 : HDH] */
.page-contents.picks-bridge-area {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 50px);
  padding: 0 20px 60px;
}
.page-contents.picks-bridge-area .visual-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: -40px;
}
.page-contents.picks-bridge-area .visual-area img {
  display: block;
  width: 100px;
  height: auto;
  margin: 0 auto;
  animation: floatspot 1s ease-in-out infinite;
}
@keyframes floatspot {
  0% {
      transform: translateY(5px);
  }
  45% {
      transform: translateY(0px);
  }
  100% {
      transform: translateY(5px);
  }
}
.page-contents.picks-bridge-area .visual-area h1 {
  margin-top: 17px;
  font-size: 21px;
  line-height: 26px;
  text-align: center;
}
.page-contents.picks-bridge-area .visual-area h1 strong {
  font-weight: 700;
}
.page-contents.picks-bridge-area .visual-area h1 * {
  font-size: 21px;
  line-height: 26px;
}
.page-contents.picks-bridge-area ul {
  padding-top: 16px;
  border-top: 1px #ddd solid;
}

/* [2024-06-18 고객센터 메인 수정 : HDH] */
.type-center-main .page-title.type-no-icon {
  padding-bottom: 0;
}
.type-center-main .page-title.type-no-icon::after {
  display: none;
}

/* [2024-06-27 마일리지 카드 배너 추가 : HDH] */
.section-top-slide .banner-slide-contents02 .swiper-slide.ani08 {
  background: #303030 url(/images/contents/ani-assets/img-anibox08-item01.png) no-repeat right bottom;
  background-size: cover;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani08 .bnr-top-txt {
  color: #fff;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani08 em {
  color: #ffd777;
}

/* [2024-07-02 : shj] 쿠팡 쇼핑 */
.shopping_wrap {
  line-height: 26px;
}
.shopping_wrap .mar-top-10 {
  margin-top: 10px !important;
}
.shopping_wrap .desc_gray {
  color: #a2a2a2;
  font-size: 12px;
}
.shopping_wrap .min-auto {
  width: auto !important;
  padding: 0 16px;
  height: 34px;
  display: inline-block;
  border-radius: 17px !important;
  font-weight: normal;
}
.shopping_wrap .search-images-cont > img {
  width: 100%;
  margin-top: 20px;
}

.section-title .title .coupang-logo {
  width: 24px;
  height: 24px;
  vertical-align: top;
  margin-left: 6px;
}

/* 쿠팡 검색 */
.benefit-coupang-section {
  position: relative;
  margin-top: 12px;
}
.benefit-coupang-section .badge_coupnag_search {
  position: absolute;
  top: -27px;
  right: 0;
  width: auto;
  height: 43px;
}
.benefit-coupang-section .coupang-search-area {
  margin-top: 15px;
}

.benefit-coupang-section .coupang-search-area .filter-box {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.benefit-coupang-section .coupang-search-area .filter-box li {
  position: relative;
  margin-right: 4px;
  margin-bottom: 4px;
}

.benefit-coupang-section .coupang-search-area .filter-box li label {
  display: inline-block;
  padding: 6px 14px;
  font-size: 14px;
  border: 1px solid rgb(230, 233, 239);
  border-radius: 15px;
  box-sizing: border-box;
  transition: all 0.55 ease-in;
}

.benefit-coupang-section .coupang-search-area .filter-box li input[type="checkbox"] {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.benefit-coupang-section .coupang-search-area .filter-box li input:checked ~ label {
  background-color: rgb(134, 101, 239);
  border-color: rgb(134, 101, 239);
  color: #fff;
}

.benefit-coupang-section .coupang-search-area .search-bar {
  width: 100%;
  margin-top: 15px;
  padding: 16px 15px;
  border: 1px solid black;
  border-radius: 15px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.benefit-coupang-section .coupang-search-area .search-bar input {
  width: calc(100% - 20px);
  font-size: 13px;
  border: 0;
}
.benefit-coupang-section .coupang-search-area.new-coupang-type .search-bar input {
  width: calc(100% - 32px);
}
.benefit-coupang-section .coupang-search-area.new-coupang-type .search-bar {
  border: 1px solid #346aff;
}

.benefit-coupang-section .coupang-search-area .search-bar input:focus {
  outline: none;
}

.benefit-coupang-section .coupang-search-area .search-bar input::placeholder {
  font-size: 13px;
  color: rgb(17, 17, 17);
}

.benefit-coupang-section .coupang-search-area .search-bar .search-btn {
  width: 20px;
  height: 20px;
}

.benefit-coupang-section .coupang-search-area .search-bar .search-btn img {
  width: 100%;
  height: 100%;
}

.benefit-coupang-section .shopping-list-wrap {
  margin-top: 16px;
}

.benefit-coupang-section .shopping-list-wrap .shopping-list {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  flex-wrap: wrap;
}

.benefit-coupang-section .shopping-list-wrap .shopping-item {
  margin-top: 24px;
  width: calc(50% - 4px);
}

.benefit-coupang-section .shopping-list-wrap .shopping-item .item-img-box {
  width: 100%;
  height: 42.5vw;
  overflow: hidden;
  border: 1px solid rgb(229, 229, 229);
  border-radius: 4px;
}

.benefit-coupang-section .shopping-list-wrap .shopping-item .item-img-box img {
  width: 100%;
}

.benefit-coupang-section .shopping-list-wrap .shopping-item .item-price {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 700;
}

.benefit-coupang-section .shopping-list-wrap .shopping-item .item-name {
  width: 100%;
  height: 38px;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 400;
  line-height: 19px;
  color: rgb(17, 17, 17);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
}

.benefit-coupang-section.coupang-section-type-02 {
  padding-top: 30px;
  padding-bottom: 17px;
  background-color: rgb(244, 246, 248);
}

.benefit-coupang-section.coupang-section-type-02 .cont-tit-area .tit {
  font-size: 20px;
  font-weight: 600;
}

.benefit-coupang-section.coupang-section-type-02 .cont-tit-area .tit .tit-img-hand {
  width: 40px;
}

.benefit-coupang-section.coupang-section-type-02 .cont-area {
  margin-top: 8px;
  padding: 36px 20px 20px;
  background-color: #fff;
  border-radius: 6px;
}

.benefit-coupang-section.coupang-section-type-02 .cont-area .cont-tit {
  margin-top: 0;
  font-size: 15px;
  color: rgb(134, 101, 239);
}

.benefit-coupang-section.coupang-section-type-02 .cont-area .total-amount,
.benefit-coupang-section.coupang-section-type-02 .cont-area .total-amount span {
  margin-top: 6px;
  margin-bottom: 20px;
  font-size: 34px;
  line-height: 42px;
}

/* 카테고리 */
.shopping_wrap .sort_btn_wrap {
  position: relative;
  margin-top: 20px;
}
/* .shopping_wrap .sort_btn_wrap .btn_toggle {
position: absolute;
top: 0;
right: 0;
width: 38px;
height: 38px;
display: inline-block;
font-size: 0;
background: url("/images/md/plusshop/btn_toggle_down.png") no-repeat center;
} */
.shopping_wrap .sort_btn_wrap ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.shopping_wrap .sort_btn_wrap ul li button {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 20px;
  color: #888;
  background-color: #f8f8f8;
}
.shopping_wrap .sort_btn_wrap ul li button.on {
  background-color: #00a49d;
  color: #fff;
  font-weight: 700;
}
.shopping_wrap .sort_btn_wrap.coupang-ty ul li button.on {
  background-color: #4285f4;
}

/* 쿠팡 무한 슬라이더 */
.my-tab-content.section-coupang .section-btns:after {
  content: "";
  position: absolute;
  right: -2.4rem;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: 3rem;
  background: #fff;
}
.my-tab-content.section-coupang .coupang-slide {
  position: relative;
  margin: 2.4rem -2.4rem;
  overflow: hidden;
}
.my-tab-content.section-coupang .coupang-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 2.4rem;
  z-index: 10;
  background-color: #fff;
}
.my-tab-content.section-coupang .coupang-slide.product_list ul {
  flex-wrap: nowrap;
  gap: 0;
  padding: 0 2.4rem;
}

.product_list {
  margin-top: 20px;
}
.product_list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.product_list ul li {
  width: calc(50% - 8px);
}
.product_list ul li .pd_item {
  position: relative;
  padding-bottom: 20px;
  display: block;
}
.product_list ul li .pd_item .img {
  position: relative;
  display: block;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  border-radius: 8px;
}
.product_list ul li .pd_item .img img {
  width: 100%;
  font-size: 0;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.product_list ul li .pd_item .img .badge {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  padding: 0 8px;
  font-size: 10px;
  position: absolute;
  border-radius: 16px;
  top: 8px;
  right: 8px;
  color: #fff;
}
.product_list ul li .pd_item .img .badge.tag_replay {
  background-color: rgba(0, 164, 157, 0.6);
}
.product_list ul li .pd_item .img .badge.tag_end {
  background-color: rgba(17, 17, 17, 0.6);
}
.product_list ul li .pd_item .img .badge.tag_end {
  background-color: rgba(17, 17, 17, 0.6);
}
.product_list ul li .pd_item .tit {
  display: block;
  font-size: 13px;
  color: #111;
  margin-top: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product_list ul li .pd_item .price {
  display: block;
  font-weight: 500;
  font-size: 15px;
  color: #111;
  margin-top: 5px;
}
.product_list ul li .pd_item .icon_rocket {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 50px;
}
.product_list ul li .pd_item .icon_rocket img {
  width: 100%;
  vertical-align: middle;
}
.product_list ul li .pd_item .discount_price {
  display: block;
  margin-top: 4px;
}
.product_list ul li .pd_item .discount_price span + span {
  margin-left: 4px;
}
.product_list ul li .pd_item .color-blur-more {
  font-size: 12px;
  text-decoration: line-through;
  color: #888;
}
.product_list.type_no_pd ul li .pd_item {
  padding-bottom: 0;
}

/* // [2024-07-02 : shj] 쿠팡 쇼핑 */

/* 비로그인 메인 버튼추가 - sayho - 24.07.11 */
.logoff-btns-top {
  margin-top: 30px;
  padding: 0 24px;
}
.logoff-btns-top ul {
  display: flex;
  justify-content: space-around;
}
.logoff-btns-top ul li a {
  position: relative;
  display: block;
  padding-top: 57px;
  color: #111;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.logoff-btns-top ul li a::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  display: block;
  width: 47px;
  height: 47px;
  margin-left: -23px;
}
.logoff-btns-top ul li a.img01::before {
  background: url(/images/contents/ic_logoff_btns01.png) no-repeat 0 0 / 47px auto;
}
.logoff-btns-top ul li a.img02::before {
  background: url(/images/contents/ic_logoff_btns02.png) no-repeat 0 0 / 47px auto;
}
.logoff-btns-top ul li a.img03::before {
  background: url(/images/contents/ic_logoff_btns03.png) no-repeat 0 0 / 47px auto;
}
.logoff-btns-top ul li a.img04::before {
  background: url(/images/contents/ic_logoff_btns04.png) no-repeat 0 0 / 47px auto;
}

/* [2024-07-15 : shj] 이미지 크기 맞추기 */
.mgz-contents-list .magazin-card {
  display: block;
}
.mgz-contents-list .magazin-card .magazin-img img {
  width: 100%;
  height: 32vh;
  object-fit: cover;
}

/* [2024-07-18 : shj] 트래블로그 SKYPASS 신용카드 배너 추가 */
.section-top-slide .banner-slide-contents02 .swiper-slide.ani09 {
  background: url(/images/contents/ani-assets/img-anibox09-item01.png) no-repeat right bottom;
  background-size: cover;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani09 .bnr-top-txt {
  color: #111111;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani09 em {
  color: #76431d;
}
/* [2024-07-18 : shj] 트래블로그 Prestige 신용카드 배너 추가 */
.section-top-slide .banner-slide-contents02 .swiper-slide.ani10 {
  background: url(/images/contents/ani-assets/img-anibox10-item01.png) no-repeat right bottom;
  background-size: cover;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani10 .bnr-top-txt {
  color: #111111;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani10 em {
  color: #76431d;
}

/* 혜택메인 슬라이드 접근성 수정 - sayho - 24.07.17 */
/* .new-benefit-slide .slide-account-controller{
display:flex;
}
.new-benefit-slide .slide-account-controller .swiper-button-prev{order:1}
.new-benefit-slide .slide-account-controller .swiper-button-next{order:3}
.new-benefit-slide .slide-account-controller .swiper-pagination {
height: 17px;
line-height: 18px;
margin-top: 0;
padding: 0 2px;
font-size: 9px;
color: var(--basic);
order:2
}
.new-benefit-slide .slide-account-controller .swiper-button-prev,
.new-benefit-slide .slide-account-controller .swiper-button-next {
position: initial;
display: inline-block;
width: 17px;
height: 17px;
margin-top: 0;
vertical-align: top;
}
.new-benefit-slide .slide-account-controller .swiper-button-prev {
background: url(/images/icon/ic_swiper_prev.png) no-repeat center / 17px auto;
}
.new-benefit-slide .slide-account-controller .swiper-button-next {
background: url(/images/icon/ic_swiper_next.png) no-repeat center / 17px auto;
}

.new-benefit-slide .slide-account-controller .swiper-button-prev::before,
.new-benefit-slide .slide-account-controller .swiper-button-next::before {
display: none;
}
.new-benefit-slide .slide-account-controller .swiper-pagination{
position:static;
width:auto;
} */

/* [2024-07-24 : shj] 쿠팡 검색 팝업 */
.layer-coupang-search .benefit-shopping .new-mypage-section .shopping-list .shopping-list-item a {
  border: 1px solid #e5e5e5;
}

/* [2024-07-26 해외직구라운지 메인 개편 : HDH] */
.shopping-lounge-wrap {
  /* margin: 0 -24px; */
  background-color: #000531;
}
.shopping-lounge-wrap .section-contents {
  padding: 0 24px;
  margin-bottom: 34px;
  color: #fff;
}
.shopping-lounge-wrap .section-contents.step-list .step-item {
  position: relative;
  padding-left: 46px;
}
.shopping-lounge-wrap .section-contents.step-list .step-item.step-01,
.shopping-lounge-wrap .section-contents.step-list .step-item.step-02 {
  padding-bottom: 27px;
}
.shopping-lounge-wrap .section-contents.step-list .step-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background: url(/images/gmh/contents/ico_step_01.png) no-repeat;
  background-size: 100% 100%;
}
.shopping-lounge-wrap .section-contents.step-list .step-item.step-item.step-01::after {
  background: url(/images/gmh/contents/ico_step_01.png) no-repeat;
  background-size: 100% 100%;
}
.shopping-lounge-wrap .section-contents.step-list .step-item.step-item.step-02::after {
  background: url(/images/gmh/contents/ico_step_02.png) no-repeat;
  background-size: 100% 100%;
}
.shopping-lounge-wrap .section-contents.step-list .step-item.step-item.step-03::after {
  background: url(/images/gmh/contents/ico_step_03.png) no-repeat;
  background-size: 100% 100%;
}
.shopping-lounge-wrap .section-contents.step-list .step-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15px;
  width: 1px;
  height: 100%;
  background-color: #8665ef;
}
.shopping-lounge-wrap .section-contents.step-list .step-item .step-title {
  margin-bottom: 12px;
  padding-top: 3px;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: #fff;
}
.shopping-lounge-wrap .section-contents.step-list .step-item .shopping-store-list li {
  margin-bottom: 12px;
}
.shopping-lounge-wrap .section-contents.step-list .step-item .shopping-store-list li:last-child {
  margin-bottom: 0;
}
.shopping-lounge-wrap .section-contents.step-list .step-item .shopping-store-list li a {
  display: block;
  width: 100%;
}
.shopping-lounge-wrap .section-contents.step-list .step-item .shopping-store-list li .date-banner {
  position: absolute;
  top:6px;
  right:6px;
  width: 55px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-size: 9px;
  color:#fff;
  background: rgba(0,0,0, 0.6);
  border-radius: 20px;
  font-weight: 700;
}
.shopping-lounge-wrap .section-contents.step-list .event-date {
  font-size: 13px;
  color: #fff;
  line-height: 18px;
}
.shopping-lounge-wrap .section-contents.step-list .event-date strong {
  margin-right: 8px;
  font-weight: 600;
}
.shopping-lounge-wrap .section-contents.step-list .event-date li {
  margin-bottom: 5px;
}
.shopping-lounge-wrap .section-contents.step-list .event-date li:last-child {
  margin-bottom: 0;
}
.shopping-lounge-wrap .event-info .event-info-wrap {
  position: relative;
  padding: 1px;
  background: linear-gradient(to bottom, #00b1c0, #b158ff);
  border-radius: 10px;
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.25);
}
.shopping-lounge-wrap .event-info .event-info-wrap::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100px;
}
.shopping-lounge-wrap .event-info .event-info-wrap ul {
  padding: 24px;
  background-color: #364b6e;
  color: #fff;
  border-radius: 10px;
}
.shopping-lounge-wrap .event-info .event-info-wrap ul li {
  margin-bottom: 24px;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}
.shopping-lounge-wrap .event-info .event-info-wrap ul li:last-child {
  margin-bottom: 0;
}
.shopping-lounge-wrap .event-info .event-info-wrap .event-info-title {
  display: inline-block;
  margin-bottom: 9px;
  padding: 6px 20px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 50px;
}
.shopping-lounge-wrap .event-info .event-info-wrap .event-info-title.type-01 {
  background-color: #0e9db6;
}
.shopping-lounge-wrap .event-info .event-info-wrap .event-info-title.type-02 {
  background-color: #308ec5;
}
.shopping-lounge-wrap .event-info .event-info-wrap .event-info-title.type-03 {
  background-color: #5b7cd8;
}
.shopping-lounge-wrap .event-info .event-info-wrap .event-info-title.type-04 {
  background-color: #9564f3;
}
.shopping-lounge-wrap .event-info .event-info-wrap .event-info-text span.sub-text {
  display: inline-block;
  margin-top: 4px;
  color: #d9d9d9;
  font-weight: 400;
}
.shopping-lounge-wrap .section-contents.btn-list li {
  margin-bottom: 14px;
}
.shopping-lounge-wrap .section-contents.btn-list li a {
  display: block;
  width: 100%;
}
.shopping-lounge-wrap .section-contents.btn-list li:last-child {
  margin-bottom: 0;
}
/* [2025-05-22] */
.page-shopping-lounge.makeMoney .shopping-lounge-wrap .shopping-store-list.btn-type {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.page-shopping-lounge.makeMoney .shopping-lounge-wrap .section-contents.step-list .shopping-store-list.btn-type li {
  width: calc(50% - 6px);
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.09);
}
.page-shopping-lounge .shopping-lounge-wrap .shopping-store-list.btn-type .link-wrap {
  position: relative;
}
.page-shopping-lounge .shopping-lounge-wrap .shopping-store-list.btn-type .link-wrap > a {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.page-shopping-lounge .shopping-lounge-wrap .shopping-store-list.btn-type .link-wrap .btn-short {
  width: 80%;
  height: 65%;
  margin: 0 auto;
}
.page-shopping-lounge .alert-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-height: 0;
  transition: max-height 0.3s;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}
.page-shopping-lounge .alert-wrap.active {
  max-height: calc(100vh - 266px);
}
.page-shopping-lounge .alert-wrap > a {
  display: block;
  width: 100%;
  height: 100%;
}
.page-shopping-lounge .alert-wrap img {
  width: 100%;
  height: 100%;
}
.page-shopping-lounge .alert-wrap .close-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: url(../images/icon/ico-header-close_white.svg) no-repeat center;
  background-size: 18px;
  z-index: 1;
  padding: 12px;
  box-sizing: content-box;
}
/* // [2025-05-22] */
.page-shopping-lounge .use-notice-area {
  padding: 0 24px 24px;
}

/* 보험진단테스트 - sayho - 24.08.01 */
.page-contents.type-test {
  width: 100%;
  height: 100vh;
  height: calc(100dvh - 50px);
  flex: none;
  padding: 0;
  background-color: #e8f5ff;
  overflow: hidden;
}
.test-container.my-ranking-renew {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  /* background-color: #e8f5ff; */
  box-sizing: border-box;
  overflow: hidden;
}
.test-container.my-ranking-renew button.bg-purple {
  background-color: #8665ef;
}
.test-container.my-ranking-renew button.white {
  color: #fff;
}
.test-container.my-ranking-renew button.rounded-sm {
  border-radius: 6px;
}
.test-container.my-ranking-renew .content-area {
  width: 100%;
  /* margin-top: -50px; */
  text-align: center;
}
.test-container.my-ranking-renew.type-intro .tit {
  font-size: 28px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: -0.7px;
  text-align: center;
  word-break: keep-all;
}
.test-container.my-ranking-renew.type-intro .tit .color-purple-gradient {
  color: transparent;
  background: linear-gradient(to right, #9767ff 0%, #546fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: trasparant;
}
.test-container.my-ranking-renew.type-intro .intro-img {
  width: 100%;
}
.test-container.my-ranking-renew.type-intro .my-btn-area {
  position: relative;
  width: 100%;
  padding: 0 24px;
  box-sizing: border-box;
}
.test-container.my-ranking-renew.type-test-content {
  align-items: flex-start;
  justify-content: flex-start;
}
.test-container.my-ranking-renew.type-test-content .content-area {
  margin-top: 0;
}
.test-container.my-ranking-renew.type-test-content .progress-bar {
  position: relative;
  width: 100%;
  height: 4px;
  background-color: #d9d9d9;
}
.test-container.my-ranking-renew.type-test-content .progress-bar::after {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 100%;
  height: 4px;
  background-color: #8665ef;
}
.test-container.my-ranking-renew.type-test-content .progress-bar.width-25::after {
  width: 25%;
}
.test-container.my-ranking-renew.type-test-content .progress-bar.width-50::after {
  width: 50%;
}
.test-container.my-ranking-renew.type-test-content .progress-bar.width-75::after {
  width: 75%;
}
.test-container.my-ranking-renew.type-test-content .test-tit {
  margin-top: calc(100vh * 40 / 747);
  margin-top: calc(100dvh * 40 / 747);
  font-size: 21px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  word-break: keep-all;
}
.test-container.my-ranking-renew.type-test-content .test-tit span {
  font-size: 13px;
  color: #8665ef;
}
.test-container.my-ranking-renew.type-test-content .test-contet-img {
  width: calc(100vh * 246 / 747);
  margin-top: calc(100vh * 38 / 747);
  width: calc(100dvh * 246 / 747);
  margin-top: calc(100dvh * 38 / 747);
}
.test-container.my-ranking-renew.type-test-content .test-select-btn-wrap {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0 24px;
  padding-bottom: calc(100vh * 40 / 747);
  padding-bottom: calc(100dvh * 40 / 747);
  box-sizing: border-box;
}
.test-container.my-ranking-renew.type-test-content .test-select-btn-wrap .test-select-btn {
  width: 100%;
  height: calc(100vh * 84 / 747);
  height: calc(100dvh * 84 / 747);
  padding: 0 17.5px;
  font-size: 17px;
  font-weight: 500;
  background-color: #fff;
  text-align: center;
  border-radius: 6px;
  box-shadow: 0 5px 3px rgba(217, 223, 235, 0.3);
  word-break: keep-all;
}
.test-container.my-ranking-renew.type-test-content .test-select-btn-wrap .test-select-btn:last-child {
  margin-top: 16px;
}
.test-container.my-ranking-renew.type-test-content .test-select-btn-wrap .test-select-btn.active {
  background-color: #e1d7ff;
}
.test-container.my-ranking-renew.type-test-content .test-select-btn-wrap .ui-basic-button + .ui-basic-button {
  margin-top: 10px;
  margin-left: 0 !important;
}
.test-container.my-ranking-renew .loading-img {
  width: calc(100% * 100 / 360);
}
.test-container.my-ranking-renew .loading-tit {
  margin-top: 20px;
  font-size: 20px;
  font-weight: 600;
  line-height: normal;
}
.test-container button.my-btn-type.large {
  width: 100%;
  height: 60px;
  font-size: 18px;
  line-height: 18px;
  text-align: center !important;
  display: block;
  font-weight: 700;
}
.test-container .my-btn-area button:first-child:nth-last-child(1),
.my-btn-area-col button:first-child:nth-last-child(1) {
  width: 100%;
}
.test-container .ins-result-list {
  margin-top: 30px;
}
.test-container .ins-result-list li {
  margin-top: 10px;
  font-size: 16px;
  text-decoration: underline;
}
.test-container .ins-result-list li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 12px;
  margin-right: 6px;
  border-bottom: 3px solid #000;
  border-right: 3px solid #000;
  transform: rotate(45deg);
}

/* [2024-08-13 오토캐시백 선입금 방식 프로모션 영역 추가 : HDH] */
.plus-icon-wrap {
  width: 100%;
  margin: 20px 0;
}
.plus-icon-wrap .plus-icon {
  position: relative;
  width: 23px;
  height: 23px;
  margin: 0 auto;
}
.plus-icon-wrap .plus-icon::before {
  position: absolute;
  top: 50%;
  left: 0;
  content: "";
  width: 100%;
  height: 4px;
  background-color: #8c8c8c;
  transform: translateY(-50%);
}
.plus-icon-wrap .plus-icon::after {
  position: absolute;
  top: 50%;
  left: 0;
  content: "";
  width: 100%;
  height: 4px;
  background-color: #8c8c8c;
  transform: translateY(-50%) rotate(90deg);
}

/* 24.08.19 My_home_l009.html 팝업 말풍선 추가 - sayho */
.btn-bubble-text-box {
  position: absolute;
  top: -40px;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  text-align: center;
}

/* <======================== 자동선결제 css 이동 ========================> */
/* [2024-05-31 : lyr] type-arrow-text 추가 (자동선결제) */
.menu-link-button.type-arrow-text {
  justify-content: space-between;
  min-height: 66px;
  padding: 15px 16px;
}
.menu-link-button.type-arrow-text::after {
  display: none;
}
/* [2024.07.29 : lyr] (자동선결제) width 삭제, padding-right 추가 */
.menu-link-button.type-arrow-text .menu-link-arrow {
  display: inline-block;
  /* width: 38px; */
  height: 23px;
  padding-right: 1.2rem;
  font-size: 1.3rem;
  background: url(../images/common/ic-button-arrow.png) no-repeat 100% center / auto 10px;
  color: #888;
}
.menu-link-button.type-arrow-text .menu-link-left {
  display: flex;
}
.menu-link-button.type-arrow-text .menu-link-text {
  font-size: 1.7rem;
}
.logo-image.type-global-brand-hanacard .logo-image-inner::before {
  background: url("/images/_dummy/logo-hana-card.png") no-repeat center center / auto 100%;
}
.logo-image.type-global-brand-toss .logo-image-inner::before {
  background: url("/images/integrated-auth/icon/icon-toss.png") no-repeat #f5f5f5 center center / auto 100%;
}
/* [24.08.08 : lyr] [WPM-6806] 자동선결제 명세서 버튼 4개로 변경 및 디자인 타입 변경 작업 */
.welcome-nav.type-bill2 {
  border-bottom: none;
  border-radius: 0;
  background-color: transparent;
}
.welcome-nav.type-bill2 .welcome-nav-list {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  padding: 0;
}
.welcome-nav.type-bill2 .welcome-nav-list .welcome-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 40%;
  height: 4rem;
  border-radius: 0.4rem;
  background-color: var(--secondary);
}
.welcome-nav.type-bill2 .welcome-nav-link {
  padding: 0;
  font-weight: 400;
  line-height: 1.8rem;
}
.welcome-nav.type-bill2 .welcome-nav-link div {
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.5rem;
  color: #fff;
}
.welcome-nav.type-bill2 .welcome-nav-link .small-text {
  font-size: 1.3rem;
}
.welcome-nav.type-bill2 .welcome-nav-item + .welcome-nav-item::before {
  display: none;
}
/* [24.08.13 : lyr] 자동선결제 no result 추가 (MY_pay_p070_noresult.html) */
.noresult.type-star {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
}
.noresult.type-star .noresult_img {
  width: 100px;
}
.noresult.type-star .noresult_text {
  font-size: 15px;
  color: #111;
}
/* 24.08.22 MY_pay_p061.html 자동선결제 버튼 sticky - lhj */
.btn-autopayment {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 24px;
  margin-left: -24px;
  background: #ffffff;
}
/* end // <======================== 자동선결제 css 이동 ========================> */

/* [2024-08-27 우수회원 라운지 메인 베너 추가 : HDH] */
.vip-banner-reward.type-coupon::after {
  background: url(/images/vip/images/common/img_vip_banner_coupon.png) no-repeat 85% center / auto 81px;
}


/* <===================== 메인 인디케이터 이동 =====================> */

/* 
[24.07.09 : lyr] 비로그인 메인 > 슬라이더 인디케이터 디자인 변경 [banner-logoff-slide]
[24.07.17 : lyr] 홀딩, 원상복구
[24.08.22 : lyr] 주석 풀었음 ==> a11y-work.css에서 현 파일로 이동
[24.09.04 : lyr] 운영 배포
*/
.section-top-slide .banner-logoff-slide-controller {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 1;
  display: inline-block;
  width: auto;
  padding: 0 4px;
  text-align: center;
  font-size: 0;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.8);
}
.section-top-slide .banner-logoff-slide-controller .swiper-pagination {
  height: 17px;
  line-height: 18px;
  margin-top: 0;
  font-size: 10px;
  color: var(--basic);
}
.section-top-slide .banner-logoff-slide-controller .swiper-button-prev {
  background: url(/images/icon/ic_swiper_prev.png) no-repeat center / 17px auto;
}
.section-top-slide .banner-logoff-slide-controller .swiper-button-next {
  background: url(/images/icon/ic_swiper_next.png) no-repeat center / 17px auto;
}
.section-top-slide .banner-logoff-slide-controller .swiper-button-prev,
.section-top-slide .banner-logoff-slide-controller .swiper-button-next {
  position: initial;
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-top: 0;
  vertical-align: top;
}
.section-top-slide .banner-logoff-slide-controller .swiper-button-prev::after,
.section-top-slide .banner-logoff-slide-controller .swiper-button-next::after {
  display: none;
}
.section-top-slide .banner-logoff-slide-controller .btn-banner-logoff-controller.stop,
.section-top-slide .banner-logoff-slide-controller .btn-banner-logoff-controller.play {
  width: 17px;
  height: 17px;
  margin-left: 0;
  margin-top: 0;
  vertical-align: middle;
  background-size: 12px;
}
.section-top-slide .banner-logoff-slide-controller .swiper-pagination-current {
  font-weight: bold;
}
.section-top-slide .banner-logoff-container {
  padding-bottom: 0;
}
.section-top-slide .banner-logoff-slide-controller .swiper-pagination-current,
.section-top-slide .banner-logoff-slide-controller .swiper-pagination-total {
  margin: 0 2px;
}

/*
[24.08.22 : lyr] 비로그인 메인 > 슬라이더 인디케이터 디자인 변경 [banner-slide-contents]
[24.09.04 : lyr] 운영 배포
*/
.banner-coupon-container .banner-coupon-slide-controller,
.section-bnr-slide .banner-slide-contents .banner-coupon-slide-controller {
  height: 17px;
}
.section-bnr-slide .banner-slide-contents .banner-coupon-slide-controller .swiper-pagination {
  min-width: 18px;
  height: 17px;
  line-height: 18px;
  margin-top: 0;
  font-size: 10px;
  color: var(--basic);
}
.banner-coupon-container .banner-coupon-slide-controller .swiper-button-prev,
.section-bnr-slide .banner-slide-contents .banner-coupon-slide-controller .swiper-button-prev {
  background: url(/images/icon/ic_swiper_prev.png) no-repeat center / 17px auto;
}
.banner-coupon-container .banner-coupon-slide-controller .swiper-button-next,
.section-bnr-slide .banner-slide-contents .banner-coupon-slide-controller .swiper-button-next {
  background: url(/images/icon/ic_swiper_next.png) no-repeat center / 17px auto;
}
.banner-coupon-container .banner-coupon-slide-controller .swiper-button-prev,
.banner-coupon-container .banner-coupon-slide-controller .swiper-button-next,
.section-bnr-slide .banner-slide-contents .banner-coupon-slide-controller .swiper-button-prev,
.section-bnr-slide .banner-slide-contents .banner-coupon-slide-controller .swiper-button-next {
  position: initial;
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-top: 0;
  vertical-align: top;
}
.banner-coupon-container .banner-coupon-slide-controller .swiper-button-prev::after,
.banner-coupon-container .banner-coupon-slide-controller .swiper-button-next::after,
.section-bnr-slide .banner-slide-contents .banner-coupon-slide-controller .swiper-button-prev::after,
.section-bnr-slide .banner-slide-contents .banner-coupon-slide-controller .swiper-button-next::after {
  display: none;
}
.banner-coupon-container .banner-coupon-slide-controller .btn-banner-coupon-controller.stop,
.banner-coupon-container .banner-coupon-slide-controller .btn-banner-coupon-controller.play .section-bnr-slide .banner-slide-contents .banner-coupon-slide-controller .btn-banner-coupon-controller.stop,
.section-bnr-slide .banner-slide-contents .banner-coupon-slide-controller .btn-banner-coupon-controller.play,
.section-bnr-slide .banner-slide-contents .banner-coupon-slide-controller .btn-banner-coupon-controller.stop,
.section-bnr-slide .banner-slide-contents .banner-coupon-slide-controller .btn-banner-coupon-controller.play {
  width: 17px;
  height: 17px;
  margin-left: 0;
  margin-top: 0;
  vertical-align: middle;
  background-size: 12px;
}
.banner-coupon-container .banner-coupon-slide-controller .swiper-pagination-current,
.section-bnr-slide .banner-slide-contents .banner-coupon-slide-controller .swiper-pagination-current {
  font-weight: bold;
}
.banner-coupon-container .banner-coupon-slide-controller .swiper-pagination-current,
.banner-coupon-container .banner-coupon-slide-controller .swiper-pagination-total,
.section-bnr-slide .banner-slide-contents .banner-coupon-slide-controller .swiper-pagination-current,
.section-bnr-slide .banner-slide-contents .banner-coupon-slide-controller .swiper-pagination-total {
  margin: 0 2px;
}
.vip-banner-slide .slide-banner-controller {
  bottom: 16px;
}

/* [24.09.06 : lyr] [WPM-8171] 켠김에 머니 벌기 ==> 버티컬 타입 추가 */
.menu-horizontal-area.type-vertical .menu-horizontal-list {
  flex-direction: column;
  gap: 12px;
}
.menu-horizontal-area.type-vertical .menu-horizontal-item + .menu-horizontal-item {
  margin-left: 0;
}
.menu-horizontal-area.type-vertical .menu-horizontal-link.type-col {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
}
.menu-horizontal-area.type-vertical .menu-horizontal-money {
  font-size: 22px;
  font-weight: bold;
  color: #029c94;
}
.menu-horizontal-area.type-vertical .menu-horizontal-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 150px;
  height: 100%;
  padding: 20px 15px;
  box-sizing: border-box;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 3px 5px 0 rgb(217 223 235 / 30%);
}
.menu-horizontal-area.type-vertical .menu-horizontal-banner .menu-horizontal-icon {
  width: 68px;
  height: auto;
}
.menu-horizontal-area.type-vertical .menu-horizontal-banner .menu-horizontal-icon img {
  width: 100%;
}
.menu-horizontal-area.type-vertical .menu-horizontal-banner .menu-horizontal-text {
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: 400;
}
.menu-horizontal-area.type-vertical .menu-horizontal-banner .menu-horizontal-title {
  font-size: 16px;
  font-weight: bold;
}
/* [24.09.06 : lyr] [WPM-8171] 켠김에 머니 벌기 ==> 토글박스 커스텀 */
.toggle-info-list.type-1 {
  margin: 0;
  padding: 0;
  background-color: transparent;
}
.toggle-info-list.type-1 .toggle-info-item {
  padding: 8px 6px 8px 6px;
}
.toggle-info-list.type-1 .toggle-info-item .ui-toggle-block {
  right: 6px;
}
.toggle-info-list.type-1 .toggle-info-contents {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toggle-info-list.type-1 .toggle-info-contents .con-title {
  font-size: 14px;
  font-weight: 500;
  color: #111;
}
.toggle-info-list.type-1 .toggle-info-icon {
  width: 16px;
}
.toggle-info-list.type-1 .noti-text {
  padding-left: 30px;
  font-size: 13px;
  color: #888;
}
/* [24.09.06 : lyr] [WPM-8171] 켠김에 머니 벌기 ==> 숫자가 챠르르 돌아가는 타이틀 */
.section-title.type-mission {
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  color: #111;
}
.section-title.type-mission .txt-primary {
  margin: 0 4px;
  color: #029c94;
}
/* [24.09.06 : lyr] [WPM-8171] 켠김에 머니 벌기 ==> 아이콘+텍스트 목록 */
.icon_cont_list {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 32px;
  padding: 0;
}
.icon_cont_list .icon_cont_list-items {
  display: flex;
  align-items: center;
  gap: 10px;
}
.icon_cont_list .icon_cont_list-ico {
  width: 41px;
  height: 41px;
  margin-right: 0;
}
.icon_cont_list .icon_cont_list-ico.test1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 100%;
  background-color: #f4f5f6;
}
.icon_cont_list .icon_cont_list-ico.test1 img {
  width: 30px;
}
.icon_cont_list .icon_cont_list-ico.test2 {
  width: 32px;
  height: 32px;
}
.icon_cont_list .icon_cont_list-ico img {
  width: 100%;
}
.icon_cont_list .mission-contents-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 14px;
}
.icon_cont_list .mission-contents {
  flex: 1;
}
.icon_cont_list .mission-contents .mission-contents-title {
  font-size: 17px;
  font-weight: 500;
  color: #111;
}
.icon_cont_list .mission-contents .mission-contents-desc {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 400;
  color: #029c94;
}
/* [24.09.20 : lyr] [WPM-8171] 켠김에 머니 벌기 / 김지수 계장님 ==> [10원 받기 --> 7,000원 받기] 로 변경하며 테스트 했더니 두줄로 떨어져서 가로 사이즈 5px 추가 */
.icon_cont_list .btn-mission-benefit {
  /* [2024-12-10 : shj] width 95px -> 100px로 변경 */
  width: 100px;
  height: 32px;
  line-height: 1;
  padding: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  box-sizing: border-box;
  border-radius: 6px;
  background-color: #d8f3f2;
  color: #029c94;
}
/* [24.09.23 : lyr] [WPM-8171] 켠김에 머니 벌기 / 김지수 계장님 ==> 버튼 disabled 말고 class(.is-disabled)로 처리 요청 건 */
.icon_cont_list .btn-mission-benefit.is-disabled {
  background-color: #e5e5e5;
  color: #666;
}

/* [24.08.16 : lyr] 크로스마일 추가 : B_point_p037.html, B_point_p002--tab3_240816.html */
.ui-illust.type-12 {
  height: 80px;
  background-image: url(../images/illustration/img-crossmile.png);
}
.rd-box.rd-box--crossmile {
  position: relative;
  width: 100%;
  height: 21rem;
  border-radius: 1.5rem;
  background-color: #129fc4;
}
.rd-box.rd-box--crossmile .rd-box-text,
.rd-box.rd-box--crossmile .rd-box-text__desc {
  color: #fff;
}
.rd-box.rd-box--crossmile .rd-box-text__subtitle {
  font-size: 1.3rem;
  font-weight: 500;
}
.rd-box.rd-box--crossmile .rd-box-text__title {
  margin-top: 0.8rem;
  font-size: 1.8rem;
  font-weight: bold;
}
.rd-box.rd-box--crossmile .rd-box-text__desc {
  margin-top: 1rem;
  font-size: 1.3rem;
  font-weight: 300;
}
.rd-box.rd-box--crossmile .rd-box-icon {
  position: absolute;
  right: 2.7rem;
  bottom: 2.4rem;
  width: 9.7rem;
}
.rd-box.rd-box--crossmile .rd-box-icon img {
  width: 100%;
}

/* [24.09.13 : lyr] 카드상세 탭 디자인 신규 추가 */
.wcms-data .card-detail-tab {
  margin: -20px -24px 0;
  padding: 0 24px;
  list-style: none;
}
.card-detail-tab {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 28px;
  background-color: #fff;
}
.card-detail-tab * {
  box-sizing: border-box;
}
.card-detail-tab .card-detail-item {
  position: relative;
  width: 100%;
  padding: 7px 0;
}
.card-detail-tab .card-detail-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  background-color: transparent;
}
.card-detail-tab .card-detail-item.active::after {
  background-color: #111;
}
.card-detail-tab .card-detail-link {
  display: block;
  text-align: center;
  text-decoration: none;
}
.card-detail-tab .card-detail-text {
  font-size: 15px;
  color: #888;
}
.card-detail-tab .card-detail-item.active .card-detail-text {
  font-size: 15px;
  font-weight: 500;
  color: #111;
}

/* 24.09.11 별별뉴스 컨텐츠상세 하단 인클루드 버튼 숨김처리 - sayho */
/* .btn-list-go{display:none;} */

/* 24.09.12 체크박스 위치 수정 - sayho - S_notify_p002_240826.html */
.ui-checkbox-group.type-wrap.type-item-center {
  align-items: center;
}

/* 24.09.19 자동차 보험료 조회 5천머니 추가적립 이벤트 - sayho */
/* 24.09.19 L_living_p056_240912.html, L_living_l105.html */
.cont-ins-box.event-type-box {
  background: #ece6ff;
}
.cont-ins-box.event-type-box .txt-benefit {
  position: relative;
  background: #8665ef;
  color: #fff;
}
.cont-ins-box.event-type-box .txt-benefit .img-bubble {
  position: absolute;
  right: -8px;
  top: -46px;
  animation: ani-bounce02 2s ease-in-out infinite;
}
.cont-ins-box.event-type-box .txt-benefit .img-bubble img {
  height: 42px;
}
.layer-evnet-top {
  padding: 32px 24px 36px;
  overflow: hidden;
}
.layer-evnet-top .top-txt {
  color: #888;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
}
.layer-evnet-top .top-txt strong {
  display: block;
  margin-bottom: 8px;
  font-size: 26px;
  line-height: 33px;
  font-weight: 700;
  background: linear-gradient(to bottom, #8665ef, #6a4bcb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.layer-evnet-top .txt-date {
  margin-top: 12px;
  padding: 8px;
  border-radius: 3px;
  background: #f4f6f8;
  color: #666;
  text-align: center;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
}
.layer-evnet-top .txt-date span {
  color: #008882;
}

/*[2024-11-04 : MJ] 그라디언트 버튼 추가 - 이후 다른 페이지에도 그라디언트 버튼이 사용되면 common.css로 옮겨주세요.*/
.ui-basic-button.type-gradient-pink {
  background: linear-gradient(137deg, #57e2d9 0%, rgba(69, 116, 231, 0.9) 50%, #e873d5 100%);
  border: none;
  color: #fff;
}

.layer-gray-box {
  padding: 36px 24px;
  background: #f4f6f8;
}
.event-step-list {
  position: relative;
  width: 312px;
  height: 212px;
  margin-top: 28px;
  left: 50%;
  transform: translateX(-50%);
}
.event-step-list::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 114px;
  margin-top: -75px;
  border-radius: 61px;
  border: 4px solid #e5e5e5;
  z-index: -1;
}
.event-step-list::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 90px;
  height: 122px;
  margin-top: -75px;
  background: #fff;
  z-index: -1;
}
.event-step-list li {
  position: absolute;
  text-align: center;
  font-size: 13px;
  line-height: 18px;
}
.event-step-list li .logo {
  display: block;
  width: 74px;
  height: 74px;
  margin-bottom: 8px;
  background: url(/images/contents/ic_event_steplist_off.png) no-repeat 0 0 / cover;
}

.event-step-list li .img-bubble {
  position: absolute;
  left: -6px;
  top: -16px;
}
.event-step-list li .img-bubble img {
  height: 42px;
}
.cont-ins-box.selected .txt-benefit {
  background: #e5e5e5;
  color: #666;
}

.event-step-list li:nth-child(5) .logo {
  display: block;
  width: 74px;
  height: 74px;
  margin-bottom: 8px;
  background: url(/images/contents/ic_event_steplist_hanamoney_off.png) no-repeat 0 0 / cover;
}
.event-step-list li:nth-child(1) .logo.active {
  display: block;
  width: 74px;
  height: 74px;
  margin-bottom: 8px;
  background: url(/images/contents/ic_event_steplist_logo01.png) no-repeat 0 0 / cover;
}
.event-step-list li:nth-child(2) .logo.active {
  display: block;
  width: 74px;
  height: 74px;
  margin-bottom: 8px;
  background: url(/images/contents/ic_event_steplist_logo02.png) no-repeat 0 0 / cover;
}
.event-step-list li:nth-child(3) .logo.active {
  display: block;
  width: 74px;
  height: 74px;
  margin-bottom: 8px;
  background: url(/images/contents/ic_event_steplist_logo03.png) no-repeat 0 0 / cover;
}
.event-step-list li:nth-child(4) .logo.active {
  display: block;
  width: 74px;
  height: 74px;
  margin-bottom: 8px;
  background: url(/images/contents/ic_event_steplist_logo04.png) no-repeat 0 0 / cover;
}
.event-step-list li:nth-child(5) .logo.active {
  display: block;
  width: 74px;
  height: 74px;
  margin-bottom: 8px;
  background: url(/images/contents/ic_event_steplist_hanamoney.png) no-repeat 0 0 / cover;
}
.event-step-list li:nth-child(1) {
  left: 25px;
}
.event-step-list li:nth-child(2) {
  left: 119px;
}
.event-step-list li:nth-child(3) {
  left: 213px;
}
.event-step-list li:nth-child(4) {
  left: 166px;
  bottom: 0;
}
.event-step-list li:nth-child(5) {
  left: 72px;
  bottom: 0;
}

/* [2025-10-13 KJH] [WPM-220374707] 수정 */
.event-step-list.name-add {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 20px;
  padding-inline: 25px;
  box-sizing: border-box;
}
.event-step-list.name-add li[class*=item-] {
  position: relative;
  inset: unset;
}


/* [2026-02-05 KJH] 포지션으로 관리 안함 */
/* 5개 일때 */
/* .event-step-list.name-add .item-samsung {
  left: 25px;
}
.event-step-list.name-add .item-kb {
  left: 119px;
}
.event-step-list.name-add .item-db {
  left: 213px;
}
.event-step-list.name-add .item-hd {
  left: 166px;
  bottom: 0;
}
.event-step-list.name-add .item-hanam {
  left: 72px;
  bottom: 0;
} */

/* 6개 일때 */
/* .event-step-list.name-add .item-samsung {
  left: 25px;
}
.event-step-list.name-add .item-db {
  left: 119px;
}
.event-step-list.name-add .item-axa {
  left: 213px;
}
.event-step-list.name-add .item-hd {
  left: 213px;
  bottom: 0;
}
.event-step-list.name-add .item-kb {
  left: 119px;
  bottom: 0;
}
.event-step-list.name-add .item-hanam {
  left: 25px;
  bottom: 0;
} */

.event-step-list.name-add li[class*=item-] .logo {
  display: block;
  width: 74px;
  height: 74px;
  margin-bottom: 8px;
  background-repeat: no-repeat;
  background-image: url(/images/contents/ic_event_steplist_off.png);
  background-position: 0 0;
  background-size: cover;
}

.event-step-list.name-add li.item-hanam .logo {
  background-image: url(/images/contents/ic_event_steplist_hanamoney_off.png);
}

.event-step-list.name-add .item-samsung .logo.active {
  background-image: url(/images/contents/ic_event_steplist_logo01.png);
}
.event-step-list.name-add .item-samsung.v2 .logo.active {
  background-image: url(/images/contents/life/logo-47.png);
  border-radius: 50%;
}
.event-step-list.name-add .item-db .logo.active {
  background-image: url(/images/contents/ic_event_steplist_logo02.png);
}
.event-step-list.name-add .item-axa .logo.active {
  background-image: url(/images/contents/ic_event_steplist_logo03.png);
}
.event-step-list.name-add .item-hd .logo.active {
  background-image: url(/images/contents/ic_event_steplist_logo05.png);
}
.event-step-list.name-add .item-kb .logo.active {
  background-image: url(/images/contents/ic_event_steplist_logo04.png);
}
.event-step-list.name-add .item-hanam .logo.active {
  background-image: url(/images/contents/ic_event_steplist_hanamoney.png);
}
/* // [2025-10-13 KJH] [WPM-220374707] 수정 */

/* 24.09.20 유료상품 이용 현황 - sayho - L_use_p001.html */
.prd-contents {
  background: #f4f6f8;
}
.flex-prd-box + .flex-prd-box {
  margin-top: 15px;
}
.flex-prd-box {
  display: flex;
  align-items: center;
  padding: 24px 20px;
  box-shadow: 0px 3px 5px 0px rgba(217, 223, 234, 0.3);
  background: #fff;
  border-radius: 10px;
}
.flex-prd-box .flex-prd-cont {
  flex: 1;
  margin-right: 20px;
}
.flex-prd-box .flex-prd-cont strong {
  display: block;
  font-size: 17px;
  line-height: 21px;
}
.flex-prd-box .flex-prd-cont p {
  margin-top: 6px;
  color: #888;
  font-size: 13px;
  line-height: 16px;
  word-break: keep-all;
}
.flex-prd-box .prd-link {
  display: flex;
  width: 58px;
  height: 42px;
  flex: 0 0 auto;
  background: #029c94;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.flex-prd-box .prd-link.disabled {
  background: #e5e5e5;
  color: #888;
}
.flex-prd-box .prd-link.search{
  background: #f5f5f5;
  color: #111;
} /* [2026-06-24 KEJ] [WPM-14964] 추가 */

/* [2024-09-27 혜택탭 > 오늘의 용돈 페이지 : HDH] */
.page-apptech .page-contents {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.page-apptech .banner-box {
  position: relative;
  display: block;
  width: 100%;
  padding: 20px;
  border-radius: 10px;
  box-sizing: border-box;
  word-break: keep-all;
}
.page-apptech .banner-box.type-01 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  gap: 12px;
  background-color: #f4f6f8;
}
.page-apptech .banner-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 27px;
  padding: 0 10px;
  background-color: #029c94;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  flex: 0 0 auto;
}
.page-apptech .banner-button.type-01 {
  width: 44px;
  height: 32px;
  background-color: #d8f3f2;
  color: #029c94;
}
.page-apptech .page-apptech-section {
  margin-top: 40px;
}
.page-apptech .page-apptech-section.section-top {
  margin-top: 26px;
}
.page-apptech .banner-box.type-02 {
  background-color: #ece6ff;
}
.page-apptech .text-bubble-5000 {
  position: absolute;
  top: -18px;
  right: calc(100vw / 360 * 14);
  width: 137px;
}
.page-apptech .apptech-more-item .text-bubble-5000 {
  position: absolute;
  top: -27px;
  right: calc(50% - 68.5px);
  width: 137px;
}
.page-apptech .banner-box.type-02 .banner-inner-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.page-apptech .banner-box.type-02 .banner-inner-top .banner-title {
  font-size: 18px;
  font-weight: 700;
}
.page-apptech .banner-box.type-02 .banner-inner-top .banner-text {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
}
.page-apptech .banner-box.type-02 .banner-inner-top .banner-icon {
  width: calc(100vw / 360 * 88);
}
.page-apptech .banner-box.type-02 button {
  margin-top: 10px;
  color: #fff;
  background-color: #8665ef;
  border-radius: 4px;
}
.page-apptech .banner-box.type-03 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 16px;
  padding: 16px 20px;
  gap: 12px;
  background-color: #f4f6f8;
}
.page-apptech .banner-box.type-03 .banner-icon {
  width: 63px;
}
.page-apptech .banner-box.type-03 .banner-title {
  margin-top: 4px;
  font-size: 16px;
  line-height: 21px;
}
.page-apptech .banner-box.type-03 .banner-text {
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
}
.page-apptech .banner-box.type-03::after {
  position: absolute;
  content: "";
  top: calc(50% - 6px);
  right: 20px;
  width: 12px;
  height: 12px;
  background-image: url(/images/icon/ic-header-back.png);
  background-size: 12px;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}
.page-apptech .banner-box.type-03.color-01 {
  background-color: #e4f4d7;
}
.page-apptech .banner-box.type-03.color-01 .banner-text {
  color: #367700;
}
.page-apptech .banner-box.type-03.color-02 {
  background-color: #e2f0ff;
}
.page-apptech .banner-box.type-03.color-02 .banner-text {
  color: #0268d8;
}
.page-apptech .page-apptech-section .section-title {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}
.page-apptech .apptech-benefit-list .apptech-benefit-item {
  margin-bottom: 24px;
}
.page-apptech .apptech-benefit-list .apptech-benefit-item:last-child {
  margin-bottom: 0;
}
.page-apptech .apptech-benefit-list .apptech-benefit-item a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 48px;
  padding-left: 60px;
  box-sizing: border-box;
}
.page-apptech .apptech-benefit-list .apptech-benefit-item a .item-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}
.page-apptech .apptech-benefit-list .apptech-benefit-item a .item-text {
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
}
.page-apptech .apptech-benefit-list .apptech-benefit-item a::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 48px;
  height: 48px;
}
.page-apptech .apptech-benefit-list .apptech-benefit-item.item-01 a::before {
  background: url(/images/new_benefit_images/apptech/ic_apptech_benefit_01.png) no-repeat 100% / 100%;
}
.page-apptech .apptech-benefit-list .apptech-benefit-item.item-02 a::before {
  background: url(/images/new_benefit_images/apptech/ic_apptech_benefit_02.png) no-repeat 100% / 100%;
}
.page-apptech .apptech-benefit-list .apptech-benefit-item.item-03 a::before {
  background: url(/images/new_benefit_images/apptech/ic_apptech_benefit_03.png) no-repeat 100% / 100%;
}
.page-apptech .apptech-benefit-list .apptech-benefit-item.item-04 a::before {
  background: url(/images/new_benefit_images/apptech/ic_apptech_benefit_04.png) no-repeat 100% / 100%;
}
.page-apptech .apptech-more-list {
  /* gap: calc(100vw / 360 * 12); */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: space-between;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
}
.page-apptech .apptech-more-list .apptech-more-item {
  position: relative;
  width: calc(50% - 6px);
  /* flex: 1 1 auto; */
}
.page-apptech .apptech-more-list .apptech-more-item a {
  display: block;
  width: 100%;
  padding: 16px;
  background-color: #e4f4d7;
  border-radius: 10px;
  text-align: center;
  box-sizing: border-box;
}
.page-apptech .apptech-more-list .apptech-more-item .apptech-more-icon-img {
  width: 68px;
}
.page-apptech .apptech-more-list .apptech-more-item .item-title {
  margin-top: 8px;
  font-size: 16px;
  line-height: 21px;
}
.page-apptech .apptech-more-list .apptech-more-item .item-button {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 11px 0;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background-color: #58b907;
  border-radius: 4px;
}
.page-apptech .apptech-more-list .apptech-more-item.item-02 a {
  background-color: #e2f0ff;
}
.page-apptech .apptech-more-list .apptech-more-item.item-02 .item-button {
  background-color: #3396fc;
}
.page-apptech .apptech-bottom-banner {
  display: block;
  width: 100%;
}
.page-apptech .apptech-bottom-banner img {
  display: block;
  width: 100%;
  border-radius: 10px;
}
/* //[2024-09-27 혜택탭 > 오늘의 용돈 페이지 : HDH] */
/* [2024-09-27 혜택탭 머니박스 영역 추가 : HDH] */
.benefit-page-section .banner-money-box {
  position: relative;
  display: block;
  width: 100%;
  box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.03);
}
.benefit-page-section .banner-money-box .text-bubble-5000 {
  position: absolute;
  left: 31.5%;
  top: -9px;
  width: calc(100vw / 360 * 81);
}

/* START [24-09-20 : shj] [WPM-8514] [기타] '화면 내 클래스, css 조정 요청'_'박선솔' 사전협의-2024-07-31 */
/* [2024-09-20 : shj] 4p 결제계좌 (240725_하나페이화면수정__종합.pptx)*/
.terms-item .ui-checkbox-block ~ .ui-arrow {
  margin-top: 10px;
  margin-left: 26px;
}
/* [2024-09-20 : shj] 5p 이용한도 조회·변경(240725_하나페이화면수정__종합.pptx) */
.section-title .title + .section-title-info {
  margin-top: 15px;
  font-weight: 500;
}
/* [2024-09-20 : shj] 6p 이용한도 조회·변경 (240725_하나페이화면수정__종합.pptx)*/
.status-notice .status-notice-title {
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 24px;
}
.status-notice .status-notice-contents {
  margin-top: 8px;
  padding-top: 0;
  border: 0;
}
.status-notice .status-notice-contents button {
  margin-top: 20px !important;
  width: 100%;
  min-width: 52px;
  min-height: 40px;
  border-radius: 4px;
  font-size: 1.5rem;
}
/* [2024-09-20 : shj] 8p 해외 온라인 안심 결제 (240725_하나페이화면수정__종합.pptx) */
.form-detail-item-wrap:not(:first-child) {
  margin-top: 35px;
}
/* [2024-09-20 : shj] 9p 이달의 혜택 (240725_하나페이화면수정__종합.pptx) */
.usage-default-etc .usage-default-etc-item span.color-primary,
.usage-default-etc .usage-default-etc-item span.color-secondary {
  color: var(--gray-70) !important;
}
/* [24-09-20 : shj] 10p 실적충족조회 (240725_하나페이화면수정__종합.pptx) */
.card-details-head.type-big .cord_name_textus {
  display: block;
  margin: 0;
}
.card-details-head.type-big .card-details-img {
  height: 70px;
  margin: 35px auto 32px;
}
.card-details-head.type-big .card-details-name {
  margin-top: 0;
  font-size: 1.8rem;
  line-height: normal;
  text-align: center;
}
/* [2024-09-20 : shj] 11p 통합검색 (240725_하나페이화면수정__종합.pptx) */
.info-cards.type-regular .info-cards-text {
  color: var(--gray-80);
  font-weight: 400;
}
.usage-default-block.type-event .usage-default-etc {
  margin-top: 4px;
}
/* [2024-09-20 : shj] 12p 건별 즉시결제 (240725_하나페이화면수정__종합.pptx) */
.page-point-donation-tooltip-wrap .ui-button-tooltip.page-point-donation.tooltip-pay-pos {
  width: auto;
  left: 62px;
}
/* [2024-09-20 : shj] 13p 건별 즉시결제 (240725_하나페이화면수정__종합.pptx) */
.detail-history-sub {
  font-weight: 400;
}
/* [2024-09-20 : shj] 14p 가상계좌 입금결제 (240725_하나페이화면수정__종합.pptx) */
.info-list.type-flex.type-flex-half {
  flex-wrap: wrap;
  gap: 12px 5px;
}
.info-list.type-flex.type-flex-half .info-item {
  flex: 1 1 40%;
  -ms-flex: 1 1 40%;
}
.info-list.type-flex.type-flex-half .info-item:nth-child(1) {
  flex: 1 1 100%;
  -ms-flex: 1 1 100%;
}
.info-list.type-flex.type-icon .info-item {
  padding-left: 0;
}
.info-list.type-flex.type-icon .info-item:before {
  background: none;
}
.info-list.type-flex.type-icon .info-item .icon-img {
  display: inline-block;
  margin-right: 4px;
}
.info-list.type-flex.type-icon .info-item .icon-img img {
  width: 16px;
  height: auto;
}
/* [2024-09-20 : shj] 16p 일반결제(안심클릭) 등록관리 (240725_하나페이화면수정__종합.pptx) */
.form-detail-head .title .sub {
  font-weight: 500;
}
/* [2024-09-20 : shj] 17p 카드발급/배송조회 (240725_하나페이화면수정__종합.pptx) */
.issue-accordion-detail-inner .form-detail-list {
  font-size: 1.5rem;
}
/* [24.09.20 : lyr] 해외하면 하나카드 (240725_하나페이화면수정__종합.pptx > 18~19p > 해외결제 한번에 설정하기) */
.landing-my-use .landing-my-use-tab li {
  background-color: #e5e5e5;
}
.landing-my-use .landing-my-use-tab li a {
  font-weight: 500;
  color: #777;
}
.landing-my-use .landing-my-use-tab li.on a {
  font-weight: bold;
}
/* [2024-11-28 : shj] 원복 요청으로 주석처리함 */
/* .landing-my-use .landing-my-use-tab li.on:nth-child(1),
.landing-my-use .landing-my-use-tab li.on:nth-child(2) {
background-color: #fff;
} */
.landing-my-use .landing-card-option-box .landing-card-option-list {
  padding: 0 24px 48px;
}
.landing-my-use .landing-card-option-box .landing-card-option-list li {
  box-shadow: none;
  border: 1px solid #e5e5e5;
}
.landing-my-use .landing-card-option-box .landing-card-option-list li .option-title {
  border-bottom: 1px solid #e5e5e5;
}
.landing-my-use .landing-select-card-box .ui-select-block.type-card {
  box-shadow: none;
}
.landing-my-use .landing-select-card-box .ui-select-block.type-card .ui-select {
  border-color: #e5e5e5;
}
.landing-my-use .landing-card-option-box .option-list li .card-option.option-y,
.landing-my-use .landing-card-option-box .option-list li .card-option.option-n {
  box-shadow: none;
  border: 1px solid #e5e5e5;
}
.landing-my-use .landing-acordion-box .landing-acordion-txt {
  padding: 24px 0 0;
}
.landing-my-use .landing-acordion-box .accordion-contents.type-narrow {
  padding: 0 24px 24px;
}
.landing-my-use .ic-contacless {
  display: inline-block;
  width: auto;
  height: 14px;
  margin: 0px 2px 2px 2px;
  vertical-align: middle;
}
/* [2024-11-28 : shj] 원복 요청으로 주석처리함 */
/* .landing-my-use .landing-tab-cont01,
.landing-my-use .landing-tab-cont02 {
background: #fff;
} */
.landing-my-use .landing-tit-box02.landing-bgimg02::after {
  top: 50px;
}
.landing-my-use .landing-tit-box02.landing-bgimg02 {
  margin-bottom: 50px;
}
.landing-my-use .landing-tit-box02.landing-bgimg02 h2 {
  font-size: 24px;
  line-height: 1.3;
}
/* .landing-my-use .landing-tab-cont02 .landing-acordion-box {
margin-top: 50px;
} */
.landing-my-use .landing-tit-box02.landing-bgimg03 h2 strong,
.landing-my-use .landing-tit-box02.landing-bgimg02 h2 strong {
  font-size: 26px;
}
.landing-my-use .landing-select-card-box .option-tolltip {
  display: block;
  width: 173px;
  height: 42px;
  background: url("/images/contents/myuse_tooltip_1.png") no-repeat 0 0 /173px auto;
}
.landing-my-use .landing-select-card-box .option-tolltip p {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  width: 100%;
  height: 100%;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
  clip-path: inset(50%);
  font-size: 1px;
  color: transparent;
}
[data-layer="tooltip-help"] .text-box {
  font-size: 15px;
  word-break: keep-all;
}
/* [24.09.20 : lyr] 하나Pick 화살표 수정 (240725_하나페이화면수정__종합.pptx > 20p > 하나Pick) */
.page-contents.hana-pick-contents .top-section .my-benefit-box .benefit-box-top span::after,
.page-contents.hana-pick-contents .top-section .my-benefit-box .my-pick-cont .txt-my-benefit::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-top: -4px;
  margin-left: 4px;
  padding-left: 0;
  vertical-align: middle;
  background: no-repeat 0 0 / 12px auto;
}
.page-contents.hana-pick-contents .top-section .my-benefit-box .benefit-box-top span::after {
  background-image: url("/images/icon/btn_pick_arrow_right_p.png");
}
.page-contents.hana-pick-contents .top-section .my-benefit-box .my-pick-cont .txt-my-benefit::after {
  background-image: url("/images/icon/btn_pick_arrow_right_b.png");
}
/* [24.09.20 : lyr] Pick 상세보기 > 유의사항, 의무표시사항, 제휴사정보, 이용안내 등 아코디언 사이 간격 수정  (240725_하나페이화면수정__종합.pptx > 20p > 하나Pick) */
.my-pick-detail .use-notice-area + .use-notice-area {
  margin-top: 24px;
}
/* [24.09.20 : lyr] Pick 신청 버튼 (240725_하나페이화면수정__종합.pptx > 20p > 하나Pick) */
.ui-basic-button.type-pick,
.ui-basic-button.type-pick:active {
  font-weight: bold;
  background-color: #d8f3f2;
  border-color: #d8f3f2;
  color: #1f88fc;
}
.ui-basic-button.type-pick::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin-right: 2px;
  background: url("/images/icon/btn_pick_heart.png") no-repeat center / 18px auto;
}
/* [2024-09-20 : shj] 21p 재발급 (240725_하나페이화면수정__종합.pptx) */
.usage-area-head {
  padding-bottom: 0;
  border: 0;
}
.usage-area-head .title > strong {
  font-size: 1.7rem;
  font-weight: 600;
}
.usage-area-head .sub-title {
  font-size: 1.5rem;
  font-weight: 300;
}
/* [24.09.20 : lyr] 폰트 굵기 수정 (240725_하나페이화면수정__종합.pptx > 24p > 모바일웹 로그인) */
.join-type-list li.type-app .join-type-button .txt-area p {
  margin-top: 2px;
  font-weight: 400;
  color: #666;
}
/* [24.09.20 : lyr] 하단 폰트 스타일 수정 (240725_하나페이화면수정__종합.pptx > 25p > 전체) */
/* [2024-10-18 : HDH] 하단 폰트 사이즈 수정 1.2rem > 1rem */
.footer-marks-text {
  font-size: 1rem;
  font-weight: 400;
  color: var(--basic);
}
/* [2024-09-20 : shj] 27p 생활혜택 (240725_하나페이화면수정__종합.pptx) */
.cont-flex-btm-gray,
.page-contents.card-type {
  background-color: #f4f6fa;
}
/* [2024-09-20 : shj] 28p 송금 (240725_하나페이화면수정__종합.pptx) */
.payment-bg-contents.type-step .slide-banner,
.payment-bg-contents.type-step .slide-banner.is-once {
  margin-top: -18px;
  margin-bottom: 16px;
  padding-bottom: 26px;
}
.payment-bg-contents.type-step .slide-banner.is-once {
  margin-bottom: 0;
}
/* END [24-09-20 : shj] [WPM-8514] [기타] '화면 내 클래스, css 조정 요청'_'박선솔' 사전협의-2024-07-31 */

/* 24.10.14 pick상세보기 화면수정 관련 추가 - sayho */
.hana-pick-contents .my-pick-detail {
  padding: 0 24px 80px;
}
.hana-pick-contents .mypick-detail-title {
  top: 50px;
}
.hana-pick-contents .my-pick-detail .btm-fixed-btns {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 24px 30px;
  background: #fff;
  z-index: 2;
}
/* //24.10.14 pick상세보기 화면수정 관련 추가 - sayho */

/* 24.10.14 하나pick TEXT반짝임효과 추가 - sayho */
.ic-pick {
  display: inline-block;
  height: 24px;
  vertical-align: top;
  margin-top: 2px;
}
.ic-pick img {
  height: 100%;
}
/* //24.10.14 하나pick TEXT반짝임효과 추가 - sayho */

/* 
[24.08.22 : lyr] 비로그인 메인 > 슬라이더 인디케이터 디자인 변경 [rolling-banner-slide] ==> a11y-work.css에서 현 파일로 이동
[24.10.22 : lyr] 재이동(page-style.css)
*/
.rolling-banner-slide .rolling-banner-slide-controller {
  font-size: 0;
}
.rolling-banner-slide .rolling-banner-slide-controller .swiper-pagination {
  margin-top: 0;
}
.rolling-banner-slide .swiper-pagination,
.rolling-banner-slide .swiper-pagination-current,
.rolling-banner-slide .swiper-pagination-total {
  font-size: 10px;
  line-height: 17px;
}
.rolling-banner-slide .swiper-pagination-current,
.rolling-banner-slide .swiper-pagination-total {
  margin: 0 2px;
}
.rolling-banner-slide .swiper-pagination-current {
  font-weight: bold;
}
.rolling-banner-slide .swiper-button-prev,
.rolling-banner-slide .swiper-button-next {
  position: initial;
  height: 17px;
  width: 17px;
  display: inline-block;
  margin-top: 0;
  vertical-align: top;
}
.rolling-banner-slide .swiper-button-prev {
  background: url(/images/icon/ic_swiper_prev.png) no-repeat center / 17px auto;
}
.rolling-banner-slide .swiper-button-prev + .swiper-button-prev {
  display: none;
}
.rolling-banner-slide .swiper-button-next {
  background: url(/images/icon/ic_swiper_next.png) no-repeat center / 17px auto;
}
.rolling-banner-slide .swiper-button-next + .swiper-button-next {
  display: none;
}
.rolling-banner-slide .swiper-button-prev::after,
.rolling-banner-slide .swiper-button-next::after {
  display: none;
}
.rolling-banner-slide .rolling-banner-controller {
  margin-top: 1px;
}
.rolling-banner-slide .rolling-banner-slide-controller .rolling-banner-controller {
  width: 17px;
  height: 17px;
  margin: 0;
}
.rolling-banner-slide .rolling-banner-slide-controller .rolling-banner-controller.stop {
  width: 17px;
  height: 17px;
  background: url(/images/icon/ic_swiper_stop.png) center no-repeat;
  background-size: 100%;
}
.rolling-banner-slide .rolling-banner-slide-controller .rolling-banner-controller.play {
  width: 17px;
  height: 17px;
  background: url(/images/icon/ic_swiper_play.png) center no-repeat;
  background-size: 100%;
}
/* // [24.10.22 : lyr] 재이동(page-style.css) */

/* [2024-10-24 KB브릿지페이지 : HDH] */
.page-kb-bridge .section-kb-bridge-top {
  width: 100%;
  padding: 20px;
  background: url(/images/landing/kb_bridge_top_bg.png) no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.page-kb-bridge .section-kb-bridge-top .page-title-img {
  display: block;
  width: 100%;
}
.page-kb-bridge .kb-bridge-slide-wrap {
  position: relative;
  width: 100%;
  margin-top: 26px;
  padding-bottom: 31px;
  box-sizing: border-box;
}
.page-kb-bridge .kb-bridge-slide-wrap .swiper-slide img {
  width: 100%;
}
.page-kb-bridge .section-kb-bridge-content {
  margin-top: 20px;
}
.page-kb-bridge .section-kb-bridge-content img {
  display: block;
  width: 100%;
}
.page-kb-bridge .section-notice {
  padding: 36px 16px;
}
.page-kb-bridge .section-notice .info-item {
  font-size: 12px;
}
.page-kb-bridge .section-notice .use-notice-group .group-title {
  margin: 16px 0 12px;
}
.page-kb-bridge .section-notice .info-item + .info-item {
  margin-top: 12px;
}
.page-kb-bridge .section-notice .info-list.type-indent-number .info-item {
  margin-top: 5px;
}
.page-kb-bridge .page-buttons.type-fixed.padding-left-right-16 {
  padding-left: 16px;
  padding-right: 16px;
}
/* [2024-10-24 공통 슬라이드 컨트롤러 추가 (common-controller) : HDH] */
.slide-controller.common-controller {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: inline-block;
  width: auto;
  padding: 0 4px;
  text-align: center;
  font-size: 0;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.8);
}
.slide-controller.common-controller .swiper-pagination {
  position: static;
  display: inline-block;
  width: auto;
  height: 17px;
  line-height: 18px;
  margin-top: 0;
  font-size: 10px;
  color: var(--basic);
  vertical-align: top;
}
.slide-controller.common-controller .swiper-button-prev {
  background: url(/images/icon/ic_swiper_prev.png) no-repeat center / 17px auto;
}
.slide-controller.common-controller .swiper-button-next {
  background: url(/images/icon/ic_swiper_next.png) no-repeat center / 17px auto;
}
.slide-controller.common-controller .swiper-button-prev,
.slide-controller.common-controller .swiper-button-next {
  position: initial;
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-top: 0;
  vertical-align: top;
}
.slide-controller.common-controller .swiper-pagination-current {
  font-weight: bold;
}
.slide-controller.common-controller .swiper-pagination-current,
.slide-controller.common-controller .swiper-pagination-total {
  margin: 0 2px;
}
.slide-controller.common-controller .btn-slide-controller.stop {
  background: url(/images/icon/ic-pause.svg) center no-repeat;
}
.slide-controller.common-controller .btn-slide-controller.play {
  background: url(/images/icon/ic-play.svg) center no-repeat;
}
.slide-controller.common-controller .swiper-button-prev::after,
.slide-controller.common-controller .swiper-button-next::after {
  display: none;
}
.slide-controller.common-controller .btn-slide-controller.stop,
.slide-controller.common-controller .btn-slide-controller.play {
  width: 17px;
  height: 17px;
  margin-left: 0;
  margin-top: 0;
  vertical-align: middle;
  background-size: 12px;
}
/* //[2024-10-24 공통 슬라이드 컨트롤러 추가 (common-controller) : HDH] */

/* [2024-11-06 : shj] _layer_pop_026.html 75% 노트8에서 잘려 65로 변경 */
/* .layer-wrap.js-layer-opened .ui-layer:has(.layer-bg-image) {
max-height: 65%;
max-height: 65vh;
}
.layer-bg-image {
position: absolute;
top: -132px;
left: 50%;
transform: translate(-50%, 0);
}
.layer-bg-image img {
width: auto;
height: 100px;
} */
/* [2025-02-07 : shj] 이미지 높이값 삭제, 이미지까지 합쳐서 전체 85% */
.layer-wrap .ui-layer:has(.layer-bg-image) {
  max-height: 85%;
  max-height: 85vh;
  background: transparent;
}
.layer-wrap .ui-layer .layer-bg-image {
  margin: 0 auto;
  padding-bottom: 20px;
}
.layer-wrap .ui-layer:has(.layer-bg-image) .ui-layer__head {
  border-radius: 15px 15px 0 0;
}
.layer-wrap .ui-layer:has(.layer-bg-image) .ui-layer__head,
.layer-wrap .ui-layer:has(.layer-bg-image) .ui-layer__body,
.layer-wrap .ui-layer:has(.layer-bg-image) .ui-layer__foot {
  background: #fff;
}

/* [24.10.28 ~ 11.06 : lyr] [WPM-8962] [혜택] '혜택 모달 화살표 변경'_'박선솔'-2024-10-23 / 11.07 배포 완료 */
.layer-monthly-benefit-chart-wrap .btn-benefit-detail {
  margin-left: 1px;
}
.layer-monthly-benefit-chart-wrap .btn-benefit-detail span {
  background-image: url(/images/common/ic-button-arrow-b.svg);
  background-size: 14px;
  background-color: transparent;
}
.layer-monthly-benefit-chart-wrap .btn-benefit-detail span.opened {
  transform: rotate(0deg);
}
/* // [24.10.28 : lyr] [WPM-8962] [혜택] '혜택 모달 화살표 변경'_'박선솔'-2024-10-23 */

/* [2024-11-25 엡테크 배너 추가 : HDH] */
.page-apptech .banner-box.type-03.color-03 {
  background-color: #fff4dc;
}
.page-apptech .banner-box.type-03.color-03 .banner-text {
  color: #e06c00;
}

/* 24.12.06 이용가이드 css 추가. - sayho */
/* [24.11.18 : lyr] 하나페이 가이드 메인 */
.type-hanapay-guide {
  background-color: #fff;
}
.type-hanapay-guide.type-bg {
  /* [2024-12-10 이용가이드 수정 : HDH] */
  /* background: linear-gradient(182deg, #fcf3f2 0%, #c8eafd 100%); */
  min-height: 100dvh;
  /* 25.02.05 - sayho */
  /* background-color: #ace0df; */
  /* //25.02.05 - sayho */
}
.type-hanapay-guide .header {
  flex-wrap: wrap;
  height: auto;
  min-height: 50px;
  padding: 0 16px 0;
  transition: 0.1s linear;
  background-color: transparent;
}
.type-hanapay-guide .ui-layer__head .header__right .header__button.header__button--text {
  font-size: 1.8rem;
}
.type-hanapay-guide {
  /* padding: 0 16px; */
}
.type-hanapay-guide .hanapay_guide-main {
  position: relative;
  /* min-height: 100dvh; */
  padding: 52px 16px;
  /* [2024-12-10 이용가이드 수정 : HDH] */
  /* background: linear-gradient(180deg, #fffcee 0%, #fffbe8 7.5%, #fffae3 20.5%, #67d9e1 47%); */
}
.type-hanapay-guide .hanapay_guide-title {
  font-size: 2.8rem;
  font-weight: bold;
  color: #111;
}
.type-hanapay-guide .hanapay_guide-main .hanapay_guide-title {
  position: relative;
  display: flex;
  height: 162px;
  line-height: 3.5rem;
  font-weight: 500;
}
.type-hanapay-guide .hanapay_guide-main .hanapay_guide-title .hanapay_guide-imge {
  position: absolute;
  right: 0;
  bottom: 0;
}
.type-hanapay-guide .hanapay_guide-main .hanapay_guide-title .hanapay_guide-imge img {
  /* 25.02.05 - sayho */
  /* width: 84px; */
  width: 150px;
  /* //25.02.05 - sayho */
}
.type-hanapay-guide .hanapay_menu-list {
  display: flex;
  flex-direction: column;
  gap: 8px; /*2024-12-10 : HDH*/
  /* margin-top: 12px; */
}
.type-hanapay-guide .hanapay_menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 75px;
  padding: 15px 20px; /*2024-12-10 : HDH*/
  border-radius: 8px; /*2024-12-10 : HDH*/
  /* 25.02.05 - sayho */
  /* background-color: #fff; */
  background: #90ece0;
  /* //25.02.05 - sayho */
  transform: translateY(90px);
  opacity: 0;
  transition: 0.5s all;
}
.type-hanapay-guide .hanapay_menu-link.active {
  transform: translateY(0);
  opacity: 1;
}
.type-hanapay-guide .hanapay_menu-link::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url("/images/new_renewal/ico_arr_link_right03.png") no-repeat center / cover;
}
.type-hanapay-guide .hanapay_menu-items:nth-child(1) .hanapay_menu-link.active {
  transition-delay: 0.5s;
}
.type-hanapay-guide .hanapay_menu-items:nth-child(2) .hanapay_menu-link.active {
  transition-delay: 0.6s;
}
.type-hanapay-guide .hanapay_menu-items:nth-child(3) .hanapay_menu-link.active {
  transition-delay: 0.7s;
}
.type-hanapay-guide .hanapay_menu-items:nth-child(4) .hanapay_menu-link.active {
  transition-delay: 0.8s;
}
.type-hanapay-guide .hanapay_menu-items:nth-child(5) .hanapay_menu-link.active {
  transition-delay: 0.9s;
}
.type-hanapay-guide .hanapay_menu-text {
  text-align: left;
  font-size: 2rem;
  line-height: normal;
  font-weight: 500;
  color: #111;
}
/* // end .. [24.11.18 : lyr] 하나페이 가이드 메인 */

/* 24.12.04 이용가이드 서브페이지 관련 - sayho  */
.hanapay_guide-sub {
  position: relative;
  overflow: hidden;
  padding: 125px 16px 100px;
}
.hanapay_guide-sub > .hanapay_guide-top-contents {
  /* height: 270px; */
  height: 125px;
  position: fixed;
  top: 50px;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 10;
}
.hanapay_guide-sub.type-title-oneline {
  padding-top: 70px;
}
.hanapay_guide-sub.type-title-oneline > .hanapay_guide-top-contents {
  height: 50px;
}
.hanapay_guide-slide .hanapay_guide-top-contents {
  height: 210px;
}
.type-hanapay-guide .hanapay_guide-sub .hanapay_guide-title {
  padding: 15px 0 0 16px;
  font-size: 24px;
  line-height: 35px;
}
.hanapay_guide-top-contents .hanapay_guide-sectionbox {
  display: none;
}
.hanapay_guide-desc {
  margin-top: 20px;
  color: #111;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
}
.hanapay_guide-desc span {
  color: #00ad73;
  font-weight: 500;
}
.hanapay_guide-desc .hanapay_guide_desc01 {
  height: 24px;
  margin-bottom: -1px;
  vertical-align: text-bottom;
}
.hanapay_guide-desc:first-child {
  margin-top: 0;
}
.hanapay_guide-desc + .hanapay_guide-desc {
  margin-top: 16px;
}
.hanapay_guide-slide-contents {
  width: 100%;
  height: auto;
  margin-top: 20px;
}
.hanapay_guide-slide-contents img {
  width: 100%;
}
.hanapay_guide-slide {
  /* margin-top: 24px; */
}
.hanapay_guide-slide .hanapay_guide-slide-controller {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 10;
  padding: 20px 0 40px;
  background: #fff;
}
.hanapay_guide-slide .hanapay_guide-slide-controller .swiper-pagination {
  position: relative;
  bottom: auto;
  left: auto;
  width: auto;
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
.hanapay_guide-slide .hanapay_guide-slide-controller .swiper-pagination .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  margin: 0;
  border: 0;
  border-radius: 6px;
  background: #d9d9d9;
}
.hanapay_guide-slide .hanapay_guide-slide-controller .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 24px;
  background: #111;
}
.hanapay_guide-slide .hanapay_guide-slide-controller .swiper-button-prev,
.hanapay_guide-slide .hanapay_guide-slide-controller .swiper-button-next {
  position: relative;
  left: auto;
  right: auto;
  /* width: auto; */
  width: 68px;
  height: auto;
  padding: 10px 0;
  margin-top: 0;
  color: #111;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  border: 1px solid #000;
  border-radius: 4px;
}
.hanapay_guide-slide .hanapay_guide-slide-controller .swiper-button-prev {
  margin-right: 24px;
  /* background: url(/images/new_renewal/hanapay_guide_slide_arrow_left.png) no-repeat 0 0 / auto 100%; */
}
.hanapay_guide-slide .hanapay_guide-slide-controller .swiper-button-next {
  margin-left: 24px;
  /* background: url(/images/new_renewal/hanapay_guide_slide_arrow_right.png) no-repeat 0 0 / auto 100%; */
}
.hanapay_guide-slide .hanapay_guide-slide-controller .swiper-button-prev::after,
.hanapay_guide-slide .hanapay_guide-slide-controller .swiper-button-next::after {
  display: none;
}
.hanapay_guide-slide .hanapay_guide-slide-controller .swiper-button-next.swiper-button-disabled,
.hanapay_guide-slide .hanapay_guide-slide-controller .swiper-button-prev.swiper-button-disabled {
  opacity: 0;
}
.hanapay_guide-title-buttons {
  margin-top: 4px;
}
.hanapay_guide-title-buttons a {
  display: inline-flex;
  height: 27px;
  padding: 2px 10px 0;
  background: #029c94;
  align-items: center;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  font-weight: 400;
}
.hanapay_guide-sub.type-autoheight {
  padding-top: 0;
}
.hanapay_guide-sub.type-autoheight > .hanapay_guide-top-contents {
  height: auto;
  position: static;
  padding-top: 0;
}
.hanapay_guide-sub.type-autoheight .hanapay_guide-title {
  padding-left: 0;
}
/* // 이용가이드 서브페이지 관련(삭제전 메신저 부탁드립니다.) - sayho  */
/* //24.12.06 이용가이드 css 추가. - sayho */
/* [2025-01-09 오늘의 용돈 > 매월 받는 혜택 아이템 추가 : HDH] */
.page-apptech .apptech-benefit-list .apptech-benefit-item.item-05 a::before {
  background: url(/images/new_benefit_images/apptech/ic_apptech_benefit_05.png) no-repeat 100% / 100%;
}
/* //[2025-01-09 오늘의 용돈 > 매월 받는 혜택 아이템 추가 : HDH] */
/* [2025-01-13 오늘의 용돈 > 매년 받는 혜택 아이템 추가 : HDH] */
.page-apptech .apptech-benefit-list .apptech-benefit-item.item-06 a::before {
  background: url(/images/new_benefit_images/apptech/ic_apptech_benefit_06.png) no-repeat 100% / 100%;
}
.page-apptech .apptech-benefit-list .apptech-benefit-item.item-07 a::before {
  background: url(/images/new_benefit_images/apptech/ic_apptech_benefit_07.png) no-repeat 100% / 100%;
}
/* //[2025-01-13 오늘의 용돈 > 매년 받는 혜택 아이템 추가 : HDH] */

/* [2025-01-20 : shj] 오늘의 용돈 > 매년 받는 혜택 아이템 추가 */
.page-apptech .apptech-benefit-list .apptech-benefit-item.item-08 a::before {
  background: url(/images/new_benefit_images/apptech/ic_apptech_benefit_08.png) no-repeat 100% / 100%;
}
/* // [2025-01-20 : shj] 오늘의 용돈 > 매년 받는 혜택 아이템 추가 */

/* [2025-01-15 : shj] [WPM-9708] [기타] '피싱케어 개인화 풀팝업 디자인 요청 건'_'오재훈' 사전협의-2025-01-07 */
/* .layer-phishing-contents .page-title {
margin-bottom: 6px;
font-size: 3.6rem;
line-height: 4.5rem;
font-weight: bold;
}
.layer-phishing-contents .status-tag {
margin-top: 16px;
padding: 0 6px;
line-height: 22px;
border: 0;
font-weight: 400;
}
.layer-phishing-contents .main-top-img {
margin: 13px auto;
max-width: 206px;
}
.layer-phishing-contents .rank-kewords-num {
margin: 2px 8px 0 0;
padding: 0;
border-radius: 50%;
min-width: 16px;
height: 16px;
line-height: 16px;
font-size: 11px;
font-weight: 400;
}
.rank-kewords-num.bg-primary {
background-color: var(--primary);
}
.box-border {
padding: 32px 24px 24px;
border: 1px solid #e5e5e5;
border-radius: 20px;
} */
/* // [2025-01-15 : shj] [WPM-9708] [기타] '피싱케어 개인화 풀팝업 디자인 요청 건'_'오재훈' 사전협의-2025-01-07 */

/* [25.01.17 : lyr] [WPM-9714] [기타] '주요화면 퍼블수정요청'_'박선솔' 사전협의-2025-01-07 [하나페이 퍼블수정요청_250107.pptx] */
/* 2p => 송금. 구분선 중앙정렬 및 굵기 변경(얇게) shj */
.payment-banner-item .card-number .card-bank::after {
  width: 1px;
  top: 50%;
  transform: translateY(-50%);
}
/* 3p => 이벤트 응모현황 등(공통) 콘페티가 잘려서 보이는 현상 개선 */
.layer-firecracker {
  background-position: 50% -100px;
}
.layer-firecracker2::before {
  background-position: 50% -100px;
}
/*  5p => MKGITX1100M.web 달력 아이콘이 팝업 위로 올라오는 현상 수정, id : CTB6412 */
.domain-auto {
  z-index: 3;
}

/* 8p => 건별즉시결제(/MKPRPA2010M.web) 회색박스 안 폰트 CSS를 위 일시불 폰트와 동일하게 변경(공통) shj */
.usage-total-wrap .usage-total-title,
.usage-total-wrap .usage-total-title .sub,
.usage-total-wrap .form-detail-list.type-text-default {
  font-size: 1.5rem;
  line-height: 2.2rem;
  font-weight: 500;
}

/*  9p => 공통 말풍선 스타일 변경 */
.page-point-donation-tooltip-wrap + .top-button-link-wrap {
  padding-top: 10px;
}
.ui-buttons-item.type-idc-guide .ui-button-tooltip-text,
.ui-button-tooltip.page-card-usage .ui-button-tooltip-text,
.ui-button-tooltip-text {
  padding: 7px 16px 6px;
  background-color: #1d2843;
  border-radius: 8px;
  font-size: 1.3rem;
  line-height: 1.8rem;
  font-weight: 400;
}

/* 10p => 가상계좌 예약내역/취소(/MKVTAC1010M.web) Disable 버튼 정렬 */
.usage-default-item .ui-checkbox-block .ui-label .ui-checkbox-object {
  margin-top: 1px;
}

/*  12p => 모바일웹 푸터(공통) 1.로그아웃 버튼 bg 컬러 x shj */
.ui-basic-button.footer-tel-link {
  background-color: transparent;
}
/*  12p => 모바일웹 푸터(공통) 2.회사정보 영역 font-weight: 400; , id : CTB6412 */
.footer-wrap .footer .footer-address,
.footer-wrap .footer .footer-text-item,
.footer-wrap .footer .footer-copy {
  font-weight: 400;
}
/* 14p => 즉시결제(/MKPRPA0000N.web) 1.연체금액 없을 경우 화살표 삭제, 2.박스 안에 들어간 버튼은 글자와 버튼 사이 여백 추가 */
.detail-history-area .detail-history-item .ui-checkbox-block .js-ui-accordion__opener[disabled]::after {
  background: none;
}
.detail-history-area .form-detail .form-detail-block .form-detail-list .form-detail-list-title {
  gap: 4px;
}
/* 15p => 국내, 해외 이의제기신청(/MKFOJT3020M.web, /MKFOJT2020M.web) 타 이용내역화면(ex. 카드이용내역)과 동일하게 폰트 크기, 굵기 변경 요청 */
.usage-item .ui-checkbox-block .ui-label {
  align-items: stretch;
}
.usage-item .ui-checkbox-block .ui-label .ui-checkbox-object {
  margin-top: 2px;
}
.ui-label-text .usage-top .title {
  font-size: 1.8rem;
  font-weight: 400;
}
.ui-label-text .usage-top .value {
  font-size: 1.8rem;
  font-weight: 500;
}
.ui-label-text .usage-info .usage-info-item {
  font-weight: 400;
}
/* // .. END  [25.01.17 : lyr] [WPM-9714] [기타] '주요화면 퍼블수정요청'_'박선솔' 사전협의-2025-01-07 */
/* [2025-01-20 오늘의 용돈 계좌개설 배너 추가 : HDH] */
.page-apptech .apptech-more-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 16px;
  padding: 16px;
  background-color: #ece6ff;
  border-radius: 10px;
  box-sizing: border-box;
}
.page-apptech .apptech-more-banner .banner-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.page-apptech .apptech-more-banner .banner-left .banner-text {
  font-size: 16px;
  line-height: 21px;
}
.page-apptech .apptech-more-banner .banner-left .banner-text strong {
  font-weight: 500;
}
.page-apptech .apptech-more-banner .banner-left .icon-img {
  width: 68px;
  margin-right: 12px;
}
.page-apptech .apptech-more-banner .item-button {
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background-color: #8665ef;
  border-radius: 4px;
}
/* //[2025-01-20 오늘의 용돈 계좌개설 배너 추가 : HDH] */

/* 25.01.23 하나카드 별님이 캐릭터 소개페이지 추가 - sayho */
.page-contents.hanacard-star-info {
  padding: 0;
  overflow: hidden;
}
.hanacard-star-info .star-info-top {
  padding: 60px 0;
  background: #009476;
  text-align: center;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}
.hanacard-star-info .star-info-btm {
  padding: 60px 0;
}
.hanacard-star-info .star-info-top img {
  display: block;
  margin: 0 auto;
}
.hanacard-star-info .star-info-top .img-hanacard-star-info01 {
  height: 83px;
  margin-bottom: 20px;
}
.hanacard-star-info .star-info-top .img-hanacard-star-info02 {
  height: 60px;
  margin-top: 14px;
}
.hanacard-star-info .star-info-top .img-hanacard-star-info03 {
  height: 176px;
  margin-top: 20px;
}
.hanacard-star-info .img-hanacard-star-info04 {
  height: 122px;
  margin-top: 21px;
}
.hanacard-star-info .star-info-cont {
  padding: 0 24px;
}
.hanacard-star-info .star-info-cont + .star-info-cont {
  margin-top: 45px;
}
.hanacard-star-info .star-info-cont h2 {
  margin-bottom: 18px;
  font-size: 28px;
  line-height: 28px;
}
.hanacard-star-info .star-info-cont h2.type-line-2 {
  line-height: 38px;
}
.hanacard-star-info .star-info-cont h3 {
  position: relative;
  margin-top: 18px;
  padding-left: 18px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}
.hanacard-star-info .star-info-cont h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-left: 13px solid #111;
}
.hanacard-star-info .star-info-cont p {
  font-size: 16px;
  line-height: 24px;
}
.hanacard-star-info .star-info-cont .star-profile-list {
  margin-top: 18px;
  padding: 22px 20px;
  background: #f0f0f0;
  text-align: center;
}
.hanacard-star-info .star-info-cont .star-profile-list li {
  display: flex;
  align-items: center;
  margin-top: 8px;
  gap: 8px;
}
.hanacard-star-info .star-info-cont .star-profile-list li:first-child {
  margin-top: 0;
}
.hanacard-star-info .star-info-cont .star-profile-list li .profile-tit {
  width: 52px;
  border-radius: 6px;
  background: #009476;
  text-align: center;
  font-size: 15px;
  line-height: 28px;
  font-weight: 700;
  color: #fff;
}
.hanacard-star-info .star-info-cont .star-profile-list li .profile-cont {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  line-height: 28px;
  font-weight: 700;
}
.hanacard-star-info .star-info-cont .star-profile-list li .profile-cont em {
  font-size: 12px;
  line-height: 16px;
  color: #5e5e5e;
  font-weight: 500;
  font-style: normal;
}
.hanacard-star-info .star-action-list li {
  margin-top: 18px;
}
.hanacard-star-info .star-action-list li img {
  width: 100%;
}
.hanacard-star-info .star-info-sns-list01 li {
  margin-top: 18px;
}
.hanacard-star-info .star-info-sns-list01 li img {
  width: 100%;
}
.hanacard-star-info .star-info-sns-list02 {
  display: flex;
  gap: 8px;
  margin: 45px 0;
}
.hanacard-star-info .star-info-sns-list02 li {
  flex: 1;
}
.hanacard-star-info .star-info-sns-list02 li a img {
  width: 100%;
}
.hanacard-star-info-slide {
  padding: 39px 0 42px;
  margin-top: 18px;
  background: #f6f6f6;
  overflow: hidden;
}
.hanacard-star-info-slide .swiper-slide {
  padding: 3.6vw 5vw 4vw;
  box-sizing: border-box;
}
.hanacard-star-info-slide .swiper-slide.swiper-slide-active {
  background: url(/images/article/intro/bg_phone.png) no-repeat center center/ 100% 100%;
}
.hanacard-star-info-slide .swiper-slide img {
  width: 100%;
  border-radius: 6.94vw;
}
.hanacard-star-info-slide .swiper-slide a {
  position: absolute;
  left: 7.666vw;
  right: 7.666vw;
  bottom: 10.11vw;
  background: rgba(0, 0, 0, 0.8);
  padding: 12px 14px;
  text-align: center;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  line-height: 20px;
}
.hanacard-star-info-slide-controller .swiper-pagination {
  position: static;
  margin-top: 32px;
}
.hanacard-star-info-slide-controller .swiper-pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: #e6e6e6;
  border: 0;
}
.hanacard-star-info-slide-controller .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #ccc;
}
.hanacard-star-info-slide-controller .swiper-button-prev,
.hanacard-star-info-slide-controller .swiper-button-next {
  display: none;
}
/* 25.03.06 유튜브영역 추가 - sayho */
.hanacard-star-info .youtube-obj {
  width: 100%;
  padding-bottom: 54.15%;
  position: relative;
  height: 0;
  box-sizing: border-box;
}
.hanacard-star-info .youtube-obj iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* //25.03.06 유튜브영역 추가 - sayho */
/* //25.01.23 하나카드 별님이 캐릭터 소개페이지 추가 - sayho */

/* 25.01.31 비로그인메인 JADE Classic카드 추가 - sayho */
.section-top-slide .banner-slide-contents02 .swiper-slide.ani16 {
  background: url(/images/contents/ani-assets/img-anibox16-item01.png) no-repeat right bottom;
  background-size: cover;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani16 .bnr-top-txt {
  color: #111111;
}
.section-top-slide .banner-slide-contents02 .swiper-slide.ani16 em {
  color: #019286;
}

/* 25.02.18 별별뉴스 개편관련 css - sayho */
.page-starnews {
  padding: 0;
}
.page-starnews .section-news-top {
  position: relative;
  padding: 35px 0 59px;
  overflow: hidden;
}
.page-starnews .section-news-top .bg-box {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  filter: blur(10px);
  background-size: auto 75%;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #121212;
}
.page-starnews .section-news-top .bg-blurbox {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0.56) -6.87%, rgba(30, 30, 30, 0.8) 89.26%);
  z-index: 1;
}
.page-starnews .section-news-top .section-news-inner {
  position: relative;
  z-index: 2;
}
.page-starnews .section-news-top .stit {
  display: block;
  color: #fff;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
}
.page-starnews .section-news-top .tit {
  height: 45px;
  margin-top: 4px;
  text-align: center;
}
.page-starnews .section-news-top .tit img {
  height: 44px;
}
.page-starnews .section-news-top .top-btns {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 12px;
}
.page-starnews .section-news-top .top-btns-btn {
  display: block;
  padding: 4px 6px 4px 5px;
  background: rgba(17, 17, 17, 0.8);
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
}
.page-starnews .section-news-top .top-btns-btn::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  margin-right: 2px;
  vertical-align: top;
}
.page-starnews .section-news-top .top-btns-btn.add::before {
  background: url(/images/contents/magazine/ic_starnews_add_off.svg) no-repeat center/ 100%;
}
.page-starnews .section-news-top .top-btns-btn.add.is-active::before {
  background: url(/images/contents/magazine/ic_starnews_add.svg) no-repeat center/ 100%;
}
.page-starnews .section-news-top .top-btns-btn.sub::before {
  background: url(/images/contents/magazine/ic_starnews_sub.svg) no-repeat center/ 100%;
}
.page-starnews .section-news-top .top-btns-btn.sub.is-active::before {
  background: url(/images/contents/magazine/ic_btm_btns01.png) no-repeat center/ 100%;
}
.page-starnews .section-news-top .top-btns-btn.share::before {
  background: url(/images/contents/magazine/ic_starnews_share.svg) no-repeat center/ 100%;
}
.starnews-top-slide {
  margin-top: 20px;
}
.starnews-top-slide .swiper-slide {
  position: relative;
  padding-bottom: 89%;
  border-radius: 12px;
  overflow: hidden;
  transform: scale(0.92);
  transition: transform 0.3s ease-in-out;
}
.starnews-top-slide .swiper-slide::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(23, 23, 23, 0.25);
}
.top-slide-contents {
  height: 100%;
}
.starnews-top-slide .swiper-slide.swiper-slide-active {
  transform: scale(1);
}
.starnews-top-slide .swiper-slide.swiper-slide-active::after {
  display: none;
}
.starnews-top-slide .swiper-slide .inner-txt {
  position: absolute;
  top: 0;
  left: 0;
  padding: 24px 20px 0;
}
.starnews-top-slide .swiper-slide .inner-txt .slide-tit {
  color: #111;
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
}
.starnews-top-slide .swiper-slide .inner-txt p {
  margin-top: 6px;
  color: #111;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
}
.starnews-top-slide .swiper-slide .inner-txt.type-white .slide-tit,
.starnews-top-slide .swiper-slide .inner-txt.type-white p {
  color: #fff;
}
.starnews-top-slide .swiper-slide .inner-img {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
}
.starnews-top-slide .swiper-slide .btn-event {
  position: absolute;
  bottom: 24px;
  right: 20px;
  left: 20px;
  padding: 10px 0;
  border-radius: 6px;
  background: rgba(17, 17, 17, 0.8);
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}
.starnews-top-slide .swiper-slide .btn-event::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  background: url(/images/contents/magazine/ic_hanamoney.svg) no-repeat center/ 100%;
  vertical-align: top;
}
.starnews-top-slide-controller .swiper-button-next,
.starnews-top-slide-controller .swiper-button-prev,
.starnews-top-slide-controller .swiper-pagination {
  position: static;
  display: inline-block;
  vertical-align: top;
}
.starnews-top-slide-controller .swiper-button-next,
.starnews-top-slide-controller .swiper-button-prev {
  margin-top: 0;
}
.starnews-top-slide-controller .swiper-button-next,
.starnews-top-slide-controller .swiper-button-prev,
.starnews-top-slide-controller .swiper-button-controller {
  width: 17px;
  height: 17px;
}
.starnews-top-slide-controller .swiper-button-next::after,
.starnews-top-slide-controller .swiper-button-prev::after {
  display: none;
}
.starnews-top-slide-controller .swiper-button-prev {
  background: url(/images/contents/magazine/starnews_slide_prev.svg) no-repeat center/ 100%;
}
.starnews-top-slide-controller .swiper-button-next {
  background: url(/images/contents/magazine/starnews_slide_next.svg) no-repeat center/ 100%;
}
.starnews-top-slide-controller .swiper-pagination {
  width: auto;
  color: #888;
  font-size: 11px;
  line-height: 17px;
  letter-spacing: 1.5px;
}
.starnews-top-slide-controller .swiper-pagination .swiper-pagination-current {
  color: #fff;
}
.starnews-top-slide-controller .swiper-pagination-bullets {
  margin: 0;
}
.starnews-top-slide-controller {
  width: 100%;
  padding: 12px 0;
  text-align: center;
}
.news-swich-contents {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 36px;
}
.news-swich-contents .inner-txt {
  color: #fff;
  font-size: 15px;
  line-height: 20px;
}
.news-swich-contents .inner-txt span {
  display: block;
  color: #00c1b7;
  font-size: 13px;
  line-height: 18px;
}
.news-top-banner {
  margin-top: 20px;
  padding: 0 16px;
}
.news-top-banner a {
  display: block;
}
.news-top-banner a img {
  width: 100%;
}
.starnews-sorting-contents {
  position: relative;
  margin-top: -24px;
  padding-top: 36px;
  background: #fff;
  border-radius: 24px 24px 0 0;
  z-index: 1;
}
.starnews-sorting-contents .tit {
  padding: 0 16px;
  font-size: 20px;
  line-height: 25px;
  font-weight: 700;
}
.starnews-sorting-contents .page-fixed-tabs ul {
  padding: 24px 16px;
}
.starnews-list {
  display: flex;
  gap: 24px 12px;
  padding: 0 16px;
  flex-wrap: wrap;
}
.starnews-list li {
  flex: 0 0 auto;
  width: calc(50% - 6px);
}
.starnews-list .starnews-sortingbox {
  display: none;
}
.starnews-list.like-list .starnews-sortingbox {
  display: block;
}
.starnews-card .starnews-card-txt {
  margin-top: 12px;
}
.starnews-card .starnews-card-txt p {
  width: 100%;
  padding: 0 4px;
  color: #111;
  font-size: 16px;
  line-height: 21px;
  font-weight: 500;
  white-space: nowrap;
  box-sizing: border-box;
  text-overflow: ellipsis;
  overflow: hidden;
}

.starnews-card .starnews-card-txt span {
  display: block;
  width: 100%;
  padding: 0 4px;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  box-sizing: border-box;
  text-overflow: ellipsis;
  overflow: hidden;
}
.starnews-card .starnews-img {
  position: relative;
  height: 100%;
  padding-bottom: 139%;
  border-radius: 12px;
  overflow: hidden;
  font-weight: 400;
}
.starnews-card .starnews-img img {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.starnews-more {
  padding: 36px 16px;
}
.starnews-more .ui-button {
  border-color: #111;
  color: #111;
}
.starnews-food-contents {
  padding: 36px 0 48px;
}
.starnews-food-contents .tit a {
  display: inline-block;
}
.starnews-food-contents .tit a::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
}
.starnews-food-contents .food-txt {
  margin-top: 24px;
  padding: 0 16px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}
.starnews-food-contents .food-txt .btn-select {
  position: relative;
  padding: 0 24px 0 6px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  background: url(/images/icon/ic-select-arrow-black.svg) no-repeat calc(100% - 6px) center/ 10px auto;
}
.starnews-food-contents .food-txt .btn-select::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  display: block;
  height: 1px;
  background: #111;
  width: 100%;
}
.starnews-food-contents .restaurant-list {
  margin-top: 20px;
}
.starnews-food-contents .restaurant-list ul {
  display: flex;
  padding: 0 16px;
  overflow-x: auto;
  gap: 12px;
  scroll-snap-type: x proximity;
  scroll-padding: 0 16px;
}
.starnews-food-contents .restaurant-list ul::-webkit-scrollbar {
  display: none;
  scrollbar-width: none;
}
.starnews-food-contents .restaurant-list li {
  flex: auto 0 0;
  width: 180px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
  scroll-snap-stop: normal;
  scroll-snap-align: start;
}
.starnews-food-contents .restaurant-list li .img {
  position: relative;
  display: block;
  padding-bottom: 65%;
}
.starnews-food-contents .restaurant-list li .img img {
  position: absolute;
  width: 100%;
  height: 100%;
}
.starnews-food-contents .restaurant-list li .list-txt {
  padding: 12px 16px 20px;
}
.starnews-food-contents .restaurant-list li .list-txt p {
  font-size: 16px;
  line-height: 21px;
  font-weight: 500;
}
.starnews-food-contents .restaurant-list li .list-txt span {
  color: #888;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
}

.starnews-sorting-contents hr {
  height: 10px;
  margin: 0;
  background: #f5f5f5;
  border: 0;
}

/* [2025-04-15 KJH] [WPM-10728] ai-chatbot 아이콘 이동 */
.starnews-food-contents .tit-ico-aiChatbot {
  display: flex;
  align-items: center;
  column-gap: 5px;
}
.tit-ico-aiChatbot::before {
  content: "";
  display: block;
  width: 5rem;
  height: 5rem;
  background: url(/images/contents/magazine/i-ai-recommend.gif) no-repeat center / 100%;
}

/* 로그인 시 챗봇 위치 변경 */
.starnews-food-contents.login .tit-ico-aiChatbot:before {
  display: none;
}
.starnews-food-contents.login .food-txt::before {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 5rem;
  height: 5rem;
  background: url(/images/contents/magazine/i-ai-recommend.gif) no-repeat center / 100%;
}


/* [2025-03-21 : shj] AI 맛집 미로그인, 로그인 시 */
.starnews-banner {
  margin-top: 20px;
  padding: 0 16px;
}
.starnews-banner a {
  display: block;
}
.starnews-banner a img {
  width: 100%;
}
.starnews-food-contents .food-txt {
  position: relative;
  line-height: 1.8;
}
.btn-ai-recommend {
  position: absolute;
  top: 0;
  right: 2.4rem;
  width: 5rem;
  height: 5rem;
  color: rgb(134, 101, 239);
  font-size: 0;
  border-radius: 50%;
  background: url(/images/contents/magazine/i-ai-recommend.gif) no-repeat center / 100%;
}
/* // [2025-03-21 : shj] AI 맛집 미로그인, 로그인 시 */

/* 25.02.17 별별뉴스 컨텐츠 공유하기버튼 수정 - sayho */
.coupon-detail-button.type-share02 {
  border-radius: 4px;
  background: rgba(17, 17, 17, 0.8) url(/images/contents/magazine/ic_starnews_share.svg) no-repeat center 5px/ 15px auto;
}
.magazine_cont .type-add {
  position: absolute;
  top: 24px;
  right: 55px;
  display: block;
  width: 27px;
  height: 27px;
  border-radius: 4px;
  background: rgba(17, 17, 17, 0.8) url(/images/contents/magazine/ic_starnews_add.svg) no-repeat center 5px/ 15px auto;
}
.magazine_cont .type-add.off {
  background: rgba(17, 17, 17, 0.8) url(/images/contents/magazine/ic_starnews_add_off.svg) no-repeat center 5px/ 15px auto;
}

/* [2025-02-18 오늘의 용돈 페이지 개선 : HDH] */
.page-money-box {
  overflow-x: hidden;
}
.page-money-box > section {
  width: 100%;
  box-sizing: border-box;
}
.page-money-box .section-top {
  position: relative;
  padding: 13px 0 52px;
}
.page-money-box .section-top .bg-images-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.page-money-box .section-top .bg-images-wrap .bg-image {
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(100vw / 360 * 522);
  height: auto;
  opacity: 0;
  box-sizing: border-box;
  transform: translateX(-50%) translateY(50%);
  z-index: -1;
  transition: all 0.35s ease-in-out;
}
.page-money-box .section-top .bg-images-wrap .bg-image.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.page-money-box .section-top .section-top-title {
  display: block;
  width: 100%;
  padding: 30px 24px 0;
  box-sizing: border-box;
}
.page-money-box .mb-acco-list {
  margin-top: 12px;
  padding: 0 24px 24px;
}
.page-money-box .mb-acco-list .mb-acco-item {
  position: relative;
  margin-bottom: -24px;
  padding: 30px 30px 24px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid #fff;
}
.page-money-box .mb-acco-list .mb-acco-item.js-accordion-opened {
  margin-bottom: 0;
}
.page-money-box .mb-acco-list .mb-acco-item.item-01 {
  background: linear-gradient(180deg, rgba(54, 248, 0, 0.2) 0%, rgba(55, 255, 0, 0.2) 100%);
}
.page-money-box .mb-acco-list .mb-acco-item.item-02 {
  background: linear-gradient(180deg, rgba(255, 229, 162, 0.9) 0%, rgba(255, 250, 165, 0.9) 100%);
}
.page-money-box .mb-acco-list .mb-acco-item.item-03 {
  background: linear-gradient(0deg, rgba(176, 237, 255, 0.9) 16.63%, rgba(234, 252, 255, 0.9) 100%);
}
.page-money-box .mb-acco-title-wrap {
  display: flex;
  justify-content: space-between;
}
.page-money-box .mb-acco-list .mb-acco-item .mb-acco-opener-title {
  display: block;
  width: 100%;
}
.page-money-box .mb-acco-list .mb-acco-item .mb-acco-opener-title .img-title-sub {
  display: block;
  width: 71px;
}
.page-money-box .mb-acco-list .mb-acco-item .mb-acco-opener-title .item-title {
  display: block;
  margin-top: 10px;
  margin-bottom: 22px;
  color: #000;
  font-size: 23px;
  font-weight: bold;
  line-height: normal;
  letter-spacing: -0.46px;
  word-break: keep-all;
}
.page-money-box .mb-acco-list .mb-acco-item .mb-acco-opener-title .item-title::after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 2px;
  background: url(/images/new_renewal/ic_arrow_r_01.svg) no-repeat center / 15px;
}
.page-money-box .mb-acco-list .mb-acco-item.js-accordion-opened .mb-acco-opener-title .item-title::after {
  display: none;
}
.page-money-box .mb-acco-list .mb-acco-item .mb-acco-opener {
  position: absolute;
  right: 30px;
  margin: -11px -11px 0 0;
  width: 22px;
  height: 22px;
  background: url(/images/new_benefit_images/apptech/ic_acco_question.svg) no-repeat 100% 50% / 100% auto;
}
.page-money-box .mb-acco-list .mb-acco-item .mb-acco-opener::after {
  background: none;
}
.page-money-box .mb-acco-list .mb-acco-item .mb-acco-opener.js-accordion-active {
  background: url(/images/new_benefit_images/apptech/ic_acco_x.svg) no-repeat 100% 50% / 100% auto;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.page-money-box .mb-acco-list .mb-acco-item .mb-acco-contents .item-contents-text {
  color: #141414;
  font-size: 15px;
  font-weight: 500;
  line-height: 25px;
}
.page-money-box .mb-acco-list .mb-acco-item .mb-acco-contents .mb-acco-item-btn {
  display: block;
  width: 100%;
  margin-top: 34px;
}
.page-money-box .mb-acco-list .mb-acco-item .mb-acco-contents .mb-acco-item-btn img {
  width: 100%;
}
/* .page-money-box
.mb-acco-list
.mb-acco-item
.mb-acco-contents
.mb-acco-item-btn-wrap {
position: relative;
width: 100%;
margin-top: 34px;
padding: 2px;
background: linear-gradient(
90deg,
#00dd81 0%,
#7a8eff 53.5%,
#00dd81 100%
) no-repeat;
background-size: cover;
border-radius: 10px;
box-sizing: border-box;
}
.page-money-box
.mb-acco-list
.mb-acco-item
.mb-acco-contents
.mb-acco-item-btn {
width: 100%;
padding: 14px 0;
background-color: #fff;
border-radius: 8px;
box-sizing: border-box;
}
.page-money-box
.mb-acco-list
.mb-acco-item
.mb-acco-contents
.mb-acco-item-btn
span {
font-size: 19px;
font-weight: 600;
letter-spacing: -0.38px;
background: linear-gradient(
90deg,
#00dd81 0%,
#7a8eff 53.5%,
#00dd81 100%
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} */
.page-money-box .mb-btn-wrap {
  padding: 16px 24px 0;
  box-sizing: border-box;
}
.page-money-box .mb-btn-wrap .mb-btn {
  display: block;
  width: 100%;
  padding: 21px 0;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #fff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.4px;
  box-shadow: 0 4px 20px 0 rgba(89, 153, 217, 0.25);
  border-radius: 15px;
  backdrop-filter: blur(10px);
}
.page-money-box .section-bottom {
  padding: 52px 0 48px;
  background: linear-gradient(180deg, #dcf3ff 0%, #efdbff 100%);
}
.page-money-box .title-image {
  display: block;
  width: 100%;
  margin-bottom: 30px;
  padding: 0 24px;
  box-sizing: border-box;
}
.page-money-box .section-item {
  margin-bottom: 20px;
  padding: 34px 24px;
  background-color: #fff;
  border-radius: 50px;
}
.page-money-box .section-item:last-child {
  margin-bottom: 0;
}
.page-money-box .section-item .section-item-title {
  font-size: 20px;
  font-weight: 600;
  color: #3079b5;
  text-align: center;
}
.page-money-box .section-item .mb-mission-list {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px -24px 0;
  padding: 0 24px;
  overflow-x: scroll;
  scroll-snap-type: x proximity;
  scroll-padding-left: 24px;
}
.page-money-box .section-item .mb-mission-list .mb-mission-item {
  width: 167px;
  scroll-snap-align: start;
  flex: 0 0 auto;
}
.page-money-box .section-item .mb-mission-list .mb-mission-item img {
  display: block;
  width: 100%;
}
.page-money-box .section-item .mb-insur-list {
  margin-top: 6px;
}
.page-money-box .section-item .mb-insur-list .mb-insur-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  border-bottom: 1px solid #e5e5e5;
}
.page-money-box .section-item .mb-insur-list .mb-insur-item:last-child a {
  padding-bottom: 0;
  border-bottom: none;
}
.page-money-box .section-item .mb-insur-list .mb-insur-item .insur-item-text {
  font-size: 16px;
  font-weight: 700;
  color: #0081d7;
}
.page-money-box .section-item .mb-insur-list .mb-insur-item .insur-item-title {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 600;
  color: #000;
  letter-spacing: -0.36px;
}
.page-money-box .section-item .mb-insur-list .mb-insur-item .insur-item-btn {
  padding: 8px 18px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.3px;
  border-radius: 20px;
  background: #eaf1ff;
  color: #3079b5;
}
/* 250224 추가 */
.page-money-box .section-top .mb-text-btn {
  display: block;
  width: 100%;
  margin-top: 24px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
  color: #3295b6;
  text-align: center;
}
.page-money-box .section-top .mb-text-btn span {
  border-bottom: 1px solid #3295b6;
}
/* [2026-08-20] [WPM-14399] 오늘의 용돈 UIUX 개편 */
.page-money-box img {
  width: 100%;
  max-width: 100%;
}
.page-money-box h2 {
  font-size: 2.0rem;
  font-weight: 700;
  line-height: 1.3;
}
.page-money-box .money-section {
  padding: 20px 16px 40px 16px;
  background-color: #F4F6F8;
}
.page-money-box .benefit-section {
  padding: 36px 20px 56px 20px;
}
.page-money-box .benefit-section .link-list .main-txt {
  font-weight: 500;
}
.page-money-box .tit-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 0 4px;
}
.page-money-box .cont-wrap + .cont-wrap {
  margin-top: 40px;
}
.page-money-box .main-txt {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.2rem;
}
.page-money-box .sub-txt {
  display: block;
  color: #666;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 2.0rem;
}
.page-money-box .link-box {
  background-color: #fff;
  border-radius: 16px;
}
.page-money-box .link-box.money {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 19px 24px;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2.2rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.page-money-box .link-box.money .point {
  font-size: 2.0rem;
  font-weight: 700;
  line-height: 2.6rem;
}
.page-money-box .link-box.apptech {
  padding: 20px 12px 12px 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.page-money-box .link-box.apptech .box-tit {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 8px 0 12px;
}
.page-money-box .link-box.apptech .box-tit .main-txt {
  line-height: 2.0rem;
}
.page-money-box .link-box.apptech .btn-tip {
  min-width: 101px;
}
.page-money-box .link-box.apptech .sub-txt {
  margin-top: 4px;
  color: #111;
  font-weight: 400;
  line-height: 1.8rem;
}
.page-money-box .link-box.apptech .apptech-list .main-txt {
  margin-top: 4px;
}
.page-money-box .link-box.apptech .apptech-list a {
  min-height: 114px;
  background-color: #ece6ff;
  color: #6a4bcb;
  border-radius: 12px;
}
.page-money-box .link-box.apptech .apptech-list a:nth-of-type(2) {
  background-color: #e2f0ff;
  color: #2776ce;
}
.page-money-box .link-box.apptech .apptech-list a:nth-of-type(3) {
  background-color: #d8f3f2;
  color: #008882;
}
.page-money-box .link-box.apptech .apptech-list a > img {
  width: 64px;
  height: 64px;
}
.page-money-box .link-box.event {
  display: flex;
  align-items: center;
  margin: 20px 0;
  padding: 16px 24px;
  background-color: #E2E9F1;
}
.page-money-box .link-box.event > img {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  margin-right: 16px;
}
.page-money-box .link-box.event .main-txt {
  line-height: 2.4rem;
}
.page-money-box .link-box.bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 22px 20px;
}
.page-money-box .link-box.bar > i {
  width: 1px;
  height: 16px;
  background-color: #d9d9d9;
}
.page-money-box .link-box.bar > a {
  display: flex;
  align-items: center;
  margin: 0 auto;
}
.page-money-box .link-box.bar > a > img {
  display: inline-block;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
}
.page-money-box .link-box.bar .main-txt {
  padding: 0 8px;
}
.page-money-box .link-box.link-list {
  padding: 24px;
}
.page-money-box .link-box.link-list > li:first-child {
  margin-top: 0;
}
.page-money-box .link-list > li {
  margin-top: 24px;
}
.page-money-box .link-list > li > a {
  position: relative;
  display: flex;
  align-items: center;
}
.page-money-box .link-list > li > a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(/images/new_benefit_images/apptech/ic_arrow_right_grey.webp) no-repeat center / contain;
}
.page-money-box .link-list > li > a > img {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin-right: 16px;
  border-radius: 12px;
  background-color: #f4f6f8;
}
.page-money-box .link-list > li .sub-txt {
  line-height: 2.2rem;
  margin-top: 2px;
}
.page-money-box .link-list .cont {
  padding-right: 10px;
}
.page-money-box .btn-arrow {
  position: relative;
  display: inline-block;
  padding-right: 14px;
  font-size: 1.6rem;
  line-height: 2.0rem;
  font-weight: 500;
}
.page-money-box .btn-arrow:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: url(/images/new_benefit_images/apptech/ic_arrow_right.webp) no-repeat center / contain;
}
.page-money-box .btn-tip {
  display: inline-block;
  min-width: 70px;
  padding: 6px 12px;
  background-color: #f0f0f0;
  font-size: 1.3rem;
  line-height: 2.0rem;
  border-radius: 29px;
}
.page-money-box .ic-new {
  position: absolute;
  top: -8px;
  right: -4px;
  display: inline-block;
  width: 24px;
  height: 24px;
}
.page-money-box .apptech-list {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.page-money-box .apptech-list > li {
  flex: 1;
  position: relative;
}
.page-money-box .apptech-list a {
  flex: 1;
  position: relative;
  display: inline-block;
  width: 100%;
  min-height: 126px;
  text-align: center;
  padding: 12px 0 16px 0;
  box-sizing: border-box;
}
.page-money-box .apptech-list a > img {
  display: inline-block;
  width: 52px;
  height: 52px;
}
.page-money-box .apptech-list .flex-2 {
  flex: 2;
}
.page-money-box .apptech-list .flex-2 img {
  width: auto;
}
.page-money-box .apptech-list .main-txt {
  margin-top: 8px;
  font-size: 1.4rem;
  line-height: 1.8rem;
}
.page-money-box .apptech-list .sub-txt {
  margin-top: 4px;
  font-size: 1.3rem;
  line-height: 1.6rem;
}
.page-money-box .noti-wrap {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  width: 20px;
  height: 20px;
}
.page-money-box .noti-wrap.on .noti-msg {
  display: block;
}
.page-money-box .noti-wrap > button {
  display: inline-block;
  width: 100%;
  height: 100%;
  background: url(../images/new_benefit_images/apptech/ic_tooltip.svg) no-repeat center;
  background-size: contain;
}
.page-money-box .noti-wrap .noti-msg {
  position: absolute;
  top: -37px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  padding: 6px 12px;
  background-color: #666;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.5rem;
  text-align: center;
  border-radius: 8px;
  white-space: nowrap;
}
.page-money-box .noti-wrap .noti-msg::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #666 transparent transparent transparent;
}
.page-money-box .pocket-section {
  padding: 20px 16px 56px 16px;
}
.page-money-box .pocket-section .link-box.money {
  background-color: #f4f6f8;
  box-shadow: unset;
}
.page-money-box .tip-txt {
  display: flex;
  align-items: center;
  gap: 4px;
}
.page-money-box .ui-notice-icon {
  background-image: url(../images/new_benefit_images/apptech/ic_tooltip.svg);
}
.page-money-box .ui-tooltip-head::before {
  content: none;
}
.page-money-box .ui-tooltip-bubble {
  width: calc(100vw - 48px);
  max-width: 327px;
  padding: 18px 32px 18px 14px;
  background-color: #fff;
  border: 1px solid #a2a2a2;
  border-radius: 10px;
  box-sizing: border-box;
}
.page-money-box .ui-tooltip-bubble-message {
  color: #666;
  font-size: 1.4rem;
  line-height: 1.286;
  white-space: normal;
}
.page-money-box .ui-tooltip-bubble-close {
  top: 8px;
  right: 6px;
  background: url("../images/common/btn-close.png") no-repeat 50% 50% / 8px;
  opacity: 0.6;
}
.page-money-box .pocket-list-wrap {
  margin-top: 36px;
  padding: 0 8px;
}
.page-money-box .pocket-list-wrap .btn-sel > span {
  position: relative;
  padding-right: 24px;
  font-size: 2.0rem;
  font-weight: 700;
  line-height: 1.3;
}
.page-money-box .pocket-list-wrap .btn-sel > span::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url(../images/new_benefit_images/apptech/ic_arrow_bottom.svg) no-repeat center;
  background-size: 16px;
}
.page-money-box .pocket-list {
  margin-top: 32px;
}
.page-money-box .pocket-list > li + li {
  margin-top: 48px;
}
.page-money-box .pocket-list .date {
  color: #666;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.43;
}
.page-money-box .pocket-list .details {
  margin-top: 12px;
  padding-top: 20px;
  border-top: 1px solid #e5e5e5;
}
.page-money-box .pocket-list .details > li + li {
  margin-top: 24px;
}
.page-money-box .pocket-list .info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.3;
}
.page-money-box .pocket-list .point {
  flex-shrink: 0;
  margin-left: 8px;
  padding-left: 24px;
  font-weight: 700;
  background: url(../images/new_benefit_images/apptech/ic_hanamoney_point.png) no-repeat center left;
  background-size: 20px;
}
.page-money-box .pocket-list .time {
  display: block;
  color: #666;
  margin-top: 4px;
  font-size: 1.3rem;
  line-height: 1.54;
  min-height: 2rem; /* [2025-12-31 kho] [WPM-12986] 값이 없을 때도 높이 유지하도록 스타일 추가 */
}

/* 레이어 팝업 */
.layer-hanamoney-usage-info .header h2 {
  font-size: 25px;
  font-weight: 600;
  color: #333;
}
.layer-hanamoney-usage-info .header h2 .title-sub {
  display: block;
  margin-bottom: 5px;
  font-size: 20px;
}
.layer-hanamoney-usage-info .hm-usage-info-img {
  text-align: center;
}
.layer-hanamoney-usage-info .hm-usage-info-list {
  margin-top: 30px;
}
.layer-hanamoney-usage-info .hm-usage-info-list .hm-usage-info-item {
  margin-bottom: 40px;
}
.layer-hanamoney-usage-info .hm-usage-info-list .hm-usage-info-item-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -1px;
  color: #3079b5;
}
.layer-hanamoney-usage-info .hm-usage-info-list .hm-usage-info-item-title a {
  position: relative;
}
.layer-hanamoney-usage-info .hm-usage-info-list .hm-usage-info-item-title a::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 2px;
  background: url(/images/new_benefit_images/apptech/ic_mb_arrow_l_blue.svg) no-repeat;
  background-size: 100% 100%;
}
.layer-hanamoney-usage-info .hm-usage-info-list .hm-usage-info-text {
  margin-top: 8px;
  font-size: 18px;
  line-height: 25px;
  letter-spacing: -0.9px;
  color: #000;
  word-break: keep-all;
}
/* 머니현황판 */
.page-money-box .mb-user-count-wrap {
  position: relative;
  width: 100%;
  margin-top: 52px;
  padding: 23px 0 26px;
  border-radius: 20px;
  background-color: #fff;
  box-sizing: border-box;
  box-shadow: 0 4px 20px 0 rgba(89, 153, 217, 0.25);
  text-align: center;
  overflow: hidden;
}
.page-money-box .mb-user-count-wrap::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 30%;
  width: 72px;
  height: 71px;
  background: url(/images/new_benefit_images/apptech/user_count_bg_img_02.png) no-repeat;
  background-size: cover;
  animation: mbIconAni 1.5s ease-in-out infinite;
}

.page-money-box .mb-user-count-wrap::after {
  content: "";
  position: absolute;
  right: -20px;
  top: -35px;
  width: calc(436px / 4);
  height: calc(351px / 4);
  background: url(/images/contents/ani-assets/img-anibox05-item04.png) no-repeat;
  background-size: cover;
  animation: mbIconAni 1.5s ease-in-out infinite;
}
@keyframes mbIconAni {
  0% {
      transform: translateY(0%);
  }
  50% {
      transform: translateY(12%) rotate(2deg);
  }
  100% {
      transform: translateY(0%);
  }
}
.page-money-box .mb-user-count-wrap .user-count-title {
  text-align: center;
}
.page-money-box .mb-user-count-wrap .user-count-text {
  margin-top: 11px;
  font-size: 14px;
  font-weight: 600;
  color: #888;
  letter-spacing: -0.28px;
  z-index: 1;
}
.page-money-box .mb-user-count-wrap .user-count-cont {
  margin-top: 22px;
  display: flex;
  align-items: center;
  /* [2025-05-30 : oh] 11351 앱테크 머니현황판 수정요청 */
  /* justify-content: space-between; */
  justify-content: center;
  padding: 0 4.4rem 0 6.3rem;
  gap: 4.7rem;
  /* //[2025-05-30 : oh] 11351 앱테크 머니현황판 수정요청 */
}
.page-money-box .mb-user-count-wrap .user-count-cont .user-count-item {
  position: relative;
  /* width: 50%; */  /* [2025-05-30 : oh] 11351 앱테크 머니현황판 수정요청 */
}
.page-money-box .mb-user-count-wrap .user-count-cont .user-count-item:first-child::after {
  content: "";
  position: absolute;
  top: 10%;
  /* right: 0; */
  right: -2.5rem;  /* [2025-05-30 : oh] 11351 앱테크 머니현황판 수정요청 */
  width: 1px;
  height: 80%;
  background-color: #d9d9d9;
}
.page-money-box .mb-user-count-wrap .user-count-cont .user-count-item .user-count-item-title {
  font-size: 16px;
  font-weight: 600;
  color: #3d3d3d;
  letter-spacing: -0.32px;
}
.page-money-box .mb-user-count-wrap .user-count-cont .user-count-item .user-count-item-num {
  margin-top: 5px;
  font-size: 25px;
  font-weight: 600;
  color: #e478d3;
  letter-spacing: -0.5px;
}
.page-money-box .mb-user-count-wrap .user-count-cont .user-count-item:last-child .user-count-item-num {
  color: #7597dd;
}
/* //[2025-02-18 오늘의 용돈 페이지 개선 : HDH] */

/* [25.03.11 : lyr] 스크롤 시 배너가 상단에 fixed 되도록 하는 css (notify_p001_250311.html)*/
.fixed-banner {
  position: sticky;
  top: 104px;
  z-index: 10;
}

/* [25.05.12 : oh] 11139 여백 조절 - page-gnb-head 만큼 padding-top 추가 */
.page-gnb-head + .fixed-banner + .usage-default {
  margin-top: 0 !important;
  padding-top:54px;
}

/* [25.03.13 : lyr] 다국어 채팅상담 (ETC_48_p001.html) */
.section-multilingual-chat {
  padding-top: 36px;
  background-color: #f4f6f8;
}
.section-multilingual-chat img * {
  width: 100%;
}
.section-multilingual-chat .chat-logo {
  width: 92px;
  margin: 0 auto;
}
.section-multilingual-chat .chat-title {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  color: #111;
}
.section-multilingual-chat .chat-desc {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  text-align: center;
}
.section-multilingual-chat .chat-desc span {
  font-size: 12px;
  font-weight: 400;
  color: #666;
}
.section-multilingual-chat .chat-desc span::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 8px;
  margin: 0 6px;
  background-color: #c3c3c3;
}
.section-multilingual-chat .chat-desc span:last-child:after {
  display: none;
}
.section-multilingual-chat .chat-flag-wrap {
  margin-top: 14px;
}
.section-multilingual-chat .chat-flag-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 6px;
  justify-items: center;
}
.section-multilingual-chat .chat-flag {
  display: inline-block;
  width: 74px;
  text-align: center;
}
/* [2025-07-08] WPM-11679 */
.chat-flag-inner.col2 {
  margin-top: 24px;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.chat-flag-inner.col2 .chat-flag {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 6px;
}
/* // [2025-07-08] WPM-11679 */

/* [2025-03-14 오늘의 용돈 추척허용팝업 추가 : HDH] */
.layer-tracking-info .color-blue {
  color: #3079b5;
}
/* .layer-tracking-info .header h2 {
  font-size: 25px;
  font-weight: 600;
  color: #333;
  line-height: normal;
} */
.layer-tracking-info .header h2 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  line-height: normal;
}
/* .layer-tracking-info .layer-content-text {
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: -0.9px;
  color: #000;
  word-break: keep-all;
} */
.layer-tracking-info .layer-content-text {
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.9px;
  color: #000;
  word-break: keep-all;
}
.layer-tracking-info .layer-image-wrap {
  margin: 20px 0;
  text-align: center;
}

.layer-tracking-info .mb-btn-wrap {
  padding: 4px 24px 30px;
}
/* .layer-tracking-info .mb-btn-wrap .mb-btn {
  display: block;
  width: 100%;
  padding: 21px 0;
  text-align: center;
  background-color: #00a49d;
  border: 1px solid #fff;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.4px;
  box-shadow: 0 4px 20px 0 rgba(89, 153, 217, 0.25);
  border-radius: 15px;
  backdrop-filter: blur(10px);
} */
.layer-tracking-info .mb-btn-wrap .mb-btn {
  display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	border-radius: 6px;
	padding: 3px 8px;
  background-color: #00a49d;
	font-size: 1.5rem;
	line-height: 2rem;
	color: #fff;
	text-align: center;
	border: 1px solid #fff;
	font-weight: 400;
}
/* //[2025-03-14 오늘의 용돈 추척허용팝업 추가 : HDH] */

/* [25.03.20 : lyr] [WPM-10482] MG+ BLACK 새마을 버튼 컬러 추가 */
.ui-basic-button.type-saemaul {
background-color: #0071bc;
color: #fff;
}

/* [2025-03-21 KJH] [WPM-10422] 오늘의 용돈 상단 슬롯 추가 */
.sectionTop-title {
  display: flex;
  flex-direction: column;
  padding: 30px 24px 0;
}
.sectionTop-title-heading {
  order: 3;
  margin-top: 48px; /* [25.05.12 : oh] 11139 여백 조절 */
  text-align: center;
}
.sectionTop-title-heading img {
  width: 27.8846%;
}
.sectionTop-title-image {
  order: 1;
}
.sectionTop-title-count {
  order: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 57px;
  margin-block: 28px -10px; /* [25.05.12 : oh] 11139 여백 조절 */
  padding-inline: 30px;
  background: rgb(255,255,255);
  background: linear-gradient(90deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 100%);
  border-radius: 15px;
  border: 1px solid #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px 0 rgba(89, 153, 217, 0.25);
}
.sectionTop-title-count-txt {
  color: #080808;
  font-size: 18px;
  font-weight:600;
}
.sectionTop-title-count-won {
  color: #3079B5;
  font-size: 20px;
  font-weight: 600;
}
/* [2025-07-17] [WPM-11819] */
.sectionTop-title .sectionTop-item {
  position: relative;
  order: 3;
}
.sectionTop-title .sectionTop-item .sectionTop-floating-banner {
  position: absolute;
  top: 10px;
  right: -24px;
  z-index: 1;
  padding: 24px 24px 0 0;
}
.sectionTop-title .sectionTop-item .sectionTop-floating-banner .banner-img {
  display: inline-block;
  width: 96px;
  height: 96px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
  border-radius: 50%;
  animation: sectionTop-floating-banner 1s infinite ease-out;
}
@keyframes sectionTop-floating-banner {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -3px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.sectionTop-title .sectionTop-item .sectionTop-floating-banner .btn_close {
  position: absolute;
  top: 4px;
  right: 18px;
  width: 24px;
  height: 24px;
}

/* [2025-03-21 KJH] [WPM-10422] 오늘의 상세페이지 추가 */
#wrap:has( .pocketSave-wrap) .fix-top-wrap .header {
  background: rgba(255, 255, 255, 0);
}
/*.fix-top-wrap:has(+ .pocketSave-wrap) .header.is-scroll {
  background: rgba(255, 255, 255, 1);
}
.fix-top-wrap:has(.is-scroll) + .pocketSave-wrap .pocketSave-details-openpop {
  background: rgb(255, 255, 255, 1);
}

.fix-top-wrap:has(.is-scroll) + .pocketSave-wrap .pocketSave-details {
  border-radius: 0;
} */

/* .pocketSave-wrap {
  display: flex;
  flex-direction: column;
  background-color: #dcf3ff;
  background-repeat: no-repeat;
  background-image: url("/images/new_benefit_images/apptech/obj_coin_01.png"), url("/images/new_benefit_images/apptech/obj_coin_02.png");
  background-position: left calc(50% + 130px) top 25px, left calc(50% + 90px) top 75px;
  background-size: 52px auto, 107px auto;

  background-repeat: unset;
  background-image: unset;
  background-position: unset;
  background-size: unset;
  
  color: #000;
  transition: background-position 0.4s ease-in;
} */
.pocketSave-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #dcf3ff;
  color: #000;
  box-sizing: border-box;
}
.pocketSave-wrap #frm {
  overflow-y: hidden;
  height: 100%;
}
.pocketSave-bg {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100%;
  height: 310px;
  transform: translateX(-50%);
}
.pocketSave-bg-dropcoin {
  position: absolute;
  left: 50%;
  bottom: 50%;
  max-width: 100%;
  height: auto;
  transform: translate(-50%, 30%);
}
.pocketSave-top {
  position: relative;
  z-index:1;
  padding-block: 25px 21px;
  text-align: center;
}
.pocketSave-top-text {
  font-weight: 500;
  font-size: 20px;
}
.pocketSave-top-count {
  margin-top: 8px;
  font-weight: 600;
  font-size: 30px;
}
.pocketSave-details {
  position: relative;
  height: calc(100% - 114px);
  flex: 1;
  padding-top: 28px;
  background-color: #fff;
  border-radius: 50px 50px 0 0;
  box-sizing: border-box;
}
.pocketSave-details-openpop {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 50px;
  padding-inline: 24px;
  font-weight: 600;
  font-size: 20px;
}
.pocketSave-details-openpop::after {
  content: "";
  background: no-repeat url("/images/common/btn-tab-open-b.svg") right top calc(50% + 1px) / contain;
  width: 16px;
  height: 16px;
}
.pocketSave-details-inner {
  overflow-y: auto;
  height: calc(100% - 50px);
  padding-bottom: 40px;
  box-sizing: border-box;
}
.pocketSave-details-group {
  margin-top: 20px;
  padding-inline: 24px;
}
.pocketSave-details-group + .pocketSave-details-group {
  margin-top: 16px;
}
.pocketSave-details-day {
  color: #7e7e7e;
  font-weight: 700;
  font-size: 15px;
}
.pocketSave-details-item {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 6px;
  padding-block: 20px;
  text-align: right;
}
.pocketSave-details-item + .pocketSave-details-item {
  border-top: 1px solid #e5e5e5;
}
.pocketSave-details-point {
  height: 32px;
  padding-left: 40px;
  background: no-repeat url("/images/new_benefit_images/apptech/ic_money_hana.png") left center / 30px auto;
  font-weight: 600;
  font-size: 18px;
  text-align: left;
  align-content: center;
}
.pocketSave-details-place {
  color: #0081d7;
  font-weight: 600;
  font-size: 18px;
  align-content: center;
}
.pocketSave-details-time {
  grid-column: 1 / span 2;
  color: #7e7e7e;
  font-weight: 500;
  font-size: 14px;
  font-style: normal;
}
.pocketSave-wrap .ui-button-more {
  margin: unset;
  margin-top: 16px;
}
.pocketSave-details-nodata {
  padding-block: 100px;
  font-size: 17px;
  text-align: center;
}

#wrap:has(.pocketSave-wrap) {
  overflow-y: hidden;
}
.layout-wrap:has(.pocketSave-wrap) {
  height: 100%;
}

/* !!! 임시 */
#wrap:has(.pocketSave-wrap) {
  overflow-y: unset;
}
.pocketSave-details {
  transition: border-radius 0.3s;
}
.pocketSave-details {
  height: 100%;
  padding-bottom: 50px;
}
.pocketSave-details-openpop {
  position: sticky;
  top: 50px;
  transition: background 0.3s;
}
#wrap:has(.pocketSave-wrap) .fix-top-wrap .header {
  transition: background 0.3s;
}
#wrap:has(.pocketSave-wrap) .fix-top-wrap .header.is-scroll {
  background-color: rgba(255, 255, 255, 1);
}
#wrap:has(.fix-top-wrap .header.is-scroll) .pocketSave-details-openpop {
  background-color: rgba(255, 255, 255, 1);
}
#wrap:has(.fix-top-wrap .header.is-scroll) .pocketSave-details {
  border-radius: 0;
}
.layout-wrap:has(.pocketSave-wrap) {
  height: unset;
}
/* // !!! 임시 */

/* [25.03.13 : lyr] [WPM-10364] NEW 아이콘 추가 - 선반영 가능 */
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure
  .btn_link.new
  .btn_link-text {
  position: relative;
}
.renewal_2024
  .contents-wrap.type-main-renewal
  .page-contents
  .page-section.section_asset_expenditure
  .btn_link.new
  .btn_link-text::after {
  content: "";
  position: absolute;
  top: 0;
  right: -10px;
  width: 6.5px;
  height: 7.8px;
  background: url("/images/new_renewal/ico_new.svg") no-repeat center / auto
    7.8px;
}

/* [2025-03-21 KJH] [WPM-10422] 월 선택 팝업 */
.pocketSave-modal .header__title span {
  display: block;
  font-size: 18px;
}
.pocketSave-modal .ui-layer__body .ui-layer__body-inner {
  padding-block: 0 24px;
}
.pocketSave-modal .ui-select-list span.ui-label {
  padding-block: 12px;
  font-size: 15px;
}
.pocketSave-modal .ui-select-list .ui-radio-block.is-checked .ui-label {
  color: #0081D7;
  font-weight:600;
}
.pocketSave-modal .ui-select-list .ui-label::after {
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-size: contain;
  background-image: url("../images/new_benefit_images/apptech/ic_check_blue.png");
}

/* [2025-04-09 KJH] [WPM-10357] 앱테크 이미지 수정 */
.layer-image-wrap .layer-image-border {
  max-width: 100%;
  border-radius: 20px
}

/* [2025-04-14 KEJ] [WPM-10821] vip 출석 체크 이벤트 카카오 알림 신청하기 추가 */
.vip-switch-box{
  position: relative;
  width: 76.666%;
  max-width: 680px;
  display: flex;
  align-items: center;
  justify-content:space-between;
  gap: 10px;
  margin: 0 auto;
  padding: 16px 19px;
  border-radius: 12px;
  border: 1px solid #ffb300; /* 250425 kjh - 삭제 되어 있었음 */
  background-color: #fff;
}

.vip-switch-box .vip-switch-title{
  display: flex;
  align-items: center;
}

.vip-switch-box .vip-switch-title h2{
  /* font-size: 17px; */
  font-weight: 700;
}

.vip-switch-box img{
  position: relative;
  top: 1px;
  width: 22px;
  height: 23px;
  margin-right: 8px;
  flex-grow: 0;
}

.vip-switch-box .switch{
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}

.vip-switch-box .switch input{
  opacity: 0;
  width: 0;
  height: 0;
}

.vip-switch-box .slider{
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #949494;
  transition: 0.4s;
  border-radius: 34px;
}

.vip-switch-box .slider:before{
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  left: 2px;
  bottom: 2px;
  background-color: #fff;
  transition: 0.4s;
  border-radius: 50%;
}

.vip-switch-box input:checked + .slider{
  background-color: #029c94;
}

.vip-switch-box input:checked + .slider:before{
  transform: translateX(16px);
}
/* //[2025-04-14 KEJ] [WPM-10821] vip 출석 체크 이벤트 카카오 알림 신청하기 추가 */

/* [2025-04-15 KJH] [WPM-10728] ai-chatbot 아이콘 이동 */
.tit-ico-aiChatbot:before {
  content: "";
  display: block;
  width: 5rem;
  height: 5rem;
  background: url(/images/contents/magazine/i-ai-recommend.gif) no-repeat center / 100%;
}
.starnews-sorting-contents .tit-ico-aiChatbot {
  display: flex;
  align-items: center;
  column-gap: 5px;
}

/* [2025-04-17 jy] WPM-10861 */
.layer-info .fc-grey {color: #666;}
.layer-info .layer-info-img {width: calc(100% + 48px); margin: 24px -24px 0 -24px; text-align: center;}
.layer-info .layer-info-img > img {width: 100%;}
/* // [2025-04-17 jy] WPM-10861 */

/* [2025-04-28 KEJ] [WPM-10901] 이벤트 이미지 추가*/
.contents-wrap .vip-event-may img{
  width: 100%;
  height: auto;
}

/* [2025-05-12 kho] [WPM-11084] 비로그인 메인 - 새로 나왔어요 추가 */
.section-new-card {
  padding: 40px 24px 0; /* [2025-08-06 kho] padding-bottom 삭제 */
}
.section-new-card h2::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 5px;
  background: url(/images/icon/ic-logoff-tit03.png) no-repeat 0 0 / 100% auto;
  vertical-align: top;
}
.page-contents.logoff-main .section-new-card .main-card-list {
  display: flex;
}
.page-contents.logoff-main .section-new-card .main-card-list li:not(.is-show) {
  display: none;
}
.page-contents.logoff-main .section-new-card.type-show .main-card-list li {
  display: block;
}
.section-new-card .btn-more a {
  display: flex;
  width: 100%;
  height: 48px;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.section-new-card .btn-more a::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  background: url(/images/icon/ic-select-arrow-black.svg) no-repeat 0 0 / 100% auto;
}
.section-new-card.type-show .btn-more a::after {
  transform: rotate(180deg);
}
/* //[2025-05-12 kho] [WPM-11084] 비로그인 메인 - 새로 나왔어요 추가 */
/* [2025-05-28 oh] 11327 앱테크 페이지 하단 위젯 버튼 추가 */
.section-wedget {
  position: relative; 
  background-color: #dcf3ff;
}
.section-wedget .title img {
  width: 100%;
}
.section-wedget .wedget-btn-list {
  position: absolute;
  bottom: 48px;
  right: 0;
  left: 0;
  display: flex;
  gap: 22px;
  padding: 0 22px;
}
.section-wedget .wedget-btn-list img {
  width: 100%;
}
.layer-wedget-setting {
  z-index: 100;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.layer-wedget-setting .btn-wedget {
  display:flex;
  align-items: center;
  justify-content: center;
  min-width: 264px;
  height: 48px;  
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  padding:0 16px;
  border-radius: 100px;
  background-color: #3a94ff;
  box-shadow: 0 10px 20px rgba(58, 148, 255, 0.2);
}
.layer-wedget-setting .btn-wedget span {
  position:relative;
  padding-right:20px;
}
.layer-wedget-setting .btn-wedget span:after {
  content:"";
  position:absolute;
  top:50%;
  right:0;
  width:18px;
  height:18px;
  background:url(../images/new_benefit_images/apptech/ic_eyes.png) 0 0 no-repeat;
  background-size:18px auto;
  transform: translateY(-50%);
}
.layer-wedget-setting.visible {
  animation: bounceInUp 0.5s ease forwards;
  opacity: 1;
  pointer-events: auto;
}
@keyframes bounceInUp {
  0% {
    bottom: 0;
    opacity: 0;
  }
  60% {
    bottom: 31px;
    opacity: 1;
  }
  80% {
    bottom: 29px;
  }
  100% {
    bottom: 26px;
  }
}
.layer-add-wedget .header .header-inner,
.layer-style-wedget .header .header-inner {
  display:flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  text-align: left;
  padding:0;
  min-height:auto;
}
.layer-add-wedget .header .header-inner .header__title {
  line-height:24px;
}
.layer-add-wedget .header .header-inner .desc {
  padding-top:12px;
  font-weight:400;
  font-size:15px;
  letter-spacing: -0.025em;
  color:#666;
}
.layer-add-wedget .ui-layer__body .ui-layer__body-inner {
  padding-top:4px;
  padding-bottom:30px;
}
.layer-add-wedget .ui-layer__body .image-area,
.layer-style-wedget .ui-layer__body .image-area {
  width:100%;
  height:175px;
  text-align:center;
  border-radius:15px;
  background-color:#f2f2f2;
}
.layer-add-wedget .ui-layer__body .image-area img,
.layer-style-wedget .ui-layer__body .image-area img {
  max-width:100%;
}
.layer-add-wedget .ui-layer__body .list-info {
  margin-top:24px;
}
.layer-add-wedget .ui-layer__body .list-info li {
  display:flex;
  flex-direction: row;
  gap:8px;
}
.layer-add-wedget .ui-layer__body .list-info li ~ li {
  margin-top:10px;
}
.layer-add-wedget .ui-layer__body .list-info strong {
  flex-shrink: 0;
  font-weight:500;
  font-size:15px;
  letter-spacing:-0.025em;
}
.layer-add-wedget .ui-layer__body .list-info span {
  line-height:1.3;
  font-weight:400;
  font-size:14px;
  letter-spacing:-0.025em;
}
.layer-add-wedget .ui-layer__body .list-info span em {
  font-style:normal;
  font-weight:700;
  color:#029c94;
}
.layer-add-wedget .ui-layer__body .guide {
  position:relative;
  line-height:18px;
  margin-top:25px;
  padding-left:23px;
  font-weight:400;
  font-size:13px;
}
.layer-add-wedget .ui-layer__body .guide:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:18px;
  height:18px;
  background:url(../images/icon/ic-notice-dark.svg) 0 0 no-repeat;
  background-size:18px auto;
}
.layer-style-wedget .ui-layer__body .list-wedget {
  display:flex;
  flex-direction: column;
  gap:24px;
}
.layer-style-wedget .ui-layer__body .list-wedget .txt {
  line-height:1.3;
  margin-top:10px;
  font-weight:400;
  font-size:14px;
  letter-spacing:-0.025em;
}
/* //[2025-05-28 oh] 11327 앱테크 페이지 하단 위젯 버튼 추가 */

/* [2025-07-11] 오늘의 운세 */
.today-fortune {
  padding: 0 !important;
  background-color: #F5F6F8;
}
.today-fortune .page-visual-top {
  position: relative;
  width: 100%;
  min-height: 471px;
  padding: 56px 16px 150px 16px;
  background: url(../images/contents/fortune/img_visual_250710.png) no-repeat;
  background-size: cover;
  box-sizing: border-box;
}
.today-fortune .page-visual-top .txt {
  color: #fff;
}
.today-fortune .page-visual-top .txt > h2 {
  font-size: 2.0rem;
  font-weight: 400;
  line-height: 140%;
}
.today-fortune .page-visual-top .txt > h2 .point {
  color: #FFD000;
  font-size: 3.0rem;
  font-weight: 700;
  line-height: 140%;
}
.today-fortune .page-visual-top .txt > p {
  margin-top: 12px;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 140%;
}
.today-fortune .alarm-message {
  position: absolute;
  top: calc(100% - 186px);
  left: 0;
  right: 0;
  width: 238px;
  margin: 0 auto;
  background-color: #333;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 140%;
  border-radius: 80px;
}
.today-fortune .alarm-message > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 10px 16px;
  box-sizing: border-box;
}
.today-fortune .alarm-message i {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin-right: 2px;
  background: url(../images/contents/fortune/icon-alram.png) no-repeat center;
  background-size: 2rem;
}
.today-fortune .page-bottom-sheet {
  position: relative;
  width: 100%;
  padding: 16px;
  margin-top: -130px;
  background-color: #F5F6F8;
  border-radius: 25px 25px 0 0;
  box-sizing: border-box;
}
.today-fortune .fortune-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.today-fortune .fortune-list > li {
  width: calc(50% - 4px);
}
.today-fortune .fortune-list > li > a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  /* padding: ; */
  background-color: #fff;
  border-radius: 25px;
  box-sizing: border-box;
}
.today-fortune .fortune-list > li .cont {
  display: flex;
  flex-direction: column;
  height: 181px;
  padding: 38px 20px 12px 20px;
  box-sizing: border-box;
  letter-spacing: -0.5px;
}
.today-fortune .fortune-list > li .cont img {
  width: 40px;
  height: 40px;
}
.today-fortune .fortune-list > li .cont strong {
  display: block;
  margin: 10px 0 8px 0;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 140%;
}
.today-fortune .fortune-list > li .cont strong span {
  color: #666;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 140%;
}
.today-fortune .fortune-list > li .cont em {
  font-style: normal;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 140%;
}
.today-fortune .fortune-list > li .cont em span {
  color: #333;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 140%;
}
/* full content */
.today-fortune .fortune-list > li.margin-bottom-8 {
  margin-bottom: 8px !important;
}
.today-fortune .fortune-list > li.row {
  width: 100%;
}
.today-fortune .fortune-list > li.row .cont {
  flex-direction: row;
  align-items: center;
  height: 90px;
  padding: 0 60px 0 20px;
}
.today-fortune .fortune-list > li.row .cont > strong {
  margin: 0 0 0 16px;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 140%;
}
.today-fortune .fortune-list > li.row .hana-point {
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
/* // full content */
.today-fortune .fortune-list .hana-point {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  width: 4.0rem;
  height: 2.6rem;
  padding: 4px 5px;
  color: #fff;
  background: linear-gradient(101.35deg, #00B196 4.51%, #547EFF 46.25%, #9F4BFF 86.69%), radial-gradient(50% 50% at 50% 50%, rgba(0, 166, 255, 0.2) 0%, rgba(0, 177, 135, 0) 100%);
  border-radius: 80px;
  box-sizing: border-box;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 100%;
}
.today-fortune .fortune-list .hana-point > i {
  width: 1.8rem;
  height: 1.8rem;
  margin-right: 2px;
  background: url(../images/contents/fortune/icon-hanamoeny.png) no-repeat center;
  background-size: 1.8rem;
}
.today-fortune .ui-button {
  display: block;
  margin-top: 40px;
  font-size: 1.5rem;
  font-weight: 400;
  color: #fff;
  background-color: #2e2e2f;
}
.today-fortune .page-footer {
  width: 100%;
}
/* // [2025-07-11] 오늘의 운세 */

/* [2025-08-12 KEJ] [WPM-11990] [카드상품 기타] 외국인 모바일 카드 신청 매뉴얼 추가 */
.ezcard_manual_contents .js-ui-accordion__item {
  padding: 16px 0px;
  border-top: 1px solid #eee;
}
.ezcard_manual_contents .js-ui-accordion__item .tit {
  font-size: 1.6rem;
  line-height: 2.1rem;
  font-weight: 500;
}
.ezcard_manual_contents .js-ui-accordion__opener {
  padding: 0 16px;
  font-size: 1.6rem;
  line-height: 2.1rem;
  font-weight: 500;
  text-indent: -16px;
}
.ezcard_manual_contents .wcms-table-inner {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 400;
}
.ezcard_manual_contents caption {
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin-top: -1px;
  font-size: 1px;
  line-height: 1px;
  color: transparent;
  opacity: 0;
}
.ezcard_manual_contents tr {
  border: 1px solid #333;
}
.ezcard_manual_contents th, .ezcard_manual_contents td {
  padding: 8px;
  border-right: 1px solid #333;
  font-size: 1.2rem;
}
.ezcard_manual_contents .f8cbad {
  background: #f8cbad;
}
.ezcard_manual_contents .gray_point {
  background: #d9d9d9;
}
.ezcard_manual_contents .table-txt-box {
  padding: 8px;
  box-sizing: border-box;
}
.ezcard_manual_contents .small-text {
  line-height: 2.1rem;
}
.ezcard_manual_contents img {
  width: 100%;
  padding-top: 16px;
}
.ezcard_manual_contents .margin-top-16 {
  margin-top: 16px !important;
} 
/* //[2025-08-12 KEJ] [WPM-11990] [카드상품 기타] 외국인 모바일 카드 신청 매뉴얼 추가 */
/* [2025-08-14 oh] 12157-213499361 자동차보험화면_상단배너영역추가 */
[data-scroll-section-name="section-car-ins01"] {
  margin-top: 0;
  padding-top: 2.2rem;
}
.isur-banner {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  height: 8rem;
  margin-bottom: 2.8rem;
  padding: 0 1.7rem;
  border-radius: 0.8rem;
  background-color: #dbeaf5;
}
.isur-banner .desc{
  line-height: 1.8rem;
  font-weight: 700;
  font-size: 1.4rem;
  color: #5765de;
}
.isur-banner .tit {
  font-weight: 700;
  font-size: 1.6rem;
}
.isur-banner .img {
  position: absolute;
  top: 50%;
  right: 1.7rem;
  width: 8rem;
  height: 8rem;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 8rem auto;
  transform: translateY(-50%);
}
.isur-banner .img.coffee {
  background-image: url(/images/contents/life/bg-banner-coffee.png);
}
/*// [2025-08-14 oh] 12157-213499361 자동차보험화면_상단배너영역추가 */

/* [2025-10-29 kho] [WPM-12932] 자동차보험화면_상단배너영역 배경 대신 이미지 처리 추가 */
.isur-banner.type-img .img {
  background: none;
}
.isur-banner.type-img .img img {
  width: 100%;
  height: auto;
}
/* //[2025-10-29 kho] [WPM-12932] 자동차보험화면_상단배너영역 배경 대신 이미지 처리 추가 */

/* [2026-03-19 kho] [WPM-14103] 친절한누나들 배너 추가 */
.isur-banner-ad {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 5.4rem;
  margin-top: 15px;
  padding: 1.5rem 1rem 1.5rem 10.4rem;
  border-radius: 1rem;
  background: var(--bgColor);
}
.isur-banner-ad .img {
  position: absolute;
  top: 50%;
  left: 2rem;
  width: 7.2rem;
  height: 7.2rem;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 7.2rem auto;
  transform: translateY(-50%);
}
.isur-banner-ad .img img {
  width: 100%;
  height: auto;
}
.isur-banner-ad .desc {
  font-size: 1.2rem;
  line-height: 1.5rem;
  letter-spacing: -0.025em;
  color: #222;
}
.isur-banner-ad .tit {
  font-size: 1.5rem;
  line-height: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.isur-banner-ad .sub {
  margin-top: 2px;
  font-size: 1.1rem;
  line-height: 1.4rem;
  letter-spacing: -0.04em;
  color: #333;
}
/* //[2026-03-19 kho] [WPM-14103] 친절한누나들 배너 추가 */

/* [2025-08-13 KEJ] [WPM-12162] 추가 */
.error-area .error-txt {
  font-size: 1.6rem;
  line-height: 2.1rem;
  font-weight: 400;
  color: #666;
}
.error-area .error-txt-sub {
  font-size: 1.4rem;
  line-height: 1.8rem;
  font-weight: 300;
  color: #666;
}
.error-area .img-area {
  width: 150px;
  height: auto;
}
.error-area .img-area img {
  width: 100%;
  height: auto;
}
/* //[2025-08-13 KEJ] [WPM-12162] 추가 */

/* [2025-08-25 KEJ] [WPM-11947] 추가 */
.vip-gree-item label{
  padding: 10px 0px !important;
}
.vip-gree-item .page-buttons{
  margin-top: 16px !important;
}
.vip-gree-item .ui-button{
  border: none !important;
}
.vip-gree-item .type-primary{
  color: #fff !important;
}
.vip-gree-item .type-primary[disabled]{
  color: var(--gray-60) !important;
}
.vip-agree-badge-box{
  width: 100%; text-align: right;
}
.vip-agree-badge.ranking-01{
  display: inline-block;
  min-width: 30px;
  padding: 0 6px;
  box-sizing: border-box;
  font-size: 1rem; 
  line-height: 1.6rem;
  font-weight: 500;
  text-align: center;
  border-radius: 50px;
  vertical-align: top;
  color: #fff;
  background: #18a55d;
}
.vip-agree-table .wcms-list-item{
  color: #888;
}
.vip-agree-list .wcms-list-item{
  padding-left: 12px;
  text-indent: -12px;
}
.show_img_banner {
  width: 100%;
  height: auto;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 8px;
  background: url("/images/vip/images/common/w11947_btn_img.png") no-repeat right bottom / contain, #1d322d;
}
.show_img_banner a {
  display: block;
  width: 100%;
  text-decoration: none !important;
}
.show_img_pop_box {
  width: 100%;
  height: auto;
  padding: 0 16px;
  box-sizing: border-box;
}
.show_img_pop_box img {
  width: 100%;
  border-radius: 16px;
}
.show_img_badge{
  width: fit-content;
  padding: 0.4rem 0.8rem;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background-color: #97771b;
  border-radius: 12px;
}
.show_img_banner .arrow-pop{
 position: relative;
 top: 6px;
  width: 12px;
 height: 12px; 
}
/* //[2025-08-25 KEJ] [WPM-11947] 추가 */

/* [2025-09-22 kho] [WPM-12590] 별별뉴스 메인 > 상단 슬라이드 > 하나머니 아이콘 없는 버튼 추가 */
.starnews-top-slide .swiper-slide .btn-event02 {
  position: absolute;
  bottom: 24px;
  right: 20px;
  left: 20px;
  padding: 10px 0;
  border-radius: 6px;
  background: rgba(17, 17, 17, 0.8);
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

/* [2025-09-24 kho] [WPM-12628] 오늘의 용돈 일일미션 문구 수정 */
.page-money-box .mb-acco-list .mb-acco-item .mb-acco-opener-title .img-title-sub {
  width: auto;
  height: 18px;
}
.page-money-box .mb-acco-list .mb-acco-item .mb-acco-opener-title .item-title {
  margin-top: 12px;
}
.page-money-box .mb-acco-list .mb-acco-item .mb-acco-opener-title .item-title .highlight {
  color: #DB1317;
  font-weight: 700;
}
.page-money-box .mb-acco-list .mb-acco-item .mb-acco-opener-title .item-title.no-arr::after {
  display: none;
}

/* [2025-10-14 KEJ] [WPM-12730] 추가 */
.test-content img {
  display: block;
  width: 100%;
  height: auto;
}
.test-content .test-sub-title{
  font-size: 1.4rem;
  line-height: 3.2rem;
  color: #555;
}
.test-gift-banner > p{
  font-size: 1.4rem;
  color: #444;
}
.test-gift-banner .test-gift-banner-txt{
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: #555;
}
.test-gift-banner .test-gift-banner-txt span{
  color: #16815e;
}
.test-gift-banner .test-gift-banner-txt span::before{
  position: relative;
  display: inline-block;
  content: '';
  left: -2px;
  bottom: -4px;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  background: url('/images/contents/life/ic_star.svg') no-repeat 0 0 / cover;
}
.test-list{
  display: flex;
  justify-content: center;
  gap:1.2rem;
  width: 100%;
  height: auto;
}
.test-list li{
  width: 100%;
  height: auto;
  box-sizing: border-box;
  border-radius: 6px;
  box-shadow: 0 3px 5px 0 rgba(212,221,238,0.4);
  background: url('/images/contents/life/wpm12730_testlist_bg.png') no-repeat 0 0 / contain;
}
.test-list .test-list-txt{
 font-size: 1.6rem;
 line-height: 2.4rem;
 color: #333;
}
.test-link-btn {
  display: block;
  width: 70.52%;
  height: auto;
  margin:20px auto 0;
}
.test-link-btn{
  font-size: 1.5rem;
  line-height: 2.2rem;
  background-color: #455179;
  border-radius: 100px;
}
.test-content .ui-notice{
  padding-left: 21px !important;
  line-height: 16px !important;
}
.test-content .info-list{
  font-weight: 300 !important;
}

/* [2025-11-17 kho] [WPM-13097] [결제] '하나페이_법인공용카드_이용내역조회_개선' */
.check-range.type-bottom {
  position: relative;
  margin: 20px 0 -15px;
  border-bottom: none;
  border-top: 1px solid var(--gray-30);
}
.ui-button-tooltip.type-item-bottom-right {
  bottom: auto;
  top: 100%;
  margin: -5px 0 0;
  z-index: 10;
}
.ui-button-tooltip.type-item-bottom-right .ui-button-tooltip-text {
  left: auto;
  bottom: auto;
  right: 0;
  top: 0;
  transform: none;
}
.ui-button-tooltip.type-item-bottom-right .ui-button-tooltip-text::after {
  top: -8px;
  border-width: 4px 3px;
  border-top-color: transparent;
  border-bottom-color: #2c364e;
}
.ui-button-tooltip.type-item-bottom-right .ui-button-tooltip-text.tooltip-ani-on {
  animation: tooltip-move02 0.5s infinite alternate;
}
/* //[2025-11-17 kho] [WPM-13097] [결제] '하나페이_법인공용카드_이용내역조회_개선' */
/* [2025-11-21] [WPM-13030] */
.card-detail-info .section-title {
  margin-bottom: 8px;
}
.card-detail-info .info-list {
  font-size: 1.3rem;
}
.card-detail-info .wcms-data .wcms-list-item {
  margin: 5px 0;
}
.card-detail-info .wcms-data .wcms-list-item > em {
  margin-right: 2px;
  color: var(--basic);
  font-weight: 500;
  font-style: normal;
}

/* [2025-11-28 kho] [WPM-13198] VIP 등급 산정 안내 추가 */
/* 결과 안내 페이지 */
.page-vip-complete {
  width: 100%;
  margin: 120px 0;
  text-align: center;
}
.page-vip-complete .ico {
  display: inline-block;
  width: 120px;
  height: 120px;
  margin-bottom: 24px;
  background: url(/images/vip/images/common/ico_loudspeaker.png) no-repeat 50% / 100% auto;
}
.page-vip-complete .txt1 {
  font-size: 2rem;
  line-height: 2.4rem;
  font-weight: 700;
}
.page-vip-complete .txt2 {
  margin-top: 16px;
  font-size: 1.6rem;
  line-height: 2.2rem;
  color: #666;
}
/* //[2025-11-28 kho] [WPM-13198] VIP 등급 산정 안내 추가 */

/* [2025-12-04 kho] [WPM-13303] 하나페이 가입완료 페이지 숨은자산 찾기 예시 추가 */
.dormant-ex-box {
  margin-top: 3rem;
  padding: 2.4rem 1rem;
  border-radius: 1.5rem;
  text-align: center;
  background: #f4f6f8;
}
.dormant-ex-box .icon {
  display: block;
  margin: 0 auto 2rem;
  width: 16rem;
  height: 10.4rem;
  background: url(/images/illustration/img-lucky-bag.png) no-repeat center / contain;
}
.dormant-ex-box strong {
  font-weight: 700;
}
.dormant-ex-box .txt1 {
  margin-bottom: 1.2rem;
  font-size: 1.4rem;
  line-height: 2rem;
}
.dormant-ex-box .txt2 {
  font-size: 1.7rem;
  line-height: 2rem;
}
.dormant-ex-box .slide-area {
  height: 2rem;
  margin-bottom: 1.2rem;
}
.dormant-ex-box .slide-area .swiper-container {
  height: 4rem;
  overflow: hidden;
  transform: translateY(-1rem);
}
.dormant-ex-box .slide-area .txt1 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-bottom: 0;
}
.dormant-ex-box .slide-area .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* //[2025-12-04 kho] [WPM-13303] 하나페이 가입완료 페이지 숨은자산 찾기 예시 추가 */

/* [2026-01-16 kho] [혜택] 바텀시트_실적충족 그래프 개선 */
.layer-monthly-benefit-chart-wrap .section-my-record.my-record-type2 .my-record-card-item .card-item-top {
  min-height: 75px;
}
.layer-monthly-benefit-chart-wrap .section-my-record.my-record-type2 .my-record-card-item .card-item-image-wrap {
  flex: 0 0 47px;
}
.layer-monthly-benefit-chart-wrap .section-my-record.my-record-type2 .my-record-card-item .card-item-text-wrap {
  display: block;
  flex: 1 1 0;
  align-self: center;
  margin-top: 0;
  padding-right: 28px;
  background: url(/images/common/ic-button-arrow-lg.png) no-repeat 100% calc(50% + 1.5px) / 10px auto;
  overflow: hidden;
}
.layer-monthly-benefit-chart-wrap .section-my-record .my-record-card-item .card-item-name {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-bottom: 2px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}
.layer-monthly-benefit-chart-wrap .section-my-record .my-record-card-item .card-item-number {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0 7px;
  font-size: 12px;
  line-height: 17px;
  color: #888;
}
.layer-monthly-benefit-chart-wrap .section-my-record .my-record-card-item .card-item-number > span {
  position: relative;
}
.layer-monthly-benefit-chart-wrap .section-my-record .my-record-card-item .card-item-number > span:not(:last-of-type) {
  padding-right: 8px;
}
.layer-monthly-benefit-chart-wrap .section-my-record .my-record-card-item .card-item-number > span:not(:last-of-type)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 1px;
  height: 9px;
  margin-top: -5px;
  background-color: #a2a2a2;
}
/* //[2026-01-16 kho] [혜택] 바텀시트_실적충족 그래프 개선 */

/* [2026-03-04 kho] [WPM-13782] [쇼핑/보험/대출] 보험화면 개편관련 신규 디자인 요청 */
/* 보험머니 쌓기 페이지 탭 : 내 보험/보험진단/보험머니쌓기 탭 + 보험머니쌓기 탭 */
.ui-page-scroll-tap.type-insurance-tab {
  display: block;
}

/* 보험머니 쌓기 페이지 탭 : 메인 탭 : 내 보험/보험진단/보험머니쌓기 탭 */
.ui-page-scroll-tap.type-insurance-tab .ui-tab {
  background: #fff;
}
.ui-page-scroll-tap.type-insurance-tab .ui-tab-list {
  box-shadow: none;
  border-bottom: 1px solid #f5f5f5;
}
.ui-page-scroll-tap.type-insurance-tab .ui-tab-link {
  padding: 16px 0 15px;
  letter-spacing: -0.025em;
}
.ui-page-scroll-tap.type-insurance-tab .ui-tab-link.is-active {
  font-weight: 700;
}
.ui-page-scroll-tap.type-insurance-tab .ui-tab-link.is-active::after {
  height: 2px;
}

/* 보험머니 쌓기 페이지 탭 : 서브 탭 : 보험머니쌓기 탭 */
.ui-page-scroll-tap.type-insurance-tab .tab-list {
  gap: 0.4rem;
  padding: 1.6rem 2rem;
  scroll-padding: 0 2rem;
}
.ui-page-scroll-tap.type-insurance-tab .tab-list .tab-list-link {
  height: 3.6rem;
  padding: 0 1.3rem;
  color: var(--gray-80);
  font-size: 1.4rem;
  background-color: #fff;
}
.ui-page-scroll-tap.type-insurance-tab .tab-list .tab-list-link.is-active {
  border-color: var(--basic);
  background-color: var(--basic);
  color: #ffffff;
  font-weight: 700;
}
.ui-page-scroll-tap.type-insurance-tab + [data-scroll-section-name="section-car-ins01"] {
  padding-top: 1.6rem;
}
/* //[2026-03-04 kho] [WPM-13782] [쇼핑/보험/대출] 보험화면 개편관련 신규 디자인 요청 */

/* [2026-04-07 kjh] [WPM-14442] 건강보험 플로팅 버튼 */
.cont-ins-fixed {
  position: sticky;
  bottom: 0;
  z-index: 1;
  text-align: center;
  margin-inline: -2rem;
  padding-inline: 2.4rem;
  padding-block: 3rem;
  background: #ffffff;
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 0) 100%);
}
.cont-ins-fixed-txt {
  color: #888;
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.cont-ins-fixed-link {
  display: block;
  margin-top: 2rem;
  padding: 1.4rem 1rem;
  background-color: #00a49d;
  color: #fff;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
  border-radius: 0.6rem;
}
/* // [2026-04-07 kjh] [WPM-14442] 건강보험 플로팅 버튼 */

/* [2026-06-24 KEJ] [WPM-14964] */
.prd-contents .badge-use{
  display: inline-block;
  width: 4.4rem;
  height: 2rem;
  line-height: 2rem;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  color: #02809c;
  border-radius: 2rem;
  background: #ebf5f7;
}
.prd-contents .badge-use + strong{
  margin-top: 1rem;
}
/* //[2026-06-24 KEJ] [WPM-14964] */

/* [2026-07-08 KJH] [WPM-245291916] ER-38 (10-12) | 간편결제 서비스 등록 스와이퍼 페이지네이션 */
.type-pay-service .slide-card-pagination .swiper-object {
  width: 96px;
  margin-top: 15px;
}
.type-pay-service .slide-card-pagination-item {
  padding: unset;
}
.type-pay-service .slide-card-pagination-button {
  position: relative;
  width: 24px;
  height: 24px;
  border: unset;
  background-color: unset;
}
.type-pay-service .slide-card-pagination-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background-color: transparent;
  border: 1px solid #8c8c8c;
  border-radius: 50%;
  transition: background-color 0.3s;
}
.type-pay-service .slide-card-pagination-item.swiper-slide-thumb-active .slide-card-pagination-button {
  border: unset;
  background-color: unset;
}
.type-pay-service .slide-card-pagination-item.swiper-slide-thumb-active .slide-card-pagination-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background-color: var(--basic);
  border: 1px solid var(--basic);
  border-radius: 50%;
}
/* // [2026-07-08 KJH] [WPM-245291916] ER-38 (10-12) | 간편결제 서비스 등록 스와이퍼 페이지네이션 */

/* [2026-08-03] [WPM-15154] 보험머니쌓기 */
.insur-banner-carInsur1 {
  --bgColor:#dbebf6;
}
.insur-banner-healthInsur1 {
  --bgColor:#daf3d8;
}
.type-ins-moeny {
  background-color: #f4f6f8;
}
.type-ins-moeny img {
  width: 100%;
  max-width: 100%;
}
.type-ins-moeny .ui-tab {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: #fff;
}
.type-ins-moeny .ui-tab-link.is-active {
  font-weight: 700;
}
.type-ins-moeny .ui-tab-cont {
  padding-top: 54px;
}
.type-ins-moeny .ui-tab-cont.padding-top-none .filter-tab-fixed {
  top: 50px;
}
.type-ins-moeny .ui-tab-cont > h2 {
  padding: 28px 24px 4px 24px;
  background-color: #fff;
  font-size: 2.0rem;
  line-height: 2.6rem;
  font-weight: 700;
}
.type-ins-moeny .filter-tab-section {
  background-color: #fff;
}
.type-ins-moeny .filter-tab-fixed {
  position: sticky;
  top: 104px;
  left: 0;
  right: 0;
  z-index: 991;
}
.type-ins-moeny .filter-tab-list {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 16px 24px;
  background-color: #fff;
  box-sizing: border-box;
}
.type-ins-moeny .filter-tab-list button {
  flex-basis: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 14px;
  min-width: 54px;
  height: 36px;
  color: #666;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 2.0rem;
  border: 1px solid #e5e5e5;
  border-radius: 20px;
}
.type-ins-moeny .filter-tab-list button[aria-selected="true"] {
  background-color: #141e29;
  color: #fff;
  border: 0;
  font-weight: 700;
}
.type-ins-moeny .filter-tab-list button > img {
  display: inline-block;
  width: 20px;
  height: 22px;
}
.type-ins-moeny .filter-tab-panel {
  background-color: #fff;
}
.type-ins-moeny .filter-btn-accord {
  position: relative;
  max-height: 56px;
  padding-right: 42px;
  overflow: hidden;
}
.type-ins-moeny .filter-btn-accord::after {
  content: "";
  position: absolute;
  top: 0;
  right: 41px;
  width: 20px;
  height: 56px;
  background: linear-gradient(to right, transparent, #fff)
}
.type-ins-moeny .filter-btn-accord.is-open {
  max-height: 300px;
}
.type-ins-moeny .filter-btn-accord.is-open .toggle-btn {
  transform: rotate(-180deg);
}
.type-ins-moeny .filter-btn-accord.is-open .filter-btn-list {
  flex-wrap: wrap;
  gap: 8px 4px;
}
.type-ins-moeny .filter-btn-accord.is-open::after {
  content: none;
}
.type-ins-moeny .toggle-btn {
  position: absolute;
  top: 0;
  right: 10px;
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url(/images/contents/life/ic_btn_accord.webp) no-repeat center / 12px;
  /* transition: transform 0.5s; */
}
.type-ins-moeny .filter-btn-list {
  position: relative;
  display: flex;
  gap: 4px;
  padding: 0 24px 28px 24px;
  overflow-x: auto;
}
.type-ins-moeny .filter-btn-list.col4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 4px 28px 28px 28px;
}
.type-ins-moeny .filter-hot-btn {
  /* flex: 1; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.type-ins-moeny .filter-hot-btn .tab-tit {
  display: inline-block;
  margin-top: 6px;
  font-size: 1.3rem;
  line-height: 1.6rem;
  font-weight: 500;
}
.type-ins-moeny .filter-hot-btn .filter-tit {
  display: inline-block;
  margin-top: 6px;
}
.type-ins-moeny .filter-hot-btn i {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 64px;
  background-color: #f4f6f8;
  border-radius: 50%;
}
.type-ins-moeny .filter-hot-btn .badge {
  position: relative;
  display: inline-block;
  min-width: 48px;
  margin-top: -14px;
  padding: 3px 0;
  background-color: #fff;
  color: #029c94;
  font-size: 1.0rem;
  line-height: 1.4rem;
  font-weight: 700;
  text-align: center;
  box-shadow: inset 0 0 0 1px #029c94;
  border-radius: 32px;
}
.type-ins-moeny .filter-hot-btn[aria-pressed="true"] i {
  background-color: #d8f3f2;
}
.type-ins-moeny .filter-hot-btn[aria-pressed="true"] i::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(/images/contents/life/ic_filter_check.webp) no-repeat center / contain;
}
.type-ins-moeny .filter-hot-btn[aria-pressed="true"] .badge {
  background-color: #029c94;
  color: #fff;
}
.type-ins-moeny .filter-btn {
  flex: 0 0 auto;
  display: inline-block;
  min-width: 52px;
  padding: 8px 14px;
  background-color: #f4f6f8;
  font-size: 1.3rem;
  line-height: 1.6rem;
  font-weight: 500;
  border-radius: 20px;
}
.type-ins-moeny .filter-btn[aria-pressed="true"] {
  background-color: #141e29;
  color: #fff;
  font-weight: 700;
}
.type-ins-moeny .filter-tit {
  font-size: 1.3rem;
  line-height: 1.6rem;
  font-weight: 500;
}
.type-ins-moeny .filter-cont-wrap > a:first-of-type {
  margin-top: 24px;
}
.type-ins-moeny .filter-cont-wrap {
  padding: 8px 24px 58px 24px;
}
.type-ins-moeny .filter-cont-section {
  padding-top: 24px;
}
.type-ins-moeny .filter-cont-section + .filter-cont-section {
  margin-top: 24px;
}
.cont-tit-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.cont-tit-wrap .btn-link {
  position: relative;
  min-width: 113px;
  height: 34px;
  margin-top: -5px;
  background-color: #e4ebf2;
  border-radius: 4px;
  font-size: 1.4rem;
  line-height: 1.8rem;
  font-weight: 500;
}
.cont-tit-wrap .btn-link > span {
  position: absolute;
  inset: 8px;
  -webkit-animation: btn-link 4s infinite;
  animation: btn-link 4s infinite;
}
.cont-tit-wrap .btn-link > span:nth-child(2) {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}
@-webkit-keyframes btn-link {
  0% {opacity: 0; transform: scale(0.96);}
  10% {opacity: 1; transform: scale(1);}
  40% {opacity: 1; transform: scale(1);}
  50% {opacity: 0; transform: scale(0.96);}
  100% {opacity: 0; transform: scale(0.96);}
}
@keyframes btn-link {
  0% {opacity: 0; transform: scale(0.96);}
  10% {opacity: 1; transform: scale(1);}
  40% {opacity: 1; transform: scale(1);}
  50% {opacity: 0; transform: scale(0.96);}
  100% {opacity: 0; transform: scale(0.96);}
}
.type-ins-moeny .cont-tit {
  font-size: 2.0rem;
  line-height: 2.4rem;
  font-weight: 700;
}
.type-ins-moeny .cont-sub {
  margin-top: 4px;
  font-size: 1.6rem;
  line-height: 2.4rem;
}
.type-ins-moeny .txt-benefit.type-hanamoney > i {
  background: url(/images/contents/life/ic_hanamoney_logo.webp) no-repeat center / contain;
}
.type-ins-moeny .gra-bubble::before {
  background: linear-gradient(125deg, #2b77f0 2.12%, #db5fb0 87.23%);
}
.type-ins-moeny .gra-bubble::after {
  border-left-color: #db5fb0;
}
.type-ins-moeny .cont-ins-fixed {
  background: linear-gradient(0deg, #f4f6f8 0%, #f4f6f8 90%, transparent 100%);
}
.type-ins-moeny .cont-ins-box {
  margin-top: 12px;
  border-radius: 15px;
}
.type-ins-moeny .cont-ins-box .txt-area .txt-tit {
  position: relative;
  padding-right: 10px;
  color: #111;
  font-size: 16px;
  line-height: 21px;
  font-weight: 500;
}
.type-ins-moeny .cont-ins-box .txt-area .txt-tit > strong > span {
  display: inline-block;
  vertical-align: middle;
}
.type-ins-moeny .cont-ins-box .txt-area .txt-tit > strong > span:first-child {
  margin-right: 2px;
}
.type-ins-moeny .cont-ins-box .txt-area .sub-txt {
  display: block;
  margin-top: 4px;
  color: #888;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
}
.type-ins-moeny .border-clip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 15px;
  overflow: hidden;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.type-ins-moeny .border-clip::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vw;
  margin: -50vw 0 0 -50vw;
  background: conic-gradient(#79f8b1 0%, #76b7c6 15%, #700dff 40%, #e01cfe 70%, #76b7c6 90%, #79f8b1 100%);
  -webkit-animation: border-clip 3s linear infinite;
  animation: border-clip 3s linear infinite;
}
.type-ins-moeny .border-clip::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border-radius: 13px;
  background-color: #fff;
}
@-webkit-keyframes border-clip {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes border-clip {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.type-ins-moeny .isur-banner-ad {
  margin-top: 12px;
}
.type-ins-moeny .isur-banner-ad > i {
  position: absolute;
  top: 50%;
  left: 2rem;
  width: 7.2rem;
  height: 7.2rem;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 7.2rem auto;
  transform: translateY(-50%);
}
.type-ins-moeny .nodata {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 32px;
  text-align: center;
}
.type-ins-moeny .nodata > i {
  display: inline-block;
  width: 56px;
  height: 56px;
}
.type-ins-moeny .nodata > strong {
  display: inline-block;
  margin: 16px 0 4px 0;
  font-size: 1.6rem;
  line-height: 2.2rem;
  font-weight: 700;
}
.type-ins-moeny .nodata > p {
  font-size: 1.5rem;
  line-height: 2.0rem;
}
.type-ins-moeny .nodata > button {
  display: inline-block;
  min-width: 83px;
  height: 36px;
  margin-top: 12px;
  padding: 8px 16px;
  background-color: #466990;
  color: #fff;
  font-size: 1.4rem;
  line-height: 2.0rem;
  font-weight: 500;
  border-radius: 24px;
}

/* [2026-09-28 KSH] [WPM-] 카드이용내역 > 할부스케쥴 상세내역 레이어 추가 */
.installment-plan .form-detail-head p {
  font-weight: 300;
  font-size: 13px;
  color: #888;
  line-height: 17px;
}
.installment-plan .ui-layer__table {
  overflow-x: scroll;
  display: flex;
  border-bottom: 1px solid #e5e5e5;
}
.installment-plan .ui-layer__table table tr th {
  height:50px;
  background-color: #f8f8f8;
  font-weight: 400;
  font-size: 13px;
  color: #888;
  text-align: center;
}
.installment-plan .ui-layer__table table tr td {
  height: 50px;
  padding-right: 15px;
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  background-color: #fff;
  font-weight: 400;
  font-size: 13px;
  color: #111;
  line-height: 18px;
  text-align: right;
}
.installment-plan .ui-layer__table table tr td:nth-child(1),
.installment-plan .ui-layer__table table tr td:nth-child(2) {
  padding-right: 0;
  text-align: center;
}
.installment-plan .ui-layer__table table tr td:nth-child(5),
.installment-plan .ui-layer__table table tr:last-child th:last-child {
  border-right: none;
}
.installment-plan .ui-layer__table .text-right {
  padding-right: 15px;
  border-left: 1px solid #e5e5e5;
  text-align: right;
}