@charset "utf-8";

@import url("/v1/css/daterangepicker-917b4016a40721a9ea04ce7b74a08658.css");
@import url("/v1/css/font/font-698588d2e1e20aaf01684d13ffe059fa.css");
@import url("/v1/css/common/setting-058c6f0c38c51d822b4bf9c0697e2e3f.css");
@import url("/v1/css/common/bottomsheet-0c1a2c081df6696641a42efb9ecd1624.css");

.toggleButton {
  width: 40px;
  height: 24px;
  display: block;
  position: relative;
  background: var(--gray-color2);
  border-radius: 40px;
}

.toggleButton .toggleItem {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--white-color);
}

.toggleCheck:checked ~ .toggleButton {
  background: var(--blue-color);
}

.toggleCheck:checked ~ .toggleButton .toggleItem {
  left: 18px;
  background: var(--white-color);
}

.toggleButton,
.toggleItem {
  transition: all 0.2s ease-in;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  line-height: 56px;
  border-radius: 16px;
  font-size: 16px;
}

.btn-radius {
  border-radius: 1.6rem;
}

.btn-radius.btn-medium {
  border-radius: 12px;
}

.btn-large {
  height: 5.6rem;
  line-height: 5.6rem;
}

.btn-medium {
  height: 4.8rem;
  line-height: 4.8rem;
}

.btn-primary {
  color: var(--white-color);
  background-color: var(--blue-color);
  width: 100%;
}

.btn-primary:active {
  background-color: color-mix(in srgb, var(--main-color) 85%, black 15%);
}

.btn-primary:disabled,
.btn-primary.loading {
  background-color: color-mix(in srgb, var(--main-color) 35%, white 65%);
}

.btn-primary.loading::before {
  background-image: url(/v1/images/ic-spinner-w-820bd055493f93f9e3ec69a17c6c2b5d.svg);
}

.btn-primary.shadow {
  box-shadow: 0px 2px 2px color-mix(in srgb, var(--main-color) 25%, transparent),
    0px 6px 4px color-mix(in srgb, var(--main-color) 15%, transparent);
}

.btn-soft {
  color: var(--blue-color);
  background-color: var(--white-color1);
  width: 100%;
}

.btn-soft:active {
  background-color: color-mix(in srgb, var(--main-color) 35%, white 65%);
}

.btn-soft:disabled,
.btn-soft.loading {
  background-color: var(--white-color2);
}

.btn-soft.loading::before {
  background-image: url(/v1/images/ic-spinner-b-130217a9a6754a143cb491a7a44d4e76.svg);
}

.btn-primary-gradient {
  color: var(--white-color);
  width: 100%;
  padding: 0 1rem;
  background: var(--main-gradient);
  box-shadow: 0px 2px 2px color-mix(in srgb, var(--main-color) 25%, transparent),
    0px 6px 4px color-mix(in srgb, var(--main-color) 15%, transparent);
}

.btn-primary-gradient:active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--main-color) 85%, black 15%) 0%, var(--main-gradient-end) 100%);
}

.btn-attend-complete {
  width: 100%;
  padding: 0 1rem;
  background: color-mix(in srgb, var(--main-color) 35%, white 65%);
  color: var(--white-color);
  cursor: default;
}

.box1 {
  color: var(--blue-color);
  background: var(--white-color1);
  font-size: 12px;
  height: 34px;
  line-height: 34px;
  border-radius: 8px;
  display: inline-block;
  padding: 0 16px;
  margin-bottom: 24px;
}

.box2 {
  color: var(--blue-color);
  background: var(--white-color2);
  font-size: 16px;
  min-height: 56px;
  line-height: 1.2;
  border-radius: 12px;
  display: inline-block;
  padding: 18px 24px;
  box-sizing: border-box;
  margin: 0 auto;
}

/* 메시지 팝업 */
.pop-message {
  position: fixed;
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 0%;
  background: rgba(6, 10, 29, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.pop-message ~ .pop-message {
  background: none;
  backdrop-filter: none;
}

.pop-message .message-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 24px 20px;
  background: var(--white-color);
  box-shadow: 0px 0px 20px rgba(13, 10, 25, 0.06);
  border-radius: 20px;
  width: 100%;
  max-width: 327px;
}

.pop-message .message-box h2 {
  font-weight: 700;
  font-size: 18px;
  line-height: 120%;
  text-align: center;
  letter-spacing: -0.6px;
  color: var(--gray-color5);
}

.pop-message .message-box p {
  font-size: 16px;
  color: var(--gray-color4);
  margin-bottom: 24px;
  text-align: center;
  letter-spacing: -0.3px;
}

.pop-message .message-box p.c-black.bold {
  font-size: 18px !important;
}

.pop-loading {
  position: fixed;
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 0%;
  background: rgba(6, 10, 29, 0.6);
  backdrop-filter: blur(10px);
  padding: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pop-loading::before {
  content: "";
  width: 40px;
  height: 40px;
  display: inline-block;
  background: url(/v1/images/ic-spinner-w-820bd055493f93f9e3ec69a17c6c2b5d.svg) no-repeat;
  background-size: 100% 100%;
  animation: rotate 0.5s infinite linear;
}

/* 스플래시 */
/*.splash {background: #1A294F;}*/
.splash {
  background: var(--blue-color);
}

.logo-splash {
  width: 80%;
  max-width: 180px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 본인인증 */
.input-wrap,
.select-wrap {
  margin-bottom: 24px;
}

.input-wrap label {
  margin-bottom: 8px;
  display: block;
  font-size: 14px;
}

.select-wrap label {
  margin-bottom: 8px;
  display: block;
  font-size: 14px;
  color: var(--black-color);
}

.regnum-wrap {
  border: 1px solid var(--gray-color2);
  height: 56px;
  line-height: 48px;
  border-radius: 16px;
  background: var(--white-color);
  width: auto;
  box-sizing: border-box;
  padding: 0;
  color: var(--gray-color5);
  vertical-align: middle;
  font-size: 16px;
  letter-spacing: -0.3px;
  font-weight: 600;
}

.regnum-wrap.active {
  border: 1.5px solid var(--gray-color5);
}

.regnum-wrap input[type="text"],
.regnum-wrap input[type="number"] {
  border: none;
  height: 52px;
  line-height: 52px;
  vertical-align: top;
}

.regnum-wrap #inp-regnum1 {
  width: 100px;
  letter-spacing: 1px;
  padding-right: 0;
}

.regnum-wrap #inp-regnum2 {
  width: 30px;
  letter-spacing: 1px;
  padding-right: 0;
}

.regnum-wrap .txt-secret {
  letter-spacing: 2px;
  font-size: 11px;
}

.input-certinum {
  position: relative;
}

.input-certinum .certinum {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-color4);
  font-size: 14px;
}

.text-wrap {
  text-align: center;
  padding-top: 8px;
}

.text-wrap p {
  font-size: 14px;
  letter-spacing: -0.3px;
  line-height: 1.2;
  color: var(--gray-color5);
  display: inline-block;
}

.text-wrap .btn-text {
  display: inline-block;
  width: auto;
  color: var(--blue-color);
  font-weight: 600;
  letter-spacing: -0.3px;
  font-size: 14px;
  padding: 0;
}

.card-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.card-list li .btn-card {
  text-align: center;
  display: block;
  background: var(--gray-color6);
  border-radius: 12px;
  width: 100%;
  height: 100%;
  padding: 10.5px;
}

.card-list li .btn-card img {
  width: 42px;
  height: 42px;
  margin-bottom: 8px;
}

.card-list li .btn-card p {
  display: block;
  font-size: 14px;
  line-height: 120%;
  text-align: center;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
}

.qrpay-wrap {
  text-align: center;
}

.qrpay-wrap .qr {
  width: 167px;
}

.qrpay-wrap .time {
  color: var(--blue-color);
  font-size: 16px;
  font-weight: 700;
  margin-top: -12px;
  margin-bottom: 62px;
}

.card-slider {
  margin: 0 -24px 48px;
}

.card-slider li {
  padding: 0 7.5px;
  box-sizing: border-box;
}

.card-slider .card-item {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 0;
  padding-top: 58.3%;
  position: relative;
}

.card-slider .card-item.bg1 {
  background-image: url(/v1/images/bg-card1-b2a35246de1ca013867670ee5eed461a.jpg);
}

.card-slider .card-item.bg2 {
  background-image: url(/v1/images/bg-card2-224ac6c030eacfe8c9c717b4724948d9.jpg);
}

.card-slider .card-item h3 {
  position: absolute;
  top: 19px;
  left: 19px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--white-color);
}

.card-slider .card-item .logo {
  color: var(--white-color);
  position: absolute;
  top: 25px;
  right: 16px;
}

.card-slider .card-item .price {
  color: var(--white-color);
  font-size: 20px;
  position: absolute;
  bottom: 23px;
  left: 23px;
}

.card-slider .card-item .price strong {
  margin-right: 7px;
  display: inline-block;
}

.card-slider .slick-dots {
  position: absolute;
  bottom: -24px;
  display: block;
  width: 100%;
  padding: 0;
  margin-top: 1rem;
  list-style: none;
  text-align: center;
}

.btn-border {
  background: var(--white-color);
  border: 1px solid #dbe0de;
  box-sizing: border-box;
  border-radius: 12px;
  width: 100%;
  height: 56px;
  line-height: 54px;
  font-size: 16px;
  font-weight: 700;
  display: block;
}

.btn-border img {
  width: 35px;
  margin-right: 16px;
  vertical-align: middle;
}

.btn-border span {
  vertical-align: middle;
  display: inline-block;
  margin-bottom: 2px;
}

/* Header Sheet */
.headersheet {
  position: fixed;
  top: 56px;
  left: 0;
  width: 100%;
  background: var(--white-color);
  border-radius: 0 0 20px 20px;
  box-shadow: 0px 15px 20px rgba(13, 10, 25, 0.06);
  max-height: 0;
  box-sizing: border-box;
  z-index: 9;
  transition: max-height 0.5s ease;
  overflow: hidden;
}

.headersheet.show {
  max-height: 100%;
  transition: max-height 1s ease;
}

.headersheet .inner {
  padding: 24px 20px 40px;
  overflow: auto;
  max-height: 120vw;
}

.dim2 {
  position: fixed;
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 0%;
  background: rgba(6, 10, 29, 0.6);
  backdrop-filter: blur(10px);
  z-index: 8;
  opacity: 0;
  transition: all 0.5s;
  visibility: hidden;
}

.headersheet.show ~ .dim2 {
  opacity: 1;
  visibility: visible;
}

.headersheet .inner .thumb-list {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* 이용약관 */
.txt-date {
  color: var(--gray-color4);
  font-size: 16px;
  letter-spacing: -0.3px;
  line-height: 1.2;
  text-align: left;
}

.terms-item h4 {
  color: #333d4b;
  font-size: 16px;
  letter-spacing: -0.3px;
  line-height: 1.5;
  font-weight: 700;
  margin-bottom: 16px;
}

.terms-item h4 strong {
  color: var(--blue-color);
  margin-right: 8px;
}

.terms-box {
  padding: 16px;
  background: var(--gray-color0);
  border-radius: 10px;
  line-height: 24px;
  color: var(--gray-color5);
  margin-bottom: 32px;
}

.txt-para {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
}

.terms-bt {
  padding: 20px 24px 0;
  padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
}

/* 로그인 */
.wrap.login {
  background: var(--gray-color5);
}

.wrap.login header {
  background: transparent;
}

.wrap.login header .btn-prev {
  background-image: url(/v1/images/ic-prev-arrow-w-09c9ae4e080c25bff8bb684b488ac64d.svg);
}

.pinnum-wrap {
  text-align: center;
  position: relative;
  height: calc(100% - 272px);
}

.pinnum-wrap .inner {
  position: absolute;
  top: calc(50% - 100px);
  left: 0;
  width: 100%;
}

.pinnum-wrap h3 {
  color: var(--white-color);
  margin-bottom: 8px;
}

.pinnum-wrap .txt1 {
  color: var(--gray-color4);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  margin-bottom: 24px;
}

.pinnum-wrap .txt1.error {
  color: var(--red-color);
  border: none !important;
}

.pinnum-wrap .txt2 {
  position: absolute;
  bottom: 32px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 14px;
  line-height: 140%;
  color: var(--gray-color4);
  text-decoration: underline;
  display: block;
}

.pinnum-wrap .pinnum {
  font-size: 0;
}

.pinnum-wrap .pinnum li {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 8px;
  border-radius: 15px;
  background: var(--gray-color3);
  opacity: 0.3;
}

.pinnum-wrap .pinnum li.active {
  background: var(--blue-color);
  opacity: 1;
}

.keypad-wrap {
  height: 272px;
  background: var(--white-color);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 12px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.keypad-wrap button {
  font-size: 24px;
  font-weight: 500;
}

.keypad-wrap button:nth-last-of-type(2) {
  grid-column: 2 / 2;
  grid-row: 4 / 4;
}

.keypad-wrap button.btn-del {
  font-size: 0;
  background: url(/v1/images/ic-key-del-2714eff937aa433a543f59a55770c27b.svg) no-repeat center;
  background-size: 28px 28px;
  grid-column: 3 / 3;
  grid-row: 4 / 4;
}

/* 회원가입 */
.radio-wrap {
  display: block;
  font-size: 0;
}

.radio-wrap li {
  display: block;
  margin-bottom: 16px;
}

.radio-wrap li input[type="radio"] {
  display: none;
}

.radio-wrap li input[type="radio"] ~ label {
  display: block;
  border: 1px solid var(--gray-color2);
  box-sizing: border-box;
  border-radius: 16px;
  padding: 16px;
  text-align: left;
  min-height: 80px;
  position: relative;
  font-size: 0;
}

.radio-wrap li input[type="radio"] ~ label i {
  display: inline-block;
  width: 48px;
  height: 48px;
  margin-right: 16px;
  border-radius: 12px;
  background: var(--gray-color0);
  border: none;
  vertical-align: middle;
  overflow: hidden;
}

.radio-wrap li input[type="radio"] ~ label dl {
  display: inline-block;
  vertical-align: top;
  margin-top: 4px;
}

.radio-wrap li input[type="radio"] ~ label dt {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--gray-color5);
  letter-spacing: -0.6px;
  line-height: 1.2;
}

.radio-wrap li input[type="radio"] ~ label dd {
  display: block;
  font-size: 14px;
  color: var(--gray-color3);
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.radio-wrap li input[type="radio"] ~ label::after {
  display: block;
  content: "";
  width: 24px;
  height: 24px;
  background: url(/v1/images/ic-radio-off-aecd2a9c1dadac3c6b401b54c4214797.svg) no-repeat center;
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}

.radio-wrap li input[type="radio"]:checked ~ label {
  background: var(--white-color1);
  border-color: var(--white-color1);
}

.radio-wrap li input[type="radio"]:checked ~ label::after {
  background-image: url(/v1/images/ic-radio-on-2048bbf21e6c2676e022ef3aec1d1db9.svg);
}

.radio-wrap li input[type="radio"] ~ label .tit {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  color: var(--gray-color5);
  letter-spacing: -0.6px;
  line-height: 1.2;
}

.radio-wrap li input[type="radio"] ~ label .info {
  height: 34px;
  padding: 8px 16px;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 8px;
  background-color: var(--white-color1);
  font-size: 12px;
  line-height: 1.5;
  color: var(--blue-color);
  box-sizing: border-box;
  font-weight: 600;
  z-index: 2;
}

.joincomplete-wrap {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.joincomplete-wrap > div {
  flex: 0;
}

.joincomplete-wrap .img {
  background: url(/v1/images/ic-joincomplete1-824fdf03d645fe46ba1e08f644335c26.svg) no-repeat 50% 50% / contain;
  height: 40vh;
}

.joincomplete-wrap button {
  flex: 0;
}

/* 온보딩 */
.wrap.full.scroll {
  height: 100%;
  padding-top: 56px;
  min-width: 320px;
  overflow: hidden;
  position: relative;
  background: var(--white-color);
  letter-spacing: -0.3px;
  padding-bottom: env(safe-area-inset-bottom);
}

.wrap.full.scroll .flex-1 {
  padding-bottom: 40px;
}

.wrap.full.scroll .flex-0 {
  min-height: 72px;
}

.onboarding-wrap {
  text-align: center;
  width: 100%;
}

.onboarding-wrap .slickWrap {
  position: relative;
  padding-top: 70px;
}

.onboarding-wrap .slickWrap::before {
  content: "";
  width: 100%;
  height: 450px;
  position: absolute;
  top: 0;
  left: 0;
}

/* .onboarding-wrap .slick-list {overflow:visible} */
.onboarding-wrap .slickWrap .textArea {
  min-height: 118px;
  position: relative;
  z-index: 10;
  width: 100%;
  margin-bottom: 36px;
}

.onboarding-wrap .slickWrap.first::before {
  background: var(--red-color);
}

.onboarding-wrap .slickWrap.second::before {
  background: var(--blue-color);
}

.onboarding-wrap .slickWrap.third::before {
  background: #22c36b;
}

.onboarding-wrap .slickWrap.fourth::before {
  background: #facc15;
}

.onboarding-wrap .slickWrap .title {
  font-weight: 700;
  font-size: 30px;
  line-height: 120%;
  text-align: center;
  letter-spacing: -0.6px;
  color: var(--white-color);
  margin-bottom: 10px;
}

.onboarding-wrap .slickWrap .introText {
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  text-align: center;
  letter-spacing: -0.5px;
  color: var(--white-color);
}

.onboarding-wrap .slickWrap .imgWrap {
  position: relative;
  z-index: 10;
  margin: 0 auto 0;
  max-width: 200px;
  max-height: 400px;
}

.onboarding-wrap .slickWrap .imgWrap img {
  width: 100%;
  height: 100%;
}

.slick-dots {
  position: initial;
  display: block;
  width: 100%;
  padding: 0;
  margin-top: 1rem;
  list-style: none;
  text-align: center;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 4px;
  padding: 0;
  cursor: pointer;
}

.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 8px;
  height: 8px;
  cursor: pointer;
  border: 0;
  outline: none;
  background: var(--gray-color2);
  border-radius: 8px;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none;
}

.slick-dots li.slick-active button {
  background: var(--main-color);
}

.flex-0.onboarding {
  position: sticky;
  bottom: 0;
  padding: 0 1rem;
}

.flex-0.onboarding .btn-primary {
  background-color: var(--main-color);
}

/* 로딩 스피너 */
.loadingWrap {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1000;
}

.loadingWrap.show {
  display: block;
}

.loadingDim {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(6, 10, 29, 0.2);
  width: 100%;
  height: 100vh;
  z-index: 900;
}

.loadingWrap.show + .loadingDim {
  display: block;
}

.loadingWrap .imgWrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 35px;
  height: 35px;
}

.loadingWrap .imgWrap img {
  width: 100%;
  height: 100%;
  animation: loading 1000ms linear infinite;
}

@media screen and (max-width: 375px) {
  .onboarding-wrap .slickWrap::before {
    height: 350px;
  }

  .onboarding-wrap .slickWrap .imgWrap {
    width: 150px;
  }
}

@keyframes loading {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 리스트 */
.list-a-wrap {
  display: block;
}

.list-a-wrap li {
  display: block;
  position: relative;
  padding-left: 56px;
  height: 48px;
  margin-bottom: 24px;
}

.list-a-wrap li:last-child {
  magin-bottom: 0;
}

.list-a-wrap .ico {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 4px;
  position: absolute;
  top: 0;
  left: 0;
}

.list-a-wrap h4 {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
  margin-bottom: 4px;
}

.list-a-wrap p {
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
}

.list-b-wrap {
  display: block;
}

.list-b-wrap li {
  display: block;
}

.list-b-wrap li a {
  display: block;
  position: relative;
  padding: 17px 20px 17px 82px;
}

.list-b-wrap li a:active {
  background: var(--navy-overlay);
}

.list-b-wrap .ico {
  width: 46px;
  height: 46px;
  border: none;
  position: absolute;
  top: 17px;
  left: 20px;
  border-radius: 23px;
}

.list-b-wrap h4 {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
  margin-bottom: 4px;
}

.list-b-wrap p {
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
}

.list-c-wrap {
  display: block;
  background: var(--white-color);
  box-shadow: 0px 0px 2px rgba(43, 54, 70, 0.06),
    0px 2px 8px rgba(43, 54, 70, 0.04);
  border: 1px solid var(--gray-color2);
  border-radius: 16px;
  margin-bottom: 34px;
}

.list-c-wrap li {
  display: block;
  border-bottom: 1px solid var(--gray-color0);
}

.list-c-wrap.borderNone {
  border: none;
  box-shadow: 0px 4px 12px var(--navy-overlay);
}

.list-c-wrap.borderNone li {
  border: none;
}

.list-c-wrap li:last-child {
  border-bottom: none;
}

.list-c-wrap li a {
  display: grid;
  position: relative;
  padding: 19px 37px 19px 20px;
  background: url(/v1/images/ic-arrow-right-g-f71c78fb0459d2630e715361f23ae095.svg) no-repeat calc(100% - 13px)
    50%;
  background-size: 24px 24px;
  grid-template-columns: 58px minmax(0, 100%) minmax(0, auto);
  align-items: center;
}

.list-c-wrap li a:active {
  background-color: var(--navy-overlay);
}

.list-c-wrap .ico {
  width: 42px;
  height: 42px;
  border: none;
  padding-right: 16px;
}

.list-c-wrap.etc .tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.list-c-wrap .tit h4 {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
  margin-bottom: 4px;
}

.list-c-wrap.borderNone .tit h4 {
  margin-bottom: 0;
}

.list-c-wrap .tit p {
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
}

.list-c-wrap .badge {
  font-size: 12px;
  line-height: 150%;
  letter-spacing: -0.3px;
  background: var(--white-color1);
  color: var(--main-color);
  box-sizing: border-box;
  border-radius: 50px;
  padding: 2px 6px;
  font-weight: 600;
  margin-left: 8px;
}

.list-c-wrap .badge.c1 {
  background: var(--white-color1);
  color: var(--main-color);
}

.list-c-wrap .badge.c2 {
  background: var(--main-color);
  color: var(--white-color);
}

.list-d-wrap {
  display: block;
  margin: 0 -24px;
  border-bottom: 1px solid var(--gray-color0);
}

.list-d-wrap li {
  display: block;
}

.list-d-wrap li:last-child {
  border-bottom: none;
}

.list-d-wrap li a {
  display: grid;
  position: relative;
  padding: 19px 20px;
  grid-template-columns: 58px minmax(0, 100%) minmax(0, auto);
  align-items: center;
}

.list-d-wrap li a:active {
  background-color: var(--white-color1);
}

.list-d-wrap .ico {
  width: 42px;
  height: 42px;
  border: none;
  padding-right: 16px;
}

.list-d-wrap .tit {
}

.list-d-wrap .tit h4 {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
  margin-bottom: 4px;
}

.list-d-wrap .tit p {
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
}

.list-d-wrap .badge {
  font-size: 12px;
  line-height: 150%;
  letter-spacing: -0.3px;
  background: var(--white-color1);
  color: var(--main-color);
  box-sizing: border-box;
  border-radius: 50px;
  padding: 2px 6px;
  font-weight: 600;
  margin-left: 8px;
}

.list-d-wrap .badge.c1 {
  background: var(--white-color1);
  color: var(--main-color);
}

.list-d-wrap .badge.c2 {
  background: var(--main-color);
  color: var(--white-color);
}

.list-d-wrap li input[type="radio"] {
  display: none;
}

.list-d-wrap li input[type="radio"] ~ label {
  display: block;
  box-sizing: border-box;
  padding: 16px;
  text-align: left;
  min-height: 80px;
  position: relative;
  font-size: 0;
}

.list-d-wrap li input[type="radio"] ~ label:active,
.payitem:active {
  background-color: var(--navy-overlay);
}

.list-d-wrap li input[type="radio"] ~ label i {
  display: inline-block;
  width: 48px;
  height: 48px;
  margin-right: 16px;
  border-radius: 12px;
  background: var(--gray-color0);
  border: none;
  vertical-align: middle;
  overflow: hidden;
}

.list-d-wrap li input[type="radio"] ~ label dl {
  display: inline-block;
  vertical-align: top;
  margin-top: 4px;
}

.list-d-wrap li input[type="radio"] ~ label dt {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--gray-color5);
  letter-spacing: -0.6px;
  line-height: 1.2;
}

.list-d-wrap li input[type="radio"] ~ label dd {
  display: block;
  font-size: 14px;
  color: var(--gray-color3);
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.list-d-wrap li input[type="radio"] ~ label::after {
  display: block;
  content: "";
  width: 24px;
  height: 24px;
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}

.list-d-wrap li input[type="radio"]:checked ~ label {
  background: var(--white-color1);
}

.list-d-wrap li input[type="radio"]:checked ~ label::after {
  background-image: url(/v1/images/ic-radio-on2-eb4834060cca97f7515471af9892c909.svg);
}

.list-d-wrap li input[type="radio"] ~ label .tit {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  color: var(--gray-color5);
  letter-spacing: -0.6px;
  line-height: 1.2;
}

.list-d-wrap li input[type="radio"] ~ label .info,
.payitem .info {
  height: 34px;
  padding: 8px 16px;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 8px;
  background-color: var(--white-color1);
  font-size: 12px;
  line-height: 1.5;
  color: var(--blue-color);
  box-sizing: border-box;
  font-weight: 600;
  z-index: 2;
}

.list-d-wrap li input[type="radio"] ~ label .info2,
.payitem .info2 {
  height: 23px;
  padding: 0 6px;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 23px;
  background-color: var(--white-color1);
  font-size: 12px;
  line-height: 23px;
  color: var(--blue-color);
  box-sizing: border-box;
  font-weight: 600;
  z-index: 2;
}

.list-e-wrap {
  display: block;
  margin: 0 -24px;
  border-bottom: 1px solid var(--gray-color0);
}

.list-e-wrap li {
  display: block;
}

.list-e-wrap li:last-child {
  border-bottom: none;
}

.list-e-wrap li input[type="radio"] {
  display: none;
}

.list-e-wrap li input[type="radio"] ~ label {
  display: block;
  box-sizing: border-box;
  padding: 16px 24px;
  text-align: left;
  min-height: 50px;
  position: relative;
  font-size: 16px;
  color: var(--gray-color5);
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.list-e-wrap li input[type="radio"] ~ label:active {
  background-color: var(--navy-overlay);
}

.list-e-wrap li input[type="radio"] ~ label::after {
  display: block;
  content: "";
  width: 24px;
  height: 24px;
  background: url("") no-repeat center;
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}

.list-e-wrap li input[type="radio"]:checked ~ label {
  background: var(--white-color1);
  color: var(--blue-color);
}

.list-e-wrap li input[type="radio"]:checked ~ label::after {
  background-image: url(/v1/images/ic-radio-on2-eb4834060cca97f7515471af9892c909.svg);
}

.list-e-wrap li input[type="radio"] ~ label h4 {
  font-weight: 400;
}

.list-e-wrap li input[type="radio"]:checked ~ label h4 {
  font-weight: 600;
}

.bo-bono {
  border-bottom: none !important;
}

.list-f-wrap {
  border-bottom: 1px solid var(--gray-color0);
  padding-bottom: 8px;
}

.list-f-wrap li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list-f-wrap li p {
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
}

.list-g-wrap {
  display: block;
}

.list-g-wrap li {
  display: block;
  border-radius: 16px;
  box-shadow: 0px 0px 2px rgba(43, 54, 70, 0.06),
    0px 2px 8px rgba(43, 54, 70, 0.04);
  margin-bottom: 8px;
  border: 1px solid var(--gray-color2);
}

.list-g-wrap li a {
  display: block;
  position: relative;
  padding: 17px 20px 17px 82px;
}

.list-g-wrap li a:active {
  background: var(--navy-overlay);
}

.list-g-wrap .ico {
  width: 46px;
  height: 46px;
  border: none;
  position: absolute;
  top: 17px;
  left: 20px;
  border-radius: 23px;
}

.list-g-wrap h4 {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
  margin-bottom: 4px;
}

.list-g-wrap p {
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
}

/* 메인 */
.main-wrap {
  padding: 20px;
  height: 100%;
  overflow: auto;
  background: var(--white-color);
}

.main-wrap .header {
  text-align: left;
  height: 74px;
  padding: 32px 0 8px;
  display: block;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.main-wrap .header h1 {
  font-weight: 800;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.6px;
  margin-left: 4px;
  float: left;
}

.main-wrap .header .i-badge {
  float: right;
  width: 40px;
  height: 40px;
  background: url(../images/ic-notice.svg) no-repeat;
  background-size: 100% 100%;
  border-radius: 8px;
}

.main-wrap .header .i-badge.on {
  background-image: url(../images/ic-notice-on.svg);
}

.main-wrap .header .i-badge:active {
  background-color: var(--navy-overlay);
}

.main-wrap .moneycard-wrap {
  background: var(--main-gradient);
  box-shadow: 0px 2px 2px color-mix(in srgb, var(--main-color) 25%, transparent),
    0px 6px 4px color-mix(in srgb, var(--main-color) 15%, transparent);
  border-radius: 12px;
  height: 168px;
  box-sizing: border-box;
  color: var(--white-color);
  padding: 22px 20px;
  position: relative;
  margin-bottom: 8px;
}

.main-wrap .moneycard-wrap h2 {
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 6px;
}

.main-wrap .moneycard-wrap p {
  font-weight: 700;
  font-size: 28px;
  line-height: 28px;
  letter-spacing: -0.6px;
  color: var(--white-color);
  margin-bottom: 32px;
}

.main-wrap .moneycard-wrap p strong {
  margin-right: -4px;
  font-weight: 800;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.6px;
  color: var(--white-color);
}

.main-wrap .moneycard-wrap .btn-more {
  position: absolute;
  top: 20px;
  right: 18px;
  width: 24px;
  height: 24px;
  background: url(/v1/images/ic-more-0ad865d18cf44567ac6c0a5872722f19.svg) no-repeat;
  background-size: 100% 100%;
}

.main-wrap .moneycard-wrap .moneycard-foot {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 52px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 0 0 12px 12px;
}

.main-wrap .moneycard-wrap .moneycard-foot select,
.main-wrap .moneycard-wrap .moneycard-foot .select {
  min-width: 140px;
  width: auto;
  height: 100%;
  background: url(/v1/images/ic-select-arrow-w-aea5fc3a386d7c06e9f548ce0fa3effe.svg) no-repeat calc(100% - 17px)
    50% transparent;
  border: none;
  color: var(--white-color);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  float: left;
  white-space: nowrap;
}

.main-wrap .moneycard-wrap .moneycard-foot select:active,
.main-wrap .moneycard-wrap .moneycard-foot .select:active {
  background-color: rgba(16, 25, 45, 0.2);
}

.main-wrap .moneycard-wrap .moneycard-foot .btn-add {
  width: auto;
  height: 100%;
  background: url(/v1/images/ic-add-w-62cc97fa426ca352594d55cca5abba65.svg) no-repeat 0 50% transparent;
  background-size: 16px 16px;
  border: none;
  color: var(--white-color);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  float: left;
  white-space: nowrap;
  margin-left: 20px;
  padding-left: 20px;
}

.main-wrap .moneycard-wrap .moneycard-foot .btn-wrap {
  float: right;
  width: auto;
  padding-right: 8px;
  font-size: 0;
}

.main-wrap .moneycard-wrap .moneycard-foot .btn-wrap button {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--white-color);
  padding: 0 16px;
  cursor: pointer;
  height: 52px;
  line-height: 52px;
  position: relative;
  margin-right: -1px;
}

.main-wrap .moneycard-wrap .moneycard-foot .btn-wrap button:active {
  background-color: rgba(16, 25, 45, 0.2);
}

.main-wrap .moneycard-wrap .moneycard-foot .btn-wrap button::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  height: 14px;
  width: 1px;
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%);
}

.main-wrap
  .moneycard-wrap
  .moneycard-foot
  .btn-wrap
  button:nth-last-of-type(1)::after {
  display: none;
}

.main-wrap .quick-wrap {
  display: grid;
  height: 84px;
  margin-bottom: 8px;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 4px;
  align-items: stretch;
  justify-items: stretch;
}

.main-wrap .quick-wrap li {
  text-align: center;
  position: relative;
}

.main-wrap .quick-wrap li:not(:last-child)::after {
  content: "";
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: block;
  width: 1px;
  height: 32px;
  position: absolute;
  background: var(--gray-color2);
}

.main-wrap .quick-wrap li a {
  display: block;
  font-size: 0;
  height: 100%;
  border-radius: 8px;
}

.main-wrap .quick-wrap li a:active {
  background: var(--navy-overlay);
}

.main-wrap .quick-wrap li i {
  width: 24px;
  height: 24px;
  display: inline-block;
  margin-bottom: 8px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 16px;
}

.main-wrap .quick-wrap li .i-history {
  background-image: url(/v1/images/ic-quick-history-63261b394ab4ff09cd8565911ec3db1e.svg);
}

.main-wrap .quick-wrap li .i-coupon {
  background-image: url(/v1/images/ic-quick-coupon-36782e62f5e77e28a00cf1c82e6eb48d.svg);
}

.main-wrap .quick-wrap li .i-cashback {
  background-image: url(/v1/images/ic-quick-cashback-b045b7ed56c2f5c63e230dd44a7add04.svg);
}

.main-wrap .quick-wrap li .i-benefit {
  background-image: url(/v1/images/ic-quick-benefit-5e5f7253c6236f85e1bb0e16b12c5cac.svg);
}

.main-wrap .quick-wrap li p {
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  letter-spacing: -0.5px;
}

.main-wrap .quick-wrap li p strong {
  font-weight: 700;
  margin-left: 3px;
}

.main-wrap .homeBanner {
  padding-bottom: 38px;
}

.main-wrap .homeBanner.alone {
  padding-bottom: 12px;
}

.main-wrap .banner-wrap {
  background-color: var(--gray-color2);
  border-radius: 16px;
}

.main-wrap .homeBanner .banner-wrap {
  background-color: var(--white-color);
}

.main-wrap .homeBanner .banner-wrap .slick-list {
  border-radius: 16px;
  isolation: isolate;
}

.main-wrap .banner-wrap .slideWrap .imgWrap {
  width: 100%;
  height: auto;
  border-radius: 16px;
  overflow: hidden;
}

.main-wrap .banner-wrap .slideWrap .imgWrap img {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;
}

.main-wrap .banner-wrap .slick-dots {
  position: absolute;
  bottom: -22px;
}

.main-wrap .banner-wrap .slick-dots li.slick-active button[type="button"] {
  background: var(--gray-color3);
}

.main-wrap .banner-wrap .slick-dots li button[type="button"] {
  background: var(--gray-color2);
  width: 6px;
  height: 6px;
}

.main-wrap .banner-wrap a:active {
  background-color: #cbd1dc;
}

.main-wrap .banner-wrap a h2 {
  margin-bottom: 4px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.6px;
  padding-right: 70px;
  position: relative;
  z-index: 2;
}

.main-wrap .banner-wrap a p {
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--gray-color3);
  padding-right: 70px;
  position: relative;
  z-index: 2;
}

/* .main-wrap .banner-wrap a img {position: absolute; top: 0; right: 0; height: 100%; z-index: 1;} */
.usage-wrap,
.affiliate-wrap {
  margin-bottom: 16px;
  background: var(--white-color);
  box-shadow: 0px 4px 12px var(--navy-overlay);
  border-radius: 12px;
  padding-bottom: 10px;
}

.main-wrap .head {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}

.main-wrap .head a:not(.payrokCard) {
  display: block;
  width: 100%;
  height: 100%;
  padding: 24px 20px 16px;
}

.main-wrap .head a:active {
  background: var(--navy-overlay);
}

.main-wrap .head h2 {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.6px;
}

.main-wrap .head .btn-all {
  position: absolute;
  top: 25px;
  right: 20px;
  font-size: 16px;
  line-height: 1.2;
  text-align: right;
  letter-spacing: -0.3px;
  color: var(--gray-color3);
}

.btn-autocharge {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  height: 56px;
  background: url(/v1/images/ic-arrow-right-g-f71c78fb0459d2630e715361f23ae095.svg) no-repeat calc(100% - 13px)
    50% #1a294f;
  background-size: 24px 24px;
  border-radius: 16px;
  width: 100%;
  margin-bottom: 20px;
  color: var(--white-color);
  text-align: left;
  font-weight: 600;
  font-size: 16px !important;
  line-height: 120%;
  letter-spacing: -0.3px;
  text-align: left !important;
  padding: 0 20px;
}

.btn-autocharge:active {
  background: url(/v1/images/ic-arrow-right-g-f71c78fb0459d2630e715361f23ae095.svg) no-repeat calc(100% - 13px)
      50% linear-gradient(0deg, rgba(16, 25, 45, 0.2), rgba(16, 25, 45, 0.2)),
    #1a294f !important;
}

.btn-autocharge span {
  vertical-align: middle;
}

.btn-autocharge .badge {
  font-size: 12px;
  line-height: 150%;
  letter-spacing: -0.3px;
  background: #0ea5e9;
  color: var(--white-color);
  box-sizing: border-box;
  border-radius: 50px;
  padding: 2px 6px;
  font-weight: 600;
  margin-left: 8px;
}

.scrnum {
  width: 24px;
  margin-right: 8px;
}

.subtitle-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  margin-bottom: 12px;
}

.subtitle-wrap .ico {
  flex: 0 0 20px;
  margin-right: 8px;
}

.subtitle-wrap h4 {
  flex: 1 1 auto;
  text-align: left;
}

.subtitle-wrap .btn-go {
  font-size: 12px;
  line-height: 120%;
  letter-spacing: -0.3px;
  background: var(--gray-color0);
  border: 1px solid var(--gray-color2);
  box-sizing: border-box;
  border-radius: 50px;
  padding: 9px 12px;
  color: var(--gray-color5);
}

.subtitle-wrap .btn-go:active {
  background: linear-gradient(0deg, var(--navy-overlay), var(--navy-overlay)),
    var(--gray-color0);
  border: 1px solid var(--gray-color2);
}

/* 충전 */
.chargeprice-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chargeprice-wrap .chgargeprice-box {
  padding: 20px;
  background: var(--white-color);
  border: 1px solid var(--gray-color5);
  border-radius: 12px;
  font-size: 22px;
  margin-bottom: 16px;
  height: 94px;
  position: relative;
}

.chargeprice-wrap .chgargeprice-box label {
  font-size: 14px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color3);
  margin: 0 0 8px;
  display: block;
}

.chargeprice-wrap .chgargeprice-box span {
  display: inline-block;
  height: 29px;
  line-height: 27px;
  font-size: 22px;
  vertical-align: middle;
  margin-left: 5px;
}

.chargeprice-wrap .chgargeprice-box .inp-price {
  height: 29px;
  line-height: 27px;
  display: inline-block;
  padding: 0;
  border: none;
  border-radius: 0;
  vertical-align: middle;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.6px;
  color: var(--gray-color5);
  width: auto;
  margin-left: 0;
  min-width: 13.55px;
  caret-color: var(--blue-color);
}

.chargeprice-wrap .chgargeprice-box input.inp-price {
  width: calc(100% - 50px);
}

.chargeprice-wrap .chgargeprice-box .inp-price:focus {
  outline: none !important;
}

.chargeprice-wrap .chgargeprice-box .inp-price[placeholder]:empty::before {
  content: attr(placeholder);
  color: var(--gray-color2);
  font-size: 24px;
  font-weight: 600;
}

/* .chargeprice-wrap .chgargeprice-box .inp-price[placeholder]:empty:focus::before {content: '';} */
.chargeprice-wrap .chgargeprice-box .inp-price::placeholder {
  color: var(--gray-color2);
  font-size: 24px;
  font-weight: 600;
}

.chargeprice-wrap .chgargeprice-box.error {
  border: 1px solid var(--red-color);
}

.chargeprice-wrap .chgargeprice-box.error label {
  color: var(--red-color);
}

.chargeprice-wrap .chgargeprice-box.error .inp-price {
  color: var(--red-color);
}

.chargeprice-wrap .chgargeprice-box.error span {
  color: var(--red-color);
}

.chargeprice-wrap .priceset {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  height: 40px;
  gap: 8px;
  margin-bottom: 20px;
}

.chargeprice-wrap .priceset .btn-price {
  background: var(--gray-color0);
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color3);
}

.charge-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 8px;
}

.charge-list dt {
  font-size: 14px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
  height: 17px;
  margin-bottom: 10px;
}

.charge-list dd {
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  text-align: right;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
  height: 17px;
  margin-bottom: 10px;
}

.charge-list dd .ico {
  width: 24px;
}

.charge-list dd select,
.charge-list dd .select {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  border: none;
  background-position: 100% 50%;
  width: auto;
  padding: 0 20px 0 0;
  border-radius: 0;
  vertical-align: middle;
}

.charge-list dd .select.bgNone {
  background: transparent;
  padding-right: 0;
  font-weight: 600;
}

.charge-list dd span {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  border: none;
  width: auto;
  padding: 0;
  border-radius: 0;
  vertical-align: middle;
}

.tooltip-wrap {
  text-align: right;
}

.tooltip-wrap .tooltip {
  padding: 0 12px;
  height: 28px;
  background: #1a294f;
  border-radius: 50px;
  display: inline-flex;
  color: var(--white-color);
  font-weight: 600;
  font-size: 14px;
  line-height: 27px;
  text-align: center;
  letter-spacing: -0.3px;
  color: var(--gray-color6);
  position: relative;
  margin-bottom: 32px;
  align-items: center;
  box-shadow: 0px 0px 8px rgb(29 32 39 / 15%);
}

.tooltip-wrap .tooltip .ico {
  vertical-align: middle;
  margin-top: -2px;
  width: 14px;
  height: 17px;
  margin-right: 3px;
}

.tooltip-wrap .tooltip::before {
  content: "";
  width: 13px;
  height: 10px;
  position: absolute;
  top: -9px;
  right: 32px;
  background: url(/v1/images/ic-select-arrow2-f11f1e29b153faa4be1a15aa6931180c.svg) no-repeat;
  transform: rotate(-180deg);
  background-size: 100% 100%;
}

.tooltip-wrap2 {
  text-align: center;
}

.tooltip-wrap2 .tooltip {
  padding: 0 16px;
  height: 38px;
  background: #1a294f;
  border-radius: 50px;
  display: inline-flex;
  color: var(--white-color);
  font-weight: 600;
  font-size: 14px;
  line-height: 38px;
  text-align: center;
  letter-spacing: -0.3px;
  color: var(--gray-color6);
  position: relative;
  align-items: center;
  box-shadow: 0px 0px 8px rgb(29 32 39 / 15%);
}

.tooltip-wrap2 .tooltip > * {
  margin-top: -2px;
}

.tooltip-wrap2 .tooltip .ico {
  vertical-align: middle;
  margin-top: -2px;
  width: 14px;
  height: 17px;
  margin-right: 3px;
  display: inline-block;
}

.tooltip-wrap2 .tooltip::before {
  content: "";
  width: 13px;
  height: 10px;
  position: absolute;
  bottom: -9px;
  left: 50%;
  background: url(/v1/images/ic-select-arrow2-f11f1e29b153faa4be1a15aa6931180c.svg) no-repeat;
  transform: translateX(-50%);
  background-size: 100% 100%;
}

.tooltip-wrap3 {
  text-align: center;
}

.tooltip-wrap3 .tooltip {
  padding: 4 16px;
  height: 38px;
  background: #1a294f;
  border-radius: 12px;
  display: flex;
  color: var(--white-color);
  font-weight: 600;
  font-size: 14px;
  line-height: 38px;
  text-align: center;
  letter-spacing: -0.3px;
  color: var(--gray-color6);
  position: relative;
  justify-content: center;
  align-items: center;
}

.tooltip-wrap3 .tooltip .ico {
  vertical-align: middle;
  margin-top: -2px;
  width: 14px;
  height: 17px;
  margin-right: 3px;
}

.chargeprice-wrap .notice-wrap {
  position: relative;
  opacity: 1;
  transition: opacity 0.3s;
}

.hide {
  display: none;
}

.notice-box {
  background: var(--gray-color6);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}

.chargeprice-wrap .notice-box h3 {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 8px;
}

.chargeprice-wrap .notice-box .ico {
  vertical-align: middle;
  margin-right: 8px;
  margin-top: -1px;
}

.chargeprice-wrap .notice-box ul {
}

.chargeprice-wrap .notice-box ul li {
  font-size: 14px;
  line-height: 170%;
  letter-spacing: -0.3px;
  color: var(--gray-color3);
}

.chargeprice-wrap .notice-box ul li strong {
  font-weight: 600;
}

.chargecomplete-wrap {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.chargecomplete-wrap .group1 {
  flex: 1 1 auto;
}

.chargecomplete-wrap .group1 .ico {
  width: 140px;
}

.chargecomplete-wrap .group1 .ico2 {
  width: 100px;
}

.chargecomplete-wrap .group2 {
  flex: 0 0 auto;
  width: 100%;
}

.infobox {
  height: 34px;
  padding: 8px 16px;
  border-radius: 8px;
  background-color: var(--white-color1);
  font-size: 12px;
  line-height: 1.5;
  color: var(--blue-color);
  box-sizing: border-box;
  font-weight: 600;
  display: inline-block;
}

.btn-admin {
  font-size: 12px !important;
  color: var(--gray-color5);
  letter-spacing: -0.3px;
  background: var(--gray-color0);
  border: 1px solid var(--gray-color2);
  box-sizing: border-box;
  border-radius: 50px;
  padding: 0 12px;
  height: 32px;
  line-height: 1.2;
  display: inline-block !important;
  margin-left: 14px;
  vertical-align: middle;
}

.btn-admin .ico {
  vertical-align: middle;
  margin-right: 4px;
}

.btn-float {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  margin-bottom: 0 !important;
  border-radius: 0;
}

.nonWayCase {
  padding: 8px 22px 28px;
}

.nonWayCase .nonWayTop {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.nonWayCase .nonWayTop .icon {
  width: 56px;
  height: 56px;
  margin-right: 16px;
}

.nonWayCase .nonWayTop .topText {
}

.nonWayCase .nonWayTop p {
  margin-bottom: 4px;
  font-weight: 700;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.6px;
  color: var(--gray-color4);
}

.nonWayCase .nonWayTop span {
  font-weight: 400;
  font-size: 14px;
  line-height: 120%;
  text-align: center;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
}

.nonWayCase .nonWayBottom {
}

.nonWayCase .nonWayBottom .addMore {
  padding: 14.5px;
  background: var(--blue-color);
  border-radius: 12px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.3px;
  color: var(--white-color);
}

.fw600 {
  font-weight: 600;
}

.chargeBadge.type-1 {
  min-width: 62px;
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 2px 6px;
  font-weight: 600;
  font-size: 12px;
  text-align: center;
  letter-spacing: -0.3px;
  color: var(--white-color);
  background: #0ea5e9;
  border-radius: 50px;
  box-sizing: border-box;
  line-height: 1;
}

.chargeBadge.type-2 {
  min-width: 62px;
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 2px 6px;
  font-weight: 600;
  font-size: 12px;
  text-align: center;
  letter-spacing: -0.3px;
  color: var(--blue-color);
  background: var(--white-color1);
  border-radius: 50px;
  box-sizing: border-box;
  line-height: 1;
}

.list-c-wrap.borderNone {
  margin-bottom: 12px;
}

.list-c-wrap.borderNone .cardTitleWrap {
  display: flex;
  justify-content: space-between;
  padding: 24px 20px 16px;
}

.list-c-wrap.borderNone .cardTitleWrap .titleLeft {
  display: flex;
  align-items: center;
}

.list-c-wrap.borderNone .cardTitleWrap .titleLeft .chargeWaySubtitle {
  padding: 0;
}

.list-c-wrap.borderNone .cardTitleWrap .control {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
}

.list-c-wrap.borderNone .cardTitleWrap .control::before {
  content: "";
  display: block;
  margin-right: 4px;
  width: 16px;
  height: 16px;
  background: url(/v1/images/ic-cog-c79b0d073b9c42456724c3dc1188cdb6.png) no-repeat center;
  background-size: 100%;
}

.chargeWaySubtitle {
  padding: 25px 20px 17px;
  font-weight: 700;
  font-size: 18px;
  line-height: 120%;
  letter-spacing: -0.6px;
  color: var(--gray-color5);
}

/* 충전 수단 관리  */
.connectWayIcon {
  width: 42px;
  height: 42px;
  margin-right: 16px;
}

/* 표 */
.tbl-data {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  font-size: 14px;
  letter-spacing: -0.3px;
  margin-bottom: 10px;
}

.tbl-data th,
.tbl-data td {
  border-bottom: 1px solid var(--gray-color0);
  padding: 16px 0;
}

.tbl-data th {
  color: var(--gray-color4);
  text-align: left;
  min-width: 80px;
}

.tbl-data td {
  color: var(--gray-color5);
  text-align: right;
  font-weight: 500;
}

.notice-box2 .tbl-data {
  margin: -8px 0;
}

.notice-box2 .tbl-data tr:last-child th,
.notice-box2 .tbl-data tr:last-child td {
  border-bottom: none !important;
}

/* */
.tab-st-wrap {
  display: flex;
  flex-wrap: nowrap;
  margin: -16px -24px 0;
}

.tab-st-wrap .tab-st-btn {
  font-size: 16px;
  color: var(--gray-color4);
  height: 44px;
  line-height: 44px;
  text-align: center;
  flex: 1;
  border-bottom: 2px solid var(--gray-color0);
}

.tab-st-wrap .tab-st-btn.active {
  color: var(--gray-color5);
  font-weight: 700;
  border-bottom: 2px solid var(--gray-color5);
}

.banner1,
.banner2 {
  height: 80px;
  background: #0ea5e9;
  margin: 0 -24px 28px;
  position: relative;
}

.banner1 {
  margin-bottom: 0;
}

.banner1 a {
  display: block;
  padding: 20px 28px 20px 36px;
  border: 0;
}

.banner1 h3 {
  color: var(--white-color);
  font-weight: 700;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.6px;
  margin-bottom: 4px;
}

.banner1 p {
  color: var(--white-color);
  font-size: 14px;
  line-height: 120%;
  letter-spacing: -0.3px;
}

.banner1 img {
  position: absolute;
  top: 0;
  right: 28px;
  width: 122px;
  height: 80px;
  border: 0;
}

.banner2 {
  height: 80px;
  background: var(--violet-color);
  margin: 0 -24px 28px;
  position: relative;
}

.banner2 a {
  display: block;
  padding: 20px 28px 20px 36px;
  border: 0;
}

.banner2 h3 {
  color: var(--white-color);
  font-weight: 700;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.6px;
  margin-bottom: 4px;
}

.banner2 p {
  color: var(--white-color);
  font-size: 14px;
  line-height: 120%;
  letter-spacing: -0.3px;
}

.banner2 img {
  position: absolute;
  top: 0;
  right: 28px;
  width: 122px;
  height: 80px;
  border: 0;
}

.stit-wrap {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.stit-wrap h2 {
  font-weight: 700;
  font-size: 18px;
  line-height: 120%;
  letter-spacing: -0.6px;
}

.stit-wrap button.btn-here {
  color: var(--blue-color);
  font-size: 14px;
  letter-spacing: -0.3px;
  background: url(/v1/images/ic-gps-a89288c6e83eb30652c003efa293b562.svg) no-repeat 0 50%;
  background-size: 18px 18px;
  padding-left: 22px;
  line-height: 24px;
}

.select-wrap2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 12px;
}

.select-gray {
  background: url(/v1/images/ic-arrow-down-c8a0a9616893f960b6f6fd72fde62f35.svg) no-repeat calc(100% - 16px) 50% /
    16px 16px var(--gray-color0);
  border: none !important;
  flex: 1;
  color: var(--gray-color3);
  font-size: 14px;
  height: 44px;
  line-height: 43px;
  border-radius: 12px;
}

.select-gray:active,
.select-gray:focus {
  border: none !important;
}

.filter-wrap {
  position: relative;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--gray-color0);
  margin-bottom: 16px;
}

.filter-wrap .btn-filterall {
  background: url(/v1/images/ic-arrow-down-c8a0a9616893f960b6f6fd72fde62f35.svg) no-repeat 50% 50% / 18px 18px;
  background-color: linear-gradient(
    to left,
    #333,
    #333 50%,
    #eee 75%,
    #333 75%
  );
  border: none;
  width: 32px;
  height: 32px;
  position: absolute;
  right: 0;
  top: 0;
  font-size: 0;
  z-index: 3;
}

.filter-wrap .mask {
  position: absolute;
  top: 0;
  right: -24px;
  z-index: 2;
  width: 72px;
  height: 32px;
  background: url(/v1/images/ic-mask-c164794e74e68343dbb8adf39667e2f6.svg) no-repeat;
  background-size: 100% 100%;
}

.filter-wrap ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px 8px;
  /* overflow: hidden; */
  height: 32px;
}

.filter-wrap ul li.slick-slide {
  margin-right: 8px;
}

.filter-wrap ul li input[type="radio"] {
  display: none;
}

.filter-wrap ul li input[type="radio"] ~ label,
.filter-wrap ul li input[type="checkbox"] ~ label {
  font-size: 14px;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
  border: 1px solid var(--gray-color2);
  border-radius: 8px;
  padding: 0 12px;
  height: 32px;
  line-height: 32px;
  display: block;
}

.filter-wrap ul li input[type="radio"]:checked ~ label,
.filter-wrap ul li input[type="checkbox"]:checked ~ label {
  color: var(--white-color);
  background: #1b2537;
}

.filter-wrap.opened .btn-filterall {
  background-image: url(/v1/images/ic-arrow-up-5e0e055135df40f126daae611d31cc92.svg);
}

.filter-wrap.opened .mask {
  display: none;
}

.filter-wrap.opened ul {
  height: auto;
  width: calc(100% - 32px);
}

/* .filter-wrap.opened ul li:nth-child(3) {margin-right: 20px;} */

.list-b-wrap.exp {
  margin-left: -24px;
  margin-right: -24px;
  margin-bottom: 32px;
}

.detailimg-slider {
  height: 315px;
  background: #eee;
  margin: -16px -24px 24px;
  overflow: hidden;
  display: block;
  position: relative;
}

.detailimg-slider::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 124px;
  background: url(/v1/images/top-shadow-87b6226e3f7b33e060651cd64cc45c1a.png) no-repeat top;
  background-size: 100% 100%;
  z-index: 2;
  pointer-events: none;
}

.detailimg-slider li.slick-slide {
  display: block;
  width: 100%;
  height: 315px;
  background-size: cover;
  background-position: center;
}

.detailimg-slider .pagingInfo {
  height: 24px;
  padding: 0 12px;
  line-height: 22px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 500;
  position: absolute;
}

.detailimg-slider .pagingInfo strong {
  color: var(--white-color);
}

.detail-cate-wrap {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.detail-cate-wrap .txt-cate {
  color: var(--blue-color);
}

.detail-cate-wrap .txt-use {
  color: var(--gray-color5);
}

.detail-cate-wrap .txt-use img {
  vertical-align: middle;
  margin: -3px 4px 0 0;
  width: 20px;
  height: 20px;
}

.stit-wrap {
  margin: 28px 0 18px;
}

.stit-wrap h2 {
  font-weight: 800;
  font-size: 18px;
  line-height: 120%;
  letter-spacing: -0.6px;
  color: var(--gray-color5);
}

.stit-wrap h3 {
  font-weight: 700;
  font-size: 18px;
  line-height: 120%;
  letter-spacint: -0.6px;
  color: var(--gray-color5);
}

.detail-store {
  padding: 0 0 4px;
  border-bottom: 1px solid var(--gray-color0);
  margin-bottom: 24px;
}

.detail-store li {
  font-size: 14px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color3);
  margin-bottom: 20px;
  text-indent: -24px;
  padding-left: 24px;
}

.detail-store li img {
  margin-right: 8px;
  vertical-align: middle;
}

.detail-body {
  background: var(--gray-color6);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 24px;
}

.detail-body h3 {
  font-weight: 700;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: -0.3px;
  color: #1b2537;
  margin-bottom: 16px;
}

.detail-body h3 img {
  width: 16px;
  vertical-align: middle;
  margin-right: 8px;
}

.detail-body p {
  font-size: 14px;
  line-height: 170%;
  letter-spacing: -0.3px;
  color: var(--gray-color3);
}

.qr-wrap {
  background: var(--white-color);
  border: 1px solid var(--gray-color2);
  box-sizing: border-box;
  border-radius: 16px;
  padding: 32px 32px 40px;
  text-align: center;
  margin-bottom: 48px;
}

.qr-wrap h3 {
  font-weight: 700;
  font-size: 16px;
  line-height: 120%;
  text-align: center;
  letter-spacing: -0.6px;
  color: var(--gray-color5);
  margin-bottom: 24px;
}

.qr-wrap .qr-img {
  width: 120px;
  height: 120px;
}

/* 송금 */
/* .chargeprice-wrap.sendmoney {grid-template-rows: 110px 60px auto minmax(174px, 100%) 60px;} */
.sendmessage-wrap {
  display: flex;
  flex-direction: column;
  text-align: center;
  height: 100%;
}

.sendmessage-wrap .group1 {
  flex: 1 1 auto;
}

.sendmessage-wrap .group1 .ico {
  width: 88px;
}

.sendmessage-wrap .group2 {
  flex: 0 0 auto;
  width: 100%;
}

.infobox2 {
  height: 40px;
  padding: 11px 16px;
  border-radius: 8px;
  background-color: var(--white-color1);
  font-size: 14px;
  line-height: 1.5;
  color: var(--blue-color);
  box-sizing: border-box;
  display: inline-block;
}

.infobox2 strong {
  font-weight: 600;
  margin-left: 4px;
}

.infobox3 {
  height: 37px;
  padding: 8px 16px;
  border-radius: 8px;
  background-color: var(--white-color1);
  font-size: 14px;
  line-height: 1.5;
  color: var(--blue-color);
  box-sizing: border-box;
  display: inline-block;
  letter-spacing: 0;
}

.infobox3 strong {
  font-weight: 600;
  margin-left: 4px;
}

input.inp-search {
  height: 48px;
  line-height: 48px;
  padding: 0 16px 0 46px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.3px;
  border-radius: 12px;
  background: url(/v1/images/ic-search-f8adb620a0365d232240be342e65b1db.svg) no-repeat 16px 50% var(--gray-color0);
  border: 1px solid transparent !important;
}

input.inp-search::placeholder {
  color: var(--gray-color4);
  opacity: 0.8;
}

.search-result {
  margin: 0 -24px;
  display: block;
}

.search-result li {
  min-height: 16px;
  padding: 14px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.search-result li .name {
  font-weight: 700;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.6px;
  color: var(--gray-color5);
}

.search-result li .tel {
  text-align: right;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
}

/* 쇼핑 */
.btn-coupon {
  background: var(--white-color);
  border: 1px solid var(--gray-color2);
  box-sizing: border-box;
  border-radius: 6px;
  height: 30px !important;
  line-height: 30px !important;
  padding: 0 8px;
  vertical-align: top;
  font-weight: 600;
  font-size: 12px !important;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color3);
  margin: 4px 8px 0 0;
  display: inline-block !important;
  float: right;
}

.shopban-wrap {
  margin: 0 -20px;
  width: auto;
  overflow: hidden;
  padding-bottom: 46px;
}

.shopban-wrap .shopban-list .slick-list {
  margin: 0 -6px;
}

.shopban-wrap .slick-slide {
  box-sizing: border-box;
  margin: 0 6px;
}

.shopban-wrap .slick-slide img {
  width: 100%;
}

.shopban-wrap .slick-dots {
  bottom: auto;
}

.shopban-wrap .slick-dots {
  position: absolute;
  bottom: -24px;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.shopban-wrap .slick-dots li {
  width: 6px;
  height: 6px;
  margin: 0 2px !important;
}

.shopban-wrap .slick-dots li button {
  width: 6px;
  height: 6px;
  margin: 0 !important;
}

.shopban-wrap .slick-dots li.slick-active button {
  background: var(--gray-color3);
}

.shopban-list {
}

.shopban-list li {
  border-radius: 12px;
  padding: 0 !important;
  position: relative;
  height: auto;
}

.shopban-list li img {
  width: 1px;
  border-radius: 12px;
}

.shopban-list li .img {
  position: absolute;
  right: 0;
  top: 0;
  width: 124px;
}

.shopban-list li .text {
  width: calc(100% - 105px);
  display: block;
}

.shopban-list li .text p {
  color: var(--gray-color0);
  font-weight: 400;
  font-size: 14px;
  line-height: 120%;
  letter-spacing: -0.3px;
  display: block;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shopban-list li .text h4 {
  color: var(--white-color);
  font-weight: 800;
  font-size: 20px;
  line-height: 120%;
  letter-spacing: -0.6px;
  height: 48px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.shopban-wrap .slick-dots li {
  padding: 0 !important;
}

.thumb-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--gray-color0);
  padding-bottom: 24px;
  margin-bottom: 24px;
  margin-left: -8px;
  margin-right: -8px;
}

.thumb-list li {
  text-align: center;
}

.thumb-list li a {
  padding: 8px 0;
  text-align: center;
  display: block;
}

.thumb-list li a img {
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
}

.thumb-list li a p {
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  letter-spacing: -1px;
  color: var(--gray-color5);
}

.sstit-wrap {
  padding-top: 8px;
  margin-bottom: 16px;
}

.sstit-wrap h3 {
  font-weight: 800;
  font-size: 20px;
  line-height: 120%;
  display: flex;
  align-items: center;
  letter-spacing: -0.6px;
}

.prd-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: space-between;
  gap: 40px 24.5px;
  margin-bottom: 30px;
}

.prd-list li {
}

.prd-list li a {
  display: block;
  text-align: left;
}

.prd-list li a .imgWrap {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.prd-list li a .imgWrap::after {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 100%;
}

.prd-list li .thumb {
  position: absolute;
  margin: 0 auto;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: contain;
}

.prd-list li .store {
  font-weight: 500;
  font-size: 12px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
  margin-bottom: 4px;
  margin-top: 8px;
}

.prd-list li h4 {
  font-size: 14px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
  min-height: 34px;
  margin-bottom: 12px;
}

.prd-list li .price1 {
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.6px;
  color: var(--gray-color5);
  margin-right: 4px;
  display: inline-block;
}

.prd-list li .price1 strong {
  font-weight: 600;
  font-size: 18px;
}

.prd-list li .price2 {
  color: var(--gray-color4);
  display: inline-block;
  text-decoration: line-through;
  line-height: 18px;
  font-size: 14px;
}

.top-cate-wrap {
  margin: 0 -24px 24px;
  display: block;
  overflow-y: hidden;
  overflow-x: auto;
  height: 78px;
  padding: 0 24px;
  white-space: nowrap;
  font-size: 0;
}

.top-cate-wrap li {
  margin-right: 20px;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

.top-cate-wrap li:last-child {
  margin-right: 0;
}

.top-cate-wrap li a {
  font-size: 12px;
  line-height: 120%;
  text-align: center;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
}

.top-cate-wrap li a.active {
  font-weight: 600;
}

.top-cate-wrap li img {
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
  border: 1px solid var(--gray-color0);
  border-radius: 50px;
}

.top-cate-wrap li a.active img {
  border: 1px solid var(--gray-color5);
}

.sort-wrap {
  border-top: 1px solid var(--gray-color0);
  border-bottom: 1px solid var(--gray-color0);
  padding: 0 24px;
  margin: 0 -24px 24px;
  display: block;
  overflow-y: hidden;
  overflow-x: auto;
  font-size: 0;
  height: 45px;
}

.sort-wrap li {
  display: inline-block;
  vertical-align: top;
}

.sort-wrap li a {
  font-size: 14px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
  padding: 14px 24px 14px 0;
  display: block;
}

.sort-wrap li a.active {
  color: var(--gray-color5);
  font-weight: 600;
}

.detailimg-wrap {
  height: 84vw;
  background: #eee;
  margin: -16px -24px 24px;
  overflow: hidden;
  display: block;
  position: relative;
  overflow: hidden;
}

.detailimg-wrap .img {
  width: 100%;
  height: 100%;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.prd-summary {
  padding: 8px 0 0;
}

.prd-summary .store {
  font-weight: 500;
  font-size: 14px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
  margin-bottom: 8px;
}

.prd-summary h2 {
  font-size: 24px;
  line-height: 120%;
  letter-spacing: -0.6px;
  color: var(--gray-color5);
  min-height: 34px;
  margin-bottom: 12px;
  font-weight: 800;
}

.prd-summary .price1 {
  font-size: 20px;
  line-height: 120%;
  letter-spacing: -0.6px;
  color: var(--gray-color5);
  margin-right: 4px;
  display: inline-block;
  vertical-align: middle;
}

.prd-summary .price1 strong {
  font-weight: 600;
  margin-right: 2px;
}

.prd-summary .dsicount {
  display: inline-block;
  font-weight: 700;
  font-size: 20px;
  line-height: 120%;
  letter-spacing: -0.6px;
  color: var(--main-color);
  vertical-align: middle;
  margin-right: 8px;
  margin-left: 8px;
}

.prd-summary .price2 {
  color: var(--gray-color4);
  display: inline-block;
  text-decoration: line-through;
  line-height: 18px;
  font-size: 14px;
  vertical-align: middle;
}

.prd-summary .event {
  padding: 16px 0;
  border-bottom: 1px solid var(--gray-color0);
  border-top: 1px solid var(--gray-color0);
  margin-top: 16px;
}

.prd-summary .event .badge {
  font-weight: 600;
  font-size: 12px;
  line-height: 150%;
  text-align: center;
  letter-spacing: -0.3px;
  color: var(--white-color);
  background: #0ea5e9;
  border-radius: 50px;
  padding: 2px 6px;
  height: 22px !important;
  margin-right: 12px;
  vertical-align: middle;
}

.prd-summary .event .txt {
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color3);
  vertical-align: middle;
}

.prd-info {
}

.prd-info h3 {
  font-weight: 600;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: -0.3px;
  color: #1b2537;
  position: relative;
  border-bottom: 1px solid var(--gray-color0);
}

.prd-info h3 img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  vertical-align: middle;
  margin-top: -2px;
  padding: 24px 0;
}

.prd-info .cont {
  font-size: 16px;
  line-height: 170%;
  letter-spacing: -0.3px;
  color: var(--gray-color3);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--gray-color0);
}

.prd-info h3.toggle {
  cursor: pointer;
}

.prd-info h3.toggle ~ .cont {
  display: none;
}

.prd-info h3.toggle::after {
  content: "";
  width: 16px;
  height: 16px;
  background: url(/v1/images/ic-select-arrow-d091986d00e935bb92724b90826f2366.svg) no-repeat center;
  background-size: 100% 100%;
  display: block;
  position: absolute;
  top: calc(50% - 8px);
  right: 0;
  transition: transform 0.3s;
}

.prd-info h3.toggle.show {
  border-bottom: none;
}

.prd-info h3.toggle.show::after {
  transform: rotate(180deg);
}

.prd-info h3.toggle.show ~ .cont {
  display: block;
}

.prd-info .cont dl {
  padding: 6px 0;
}

.prd-info .cont dl dt {
  font-size: 12px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
  margin-bottom: 12px;
}

.prd-info .cont dl dd {
  font-size: 14px;
  line-height: 170%;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
  padding-bottom: 18px;
}

.prd-info .cont dl:last-of-type dd {
  padding-bottom: 0;
}

.btn-wrap.shadow {
  background: var(--white-color);
  box-shadow: 0px 0px 10px rgba(16, 25, 45, 0.1);
  margin: 0 -24px;
  width: auto;
  padding: 8px 24px;
  width: 100%;
}

.paymoney-wrap {
  display: flex;
  margin: 24px 0 12px;
  padding: 24px 0 12px;
  border-bottom: 1px solid var(--gray-color0);
  justify-content: space-between;
}

.paymoney-wrap dl {
}

.paymoney-wrap dl dt {
  font-size: 14px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color3);
  margin-bottom: 8px;
}

.paymoney-wrap dl dd {
  font-size: 24px;
  line-height: 120%;
  letter-spacing: -0.6px;
  color: var(--gray-color5);
}

.paymoney-wrap dl dd strong {
  font-weight: 800;
}

.inpnum-wrap {
  width: 144px;
  height: 48px;
  background: var(--gray-color0);
  padding: 0;
  border-radius: 8px;
  display: block;
}

.inpnum-wrap .btn-minus {
  width: 48px;
  height: 48px;
  text-align: center;
  line-height: 48px;
  float: left;
}

.inpnum-wrap .inp-number {
  background: transparent;
  border: 0;
  text-align: center;
  float: left;
  width: 48px;
  height: 48px;
  line-height: 48px;
  padding: 0;
  border: none !important;
}

.inpnum-wrap .btn-plus {
  width: 48px;
  height: 48px;
  text-align: center;
  line-height: 48px;
  float: right;
}

.inpnum-wrap button:disabled {
  opacity: 0.2;
}

.certification-wrap {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  height: 100%;
}

.certification-wrap .group1 {
  flex: 1 1 auto;
  padding-bottom: 32px;
}

.certification-wrap .group1 p {
  color: var(--gray-color3);
  font-weight: 600;
  font-size: 18px;
  line-height: 120%;
  letter-spacing: -0.6px;
}

.certification-wrap .group1 .ico {
  width: 100px;
}

.certification-wrap .group2 {
  flex: 0 0 auto;
  width: 100%;
  padding-bottom: 8px;
}

.certification-wrap .notice-wrap {
  position: relative;
  align-self: flex-end;
  opacity: 1;
  transition: opacity 0.3s;
  text-align: left;
}

.certification-wrap .notice-box {
  background: var(--gray-color6);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}

.certification-wrap .notice-box h3 {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 8px;
}

.certification-wrap .notice-box .ico {
  vertical-align: middle;
  margin-right: 8px;
  margin-top: -1px;
}

.certification-wrap .notice-box ul li {
  font-size: 14px;
  line-height: 170%;
  letter-spacing: -0.3px;
  color: var(--gray-color3);
}

.certification-wrap .notice-box ul li strong {
  font-weight: 600;
}

.depositorname-wrap {
  display: flex;
  flex-direction: column;
  text-align: left;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.depositorname-wrap > * {
  width: 100%;
}

.depositor-wrap {
  position: relative;
  opacity: 1;
  transition: opacity 0.3s;
  text-align: left;
  width: 100%;
}

.depositor-wrap .depositor-box {
  background: var(--gray-color6);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}

.depositor-wrap .depositor-box h3 {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 16px;
}

.depositor-wrap .depositor-box .ico {
  vertical-align: middle;
  margin-right: 8px;
  margin-top: -1px;
}

.depositor-wrap .depositor-box .nameprice {
  display: flex;
  margin-top: 16px;
  margin: 8px;
  justify-content: space-between;
}

.depositor-wrap .depositor-box .nameprice .name {
}

.depositor-wrap .depositor-box .nameprice h4 {
  font-size: 14px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color3);
  margin-bottom: 8px;
}

.depositor-wrap .depositor-box .nameprice .name img {
  width: 156px;
  vertical-align: bottom;
  margin-right: 4px;
}

.depositor-wrap .depositor-box .nameprice .name span {
  vertical-align: bottom;
  font-size: 14px;
}

.depositor-wrap .depositor-box .nameprice .price {
}

.depositor-wrap .depositor-box .nameprice .price p {
  font-size: 24px;
  font-weight: 800;
  text-align: right;
  padding: 8px 0 0;
}

.graybox {
  background: var(--gray-color0);
  border-radius: 16px;
  padding: 20px;
  font-size: 16px;
  line-height: 120%;
  text-align: center;
  letter-spacing: -0.3px;
  color: var(--gray-color3);
}

.search-wrap {
  padding-top: 64px;
}

.search-wrap header {
  height: 64px;
  width: calc(100% + 24px);
  margin-left: -8px;
  padding-top: 16px;
}

.search-wrap header .inp-search {
  width: calc(100% - 60px);
  float: left;
}

.search-wrap header .btn-text {
  display: inline-block;
  width: 60px;
  height: 48px;
  color: var(--gray-color5);
  font-weight: 400;
  letter-spacing: -0.3px;
  font-size: 16px;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  float: left;
}

.search-wrap header::after {
  content: "";
  height: 0;
  display: block;
  visibility: hidden;
  clear: both;
}

.srcresult-list {
  display: block;
  width: 100%;
}

.srcresult-list li {
  font-size: 16px;
  display: block;
  padding: 14.5px 0;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color3);
}

.srcresult-list li .subject {
  color: var(--gray-color3);
  font-weight: 400;
  width: calc(100% - 80px);
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  float: left;
  margin-right: 10px;
}

.srcresult-list li .subject2 {
  color: var(--gray-color3);
  font-weight: 400;
  width: 100%;
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  float: left;
  margin-right: 10px;
}

.srcresult-list li .date {
  width: 46px;
  display: inline-block;
  float: left;
  margin-right: -4px;
}

.srcresult-list li em {
  color: var(--gray-color5);
  font-weight: 600;
}

.srcresult-list .nodata {
  text-align: center;
  margin-top: 114px;
}

.btn-del3 {
  display: inline-block !important;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background: url(/v1/images/ic-del-247e8d70d2bdb3e0fe6e71e6eef7ae66.svg) no-repeat center;
  background-size: 100% 100%;
  overflow: hidden;
  font-size: 0 !important;
  text-indent: -24px;
  float: left;
  margin-top: -1px;
  margin-right: -3px;
  float: right;
}

.srcresult-list li::after {
  content: "";
  height: 0;
  display: block;
  visibility: hidden;
  clear: both;
}

/* 결제 */
.payprice-wrap {
  display: block;
  height: 100%;
}

.payprice-wrap .payprice-box {
  padding: 20px;
  background: var(--white-color);
  border: 1px solid var(--gray-color5);
  border-radius: 12px;
  font-size: 22px;
  margin-bottom: 16px;
  height: 94px;
  position: relative;
}

.payprice-wrap .payprice-box label {
  font-size: 14px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color3);
  margin: 0 0 8px;
  display: block;
}

.payprice-wrap .payprice-box span {
  display: inline-block;
  height: 29px;
  line-height: 26px;
  font-size: 22px;
  vertical-align: middle;
  margin-left: 5px;
}

.payprice-wrap .payprice-box .inp-price {
  height: 29px;
  line-height: 27px;
  display: inline-block;
  padding: 0;
  border: none;
  border-radius: 0;
  vertical-align: middle;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.6px;
  color: var(--gray-color5);
  width: auto;
  margin-left: 0;
  min-width: 13.55px;
  caret-color: var(--blue-color);
}

.payprice-wrap .payprice-box input.inp-price {
  width: calc(100% - 50px);
}

.payprice-wrap .payprice-box .inp-price:focus {
  outline: none !important;
}

.payprice-wrap .payprice-box .inp-price[placeholder]:empty::before {
  content: attr(placeholder);
  color: var(--gray-color2);
  font-size: 24px;
  font-weight: 600;
}

.btn-clear {
  width: 24px;
  height: 24px;
  background: url(/v1/images/ic-close-circle2-5d4c3c0281a748432aa92631ba44a684.svg) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}

.payprice-wrap .payprice-box .inp-price::placeholder {
  color: var(--gray-color2);
  font-size: 24px;
  font-weight: 600;
}

.payprice-wrap .payprice-box.error {
  border: 1px solid var(--red-color);
}

.payprice-wrap .payprice-box.error label {
  color: var(--red-color);
}

.payprice-wrap .payprice-box.error .inp-price {
  color: var(--red-color);
}

.payprice-wrap .payprice-box.error span {
  color: var(--red-color);
}

.payprice-wrap .store {
  margin-bottom: 25px;
}

.payprice-wrap .store .storeimg {
  width: 36px;
  height: 36px;
  margin-right: 12px;
}

.payprice-wrap .store p {
  font-weight: 800;
  font-size: 18px;
  color: var(--gray-color5);
  display: inline-block;
}

.payprice-wrap .price-info {
  display: block;
  margin-bottom: 48px;
}

.payprice-wrap .price-info dt {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  width: 80px;
}

.payprice-wrap .price-info dd {
  display: inline-block;
}

.qrshoot-wrap {
  text-align: center;
  height: 100vh;
  background: url(/v1/images/bg-qrframe-29631a3c43ab209d05ae89aa307bf980.svg) no-repeat center;
  background-size: 100% auto;
  position: fixed;
  width: 100vw;
}

.qrshoot-wrap h1 {
  font-size: 18px;
  color: var(--white-color);
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-62vw);
}

.qrshoot-wrap .btn-close {
  width: 48px;
  height: 48px;
  background: url(/v1/images/ic-photo-close-991b54c10f9312eb8a35cf96f49c8883.svg) no-repeat center;
  background-size: 100% 100%;
  font-size: 0;
  position: absolute;
  top: 84vh;
  left: 50%;
  transform: translateX(-50%);
}

.contentWrap .pop-content {
  width: 100%;
}

/* 더보기 */
.wrap.wholeScroll {
  overflow-y: scroll;
}

.wrap.wholeScroll .content {
  overflow: initial;
}

.more-header {
  padding: 0 24px 24px;
  position: relative;
  margin-top: -10px;
}

.more-header .heading3 {
  margin-bottom: 10px !important;
}

.more-header .heading3 span {
  font-weight: 200;
}

.more-header .btn-myinfo {
  font-size: 14px !important;
  color: var(--gray-color5);
  letter-spacing: -0.3px;
  background: var(--gray-color0);
  border: 1px solid var(--gray-color2);
  box-sizing: border-box;
  border-radius: 50px;
  padding: 0 12px;
  height: 32px;
  line-height: 1.2;
  display: inline-block !important;
  vertical-align: middle;
}

.btn-myinfo .ico {
  vertical-align: middle;
  margin-right: 4px;
}

.more-header .ico-profile {
  position: absolute;
  right: 24px;
  top: 0;
  width: 64px;
}

.more-content {
  height: initial;
  background: var(--gray-color6);
}

.notice-link {
  font-size: 14px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
  border-bottom: 1px solid var(--gray-color2);
  padding: 20px 30px 20px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  display: block;
  margin-top: -16px;
  margin-bottom: 32px;
  background: url(/v1/images/ic-chevron-right-72addefbe2c8dc664a368586326b2d0d.svg) no-repeat 100% 50%;
  background-size: 20px 20px;
}

.notice-link img {
  width: 24px;
  margin-right: 12px;
}

.link-list-wrap {
  margin-bottom: 36px;
}

.link-list-wrap h3 {
  font-size: 14px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
  margin-bottom: 8px;
}

.link-list-wrap .link-list {
  display: block;
}

.link-list-wrap .link-list li {
  position: relative;
  background: url(/v1/images/ic-chevron-right-72addefbe2c8dc664a368586326b2d0d.svg) no-repeat 100% 50%;
  background-size: 20px 20px;
}

.link-list-wrap .link-list li a,
.link-list-wrap .link-list li label.switch {
  min-height: 48px;
  display: block;
  padding: 14.5px 0;
  font-weight: 600;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.6px;
  color: var(--gray-color5);
  box-sizing: border-box;
}

.switch input[type="checkbox"] {
  display: none;
}

.switch input[type="checkbox"] ~ .ico-switch {
  width: 44px;
  height: 24px;
  background: url(/v1/images/ic-switch-off-4b68c60aeaf52e53d3596d51416e8ac2.svg) no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  right: 0;
  transition: all 100ms ease-in-out;
}

.switch input[type="checkbox"]:checked ~ .ico-switch {
  background-image: url(/v1/images/ic-switch-on-cc099d6af043bd0cebba2e1207b82d43.svg);
}

.btn-wrap3 {
  width: 100%;
  border-top: 1px solid var(--gray-color2);
  padding: 32px 0 48px;
  font-size: 0;
}

.btn-wrap3 div {
  display: inline-block;
  text-align: center;
  width: 50%;
  position: relative;
}

.btn-wrap3 button {
  letter-spacing: -0.3px;
  text-decoration-line: underline;
  color: var(--gray-color4);
  font-size: 14px;
  line-height: 120%;
  text-align: center;
}

.notice-box2 {
  background: var(--gray-color6);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}

.notice-box2 h3 {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 8px;
}

.notice-box2 .ico {
  vertical-align: middle;
  margin-right: 8px;
  margin-top: -1px;
}

.notice-box2 ul {
}

.notice-box2 ul li {
  font-size: 14px;
  line-height: 170%;
  letter-spacing: -0.3px;
  color: var(--gray-color3);
}

.notice-box2 ul li strong {
  font-weight: 600;
}

.notice-box2 p {
  font-size: 14px;
  line-height: 170%;
  letter-spacing: -0.3px;
  color: var(--gray-color3);
}

.nocharger-wrap {
  display: flex;
  flex-direction: column;
  text-align: left;
  justify-content: space-between;
  align-items: center;
  height: calc(100% - 72px);
  width: 100%;
  text-align: center;
}

.nocharger-wrap > div:nth-of-type(1) {
  margin-top: 16vh;
}

.nocharger-wrap > div img {
  width: 100px;
  margin-bottom: 24px;
}

.nocharger-wrap > div h3 {
  font-weight: 800;
  font-size: 20px;
  line-height: 120%;
  text-align: center;
  letter-spacing: -0.6px;
  color: var(--gray-color4);
  margin-bottom: 8px;
}

.nocharger-wrap > div p {
  font-size: 16px;
  line-height: 120%;
  text-align: center;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
}

.payitem {
  display: block;
  box-sizing: border-box;
  padding: 16px 24px;
  text-align: left;
  min-height: 80px;
  position: relative;
  font-size: 0;
  position: relative;
}

.payitem .tit {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  color: var(--gray-color5);
  letter-spacing: -0.6px;
  line-height: 1.2;
}

.payitem .btn-del2 {
  display: inline-block !important;
  width: 24px;
  height: 24px;
  background: url(/v1/images/ic-minus-cirlce-de6d26c07290edbebd8249034731b8c3.svg) no-repeat center;
  background-size: 100% 100%;
  vertical-align: middle;
  margin-right: 16px;
}

.payitem .info2 {
  float: right;
  position: static;
  transform: none;
  vertical-align: middle;
  margin-top: 16px;
}

.payitem .btn-hambg {
  display: inline-block !important;
  width: 24px;
  height: 24px;
  background: url(/v1/images/ic-menu-2a79d63e2734026d8442227de445bf2a.svg) no-repeat center;
  background-size: 100% 100%;
  vertical-align: middle;
  margin-left: 16px;
  float: right;
  margin-top: 16px;
}

.payitem .i-arrow-down {
  width: 16px;
  height: 16px;
  background: url(/v1/images/ic-select-arrow-d091986d00e935bb92724b90826f2366.svg) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.ssstit {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--black-color);
}

.select2 {
  height: 56px;
  line-height: 54px;
  font-size: 24px !important;
  background: url(/v1/images/ic-select-arrow-d091986d00e935bb92724b90826f2366.svg) no-repeat calc(100% - 20px) 50%
    var(--white-color);
  background-size: 16px 16px;
  width: auto !important;
  box-sizing: border-box;
  padding: 0 74px 0 0;
  color: var(--gray-color5);
  vertical-align: middle;
  font-size: 16px;
  letter-spacing: -0.6px;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.select3 {
  height: 24px;
  line-height: 24px;
  font-size: 14px !important;
  background: url(/v1/images/ic-select-arrow-d091986d00e935bb92724b90826f2366.svg) no-repeat 100% 50%;
  background-size: 16px 16px;
  width: auto !important;
  box-sizing: border-box;
  padding: 0 20px 0 0;
  color: var(--gray-color5);
  vertical-align: middle;
  letter-spacing: -0.3px;
  font-weight: 400;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.graybox2 {
  background: var(--gray-color0);
  border-radius: 16px;
  padding: 28px 24px;
  font-size: 16px;
  line-height: 120%;
  text-align: center;
  letter-spacing: -0.3px;
  color: var(--gray-color3);
}

.linklist li {
  margin-bottom: 20px;
  display: block;
}

.linklist li:last-child {
  margin-bottom: 0;
}

.u {
  text-decoration: underline;
}

.notice-list {
  padding-bottom: 32px;
  margin: 0 -20px;
  width: calc(100% + 40px) !important;
}

.notice-list li {
  position: relative;
}

.notice-list li a {
  padding: 28px 24px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notice-list li a:active {
  background-color: var(--navy-overlay);
}

.notice-list li .date {
  font-size: 14px;
  line-height: 120%;
  text-align: right;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
  text-align: left;
  display: inline-block;
  margin-right: 10px;
}

.notice-list li .badge {
  color: var(--blue-color);
  padding: 2px 6px;
  height: 27px;
  background: var(--white-color1);
  border-radius: 12px;
  font-size: 12px;
  letter-spacing: -0.3px;
  margin-right: 4px;
  vertical-align: middle;
  display: inline-block;
  line-height: 23px;
  text-align: center;
  box-sizing: border-box;
}

.notice-list li .badge-w {
  color: var(--gray-color5);
  padding: 2px 6px;
  height: 27px;
  background: var(--gray-color2);
  border-radius: 12px;
  font-size: 12px;
  letter-spacing: -0.3px;
  margin-right: 4px;
  vertical-align: middle;
  display: inline-block;
  line-height: 23px;
  text-align: center;
  box-sizing: border-box;
}

.notice-list li .subject {
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
  display: inline;
}

.notice-list li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: var(--gray-color0);
}
.notice-list li:last-child::after{
  display: none;
}
/* 공지사항 상세  */
.notice-view {
  padding-bottom: 32px;
}

.notice-view strong {
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: var(--black-color);
}

.notice-view .date {
  padding-top: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--gray-color3);
}

.notice-cont {
  margin-top: 16px;
  padding: 16px 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--gray-color4);
  border-top: 1px solid var(--gray-color2);
}

.notice-cont p img {
  width: calc(100vw - 48px) !important;
}

.qnaDownload{
    display: block;
}
.qnaDownload + .qnaDownload{
    margin-top: 12px;
}
.qnaDownload .btn-down{
  justify-content: flex-start;
  padding: 20px;
  border: none;
  background-color: var(--gray-color0);
  text-indent: 0;
  position: relative;
}
.qnaDownload .btn-down::after{
  position: absolute;
  right: 20px;
}
.qnaDownload .btn-down > span{
  display: inline-block;
  width: calc(100% - 56px);
  max-width: calc(100% - 56px);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.btn-down {
  border-radius: 12px;
  /* border: 1px solid #e2e8f0; */
  /* margin-bottom: 8px; */
  padding: 16px 46px;
  text-indent: -32px;
  width: 100%;
  text-align: left !important;
  font-weight: 400;
  font-size: 14px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
}
.btn-down::after{
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(/v1/images/ic-receive-square-aa8957a23f775f66291ea3a25ed7b911.svg) no-repeat;
  position: absolute;
  right: 0;
}
.btn-down span{
  width: calc(100% - 84px);
  max-width: calc(100% - 84px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-down .ico {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  vertical-align: middle;
  font-size: 14px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: #64748b;
}

.faq-list {
  padding-bottom: 32px;
  margin: 0 -24px;
}

.faq-list li {
  position: relative;
  display: inline-block;
  width: 100%;
}

.faq-list li a {
  display: flex;
  align-items: center;
  padding: 20px 50px 20px 20px;
  position: relative;
}

.faq-list li a::after {
  content: "";
  width: 16px;
  height: 16px;
  background: url(/v1/images/ic-select-arrow-d091986d00e935bb92724b90826f2366.svg) no-repeat;
  background-size: 16px 16px;
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
}

.faq-list li a.active::after {
  transform: translateY(-50%) rotate(-180deg);
}

.faq-list li a:active {
  background-color: var(--navy-overlay);
}

.faq-list li .date {
  font-size: 14px;
  line-height: 120%;
  text-align: right;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
  flex: 0 0 48px;
  text-align: left;
}

.faq-list li .badge {
  color: var(--blue-color);
  padding: 2px 6px;
  height: 23px;
  background: var(--white-color1);
  border-radius: 12px;
  font-size: 12px;
  letter-spacing: -0.3px;
  margin-right: 10px;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  line-height: 23px;
  flex: 1 0 33px;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
}

.faq-list li .subject {
  font-size: 16px;
  line-height: 24px;
  color: var(--black-color);
  flex: 1 1 100%;
}

.faq-list li .cont {
  padding: 0 0 16px;
  font-size: 14px;
  line-height: 170%;
  letter-spacing: -0.3px;
  color: var(--gray-color3);
  background: var(--gray-color6);
  border-radius: 16px;
  padding: 16px;
  margin: -4px 24px 16px;
  display: none;
}

.faq-list li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: var(--gray-color0);
}

.faq-list li a.active ~ .cont {
  display: block;
}

.textarea {
  border-radius: 16px;
  padding: 16px;
  background: var(--white-color);
  border: 1px solid var(--gray-color2);
  box-sizing: border-box;
  width: 100%;
  height: 160px;
}

.graybox .btn-down {
  display: flex;
  justify-content: flex-start;
  border: none;
  text-indent: 0;
  padding: 0;
  font-size: 14px;
  position: relative;
}

.graybox .btn-wrap3 {
  margin-top: 20px;
  padding: 20px 0 0;
}

.graybox .btn-wrap3 button {
  text-decoration: none;
  color: var(--gray-color5);
}
.graybox .btn-wrap3 div:nth-of-type(1)::after{
  content: "";
  width: 4px;
  height: 4px;
  position: absolute;
  top: calc(50% - 2px);
  right: -2px;
  background: var(--gray-color4);
  border-radius: 4px;
}
.graybox .fileName{
  max-width: calc(100% - 68px);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qna-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.qna-view .group1 {
  flex: 1;
}

.qna-view .group2 {
  flex: 0;
}

.qna-cont {
  padding: 24px 0;
  font-size: 16px;
  line-height: 170%;
  letter-spacing: -0.3px;
  color: var(--gray-color3);
}

.qna-cate {
  font-size: 14px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
}

.memberout-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.memberout-wrap .group1 {
  flex: 1;
}

.memberout-wrap .group2 {
  flex: 0;
}

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

.flex-column .flex-0 {
  flex: 0;
  width: 100%;
}

.flex-column .flex-1 {
  flex: 1;
  width: 100%;
}

.flex-column2 {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.bottom-grayarea {
  background: var(--gray-color6);
  box-shadow: inset 0px 1px 0px var(--gray-color2);
  padding: 14px 24px 6px;
  margin: 0 -24px -8px;
  width: calc(100% + 48px) !important;
}

.pop-content {
  text-align: center;
  padding: 24px 20px;
}

.qr {
  width: 175px;
  height: 175px;
  position: relative;
  margin: 0px auto 0;
}

.qr.lock img,
.qr.timeout img {
  opacity: 0.15;
}

.qr.lock::after {
  content: "";
  width: 180px;
  height: 180px;
  background: url(/v1/images/ic-lock-66d456c8fa50cdbb0bb1df23e754b912.svg) no-repeat center;
  background-size: 40px 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(3px);
}

.qr.timeout::after {
  content: "";
  width: 40px;
  height: 40px;
  background: url(/v1/images/ic-refresh2-4832e368b164a5e8275455b7a1a3a0ef.svg) no-repeat center;
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bg-card {
  padding-top: 60%;
  background: linear-gradient(90deg, #2f4786 0%, #1b2c59 100%);
  box-shadow: 0px 2px 2px color-mix(in srgb, var(--main-color) 25%, transparent),
    0px 6px 4px color-mix(in srgb, var(--main-color) 15%, transparent);
  border-radius: 12px;
  position: relative;
  color: var(--white-color);
  line-height: 120%;
  letter-spacing: -0.3px;
  overflow: hidden;
}

.bg-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  height: 29.7%;
  background: rgba(0, 0, 0, 0.1);
}

.bg-card .logo {
  height: 7.43%;
  width: auto;
  position: absolute;
  top: 12.57%;
  left: 6.97%;
}

.bg-card .txt1 {
  font-weight: 600;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  position: absolute;
  left: 6.97%;
  top: 52%;
}

.bg-card .txt-price {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.6px;
  position: absolute;
  right: 6.97%;
  top: 50.29%;
}

.bg-card .txt-price strong {
  font-weight: 800;
}

.bg-card .txt2 {
  font-weight: normal;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  position: absolute;
  left: 6.97%;
  bottom: 10.26%;
}

.bg-card .txt3 {
  font-weight: normal;
  font-size: 14px;
  position: absolute;
  right: 6.97%;
  bottom: 10.26%;
}

.pop-content .btn-wrap {
  padding: 24px 20px;
  border-top: 1px solid var(--gray-color0);
  margin: 0 -20px;
  width: calc(100% + 40px);
}

.bo-bottom {
  border-bottom: 1px solid var(--gray-color0);
}

.qr2 {
  border: 4px solid color-mix(in srgb, var(--main-color) 50%, white 50%);
  margin: 0 auto;
  width: 190px;
  height: 190px;
  border-radius: 8px;
}

.qr2 img {
  width: 100%;
  height: 100%;
}

/* 퀵메뉴-이용내역 */
.test {
  background: var(--gray-color0);
}

.select-history {
  position: relative;
  background: var(--gray-color0);
  border-radius: 10px;
  padding: 14.5px 32px;
  font-size: 16px;
  line-height: 120%;
  text-align: center;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
}

.select-history button {
  position: absolute;
  top: 12px;
  width: 24px;
  height: 24px;
}

.select-history button:disabled {
  opacity: 0.9;
}

.select-history .btn-month-prev {
  left: 8px;
}

.select-history .btn-month-next {
  right: 8px;
}

.select-history .month img {
  margin-left: 5px;
}

.select-history .month .inp-ympick {
  line-height: 0;
}

.filter-wrap3 {
  border-bottom: 0 !important;
  margin-top: 12px;
  margin-bottom: 0;
  padding-bottom: 0;
}

.filter-wrap3 ul {
  margin-bottom: 20px;
}

.history-wrap ul {
  text-align: left;
  margin: 0 -24px 48px;
}

.history-wrap.history-line ul.mb0 {
  padding: 0 24px;
}

.history-wrap.history-line .mb0 li:last-child {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--gray-color0);
}

.history-wrap.history-line ul.mb0 li a {
  padding: 16px 0;
}

.history-wrap ul li a {
  display: block;
  padding: 16px 24px;
}

.history-wrap ul ul {
  margin: 0;
}

.history-wrap ul li:last-child {
  margin-bottom: 0;
  text-align: left;
}

.history-wrap .ssstit2:first-child {
  margin-top: 40px;
}

.ssstit2 {
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
  text-align: left;
  margin-bottom: 8px;
}

.history-list {
  width: calc(100% - 60px);
  display: inline-block;
  vertical-align: top;
}

.history-list dt {
  display: inline-block;
  width: calc(100% - 105px);
  text-align: left;
  font-weight: 600;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.6px;
  color: var(--gray-color5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  margin-bottom: 4px;
}

.history-list dd {
  display: inline-block;
  width: 100px;
  text-align: right;
  font-weight: 400;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.6px;
  color: var(--gray-color5);
  vertical-align: top;
}

.history-list dd.charge {
  color: var(--blue-color);
}

.history-list dd b {
  font-weight: 600;
}

.history-list .comment {
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
}

.history-wrap .list-img {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  margin-right: 12px;
  vertical-align: top;
}

.history-list2 {
  width: calc(100% - 120px);
  margin-right: 15px;
}

.btn-receive {
  display: inline-block !important;
  align-items: center;
  padding: 0px;
  position: absolute;
  width: 48px;
  height: 32px;
  background: var(--white-color1);
  border-radius: 8px;
  color: var(--blue-color);
  font-weight: 600;
  font-size: 12px !important;
  line-height: 120%;
  letter-spacing: -0.3px;
}

.btn-receive:active {
  background-color: color-mix(in srgb, var(--main-color) 35%, white 65%);
}

.ic-cashback {
  background-image: url(/v1/images/ic-add-square-22c13e53e2d423ccfe26d192cd479714.svg);
  background-color: var(--blue-color);
}

.ic-payment {
  background-image: url(/v1/images/ic-receipt-3604d293fa6caf39b0d6ebd8343960de.svg);
  background-color: #fbbf24;
}

.ic-send {
  background-image: url(/v1/images/ic-send-d772693da16ed1a82aceb4f054bfdd04.svg);
  background-color: var(--orange-color);
}

.ic-withdraw {
  background-image: url(/v1/images/ic-send-square-64a1d5a57269192da31c8e230c66cfab.svg);
  background-color: var(--violet-color);
}

.ic-card-remove {
  background-image: url(/v1/images/ic-card-remove-3d3c8318a54cdac5dfd264c630c25a71.svg);
  background-color: var(--gray-color4);
}

.ic-add-pay {
  background-image: url(/v1/images/ic-wallet-add-35dc1b62e9bc8f855b7d5bbcc8d695ea.svg);
  background-color: #0ea5e9;
}

.ic-recover {
  background-image: url(/v1/images/ic-card-slash-016579cbf062c66c4d7f65927bb732d5.svg);
  background-color: #ec4899;
}

.ic-receive {
  background-image: url(/v1/images/ic-receive-a2e03984eef73b618bfe43a4c8d3482f.svg);
  background-color: #2dd4bf;
}

/* .history-line {border-bottom: 1px solid var(--gray-color0);} */
.history-list2 dt,
.history-list2 dd {
  display: block;
  width: 100%;
  text-align: left;
}

.history-list2 ul {
  margin-bottom: 0 !important;
}

.history-list2 .sender-list ul li {
  display: inline-block;
  font-weight: 400;
  font-size: 14px;
  line-height: 120%;
  letter-spacing: -0.6px;
  color: var(--gray-color4);
  vertical-align: top;
  margin-bottom: 4px;
  padding-right: 10px;
  margin-right: 5px;
  position: relative;
}

.history-list2 .sender-list ul li::after {
  width: 1px;
  height: 12px;
  right: 0;
  top: 2px;
  background: var(--gray-color2);
  position: absolute;
  content: "";
}

.history-list2 .sender-list ul li:last-child {
  padding-right: 0;
  margin-right: 0;
  padding-bottom: 0;
}

.history-wrap.history-line .history-list2 .sender-list ul li:last-child {
  padding-right: 0;
  margin-right: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.history-list2 .sender-list ul li:last-child::after {
  display: none;
}

/* 충전상세내역 */
.charge-bg,
.pay-bg,
.send-bg,
.wallet-bg,
.withdraw-bg,
.removal-bg,
.lapse-bg {
  position: relative;
}

.charge-bg::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: url(/v1/images/ic-add-square-22c13e53e2d423ccfe26d192cd479714.svg) 50% 50% no-repeat
    var(--blue-color);
  background-size: 20px 20px;
}

.pay-bg::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: url(/v1/images/ic-receipt-3604d293fa6caf39b0d6ebd8343960de.svg) 50% 50% no-repeat #fbbf24;
  background-size: 20px 20px;
}

.send-bg::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: url(/v1/images/ic-send-d772693da16ed1a82aceb4f054bfdd04.svg) 50% 50% no-repeat var(--orange-color);
  background-size: 20px 20px;
}

.wallet-bg::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: url(/v1/images/ic-wallet-add-35dc1b62e9bc8f855b7d5bbcc8d695ea.svg) 50% 50% no-repeat #0ea5e9;
  background-size: 20px 20px;
}

.withdraw-bg::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: url(/v1/images/ic-send-square-64a1d5a57269192da31c8e230c66cfab.svg) 50% 50% no-repeat
    var(--violet-color);
  background-size: 20px 20px;
}

.removal-bg::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: url(/v1/images/ic-card-slash-016579cbf062c66c4d7f65927bb732d5.svg) 50% 50% no-repeat #ec4899;
  background-size: 20px 20px;
}

.lapse-bg::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: url(/v1/images/ic-card-remove-3d3c8318a54cdac5dfd264c630c25a71.svg) 50% 50% no-repeat
    var(--gray-color4);
  background-size: 20px 20px;
}

.coupon-history {
  margin: 0 -24px 25px;
}

.cancel-price {
  text-decoration-line: line-through;
}

.btn-cancel {
  text-align: center;
  color: var(--gray-color4);
  font-size: 14px !important;
  font-weight: 400;
  text-decoration: underline;
  display: inline-block !important;
}

.coupon-slider {
  margin: 0 -12px 20px;
  width: calc(100% + 24px);
}

.coupon-slider .slick-dots {
  bottom: 15px;
  width: 90%;
}

.coupon-slider .slick-dots li.slick-active button {
  background: var(--gray-color3);
}

.coupon-box {
  position: relative;
  padding: 24px 28px;
  text-align: center;
  box-sizing: border-box;
  border-radius: 16px;
  border: 1px solid var(--gray-color2);
  margin-bottom: 0;
  background: var(--white-color);
  box-shadow: 0px 0px 2px rgba(43, 54, 70, 0.06),
    0px 2px 8px rgba(43, 54, 70, 0.04);
  display: inline-block;
  width: 100%;
}

.coupon-slider .coupon-box.coupon1 {
  width: 100%;
  margin: -5px 0 0;
}

.coupon-box .coupon-content {
  margin: 0;
  display: inline-block;
  width: calc(100% - 60px);
  vertical-align: middle;
  text-align: left;
  float: left;
  padding-left: 10px;
}

.coupon-box .coupon-content p {
  font-size: 12px;
  line-height: 120%;
  color: var(--gray-color3);
}

.coupon-box .coupon-content h4 {
  font-size: 22px;
  line-height: 120%;
  font-weight: bold;
  color: var(--gray-color5);
  margin-top: 6px;
  letter-spacing: -0.6px;
}

.coupon-box .coupon-content h4.charge-complete {
  font-size: 20px;
}

.coupon-box .coupon-content h4.charge-complete img {
  vertical-align: middle;
  margin: -4px 0 0 4px;
  width: 24px;
  height: 20px;
}

.coupon-box .badge {
  display: inline-block;
  border-radius: 50px;
  vertical-align: middle;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 500;
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
}

.coupon-box .date .badge {
  position: static;
  transform: none;
}

.coupon-box .badge.c1 {
  background: var(--gray-color0);
  color: var(--gray-color3);
}

.coupon-box .badge.c2 {
  background: var(--white-color1);
  color: var(--blue-color);
}

.coupon-box .badge.c3 {
  background: #0ea5e9;
  color: var(--white-color);
}

.coupon-box .badge.c4 {
  background: var(--gray-color2);
  color: var(--gray-color3);
}

.coupon-box .badge.c5 {
  background: var(--white-color2);
  color: var(--orange-color);
}

.coupon-box .quantity {
  float: right;
  font-size: 12px;
  vertical-align: top;
}

.coupon-box .quantity b {
  color: var(--blue-color);
}

.coupon-box .img {
  width: 32px;
  height: 32px;
  margin-right: 20px;
  vertical-align: middle;
}

.coupon-box.pd {
  padding: 32px 26px 34px !important;
}

.coupon-box.pd2 {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

.coupon-box.pd2 h4 {
  margin-bottom: 24px;
}

.coupon-box.pd2 .badge {
  top: 45px;
}

.coupon-box.coupon1 {
  border: 0;
  box-shadow: none;
  position: relative;
  z-index: 1;
  padding: 36px 30px;
  background-image: url(/v1/images/bg-coupon-top-0bbeefeaa308ba8902daaa730da4dea1.png),
    url(/v1/images/bg-coupon-bottom-27c929030e83f4f7260a1dd21c99a6c9.png);
  background-position: top left, bottom center;
  background-size: auto, auto;
  background-repeat: repeat-x, repeat-x;
  margin: -5px -12px 0;
  width: calc(100% + 24px);
}

.coupon-box.coupon1::before {
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 100%;
  content: "";
  background-image: url(/v1/images/bg-coupon-left-125b025f2c67318f9a311f8265039bb6.png);
  background-position: top left;
  background-size: auto;
  background-repeat: repeat-y;
}

.coupon-box.coupon1::after {
  z-index: 2;
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 100%;
  content: "";
  background-image: url(/v1/images/bg-coupon-right-fbcd9858dee3fbb0fe42b31aef7e5d06.png);
  background-position: top right;
  background-size: auto;
  background-repeat: repeat-y;
}

.coupon-box.coupon2 {
  border: 0;
  box-shadow: none;
  position: relative;
  z-index: 1;
  padding: 32px 40px 28px;
  margin-bottom: 1px;
  background-image: url(/v1/images/bg-coupon-top-2-022d501f6d4829edaee8f42f9ec81736.png),
    url(/v1/images/bg-coupon-bottom-2-7949297c150b60646e1ef24f6b7c9e50.png);
  background-position: top left, bottom center;
  background-size: auto, auto;
  background-repeat: repeat-x, repeat-x;
  display: inline-block;
  width: 100%;
}

.coupon-box.coupon2::before {
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 100%;
  content: "";
  background-image: url(/v1/images/bg-coupon-left-2-7dcaba1bbaea3b4bd65e389d2ec23412.png);
  background-position: top left;
  background-size: auto;
  background-repeat: repeat-y;
}

.coupon-box.coupon2::after {
  z-index: 2;
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 100%;
  content: "";
  background-image: url(/v1/images/bg-coupon-right-2-ab40ee1559f9bf6e69f413f58428d831.png);
  background-position: top right;
  background-size: auto;
  background-repeat: repeat-y;
}

.lefttop {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
}

.righttop {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
}

.leftbottom {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
}

.rightbottom {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
}

.charge-con {
  padding: 20px 16px;
  font-size: 0;
  border-top: 1px solid var(--gray-color0);
}

.charge-con dt,
.charge-con dd {
  width: 50%;
  display: inline-block;
  font-size: 16px;
  color: var(--gray-color3);
  font-weight: 400;
  line-height: 120%;
}

.charge-con dt:last-child,
.charge-con dd:last-child {
  margin-bottom: 0;
}

.charge-con dt {
  text-align: left;
}

.charge-con dd {
  text-align: right;
}

.charge-con.total dt {
  color: var(--gray-color5);
}

.charge-con.total dd {
  color: var(--gray-color5);
  font-weight: 700;
}

/* 내쿠폰 */
.bg-skyblue,
.bg-skyblue header {
  background: var(--gray-color0);
}

.coupon-list,
.coupon-history {
  margin: 18px -13px;
}

.coupon-expected {
  clear: both;
  padding: 0 16px;
  margin: 0 auto;
  height: 38px;
  background: #1a294f;
  border-radius: 50px;
  display: inline-flex;
  color: var(--white-color);
  font-weight: 600;
  font-size: 14px;
  line-height: 38px;
  text-align: center;
  letter-spacing: -0.3px;
  color: var(--gray-color6);
  position: relative;
  justify-content: center;
  align-items: center;
}

.coupon-box .coupon-content.img-list {
  width: 100%;
}

.coupon-box .coupon-content.img-list .img {
  width: 70px;
  height: 70px;
  margin-right: 0;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  z-index: 2;
  border-radius: 12px;
}

.coupon-box .coupon-content.img-list .text {
  width: calc(100% - 94px);
  display: inline-block;
  vertical-align: middle;
  border-left: 1px solid var(--gray-color0);
  margin-left: 10px;
  padding-left: 20px;
  box-sizing: border-box;
}

.coupon-box .coupon-content.img-list .text h4 {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 16px;
  line-height: 140%;
}

.coupon-box .coupon-content.img-list .date {
  margin-top: 18px;
  color: var(--gray-color3);
  font-size: 14px;
  line-height: 100%;
  letter-spacing: -0.3px;
  position: relative;
}

.coupon-list2 {
  background: var(--white-color);
  padding: 4px 0;
}

.coupon-list2 li {
  padding: 0;
}

.coupon3 {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
  padding: 28px 24px 0;
  width: 100%;
}

.coupon-box.coupon3 .coupon-content {
  padding-left: 0;
  border-bottom: 1px solid var(--gray-color0);
  padding-bottom: 28px;
}

.coupon-list2 li:last-child .coupon-box.coupon3 .coupon-content {
  border-bottom: none;
}

.coupon-box.coupon3 .coupon-content.img-list .img {
  float: left;
}

.coupon-box.coupon3 .coupon-content.img-list .text {
  width: calc(100% - 94px);
  border-left: none;
  margin-left: 24px;
  padding-left: 0;
}

.coupon-box.coupon3 .coupon-content.img-list .date {
  margin-top: 8px;
}

.coupon-box.coupon3 .quantity {
  margin-top: 5px;
}

.coupon-list2 li:last-child .coupon3 {
  border-bottom: 0;
}

.date-tt {
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  color: var(--gray-color4);
  letter-spacing: -0.3px;
  margin: 0 0 12px 24px;
}

.faq-coupon {
  margin: 0 24px;
}

.faq-coupon .img {
  width: 24px;
  height: 24px;
  margin: 0 10px 0 0;
  display: inline-block;
}

.faq-coupon li {
  border-bottom: 1px solid var(--gray-color2);
}

.faq-coupon li:last-child {
  border-bottom: 0;
}

.faq-coupon li .cont {
  background: none;
  padding: 17px 0;
  margin: -1px 0 6px;
  font-size: 16px;
}

.faq-coupon li a {
  padding: 25px 0;
}

.faq-coupon li a::after {
  right: 0;
}

.faq-coupon li .subject {
  font-weight: 600;
}

.content2 {
  padding: 0 0 8px;
}

.payment-wrap {
  background: var(--white-color);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: 0px 4px 12px var(--navy-overlay);
  text-align: center;
  padding: 0 40px 40px;
  box-sizing: border-box;
}

.payment-wrap .tts {
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  color: var(--gray-color4);
  letter-spacing: -0.3px;
}

.payment-wrap h4 {
  font-style: normal;
  font-weight: 800;
  font-size: 20px;
  line-height: 120%;
  text-align: center;
  letter-spacing: -0.6px;
  color: var(--gray-color5);
  margin: 8px -20px 0;
}

.payment-wrap .img {
  width: 150px;
  margin: 12px auto;
  display: block;
  border-radius: 12px;
}

.payment-wrap .barcode {
  width: 260px;
  display: block;
  margin: 10px auto;
  position: relative;
}

.payment-wrap .barcode img {
  width: 100%;
}

.payment-wrap .barcode.disabled1::before {
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  position: absolute;
  left: 0;
  top: 0;
}

.payment-wrap .barcode.disabled1::after {
  width: 90px;
  height: 30px;
  line-height: 28px;
  margin: 0 auto;
  position: absolute;
  left: calc(50% - 45px);
  top: calc(50% - 15px);
  background: rgba(16, 25, 45, 0.8);
  border-radius: 50px;
  color: var(--white-color);
  content: "사용완료";
  font-size: 14px;
}

.payment-wrap .barcode.disabled2::before {
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  position: absolute;
  left: 0;
  top: 0;
}

.payment-wrap .barcode.disabled2::after {
  width: 114px;
  height: 30px;
  line-height: 28px;
  margin: 0 auto;
  position: absolute;
  left: calc(50% - 57px);
  top: calc(50% - 15px);
  background: rgba(16, 25, 45, 0.8);
  border-radius: 50px;
  color: var(--white-color);
  content: "유효기간 만료";
  font-size: 14px;
}

.payment-wrap .qr {
  width: 160px;
  position: relative;
}

.payment-wrap .qr.disabled1::before {
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  position: absolute;
  left: 0;
  top: 0;
}

.payment-wrap .qr.disabled1::after {
  width: 90px;
  height: 30px;
  line-height: 28px;
  margin: 0 auto;
  position: absolute;
  left: calc(50% - 45px);
  top: calc(50% - 15px);
  background: rgba(16, 25, 45, 0.8);
  border-radius: 50px;
  color: var(--white-color);
  content: "사용완료";
  font-size: 14px;
}

.payment-wrap .qr.disabled2::before {
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  position: absolute;
  left: 0;
  top: 0;
}

.payment-wrap .qr.disabled2::after {
  width: 114px;
  height: 30px;
  line-height: 28px;
  margin: 0 auto;
  position: absolute;
  left: calc(50% - 57px);
  top: calc(50% - 15px);
  background: rgba(16, 25, 45, 0.8);
  border-radius: 50px;
  color: var(--white-color);
  content: "유효기간 만료";
  font-size: 14px;
}

.payment-wrap .barcode-number {
  margin: 20px 0 30px;
}

.payment-wrap .barcode-number li {
  display: inline-block;
  margin: 0 4px;
  font-weight: 600;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
}

.payment-wrap .date {
  color: var(--gray-color3);
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  letter-spacing: -0.3px;
}

.payment-wrap .date span {
  color: var(--white-color);
  font-weight: 600;
  font-size: 12px;
  line-height: 150%;
  text-align: center;
  letter-spacing: -0.3px;
  padding: 2px 6px;
  background: #0ea5e9;
  border-radius: 50px;
}

/*.card-content {height: auto; width: 100%; padding: 20px 20px 50px; position: relative; color: var(--white-color); text-align: left; background: linear-gradient(90deg, #2F4786 0%, #1B2C59 100%); box-shadow: 0px 2px 2px color-mix(in srgb, var(--main-color) 25%, transparent), 0px 6px 4px color-mix(in srgb, var(--main-color) 15%, transparent); border-radius: 12px; overflow: hidden;}
.card-content .subject {font-weight: bold; font-size: 18px; line-height: 120%; letter-spacing: -0.6px;}
.card-content .tbl-data {margin: 40px 0 0;}
.card-content .tbl-data th, .card-content .tbl-data td {border-bottom: 0;}
.card-content .tbl-data th {color: rgba(255,255,255, .8)}
.card-content .tbl-data td { color: var(--white-color); font-weight: 600; font-size: 20px;}
.card-content .tbl-data td b {font-weight: 800;}
.card-content .period {display: block; padding: 15px 20px; background: rgba(0,0,0, .1); position: absolute; left: 0; bottom: 0;  height: 52px; width: 100%;  box-sizing: border-box; color: rgba(255,255,255,.8); font-size: 14px; }
.card-content .period span {display: inline-block;background: rgba(0,0,0,.12); color: rgba(255,255,255,.8);font-size: 12px; font-weight: 600; line-height: 14px; letter-spacing: -0.3px; padding: 5px 5px; border-radius: 4px; margin-right: 10px;}
*/
.bg-card .txt2 span {
  display: inline-block;
  background: rgba(0, 0, 0, 0.12);
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: -0.3px;
  padding: 5px 5px;
  border-radius: 4px;
  margin-right: 10px;
}

.bg-card .subject {
  height: 7.43%;
  width: auto;
  position: absolute;
  top: 12.57%;
  left: 6.97%;
  font-weight: bold;
  font-size: 18px;
  line-height: 120%;
  letter-spacing: -0.6px;
}

.payment-list {
}

.payment-list .payment-tt {
  font-weight: bold;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.6px;
  color: var(--gray-color5);
  margin-top: 28px;
}

.payment-list ul {
  margin: 0;
}

.payment-list ul li {
  border-bottom: 1px solid var(--gray-color0);
  padding: 28px 0;
}

.payment-list ul li:last-child {
  border-bottom: 0;
}

.payment-list ul li p {
  font-size: 12px;
  line-height: 120%;
  color: var(--gray-color3);
}

.payment-list ul li h4 {
  font-weight: bold;
  color: var(--gray-color5);
  margin-top: 6px;
  letter-spacing: -0.6px;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 16px;
  line-height: 140%;
}

.payment-list div {
  position: relative;
  margin-top: 8px;
}

.payment-list div .badge {
  display: inline-block;
  border-radius: 50px;
  vertical-align: middle;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 500;
}

.payment-list div .badge.c1 {
  background: var(--white-color1);
  color: var(--blue-color);
}

.payment-list div .badge.c2 {
  background: var(--gray-color0);
  color: var(--gray-color3);
}

.payment-list div .cancel {
  float: right;
  color: var(--gray-color4);
  font-size: 12px;
  line-height: 120%;
  letter-spacing: -0.3px;
  text-decoration: underline;
  margin-top: 3px;
}

/*혜택*/
.benefits-wrap {
  padding: 24px 0;
  margin: 24px 0 0;
  border-top: 1px solid var(--gray-color0);
}

.benefits-wrap .head {
  font-size: 18px;
  line-height: 120%;
  font-weight: bold;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
  margin-bottom: 24px;
  border-radius: 0;
  overflow: visible;
}

.benefits-wrap .head span {
  color: var(--orange-color);
}

.benefits-wrap .head img {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  margin: -3px 8px 0 0;
}

.benefits-comment {
  font-size: 18px;
  line-height: 120%;
  font-weight: bold;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
  margin-bottom: 24px;
  border-radius: 0;
  overflow: visible;
}

.benefits-comment img {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  margin: -2px 8px 0 0;
}

.benefits-content {
  position: relative;
}

.benefits-content img {
  width: 46px;
  height: 46px;
  border: none;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 23px;
}

.benefits-content h4 {
  font-weight: 800;
  font-size: 24px;
  line-height: 120%;
  letter-spacing: -0.6px;
  color: var(--gray-color5);
  width: calc(100% - 55px);
  display: block;
}

.benefits-content p {
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
  margin-bottom: 5px;
  width: calc(100% - 55px);
  display: block;
}

.calendar-wrap {
  background: var(--gray-color0);
  border-radius: 16px;
  padding: 20px 16px;
  margin-bottom: 16px;
}

.month-title {
  position: relative;
  height: 25px;
}

z .month-title .subject {
  font-weight: bold;
  font-size: 18px;
  line-height: 140%;
  color: var(--gray-color5);
}

.month-title .month {
  width: 56px;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.month-title .month a {
  display: block;
  float: left;
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url(/v1/images/ic-calendar-on-4366427884fd0c3a2b797e3b286d38e2.svg) 0 0 no-repeat;
}

.month-title .month .prev {
  transform: rotate(-180deg);
  margin-right: 16px;
}

.month-title .month .next {
}

.month-title .month .prev.off {
  background: url(/v1/images/ic-calendar-off-09b0212795ae2e95d21eda90d21c0d63.svg) 0 0 no-repeat;
  cursor: default;
}

.month-title .month .next.off {
  background: url(/v1/images/ic-calendar-off-09b0212795ae2e95d21eda90d21c0d63.svg) 0 0 no-repeat;
  cursor: default;
}

.weekday {
  text-align: center;
}

.weekday > div {
  width: 14.285%;
  height: 40px;
  line-height: 40px;
  float: left;
  font-weight: 600;
  font-size: 12px;
  color: var(--gray-color5);
}

.day {
  text-align: center;
}

.day > div {
  width: 14.285%;
  height: 40px;
  line-height: 36px;
  float: left;
  font-weight: 400;
  font-size: 14px;
  color: var(--gray-color3);
  position: relative;
  z-index: 2;
}

.day > div.attend {
  font-size: 0;
}

.day > div.attend::after {
  content: "";
  width: 40px;
  height: 40px;
  left: calc(50% - 20px);
  top: 0;
  position: absolute;
  background: url(/v1/images/ic-attend-7aae39832865015ad6eb5f054fc6123d.svg) 0 0 no-repeat;
  background-size: cover;
}

.day > div.today {
  color: var(--white-color);
  background: url(/v1/images/bg-today-8adc8868922e122ca7f53f9529e7e4ad.svg) 50% 50% no-repeat;
  background-size: 36px 36px;
}

/* 에러 */
.error:not(.content) {
  border: 1.5px solid #f65556 !important;
}

.error-text {
  color: var(--red-color);
  letter-spacing: -0.3px;
  margin-top: 8px;
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
}

/* datepicker 보정 */
.inp-ympick {
  background: url(/v1/images/ic-select-arrow-d091986d00e935bb92724b90826f2366.svg) no-repeat 100% 50% transparent !important;
  border: none !important;
  width: 130px !important;
  height: 20px !important;
  color: #000 !important;
  font-size: 16px;
}

.rolldate-container .rolldate-panel {
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}

.rolldate-container .rolldate-btn.rolldate-cancel {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  width: 24px;
  height: 24px;
  background: url(/v1/images/ic-bottom-close-64bb91a69638c0b2922310f017f4228d.svg) no-repeat center;
  background-size: 100% 100%;
  border: none;
  font-size: 0;
  padding: 0;
  left: auto;
}

.rolldate-container header {
  display: flex;
  align-items: center;
  height: 64px;
  border-bottom: none !important;
  padding: 14px 24px;
  font-size: 20px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.6px;
  font-weight: 800;
  text-align: left;
}

.rolldate-container .rolldate-content {
  top: 0 !important;
}

.rolldate-container .rolldate-confirm {
  height: initial !important;
  display: flex;
  cursor: pointer !important;
  font-size: 1rem !important;
  transition: all 0.2s;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--white-color) !important;
  background-color: var(--blue-color);
  /* left: 1.5em !important;
    padding: 0 1rem !important;
    height: 3.5rem !important; */
  line-height: 3.5rem;
  border-radius: 1rem;
  /* bottom: 0; */
  position: static !important;
  margin: 20px 24px;
}

.rolldate-container .rolldate-panel {
  height: 360px !important;
}

.rolldate-container .rolldate-wrapper li {
  height: 40px !important;
  font-size: 18px;
  font-weight: 700;
  transform: none !important;
  color: #000 !important;
}

.rolldate-container .rolldate-dim {
  background: var(--gray-color4) !important;
  mix-blend-mode: screen;
  border: none !important;
}

.rolldate-container .mask-top {
  top: -1px !important;
  height: 93px !important;
}

.rolldate-container .mask-bottom {
  bottom: -20px !important;
  height: 98px !important;
}

.rolldate-container .rolldate-wrapper > div {
  height: 209px !important;
  position: relative;
  z-index: 2;
}

.rolldate-container .rolldate-wrapper ul {
  margin-top: 92px !important;
}

.rolldate-container .rolldate-wrapper::before {
  content: "";
  height: 40px;
  border-radius: 8px;
  background: var(--gray-color0);
  display: block;
  left: 24px;
  top: calc(50% - 14px);
  width: calc(50% - 30px);
  position: absolute;
}

.rolldate-container .rolldate-wrapper::after {
  content: "";
  height: 40px;
  border-radius: 8px;
  background: var(--gray-color0);
  display: block;
  right: 24px;
  top: calc(50% - 14px);
  width: calc(50% - 30px);
  position: absolute;
}

.rolldate-container .rolldate-wrapper.year::after,
.rolldate-container .rolldate-wrapper.year::before {
  width: 50%;
}

.rolldate-container .rolldate-wrapper {
  width: calc(100% - 40px);
  margin-left: 20px;
}

.rolldate-container .rolldate-mask {
  background: rgba(6, 10, 29, 0.6) !important;
  backdrop-filter: blur(10px) !important;
}

hr {
  display: block;
  margin: 16px 0 24px;
  height: 1px;
  background: var(--gray-color0);
  border: none;
}

/* 알림 */
.alarm-list {
  padding-bottom: 32px;
  margin: 0 -24px;
  width: calc(100% + 48px) !important;
  margin-top: 8px;
}

.alarm-list li {
  position: relative;
  padding: 20px 24px;
  display: block;
  font-size: 0;
}

.alarm-list li .ico {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--gray-color0);
  text-align: center;
  line-height: 24px;
  vertical-align: top;
  display: inline-block;
  margin-right: 16px;
  padding: 0;
  font-size: 0;
}

.alarm-list li .ico img {
  margin: 0;
  width: 16px;
  height: 16px;
}

.alarm-list li .subject {
  width: calc(100% - 40px);
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
  display: inline-block;
}

.alarm-list li .subject .s1 {
  color: var(--gray-color3);
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 400;
  padding-right: 50px;
}

.alarm-list li .subject .s2 {
  color: var(--gray-color5);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  /* display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; */
}

.alarm-list li .subject .s2.opened {
  height: auto;
  -webkit-line-clamp: inherit;
}

.alarm-list li .btn-view {
  margin-top: 12px;
  font-size: 12px;
  color: var(--gray-color5);
  font-weight: 400;
}

.alarm-list li .btn-more {
  margin-top: 12px;
  font-size: 12px;
  color: var(--gray-color5);
  font-weight: 400;
}

.alarm-list li .btn-more::before {
  content: "더보기";
  font-size: 12px;
}

.alarm-list li .btn-more.opened::before {
  content: "접기";
}

.alarm-list li .date {
  position: absolute;
  top: 21px;
  right: 24px;
  font-size: 14px;
  line-height: 120%;
  text-align: right;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
  text-align: left;
  display: inline-block;
}

.alarm-list li.new {
  background: var(--white-color1);
}

.alarm-list li.new .ico {
  background: var(--white-color);
}

.empty-report-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.empty-report {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.empty-report img {
  margin-bottom: 24px;
}

.empty-report .empty-report-text {
  font-weight: 800;
  font-size: 20px;
  line-height: 120%;
  text-align: center;
  letter-spacing: -0.6px;
  color: var(--gray-color4);
}

/* 선물하기 */

.gift-content-header {
  display: flex;
  justify-content: space-between;
}

.gift-content-header .header-title {
  font-size: 16px;
  font-weight: 700;
}

.gift-content-header p {
  font-size: 12px;
  font-weight: 400;
}

.selected-list {
  margin-bottom: 150px;
}

.selected-item {
  display: flex;
}

.selected-item .item-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  margin-right: 20px;
  flex-shrink: 0;
}

.selected-item .item-image img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.selected-item .item-misc .item-shop {
  font-size: 12px;
  font-weight: 400;
}

.selected-item .item-misc .item-desc {
  font-size: 16px;
  font-weight: 700;
}

.gift-finish .gift-finish-title {
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.gift-finish-title .imoji-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 4px;
}

.gift-finish-price {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.06;
}

.gift-fail .ask-center {
  font-size: 16px;
  font-weight: 400;
  color: var(--gray-color4);
}

.link-to-call {
  background-color: var(--white-color1);
  width: 183px;
  height: 37px;
  padding: 8px 16px;
  border-radius: 8px;
  margin: 0 auto;
  margin-top: 24px;
  margin-bottom: 125px;
}

.link-to-call a {
  font-size: 14px;
  color: var(--blue-color);
}

/* 출금 */
.account-info {
  position: relative;
}

.account-info.account-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.account-info .account-title {
  font-size: 18px;
  font-weight: 700;
}

.account-info .account-money {
  font-size: 26px;
  font-weight: 400;
  color: var(--blue-color);
}

.account-info .account-money span {
  font-size: 30px;
  font-weight: 800;
  color: var(--blue-color);
}

.account-info .account-info-misc {
  display: flex;
}

.account-info .check-button {
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  width: 72px;
  height: 36px;
  font-weight: 600;
  color: var(--gray-color3);
  padding: 9.5px 12px;
  background-color: var(--gray-color0);
  border-radius: 8px;
  margin-top: -8px;
}

.account-info-misc div {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.account-info-misc div img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.account-info-misc p {
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-color4);
}

.withdraw-account {
  margin-bottom: 84px;
}

.account-list {
  width: 100%;
  position: relative;
}

.account-list-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-color5);
  text-align: left;
}

.account-list .account-item {
  display: flex;
}

.account-item .item-logo {
  width: 42px;
  height: 42px;
  margin-right: 10px;
}

.account-item .item-logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.account-item .item-info .info-bank {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-color5);
}

.account-item .item-info .info-card-number {
  font-size: 14px;
  color: var(--gray-color3);
}

.account-item .item-icon {
  position: absolute;
  top: 8px;
  right: 3px;
}

.charge-list {
  display: flex;
  flex-direction: column;
}

.charge-list .charge-items {
  display: flex;
  algin-items: center;
  justify-content: space-between;
}

.charge-list .charge-items input[type="checkbox"] {
  display: none;
}

.charge-list .charge-items label {
  display: block;
  border: 1px solid var(--gray-color2);
  box-sizing: border-box;
  border-radius: 16px;
  padding: 16px;
  text-align: left;
  min-height: 80px;
  position: relative;
  width: 100%;
}

.charge-list .charge-items label .charge-money {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

.charge-list .charge-items label .charge-date,
.charge-list .charge-items label .charge-bank {
  position: relative;
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-color3);
}

.charge-list .charge-items label .charge-date {
  margin-right: 16px;
}

.charge-date::after {
  content: "";
  display: block;
  border-right: 1px solid var(--gray-color3);
  height: 10px;
  position: absolute;
  top: 6px;
  right: -11px;
}

.charge-list .charge-items input:checked + label::before {
  content: "";
  background-image: url(/v1/images/ic-radio-on-2048bbf21e6c2676e022ef3aec1d1db9.svg);
}

.charge-list .charge-items input:checked + label {
  background-color: var(--white-color1);
}

.charge-list .charge-items label::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 5px;
  background: url(/v1/images/ic-radio-off-aecd2a9c1dadac3c6b401b54c4214797.svg) no-repeat center;
}

/* 프로모션 */
.notice-wrap.promotion-notice-wrap {
  position: absolute;
  bottom: 5%;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 24px;
}

.notice-wrap .notice-box .notice-title {
  font-size: 16px;
  font-weight: 700;
}

.notice-wrap .notice-box .promotion-notice li {
  font-size: 14px;
  color: var(--gray-color3);
  line-height: 1.7em;
}

/* 탭 */
.tab-pane {
  display: none;
}

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

.content.tab-pane {
  padding-right: 0;
  padding-left: 0;
}

/* 06/30 서현수정 */

.mb95 {
  margin-bottom: 95px !important;
}

.w150 {
  width: 150px !important;
}

.img-rotate {
  width: 100%;
  height: auto;
  position: relative;
  object-fit: contain;
}

.card-wrap {
  margin-bottom: 16px;
  background: var(--white-color);
  background: var(--white-color);
  box-shadow: 0px 4px 12px var(--navy-overlay);
  border-radius: 12px;
}

.card-wrap .btn-wrap {
  padding: 0 20px 14px;
}

.main-wrap .card-wrap .head a {
  display: flex;
  position: relative;
  padding: 30px 29px 27px 28px;
  justify-content: space-between;
  align-items: center;
}

/* .main-wrap .card-wrap .head a::after{
  width: 42px;
  height: 42px;
  position: absolute;
  top: 24px;
  left: 28px;
  content: "";
  background: url(/v1/images/move/ic-cards-d418529667fb860cdcecdb76f25e6e1a.png)no-repeat center/cover;
} */

.main-wrap .card-wrap .head a .cardLeft {
}

.main-wrap .card-wrap .head a .cardLeft .textImgWrap {
  width: 121px;
  margin-bottom: 10px;
}

.main-wrap .card-wrap .head a .cardLeft .textImgWrap img {
  width: 100%;
  height: 100%;
}

.main-wrap .card-wrap .head a .cardLeft p {
  font-weight: 400;
  font-size: 12px;
  line-height: 120%;
  letter-spacing: -0.6px;
  color: var(--gray-color4);
}

.main-wrap .card-wrap .head a .cardLeft p strong {
  color: var(--gray-color5);
}

.main-wrap .card-wrap .head a .cardRight {
  width: 60px;
  height: 38px;
}

.main-wrap .card-wrap .head a .cardRight img {
  width: 100%;
  height: 100%;
}

.main-wrap .card-wrap .head h2 {
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 4px;
  line-height: 26px;
}

.main-wrap .card-wrap .head p {
  color: var(--gray-color4);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.card-wrap .btn-wrap .btn-primary {
  height: 60px;
  line-height: 60px;
}

h6.check-card {
  font-weight: 400;
  font-size: 22px;
  line-height: 30px;
  margin-bottom: 28px;
  text-align: center;
}

.done-check {
  padding-right: 30px;
  position: relative;
}

.done-check::after {
  width: 24px;
  height: 24px;
  margin-left: 6px;
  position: absolute;
  content: "";
  background: url(/v1/images/move/ic-done-check-6a676dd864ba0d99c4132db29377ac90.svg) no-repeat center/cover;
}

.sub-info {
  padding: 10px 16px 25px;
  display: block;
}

.delivery-badge {
  display: block;
  padding: 10px 12px;
  color: var(--blue-color);
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  background: var(--white-color1);
  border-radius: 8px;
}

.delivery-text {
  float: right;
  right: 0;
  margin-top: -16px;
  color: var(--blue-color);
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
}

.kona-card .affiliate-wrap {
  padding: 22px 0 22px 82px;
  text-align: left;
  position: relative;
}

.kona-card .affiliate-wrap.warn {
  padding: 22px 20px 22px 80px;
  display: flex;
  align-items: center;
  min-height: 84px;
}

.kona-card .affiliate-wrap.warn p {
  color: var(--gray-color3);
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.3px;
  margin-bottom: 15px;
}

.kona-card .affiliate-wrap::before {
  content: "";
  position: absolute;
  display: block;
  top: 22px;
  left: 20px;
  width: 42px;
  height: 42px;
  background: url(/v1/images/move/ic-cards-d418529667fb860cdcecdb76f25e6e1a.png) no-repeat center/cover;
}

.kona-card .affiliate-wrap.warn::before {
  width: 40px;
  height: 40px;
  background: url(/v1/images/move/ic-warn-7e6f28abdd47568a8b2e29a755d0ee41.png) no-repeat center/cover;
}

.kona-card .affiliate-wrap h2 {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 4px;
}

span.arrow-right {
  font-weight: 400;
  font-size: 14px;
  color: var(--gray-color3);
  line-height: 18px;
  vertical-align: top;
  padding-right: 22px;
}

span.arrow-right::after {
  width: 18px;
  height: 18px;
  vertical-align: top;
  line-height: 20px;
  margin-left: 4px;
  display: inline-block;
  position: absolute;
  content: "";
  background: url(/v1/images/move/ic-right-arrow-851cc4022a89965627d298a882454c0c.svg) no-repeat center/cover;
}

span.arrow-right.blue {
  color: var(--blue-color);
}

span.arrow-right.blue::after {
  background: url(/v1/images/move/ic-right-blue-169ae9739f69a9927ed709c8612c4241.svg) no-repeat center/cover;
}

.card-info {
  width: 100%;
}

.card-info a {
  display: block;
  position: relative;
  text-align: left;
  padding: 0 16px 24px;
  border-bottom: 1px solid rgba(241, 245, 249, 1);
}

.card-info h2 {
  color: var(--gray-color5);
  font-weight: 800;
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 6px;
}

.card-info p {
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: var(--gray-color4);
}

.card-info .btn-all {
  position: absolute;
  bottom: 35px;
  right: 5px;
}

.kona-card .quick-wrap {
  border-radius: 16px;
  background: var(--gray-color0);
  display: grid;
  width: 100%;
  height: 96px;
  margin-bottom: 20px;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 4px;
  align-items: stretch;
  justify-items: stretch;
}

.kona-card .quick-wrap li {
  text-align: center;
  position: relative;
}

.kona-card .quick-wrap li:not(:last-child)::after {
  position: absolute;
  width: 1px;
  height: 31px;
  background: var(--gray-color2);
  content: "";
  right: -6px;
  top: 32px;
}

.kona-card .quick-wrap li a {
  display: block;
  font-size: 0;
  height: 100%;
  border-radius: 8px;
}

.kona-card .quick-wrap li a:active {
  background: var(--navy-overlay);
}

.kona-card .quick-wrap li i {
  width: 24px;
  height: 24px;
  display: inline-block;
  margin-bottom: 8px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 23px;
}

.kona-card .quick-wrap li .i-history {
  background-image: url(/v1/images/ic-quick-history-63261b394ab4ff09cd8565911ec3db1e.svg);
}

.kona-card .quick-wrap li .i-benefit {
  background-image: url(/v1/images/ic-quick-benefit-5e5f7253c6236f85e1bb0e16b12c5cac.svg);
}

.kona-card .quick-wrap li .i-withdraw {
  background-image: url(/v1/images/move/ic-quick-download-d3429aaa9d65102a8574b55af22be48e.svg);
}

.kona-card .quick-wrap li p {
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  letter-spacing: -0.5px;
}

.lost-ing a::after {
  content: "분실 신고중";
  color: var(--blue-color);
  float: right;
  padding-right: 26px;
  font-size: 14px;
  font-weight: 400;
}

.radio-wrap.smaller li input[type="radio"] ~ label {
  min-height: 72px;
}

.radio-wrap.smaller li input[type="radio"] ~ label i {
  width: 40px;
  height: 40px;
}

.radio-wrap.smaller li p {
  font-size: 16px;
  font-weight: 400;
  display: inline-block;
  vertical-align: middle;
}

.list-e-wrap.left-check {
  margin: 0;
}

.list-e-wrap.left-check li input[type="radio"] ~ label:active {
  background-color: var(--white-color);
}

.list-e-wrap.left-check li input[type="radio"] ~ label::after {
  background: url(/v1/images/move/ic-radio-off2-e4066baf211858abf76f33c11bffeacc.svg) no-repeat center;
  top: 50%;
  left: 0;
}

.list-e-wrap.left-check li input[type="radio"]:checked ~ label {
  background: var(--white-color);
  color: inherit;
}

.list-e-wrap.left-check li input[type="radio"]:checked ~ label::after {
  background-image: url(/v1/images/ic-radio-on2-eb4834060cca97f7515471af9892c909.svg);
}

.list-e-wrap.left-check li input[type="radio"] ~ label h4 {
  padding-left: 32px;
}

p.exclamation {
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
  position: relative;
  padding-left: 22px;
}

p.exclamation::before {
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  vertical-align: top;
  left: 0;
  background: url(/v1/images/move/ic-exclamation-ea23ca60ece69a32fb14fa67c41711fd.svg) no-repeat center/cover;
}

.card-info .card-black {
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  color: #1b2537;
  margin-bottom: 13px;
}

.px0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.po-bottom2.revise {
  width: 100% !important;
  left: initial;
}

.signInIcon {
  width: 48px;
  height: 48px;
  margin-right: 16px;
}

.bottom-cont.maxSize {
  padding-bottom: 16px;
}

.bottom-cont.maxSize .input-wrap {
  margin-top: 8px;
}

.bottom-cont.maxSize .input-wrap input[type="search"] {
  width: 100%;
}

/* .bottom-cont.maxSize .bankSelectList {height:75vh; overflow-y:scroll;} */
.bottom-cont.maxSize .bankSelectItem {
}

.bottom-cont.maxSize .bankSelectItem .itemWrap {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 14px 0px;
  border-radius: 14px;
  overflow: hidden;
}

.bottom-cont.maxSize .bankSelectItem .imgWrap {
  width: 42px;
  height: 42px;
  margin-right: 16px;
}

.bottom-cont.maxSize .bankSelectItem .imgWrap img {
  width: 100%;
  height: 100%;
}

.bottom-cont.maxSize .bankSelectItem .bankTitle {
  font-weight: 600;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
}

a {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /*     -webkit-user-select: none; */
  /*     -moz-user-select: none; */
  /*     -ms-user-select: none; */
  /*     user-select: none; */
}

#onboading .onboadingNecc {
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.3px;
  color: var(--red-color);
  margin-top: 4px;
}

#onboading .essential {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.3px;
  color: var(--red-color);
  vertical-align: bottom;
  margin-left: 4px;
}

/* 에러페이지 */
.error-wrap {
  text-align: center;
}

.error-wrap .imgWrap {
  margin: 100px auto 24px;
  width: 134px;
  height: 134px;
}

.error-wrap .imgWrap img {
  width: 100%;
  height: 100%;
}

.error-wrap .imgWrap + p {
  font-weight: 800;
  font-size: 44px;
  line-height: 120%;
  letter-spacing: -0.6px;
  color: var(--gray-color5);
}

.error-wrap .notice {
  margin: 8px 0 0;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 120%;
  letter-spacing: -0.6px;
  color: var(--gray-color3);
}

.error-wrap .btn {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  height: 56px;
  background: var(--blue-color);
  border-radius: 16px;
  color: var(--white-color);
}

/* 약관 */
#terms-frame {
  height: calc(100vh - 56px - 92px);
  margin-top: 56px;
}

.wrap.terms.ptNone,
.wrap.ptNone {
  padding-top: 0;
}

.content.term {
}

.term .contentTop {
  margin-bottom: 40px;
}

.term .contentTop .termsTitle {
  font-weight: 800;
  font-size: 24px;
  line-height: 120%;
  letter-spacing: -0.6px;
  color: var(--gray-color5);
  margin-bottom: 8px;
}

.term .contentTop .date {
  font-weight: 400;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
}

.term .contentBody {
}

.term .contentBody .termSummary {
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
  margin-bottom: 32px;
}

.term .contentBody .termItems {
  margin-bottom: 32px;
}

.terms .contentBody .termItems:last-child {
  margin-bottom: 0;
}

.term .contentBody .termItems .itemHeader {
  font-weight: 700;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: -0.3px;
  color: #333d4b;
  margin-bottom: 16px;
}

.term .contentBody .termItems .itemHeader .numbering {
  color: var(--blue-color);
  margin-right: 8px;
}

.term .contentBody .termItems .itemHeader .text {
}

.term .contentBody .termItems .itemContent {
  padding: 16px;
  background: var(--gray-color0);
  border-radius: 10px;
}

.term .contentBody .termItems .itemContent .itemText {
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
}

.term .contentBody .termItems .itemContent .itemText .subTitle {
  display: inline-block;
  margin-bottom: 8px;
}

.tableWrap .termTable {
  text-align: center;
  font-size: 14px;
}

.tableWrap {
  margin-top: 24px;
}

.tableWrap .termTable thead {
}

.tableWrap .termTable tr {
}

.tableWrap .termTable th {
  border: 1px solid rgba(210, 213, 219, 0.94);
  background: rgba(210, 213, 219, 0.94);
  padding: 2px 6px;
  vertical-align: middle;
}

.tableWrap .termTable td {
  vertical-align: middle;
  padding: 2px 6px;
  border: 1px solid rgba(210, 213, 219, 0.94);
}

.term .buttonWrap .btn {
  font-weight: 600;
  font-size: 16px;
  line-height: 120%;
  text-align: center;
  letter-spacing: -0.3px;
  color: var(--white-color);
}

.termItems .sectionTitle {
  font-weight: 800;
  font-size: 19px;
}

/*현장결제 QR 코드 바텀시트 */
.qr_img_box {
  position: relative;
}

.qr_img_box .reload {
  text-indent: -9999px;
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  background: url("/v1/images/ic-qrRefresh-0e044e49427a4be947392b68c46daa47.png") no-repeat center;
  background-size: 40px 40px;
  backdrop-filter: blur(4px);
}

.qr_img_box.refresh .reload {
  display: block;
}

#mmbrNm {
  margin-bottom: 70px;
}

.oneOnOne {
  font-weight: 600;
  font-size: 16px;
  line-height: 27px;
  letter-spacing: 0.3px;
}

.header {
  display: flex;
  position: relative;
  height: 56px;
  justify-content: center;
  align-items: center;
}

.header.fakeHeader {
  justify-content: space-between;
  height: 100px;
  padding: 24px 20px 0;
}

.header.fakeHeader .fakeTitle {
  font-weight: 700;
  font-size: 28px;
  line-height: 36px;
  color: var(--black-color);
}

.header.fakeHeader .goToAlarm {
  position: relative;
  text-indent: -9999px;
  width: 40px;
  height: 40px;
  background: url(/v1/images/ic-alarm-26d8acb06f1105df804cc34be942f884.png) no-repeat center;
  background-size: 28px;
}

.header.fakeHeader .goToAlarm:active {
  background-color: var(--white-color);
  border-radius: 8px;
}

.header.fakeHeader .goToAlarm.new::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  background: var(--red-color);
  border-radius: 50%;
  position: absolute;
  top: 4px;
  right: 6px;
}

.header .mainTitle {
  font-weight: 600;
  font-size: 18px;
  line-height: 120%;
  text-align: center;
  letter-spacing: -0.6px;
  color: var(--gray-color5);
}

.header .headerLeftBtn,
.header .headerRightBtn {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.header .headerLeftBtn {
  left: 24px;
}

.header .headerLeftBtn.headerBack {
  background: url(/v1/images/ic-arrowBack-dc2f4442e432e0d72d813f3bfc79af72.png) no-repeat center;
  background-size: 100%;
}

.login .header .headerLeftBtn.headerBack {
  background: url(/v1/images/ic-arrowBackWhite-faea7b8974994720aef018f331bc1644.png) no-repeat center;
  background-size: 100%;
}

.header .headerRightBtn {
  right: 24px;
}

.header .headerRightBtn.headerClose {
  background: url(/v1/images/ic-headerClose-167e50a57bdfb38f2344a72669f685a0.png) no-repeat center;
  background-size: 100%;
}

.contentWrap {
  position: relative;
  min-height: calc(100vh - 56px - var(--safeAreaInsetBottom));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.contentWrap.fakeHeader {
  min-height: calc(100vh - 74px - var(--safeAreaInsetBottom));
}

.content {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
  padding: 20px 20px calc(40px + var(--safeAreaInsetBottom));
}

.contentWrap.withoutHeader {
  min-height: calc(100vh - var(--safeAreaInsetBottom));
}

.content.ptNone {
  padding-top: 0;
}

.content.pdNone {
  padding: 0;
}

.content.pt22 {
  padding-top: 22px;
}

.content.pd20 {
  padding: 20px;
}

.stickyButtonWrap {
  position: sticky;
  z-index: 110;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 24px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0px,
    white 10px
  );
}

.stickyButtonWrap::after {
  content: "";
  display: block;
  height: env(safe-area-inset-bottom);
  min-height: 16px;
  background: var(--white-color);
}

/* 모달 팝업  */
.modal {
}

.modal.is-open .modalContent {
  display: block;
}

.modalContent {
  display: none;
  z-index: 2000;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 327px;
  background: var(--white-color);
  box-shadow: 0px 0px 20px rgba(13, 10, 25, 0.06);
  border-radius: 20px;
  padding: 24px 24px 20px;
}

.modalContent .modalHeader {
  font-weight: 700;
  font-size: 18px;
  line-height: 120%;
  text-align: center;
  letter-spacing: -0.6px;
  color: var(--gray-color5);
}

.modalContent.grayBox .modalHeader {
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--gray-color5);
}

.modalContent .modalText {
  font-weight: 400;
  font-size: 16px;
  line-height: 120%;
  text-align: center;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
  margin-top: 20px;
}

.modalContent.grayBox .modalText {
  padding: 16px;
  background: var(--gray-color0);
  border-radius: 10px;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
  text-align: left;
}

.modalContent .buttonRow {
  display: flex;
  width: 100%;
  margin-top: 24px;
}

.modalContent .buttonRow .btn.btn-primary,
.modalContent .buttonRow .btn.btn-soft {
  border-radius: 12px;
  height: 48px;
  flex: 1;
  flex-shrink: 0;
}

.modalContent .buttonRow .btn.btn-soft {
  margin-right: 8px;
}

.modal .modalContent .modalBtn {
  display: inline-block;
  padding: 8px 16px;
  background: var(--white-color1);
  border-radius: 8px;
  font-weight: 600;
  font-size: 12px;
  line-height: 150%;
  color: var(--blue-color);
}

/* 배지  */
.badge {
  display: inline-flex;
  height: 23px;
  align-items: center;
  font-weight: 700;
  font-size: 12px;
  line-height: 23px;
  text-align: center;
  letter-spacing: -0.3px;
  padding: 4px 6px;
  border-radius: 50px;
}

.badge.type-1 {
  background: var(--white-color1);
  color: var(--blue-color);
}

.badge.type-2 {
  font-weight: 400;
  font-size: 11px;
  background: var(--gray-color4);
  color: var(--white-color);
  padding: 4px 6px;
}

.badge.type-3 {
  background: var(--white-color2);
  color: var(--orange-color);
}

/* 제이쿼리 데이트피커 커스텀 */
.ui-datepicker-inline.ui-datepicker.ui-widget.ui-widget-content {
  /* 데이트피커 wrap */
  width: 100%;
  min-height: 313px;
  padding: 20px 16px;
  border: none;
}

.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all {
  /* 달력 헤더  */
  background: var(--white-color);
  border: none;
  padding: 0;
  margin-bottom: 8px;
}

.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all
  .ui-datepicker-title {
  /* 헤더 타이틀  */
  margin: 0;
  text-align: left;
  font-weight: 700;
  font-size: 18px;
  line-height: 140%;
  color: var(--gray-color5);
}

.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all
  .ui-datepicker-prev.ui-corner-all {
  /* 이전 월 이동 버튼  */
  display: block;
  left: initial;
  right: 40px;
  width: 20px;
  height: 20px;
  background: url(/v1/images/chevron-left-date-829cf60b2021b4f7caf20f1a62aa9dc6.png) no-repeat center;
  background-size: 100%;
}

.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all
  .ui-datepicker-next.ui-corner-all {
  /* 다음 월 이동 버튼  */
  display: block;
  width: 20px;
  height: 20px;
  background: url(/v1/images/chevron-left-date-829cf60b2021b4f7caf20f1a62aa9dc6.png) no-repeat center;
  background-size: 100%;
  transform: rotate(180deg);
}

.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all
  .ui-datepicker-prev.ui-corner-all
  span,
.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all
  .ui-datepicker-next.ui-corner-all
  span {
  display: none;
}

.ui-datepicker-calendar thead th {
  /* 달력 요일들  */
  padding: 0;
  width: 40px;
  height: 40px;
  vertical-align: middle;
}

.ui-datepicker-calendar tbody td {
  /* 달력 날짜 감싸는 wrap  */
  width: 40px;
  height: 40px;
}

.ui-datepicker-calendar tbody td .ui-state-default {
  /* 달력 날짜 입력부분  */
  background: var(--white-color);
  border: none;
  padding: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 100%;
  font-weight: 400;
  color: var(--gray-color3);
}

.ui-datepicker-calendar tbody td .ui-state-default.ui-state-highlight {
  /* 오늘날짜 강조  */
  font-weight: 700;
}

.ui-datepicker-calendar tbody td .ui-state-default.ui-state-active {
  /* 날짜 클릭했을때  */
  background: var(--white-color1);
  font-weight: 700;
  color: var(--blue-color);
  border-radius: 20px;
}

/* 데이트 레인지 피커 daterangepicker 커스텀  */

.daterangepicker.ltr.show-calendar.openscenter {
  /* 피커 달력 wrap  */
  display: block !important;
  border: none;
  width: 100%;
  font-weight: 600;
  font-size: 12px;
  line-height: 150%;
  color: var(--gray-color5);
  margin: 0 auto;
  max-width: 320px;
}

.daterangepicker.show-calendar .ranges {
  margin: 0;
}

.daterangepicker {
  position: static;
}

.daterangepicker .drp-calendar.left {
  width: 100%;
  max-width: initial;
  padding: 0;
  margin: 0;
}

.daterangepicker.show-calendar .drp-calendar.right {
  display: none;
}

.daterangepicker.show-calendar .drp-buttons {
  /* display: none; */
  border: none;
  padding: 0;
}

.daterangepicker.show-calendar .drp-buttons .drp-selected,
.daterangepicker.show-calendar .drp-buttons .cancelBtn {
  display: none;
}

.daterangepicker.show-calendar .drp-buttons .applyBtn {
  display: none;
  /*margin: 0;*/
  /*display: inline-flex;*/
  /*align-items: center;*/
  /*justify-content: center;*/
  /*height: 56px;*/
  /*border-radius: 15px;*/
  /*font-size: 16px;*/
  /*background-color: var(--blue-color);*/
}

.daterangepicker .calendar-table table.table-condensed {
  /* 레인지 피커 달력 테이블 */
  position: relative;
  width: auto;
  margin: 0 auto;
}

.daterangepicker .calendar-table table.table-condensed thead tr:first-child {
  position: relative;
}

.daterangepicker .calendar-table table.table-condensed thead th {
  width: 40px;
  height: 40px;
  font-weight: 600;
  font-size: 12px;
  line-height: 150%;
  color: var(--gray-color5);
  border: none;
}

.daterangepicker .calendar-table table.table-condensed thead .month {
  /* 달력 타이틀  */
  font-weight: 700;
  font-size: 18px;
  line-height: 140%;
  color: var(--gray-color5);
}

.daterangepicker .calendar-table table.table-condensed thead .prev {
  /* 이전 달력 버튼  */
  /* position: absolute;
    right: 40px; */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: url(/v1/images/chevron-left-date-829cf60b2021b4f7caf20f1a62aa9dc6.png) no-repeat center;
  background-size: 20px;
}

.daterangepicker .calendar-table table.table-condensed thead .next {
  /* 다음 달력 버튼  */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: url(/v1/images/chevron-left-date-829cf60b2021b4f7caf20f1a62aa9dc6.png) no-repeat center;
  background-size: 20px;
  transform: rotate(180deg);
}

.daterangepicker .calendar-table table.table-condensed thead .prev span,
.daterangepicker .calendar-table table.table-condensed thead .next span {
  display: none;
}

.daterangepicker .calendar-table table.table-condensed tbody td {
  width: 40px;
  height: 40px;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  text-align: center;
  color: var(--gray-color4);
  border: none;
}

.daterangepicker
  .calendar-table
  table.table-condensed
  tbody
  td.start-date.end-date {
  background: var(--white-color);
  font-weight: 700;
}

.daterangepicker
  .calendar-table
  table.table-condensed
  tbody
  td.in-range.available {
  background: var(--white-color1);
  border-radius: 50%;
  background: url(/v1/images/img-rangeActive-f2a379d8874249c77394573867c7a25e.png) no-repeat center;
  background-size: 90%;
}

.daterangepicker
  .calendar-table
  table.table-condensed
  tbody
  td.active.start-date,
.daterangepicker .calendar-table table.table-condensed tbody td.active.end-date,
.daterangepicker .calendar-table table.table-condensed tbody td.active:hover {
  /* background: var(--white-color1); */
  background: url(/v1/images/img-dateActive-ced0422e358dcb379798dfde965bebcd.png) no-repeat center;
  background-size: 90%;
  border-radius: 50%;
  color: var(--blue-color);
  font-weight: 700;
}

.daterangepicker .calendar-table table.table-condensed tbody td.today {
  color: var(--gray-color3);
  font-weight: 700;
  background: var(--white-color);
}

.daterangepicker.openscenter:after,
.daterangepicker.openscenter:before {
  content: initial;
}

.daterangepicker td.off {
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}

/* 스와이퍼  */
.swiperWrap {
  position: relative;
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: initial;
}

/* 팝업  */
.pop-message .message-box h2 {
  margin-bottom: 24px;
}

.pop-message .grayBox {
  display: block;
  height: 100%;
  background: var(--gray-color0);
  border-radius: 10px;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
}

.flex-bt {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-bt button:first-child {
  margin-right: 8px;
}

.wrap.terms.ptNone,
.wrap.ptNone {
  padding-top: 0;
}

.term .contentTop {
  margin-bottom: 40px;
}

.term .contentTop .termsTitle {
  font-weight: 800;
  font-size: 24px;
  line-height: 120%;
  letter-spacing: -0.6px;
  color: var(--gray-color5);
  margin-bottom: 8px;
}

.term .contentTop .date {
  font-weight: 400;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: var(--gray-color4);
}

.term .contentBody .termSummary {
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
  margin-bottom: 32px;
}

.term .contentBody .termItems {
  margin-bottom: 32px;
}

.terms .contentBody .termItems:last-child {
  margin-bottom: 0;
}

.term .contentBody .termItems .itemHeader {
  font-weight: 700;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: -0.3px;
  color: #333d4b;
  margin-bottom: 16px;
}

.term .contentBody .termItems .itemHeader .numbering {
  color: var(--blue-color);
  margin-right: 8px;
}

.term .contentBody .termItems .itemContent {
  padding: 16px;
  background: var(--gray-color0);
  border-radius: 10px;
}

.term .contentBody .termItems .itemContent .itemText {
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: -0.3px;
  color: var(--gray-color5);
}

.term .contentBody .termItems .itemContent .itemText .subTitle {
  display: inline-block;
  margin-bottom: 8px;
}

.onWrap .top {
  position: relative;
  background: var(--white-color1);
  padding-top: 40px;
  height: 52vh;
}

.onWrap .top .imgWrap {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-48%);
  width: 279px;
  height: 377px;
  margin: 0 auto;
}

.onWrap .top .imgWrap img {
  width: 100%;
  height: 100%;
}

.onWrap .bottom {
  padding-top: 60px;
  text-align: center;
}

.onWrap .bottom h5 {
  font-weight: 800;
  font-size: 26px;
  line-height: 120%;
  letter-spacing: -0.6px;
  color: #282828;
  margin-bottom: 12px;
}

.onWrap .bottom p {
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: -0.5px;
  color: #808080;
}

.flex-0.pd24 {
  padding: 0 2.4rem 1rem;
  position: sticky;
  bottom: 0;
}

.po-bottom2 {
  position: sticky;
  bottom: 0.8rem;
}

header {
  display: block;
  height: 56px;
  /* line-height: 56px; */
  padding: 0 24px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--white-color);
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  box-sizing: border-box;
  z-index: 10;
}
.wrap.gray header {
  background: var(--gray-color0);
}
header .btn-prev {
  font-size: 0;
  width: 24px;
  height: 24px;
  background: url(/v1/images/ic-prev-arrow-086079e4428b3de1a36778e7d1cde756.svg) no-repeat center;
  background-size: 100% 100%;
  display: inline-block;
  border: none;
  padding: 0;
  vertical-align: middle;
  position: absolute;
  top: 16px;
  left: 24px;
}
header .btn-prev:active {
  background-color: var(--navy-overlay);
}
header .btn-select {
  display: inline-block;
  background: url(/v1/images/ic-select-arrow-d091986d00e935bb92724b90826f2366.svg) no-repeat calc(100% - 20px) 50%
    var(--white-color);
  background-size: 16px 16px;
  width: auto;
  box-sizing: border-box;
  padding: 0 40px 0 18px;
  color: var(--gray-color5);
  vertical-align: middle;
  font-size: 16px;
  letter-spacing: -0.3px;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
}
header .btn-search {
  font-size: 0;
  width: 24px;
  height: 24px;
  background: url(/v1/images/ic-search-header-0fbf5ff7c31ffbb4e1b6c2fd516807f4.svg) no-repeat center;
  background-size: 100% 100%;
  display: inline-block;
  border: none;
  padding: 0;
  vertical-align: middle;
  position: absolute;
  top: 16px;
  right: 24px;
}
header .btn-search:active {
  background-color: var(--navy-overlay);
}
header select,
header .select {
  border: none !important;
  padding-right: 40px;
}
header .btn-home {
  display: inline-block;
  text-indent: -9999px;
  width: 112px;
  height: 16px;
  background: url(../images/payrokLogo.png) no-repeat center;
  background-size: 100%;
}
header .btn-close {
  font-size: 0;
  width: 14px;
  height: 14px;
  background: url(/v1/images/ic-pop-close-3d98d8c0cd3dc5d22d1143fe646a50f3.svg) no-repeat center;
  background-size: 100% 100%;
  display: inline-block;
  border: none;
  padding: 0;
  position: absolute;
  top: 16px;
  left: 24px;
}
header .btn-close-x {
  position: absolute;
  top: 16px;
  right: 24px;
  padding: 12px;
  font-size: 0;
  background-image: url("/v1/images/ic-close-x-a8e19ffd68232926a2e5135c47f1e6f1.svg");
  background-repeat: no-repeat;
}
header .btn-close.right {
  left: auto;
  right: 24px;
  top: 21px;
}
header .left {
  position: absolute;
  left: 24px;
  top: 21px;
}

.bottom-btn {
  position: fixed; /* 화면에 고정 */
  bottom: 0; /* 화면 하단에 위치 */
  left: 0;
  width: 100%; /* 너비를 100%로 설정 */
  padding: 10px; /* 적절한 여백 */
  background: #fff;
}


/* 추가 */
.board-type{
  display: flex;
  align-items: center;
}
.board-type:hover{
  background-color: var(--white-color1);
  cursor: pointer;
}
.board-type .movingWidth{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px !important;
}
.notice-list .board-type:last-child::after{
  display: none;
}
.board-type .movingWidth .subject{
  font-weight: 500;
  color: var(--black-color);
}
.icon{
  display: inline-block;
}
.ic-chevron-right-24{
  width: 24px;
  height: 24px;
  background: url('/v2/images/ic-chevron-right-24-ec84fb31d317b3a97dd89a113f1759bb.svg') no-repeat center/contain;
}
.ic-equal-24{
  margin-left: 20px;
  width: 24px;
  height: 24px;
  background: url('/v2/images/ic-equal-24-52a86f500ab0293c44705f725a96e3fe.svg') no-repeat center/contain;
}
.ic-arrow-down-black-20{
  width: 20px;
  height: 20px;
  background: url('/v2/images/ic-arrow-down-black-20-515a792429f82ea4aeaaafe45b94f698.svg') no-repeat center/contain;
}
.col-primary{
  color: var(--main-color) !important;
}
.board-ty-tit{
  font-size: 14px;
  color: var(--gray-color3);
  line-height: 20px;
}
.board-ty{
  font-size: 14px;
  color: var(--black-color);
  font-weight: 500;
  line-height: 20px;
}
.qna-wrap{
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}
.qna-wrap .qna-cate{
  font-size: 14px;
  color: var(--gray-color4);
  line-height: 20px;
}
.qna-wrap .qna-cont{
  padding: 0;
  font-size: 16px;
  color: var(--black-color);
  line-height: 24px;
}
.qna-wrap + .qna-wrap{
  margin-top: 16px;
}

.note-editable{
  font-size: 14px;
}


.menu-detail{
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  padding: 16px;
}
.menu-detail .menu-title{
  font-size: 14px;
  color: var(--gray-color3);
  line-height: 20px;
}
.menu-detail .info-subtext{
  font-size: 14px;
  color: var(--black-color);
  line-height: 20px;
}


  .coupon-card.active .coupon-header{
    border-bottom: none;
  }


  .overflow-hidden{
      overflow: hidden;
  }

  .no-data{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      row-gap: 20px;
      padding-top: 87px;
  }
  .no-data .no-coupons{
      font-size: 20px;
      color: #8E9BAE;
      line-height: 26px;
      font-weight: 500;
  }

.tab-tag-tit::-webkit-scrollbar {
    display: none;
}