@charset "UTF-8";
@import url(../fonts/pretendard/pretendard-subset.min.css);
@import url(../fonts/kanit/kanit.min.css);
@import url(../fonts/scdream/scdream.min.css);
@import url(../fonts/gmarketsans/gmarketsans.min.css);
@import url(../fonts/notosanskr/notosanskr.min.css);
@import url(../fonts/paperlogy/paperlogy.css);
 /**
* ====================== TABLE OF INDEX ======================
* - #RESET
* - #FORM
* - #LAYOUT
* - #COMPONENT
* - #CONTENT
* - #010PAY App.
* - #CUSTOM UI
* - #UTILITY
* ============================================================
*/

/* #RESET
------------------------------------------------------------*/
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-font-smoothing: antialiased;
}
html {
  -ms-touch-action: none;
}
body,
p,
ul,
menu,
ol,
li,
dl,
dt,
dd,
form,
table,
th,
td,
fieldset,
input,
textarea,
select,
button,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
address,
i,
svg {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
body {
  background-color: #fff;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #575757;
  word-break: keep-all;
}
header,
footer,
section,
article,
aside,
nav,
hgroup,
details,
menu,
figure,
figcaption {
  display: block;
  margin: 0;
  padding: 0;
}
fieldset,
img {
  border: 0;
}
img {
  vertical-align: top;
  -ms-interpolation-mode: bicubic; /* ie 이미지 계단 현상 해결 */
}
img,
video,
audio,
object,
embed,
iframe {
  max-width: 100%;
}
caption,
legend {
  width: 0;
  height: 0;
  line-height: 0;
  visibility: hidden;
  overflow: hidden;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
ul,
ol,
menu {
  list-style: none;
}
a {
  color: #575757;
  text-decoration: none;
  cursor: pointer;
}
address,
em,
i {
  font-style: normal;
}
del {
  text-decoration: none;
}
button {
  overflow: hidden;
  border: 0;
  background: none;
}
h1,
h2,
h3,
h4,
h5 {
  color: #151515;
  font-weight: 700;
  line-height: 1.2;
}
pre {
  word-break: break-all;
  white-space: pre-line;
}
strong {
  font-weight: 700;
}
/*:focus { outline: 0; } */

/* font family */
body,
table,
label,
select,
textarea,
button {
  font-family: "Pretendard", "Malgun Gothic", "Dotum", "Apple SD Gothic Neo",
    sans-serif !important;
}
input {
  font-family: "Pretendard", "Malgun Gothic", "Dotum", "Apple SD Gothic Neo",
    sans-serif !important;
}

/* 전체(Kanit 숫자 우선) */
.price,
.pay-sec dd,
.pay-sec .form-desc em:not(.text-brand),
.refund-result dd,
.home-sec .list-now dd,
.pay-info dd,
.account-auth .account-box.detail .value,
.used-sec h4, /* 이용내역 목록 날짜 */

/* 전체(Roboto 숫자, 영문 우선) */
.text-brand,
.home-sec .faq-slide,
.pop-ad,
.pay-sec .form-desc .btn-account em {
  font-family: "Pretendard";
}

/* #FORM
------------------------------------------------------------*/
label,
input,
select,
textarea,
button {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  letter-spacing: -0.02em;
  vertical-align: top;
}
label,
input,
select,
.select,
textarea {
  outline: none;
  font-size: 16px;
  font-weight: 400;
}
label,
select,
textarea,
button input,
select,
textarea,
button {
  color: #151515;
}
textarea {
  padding: 10px;
  width: 100%;
  border: 1px solid #d4d4d4;
  resize: none;
}
input[type="image"],
input[type="submit"],
input[type="cancel"],
label,
button,
select {
  cursor: pointer;
}
input:disabled,
select:disabled,
textarea:disabled,
input[readonly],
select[readonly],
textarea[readonly],
.disabled,
.readonly {
  background-color: #fff;
  color: #8d8d8d;
  opacity: 1;
}
code {
  padding: 2px 4px;
  background-color: #f9f2f4;
  font-size: 96%;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  color: #c7254e;
}

/* ----- input, select ----- */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
.input,
select,
.select {
  display: inline-block;
  width: 100%;
  height: 70px;
  vertical-align: top;
}
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
select,
.select {
  padding: 4px;
  line-height: 71px;
  caret-color: #151515;
}
.input input[type="text"],
.input input[type="password"],
.input input[type="number"],
.input input[type="email"],
.input input[type="tel"],
.input select,
.input .select {
  border: 0;
  background-color: transparent;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus,
.input.focus {
  border-color: #151515 !important;
  z-index: 2;
}
.label-n.type-timer.label-error input[type="text"].custom-input.focus,
.label-n.type-timer.label-error input[type="tel"].custom-input.focus,
.input-container.text-error input[type="text"].custom-input.focus,
.input-container.label-error input[type="number"].custom-input.focus {
  border: 1px solid #ff0000 !important;
}
select,
.select {
  padding-right: 28px;
  overflow: hidden;
  /* background: transparent url("../images/select-bg.png?ver=20221012") right center no-repeat; */
  background-size: 20px auto;
  text-align: left;
  white-space: nowrap;
}
select:disabled,
.select:disabled,
select[readony],
.select[readony] {
  cursor: default;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: #000;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
  box-shadow: 0 0 0px 1000px #fff inset;
}

/* input number */
input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
}

/* input help */
.input-help input {
  text-align: center;
}

/* size */
.input-text-lg {
  font-size: 19px;
}

/* input box(입금자명) */
.input-box {
  height: auto;
  padding: 13px 20px;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
}
.input-box.focus {
  border-color: #151515;
  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.input-box .label {
  color: #151515;
  font-size: 13px;
}
.input-box input {
  margin-top: 7px;
  padding-left: 0;
  padding-right: 0;
  font-size: 19px;
}

.container[data-group] + .container[data-group] {
  margin-top: 16px;
}

/* ----- select ----- */

/* common */
.mb-20 {
  margin-bottom: 20px;
}
.mt-30 {
  margin-top: 30px;
}
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: start;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.justify-start {
  justify-content: start;
}

.input .select:focus {
  outline: none;
}
.gap-x-1 {
  column-gap: 4px;
}
.gap-x-2 {
  column-gap: 8px;
}
.gap-x-3 {
  column-gap: 12px;
}
.gap-x-4 {
  column-gap: 16px;
}
.mt-auto {
  margin-top: auto !important;
}
.ml-2 {
  margin-left: 2px;
}
.mr-2 {
  margin-right: 2px;
}
.relative {
  position: relative;
}
.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}
.red-text {
  color: #FC0626;
}
.d-block {
  display: block !important;
}
.d-none {
  display: none !important;
}
.text-center {
  text-align: center !important;
}

/* select-box (통신사 + 휴대폰번호, 은행 + 계좌번호) */
.select-box {
  position: relative;
}
.select-box .label {
  display: flex;
  align-items: center;
  width: inherit;
  height: inherit;
  border: 0 none;
  outline: 0 none;
  padding-left: 15px;
  background: transparent;
  cursor: pointer;
  color: #B0B0B3;
  max-width: inherit;
  font-family: Pretendard;
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
  text-align: left;
  width: 100%;
  height: 70px;
  font-size: 20px;
  border: 1px solid #ddd;
  border-radius: 12px;
  outline: none;
  font-weight: 700;
  background: #fff url("../images/common/icon-arrow-down.svg") right 16px center
    no-repeat;
}
.select-box .option-list {
  position: absolute;
  top: 51px;
  left: -1px;
  width: 332px;
  background: #fff;
  color: #333;
  list-style-type: none;
  padding: 0;
  border-radius: 5px;
  overflow: hidden;
  max-height: 0;
  padding: 20px 10px;
  display: none;
  z-index: 1;
}
.select-input input {
  float: right;
  width: 52%;
}
.select-box .floating-label {
  display: none;
}
.select-box.comp .floating-label {
  display: block;
  top: 20.5px;
}
.select-box.comp .label {
  padding-bottom: 10.5px;
  padding-top: 29.5px;
  color: #222;
  line-height: 28px;
  height: auto;
}

/* select small */
.select-box.small .label {
  height: 52px;
  padding-top: 11.5px;
  padding-bottom: 11.5px;
  font-size: 16px;
  font-weight: 400;
  line-height: 21.6px;
  text-align: left;
}
.select-box.small .label.select {
  color: #151515;
}
.select-box.small .label.select .icon-check-on {
}
.select-box.small.comp .floating-label {
  display: none;
}
/* //select small */

/* ----- checkbox, radio ----- */
.checkbox {
  position: relative;
  display: inline-block;
  vertical-align: top;
}
.checkbox > input[type="checkbox"],
.checkbox > input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  font-size: 0;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.checkbox > input + label:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: block;
  width: 24px;
  height: 24px;
  background: url("../images/common/icon-checkbox-off.svg") no-repeat center /
    contain;
  z-index: 2;
}
.checkbox > input[type="radio"] + label:before {
  background: url("../images/common/icon-radio-off.svg") no-repeat center /
    contain;
}
.checkbox.child .arrow-right {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  transform: none;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
}
.checkbox.child .arrow-right {
  width: 20px;
  height: 20px;
  background-image: url("../images/common/icon-arrow-right.svg");
  background-size: 16px;
}
.checkbox > input:checked + label:before {
  background: url("../images/common/icon-checkbox-on.svg") no-repeat center /
    contain;
}
.checkbox > input[type="radio"]:checked + label:before {
  background: url("../images/common/icon-radio-on.svg") no-repeat center /
    contain;
}
.checkbox > input + label {
  padding-left: 32px;
}
.checkbox.child > input + label {
  font-size: 12px;
  color: #575757;
  font-weight: 400;
  padding-left: 32px;
}
.checkbox.child > input + label:before {
  top: 1px;
  transform: none;
  background-image: url("../images/common/icon-check-off.svg");
  width: 24px;
  height: 24px;
}
.checkbox.child > input + label:after {
  background-color: transparent;
}
.checkbox + .checkbox-near {
  padding-left: 28px;
  font-family: Pretendard;
  font-size: 14px;
  font-weight: 400;
  line-height: 20.25px;
  letter-spacing: -0.02em;
  text-align: left;
  color: #151515;
  margin-top: 5px;
  display: inline-block;
}
.checkbox + .checkbox-bottom-text {
  margin-top: 4px;
  padding-left: 32px;
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
  color: #151515;
}

/* square */
.checkbox.square > input + label {
  font-size: 12px;
  color: #575757;
  font-weight: 400;
}
.exStyle .checkbox.square > input + label {
  font-size: 14px;
  color: #575757;
  font-weight: 400;
}
.checkbox.square > input + label:before {
  left: 5px;
}
.checkbox.square > input + label:after {
  border-radius: 2px;
}
.exStyle .checkbox.square > input + label:after {
  border-radius: 4px;
}
.checkbox.square2 > input + label {
  padding-left: 26px;
  font-size: 15px;
  color: #151515;
  font-weight: 400;
}
.checkbox.square2 > input + label:before {
  display: none;
}
.checkbox.square2 > input + label:after {
  border: 0;
  border-radius: 6px;
  background: #d5d5d5 url("../images/icon/check.svg?ver=20221012") 0 0 / 100%
    no-repeat;
}
.checkbox.square.white > input + label:before {
  border-color: #f1f2f4;
}
.checkbox.square.white > input + label:after {
  background-color: #fff;
}
/* //square */
/* round */
.checkbox.round,
.checkbox-block-group .checkbox.round {
  display: flex;
  align-items: center;
}
.checkbox-block-group .checkbox.child {
  display: flex;
  align-items: center;
  min-height: 24px;
  font-size: 14px;
  color: #454545;
}
.checkbox.round > input + label {
  font-family: Pretendard;
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
  letter-spacing: -0.02em;
  text-align: left;
  color: #151515;
}
.checkbox.round > input + label:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 24px;
  height: 24px;
  background: url(../images/common/icon-check-green-on.svg) no-repeat center /
    contain;
  z-index: 2;
  transform: translateY(-50%);
}
.checkbox.round > input:checked + label:before {
  background: url(../images/common/icon-check-green-on.svg) no-repeat center /
    contain;
}
.checkbox.round .change-btn {
  font-family: Pretendard;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  text-align: left;
  color: #575757;
  margin-left: auto;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.check-all.icon-none .checkbox > input + label {
  padding-left: 0;
}
.check-all.icon-none .checkbox > input + label::before {
  display: none;
}

.checkbox-block-group.icon-none .checkbox.child > input + label {
  padding-left: 0;
}
.checkbox-block-group.icon-none .checkbox.child > input + label::before {
  display: none;
}
/* round */

/* more */
.checkbox.more > input + label {
  font-family: Pretendard;
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
  letter-spacing: -0.02em;
  text-align: left;
  color: #151515;
}
.checkbox.more > input + label:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 24px;
  height: 24px;
  background: #f6f6f9;
  border-radius: 100%;
  z-index: 2;
  transform: translateY(-50%);
}
/* //more */

/* checked */
.checkbox.child > input:checked + label:before {
  background-image: url("../images/common/icon-check-on.svg");
}
.checkbox > input + label.text-gray {
  font-size: 14px;
}

/* display */
.checkbox-inline-group {
  /* margin: 0 -10px; */
}
.checkbox-block-group {
  text-align: left;
}
.checkbox-block-group .checkbox {
  display: block;
}
.checkbox-block-group .checkbox ~ .checkbox {
  margin-top: 5px;
}
.checkbox-block-group + .gray-box {
  margin-top: 20px;
}
.checkbox-block-group + .gray-box.button-one {
  background: #fff; /* ars 인증 탭 1개일 경우 배경색 수정 */
}

/* 계좌 관리 > 계좌 목록 좌측 체크박스 */
.checkbox > input + label:empty {
  padding: 0;
  width: 22px;
  height: 22px;
}

/* ----- switch ----- */
.switch-container {
  clear: both;
}
.switch-container:after {
  content: "";
  clear: both;
  display: block;
}
.switch-title {
  float: left;
  display: inline-block;
  margin-right: 0.5em;
  font-size: 12px;
  color: #151515;
  line-height: 26px;
}
.switch {
  position: relative;
  float: left;
}
.switch .switch-checkbox {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 0;
  height: 0;
  z-index: -1;
}
.switch .switch-label {
  position: relative;
  display: block;
  margin: 0;
  width: 42px;
  overflow: hidden;
  cursor: pointer;
  border-radius: 13px;
}
.switch .switch-inner {
  display: block;
  width: 200%;
  margin-left: -100%;
  -webkit-transition: margin 0.2s ease-in 0s;
  -moz-transition: margin 0.2s ease-in 0s;
  -ms-transition: margin 0.2s ease-in 0s;
  transition: margin 0.2s ease-in 0s;
}
.switch .switch-inner:before,
.switch .switch-inner:after {
  display: block;
  float: left;
  padding-top: 3px;
  width: 50%;
  height: 26px;
}
.switch .switch-inner:before {
  content: "";
  background-color: #ff5a00;
} /* on */
.switch .switch-inner:after {
  content: "";
  background-color: #e1e1e1;
} /* off */
.switch .switch-switch {
  display: block;
  position: absolute;
  top: 0;
  right: 16px;
  margin: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  -webkit-transition: right 0.2s ease-in 0s;
  -moz-transition: right 0.2s ease-in 0s;
  -ms-transition: right 0.2s ease-in 0s;
  transition: right 0.2s ease-in 0s;
}
.switch .switch-checkbox:checked + .switch-label .switch-inner {
  margin-left: 0;
}
.switch .switch-checkbox:checked + .switch-label .switch-switch {
  right: 0;
}

/* ----- 게시판(공지사항, 이벤트, 자주 묻는 질문) ----- */
.board-list,
.board-detail {
  word-break: break-all;
}

/* board list */
.board-list > li:not(:last-child) {
  border-bottom: 1px solid #f0edeb;
}
.board-list a {
  position: relative;
  display: block;
  padding: 24px 24px 24px 0;
}
.board-list a:after {
  content: "";
  display: block;
  position: absolute;
  top: 29px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-top: 1px solid #575757;
  border-left: 1px solid #575757;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.board-list .subject,
.board-list .content,
.board-list .content > p,
.board-list .content > div {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: break-word;
}
.board-list .subject {
  color: #151515;
  font-size: 16px;
  font-weight: 700;
}
.board-list .content {
  margin-top: 4px;
  color: #575757;
  font-size: 15px;
}
.board-footer {
  padding: 20px 0 0;
  text-align: right;
}

/* board detail */
.board-detail {
  font-size: 14px;
}
.board-detail .subject {
  padding: 24px 0 0;
  line-height: 1.4;
}
.board-detail .subject h3 {
  font-size: 21px;
  line-height: 1.4;
  font-weight: 700;
}
.board-detail .subject .date {
  margin-top: 5px;
  font-size: 15px;
}
.board-detail .content {
  padding-top: 24px;
  line-height: 1.6;
  color: #151515;
}
.board-detail .content img {
  max-width: 100%;
  vertical-align: middle;
  image-rendering: -webkit-optimize-contrast;
}
.board-detail .content ~ .board-footer {
  margin-top: 24px;
  border-top: 1px solid #a2a2a2;
}

/* board category */
.board-category,
.category-list {
  clear: both;
}
.board-category:after,
.category-list:after {
  content: "";
  display: block;
  clear: both;
}
.board-category {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f6f6f6;
  z-index: 2;
}
.board-category .container {
  padding: 0;
  overflow: auto;
}
.category-list {
  padding: 20px 0;
  font-size: 0;
  white-space: nowrap;
}
.category-list li {
  display: inline-block;
  padding: 0;
  vertical-align: top;
}
.category-list li:first-child {
  padding-left: 20px;
}
.category-list li:last-child {
  padding-right: 20px;
}
.category-list button {
  display: block;
  padding: 0 8px;
  border: 0;
  background-color: transparent;
  border-radius: 11px;
  font-size: 14px;
  line-height: 22px;
  color: #575757;
}
.category-list li.active button {
  background-color: #151515;
  color: #fff;
}

@media all and (min-width: 360px) {
  .category-list li {
    padding: 0 4px;
  }
}
@media all and (min-width: 375px) {
  .category-list li {
    padding: 0 5px;
  }
}
@media all and (min-width: 400px) {
  .category-list li {
    padding: 0 10px;
  }
}

/* faq list */
.faq-list {
  padding-top: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #151515;
  word-break: break-all;
}
.faq-list li {
  margin-bottom: 10px;
  border-radius: 13px;
  border: 1px solid #fff;
  background-color: #fff;
}
.faq-list li:last-child {
  margin-bottom: 0;
}
.faq-list li .container {
  position: relative;
}
.faq-list li .list-header a {
  position: relative;
  display: block;
  font-size: 15px;
  color: #151515;
}
.faq-list li .list-header .type {
  position: absolute;
  top: 16px;
  left: 20px;
}
.faq-list li .list-header .subject {
  position: relative;
  padding: 16px 40px 16px 36px;
  background: url("../images/icon-arrow-down.svg?ver=20221012") no-repeat;
  background-position: right 22px center;
  background-size: 10px 6px;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
}
.faq-list li.active {
  border-color: #151515;
  -webkit-box-shadow: 1px 3px 10px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 1px 3px 10px 0 rgba(0, 0, 0, 0.15);
}
.faq-list li.active .list-header {
  font-weight: 700;
}
.faq-list li.active .list-header .subject {
  background-image: url("../images/icon-arrow-up.svg?ver=20221012");
  font-weight: 700;
}
.faq-list li .list-body {
  display: none;
  padding: 0 16px;
}
.faq-list li .list-body .content {
  padding: 16px 4px;
  border-top: 1px solid #e3e3e3;
  word-break: break-all;
}
.faq-list li .list-body .content img {
  max-width: 100%;
  vertical-align: middle;
}
.content-fullpage.has-category {
  padding-top: 62px !important;
}
.has-category .faq-list {
  padding-top: 0;
}

/** for IE **/
button:active {
  border-style: outset;
  transform: scale(1);
}
button:focus {
  outline: none;
}
/* button:active,
button:focus {
  border: none;
  box-shadow: none;
} */
button:active,
button:focus {
  box-shadow: none;
}
select::-ms-expand {
  display: none;
} /* 화살표 없애기 for IE10, 11 */
input::-ms-clear,
input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
} /* IE 삭제 버튼(X) 숨기기 for IE10, 11 */

input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {
  display: none;
}

/** placeholder **/
input::placeholder {
  color: #ccc;
  height: 35px;
  line-height: 35px;
  font-family: Pretendard;
  font-size: 20px;
  font-weight: 700;
}
textarea::placeholder {
  color: #d3d3d3;
  font-weight: 400;
  line-height: 21px;
}
/* webkit */
input::-webkit-input-placeholder {
  color: #ccc;
  font-weight: 700;
}
textarea::-webkit-input-placeholder {
  color: #d3d3d3;
  font-weight: 400;
}
/* firefox 4-18 */
input:-moz-placeholder {
  color: #b3b3b3;
  font-weight: 700;
}
textarea:-moz-placeholder {
  color: #b3b3b3;
  font-weight: 400;
}
/* firefox 19+ */
input::-moz-placeholder {
  color: #b3b3b3;
  font-weight: 700;
}
textarea::-moz-placeholder {
  color: #b3b3b3;
  font-weight: 400;
}
/* ie10+ */
input:-ms-input-placeholder {
  color: #d3d3d3 !important;
  font-weight: 700 !important;
}
textarea:-ms-input-placeholder {
  color: #d3d3d3 !important;
  font-weight: 700 !important;
}
.placeholder {
  color: #d3d3d3 !important;
  font-weight: 700;
}

/* #LAYOUT
------------------------------------------------------------*/
/* clearfix */
#wrap,
.container,
.container-fluid,
#header,
.brand-name,
#content,
.clearfix,
.section-info .item {
  clear: both;
}
#wrap:after,
.container:after,
.container-fluid:after,
#header:after,
.brand-name:after,
#content:after,
.clearfix:after,
.section-info .item:after {
  content: "";
  display: block;
  clear: both;
}
.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  width: 100%;
  max-width: 700px;
}
.container-fluid {
  position: relative;
  width: 100%;
}

/* ----- default layout ----- */
body > form.main_form,
body > div,
body > div > form.main_form {
  width: 100%;
  height: 100%;
}
#wrap {
  position: relative;
  width: 100%;
  height: auto;
  min-width: 320px;
}

/* ----- header ----- */
#header {
  position: fixed;
  top: -1px;
  left: 0;
  min-width: 320px;
  width: 100%;
  height: 56px; /* 헤더높이 피그마 56px 4/8 수정 */
  padding: 13.5px 0 13.5px;
  background-color: #fff;
  text-align: center;
  z-index: 100;
  top: -1px;
  display: flex;
  align-items: center;
}
.bg-black #header {
  background-color: transparent;
}
.bg-black #header .page-title {
  color: #fff;
}
#header > .container {
  position: relative;
  min-height: 26px;
}
#header .header-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
}
#header .header-box.justify-start {
  justify-content: start;
}
#header .header-box .header-btn.mr-8 {
  margin-right: 8px;
}
#header .header-box .page-title {
  display: flex;
  align-items: center;
  padding-left: 0;
}

#header .header-box .page-title .rrpay-logo {
  width: 121px;
}

#header .header-box.center .page-title {
  margin-left: 0;
}
#header .header-box .btn-close {
  top: auto;
  right: 16px;
}
#header h1,
#header h2 {
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-align: left;
}
#header .brand-name img,
#header .brand-name svg {
  width: auto;
  max-width: inherit;
  height: 26px;
}
#header .brand-name span {
  float: left;
}
#header .brand-name span:not(.hidden) + span {
  position: relative;
  padding-left: 24px;
}
#header .brand-name span:not(.hidden) + span:after,
#header .brand-name span:not(.hidden) + span:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  margin-left: -1px;
  width: 13px;
  height: 1px;
  background-color: #151515;
}
#header .brand-name span:not(.hidden) + span:after {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
#header .brand-name span:not(.hidden) + span:before {
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
#header .brand-name.small-x span:not(.hidden) + span {
  padding-left: 18px;
}
#header .brand-name.small-x span:not(.hidden) + span:after,
#header .brand-name.small-x span:not(.hidden) + span:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 6px;
  margin-left: 0;
  width: 8px;
  height: 1px;
  background-color: #151515;
}
#header .brand-name span.my-logo {
  color: #151515;
}
#header .brand-name span.shop-logo.facebook-logo img {
  width: 67px;
}
#header .page-title {
  font-weight: 700;
  text-align: left;
  padding-left: 25px;
}
#header .btn-back {
  margin-right: 5px;
}
#header .btn-back.left-0 {
  position: absolute;
  left: 16px;
  top: auto;
}
#header .btn-prev {
  margin-right: 5px;
}
#header .btn-right-menu {
  position: absolute;
  right: 16px;
  font-weight: 400;
  font-size: 16px;
  color: #454545;
}
#header .btn-back:not(.hidden) + .brand-name {
  display: inline-block;
  padding-left: 30px;
  text-align: center;
}
#header .btn-close,
#header .btn-close-event,
#header .btn-close-error {
  position: absolute;
  top: 1px;
  right: 16px;
  width: 24px;
  height: 24px;
}
#header .right-0 {
  position: absolute;
  right: 16px;
  top: auto;
}

#header .text-btn {
  color: #454545;
  font-size: 16px;
}

/* ----- section ----- */
.section,
.section-title {
  clear: both;
}
.section:after,
.section-title:after {
  content: "";
  display: block;
  clear: both;
}
.section-title {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
}

/* ----- template ----- */
.template .section {
  margin-top: 30px;
}
.template .section-title {
  margin-bottom: 15px;
  padding-bottom: 3px;
  border-bottom: 2px solid #151515;
  font-size: 18px;
  text-transform: uppercase;
}
.template .section p + p,
.template .section ul + p {
  margin-top: 5px;
}

/* ----- 페이지 하단 영역 -----*/
.bottom-area,
.modal-bottom-area,
.bottom-banner-area {
  position: relative; /* relative 있어야 하단 버튼영역 그라데이션 bg 적용됨 4/2 추가 */
  clear: both;
  padding: 20px 0 0;
}
/* charge_amount형 wrap — .fixed 없이 하단 20 유지 */
.bottom-area.js-foot-in-flow {
  padding-bottom: 20px;
}
.bottom-area:after,
.modal-bottom-area:after,
.bottom-banner-area:after {
  content: "";
  clear: both;
  display: block;
}
.bottom-area.fixed,
.modal-bottom-area.fixed {
  position: fixed;
  clear: both;
  margin-top: 0;
  padding-bottom: 20px;
  bottom: 0;
  left: 0;
  right: 0;
  min-width: 320px;
  z-index: 99;
  background: linear-gradient(0deg, #ffffff 50%, rgba(255, 255, 255, 0) 100%);
}
.bottom-area.fixed.aos {
  position: absolute;
  bottom: 0;
}
.bottom-area.gray-area,
.bottom-area.gray-area.fixed,
.modal-bottom-area.fixed {
  background-color: #f9f9f9;
}

/* 하단 영역 */
.bottom-area .btn.btn-close {
  background-color: #151515;
  font-size: 18px;
} /* 오류 페이지 하단 버튼 */
.footer-info {
  margin-top: 24px;
  margin-bottom: -24px;
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #f1f2f4;
  line-height: 30px;
}
.bottom-area .text-lg {
  font-size: 14px;
}
.bottom-area .text-lg i {
  line-height: 1;
  vertical-align: -0.166em;
}
.bottom-area .text-light.text-link {
  font-size: 12px;
}
.bottom-area .text-error.text-link {
  font-size: 14px;
}

/* 010PAY 앱용 화면(발로소득) */
.fixed-bottom {
  position: fixed;
  z-index: 100;
  left: 0;
  bottom: 0;
  padding: 20px 0;
  width: 100%;
  background: transparent;
  background: linear-gradient(
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 90%
  );
}

/* #COMPONENT
------------------------------------------------------------*/
/*----- jquery ui ----- */
.ui-widget {
  font-family: inherit;
}

/* ----- icon ----- */
.icon,
[class|="icon"] {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  vertical-align: top;
}

/* css icon */
[class|="icon-times"]:after,
[class|="icon-times"]:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -1px;
  height: 1px;
}
.icon-times:after,
.icon-times:before {
  margin-left: -11px;
  width: 22px;
  background-color: #151515;
}
.icon-times-sm:after,
.icon-times-sm:before {
  margin-left: -5.5px;
  width: 11px;
  background-color: #575757;
}
.icon-times-md:after,
.icon-times-md:before {
  margin-left: -8.5px;
  width: 17px;
  background-color: #dcdcdc;
}
.icon-times {
  width: 18px;
  height: 18px;
}
.icon-times-sm {
  width: 9px;
  height: 9px;
}
.icon-times-md {
  width: 14px;
  height: 14px;
}
.icon-times-white {
  width: 30px;
  width: 30px;
}
.icon-times-white:after,
.icon-times-white:before {
  margin-left: -11px;
  width: 22px;
  height: 2px;
  background-color: #fff;
}
.icon-check {
  width: 18px;
  height: 20px;
}
.icon-check:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 1px;
  display: block;
  width: 16px;
  height: 10px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotate(-50deg);
  transform: rotate(-50deg);
  z-index: 2;
}
.icon-check.primary:before {
  border-color: #ff5a00;
}
.icon-charge {
  width: 32px;
  height: 32px;
  background: url("../images/common/icon-charge.png") no-repeat center / contain;
}

[class|="icon-angle"] {
  width: 10px;
  height: 17px;
}
[class|="icon-angle"]:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -6px;
  margin-left: -2px;
  width: 12px;
  height: 12px;
  border-top: 1px solid #151515;
  border-left: 1px solid #151515;
}
[class|="icon-angle-left"]:before {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
[class|="icon-angle-right"]:before {
  margin-left: -10px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
[class|="icon-angle-up"]:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
[class|="icon-angle-down"]:before {
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.icon-angle-left-sm,
.icon-angle-right-sm {
  width: 7px;
  height: 11px;
}
.icon-angle-right-sm {
  margin-left: 10px;
}
.icon-angle-up-sm {
  width: 12px;
  height: 8px;
}
.icon-angle-up-xs {
  width: 9px;
  height: 6px;
}
.icon-angle-down-sm {
  width: 12px;
  height: 8px;
}
.icon-angle-down-xs {
  width: 9px;
  height: 6px;
}
.icon-angle-left-xxs,
.icon-angle-right-xxs {
  width: 4px;
  height: 6px;
}
.icon-angle-left-sm:before,
.icon-angle-right-sm:before {
  margin-top: -4px;
  width: 8px;
  height: 8px;
  border-color: #707070;
}
.icon-angle-right-sm:before {
  margin-left: -7px;
}
.icon-angle-up-sm:before,
.icon-angle-down-sm:before {
  margin-top: -1px;
  margin-left: -4px;
  width: 8px;
  height: 8px;
  border-color: #929292;
}
.icon-angle-down-sm:before {
  margin-top: -6px;
}
.icon-angle-up-xs:before,
.icon-angle-down-xs:before {
  margin-top: -1px;
  margin-left: -2px;
  width: 4px;
  height: 4px;
  border-color: #c5c5c5;
}
.icon-angle-down-xs:before {
  margin-top: -3px;
}
.icon-angle-left-xxs:before,
.icon-angle-right-xxs:before {
  margin-top: -2px;
  margin-left: -1px;
  width: 4px;
  height: 4px;
  border-color: #ddd;
}
.icon-angle-right-xxs:before {
  margin-left: -3px;
}
.btn-xxs .icon-angle-left-xxs,
.btn-xxs .icon-angle-right-xxs {
  vertical-align: 1px;
}
.btn-xxs span + .icon-angle-left-xxs,
.btn-xxs span + .icon-angle-right-xxs {
  margin-left: 2px;
}

/* 라운드 추가 */
.icon-del {
  width: 24px;
  height: 24px;
  background: url("../images/common/del.svg") center / 24px no-repeat;
  font-size: 0;
}
.icon-close {
  width: 24px;
  height: 24px;
  background: url("../images/common/icon-close.svg") center / 24px no-repeat;
  font-size: 0;
}
.icon-close-gray {
  width: 20px;
  height: 20px;
  background: url("../images/common/icon-close-gray.svg") center / 20px no-repeat;
  font-size: 0;
}
.icon-close-white {
  width: 24px;
  height: 24px;
  background: url("../images/common/icon-close-white.svg") center / 24px
    no-repeat;
  font-size: 0;
}
.icon-arrow-down {
  width: 16px;
  height: 16px;
  background: url("../images/common/icon-arrow-down.svg") center / 100% auto
    no-repeat;
  font-size: 0;
}
.icon-arrow-down-gray {
  width: 16px;
  height: 16px;
  background: url("../images/common/icon-arrow-down-gray.svg") center / 100% auto
    no-repeat;
  font-size: 0;
}
.icon-arrow-left {
  width: 20px;
  height: 20px;
  background: url("../images/common/icon-arrow-left.svg") center / 100% 100%
    no-repeat;
  font-size: 0;
}

.icon-arrow-left.disabled {
  background: url("../images/common/icon-arrow-left-off.svg") center / 100% 100%
    no-repeat;
  background-color: transparent !important;
  pointer-events: none;
}

.icon-arrow-right {
  width: 20px;
  height: 20px;
  background: url("../images/common/icon-arrow-right.svg") center / 100% 100%
    no-repeat;
  font-size: 0;
}

.icon-arrow-right-white {
  width: 20px;
  height: 20px;
  background: url("../images/common/icon-arrow-right-white.svg") center / 100% 100%
    no-repeat;
  font-size: 0;
}

.icon-arrow-right.medium {
  width: 16px;
  height: 16px;
}

.icon-arrow-right.disabled {
  background: url("../images/common/icon-arrow-right-off.svg") center / 100%
    100% no-repeat;
  pointer-events: none;
}

.icon-arrow-right-888 {
  width: 20px;
  height: 20px;
  background: url("../images/common/icon-arrow-right-gray.svg") center / 100% 100%
    no-repeat;
}

.icon-gray-arrow-right {
  width: 16px;
  height: 16px;
  background: url("../images/common/icon-arrow-right-gray.svg") center / 100% 100%
    no-repeat;
  font-size: 0;
  margin-left: 4px;
}

.icon-back {
  width: 24px;
  height: 24px;
  background: url("../images/common/icon-back.svg") center / 100% 100% no-repeat;
  font-size: 0;
}

.size-16 {
  width: 16px;
  height: 16px;
}

.size-20 {
  width: 20px;
  height: 20px;
}

.icon-close-dark-gray {
  width: 20px;
  height: 20px;
  background: url("../images/common/icon-close-dark-gray.svg") center / 100% 100% no-repeat;
  font-size: 0;
}

.icon-check-orange {
  width: 20px;
  height: 20px;
  background: url("../images/common/icon-check-orange-on.svg") center / contain
    no-repeat;
  font-size: 0;
}

.icon-check-on {
  width: 16px;
  height: 16px;
  background: url("../images/common/icon-check-on.svg") center / contain
    no-repeat;
  font-size: 0;
}

.icon-check-off {
  width: 16px;
  height: 16px;
  background: url("../images/common/icon-check-off.svg") center / contain
    no-repeat;
  font-size: 0;
}

.icon-question-mark {
  width: 16px;
  height: 16px;
  background: url("../images/common/icon-question-mark.svg") center / contain
    no-repeat;
  font-size: 0;
}

.icon-question-mark-gray {
  width: 16px;
  height: 16px;
  background: url("../images/common/icon-question-mark-gray.svg") center / contain
    no-repeat;
  font-size: 0;
}

.icon-round-big-orange {
  width: 60px;
  height: 60px;
  background: url("../images/common/icon-round-big-green.png") center / contain
    no-repeat;
  font-size: 0;
}
.icon-face {
  width: 60px;
  height: 60px;
  background: url("../images/common/face.png") center / contain no-repeat;
  font-size: 0;
}
.icon-phone {
  width: 32px;
  height: 32px;
  background: url("../images/common/icon-phone.svg") center / contain no-repeat;
  font-size: 0;
}
.icon-pass {
  width: 32px;
  height: 32px;
  background: url("../images/common/icon-pass.svg") center / contain no-repeat;
  font-size: 0;
}

.icon-exclamation-circle-line {
  width: 16px;
  height: 16px;
  background: url("../images/common/icon-exclamation-circle-line.svg") center / contain no-repeat;
  font-size: 0;
}

.icon-exclamation-circle-black {
  width: 16px;
  height: 16px;
  background: url("../images/common/icon-exclamation-black.svg") center / contain no-repeat;
  font-size: 0;
}

.icon-reload {
  width: 20px;
  height: 20px;
  background: url("../images/common/icon-reload.svg") 0 0 / cover no-repeat;
}

.icon-star {
  width: 20px;
  height: 20px;
  background: url("../images/common/icon-star2.svg") 0 0 / cover no-repeat;
}

.icon-star-off {
  width: 20px;
  height: 20px;
  background: url("../images/common/icon-star-off.svg") 0 0 / cover no-repeat;
}

.icon-info {
  width: 16px;
  height: 16px;
  background: url("../images/common/icon-info.png") center / contain no-repeat;
  font-size: 0;
}

.icon-info-gray {
  width: 24px;
  height: 24px;
  background: url("../images/common/icon-info-gray.svg") center / contain no-repeat;
  font-size: 0;
}

.icon-info-circle {
  width: 24px;
  height: 24px;
  background: url("../images/common/icon-info-circle.svg") center center / cover
    no-repeat;
  font-size: 0;
}

.icon-share {
  width: 24px;
  height: 24px;
  background-image: url(../../images/mass/icon/icon-share.svg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-detail-list {
  width: 24px;
  height: 24px;
  background: url("../images/common/icon-detail-list.svg") center center / cover
    no-repeat;
  font-size: 0;
}

.icon-warning-red {
  width: 16px;
  height: 16px;
  background: url("../images/common/icon-warning-red.svg") center center / cover
    no-repeat;
  font-size: 0;
}

.icon-warning-red.size-20 {
  width: 20px;
  height: 20px;
}

.icon-warning-red2 {
  width: 16px;
  height: 16px;
  background: url("../images/common/icon-warning-round-red.svg") center center / cover
    no-repeat;
  font-size: 0;
}

.icon-plus {
  width: 20px;
  height: 20px;
  background: url("../images/common/icon-plus.svg") center center / cover
    no-repeat;
  font-size: 0;
}
.icon-money {
  width: 20px;
  height: 20px;
  background: url("../images/common/icon-money.svg") center center / cover
    no-repeat;
  font-size: 0;
}
.icon-cash {
  width: 24px;
  height: 24px;
  background: url("../images/common/icon-cash.svg") center center / cover
    no-repeat;
  font-size: 0;
}

.icon-eye-on {
  width: 24px;
  height: 24px;
  background: url("../images/common/icon-eye-on.svg") center center / cover
    no-repeat;
  font-size: 0;
}

.icon-eye-off {
  width: 24px;
  height: 24px;
  background: url("../images/common/icon-eye-off.svg") center center / cover
    no-repeat;
  font-size: 0;
}
.icon-search {
  width: 24px;
  height: 24px;
  background: url("../images/common/icon-search.svg") center / 24px no-repeat;
  font-size: 0;
}

.size-12 {
  width: 12px;
  height: 12px;
}

.size-16 {
  width: 16px;
  height: 16px;
}

.size-20 {
  width: 20px;
  height: 20px;
}

.size-24 {
  width: 24px;
  height: 24px;
}
/* //라운드 추가 */

/* ----- 안내문 ----- */
.info {
  position: relative;
  margin-top: 10px;
  padding-left: 1.25em;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: -0.04em;
}
.info-list {
  margin-top: 10px;
  font-size: 13px;
  color: #151515;
}
.info-list li {
  position: relative;
  padding-left: 1.25em;
}
.info-list li + li {
  margin-top: 0.333em;
}
.info-list.sm {
  font-size: 11px;
  line-height: 1.6;
}
.info:before,
.info-list li:before {
  content: "";
  display: block;
  position: absolute;
  top: 0.333em;
  left: 0.25em;
  width: 0.417em;
  height: 0.583em;
  border: 1px solid #8d8d8d;
  border-width: 0 1px 1px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.info-center {
  margin-top: 15px;
  font-size: 13px;
  text-align: center;
}
.info-center strong {
  font-size: 15px;
  color: #151515;
}
.info-sm {
  clear: both;
  font-size: 11px;
  color: #575757;
}
.info-sm:before {
  content: "";
  clear: both;
  display: block;
}
.info-sm .icon-reply {
  margin: 0 2px 0 8px;
}

/* 스텝 스타일 목록 안내 (QR로 결제)*/
.step-list-lg {
  position: relative;
  overflow: hidden;
  display: inline-block;
  text-align: left;
  font-size: 18px;
  color: #151515;
  white-space: nowrap;
}
.step-list-lg li {
  position: relative;
  padding: 1px 0 0 40px;
  line-height: 22px;
}
.step-list-lg li:before {
  content: "";
  display: block;
  position: absolute;
  top: -100px;
  left: 13px;
  width: 1px;
  height: 100px;
  background-color: #f2f2f2;
}
.step-list-lg li + li {
  margin-top: 15px;
}
.step-list-lg li > .number {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding-top: 3px;
  width: 27px;
  height: 27px;
  background-color: #f2f2f2;
  border-radius: 50%;
  text-align: center;
  font-weight: 400;
  line-height: 20px;
}
.step-list-lg li .underline {
  height: 22px;
  line-height: 21px;
  vertical-align: top;
}
.step-list-lg li .btn.btn-icon {
  height: 21px;
}

.note {
  padding: 24px 4px 0;
  text-align: left;
}
.note h3 {
  font-size: 13px;
  font-weight: 400;
  color: #151515;
}
.note ul {
  margin-top: 12px;
}
.note .info {
  margin-top: 0;
}

/* card */
.card,
.card-header,
.card-body,
.card-footer {
  clear: both;
}
.card:after,
.card-header:after,
.card-body:after,
.card-footer:after {
  content: "";
  clear: both;
  display: block;
}
.card-header,
.card-body,
.card-footer {
  padding: 15px 0;
  background: transparent;
}
.card-header,
.card-footer {
  line-height: 30px;
}
.card-header + .card-body,
.card-body + .card-footer {
  border-top: 1px solid #f0f0f0;
}
.card {
  padding: 0 15px;
  border-radius: 25px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: #151515;
}
.card-header .btn-icon {
  height: 30px;
}

/* ----- button ----- */
.btn {
  display: inline-block;
  padding: 14px 10px;
  width: 100%;
  height: 56px;
  border: 1px solid #151515;
  border-radius: 16px;
  background-color: #151515;
  color: #e0ff63;
  font-size: 16px;
  font-weight: 700;
  line-height: 22.4px;
  letter-spacing: -0.02em;
  text-align: center;
}
.btn + .btn-transparent {
  margin-top: 10px;
}
.btn.medium {
  height: 48px;
  border-radius: 12px;
  padding: 0;
  color: #fff;
  font-size: 14px;
}
.btn.tertiary {
  color: #151515;
  font-size: 16px;
  border-color: #e5e5e8;
  background-color: #fff;
}
.btn-hidden {
  display: none;
}
.btn-small {
  padding: 4px 8px;
  font-family: Pretendard;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.btn:disabled {
  pointer-events: none; /* 클릭 효과를 없앰 */
}

/* color, style */
.btn-orange {
  border-color: #ff5a00;
  background-color: #ff5a00;
} /* 테마 관리 X */
.btn-primary {
  border-color: #ff5a00;
  background-color: #ff5a00;
}
.btn-secondary {
  border: 1px solid #f2f2f2;
  background-color: #f2f2f2;
  color: #151515;
}
.btn-outline {
  background-color: transparent;
  color: #151515;
}
.btn-outline-bg {
  background-color: #f2f2f2;
  color: #151515;
}
.btn-primary-outline {
  border-color: #ff5a00;
  background-color: transparent;
  color: #151515;
}
.btn-danger-outline {
  border-color: #ff5a00;
  background-color: transparent;
  color: #ff5a00;
}
.btn-transparent {
  border-color: transparent;
  background-color: transparent;
  color: #575757;
}

/* size */
.btn-xxs,
.btn-xs,
.btn-sm,
.btn small {
  font-weight: 400;
}
.btn-xxs {
  padding: 0 10px;
  width: auto;
  border-radius: 13px;
  font-size: 11px;
  line-height: 24px;
}
.btn-xs {
  padding: 0 12px;
  width: auto;
  border-radius: 13px;
  font-size: 12px;
  line-height: 24px;
}
.btn-sm {
  padding: 0 12px;
  width: auto;
  border-radius: 15px;
  font-size: 12px;
  line-height: 28px;
}
.btn-md {
  padding: 0 12px;
  width: auto;
  border-radius: 24px;
  font-size: 15px;
  line-height: 46px;
}
.btn small {
  font-size: 0.875em;
}

/* icon */
.btn-icon {
  padding: 0;
  font-size: 0;
  min-width: 20px;
  width: auto;
  height: 26px;
  border: 0;
  line-height: 0;
  background: none;
}
.btn-nobg {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #575757;
  font-size: 12px;
}
.btn-nobg.text-link {
  color: #151515;
}
.btn-xxs.btn-nobg {
  font-size: 11px;
  line-height: 26px;
}
.btn-xs.btn-nobg {
  line-height: 26px;
}
.btn-sm.btn-nobg {
  line-height: 30px;
}
.btn-md.btn-nobg {
  line-height: 48px;
}
.btn .icon + span,
.btn span + .icon {
  margin-left: 10px;
}
.btn .icon + small,
.btn small + .icon {
  margin-left: 7px;
  vertical-align: top;
}
.btn-xs.btn-nobg [class|="icon"] {
  vertical-align: 0;
}
.btn-xs.btn-nobg [class|="icon"] + span {
  vertical-align: 1px;
}

/* disabled */
.btn:disabled,
.btn.on:disabled {
  border-color: #D1D1D5;
  background-color: #D1D1D5;
  color: #fff;
  cursor: default;
} /* ok */
.btn-icon:disabled,
.btn-nobg:disabled {
  background: none;
  color: #575757;
  opacity: 0.5;
}

/* hover - inner shadow */
.btn:active,
.btn:hover,
.btn:focus {
  /* -webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.05); */
  /* box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.05); */
}
.btn-icon:hover,
.btn-nobg:hover,
.btn[disabled]:hover {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btn-icon:focus,
.btn-nobg:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* custom */
.btn-back,
.btn-close,
.btn-close-event,
.btn-close-error,
.btn-star,
.btn-view {
  display: inline-block;
  background: none;
  font-size: 0;
  vertical-align: top;
}

/* button vertical list(버튼 리스트 - 알뜰폰 통신사, 셀렉트박스 옵션 팝업) */
.btn-list {
  width: 100%;
  overflow: hidden;
}
.btn-list .btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: 48px; /* 60px에서 48px로 변경됨 4/2 수정 */
  padding: 0;
  border: 0;
  background-color: #fff;
  border-radius: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 50px;
  color: #151515;
  text-align: left;
}
.btn-list .btn.on {
  background-color: #fff;
  color: #151515;
  font-weight: 700;
}
.btn-list .btn .icon-check-on {
  display: none;
}
.btn-list.left .btn {
  justify-content: start;
}
.btn-list.left .btn em.label {
  margin-left: 10px;
}

.btn-list.gray-list li {
  margin-bottom: 8px;
}
.btn-list.gray-list li:last-of-type {
  margin-bottom: 0;
}
.btn-list.gray-list .btn {
  background-color: #f9f9f9;
  border-radius: 12px;
}
.btn-list.left .btn > i {
  margin-left: 20px;
}
.btn-list.account-list > li:last-of-type {
  margin-bottom: 0; /* 결제수단 선택하기 리스트에 하단여백 제거필요 4/3 추가 */
}
/* 버튼 그룹 */
.btn-group {
  clear: both;
}
.btn-group:after {
  content: "";
  clear: both;
  display: block;
}
.btn-group .btn {
  float: left;
  width: 50%;
  border-radius: 0;
}
.btn-group .btn:first-child {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.btn-group .btn:last-child {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.btn-group .btn:not(:first-child) {
  border-left: 0;
}

.btn-group.ui-switch {
  border: 1px solid #ddd;
  border-radius: 4px; /*background-color: #f1f2f4; */
}
.btn-group.ui-switch li {
  float: left;
  width: 50%;
}
.btn-group.ui-switch li .btn {
  display: block;
  margin: -1px;
  padding: 4px;
  width: calc(100% + 2px);
  border: 1px solid transparent;
  background-color: transparent;
  color: #d4d4d4;
  font-weight: 400;
}
.btn-group.ui-switch li:not(.active) .btn:hover {
  color: #bbb;
}
.btn-group.ui-switch .active .btn {
  border-color: #151515;
  background-color: #fff;
  font-weight: 700;
  color: #151515;
}

/* ----- badge ----- */
.badge {
  display: inline-block;
  min-width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #ff5a00;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  color: #fff;
  text-align: center;
  vertical-align: 1px;
  white-space: nowrap;
}
.badge-lg {
  display: inline-block;
  padding: 0 8px;
  border-radius: 4px;
  background: #151515;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #fff;
  white-space: nowrap;
}

/* ----- well ----- */
.well,
.well-sm {
  clear: both;
  padding: 20px 25px;
  background-color: #f1f2f4;
}
.well:after {
  content: "";
  clear: both;
  display: block;
}
.well-round {
  padding: 20px;
  border-radius: 5px;
}
.well-sm-round {
  padding: 10px 15px;
  border-radius: 4px;
}
.well.text-sm {
  font-size: 12px;
}

/* ----- table ----- */
.table {
  border-collapse: collapse;
  table-layout: fixed;
  border-spacing: 0;
  width: 100%;
}
.table th,
.table td {
  border: 1px solid #ddd;
  padding: 5px;
  height: 33px;
  text-align: center;
}
.table th {
  font-weight: 400;
  color: #151515;
  text-align: center;
}
.table thead th {
  background-color: #f1f2f4;
}
.table tbody th {
  background-color: #f6f7f8;
}
.table-list td {
  text-align: center;
}
.table-view tbody th {
  text-align: left;
}
.table .text-left {
  text-align: left;
}
.table .text-right {
  text-align: right;
}
.table .text-center {
  text-align: center;
}

/* ----- modal ----- */
.modal-dialog,
.modal-content,
.modal-header,
.modal-body,
.modal-footer {
  clear: both;
}
.modal-dialog:after,
.modal-content:after,
.modal-header:after,
.modal-body:after {
  content: "";
  clear: both;
  display: block;
}
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: center;
  z-index: 999;
}
.modal:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.modal .my-logo img {
  width: auto;
  max-width: inherit;
  height: 26px;
}
.modal.exStyle.no-bg:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none;
}
.modal-dialog {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: 0;
  padding: 20px;
  width: 100%;
  z-index: 2;
}

.modal-content {
  width: 100%;
  min-width: 280px;
  max-width: 320px;
  overflow: hidden;
  display: inline-block;
  border-radius: 24px;
  background-color: #fff;
  text-align: left;
  vertical-align: top;
}
.modal-header {
  position: relative;
}
.modal-header .btn-close {
  position: absolute;
  top: 8px;
  right: 8px;
}
.modal-body {
  padding: 24px 20px;
  /* min-height: 90px; 모달 텍스트 1줄일때 필요없으므로 주석처리 4/4 */
  background-color: #fff;
  font-size: 14px;
}
.modal-body h3 {
  color: #151515;
  font-size: 18px;
  font-weight: 700;
  line-height: 25.2px;
  letter-spacing: -0.03em;
  text-align: center;
  max-height: 50px;
  overflow: hidden; 
  /* 최대 2줄만 노출되어야함 4/4 */
}
.modal-body h3:empty {
  margin-bottom: 0;
}
.modal-body h3:empty + p {
  margin-top: 0;
}
.modal-body h3 + p {
  margin-top: 8px;
}
.modal-body .execute-title {
  font-family: Pretendard;
  font-weight: 700;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: -2%;
  text-align: center;
  text-decoration: underline;
  color: #7cac04;
  margin-bottom: 16px;
}
.modal-body .execute-wrap {
  width: 100%;
  border-radius: 16px;
  background: #f6f6f9;
  padding: 12px 0;
  font-family: Pretendard;
  font-weight: 400;
  font-size: 13px;
  line-height: 140%;
  letter-spacing: -2%;
  text-align: center;
  color: #454545;
  margin-top: 16px;
}
.modal-body .execute-text-wrap {
  font-family: Pretendard;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: -2%;
  text-align: center;
  margin: 16px 0 0;
}
.modal-body .execute-wrap.list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: calc(100% - 32px);
  margin-top: 24px;
  margin-left: auto;
  margin-right: auto;
  padding: 16px 20px;
  text-align: left;
}
.modal-body .execute-wrap.list li {
  position: relative;
  padding-left: 12px;
}
.modal-body .execute-wrap.list li::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #D1D1D5;
}
.modal-body p {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #454545;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  letter-spacing: -0.02em;
  text-align: center;
}
.modal-footer {
  display: flex;
  gap: 8px;
}
.modal-footer .btn + .btn {
  /* margin-left: 8px; */
  margin-right: -8px;
}
.modal-footer.vertical,
body:not(.custom-pass) .modal:not(.modal-slide) .modal-footer.vertical {
  flex-direction: column;
  padding-bottom: 20px;
}
.modal-footer .btn {
  width: 100%;
  height: 56px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 22.4px;
  letter-spacing: -0.02em;
  text-align: center;
}
.modal-footer .btn.btn-cancel {
  border: 1px solid #e5e5e8;
  border-radius: 16px;
  color: #151515;
  background-color: #fff;
}
.type2 .modal-footer .btn.btn-cancel {
  border: 0;
  font-weight: 500;
  font-size: 14px;
  color: #888;
  height: 44px;
}
.modal-footer .btn.btn-confirm {
  color: #e0ff63;
  background-color: #151515;
}
.modal-footer .btn.btn-noShow {
  background-color: #fff;
  border: 0;
  font-family: Pretendard;
  font-weight: 500;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: -2%;
  text-align: center;
  color: #888888;
  height: 44px;
  margin-bottom: -4px;
}
body:not(.custom-pass) .modal:not(.modal-slide) .modal-footer {
  padding: 0 20px 20px;
}
.modal-open {
  overflow: hidden;
}

/* 풀모달 */
.modal-full .modal-dialog {
  top: 0;
  bottom: 0;
  padding: 0;
  margin-top: 0 !important;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
}
.modal-full .modal-head {
  display: flex;
  align-items: center;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  min-width: 320px;
  padding: 0;
  width: 100%;
  height: 56px;
  background-color: transparent;
  text-align: center;
  z-index: 100;
  position: fixed;
}
.modal-full .modal-head > .container {
  position: relative;
  height: 100%;
}
.modal-full .modal-content {
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow-y: auto;
  border-radius: 0;
  left: 0;
}
.modal-full .modal-head .header-box {
  height: 100%;
}
.modal-full .modal-head .btn-close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 0;
  padding: 0;
}
.modal-full .modal-body {
  padding: 0 0 10px;
  height: calc(100% - 110px);
}
.modal-full .modal-body .title {
  font-family: Pretendard;
  font-size: 18px;
  font-weight: 700;
  line-height: 24.3px;
  text-align: center;
}
.modal-full .modal-body .title + .sub-title {
  font-family: Pretendard;
  font-size: 15px;
  font-weight: 400;
  line-height: 20.25px;
  text-align: center;
  margin-top: 15px;
}
.modal-full .modal-head .btn-back {
  position: absolute;
  top: 1.5px;
  left: 20px;
  width: 20px;
  height: 20px;
}
.modal-full .modal-head .btn-back {
  font-family: Pretendard;
  font-size: 18px;
  line-height: 21.48px;
  font-weight: 700;
  text-align: left;
  padding-left: 25px;
}
.modal-full .modal-head .page-title {
  font-family: Pretendard;
  font-size: 18px;
  font-weight: 700;
  line-height: 21.48px;
  text-align: left;
}
.modal-full .modal-footer .btn {
  width: 100%;
}
.modal-full .modal-footer .btn.btn-confirm {
  background-color: #151515;
  color: #fff;
}

.modal-full .modal-content {
  display: flex;
  flex-direction: column;
}
.modal-full .modal-footer {
  margin-top: auto;
}
.modal-full .modal-head {
  background-color: #fff;
}
.modal-full .modal-body {
  overflow-y: scroll;
  /* height: calc(100% - 64px); */
  height: 100%;
  padding-top: 50px;
  padding-bottom: 20px;
}
.modal-full .header-box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* .modal-full .modal-head .btn-close {
  position: relative;
  margin-left: auto;
  top: auto;
  right: -4px;
} */
/* //풀모달 */

/* 토스트 모달 */
.modal-toast {
  overflow: hidden;
  display: none;
  width: calc(100% - 32px);
  height: auto;
  position: fixed;
  bottom: 42px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  border-radius: 24px;
  opacity: 0;
  background-color: rgba(69, 69, 69, 0.8);
  backdrop-filter: blur(3px);
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
}
.modal-toast.toast-view {
  opacity: 1;
}
.modal-toast.is-btn {
  bottom: 42px;
}

.modal-toast::before {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.modal-toast p {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  height: auto;
  padding: 12px 0;
  border-radius: 24px;
  color: #fff;
  line-height: 1.4;
  text-align: center;
  
}

/* 바텀 시트 리스트 */
.modal .modal-body .note-wrap {
  padding-bottom: 20px;
}
.modal .modal-body:has(+ .modal-footer) .note-wrap {
  padding-bottom: 0;
}
.modal .modal-body .note-wrap li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 11px;
  color: #454545;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.02em;
}

.modal .modal-body .note-wrap li:last-child {
  margin-bottom: 0;
}

.modal .modal-body .note-wrap li::before {
  display: block;
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #d1d1d5;
}

.modal .modal-body .note-wrap.note-wrap-v2 li {
  color: #454545;
}

.modal .modal-body .note-wrap li .open-link {
  color: #151515;
  border-bottom: 1px solid #151515;
}
.modal-slide .modal-body .container .note-wrap + .division-text {
  margin-top: 12px;
  padding-left: 11px;
}
.modal .modal-body .btn-wrap {
  display: flex;
  align-items: center;
  height: 72px; /* 3/31 계좌추가하기 버튼영역때문에 72px로 수정 */
}
.modal .modal-body .btn-wrap .btn {
  width: 100%;
  height: 56px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 22.4px;
  letter-spacing: -0.02em;
  text-align: center;
  background-color: #151515;
  color: #e0ff63;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal .modal-body .btn-wrap .btn.btn-add {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;  
  color: #151515;
}
.modal .modal-body .btn-wrap .btn.btn-add::before {
  content: '';
  display: block;
  background: url(../images/common/icon-plus.svg) no-repeat center / contain;
  width: 20px;
  height: 20px;
  margin-right: 4px;
}

/* 라운드버튼 모달 */
.round-button-modal .btn {
  padding: 0;
}
.round-button-modal .btn {
  width: 50%;
  max-width: 136px;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 700;
  line-height: 54px;
  letter-spacing: -0.02em;
  border-radius: 16px;
}
.round-button-modal .btn.btn-full {
  width: 100%;
  max-width: inherit;
}
.round-button-modal .btn:first-of-type {
  border: 1px solid #e5e5e5;
  color: #151515;
}
.round-button-modal .btn:last-of-type {
  border: 1px solid #151515;
  background-color: #151515;
  color: #fff;
  width: 100%;
}
.round-button-modal .modal-content {
  max-width: 320px;
}
body:not(.custom-pass) .round-button-modal:not(.modal-slide) .modal-footer {
  padding: 0 20px 20px;
}
.round-button-modal .modal-body {
  padding: 24px 20px 24px;
}
.round-button-modal.center .modal-body {
  text-align: center;
  padding-bottom: 24px;
}
.round-button-modal .modal-body h3 {
  font-family: Pretendard;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.03em;
  color: #151515;
  margin-bottom: 8px;
}
.round-button-modal .modal-body h3 + p {
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 400;
  line-height: 25.6px;
  letter-spacing: -0.02em;
  color: #454545;
}
/* //라운드버튼 모달 */

/* common modal */
#promptNo {
  display: none; /* 기본적으로 숨김 */
}
#commonAlert,
#commonPrompt {
  z-index: 1000;
}
#commonAlert:before,
#commonPrompt:before {
  position: fixed;
}
#commonPrompt #promptContents {
  /* min-height: 52px; 모달 한줄일경우 최소값 지정 4/4 */
}

#commonAlert .modal-dialog,
#commonPrompt .modal-dialog {
  margin-top: 0 !important;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
#commonAlert .modal-body h3:empty + p,
#commonAlert .modal-body h3:empty + div,
#commonPrompt .modal-body h3:empty + p,
#commonPrompt .modal-body h3:empty + div {
  min-height: 52px;
  font-size: 16px;
  color: #454545;
  letter-spacing: -0.02em;
}
.modal:not(.modal-slide) .modal-body .text-small {
  font-size: 14px;
  font-weight: 400;
}
.modal:not(.modal-slide) .modal-body .text-small.text-error,
.modal:not(.modal-slide) .modal-body .text-small.text-light {
  display: block;
  margin-top: 15px;
}

/* 하단 슬라이드 모달 - 선택 버튼 그룹 */
.modal-slide .modal-dialog {
  position: fixed;
  top: 0;
  bottom: 0;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  margin-top: 0 !important;
  padding: 60px 0 0;
  font-size: 0;
  display: flex;
}
.modal-slide .modal-content {
  position: fixed;
  top: auto;
  left: 0;
  bottom: -100%;
  max-width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
  background: #fff;
}
.modal-slide .modal-body {
  position: relative;
  padding: 60px 0 24px;
  margin: auto;
  width: 100%;
  max-width: 700px;
  max-height: 100%;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  font-size: 0;
}
.modal-slide .modal-body + .modal-footer {
  margin-top: 0;
}
.modal-slide .modal-body .container {
  position: relative;
  height: 100%;
}
.modal-slide .modal-body .container .division-text {
  font-weight: 700;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: -2%;
  color: #151515;
  margin: 24px 0 8px;
  align-items: start;
}
.modal-slide .modal-body .btn-close,
.modal-banklist .modal-body .btn-close {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 16px 16px 0 0;
  background-color: #fff;
  line-height: 35px;
  z-index: 2;
}
.modal-slide.exStyle .modal-body .title_wrap {
  position: absolute;
  left: 20px;
  top: 40px;
}
.modal-slide.exStyle .modal-body .modal-title {
  font-size: 18px;
  font-weight: bold;
  color: #151515;
}
.modal-slide.exStyle .modal-body .modal-sub {
  font-size: 16px;
  color: #151515;
}
.modal-slide.exStyle .modal-body .btn-close {
  position: absolute;
  left: auto;
  top: 22px;
  right: 20px;
  width: 30px;
  height: 30px;
}
.modal-slide .modal-body .btn-close:before,
.modal-banklist .modal-body .btn-close:before {
  content: "";
  position: absolute;
  top: 16px;
  left: 50%;
  margin-left: -18px;
  width: 36px;
  height: 5px;
  border-radius: 2.5px;
  background-color: #e8e8e8;
}
.modal-slide .modal-body .btn-close:before,
.modal-banklist .modal-body .btn-close:before {
  display: none;
}
.modal-slide .modal-body .btn-close.btn-icon {
  position: absolute;
  top: 10px;
  left: auto;
  right: 10px;
  width: 30px;
  height: 30px;
} /* 우측 상단 X 버튼 */
.modal-slide .modal-body .btn-close.btn-icon .icon-times {
  height: 30px;
}
.modal-slide .modal-body .btn-close.btn-icon:before {
  display: none;
}
.modal-slide.exStyle .modal-body .pay-sec .form-type li {
  flex-direction: column;
}
.modal-slide.exStyle .modal-body .pay-sec .form-type li .form-desc {
  border-bottom: 2px solid #151515;
}
.modal-slide.exStyle
  .modal-body
  .pay-sec
  .form-type
  li
  .form-desc
  .position-relative {
  flex: 1;
}
.modal-slide.exStyle
  .modal-body
  .pay-sec
  .form-type
  li
  .form-desc
  .text-primary {
  border: none;
  color: #151515;
  font-size: 25px;
  font-weight: bold;
  font-family: "Pretendard";
}
.modal-slide.exStyle
  .modal-body
  .pay-sec
  .form-type
  li
  .form-desc
  .text-primary.text-error {
  padding: 4px;
  color: #fb3636 !important;
}
.modal-slide.exStyle
  .modal-body
  .pay-sec
  .form-type
  li
  .form-desc
  .text-primary::placeholder {
  color: #dadada;
  font-weight: bold;
  font-family: "Pretendard";
}
.modal-slide.exStyle
  .modal-body
  .pay-sec
  .form-type
  li
  .form-desc
  .input-del-btn {
  height: auto;
  line-height: 1;
}
.modal-slide.exStyle .modal-body .pay-sec .form-type li .form-desc .alluse-btn {
  margin-left: 5px;
  padding: 6px 10px;
  border: 1px solid #151515;
  border-radius: 6px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
}
.modal-slide.exStyle .modal-body .pay-sec .form-type {
  font-size: 12px;
}
.modal-slide.exStyle .number-area {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  max-width: 700px;
  margin: auto;
  padding: 6px 5px;
  background-color: #c7c7c7;
}
.modal-slide.exStyle .number-area li {
  display: flex;
  justify-content: center;
  height: 48px;
  border-radius: 4px;
  background-color: #fff;
}
.modal-slide.exStyle .number-area li button {
  font-size: 24px;
  font-weight: bold;
}
.modal-slide.type-select .container {
  padding: 0;
}
.modal-slide.type-select .modal-dialog .modal-body {
  position: relative;
  padding: 0 16px;
}
.modal-slide.type-select .modal-dialog .modal-body .btn-list {
  padding-bottom: 16px; /* 리스트 메뉴 하단에 패딩바텀 16px 추가되어야함 4/2 추가 */
}

/* 하단 슬라이드 모달 - 확인/취소 모달 */
.modal-slide.type2 .modal-body {
  padding-top: 40px;
}

/* 푸터 버튼 있는 경우 */
.modal-slide .modal-footer {
  position: relative;
  margin: auto;
  height: auto;
  width: 100%;
  max-width: 700px;
}
.modal-slide .modal-footer .btn {
  width: 100%;
  background-color: #151515;
  line-height: 60px;
  color: #fff;
}
.modal-slide .modal-footer.type2 .btn {
  width: 50%;
  line-height: 60px;
  padding: 0;
}
.modal-slide .modal-footer .btn {
  line-height: 1.2;
  padding: 0;
}
.modal-slide .modal-footer .btn-cancel, .modal-slide .modal-footer.type2 .btn-cancel {
  float: left;
  background-color: transparent;
  color: #151515;
}
.modal-slide .modal-footer .btn:disabled {
  border-color: #e5e5e8;
  background-color: #e1e1e1;
  color: #fff !important;
}
.modal-slide.exStyle .modal-footer .btn:disabled {
  border-color: #e5e5e8;
  background-color: #e9e9e9;
  color: #fff !important;
}

/* 약관 상세 모달 */
.modal-terms .modal-content {
  word-break:break-all
}

.modal-terms .modal-content .modal-body {
  height: auto;
  overflow: visible;
  padding: 0 16px;
}

.modal-terms .modal-content .modal-body h3 {
  text-align: left;
}

.modal-terms .modal-content .modal-body p {
  display: block;
  text-align: left;
  font-size: 15px;
  margin-top: 4px;
}
.modal-terms .modal-content .modal-body li {
  margin-top: 4px;
}
.modal-terms .modal-content .modal-body li ol {
  padding-left: 16px;
}
.modal-terms .modal-content .modal-body .title-text {
  overflow: hidden;
  height: auto;
  position: sticky;
  top: 16px;
  z-index: 100;
  font-weight: 700;
  font-size: 18px;
  line-height: 140%;
}
.modal-terms .modal-content.fixed .title-text {
  width: calc(100% - 60px);
  margin: auto;
}
.modal-terms .modal-content .modal-body .title-text span {
  display: block;
  transition: transform 0.3s ease;
  transform: translateX(0); /* 왼쪽 정렬 상태 */
  width: fit-content;
}

.modal-terms .modal-content.fixed .modal-body .title-text span {
  transform: translateX(calc(50vw - 50% - 46px)); /* 뷰포트 가운데로 이동 */
  max-width: calc(100% - 60px);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  height: 25px;
  font-size: 16px;
}
.modal-terms .modal-content .modal-body .detail-wrap {
  margin-top: 16px;
}
.modal-terms .modal-content .modal-body ul {
  padding-left: 20px;
}
.modal-terms .modal-content .modal-body ul > li {
  position: relative;
  font-size: 14px;
}
.modal-terms .modal-content .modal-body ul > li::before {
  display: block;
  content: "";
  position: absolute;
  left: -10px;
  top: 7px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #454545;
}


/* 은행 목록 모달 */
.modal-banklist .modal-content {
  height: calc(100% - 60px);
}
.modal-banklist .modal-body {
  padding: 40px 0 0;
  height: 100%;
  background-color: #f9f9f9;
  z-index: 1;
}
.modal-banklist .modal-body:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  -webkit-box-shadow: 0 0 35px 35px #fff;
  box-shadow: 0 0 35px 35px #fff;
  z-index: 2;
}
.bank-list {
  position: relative;
  padding: 16px 16px 46px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.bank-list li {
  display: block;
  float: left;
  padding: 4px;
  width: 33.33%;
}
.bank-list button {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid #fff;
  border-radius: 8px;
  background-color: #fff;
  font-size: 13px;
}
.bank-list button:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.bank-list button.active {
  border-color: #151515;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.bank-list button > span {
  position: absolute;
  bottom: 42%;
  display: block;
  width: 100%;
}
.bank-list button > span + span {
  bottom: 16%;
  line-height: 1.1;
}
.bank-list img {
  width: auto;
  height: 30px;
}

@media all and (min-width: 360px) {
  .bank-list button {
    font-size: 14px;
  }
  .bank-list img {
    height: 48px;
  }
}
@media all and (min-width: 620px) {
  .bank-list li {
    width: 20%;
  }
}
@media all and (max-width: 359px) {
  .modal:not(.modal-slide) {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* loading */
.modal-loading {
  background: none;
}
.modal-loading .modal-dialog {
  margin-top: -35px;
  padding: 0;
}
.modal-loading .modal-content {
  min-width: 70px;
  max-width: 70px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #fff;
  padding: 26px 0 0;
  font-size: 0;
  text-align: center;
}
.loading-bar {
  display: inline-block;
  margin: 0 2px;
  width: 6px;
  height: 18px;
  border-radius: 3px;
  background-color: #ff5a00;
  -webkit-animation: loading 1s ease-in-out infinite;
  animation: loading 1s ease-in-out infinite;
}
.loading > .loading-bar:nth-child(1) {
  opacity: 1;
}
.loading > .loading-bar:nth-child(2) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
  opacity: 0.5;
}
.loading > .loading-bar:nth-child(3) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  opacity: 0.2;
}
@-webkit-keyframes loading {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1, 1.7);
  }
  40% {
    transform: scale(1);
  }
}
@keyframes loading {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1, 1.7);
  }
  40% {
    transform: scale(1);
  }
}

/* ----- scroll ----- */
.scroll {
  width: 100%;
  overflow-y: auto;
}

/* ----- 슬라이드 공통 ----- */
.owl-carousel {
  clear: both;
  margin: auto;
}
.owl-carousel:after {
  content: "";
  display: block;
  clear: both;
}

/* dots */
.owl-carousel .owl-dots {
  font-size: 0;
  text-align: center;
}
.owl-carousel .owl-dots .owl-dot {
  display: inline-block;
}
.owl-carousel .owl-dots .owl-dot span {
  display: block;
  width: 10px;
  height: 10px;
  margin: 10px 5px;
  border: 1px solid #fff;
  -webkit-backface-visibility: visible;
  transition: opacity 0.2s ease;
  border-radius: 50%;
}
.owl-carousel .owl-dots .owl-dot.active span {
  background: #fff;
}

/* slick */
.slick-slider *:focus,
.slick-slider a:focus {
  outline: none;
}
.slick-dots {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 0;
  text-align: center;
}
.slick-dots li {
  display: inline-block;
  margin-left: 3px;
}
.slick-dots li button {
  outline: 0;
  font-size: 0;
}
.slick-dots li button:before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background-color: #fff;
  opacity: 0.5;
}
.slick-dots li.slick-active button:before {
  width: 14px;
  opacity: 1;
}
.dots-center .slick-dots {
  top: auto;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
}
.dots-center .slick-dots li {
  margin: 0 3px;
}
.dots-center .slick-dots li button {
  width: 7px;
  height: 7px;
  background-color: #e0e0e0;
  border-radius: 50%;
}
.dots-center .slick-dots li.slick-active button {
  background-color: #575757;
}
.dots-center .slick-dots li button:before {
  display: none;
}

/* #CONTENT
------------------------------------------------------------*/
/* ----- main content ----- */
#content {
  padding: 56px 0 20px;
  min-height: calc(var(--vh, 1vh) * 100);
}
#content.newType {
  display: flex;
  flex-direction: column;
}
#content.newType .bottom-area {
  position: relative !important;
  margin-top: auto;
}

/* 하단 fixed + 본문 스크롤 — design_renewal.js fixFootBtn 연동
 * #content.content-foot-fixed > .content-scroll + .bottom-area
 */
#content.content-foot-fixed {
  display: flex;
  flex-direction: column;
  height: calc(var(--vh, 1vh) * 100 - 56px);
  min-height: 0;
  padding-bottom: 0;
  overflow: hidden;
}

#content.content-foot-fixed .content-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/*
 * 짧은 화면 fixed 해제 (opt-in: .js-foot-short-unfixed)
 * legacy fixFootBtn: 콘텐츠가 화면보다 길면 fixed 제거 → #content 스크롤
 */
#content.content-foot-fixed.is-foot-unfixed {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#content.content-foot-fixed.is-foot-unfixed .content-scroll {
  flex: 0 0 auto;
  overflow: visible;
  padding-bottom: 0 !important;
}

#content.content-foot-fixed.is-foot-unfixed .bottom-area {
  flex-shrink: 0;
}

.section,
.headline + .section {
  margin-top: 20px;
}
.section[hidden] + .section {
  margin-top: 35px;
}

/* #content 전체 화면 대체 (010 제로페이용 약관 상세 화면 등) */
.content-fullpage {
  padding: 24px 0 !important;
}

/* ----- common text ----- */
h3 {
  font-size: 15px;
}
h4 {
  font-size: 14px;
}
h5 {
  font-size: 13px;
}
.headline {
  font-family: Pretendard;
  padding-top: 20px;
  color: #151515;
  word-break: normal;
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
  letter-spacing: -0.02em;
  text-align: left;
}
.headline.big {
  font-size: 26px;
  font-weight: 700;
  line-height: 35.1px;
}
.headline.pt-0 {
  padding-top: 0; /* 회원가입 flow 상단 여백 0 4/7  수정 */
}
.headline > p {
  margin-top: 16px;
}
.headline > p.text-big {
  font-size: 24px;
}
.headline.pt-0 > p {
  margin-top: 0;
}
.headline.pt-0.pt-headline {
  padding-top: 16px;
}
.headline.pt-0.pt-headline > p {
  margin-top: 0;
}
.headline .small,
.headline .medium {
  display: inline-block;
  color: #575757;
  font-weight: 400;
}
.headline .small strong,
.headline .medium strong {
  color: #151515;
  font-weight: 700;
}
.headline .small {
  font-size: 14px;
}
.headline p + p {
  margin-top: 8px;
}
.headline p.small + p {
  margin-top: 5px;
}
.headline .price {
  font-size: 120%;
  line-height: 1.1;
  vertical-align: -1px;
}
.mt-16 {
  margin-top: 16px;
}

/* ----- 링크 ----- */
.link-right {
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: right;
}
.link-center {
  margin-top: 10px;
  text-align: center;
}

/* 보안 키패드 상단 링크 */
.keypad-top-area {
  position: fixed;
  top: 260px;
  bottom: auto;
  left: 0;
  right: 0;
  padding-bottom: 10px;
  z-index: 2;
}

/* ----- 보안 키패드, 링크 ----- */
div.nppfs-keypad-div {
  position: fixed !important;
  bottom: 0;
  width: 100%;
  height: auto !important;
  z-index: 999;
  text-align: center;
}
div.nppfs-keypad {
  top: 0;
  z-index: 999;
}

@media all and (min-width: 360px) {
  .keypad-top-area {
    padding-bottom: 20px;
  }
}

/* 스마트폰 ~ 태블릿 가로 */
@media all and (max-device-width: 1024px) and (orientation: landscape) {
  .keypad-top-area {
    position: relative;
    top: auto !important;
    bottom: auto;
    margin-top: 20px;
  }
  .keypad-top-area .container {
    padding-left: 0;
    padding-right: 0;
  }
  div.nppfs-keypad-div {
    /* position: relative !important; */
    bottom: auto;
    height: auto !important;
    margin-top: 5px;
  }
  div.nppfs-keypad {
    top: 0;
  }
}
/* Fold8 펼침 와이드 근처 (CSS ~816) */
@media (min-width: 780px) and (max-width: 860px) and (max-height: 680px) {
  /* 펼침 전용 */
  div.nppfs-keypad, #wrap.renewal-v2 div.nppfs-keypad {
    top: unset;
  }
}

/* ----- 약관 동의 ----- */
.join-agree,
.join-agree .agree-all,
.join-agree .agree-list,
.join-agree .agree-list li,
.join-agree .agree-list-fix,
.join-agree .agree-list-fix li {
  clear: both;
}
.join-agree:after,
.join-agree .agree-all:after,
.join-agree .agree-list:after,
.join-agree .agree-list li:after,
.join-agree .agree-list-fix:after,
.join-agree .agree-list-fix li:after {
  content: "";
  clear: both;
  display: block;
}
.join-agree {
  margin: 5px 0;
}
.join-agree .checkbox {
  float: left;
}
.join-agree .btn {
  float: right;
  text-decoration: underline;
}
.join-agree .agree-list,
.join-agree .agree-list-fix {
  margin: 5px 0 0 25px;
}
.join-agree + .join-agree {
  margin-top: 10px;
}
.join-agree .agree-list li {
  position: relative;
  padding-right: 22px;
}
.join-agree .agree-list li .btn {
  position: absolute;
  top: 0;
  right: 0;
}
.join-agree .info-asterisk {
  margin-top: 10px;
  font-size: 11px;
  padding-left: 0.65em;
  text-indent: -0.65em;
  line-height: 1.7;
}
.join-agree .btn-view {
  margin: -2px -20px -2px 0;
  width: 50px;
  height: 30px;
  background: url("../images/icon/arrow-right.svg?ver=20221012") right 20px
    center / auto 9px no-repeat;
}

/* ----- 회원가입/본인인증 ----- */
.form-type,
.form-type li {
  clear: both;
}
.form-type:after,
.form-type > li:after {
  content: "";
  clear: both;
  display: block;
}
.exStyle .form-type:after,
.exStyle .form-type > li:after {
  content: "";
  clear: both;
  display: none;
}
.form-type li {
  clear: both;
  margin-top: 12px;
}
.form-type li:first-child {
  margin-top: 0;
}
.form-type li:after {
  content: "";
  display: block;
  clear: both;
}
.form-type .label {
  display: block;
}

.form-type.card-reg li {
  margin-top: 24px;
}
.form-type.card-reg li:first-of-type {
  margin-top: 0; /* 카드등록 첫번째 li 상단여백 제거 */
}
.form-type.type2 li {
  margin-top: 30px;
}

/* 회원 확인(휴대폰번호 + 팝오버 + 저장 체크박스) */
.form-type .verify-phone .label {
  margin-top: 2px;
  margin-bottom: 8px;
}
.form-type .verify-phone .input-group {
  position: relative;
}
.form-type .verify-phone .input-group .input {
  padding-right: 60px;
}
.form-type .verify-phone .input-group .checkbox {
  position: absolute;
  top: 11px;
  right: 0;
}

/* 통신사 */
.form-type .telecom label:last-child {
  display: table;
} /* 알뜰폰 */
.form-type .telecom label .brand {
  display: table-cell;
  height: 43px;
  line-height: 1.1;
  text-align: center;
  vertical-align: middle;
}

/* 휴대폰번호 + 인증번호 발송 버튼 */
.form-type .phone-auth-btn .input {
  position: relative;
}
.form-type .phone-auth-btn .input input {
  position: relative;
}
.form-type .phone-auth-btn .input .time {
  position: absolute;
  top: 4px;
  right: 115px;
  font-size: 14px;
  line-height: 30px;
  color: #ff5a00;
}
.form-type .phone-auth-btn .input .time em {
  display: inline-block;
  width: 38px;
}
.form-type .phone-auth-btn .input .btn {
  position: absolute;
  top: 4px;
  right: 0;
  z-index: 2;
}

/* 보안인증번호 입력 */
.form-type .numskip {
  position: relative;
}
.form-type .numskip input {
  position: relative;
}
.form-type .numskip .time {
  position: absolute;
  top: 11px;
  right: 0;
  font-size: 12px;
  line-height: 25px;
  color: #ff5a00;
}

/* input + button (이메일 변경) */
.form-type .input-btn .dd {
  position: relative;
}
.form-type .input-btn input {
  position: relative;
  padding-right: 50px;
}
.form-type .input-btn .dd .btn {
  position: absolute;
  bottom: 5px;
  right: 0;
  z-index: 2;
}

/* 주소 */
.form-type .address .input {
  position: relative;
}
.form-type .address .input input {
  position: relative;
  padding-right: 80px;
}
.form-type .address .input .btn {
  position: absolute;
  top: 4px;
  right: 0;
  z-index: 2;
}
.form-type .address .input + input {
  margin-top: 20px;
}
.form-type .address .dd .btn-info {
  margin-top: 4px;
  float: right;
  z-index: 2;
}

/* 하단 안내 글, 버튼 */
.form-type .info {
  margin-top: 15px;
}
.form-type .btn.on {
  border-color: #f2f2f2;
  background-color: #f2f2f2;
  color: #151515;
}

/* input value 삭제 버튼 */
.form-control-clear {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -13px;
  padding: 4px;
  background-color: #fff;
  font-size: 0;
  line-height: 0;
}

/* ----- 프로모션 모달 ----- */
.modal-promotion:before {
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
}
.modal-promotion,
.modal-promotion .modal-dialog {
  padding: 0;
}
.modal-promotion .modal-dialog {
  margin-top: -193px !important;
}
.modal-promotion .modal-content {
  max-width: 700px;
  overflow: visible;
  background: none;
}
.modal-promotion .modal-body {
  margin-top: -80px;
  padding: 0;
  background: none;
  text-align: center;
}
.modal-promotion .modal-body .visual {
  position: relative;
  top: 0;
  left: 50%;
  margin-left: -350px;
  width: 700px;
  height: 430px;
}
.modal-promotion .modal-body .visual img {
  width: 420px;
  max-width: initial;
  height: auto;
}
.modal-promotion .btn-area {
  margin-top: -5px;
  padding-bottom: 20px;
}
.modal-promotion .btn-area .btn {
  padding: 0;
  width: auto;
  background: none;
}
.modal-promotion .btn-area .btn.btn-nobg {
  font-size: 12px;
  line-height: 22px;
  color: #d9d9d9;
}
.modal-promotion .btn-area .btn.btn-nobg .underline {
  border-bottom-color: #d9d9d9;
}
.modal-promotion .btn-area .btn-close {
  margin-left: 5px;
  width: 22px;
  height: 22px;
  border: 1px solid #dcdcdc;
  border-radius: 0;
  line-height: 20px;
}
.modal-promotion .btn-area .btn-close i {
  height: 20px;
}

@-webkit-keyframes slideUp {
  0% {
    opacity: 0;
    bottom: -30px;
  }
  100% {
    opacity: 1;
    bottom: 0;
  }
}
@keyframes slideUp {
  0% {
    opacity: 0;
    bottom: -30px;
  }
  100% {
    opacity: 1;
    bottom: 0;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0;
  }
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
@-webkit-keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}
@-webkit-keyframes arrowDown {
  0%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  40%,
  50% {
    opacity: 1;
    transform: translateY(4px);
  }
}
@keyframes arrowDown {
  0%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  40%,
  50% {
    opacity: 1;
    transform: translateY(4px);
  }
}

@keyframes highlight {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

/* #UTILITY
------------------------------------------------------------*/
/* display */
.pull-left {
  clear: none;
  float: left;
}
.pull-right {
  clear: none;
  float: right;
}
.position-static {
  position: static;
}
.position-relative {
  position: relative;
}
.position-absolute {
  position: absolute;
}

.blind {
  width: 0;
  height: 0;
  line-height: 0;
  visibility: hidden;
  overflow: hidden;
}
.hidden {
  display: none !important;
}
.hidden-mobile {
  display: none !important;
}
.hidden-tablet {
  display: block !important;
}
.hidden-pc {
  display: block !important;
}

.visible,
.dp-block {
  display: block !important;
}
.dp-inlineblock {
  display: inline-block !important;
}

/* 갤럭시 이상 */
@media all and (min-width: 360px) {
  .visible-360 {
    display: block !important;
  }
}

/* 넥서스 7 태블릿(세로) */
@media all and (min-device-width: 600px) and (orientation: portrait) {
  .hidden-mobile {
    display: block !important;
  }
  .hidden-tablet {
    display: none !important;
  }
  .visible {
    display: block !important;
  }
}

/* 태블릿 이상 */
@media all and (min-device-width: 768px) {
  .hidden-mobile {
    display: block !important;
  }
  .hidden-tablet {
    display: none !important;
  }
  .visible {
    display: block !important;
  }
}

/* 랩탑, 데스크탑 이상 */
@media all and (min-device-width: 1200px) {
  .promotion-cardday.v2 .section-benefit .section-content li .num {
    padding-top: 2px;
  }
  .hidden-pc {
    display: none !important;
  }
  .visible {
    display: block !important;
  }
}

/* decoration */
.underline {
  display: inline-block;
  padding-bottom: 1px;
  border-bottom: 1px solid #575757;
  line-height: 1.1;
}
.italic {
  font-style: italic;
}
.highlight {
  position: relative;
  z-index: 1;
  padding-left: 1px;
  padding-right: 1px;
  color: #151515;
}
.highlight:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  z-index: -1;
  padding: 0 1px;
  width: 100%;
  height: 60%;
  transform: translateY(-40%);
  display: inline-block;
  background-color: #e6ff00;
}

/* spacing */
.no-padding {
  padding: 0;
}
.no-margin {
  margin: 0;
}
.mgt5 {
  margin-top: 5px;
}
.mgt-5 {
  margin-top: -5px;
}
.mgt10 {
  margin-top: 10px;
}
.mgt15 {
  margin-top: 15px;
}
.mgt20 {
  margin-top: 20px;
}
.mgt24 {
  margin-top: 24px;
}
.mgt25 {
  margin-top: 25px;
}
.mgt30 {
  margin-top: 30px;
}
.mgt40 {
  margin-top: 40px;
}
.mgr3 {
  margin-right: 3px;
}
.mgb5 {
  margin-bottom: 5px;
}
.mgb10 {
  margin-bottom: 10px;
}
.mgb20 {
  margin-bottom: 20px;
}
.pdr0 {
  padding-right: 0 !important;
}
.pdt0 {
  padding-top: 0 !important;
}
.pdt40 {
  padding-top: 40px !important;
}
.pdb0 {
  padding-bottom: 0 !important;
}
.pdb5 {
  padding-bottom: 5px;
}

/* align */
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.text-nowrap {
  white-space: nowrap;
}

/* text */
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-link {
  display: inline-block;
  font-family: "Pretendard";
  font-size: 13px;
  line-height: 30px;
  color: #575757;
  text-decoration: underline;
}
.text-dark {
  color: #151515;
}
.text-body {
  color: #575757;
}
.text-light {
  color: #8d8d8d;
}
.text-lighter {
  color: #b1b1b1;
}
.text-error {
  color: #ff5a00;
}
.input-container.text-error + .helper-text,
.select-box.text-error + .helper-text {
  color: #ff0000;
}
.text-primary {
  color: #ff5a00 !important;
}
.text-orange {
  color: #ff5a00;
}
.text-input {
  color: #fb3636;
}
.check-primary {
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: #ff5a00;
}
.sr-only,
.sr-only * {
  margin: 0 !important;
  font-size: 0;
  text-indent: -100000px;
  line-height: 0;
}
.font-weight-300 {
  font-weight: 300;
}
.font-weight-400 {
  font-weight: 400;
}
.font-weight-500 {
  font-weight: 500;
}
.font-weight-700 {
  font-weight: 700;
}
.line-height-26 {
  line-height: 26px;
}

/* background */
.bg-white {
  background-color: #fff;
}
.bg-gray {
  background-color: #f1f2f4;
}
.exStyle .bg-gray {
  background-color: #f9f9f9;
}
.bg-gray2 {
  background-color: #f1f1f1;
}
.bg-lightgray {
  background-color: #f6f6f6;
}
.bg-lightergray {
  background-color: #f9f9f9;
}
.bg-primary {
  background-color: #ff5a00;
}

.modal-slide.type-title .modal-head {
  position: relative;
  font-family: Pretendard;
  font-size: 18px;
  font-weight: 700;
  line-height: 24.3px;
  text-align: left;
  color: #151515;
  min-height: 65px;
  background-color: #fff;
  border-radius: 24px 24px 0 0;
  padding: 20px 16px;
}
.modal-slide.type-title .modal-head .modal-head-title {
  line-height: 24.3px;
}
.modal-slide.type-title .modal-head .btn-close {
  position: absolute;
  top: 20px;
  right: 16px;
  width: 24px;
  border: 0;
  padding: 0;
  height: auto;
}
.modal-slide.type-title .modal-head.round-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0;
}
.modal-slide.type-title .modal-head.round-btn .btn-close {
  position: static;
  width: 50px;
  height: 5px;
  border-radius: 2.5px;
  background-color: #e5e5e8;
}
.modal-slide.type-title .modal-body {
  overflow-y: auto;
  max-height: calc(80vh - 68px);
  padding: 0;
  border-radius: 0;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 400;
  line-height: 21.6px;
  text-align: left;
  min-height: inherit;
  color: #151515;
}
.modal-slide.type-title .modal-body .modal-body-title {
  font-family: Pretendard;
  font-size: 18px;
  font-weight: 700;
  line-height: 25.2px;
  letter-spacing: -0.54px;
  text-align: left;
  color: #151515;
  margin-top: 16px;
  margin-bottom: 16px;
}
/* .modal-slide.type-title .modal-content::after {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 120px;
  opacity: 0;
  transition: 0.3s;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    #ffffff 27.2%,
    #ffffff 100%
  );
  pointer-events: none;
}
.modal-slide.type-title .modal-content.scroll::after {
  opacity: 0.5;
} */
.modal-slide.type-title .terms-wrap .check-all {
  padding: 0;
}
.modal-slide.type-title .check-all {
  position: relative;
}
.modal-slide.type-title .terms-wrap .check-all.close {
  min-height: 40px;
}
.modal-slide.type-title .check-all .btn-toggle {
  position: absolute;
  top: 0;
  right: 0;
  background: url(../images/common/icon-arrow-up.svg) no-repeat center / contain;
  width: 20px;
  height: 20px;
  transform: rotate(180deg);
  z-index: 100;
}
.modal-slide.type-title .check-all .btn-toggle.open {
  transform: rotate(0deg);
}
.modal-slide.type-title .terms-list-box.check-all-box .check-all {
  border-bottom: 0;
}
.modal-slide.type-title .terms-list-box.check-all-box .check-all.open {
  border-bottom: 1px solid #e2e2e2;
}
.modal-slide.type-title .check-all.top {
  border-bottom: none;
  padding-bottom: 20px;
  margin-bottom: 12px;
}

.modal-slide.type-title .check-all.top.open {
  border-bottom: 1px solid #e2e2e2;
}
.modal-slide.type-title .check-all label {
  font-family: Pretendard;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
  padding-left: 28px;
  display: flex;
  flex-direction: column;
  align-items: start;
}
.modal-slide.type-title .check-all label .info-sm {
  font-family: Pretendard;
  font-weight: 400;
  font-size: 14px;
  line-height: 19.6px;
  color: #151515;
  margin-top: 4px;
}
.modal-slide.type-title .check-all .checkbox + .sub-title {
  font-family: Pretendard;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  text-align: left;
  padding-left: 28px;
  color: #888;
  margin-top: 4px;
  justify-content: start;
  align-items: start;
}
.modal-slide.type-title .optional {
  font-family: Pretendard;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  text-align: left;
  color: #575757;
}

.modal-slide.type-title .terms-list + .check-all {
  margin-top: 8px;
  height: 38px;
  display: flex;
  align-items: center;
}
.modal-slide.type-title .terms-list {
  list-style: none;
  padding: 0;
  margin: 0;
  padding: 0 2px;
}
.modal-slide.type-title .terms-list:first-of-type {
  margin-bottom: 20px;
}

.modal-slide.type-title .terms-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
}

.modal-slide.type-title .terms-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  padding-right: 20px;
}

.modal-slide.type-title .btn-next {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #888;
}

.modal-slide.type-title .modal-footer {
  padding: 20px 16px;
  text-align: center;
}

.modal-slide.type-title .btn-confirm {
  display: inline-block;
  width: 100%;
  height: 56px;
  padding: 18px 30px;
  color: #e0ff63;
  background-color: #151515;
  border: none;
  border-radius: 16px;
  cursor: not-allowed;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  z-index: 1;
}

.modal-slide.type-title .btn-confirm:disabled {
  background-color: #D1D1D5;
  color: #fff;
}

.modal-slide.type-title .btn-confirm.active {
  background-color: #000;
  cursor: pointer;
}

/* .modal-slide.type-title .disabled {
  background-color: #ccc;
} */

.modal-slide.type-title .terms-list.terms-block-list li {
  display: block;
}
.modal-slide.type-title.modal-agree .modal-content.scroll::after {
  display: none;
}
.modal-slide.type-title.modal-noti-left .modal-body .modal-body-title {
  text-align: left;
}
.modal-slide.type-title.modal-noti-left .modal-body p {
  justify-content: start;
  text-align: left;
}
.modal-slide.type-title.modal-noti-left .modal-footer.type2 .btn-cancel {
  max-width: 134px;
}
.modal-slide.type-title.modal-noti-left .modal-footer.type2 .btn {
  width: 100%;
}
.modal-slide.type-title.modal-noti-left .modal-footer {
  gap: 0;
}
.modal-slide.type-title.modal-noti-left .modal-footer.type2 .btn:last-of-type {
  /* margin-left: 8px; */
}
.modal-slide.type-title .modal-body .bank-list {
  margin-bottom: 20px;
  justify-content: start;
  /* 0613 수정 은행선택 팝업 모달 좌측 정렬 */
}
.modal-slide.type-title.modal-noti-left .modal-footer.type2 {
  gap: 8px;
}

/* 은행선택 */
.bank-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: start;
  padding: 0;
}
.bank-list > li {
  flex: 1 1 calc(33.333% - 10px);
  height: 96px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.3s;
  padding: 0;
  background: #f6f6f9;
  max-width: calc(33.333% - 10px);
}
.bank-list > li.select {
  border: 1px solid #151515;
}
.bank-list > li > button {
  width: 100%;
  height: 100%;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Pretendard;
  font-size: 13px;
  font-weight: 500;
  line-height: 18.2px;
  text-align: left;
  color: #151515;
  flex-direction: column;
}
.bank-list > li > button:after {
  display: none;
}
.bank-list > li > button > i {
  text-align: center;
  width: 42px;
  height: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-bottom: 8px;
}
.bank-list > li > button > i img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* //은행선택 */

/* 전체 컨테이너 스타일 */
.input-container {
  position: relative;
  width: 100%;
  margin-top: 12px;
}
.input-container > button {
  position: absolute;
  display: none;
  top: 50%;
  bottom: 2px;
  right: 16px;
  transform: translateY(-50%);
}
.input-container.focus-on {
  border-color: #151515;
}
/* .input-container.focus-on > button {
  display: block;
} */

.input-container.label-n > button {
  top: 50%;
  bottom: auto;
}
.input-container.label-y > button {
  top: auto;
  bottom: 2px;
}
.input-container + .helper-text,
.select-box + .helper-text {
  display: inline-block;
  font-family: Pretendard;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.04em;
  text-align: left;
  color: #888;
  margin-top: 8px;
}

.input-container.type-timer .type-timer-box {
  display: flex;
  align-items: center;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  gap: 0 8px;
}
.input-container.type-timer .type-timer-box .time {
  font-family: Pretendard;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  text-align: left;
  color: #fb3636;
}

.input-container.type-timer .type-timer-box .btn {
  color: #151515;
  background-color: #f1f1f1;
  border-color: #f1f1f1;
  height: 34px;
  border-radius: 8px;
  font-weight: 500;
}
/* label 스타일 */
.input-container > .label {
  font-family: Pretendard;
  font-size: 14px;
  font-weight: 700;
  line-height: 19.6px;
  text-align: left;
  color: #151515;
  margin-bottom: 8px;
}
.floating-label {
  position: absolute;
  left: 16px;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  font-family: Pretendard;
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
  text-align: left;
  transition: 0.2s ease all;
  pointer-events: none;
  color: #B0B0B3;
}
.comp .floating-label {
  top: 20.5px;
  left: 16px;
  font-family: Pretendard;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  letter-spacing: -0.04em;
  text-align: left;
  color: #888;
  white-space: nowrap;
}
/* input 기본 스타일 */
.input-container > .label + .custom-input {
  padding: 0 16px;
  height: 52px;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 400;
  line-height: 21.6px;
  text-align: left;
}
.input-container > .label + .custom-input::placeholder {
  font-weight: 400;
  font-size: 16px;
}
.input-container.text-error > input[type="text"].custom-input {
  border: 1px solid #ff0000;
}
.input-container.label-error > input[type="text"].custom-input.focus,
.input-container.label-error > .custom-input {
  border: 1px solid #ff0000 !important;
}
.input-container.label-error.password > input[type="text"].custom-input.focus,
.input-container.label-error.password > .custom-input {
  border: none !important;
}
.input-container.label-error .col-box > .custom-input:nth-of-type(-n+2) {
  border: 1px solid #ff0000 !important;
}
.input-container.text-error .floating-label {
  color: #ff0000;
}
.input-container.text-error.focus-on input {
  border: 1px solid #ff0000;
}
.input-container.password {
  border: 1px solid rgba(229, 229, 232, 1);
  border-radius: 12px;
  padding-right: 80px;
}
.input-container.password.focus-on {
  border: 1px solid #151515;
}
.input-container.password .icon-del{
  right: 48px;
}
.input-container.password .icon-eye {
  display: none;
  right: 16px;
}
.input-container.password .custom-input {
  border: none !important;
  padding-right: 0;
}
.input-container.password.label-error {
  border: 1px solid #ff0000;
}
.custom-input,
input[type="text"].custom-input,
input[type="number"].custom-input,
input[type="tel"].custom-input {
  width: 100%;
  padding: 21.5px 16px;
  font-size: 20px;
  border-radius: 12px;
  outline: none;
  font-weight: 700;
  background-color: #fff;
  border: 1px solid rgba(229, 229, 232, 1); /* 보더 컬러 4/8 수정 */
}
.label-n .custom-input,
.label-n input[type="text"].custom-input.focus,
.label-n input[type="text"].custom-input:not(:placeholder-shown),
.label-n.focus-on input[type="text"].custom-input,
.label-n input[type="number"].custom-input.focus,
.label-n input[type="number"].custom-input:not(:placeholder-shown),
.label-n input[type="tel"].custom-input.focus,
.label-n input[type="tel"].custom-input:not(:placeholder-shown) {
  line-height: 27px;
  padding-bottom: 12px;
  padding-top: 31px;
}
.label-n.type-timer
  input[type="number"].custom-input:not(:placeholder-shown)
  ~ .icon-del {
  right: 110px;
}

.label-n.type-timer input[type="text"].custom-input:not(:placeholder-shown) {
  border: 1px solid #ff0000;
}
.label-n.type-timer.label-error input[type="text"].custom-input.focus {
  border: 1px solid #ff0000;
}

.small .custom-input,
.small input[type="text"].custom-input,
.small input[type="email"].custom-input,
.small input[type="password"].custom-input {
  padding: 0 40px 0 16px;
  height: 52px;
  line-height: 52px;
  font-size: 16px;
  font-weight: 400;
}
.small input[type="text"].custom-input::placeholder,
.small input[type="email"].custom-input::placeholder {
  color: #B0B0B3;
}
.small .custom-input.email-input, .small input[type="text"].custom-input.email-input, 
.small input[type="email"].custom-input.email-input {
  padding-top: 0;
}

.small .custom-input.error,
.small input[type="text"].custom-input.error {
  border-color: #fc0626;
}

.small .custom-input::placeholder,
.small input[type="text"].custom-input::placeholder {
  height: auto;
  font-size: 16px;
  font-weight: 400;
}
/* 주민등록번호 input */
.id-number {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 12px;
  outline: none;
}
.id-number .custom-input,
.id-number input.custom-input {
  border: 0 !important;
}
.id-number > div {
  position: relative;
}
.id-number > div:first-of-type {
  width: 100%;
}
.id-number.focus-on > div:first-of-type,
.id-number.fill > div:first-of-type {
  width: auto;
}
.id-number > div:first-of-type input {
  width: 100%;
  padding-right: 6px;
}
.id-number.focus-on > div:first-of-type input,
.id-number.fill > div:first-of-type input {
  width: 102px;
}
.id-number > div:last-of-type .custom-input {
  padding-left: 6px;
}
.id-number.label-error {
  border: 1px solid #ff0000;
}
.id-number .dash, .id-number .dash + div {
  display: none;
}

.id-number.focus-on .dash, .id-number.focus-on .dash + div,
.id-number.fill .dash, .id-number.fill .dash + div {
  display: block;
}
/* //주민등록번호 input */
/* 카드등록 */
/* 기본 상태: dual-input 숨기기 */
.input-container.expiration .dual-input {
  display: none;
}

/* 삼성카드일 경우: single-input 숨기고 dual-input 보이기 */
.input-container.expiration.samsung .single-input {
  display: none;
}

.input-container.expiration.samsung .dual-input {
  display: flex; /* 혹은 inline-flex */
  gap: 8px;
}
/* //카드등록 */

.small.label-n .custom-input,
.small.label-n input[type="text"].custom-input.focus,
.small.label-n input[type="text"].custom-input:not(:placeholder-shown) {
  padding-top: 11.5px;
}

/* input에 포커스가 있을 때, 또는 값이 입력되었을 때 label 스타일 */
.custom-input:focus ~ .floating-label,
.custom-input:not(:placeholder-shown) ~ .floating-label,
.focus-on .floating-label {
  z-index: 1;
  white-space: nowrap;
  top: 20.5px;
  left: 16px;
  width: 100%;
  font-family: Pretendard;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.04em;
  text-align: left;
  color: #888;
}
.focus-on em.dash {
  top: 11.5px;
}
.focus-on.comp em.dash {
  color: #575757;
}

.focus-on .id-mark {
  margin-top: 9.5px;
}

.fill .floating-label {
  white-space: nowrap;
  top: 20.5px;
  left: 16px;
  font-family: Pretendard;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.04em;
  text-align: left;
  color: #575757;
}
.fill em.dash {
  top: 10px;
}
.fill.comp em.dash {
  color: #575757;
}

.fill .id-mark {
  margin-top: 9.5px;
}
.label-n.fill input[type="text"].custom-input {
  line-height: 27px;
  padding-bottom: 11.5px;
  padding-top: 31.5px;
}
/* 에러 */
.label-error .custom-input:not(:placeholder-shown) ~ .floating-label,
.label-error.focus-on .floating-label,
.error .custom-input:not(:placeholder-shown) ~ .floating-label,
.error.focus-on .floating-label {
  color: #fc0626;
}
.error.label-n .custom-input,
.error.label-n input[type="text"].custom-input.focus,
.error.label-n input[type="text"].custom-input:not(:placeholder-shown),
.error.label-n.focus-on input[type="text"].custom-input {
  color: #fc0626;
  border: 1px solid #fc0626 !important;
}
/* //에러 */
/* 비활성화 */
.disabled .custom-input {
  background-color: #f9f9f9;
  color: #ccc;
}
.disabled .floating-label {
  color: #575757;
}
/* //비활성화 */
/* 읽기전용 */
.readonly .custom-input {
  background-color: #f9f9f9;
  color: #575757;
}
.readonly .floating-label {
  color: #575757;
}
/* //읽기전용 */

.custom-input:focus {
  padding-top: 31.5px;
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
  text-align: left;
}
.custom-input.focus:not(:placeholder-shown) ~ .icon-del {
  display: block;
  z-index: 999;
}
.custom-input:not(:placeholder-shown) ~ .icon-del {
  display: none;
}
/* input 검색 리스트 */
.input-container.search .search-list {
  position: absolute;
  left: 0;
  width: 100%;
  border: 1px solid #cccccc;
  border-radius: 10px;
  background-color: #fff;
  z-index: 10;
}

.input-container.small.search .search-list {
  top: 52px;
}

.input-container.small.search .search-list li {
  height: 54px;
  padding: 0 15px;
  font-size: 16px;
  font-weight: 400;
  line-height: 54px;
  text-align: left;
}
.type-timer .custom-input.focus:not(:placeholder-shown) ~ .icon-del {
  right: 110px;
  /* 250526 스타일 수정 */
}

/* input 열나눔 */
.input-container.col .col-box {
  display: flex;
  gap: 0 8px;
  align-items: center;
}
.input-container.col .col-box .logo-box {
  position: relative;
  width: 42px;
  height: 42px;
  background: #F6F6F9;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.input-container.col .col-box .logo-box img {
  width: 24px;
  height: 24px;
}
.input-container.col .col-box .logo-box.size-up {
  background: #fff;
}
.input-container.col .col-box .logo-box.size-up img {
  width: auto;
  height: auto;
}
.input-container.col .col-box .custom-input,
.input-container .col-box .custom-input
 {
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 400;
  line-height: 21.6px;
  height: 48px;
  padding: 0 6px;
  text-align: center;
}
.input-container .col-box .custom-input {
  text-align: left;
  padding: 0 16px;
}
.input-container .col-box .custom-input::placeholder {
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: -2%;
}

/* 인풋 정보 텍스트 추가 */
.input-container + .input-info-text {
  margin-top: 8px;
  color: #7d7d7d;
}
/* //input 열나눔 */
.id-mark {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 0 4px;
}
.id-mark > i {
  display: block;
  width: 12px;
  height: 12px;
  background-color: #000;
  border-radius: 100%;
}
em.dash {
  position: relative;
  font-family: Pretendard;
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
  text-align: left;
  color: #ccc;
}
/*  */

/* gray-box */
.gray-box {
  background: #fff;
  border: 1px solid #e5e5e8;
  border-radius: 16px;
}
.gray-box.bank-box {
  background: #f7ffc7;
  border: 0;
}
.gray-box.phone-box {
  background: #f6f6f9;
  border: 1px solid #f6f6f9;
  color: #151515;
}
.gray-box > button {
  width: 100%;
  color: #fff;
  padding: 20px;
  color: #151515;
}
.gray-box.gradiant-bg2 > button {
  color: #222;
}
.gray-box .img-box {
  width: 42px;
  height: 42px;
  overflow: hidden;
}
.gray-box .img-box > p {
  width: 42px;
  height: 42px;
  border-radius: 100%;
  overflow: hidden;
}
.gray-box .img-box .icon-bank {
  width: 100%;
  height: 100%;
}
.gray-box .img-box .icon-whistle {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gray-box .img-box .icon-whistle .icon-bank {
  z-index: 1;
  width: 42px;
  height: 42px;
}
.gray-box .img-box .icon-whistle::after {
  content: '';
  position: absolute;
  width: 42px;
  height: 42px;
  background: #fff;
  border-radius: 100%;
  top: 0;
  left: 0;
}
.gray-box .text-box .title {
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 700;
  line-height: 25.6px;
  letter-spacing: -0.02em;
  text-align: left;
  color: #151515;
  margin-bottom: 0;
}
.gray-box .text-box .sub-title {
  font-family: Pretendard;
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  letter-spacing: -0.02em;
  text-align: left;
  color: #151515;
}
.gray-box .text-box .sub-title.type2 {
  font-family: Pretendard;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  letter-spacing: -0.02em;
  color: #888;
}
.gray-box .text-box .sub-title .icon-arrow-right {
  width: 16px;
  height: 16px;
}
.gray-box .label {
  font-family: Pretendard;
  font-weight: 400;
  font-size: 12px;
  line-height: 140%;
  letter-spacing: -2%;
  color: #e0ff63;
  background-color: #151515;
  border-radius: 16px;
  width: 42px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.gray-box.bank-box .swiper-container, .sortable-list .swiper-container {
  width: 42px; /* 이미지 크기에 맞게 설정 */
  height: 42px;
  overflow: hidden;
}

.gray-box.bank-box .swiper-slide , .sortable-list .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.gray-box.bank-box .icon-bank {
  width: 100%; /* 이미지 크기 조정 */
  height: auto;
}
/* //gray-box */

/* toggle-switch */
.toggle-switch {
  display: flex;
  position: relative;
  width: 44px;
  height: 24px;
  padding: 3px;
  border-radius: 100px;
  background-color: #d1d1d1;
  transition: all 0.3s;
}

.toggle-switch.active {
  background-color: #151515;
}

.toggle-switch .toggle-circle {
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #fff;
  transition: all 0.3s;
}

.toggle-switch.active .toggle-circle {
  left: calc(100% - 21px);
}

/* toggle-box */
.toggle-box {
  text-align: center;
  margin: 24px auto;
}
.toggle-buttons { /* pass 인증 사라지면서 스타일 수정됨 4/4 */
  display: flex;
  justify-content: space-between;
  border-radius: 12px;
  padding: 0;
  max-width: 86px;
  margin: 0 auto 4px; /* ars 인증 간격 수정 4/4 */
}
.button-one .toggle-buttons {
  max-width: 86px;
  padding: 0;
}
.toggle-button {
  padding: 11px 10px;
  border-radius: 10px;
  color: #888;
  cursor: pointer;
  transition: all 0.3s;
  font-family: Pretendard;
  font-size: 14px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.02em;
  text-align: center;
  white-space: nowrap;
  min-width: 86px;
  max-width: 86px;
  max-height: 44px;
  width: 100%;
}
.toggle-button.active {
  background-color: #fff;
  color: #151515;
  font-weight: 700;
}

.instruction {
  color: #454545;
  margin: 10px 0;
  font-family: Pretendard;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  letter-spacing: -0.02em;
  text-align: center;
}

.verification-code {
  font-family: Pretendard;
  font-size: 48px;
  font-weight: 700;
  line-height: 67.2px;
  letter-spacing: -0.03em;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  margin: 10px 0;
  color: #7cac04;
}

.call-button,
.pass-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  width: 100%;
  max-width: 106px;
  background-color: #151515;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s;
  margin: 10px auto 0;
}

.call-button:disabled,
.pass-button:disabled {
  pointer-events: none; /* 클릭 효과를 없앰 */
  background-color: #d1d1d5;
  /* 250526 스타일 수정 */
}

.call-button > i,
.pass-button > i {
  margin-right: 5px;
}

.toggle-content {
  display: none;
}

.toggle-content.active {
  display: block;
}
.toggle-content .instruction {
  margin: 0; /* ars 인증 간격 수정 4/4 */
}
/* //toggle-box */

/* step-list */
.step-list li {
  display: none;
}
.step-list li.on {
  display: block;
}
/* //step-list */

/* input-mark */
.input-mark {
  position: relative;
  clear: both;
  margin-top: 40px;
  text-align: center;
}
.input-mark:after {
  content: "";
  clear: both;
  display: block;
}
.input-mark.focus {
  border: 0;
}
.input-mark .mark {
  /* position: absolute; */
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  font-size: 0;
  text-align: center;
}
.input-mark .mark i {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  overflow: hidden;
  margin-left: 16px;
  background: #e5e5e8;
  border-radius: 100%;
}
.input-mark .mark i:first-child {
  margin-left: 0;
}
.input-mark .mark i.on {
  background: #a0d70b;
}
.input-mark .mark.error i.on {
  background: #ff4242;
}
#passwordSet .password-wrap .input-mark .btn {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  border-radius: 8px;
  padding: 7px 12px;
  height: auto;
  /* 250703 비밀번호를몰라요 버튼 높이수정 */
}

/* 생체정보 등록 모달 */
.modal-step1,
.modal-step2 {
  display: none;
}
#modal-bio-reg .modal-step1,
#modal-bio-reg .modal-step2 {
  height: 100%;
}
.bio-reg-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  margin-top: 130px;
}
.bio-reg-wrap .bio-reg-text {
  font-family: Pretendard;
  font-size: 18px;
  font-weight: 700;
  line-height: 24.3px;
  text-align: center;
  color: #151515;
  margin-top: 20px;
}
/* //생체정보 등록 모달 */

/* 아코디언 리스트 애니메이션 */
/* .accordion-list li {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.accordion-list li.active {
    display: block;
    opacity: 1;
} */
/* 기본 상태: 모든 li 요소는 숨겨짐 */
.accordion-list li {
  display: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.5s, transform 0.5s;
}

/* 애니메이션을 위한 keyframes 정의 */
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(-10px); /* 위에서 내려오기 */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* 원래 위치로 */
  }
}

/* active 클래스가 추가되면 애니메이션 적용 */
.accordion-list li.active {
  display: block; /* 요소를 보이게 */
  animation: slideIn 0.5s ease-out forwards;
}

/* 각 li 요소가 순차적으로 보이도록 지연 시간 설정 */
.accordion-list li:nth-child(1).active {
  animation-delay: 0s;
}
.accordion-list li:nth-child(2).active {
  animation-delay: 0.25s;
}
.accordion-list li:nth-child(3).active {
  animation-delay: 0.5s;
}
.accordion-list li:nth-child(4).active {
  animation-delay: 0.75s;
}
.accordion-list li:nth-child(5).active {
  animation-delay: 1s;
}
/* 필요에 따라 더 많은 li에 대해 nth-child 추가 */

/* //아코디언 리스트 애니메이션 */

/* 비밀번호 등록 */

#passwordSet .password-wrap {
  padding-top: 50px;
  height: calc(100% - 50px);
}
#passwordSet .password-wrap .content-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#passwordSet .password-wrap .mark-box {
  position: fixed;
  bottom: 0;
  margin: auto auto 0;
  width: 100%;
  height: 317px;
  text-align: center;
}
#passwordSet .password-wrap .mark-box img {
  height: 100%;
  max-height: 281px;
}
#passwordSet .password-wrap .mark-box .btn {
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  padding: 0 8px;
  height: 26px;
}
#passwordSet .password-wrap .title {
  margin-top: 30px;
  font-family: Pretendard;
  font-weight: 700;
  font-size: 20px;
  line-height: 140%;
  text-align: center;
  /* 250526 스타일 수정 */
}
#passwordSet .password-wrap .title .error-count {
  color: #ff4242;
}
#passwordSet .password-wrap .modal-step2 .title {
  margin-top: 150px;
}
#passwordSet .password-wrap .title p {
  margin-top: 20px;
}
#passwordSet .password-wrap .title + .sub-title {
  font-family: Pretendard;
  font-size: 15px;
  font-weight: 400;
  line-height: 20.25px;
  text-align: center;
  margin-top: 15px;
}
#passwordSet .noti-text {
  font-family: Pretendard;
  font-size: 13px;
  font-weight: 400;
  line-height: 18.2px;
  letter-spacing: -0.02em;
  text-align: center;
  color: #ff4242;
  margin-top: 16px;
}
#passwordSet .btn-bio {
  position: relative;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  line-height: 18.2px;
  letter-spacing: -0.02em;
  color: #454545;
}
#passwordSet .btn-bio::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url("../images/common/icon-checkbox-on.svg") no-repeat center / contain;
  margin-right: 5px;
}
#passwordSet .checkbox.bio {
  margin-bottom: 16px;
}
#passwordSet .checkbox.bio > input + label {
  padding-left: 29px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.02em;
  color: #151515;
}
#passwordSet .checkbox.bio > input + label:before {
  width: 24px;
  height: 24px;
  background: url("../images/common/icon-checkbox-off.svg") no-repeat center /
    contain;
  margin-right: 5px;
}
#passwordSet .checkbox.bio > input:checked + label:before {
  background: url("../images/common/icon-checkbox-on.svg") no-repeat center /
    contain;
}

/* [2026-08-25] PIN 키패드 — #wrap.password-pin-flow (opt-in)
 * [2026-09-04] A안: TB와 동일 — 키패드는 #content 안 유지. mark-box 없음(결제 PIN)
 * 높이 예약: #content padding-bottom ≈ 키패드 실높이(JS, CTA padding과 동일 결)
 * 생체·목업 img 화면만 선택적으로 > .mark-box 유지
 */
#wrap.password-pin-flow {
  display: flex;
  flex-direction: column;
  overflow: visible;
  /* body > div { height:100% } 보다 우선 — 패딩만큼 문서가 늘어나야 스크롤됨 */
  height: auto !important;
  min-height: 100dvh;
}

@supports not (height: 100dvh) {
  #wrap.password-pin-flow {
    min-height: calc(var(--vh, 1vh) * 100);
  }
}

#wrap.password-pin-flow #content {
  display: flex;
  /* flex:1 이면 min-height:100dvh 안에서 padding-bottom을 흡수 → 문서 높이가 안 늘어남 */
  flex: 0 0 auto;
  flex-direction: column;
  min-height: auto;
  overflow: visible;
  /* 기본 0 — 키패드 높이는 fixPinKeypadPadding / 페이지 JS가 설정 */
  padding-bottom: 0;
}

#wrap.password-pin-flow #passwordSet .password-wrap,
#wrap.password-pin-flow #passwordSet .password-wrap .content-wrap {
  height: auto;
}

/* (선택) 생체·목업 img 화면 — fixed 해제, 문서 흐름
 * wrap 직속(verify_error) · #content 직속(A안 pass_forget) 동일 중앙정렬
 */
#wrap.password-pin-flow > .mark-box,
#wrap.password-pin-flow #content > .mark-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  flex-shrink: 0;
  width: 100%;
  height: auto;
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  text-align: center;
  box-sizing: border-box;
}

#wrap.password-pin-flow > .mark-box .checkbox.bio,
#wrap.password-pin-flow #content > .mark-box .checkbox.bio {
  margin-bottom: 16px;
}

#wrap.password-pin-flow > .mark-box .checkbox.bio > input + label,
#wrap.password-pin-flow #content > .mark-box .checkbox.bio > input + label {
  padding-left: 29px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.02em;
  color: #151515;
}

#wrap.password-pin-flow > .mark-box .checkbox.bio > input + label:before,
#wrap.password-pin-flow
  #content
  > .mark-box
  .checkbox.bio
  > input
  + label:before {
  width: 24px;
  height: 24px;
  background: url("../images/common/icon-checkbox-off.svg") no-repeat center /
    contain;
  margin-right: 5px;
}

#wrap.password-pin-flow > .mark-box .checkbox.bio > input:checked + label:before,
#wrap.password-pin-flow
  #content
  > .mark-box
  .checkbox.bio
  > input:checked
  + label:before {
  background: url("../images/common/icon-checkbox-on.svg") no-repeat center /
    contain;
}

#wrap.password-pin-flow > .mark-box img,
#wrap.password-pin-flow #content > .mark-box img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 281px;
  margin-left: auto;
  margin-right: auto;
}

/* [2026-09-04] PIN + NPPFS — 짧은 화면 문서 스크롤 (A안)
 * 키패드 DOM은 #content 안(TB). absolute bottom은 #wrap(position:relative) 기준
 * #content padding-bottom으로 높이 확보. 솔루션 left/top·크기는 변경 금지(목업만 비율)
 */
html:has(#wrap.password-pin-flow),
body:has(#wrap.password-pin-flow) {
  height: auto;
  min-height: 100%;
  /* html { -ms-touch-action:none } 스크롤 차단 해제 */
  touch-action: pan-y;
  -ms-touch-action: pan-y;
}

body:has(#wrap.password-pin-flow) {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}

body:has(#wrap.password-pin-flow) div.nppfs-keypad-div {
  position: absolute !important;
  bottom: 0;
  height: auto !important;
}

/* mark-box 안 키패드 — verify형: 생체와 한 덩어리(문서 흐름, absolute 해제) */
body:has(#wrap.password-pin-flow) .mark-box div.nppfs-keypad-div {
  position: relative !important;
  bottom: auto;
  left: auto;
  right: auto;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* 퍼블 목업 — TB 솔루션 스케일 대체: data-width/height 690×514 비율 */
body:has(#wrap.password-pin-flow) div.nppfs-keypad-div .nppfs-keypad {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 690 / 514;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

body:has(#wrap.password-pin-flow) div.nppfs-keypad-div .kpd-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  white-space: normal;
}

body:has(#wrap.password-pin-flow) div.nppfs-keypad-div .kpd-image-button {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  object-fit: contain;
}

body:has(#wrap.password-pin-flow) div.nppfs-keypad-div .kpd-group {
  display: none;
}
/* //[2026-09-04] PIN + NPPFS — 짧은 화면 문서 스크롤 */
/* //[2026-08-25] PIN 키패드 — #wrap.password-pin-flow */

/* //비밀번호 등록 */

/* 로티 */
.lottie-check {
  display: block;
  width: 120px;
  height: 120px;
  margin-bottom: 16px;
  transform-origin: center;
  margin: 0 auto;
}
.checkbox.more > input + label.lottie-loading {
  display: inline-block;
}
.checkbox.more > input + label.lottie-loading svg {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 24px;
  z-index: 10;
}
.lottie-spiner {
  display: block;
  width: 56px;
  height: 56px;
  transform-origin: center;
  margin: 0 auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}
.lottie-spiner-wrap {
  content: '';
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 100;
}
/* //로티 */

/* 약관동의 풀페이지 */
.agree-full-wrap .check-all.top {
  background-color: #f6f6f6;
  border-radius: 16px;
  padding: 16px 12px;
}
.agree-full-wrap .check-all.top .sub-title {
  padding-left: 32px;
  font-family: Pretendard;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  margin-top: 4px;
}
.agree-full-wrap .terms-wrap {
  margin-top: 12px;
}
.agree-full-wrap .terms-wrap .check-all {
  position: relative;
  padding: 8px 0;
}
.agree-full-wrap .terms-wrap .check-all + .check-all {
  margin-top: 8px;
}
.agree-full-wrap .terms-wrap .check-all .btn-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  background: url("../images/common/icon-arrow-up.svg") no-repeat center /
    contain;
  width: 20px;
  height: 20px;
  transform: translateY(-50%) rotate(180deg);
}
.agree-full-wrap .terms-wrap .check-all .btn-toggle.open {
  transform: translateY(-50%);
}
.agree-full-wrap .terms-wrap .check-all:first-of-type {
  margin-top: 0;
}
.agree-full-wrap .terms-wrap .check-all .checkbox > input + label {
  font-weight: 700;
}
.agree-full-wrap .terms-wrap .terms-list {
  padding: 0 2px;
}
.agree-full-wrap .terms-wrap .checkbox-block-group {
  padding: 8px 0;
}
.agree-full-wrap
  .terms-wrap
  .checkbox-block-group
  .checkbox.child
  > input
  + label {
  font-family: Pretendard;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  line-height: 1;
}
.agree-full-wrap .check-all-box .checkbox > input + label {
  font-weight: 700;
}
.agree-full-wrap .check-all-box .checkbox > input + label:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 24px;
  height: 24px;
  background: url(../images/common/icon-checkbox-off.svg) no-repeat center /
    contain;
  z-index: 2;
}
.agree-full-wrap .check-all-box .checkbox > input:checked + label:before {
  background-image: url(../images/common/icon-checkbox-on.svg);
}
/* //약관동의 풀페이지 */

/* box-list */
.box-list {
  color: #151515;
}
.box-list .title {
  font-size: 16px;
  font-weight: 700;
  line-height: 21.6px;
  text-align: left;
  margin-bottom: 8px;
}
.box-list .icon-bank {
  width: 24px;
  height: 24px;
}
.box-list .label-orange {
  color: #fff;
  font-family: Pretendard;
  font-size: 11px;
  font-weight: 700;
  line-height: 16.5px;
  letter-spacing: -0.04em;
  text-align: center;
  background: #ff5a00;
  border-radius: 10px;
  line-height: 20px;
  min-width: 37px;
}
.box-list .btn {
  display: block;
  padding: 0 8px;
  border: 0;
  background-color: transparent;
  border-radius: 11px;
  font-family: Pretendard;
  font-size: 13px;
  font-weight: 700;
  line-height: 24px;
  color: #fff;
  border: 1px solid #fff;
  height: auto;
}
/* //box-list */

/* load-option-box */
.load-option-box {
  margin-top: 12px;
  display: flex;
  gap: 0 8px;
}
.load-option-box .btn-load {
  border: 1px solid #d6d6d6;
  border-radius: 40px;
  font-size: 12px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.03em;
  text-align: center;
  color: #1c1b1f;
  width: 25%;
}
/* //load-option-box */

/* charge-info-list */
.charge-info-list {
  margin-top: 20px;
}
.charge-info-list li {
  display: flex;
  justify-content: space-between;
  height: 40px;
  align-items: center;
}
.charge-info-list li > p,
.charge-info-list li > div {
  font-family: Pretendard;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  letter-spacing: -0.03em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #000;
}
.charge-info-list li > p:first-of-type {
}
.charge-info-list li > p:last-of-type {
  font-weight: 700;
}
.charge-info-list li > p.btn-label {
  font-size: 13px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  color: #222;
  background-color: #eaeaea;
  border-radius: 50px;
  padding: 0 6px;
}
.charge-info-list li > p.btn-label img {
  width: 18px;
  height: 18px;
  margin-right: 2px;
}
.charge-info-list li > p.btn-label > i {
  margin-left: 5px;
}
.charge-info-list li > p.btn-label > .icon-telecom {
  width: 16px;
  height: 16px;
  background-color: #333;
  margin-right: 2px;
}
/* //charge-info-list */

/* account-list */
.account-list > li > button {
  width: 100%;
  height: 62px;
}
.account-list > li {
  padding: 8px 0;
  height: auto;
}
.account-list > li:last-of-type {
  margin-bottom: 30px;
}
.account-list > li.btn-wrap {
  margin-bottom: 0; /* 바텀시트 > 버튼영역에 하단 여백생겨서 추가 4/2 */
}
.account-list > li > a {
  display: block;
  height: 32px;
  line-height: 32px;
}
.account-list .img-bank {
  width: 62px;
  height: 62px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 8px;
}
.account-list .img-bank > img {
  width: 42px;
  height: 42px;
}
.account-list .text-bank {
  display: flex;
  flex-direction: column;
  align-items: start;
}
.account-list .text-bank > span:last-of-type {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.03em;
  text-align: left;
  color: #454545;
}
.account-list .text-bank > span:first-of-type {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.02em;
  text-align: left;
  color: #000;
}
.account-list .text-bank + .icon-star,
.account-list .text-bank + .icon-arrow-right {
  margin-left: auto;
}
.account-list .btn-wrap .btn {
  display: inline-block;
  width: 100%;
  height: 56px;
  border: 1px solid #e5e5e8;
  border-radius: 16px;
  color: #151515;
  font-size: 16px;
  font-weight: 700;
  line-height: 56px;
  text-align: center;
  letter-spacing: -0.02em;
  background-color: #fff;
}
/* //account-list */

.tooltip-box {
  display: none;
  width: 188px;
  position: absolute;
  top: 20px;
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 14px;
  background-color: #fff;
  z-index: 100;
}
.tooltip-box .title {
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: -0.04em;
  text-align: left;
  color: #575757;
  margin-top: 6px;
}
.tooltip-box .text-wrap {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.04em;
  text-align: left;
  color: #575757;
}
.close-tooltip {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 12px;
  height: 12px;
  background: url("../images/common/icon-close.svg") no-repeat center/contain;
}

.info-wrap .info-title {
  font-family: Pretendard;
  font-size: 15px;
  font-weight: 700;
  line-height: 21px;
  text-align: left;
  color: #151515;
}

.info-wrap .info-list {
  font-family: Pretendard;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.04em;
  text-align: left;
  color: #575757;
  margin-bottom: 30px;
}

.info-wrap .info-list > li {
  position: relative;
  padding-left: 12px;
  margin-bottom: 6px;
}
.info-wrap .info-list > li:last-of-type {
  margin-bottom: 0;
}
.info-wrap .info-list > li::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 7px;
  left: 0;
  background-color: #7d7d7d;
  border-radius: 100%;
  width: 3px;
  height: 3px;
}

.info-section {
  background-color: #f9f9f9;
  margin-top: 0;
}

/* result-wrap */
.result-wrap {
  margin-top: -30px;
}
.result-wrap .result-list > li {
  display: flex;
  justify-content: space-between;
  height: 40px;
  align-items: center;
}
.result-wrap .result-list > li > p {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  letter-spacing: -0.03em;
  text-align: left;
  color: #000;
}
/* //result-wrap */

/* 에러 페이지 */
.error-container .complete-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100px;
  color: #000;
  font-size: 24px;
  font-weight: 700;
  line-height: 33.6px;
  letter-spacing: -0.03em;
  text-align: center;
}
.error-container .complete-text .load-error {
  display: block;
  width: 80px;
  height: 80px;
  margin-bottom: 12px;
  transform-origin: center;
}
.error-container .complete-text .title, .container.error-container.banner-full-container .complete-text .title {
  font-family: Pretendard;
  font-weight: 700;
  font-size: 18px;
  line-height: 140%;
  text-align: center;
  color: #151515;
}
.error-container .complete-text .small-text, .container.error-container.banner-full-container .complete-text .small-text {
  font-family: Pretendard;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  text-align: center;
  color: #151515;
  margin-top: 4px;
}
/* 에러 페이지 */

/* 배너 영역 추가 */
.banner-alert {
  position: absolute;
  left: 50%;
  bottom: 112px;
  width: 100%;
  padding: 0 20px;
  max-width: 700px;
  transform: translateX(-50%);
}
.banner-alert p {
  font-family: Pretendard;
  font-weight: 400;
  font-size: 12px;
  line-height: 140%;
  color: #454545;
  background: #E5DEFF url(../images/common/banner-alert.png) no-repeat right center / contain;
  border-radius: 16px;
  padding: 16px;
  height: 69px;
  max-width: 700px;
}
.banner-alert strong {
  font-family: Pretendard;
  font-weight: 700;
  font-size: 14px;
  line-height: 140%;
  color: #454545;
}
.banner-alert::after {
  content: '';
}
/* //배너 영역 추가 */

/* 라운드 배너랩 추가 */
.rround-banner-wrap {
  position: absolute;
  left: 50%;
  bottom: 96px;
  width: 100%;
  padding: 0 20px;
  max-width: 700px;
  transform: translateX(-50%);
  /* 250526 스타일 수정 */
}
/* 라운드 배너랩 추가 */

.icon-timer {
  width: 64px;
  height: 64px;
  background: url(../images/common/icon-timer.svg) no-repeat center / contain;
  margin-bottom: 16px;
}

/* 약관 스타일 추가 */
.rround-table-scroll {
  width: 100%;
  overflow-x: auto;
}
.rround-table-scroll .rround-terms-table th, .rround-table-scroll .rround-terms-table td {
  min-width: 160px;
}
.modal-terms .modal-content .modal-body {
  height: auto;
  overflow: visible;
  padding: 0 16px;
}
.modal-terms .modal-content .modal-body .title-text {
  overflow: hidden;
  height: auto;
  position: sticky;
  top: 16px;
  z-index: 100;
  font-weight: 700;
  font-size: 18px;
  line-height: 140%;
}
.modal-terms .modal-content .modal-body .detail-wrap {
  margin-top: 16px;
  font-size: 14px;
}

.modal-terms .modal-content .modal-body .detail-wrap h3,
.modal-terms .modal-content .modal-body .detail-wrap h4 {
  font-size: 14px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.02em;
  align-items: start;
  color: #151515;
  margin-top: 16px;
  margin-bottom: 16px;
  text-align: left;
}

.modal-terms .modal-content .modal-body .detail-wrap p,
.modal-terms .modal-content .modal-body .detail-wrap div {
  font-size: 14px;
}

.modal-terms .modal-content .modal-body .detail-wrap b {
  font-size: 18px;
}

.modal-terms .modal-content .modal-body .detail-wrap ol {
  margin-top: 4px;
}

.modal-terms .modal-content .modal-body .detail-wrap ol li,
.modal-terms .modal-content .modal-body .detail-wrap .indent-num {
  padding-left: 16px;
  text-indent: -16px;
}

.modal-terms .modal-content .modal-body .detail-wrap .depth1 {
  margin-left: 20px;
}

/* 특정 약관 */
.modal-terms .modal-content .modal-body .detail-wrap .card-terms-container h3 {
  font-size: 18px;
  font-weight: 700;
}

.modal-terms .modal-content .modal-body .detail-wrap .card-terms-container b {
  font-size: 16px;
  font-weight: 700;
}

.modal-terms .modal-content .modal-body .terms-tit {
font-family: Pretendard;
font-weight: 700;
line-height: 140%;
letter-spacing: -2%;
align-items: start;
color: #151515;
margin-top: 16px;
margin-bottom: 16px;
}
.modal-terms .modal-content .modal-body .inner-text + .terms-con {
  margin-top: 12px;
}
.modal-terms .modal-content .modal-body .terms-con {
  font-family: Pretendard;
  font-weight: 400;
  font-size: 15px;
  line-height: 140%;
  letter-spacing: -2%;
  align-items: start;
  color: #454545;
  margin-bottom: 16px;
}
.modal-terms .modal-content .modal-body .terms-tit .sub-tit {
  font-family: Pretendard;
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -2%;
    align-items: start;
    color: #151515;
    margin-bottom: 16px;
}
.modal-terms .modal-content .modal-body ul > li > strong {
  display: inline-block;
  position: relative;
  font-family: Pretendard;
  font-weight: 700;
  font-size: 14px;
  color: #151515;
  margin-bottom: 8px;
}

.rround-terms-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  margin-bottom: 16px;
  min-width: 600px;
}

.rround-terms-table th,
.rround-terms-table td {
  border: 1px solid #ddd;
  text-align: left;
  vertical-align: middle;
  padding: 10px;
  font-size: 14px;
  word-break: break-word;
}

.rround-terms-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}
.rround-terms-table thead th {
  text-align: center;
}

.rround-center-table th,
.rround-center-table td {
  text-align-last: center;
  min-width: 160px;
}
.rround-terms-table th:first-of-type,
.rround-terms-table td:first-of-type {
  min-width: 160px;
}

.rround-terms-table .cell-img {
  text-align: center;
}
.rround-terms-table .cell-img img {
  width: 48px;
  height: 48px;
  display: inline-block;
  margin: 0 auto 8px;
}
.rround-terms-table .cell-img span {
  font-family: Pretendard;
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: -2%;
  text-align: center;
  color: #454545;
  display: block;
}

.rround-terms-table td.top-left {
  vertical-align: top;
  text-align: left;
}
.rround-terms-table td .small-text {
  font-family: Pretendard;
  font-weight: 400;
  font-size: 12px;
  line-height: 140%;
  letter-spacing: -2%;
  color: #888;
}
/* 약관 스타일 추가 */
.container.banner-full-container {
  height: calc(var(--vh, 1vh) * 100 - 152px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 0;
}
.container.banner-full-container.type2 {
  height: calc(var(--vh, 1vh) * 100 - 216px);
}
@supports (height: 100dvh) {
  .container.banner-full-container {
    height: calc(var(--dvh, 1dvh) * 100 - 152px);
  }
  .container.banner-full-container.type2 {
    height: calc(100dvh - 216px);
  }
}
.container.banner-full-container .complete-text {
  margin-top: auto;
  margin-bottom: auto;
}
.container.banner-full-container .complete-text p, .container.banner-full-container .complete-text .main-text {
  color: #151515;
  font-family: Pretendard;
  font-weight: 700;
  font-size: 24px;
}
.container.banner-full-container .complete-text p.small-text {
  font-size: 16px;
  font-weight: 400;
}
.container.banner-full-container .complete-text .sub-text {
  font-family: Pretendard;
  font-weight: 400;
  font-size: 16px;
  color: #151515;
  line-height: 22px;
  margin-top: 4px;
}
.container.banner-full-container .rround-banner-wrap {
  margin-top: auto;
  position: relative;
  transform: none;
  left: auto;
  bottom: auto;
  padding: 0;
  text-align: center;
}
.container.banner-full-container .rround-banner-wrap .banner-text {
  font-family: Pretendard;
  font-weight: 500;
  font-style: Medium;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: -2%;
  text-align: center;
  color: #454545;
}
.container.banner-full-container .rround-banner-wrap .banner-text > p {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 20px;
}
.container.banner-full-container .rround-banner-wrap .banner-text .icon-acct {
  width: 24px;
  height: 24px;
  background: url('../images/common/ico-acct.png') no-repeat center / contain;
  margin-right: 2px;
}
.container.banner-full-container .rround-banner-wrap .banner-text .color-text {
  color: #8BC104;
  font-weight: 500;
}
.modal.change-info .modal-body .note-wrap li {
  color: #454545;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%; /* 25.6px */
  letter-spacing: -0.32px;
}
.modal.change-info .modal-body .btn-wrap {
  height: 96px;
}
.modal.change-info.type-title .gray-box-wrap {
  margin-bottom: 16px;
}
.ad-wrap {
  position: relative;
  width: 100%;
  margin-top: auto;
  top: 4px;
}

.container.vertical {
  display: flex;
  flex-direction: column;
}
.container.vertical .btn-text {
  font-family: Pretendard;
  font-weight: 400;
  font-size: 16px;
  line-height: 160%;
  text-align: center;
  color: #888;
  background: none;
  border: 0;
  margin-top: 8px;
}
.modal-slide.type-title.modal-noti-left .modal-body .modal-img {
  height: 140px;
}
.modal-slide.type-title.modal-noti-left .modal-body .modal-img img {
  height: 100%;
}
.modal-slide.type-title.modal-noti-left .modal-footer {
  gap: 8px;
}
.modal-slide.type-title.modal-noti-left .modal-body .modal-text {
  margin-top: 16px;
}

/* 이전 목록보기 추가 */
.modal-terms .modal-content .modal-body .terms-tit.prev-list {
  margin-top: 40px;
  font-weight: 700;
  font-size: 16px;
  line-height: 140%;
}
.custom-select-box {
  position: relative;
}
.custom-select-box .custom-select-box {
  position: relative;
  width: 100%;
  max-width: 300px;
  font-family: sans-serif;
}

.custom-select-box .select-toggle {
  width: 100%;
  background: #fff;
  border: 1px solid #e5e5e8;
  border-radius: 12px;
  padding: 13px 16px;
  text-align: left;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: Pretendard;
  font-weight: 400;
  font-size: 16px;
  color: #151515;
}

.custom-select-box .select-options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 12px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
  padding: 8px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-top: 0;
}

.modal-terms .modal-content .custom-select-box .select-options > li {
  padding: 13px 16px;
  cursor: pointer;
  font-family: Pretendard;
  font-weight: 400;
  font-style: Regular;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: -2%;
  color: #454545;
  margin-bottom: 0;
}

.custom-select-box .select-options > li:hover {
  background-color: #f5f5f5;
}
.custom-select-box .icon-arrow-down {
  width: 20px;
  height: 20px;
}
.modal-terms .modal-content .custom-select-box > .select-options {
  padding: 0;
  margin-top: -1px;
}
.custom-select-box .select-toggle.open {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-color: #151515;
}
.custom-select-box .select-toggle.open + .select-options {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  z-index: 1;
  border-color: #151515;
  border-top: 1px solid #E5E5E8;
  box-sizing: content-box;
  max-height: calc(48px * 4.5); /* 4개 + 마지막 요소 절반 */
  overflow-y: auto;
}
.custom-select-box .open .icon-arrow-down {
  transform: rotate(180deg);
}
.terms-tit + .custom-select-box {
  margin-bottom: 40px;
}
/* //이전 목록보기 추가 */

/* 작은화면 비밀번호 입력 간격 수정 */
@media all and (max-width: 375px) {
  .input-mark {
    margin-top: 32px;
  }
  #passwordSet .password-wrap .title {
    margin-top: 0;
  }
  #passwordSet .password-wrap {
    padding-top: 80px;
  }
  #passwordSet .password-wrap .input-mark .btn.mt-30 {
    margin-top: 32px;
  }
}
@media all and (max-width: 374px) {
  .input-mark {
    margin-top: 24px;
  }
  #passwordSet .password-wrap {
    padding-top: 60px;
  }
  #passwordSet .password-wrap .input-mark .btn.mt-30 {
    margin-top: 24px;
  }
}
/* //작은화면 비밀번호 입력 간격 수정 */

/* kyc 완료 페이지 스타일 추가 */
.charge-container.kyc-complete {
  height: calc(100dvh - 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0;
}
.charge-container.kyc-complete .complete-text {
  margin-top: 0;
}
/* kyc 완료 페이지 스타일 추가 */