/* @import url('https://rm.kbcard.com/CMN/mobile/css/basic.css'); */

/* publish local font */
@font-face {
	font-family: "KBFGText";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
  src: url("/CMN/common/fonts/KBFGTextL_subset.woff2") format("woff2"),
       url("/CMN/common/fonts/KBFGTextL_subset.woff") format("woff");
}

@font-face {
	font-family: "KBFGText";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
  src: url("/CMN/common/fonts/KBFGTextB_subset.woff2") format("woff2"),
       url("/CMN/common/fonts/KBFGTextB_subset.woff") format("woff");
}

/* 컬러 변수 */
:root
{
    /*== Gray Color ==*/
    --gray000:#ffffff;
    --gray005:#f7f7fa;
    --gray010:#eff2f7;
    --gray015:#e7ebee;
    --gray020:#dde1e4;
    --gray030:#c6cbd0;
    --gray040:#aab0b8;
    --gray050:#8c949e;
    --gray060:#696e76;
    --gray070:#484b51;
    --gray080:#3d4046;
    --gray090:#26282c;
    --gray100:#1c1d21;
    --gray110:#121315;
    /* 예외 케이스 */
    --background-color: #ffffff; /* to #1C1C21 */
    --g0-to-g9: #ffffff; /* to #26282c  */
    --g9-to-g10: #26282c; /* to #f7f7fa */
    --g9-to-g11: #26282c; /* to #ffffff */
    /*== Tint Color ==*/
    --yellow010:#ffedb0;
    --yellow020:#ffe17c;
    --yellow030:#ffd743;
    --yellow040:#ffcc00;
    --yellow050:#ffbc00;
    --yellow060:#ffa100;
    --yellow070:#ff8f00; /* 강조 뱃지  */
    --yellow080:#f76900; /* 알림/중요정보 */
    /*== Semantic Color ==*/
    --red020:#ffddd6;
    --red050:#ff200c; /* 경고/부정 */
    --blue060:#007eff; /* 긍정, 선택 */
    --vip050:#202d40; /* VIP */
    --violet050:#6d6bdd;
    --violet020:#c4c3f1;
    /*== badge bg (성격) ==*/
    --badge-bg-pink:#ffe8fd;
    --badge-bg-orange:#feece1;
    --badge-bg-brown:#fef7e7;
    --badge-bg-green:#e6ffe5;
    --badge-bg-emerald:#e5f7f5;
    --badge-bg-blue:#e7f8fe;
    --badge-bg-violet:#efeefe;
    /*== badge color (성격) ==*/
    --badge-color-pink:#eb4e96; /* 2025-11-28 design guide color로 수정 */
    --badge-color-orange:#ea5e06; /* 2025-11-28 design guide color로 수정 */
    --badge-color-brown:#9c703e;
    --badge-color-green:#5e993b;
    --badge-color-emerald:#0c9c89;
    --badge-color-blue:#4c85ff;
    --badge-color-violet:#5d5af7;
    --grade-bg:#75675b;
    /* badge bg (일반형) - gray005 / badge color - gray090 사용 */
    /* badge bg (강조형) - yellow070 / badge color - gray000 사용 */
    /* badge bg (라인형) - gray060 / badge color - gray090 사용 */
    /*== badge 개인맞춤 카드 bg / color - gray000 공통 사용 ==*/
    --badge-main-green:#0ca793;
    --badge-main-orange:#f36c0c;
    --badge-main-violet:#8250fa;
    /* chart color */
    --chart-color1: #ffcc00;
    --chart-color2: #96c94b;
    --chart-color3: #61a8ca;
    --chart-color4: #7478db;
    --chart-color5: #e57676;
    --chart-color6: #b75b78;
    --chart-color7: #ac7a1f;
    --chart-color8: #4d683e;
    --chart-color9: #484b51;
}

/* asis css 재정의 */
.topHead .backBtn,
.topHead .homeBtn {left:10px;}

/* common css - asis 재정의 */
.topHead {position:fixed; left:0; top:0; overflow:hidden; width:100%; height:5.6rem; background:var(--gray000); text-align:left; z-index:990; letter-spacing:-.03rem;}
.topHead h1{position:relative; overflow:hidden; text-overflow:ellipsis; width:calc(100% - 3.2rem); margin:0 auto; color:var(--gray090); font-weight:600; white-space:nowrap; font-size: 1.8rem !important; line-height:5.6rem;}
.ios .topHead h1 {line-height:5.8rem;}
.popupWrap #header.topHead {padding-left:1.6rem;}
.cardBox .cardTxt {border-color:var(--gray020);}

/* popup - asis basic 재정의 */
.layerWrap .popCont {font-size:1.6rem;}
.layerWrap .popTop strong,
.layerWrap.fullLayer .popTop strong {font-size:18px !important; text-align:left;}
.layerWrap .popTop strong {padding:16px 16px;}
.layerWrap.fullLayer .popTop strong {padding:0 50px 0 16px;}
.fixedBArea .btnL {font-size:18px;}
.pop-wrap.alertWrap2:not(.pop-wrap--full):not(.pop-wrap--bottom-up) .btn-wrap {bottom: 20px;}

/* layout */
#header {padding:1.6rem 4.4rem 1.6rem 4.2rem;}
#header h1 {padding-top:0;text-align:initial;}
#header .header__btn--back {background: url(https://img1.kbcard.com/home_re/mo/arr/24/arr-2-left.svg) no-repeat 1.0rem 1.6rem;}
#header .header__btn--cancel {border:1px solid var(--gray020); border-radius:.8rem;}
.is-fixed {padding-bottom:8.4rem;}
.cont-area {padding:2.4rem 1.6rem 5.6rem;} /* main은 1.6rem */
.is-fixed .cont-area {padding-bottom:4.8rem !important; }
.fixed-area {padding:.8rem 1.6rem 2.0rem;}

/* common */
.flex {display:flex;}
.pay3 .event-link__none {pointer-events:none;} /* 2025-11-18 배너 a태그 없을 경우 추가 */

/* 간격 등 레이아웃 스타일 밀림 방지 : 추가 */
.mt36 {margin-top:3.6rem !important;}
.mb6 {margin-bottom:.6rem !important}
.pt12 {padding-top:1.2rem !important;}

/* box */
.box--full {width:auto; margin:0 -1.6rem; padding:4.6rem 1.6rem 0; border-radius:0;}
.box--white {border:1px solid var(--gray020);}
.box--gradient__yellow {background:url(https://img1.kbcard.com/home_re/mo/img/benefit/bg-yellow-gradation.svg) repeat-x;}

/* title */
.tit-dep0 {font-size:2.4rem; line-height:3.2rem; letter-spacing:-.03rem;}
.tit-dep1 {font-size:2.0rem; line-height:2.8rem; letter-spacing:-.03rem;}
.tit-dep2 {font-size:1.8rem; line-height:2.6rem; letter-spacing:-.03rem;}
.tit-dep3 {font-size:1.6rem; line-height:2.4rem; letter-spacing:-.03rem; color:var(--gray090);}
.tit-dep3.light {font-weight:400;}
.tit-dep4 {font-size:1.4rem; line-height:2.2rem; letter-spacing:-.03rem;}
.tit-dep4.light {font-weight:400;}
.tit-form {letter-spacing:-0.03rem; color:var(--gray060);}

/* tabs */
.tabs__menu  {letter-spacing:-.03rem;}
.tabs__menu > li a {font-weight:600; padding:1.2rem 0.8rem 1.1rem; color:var(--gray050);}
.tabs__menu > li.on a:after {background:var(--gray090);}
.tabs__menu--full {border-bottom:1px solid var(--gray020);}
.tabs__menu--txt {display:inline-block; position:relative;}
.tabs__menu--txt::after {content:''; display:none; position:absolute; top:-4px; right:-7px; width:6px; height:6px; border-radius:50%; background-color:var(--yellow080);}
.tabs__menu--rgroup > li a {padding:.2rem 0 0;}
.update .tabs__menu--txt::after {display:block;}
/* tab-scroll */
.pay3 .scroll-wrap .tabs__menu > li {flex:none;}
.pay3 .scroll-wrap .tabs__menu > li a {padding-top:1.2rem;}
/* tab 2depth */
.tabs__menu--rblack > li,
.tabs__menu--rblank-s > li:last-child {margin-right:0.8rem;}
.tabs__menu--rblack > li a {padding:0.8rem 1.4rem; background:var(--gray010);}
.tabs__menu--rblack-s > li a {padding:0.5rem 1.2rem; background:var(--gray010);}
.tabs__menu--rblack > li a,
.tabs__menu--rblack-s > li a {color:var(--gray090);}
.tabs__menu--rblack li.on a,
.tabs__menu--rblack-s li.on a {background:var(--gray090);}
/* tab w/ arrow */
.tabs__menu--arr-s > li + li {padding-left:0; margin-left:.8rem;}
.tabs__menu--arr-s > li:last-child {margin-right:0.4rem;}
.tabs__menu--arr-s > li a {display:flex; align-items:center; height:3.2rem; position:relative; padding:.8rem 1rem; font-size:1.4rem; font-weight:400; color:var(--gray090); word-break:auto-phrase; background-color:var(--gray005); border:0; border-radius:1.9rem;}
.tabs__menu--arr-s > li a::after {content:""; display:inline-flex; width:1.6rem; height:1.6rem; margin-left:.4rem; background:url(https://img1.kbcard.com/home_re/mo/arr/16/arr-1-down.svg) no-repeat center; background-size:1.6rem;}
.tabs__menu--arr-s > li.on a {font-weight:400;}
.tabs__menu--arr-s > li.on a::after {content:""; display:inline-flex; width:1.6rem; height:1.6rem; position:static; margin-left:.4rem; background:url(https://img1.kbcard.com/home_re/mo/arr/16/arr-1-down.svg) no-repeat center; background-size:1.6rem;}
/* tab panel */
.pay3 .tabs__panel {padding-top:2.4rem;}

/* steps */
.steps::before, 
.steps__bar, 
.steps__block {height:.4rem; border-radius:0;}
.steps::before {background-color:var(--gray010);}
.steps__block span {height:.4rem;}
.steps__count {letter-spacing:.02rem; line-height:1.43;}
.steps__count span:first-child {font-weight:400;}

/* radio */
.radio-box > input:disabled + label {opacity:1;}

/* checkbox */
.check-box > input:disabled + label {opacity:1;}
.check-box input[type="checkbox"]:disabled + label:before {background-image:url(https://img1.kbcard.com/home_re/mo/ico/24/ico-checkbox-disable.svg);}
.check-box input[type="checkbox"]:checked:disabled + label:before {background-image:url(https://img1.kbcard.com/home_re/mo/ico/24/ico-checkbox-disable-checked.svg);}
.chk--btn-blt {margin-bottom:0;}  /* 2025-11-14 추가 */
.chk--btn-blt .radio-box:last-child,
.chk--btn-blt .check-box:last-child {margin-bottom:0;}
.chk--btn-blt .radio-box label,
.chk--btn-blt .check-box label {color:var(--gray090); font-weight:600; border-color:var(--gray030);}  /* 2025-11-14 border-color 수정 */
.chk--btn-blt > .radio-box label:before,
.chk--btn-blt > .check-box label:before {left:1.5rem;} /* 2025-11-14 체크 전 위치 수정 */
.chk--btn-blt .radio-box input + label,  
.chk--btn-blt .check-box input + label {padding:1.5rem 1.5rem 1.5rem 4.8rem;}
.chk--btn-blt .radio-box input:checked + label,
.chk--btn-blt .check-box input:checked + label {color:var(--gray090); padding:1.4rem 1.4rem 1.4rem 4.7rem; font-weight:600;}
.chk--btn-blt > .radio-box,
.chk--btn-blt > .check-box {margin-top:.6rem; margin-bottom:.6rem;} 
.chk--btn-blt > .radio-box input:checked + label::before,
.chk--btn-blt > .check-box input:checked + label::before {top:1.4rem; left:1.4rem;}
.chk--btn-blt > .check-box,label p,
.chk--btn-blt > .radio-box label p {font-weight:400;}

.chk--btn label {border-radius:.8rem; line-height:1.5;}
.check-box__detail {background: url(https://img1.kbcard.com/home_re/mo/arr/24/arr-1-right.svg) no-repeat calc(100% - 1.6rem) 1.6rem;}

/* check radio btn*/
.pay3 .chk--btn .radio-box input + label::after {display:none;}
.pay3 .radio-box--unit,
.pay3 .radio-box--unit label:before, 
.pay3 .check-box--unit,
.pay3 .check-box--unit label:before {margin-right: 0;}
/* 버튼형 radio 자간 */
.chk--btn .radio-box label, 
.chk--btn-blt .radio-box label,
.chk--btn-blt .check-box label {letter-spacing:-.03rem;}
.chk--btn .radio-box label {color:var(--gray070);}  /* 2025-11-14 default color 수정 */

/* switch */
.switch input:disabled {opacity:0;}
.switch label:before {background: var(--gray020);}
.switch label:after {border: 1px solid var(--gray060); box-shadow: 0.1rem 0 0.1rem 0 rgba(0, 0, 0, .1);}
.switch input:checked + label:after {border: 1px solid #866c08; box-shadow: -0.1rem 0 0.1rem 0 rgba(0, 0, 0, .2);}
.switch input:disabled + label:before {background: var(--gray030);}
.switch input:disabled + label:after {background: var(--gray050); box-shadow: .1rem 0 .1rem 0 rgba(0, 0, 0, .1); border: 0;}

.switch--txt-inline label {padding: 0 0.8rem 0 2.4rem; border-radius: 1.2rem; background: var(--gray020);}
.switch--txt-inline label::after {transition: none;} 
.switch--txt-inline label::before {display: none;}
.switch--txt-inline input:checked + label {padding: 0 2.4rem 0 0.8rem; background-color: var(--yellow040); color: var(--gray090);}
.switch--txt-inline label span {display: none; line-height: 2.4rem; font-size: 1.4rem;}
.switch--txt-inline input:checked + label:after {left: auto; right: 18px;}
.switch--txt-inline label span.off,
.switch--txt-inline input:checked + label span.on {display: block;}
.switch--txt-inline input:checked + label span.off {display: none;}

.switch--txt label {display: flex;}
.switch--txt label:before {display: inline-block;}
.switch--txt label span {display: none; white-space: nowrap;}
.switch--txt label span.off,
.switch--txt input:checked + label span.on {display: inline-block; margin-left: 0.8rem;}
.switch--txt input:checked + label span.off {display: none;}
.switch--txt input:checked + label:after {right: auto;}

.switch-txt--right label {flex-direction: row-reverse;}
.switch-txt--right label span {margin: 0 0.8rem 0 0 !important;}
.switch-txt--right label:after {left: auto; right: 18px;}
.switch-txt--right input:checked + label:after {left: auto; right: 1.8rem;}

/* Button */
.btn {padding:.8rem 1.6rem; border-radius:.8rem; font-weight:600; letter-spacing:-.03rem;}
.btn--icon {padding:1.6rem;}
.btn--gray {color:var(--gray090); border-color:var(--gray080); background-color:var(--gray000);}
.btn:disabled, .btn.disabled {border-color:var(--gray010)!important; background-color:var(--gray010) !important; color:var(--gray050) !important;}
.btn--gray-line:disabled,
.btn--gray-line.disabled,
.btn--black-line:disabled,
.btn--black-line.disabled {color:var(--gray050); border-color:var(--gray020) !important; background-color:var(--gray000) !important;}
.btn--xs {height:2.4rem; padding:0 0.4rem;}
.btn--s {height:3.2rem; padding:0 0.8rem;}
/* .btn--m {height:4.8rem;}
.btn--l {height:5.6rem;} */
.btn--radius { border-radius:2rem; font-weight:400;}
.btn--radius:disabled {border-color:var(--gray020) !important; background-color:var(--gray000) !important; color:var(--gray050) !important;} 
.btn--radius.btn--black:disabled,
.btn--radius.btn--yellow:disabled {border-color:var(--gray010) !important; background-color:var(--gray010) !important; color:var(--gray050) !important;}
.btn--radius.btn--m { border-radius:2.4rem;}
.btn-wrap-column {flex-direction:column; justify-content:initial;}
.btn-wrap-column .btn {flex:inherit;}
.btn-txt {letter-spacing:-.03rem;}
.btn-txt.txt-s {height:2.2rem; font-size:1.4rem;}
.btn-txt--line {font-size:1.4rem; padding-bottom:0;}
.btn--arr::after, 
.btn--arr-b::after, 
.btn--arr-t::after, 
.btn--arr-span::after {width:2.0rem; height:2.0rem; padding-left:0; margin-left:.2rem; background:url(https://img1.kbcard.com/home_re/mo/arr/20/arr-1-right.svg) no-repeat;} /* 2025-11-27 수정 */
.btn--arr-b:after {margin-left: .2rem !important;}
/* .btn--arr-b::after, 
.btn--arr-t::after {margin:0;} */
.btn--arr.txt-s:after, 
.btn--arr-b.txt-s:after, 
.btn--arr-t.txt-s:after {background-image:url(https://img1.kbcard.com/home_re/mo/arr/16/arr-1-right-b.svg);}

.btn-ico {border:1px solid var(--gray050);}
.btn--outlink:after {margin-left:.2rem;}
.btn-more {letter-spacing:-.03rem; color:var(--gray090);}
.btn-more--arr > span {padding-right:2rem; color:var(--gray090); background: url(https://img1.kbcard.com/home_re/mo/arr/16/arr-1-down.svg) right 50% no-repeat;}
.btn-more--arr.on > span {background-image:url(https://img1.kbcard.com/home_re/mo/arr/16/arr-1-up.svg);} /* 2025-11-27 수정 */

/* Text Field */
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="password"],
input[type="email"],
input[type="time"],
input[type="date"],
input[type="search"],
input[type="month"], .form-field .form-address {color: var(--gray090); padding: 1.4rem 0 1.0rem .4rem; border-color: var(--gray030); border-radius:0;} /* 2025-11-14 default color 수정 */
.slt-box .btn-select.placeholder, input[type="text"]::placeholder,
input[type="number"]::placeholder,
input[type="tel"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
input[type="time"]::placeholder,
input[type="date"]::placeholder,
input[type="month"]::placeholder, 
input[type="search"]::placeholder, 
input[type="text"]::-webkit-input-placeholder,
input[type="number"]::-webkit-input-placeholder,
input[type="tel"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder,
input[type="email"]::-webkit-input-placeholder,
input[type="time"]::-webkit-input-placeholder,
input[type="date"]::-webkit-input-placeholder,
input[type="month"]::-webkit-input-placeholder, 
input[type="search"]::-webkit-input-placeholder, 
.form-field--textarea textarea::placeholder {color:var(--gray050);}
.form-field--textarea textarea::placeholder {font-weight:400;}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="time"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
input[type="month"]:focus {border-color:var(--gray090);}
input:read-only {color:var(--gray060); border-color:var(--gray020); /*background:var(--gray005);*/ cursor:not-allowed;}
input:disabled {color:var(--gray050); border-color:var(--gray020); background:var(--gray005);}
input:not([type="radio"]):not([type="checkbox"]):disabled {opacity:1;}  /* 사용자 에이전트 스타일 opacity 수정 */
.form-field__obj--error input {border-color:var(--red050);}
.form-field--search .form-field__obj input:disabled {color:var(--gray050); border-color:var(--gray020); background:var(--gray005);}
.form-field--textarea textarea {font-weight: 300;}
.form-field--textarea textarea:read-only {color:var(--gray050);}
.form-field--textarea .disabled::after {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.02);}
.form-field--textarea .disabled textarea {color:var(--gray050);}
.form-field--txt-btn .form-field__btn {right:.4rem; color:var(--gray090); padding:.4rem .8rem; border:none; border-radius:.8rem; background-color:var(--gray010);}
.form-field--textarea .form-field__obj {padding:1.6rem 1.6rem 3rem 1.6rem;}
.form-field--textarea .form-field__count {font-size:1.2rem; line-height:1.8rem; color:var(--gray050); padding:.4rem 1.6rem .8rem;}
.form-field--textarea .form-field__chk-num {color: var(--gray090);}
.form-field--addr .form-field__obj .value {display:inline-block; font-size:1.8rem; font-weight:bold; line-height:2.6rem; color: var(--gray090); width:100%; padding: .8rem 6rem .8rem .4rem; border-bottom:2px solid var(--gray030);}
.form-field--addr .form-field__obj.disabled .value {color:var(--gray050); border-color:var(--gray020); background:var(--gray005); opacity: 1;}
.form-field--addr .form-field__obj.disabled .form-field__btn {pointer-events:none;}
.form-field__error {padding-left:2rem; position:relative; color:var(--gray060);}
.form-field__error:before {width:1.6rem; height:1.6rem; position:absolute; top:.1rem; left:0; margin-right:0; background-image:url(https://img1.kbcard.com/home_re/mo/ico/16/ico-error.png); background-size:1.6rem;}

/* Select w/ Bottom Sheet : Button type */
.slt-box .btn-select {font-size:1.8rem; line-height:1.33; color:var(--gray090); letter-spacing:-.03rem; padding:1.4rem 2.6rem 1.0rem 0.4rem; border-color:var(--gray030);} /* 2025-11-14 default color 수정 */
.slt-box .btn-select::before {right:.4rem; background:url(https://img1.kbcard.com/home_re/mo/arr/24/arr-1-down.svg) no-repeat 100% 50%; background-size:2.4rem;}
.slt-box .btn-select:focus,
.slt-box .btn-select:focus-visible {border-color:var(--gray090);}/* 2025-12-31 selectbox focus, readonly case 추가 */
.slt-box .btn-select.disabled {color:var(--gray050); border-color:var(--gray020); background:var(--gray005); pointer-events:none; opacity:1;}/* 2025-12-31 selectbox focus, readonly case 추가 */
.slt-box .btn-select.readonly {color:var(--gray060); border-color:var(--gray020); pointer-events:none;}/* 2025-12-31 selectbox focus, readonly case 추가 */
.slt-box .btn-select.readonly::before, /* 2025-12-31 selectbox focus, readonly case 추가 */
.slt-box .btn-select.disabled::before {background-image:url(https://img1.kbcard.com/home_re/mo/arr/24/arr-1-down-disabled.svg);}/* 2025-12-31 selectbox focus, readonly case 추가 */
.slt-box--line .btn-select {padding:1.2rem 2.6rem 1.2rem 1.6rem;}

.txt-commont,
.txt-info-simple {display:flex; position:relative; padding-top:.2rem; font-size:1.3rem; font-weight:400; line-height:1.54; color:var(--gray060); letter-spacing:-.03rem;}
.txt-info-simple::before {content:""; display:inline-flex; width:2.4rem; height:2rem; margin-top:-.2rem; margin-right:.4rem; background:url(https://img1.kbcard.com/home_re/mo/ico/20/ico-info2.png) no-repeat left top; background-size:2rem;}
.txt-commont > .list-blt > li {color:var(--gray060);}

/* 카드 select */
.slt-box--card {border:.1rem solid var(--gray020); border-radius:.8rem;}
.slt-box--card .slt-box__link {padding:1.6rem 4.8rem 1.6rem 1.6rem;}
.slt-box--card a.slt-box__link::before {right:1.6rem; background-image:url(https://img1.kbcard.com/home_re/mo/arr/24/arr-1-down.svg);}
.slt-box--card .card-box__title {overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--gray090);}
/* 카드 select 바틈시트 목록 */
.cards-select li.on,
.cards-select li.sub-object.on {background:var(--gray000) url(https://img1.kbcard.com/home_re/mo/ico/24/ico-2-check2.svg) no-repeat calc(100% - 1.6rem) center; background-size:2.4rem;}

/* Input Search type  */
.form-field--search .form-field__obj input {padding-left:.4rem; letter-spacing:-.03rem;}
.form-field--search .form-field__obj ~ [class^=form-field__btn] {right:.8rem;}
.form-field__btn--reset {right:.4rem; padding:0; background-image:url(https://img1.kbcard.com/home_re/mo/ico/24/ico-close-reset.svg);}/* 2025-12-23 ios padding:0 추가 */ 
.form-field--search--s .form-field__obj input {height:4rem; font-size:1.6rem; font-weight:400; padding-left:1.2rem;}
.form-field--search--s .form-field__obj input::placeholder {padding-top:.6rem; padding-bottom:.6rem; font-weight:400; font-size:1.6rem;}
.form-field--search--s .form-field__obj ~ [class^=form-field__btn] {width:2rem; height:2rem; top:1rem; right:1.2rem; background-size:2rem;}
.form-field--search--s .form-field__btn--reset {width:2rem; height:2rem; top:1.1rem; right:4rem; background-size:2rem; background-position:center;}
.form-field--search--s .form-field__obj.clear input {padding-right:7rem;}
.form-field--search .form-field__btn--reset {right:4.0rem;}
.form-field--line.form-field--search .form-field__btn--reset {right:4.8rem;}
.form-field--line .form-field__obj input {padding-top:1.2rem; padding-left:1.6rem;}
.form-field--search.form-field--line .form-field__obj ~ [class^=form-field__btn] {right:1.6rem;}

/* input Calendar type */
.form-field--flex input[type=date] {padding-left:.4rem; background-image:url(https://img1.kbcard.com/home_re/mo/ico/24/ico-1-calendar.svg);}
.form-field--flex .form-field__obj .divide {font-weight:600;}
.form-field--flex .form-field__obj.input__focus,
.form-field--flex .form-field__obj.input__focus input {border-color:var(--gray090);}

/* Badge */
.badge {display:inline-flex; justify-content:center; align-items:center; height:2.0rem; font-size:1.1rem; line-height:inherit; color:var(--gray090); letter-spacing:-.03rem; padding:.2rem .4rem; border:none; background:var(--gray005);}/* 2025-11-17 line-height:inherit 추가 */
.badge__line {border:1px solid var(--gray060);}
.badge__dark_orange {color:var(--gray000); background:var(--badge-main-orange);} /* 2025-11-28 design guide color로 수정 */
.badge__pink {color:var(--badge-color-pink); background:var(--badge-bg-pink);}
.badge--orange {color:var(--badge-color-orange); background:var(--badge-bg-orange);}
.badge--brown {color:var(--badge-color-brown); background:var(--badge-bg-brown);}
.badge--green {color:var(--badge-color-green); background:var(--badge-bg-green);}
.badge__emerald {color:var(--badge-color-emerald); background:var(--badge-bg-emerald);}
.badge--blue {color:var(--badge-color-blue); background:var(--badge-bg-blue);}
.badge--purple {color:var(--badge-color-violet); background:var(--badge-bg-violet);}
.badge-main {height:2.4rem; font-weight:600; font-size:1.2rem; padding:.3rem 1.2rem; border-radius:1.2rem;}
.badge-main__white {color:var(--gray060); background:var(--gray000);}
.badge-main__green {color:var(--gray000); background:var(--badge-main-green);}
.badge-main__orange {color:var(--gray000); background:var(--badge-main-orange);}
.badge-main__violet {color:var(--gray000); background:var(--badge-main-violet);}
.badge-balloon {position:absolute; height:2.2rem; font-size:1.0rem; color:var(--gray000); background:var(--gray090); padding:0 .8rem; border-radius:1.2rem;}
.badge-balloon::after {content:''; display:block; position:absolute; right:.8rem; bottom:-5px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid var(--gray090);}

/* 링크형 */
.list-link, 
.list-link--s {letter-spacing:-.03rem;}
.list-link__item > a {display:block; position:relative; padding:1.6rem 4.0rem 1.6rem 0; background:none;}
.list-link__item > a::after {content:''; display:block; position:absolute; top:50%; right:0; width:24px; height:24px; margin:-12px 0 0; background:url(https://img1.kbcard.com/home_re/mo/arr/24/arr-1-right.svg) no-repeat;}
.list-link--s .list-link__item > a {display:block; position:relative; padding:1.2rem 4.0rem 1.2rem 0;}
/* 정보전달형 */
.pay3 .list-info > li + li {margin-top:1.6rem;}
.pay3 .list-info--s > li + li {margin-top:1.2rem;}
.pay3 .list-info--ss > li + li {margin-top:.8rem;}
.pay3 .list-info--s .list-info__tit,
.pay3 .list-info--s .list-info__desc {font-size:1.4rem; line-height:1.57;}
.pay3 .list-info--ss .list-info__tit,
.pay3 .list-info--ss .list-info__desc {font-size:1.2rem; line-height:1.5;}
.pay3 .list-info .list-info__tit,
.pay3 .list-info--s .list-info__tit,
.pay3 .list-info--ss .list-info__tit {color:var(--gray060);}
.pay3 .list-info .list-info__desc,
.pay3 .list-info--s .list-info__desc, 
.pay3 .list-info--ss .list-info__desc {width:auto; font-weight:400; color:var(--gray090);}
.pay3 .list-info__desc.bold {font-weight:600;}
.pay3 .list-info__desc .btn-txt:not(.btn-txt-s).btn--arr::after {width:1.2rem; height:2.4rem; padding-left:0; background-position:center; background-image:url(https://img1.kbcard.com/home_re/mo/arr/16/arr-1-right-b.svg); background-size:1.6rem;}
/* 설정형 */
.list-link__item--switch,
.list-link__item--info {padding:1.2rem 0;}
.list-link__title {color:var(--gray090);}
/* 블릿형 사이즈 */
.list-blt > li {font-size:1.6rem; line-height:2.4rem;}
.list-blt > li::before {top:.9rem;}
.list-blt li + li {margin-top:1.2rem;}
.list-blt--s li {font-size:1.4rem; line-height:2.2rem;}
.list-blt--s > li::before {top:.8rem;}
.list-blt--s li + li {margin-top:.8rem;}
.list-blt--s__mt4 li + li {margin-top:.4rem;} /* 금융 대출신청 박스 안 list-blt-s 간격 .4rem */
.list-blt--ss li {font-size:1.3rem; line-height:2.0rem;}
.list-blt--ss > li::before {top:.6rem;}
.list-blt--ss li + li {margin-top:.6rem;}
.list-info--link .list-info__link {display:flex; justify-content:space-between; position:relative; width:100%; padding-right:1.6rem;}
.list-info--link .list-info__link::after {content:''; display:block; position:absolute; top:0; right:0; width:1.6rem; height:1.6rem; margin:.3rem 0; background:url(https://img1.kbcard.com/home_re/mo/arr/16/arr-1-right-b.svg) no-repeat;}
.list-blt >li.list-blt--no-blt {position:unset; padding:0;}
.list-blt >li.list-blt--no-blt:before {content:none;}
.list-blt--dash > li::before {top:1.0rem;}
.list-blt--dash.list-blt--s > li::before {top:1.0rem;}
.list-blt--dash.list-blt--ss > li::before {top:0.8rem;}

.pay3 .listType1 > li::before {top:.9rem;}

/* 아코디언 라인타입 */
.accordions__tit {font-weight:600; font-size:1.6rem; line-height:2.4rem; padding:1.6rem 3.2rem 1.6rem 0;}
.accordions__tit::before {background-image:url(https://img1.kbcard.com/home_re/mo/arr/24/arr-1-down.svg);}
.accordions__item.on .accordions__tit::before {background-image:url(https://img1.kbcard.com/home_re/mo/arr/24/arr-1-up.svg);}
.accordions--line {padding-top:1.6rem; border-top:1px solid var(--gray010);}
.accordions--note .accordions__tit {display:block; font-size:1.4rem; line-height:2.2rem;}
.accordions--note .accordions__tit::before {margin-top:-.1rem; background-image:url(https://img1.kbcard.com/home_re/mo/arr/24/arr-1-down.svg);}
.accordions--note .accordions__item.on .accordions__tit::before {background-image:url(https://img1.kbcard.com/home_re/mo/arr/24/arr-1-up.svg);}
.accordions--note .accordions__view .list-blt > li {font-size:1.3rem; line-height:2.0rem; color:var(--gray060);}
.accordions--note .accordions__view .list-blt > li::before {top:.7rem;}
.accordions--note .accordions__view .list-blt > li + li {margin-top:.6rem;}

/* 리스트 - 더보기형 */
.list-box--more {padding:1.5rem 1.5rem; border-radius:1.2rem; border:1px solid var(--gray020);}
.list-box--more .tit-dep3 {margin-bottom:1.6rem;}
.list-box--more .list-box--more__detail  {max-height:15.8rem; overflow:hidden;}
.list-box--more .list-box--more__detail.active {max-height:none;}
.list-box--more__detail .list-info li + li {margin-top:1.2rem;}
.list-box--more .list-info .list-info__tit,
.list-box--more .list-info .list-info__desc {font-size:1.4rem; line-height:2.2rem; letter-spacing:-.03rem;}
.list-box--more .list-info .list-info__tit {color:var(--gray060);}
.list-box--more .list-info .list-info__desc {display:flex; align-items:center; font-weight:600 !important; color:var(--gray090);}
.list-box--more .list-info .list-info__desc::after {content:''; display:inline-block; width:1.6rem; height:1.6rem; background:url(https://img1.kbcard.com/home_re/mo/arr/16/arr-1-right-b.svg) no-repeat;}
.list-box--more .btn-wrap {display:none; width:auto; margin:1.6rem -1.5rem -1.5rem -1.6rem; border-top:1px solid var(--gray020);}
.list-box--more .btn-wrap.show {display:block;}
.list-box--more .btn-more--arr {height:4.8rem; outline:none;}
.list-box--more .btn-more--arr span {padding-right:2.2rem; background: url(https://img1.kbcard.com/home_re/mo/arr/16/arr-1-down.svg) right 50% no-repeat;}
.list-box--more .btn-more--arr span.active {background: url(https://img1.kbcard.com/home_re/mo/arr/16/arr-1-up.svg) right 50% no-repeat;}

/* 말풍선 툴팁 */
.pay3 .balloon {position: relative; display: inline-block; vertical-align: middle;}
.pay3 .balloon__cont {position: absolute; padding: 0.8rem 1.6rem; background: var(--gray090); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16); color: var(--gray000); white-space: nowrap; border-radius: 0.4rem; z-index: 2; /* animation: upDownMove 2s 0.5s infinite ease-in-out; */}
.pay3 .balloon__cont::after {content:''; position: absolute; bottom: -0.6rem; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid var(--gray090);}
.pay3 .balloon--top .balloon__cont {bottom: calc(100% + 0.4rem);}
.pay3 .balloon--left .balloon__cont {left: 0;}
.pay3 .balloon--center .balloon__cont {left: 50%; transform: translateX(-50%);}
.pay3 .balloon--right .balloon__cont {right: 0;}
.pay3 .balloon--bottom .balloon__cont {top: calc(100% + 0.4rem);}
.pay3 .balloon--bottom .balloon__cont::after {bottom: 100%; transform: scaleY(-1);}
.pay3 .balloon--arr-left .balloon__cont::after{left: 1.6rem;}
.pay3 .balloon--arr-center .balloon__cont::after{left: 50%;}
.pay3 .balloon--arr-right .balloon__cont::after{right: 1.6rem;}
.pay3 .balloon--left-center .balloon__cont {top:50%; left:-60%; transform:translateY(-50%); margin-left:-1.2rem;}
.pay3 .balloon--right-center .balloon__cont {top:50%; right:-60%; transform:translateY(-50%); margin-right:-0.6rem;}
.pay3 .balloon--left-center .balloon__cont::after {left:initial; bottom:calc(50% - 0.2rem); right:-1.0rem; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:6px solid var(--gray090);}
.pay3 .balloon--right-center .balloon__cont::after {left:initial; bottom:calc(50% - 0.2rem); left:-1.0rem; border-top:4px solid transparent; border-bottom:4px solid transparent; border-right:6px solid var(--gray090);}

/* scroll UI */
.scroll-container {overflow: hidden;}
.scroll-x {overflow-x: auto; display: flex; white-space: nowrap; scroll-snap-type: x mandatory; scroll-behavior: smooth;}
.scroll-x .box {flex-shrink: 0; min-width: 13.2rem; width: auto; min-height: 16rem; margin: 0; scroll-snap-align: start;}
.scroll-x .box + .box {margin-left: 1.2rem;}

/* filter buttons */
.pay3 .tabs_menu--filter {position: relative; display: flex; height: 4.8rem; padding: 0.4rem; background-color: var(--gray010); border-radius: 2.4rem;}
.pay3 .tabs_menu--filter button {flex: 1; position: relative; height: 4rem; font-size: 1.6rem; font-weight: 600; color:var(--gray050); border:none; background-color:transparent; outline:none; -webkit-appearance: none; appearance: none;}
.pay3 .tabs_menu--filter button[aria-selected="true"] {color:var(--gray090);}
.pay3 .tabs_menu--filter .highlight {position: absolute; top: 0.4rem; left: 0.4rem; height: 4rem; border-radius: 2rem; background-color: var(--gray000); box-shadow: 0 1px 4px rgba(0, 0, 0, .16); transition: all 0.3s cubic-bezier(0.65, 0, 0.35, 1.1); pointer-events: none;}
.pay3 .tabs_menu--filter ~ .tabs__panel {display:none;}
.pay3 .tabs_menu--filter ~ .tabs__panel.on {display:block;}

/* scroll filter */
/* .filter-scroll {overflow: hidden; overflow-x: auto;}
.filter-scroll__inner {display: flex; white-space: nowrap;}
.filter-scroll__btn {flex-shrink: 0; height: 3.2rem; padding: 0 1.6rem; border-radius: 1.6rem; background-color: var(--gray010);}
.filter-scroll__btn[aria-pressed="true"] {font-weight: bold; background-color: var(--gray090); color: var(--gray000);}
.filter-scroll__btn + .filter-scroll__btn {margin-left: 0.8rem;} */

/* box shadow */
.box--shadow3 {padding: 1.6rem; background-color: var(--gray000); box-shadow: 0 .2rem .8rem 0 rgba(0, 0, 0, 0.1); border-radius: 1.6rem;}

/* tooltip */
.tooltip__head strong {color:var(--gray020);}
.tooltip__inner {color:var(--gray020);}
.tooltip-wrap {font-size:1.3rem; line-height:2.0rem; color:var(--gray020); padding:.8rem 4.0rem .8rem 1.2rem; border-radius:.8rem; background:var(--gray090);}
.tooltip-wrap:before {top:-.9rem; left:4.3rem; border-width:5px; z-index:10; border-color:transparent transparent var(--gray090) transparent;}/* 2025-12-08 tooltip:before 위치 및 넓이 수정 */
.tooltip-close {position:absolute; top:1.0rem; left:unset; right:1.2rem; width:1.6rem; height:1.6rem; background:url(https://img1.kbcard.com/home_re/mo/ico/16/ico-1-close-w.svg) no-repeat;}
.pay3 .tooltip {width:2.0rem; height:2.0rem; background:url(https://img1.kbcard.com/home_re/mo/ico/20/ico-1-question.svg) no-repeat;}
.tooltip-wrap--multi .tooltip-close {width:1.6rem; height:1.6rem; top:.8rem; right:1.2rem; background:url(https://img1.kbcard.com/home_re/mo/ico/16/ico-1-close-w.svg) no-repeat;}
.tooltip-wrap--multi .tooltip__arr {background:var(--gray090);}

/* toast : 이용내역 MMBV0309_05 매출전표 > 주소복사에서 사용중 */
.toast {padding:1.2rem 1.6rem; font-size:1.4rem; font-weight:400; line-height:1.57; color:var(--gray000); text-align:left; background-color:rgba(38, 40, 44, 0.8);}

/* popup */
.pop-wrap {z-index:100; background-color:rgba(0, 0, 0, .5);}
.pop-header {padding:2.0rem 1.6rem;}
.pop-container {background:var(--gray000);}
.pop-wrap--alert .pop-header {padding:2.4rem 1.6rem 1.2rem;}
.pop-header i {width:4rem; height:4rem; display:inline-block;}
.pop-header .ico-info {background:url(https://img1.kbcard.com/home_re/mo/ico/40/ico-popup-alarm.svg) no-repeat center / 100%;}
.pop-header .ico-check {background:url(https://img1.kbcard.com/home_re/mo/ico/40/ico-popup-check.svg) no-repeat center / 100%;}
.pop-wrap--full .pop-header {padding:1.6rem; text-align:left;}
.pop-wrap--bottom-up .pop-header {padding:2rem 1.6rem; text-align:left;}
.pop-wrap--bottom-up .pop-container {box-shadow:0 -1.0rem 1.0rem 0 rgba(0,0,0,0.16);}
.pop-wrap--close__chk .pop-container {overflow:visible;}
.pop-wrap--bottom-up .pop-header h1, .pop-wrap--bottom-up .pop-header strong {font-size:1.8rem; text-align:left; letter-spacing:-.03rem;}
.pop-header i + .tit-dep1 {text-align:center;}
.pop-header .tit-dep1 {text-align:left;}
.pop-wrap--full .cont-area {padding:2.4rem 1.6rem 5.6rem;}
.pop-wrap--full[data-type='fixed'] .cont-area {padding:2.4rem 1.6rem 0;}
.pop-wrap--bottom-up .cont-area {padding:0rem 1.6rem 3.2rem;} /* 2025-10-14 요청 수정 */
/* .pop-wrap:not(.pop-wrap--full):not(.pop-wrap--bottom-up) .pop-header + .pop-inner.is-fixed {padding-bottom:6.4rem;} */
.pop-wrap:not(.pop-wrap--full):not(.pop-wrap--bottom-up) .pop-header + .pop-inner .cont-area {color:var(--gray090); padding-top:0 !important;}
.pop-wrap:not(.pop-wrap--full):not(.pop-wrap--bottom-up) .pop-header {font-size:0;}
/* .pop-wrap--bottom-up .pop-inner.is-fixed {max-height:calc(100vh - 6.8rem - 8rem); padding-bottom:8rem;}
.pop-wrap--bottom-up .pop-inner.is-fixed .btn-wrap {padding-top:0;} */
.pop-wrap:not(.pop-wrap--full):not(.pop-wrap--bottom-up) .btn-wrap {padding-bottom:1.6rem;}
.pop-wrap:not(.pop-wrap--full):not(.pop-wrap--bottom-up) .btn-wrap .btn {padding:1.5rem .8rem;}
.pop-wrap--bottom-up .pop-inner .cont-area .tabs:first-of-type .tabs__menu--full {margin-top:0;}/* temp: first tab area on Bottom Sheet */
.pop-wrap--bottom-up .pop-container > .pop-close {height:6.8rem;}
.pop-wrap--full .pop-container > .pop-close .pop-close__btn,
.pop-wrap--bottom-up .pop-container > .pop-close .pop-close__btn {background:none;}
.pop-wrap--full .pop-container > .pop-close .pop-close__btn::after,
.pop-wrap--bottom-up .pop-container > .pop-close .pop-close__btn::after {content:''; display:block; position:absolute; top:50%; right:1.6rem; width:2.4rem; height:2.4rem; margin-top:-1.2rem; background:url(https://img1.kbcard.com/home_re/mo/ico/24/ico-2-close.svg) no-repeat;}
.pop-wrap--bottom-up .pop-inner.is-height__full .cont-area {min-height:calc(100vh - 23.6rem);}
/* .pop-wrap--full .is-fixed .cont-area {min-height:calc(100vh - 5.6rem - 9.6rem);} */
.pop-wrap--full .fixed-area {padding:2.0rem 1.6rem;}
.pop-wrap--full[data-type='fixed'] .fixed-area {padding:3.2rem 1.6rem 2.0rem;}
.pop-wrap--bottom-up .fixed-area {padding:1.2rem 1.6rem 2.0rem;}
.pop-wrap--bottom-up[data-type='fixed'] .pop-container {max-height:45rem; height:auto;} /* slt-box 팝업 높이 수정 - 2025-12-19 (박진수 과장님 협의 후 수정 필요) */
.pop-wrap--bottom-up[data-type='fixed'] .pop-inner .cont-area {padding:0 1.6rem 3.2rem;}
.pop-wrap--bottom-up[data-type="bottom-full"] .pop-container {min-height: calc(100vh - 5.6rem); min-height: calc(100dvh - 5.6rem)}
.pay3.pop-wrap--full .pop-header.pop-header--auto {height: auto;}

/* no-data */
.no-data {padding:4rem 0;}
.no-data::before {width:4.0rem; height:4.0rem; background:url(https://img1.kbcard.com/home_re/mo/ico/40/ico-list-nodata.svg) no-repeat; background-size:100%;}
.no-data p {margin-top:.8rem; font-size:1.4rem; line-height:1.57; letter-spacing:-.03rem; color:var(--gray090);}

/* error */
.feedback--error:before {width:4.8rem; height:4.8rem; background-image:url(https://img1.kbcard.com/home_re/mo/ico/48/ico-empty-error.svg);}
/* succes */
.feedback--success:before {width:4.8rem; height:4.8rem; background-image:url(https://img1.kbcard.com/home_re/mo/ico/48/ico-check.svg);}

.ani-box {display:block;}

/* chart */
.chart-direction span { position: relative; padding-left: 1.4rem; font-size: 1.1rem; white-space: nowrap; }
.chart-direction span:not(:first-child) { margin-left: 1.6rem; }
.chart-direction span::before {  content: ''; position: absolute; top: 50%; left: 0; display: inline-block; width: .8rem; height: .8rem; border-radius: 100%; background-color: var(--chip-color); transform: translateY(-50%); }
.chart-direction span:not(:first-child) { margin-left: 1.6rem; }
.chart-direction span.chart-color--a::before { background-color: var(--gage-blue); }
.chart-direction span.chart-color--b::before { background-color: var(--gage-yellow); }
.chart-direction span.chart-color--c::before { background-color: var(--gage-orange); }
.chart-direction span.chart-color--d::before { background-color: var(--gage-green); }
.chart-direction span.chart-color--e::before { background-color: var(--gage-blueGreen); }
.chart-direction span.chart-color--f::before { background-color: var(--gage-gray); }
.chart-direction span.chart-color--g::before { background-color: var(--gage-purple); }
.chart-direction span.chart-color--h::before { background-color: var(--gage-red); }
.chart-direction span.chart-color--i::before { background-color: var(--gage-khaki); }
.chart-direction[class*="col"] span { margin: .2rem 0; }

/* 비교그래프 */
.cmp--graph {display:flex; justify-content: center;}
.cmp--graph__group {position:relative; display:flex; flex-direction: column; align-items: center; justify-content: space-between; width:50%; padding-bottom:1.2rem; text-align: center;}
.cmp--graph__group:first-child {border-right:1px dashed var(--gray020);}
.cmp--graph__txt .txt {margin-top:0.8rem;}
.cmp--graph__wrap {position:relative; display:flex; flex-direction: column; align-items: center; margin-top:2.4rem;}
.cmp--graph__bar {width:5.6rem; height:10rem; background-color:var(--gray020); border-radius:0.8rem;}
.cmp--graph__bar--empty{border: 1px dashed var(--gray040); background-color: var(--gray010);}
.cmp--graph__bar--s {height:6rem;}
.cmp--graph__bar--me {background-color: var(--gage-blue) !important;}
.cmp--graph__img {width:7.2rem; position:absolute; bottom:-1.4rem; right:-4.2rem;}
.cmp--graph__img--s {width:5.6rem; position:absolute; bottom:-1.4rem; right:-3rem;}

.ani-graph {display:flex; justify-content:center; align-items: flex-end;}
.ani-graph > div {text-align: center; margin:0 2.4rem;}
div[class^="ani-graph__"] {width:4rem; border-top-left-radius:0.4rem; border-top-right-radius:0.4rem; transform: scaleY(0); transform-origin: bottom; animation: graph_rise 1s ease-out forwards;}
.ani-graph__yellow {background-color:#ffbc00; animation-delay: 0s; height:4.4rem;}
.ani-graph__green {background-color:#3db7a8; animation-delay: 0.1s; height:2rem;}
.ani-graph__purple {background-color:#6a43d4; animation-delay: 0.2s; height:1rem;}
.ani-logo {animation:logo_shake 1.5s ease-in-out infinite; transform-origin: bottom center;}

/* 바 게이지 그래프 */
.ratio-bar {overflow: hidden; display: flex; height: 3.2rem; border-radius: 0.8rem; align-items: stretch;}
.ratio-bar:empty,
.ratio-bar__empty { background-color: var(--gray005); border: 1px dashed var(--gray020);}
.ratio-bar__part--a {background-color:var(--chart-color1);}
.ratio-bar__part--b {background-color:var(--chart-color2);}
.ratio-bar__part--c {background-color:var(--chart-color3);}
.ratio-bar__part--d {background-color:var(--chart-color4);}
.ratio-bar__part--e {background-color:var(--chart-color5);}
.ratio-bar__part--f {background-color:var(--chart-color6);}
.ratio-bar__part--g {background-color:var(--chart-color7);}
.ratio-bar__part--h {background-color:var(--chart-color8);}
.ratio-bar__part--i {background-color:var(--chart-color9);}
.ratio-index {display:flex; flex-wrap: wrap;}
.ratio-index > span {font-size:1.2rem; width:33.3%;}
.ratio-index > span:nth-child(n+4) {margin-top:0.4rem;}
.ratio-index__part::before {content:''; display: inline-block; width: 0.8rem; height: 0.8rem; margin-right: 0.6rem; border-radius: 50%; background-color: var(--gray005);}
.ratio-index__part--a::before {background-color:var(--chart-color1);}
.ratio-index__part--b::before {background-color:var(--chart-color2);}
.ratio-index__part--c::before {background-color:var(--chart-color3);}
.ratio-index__part--d::before {background-color:var(--chart-color4);}
.ratio-index__part--e::before {background-color:var(--chart-color5);}
.ratio-index__part--f::before {background-color:var(--chart-color6);}
.ratio-index__part--g::before {background-color:var(--chart-color7);}
.ratio-index__part--h::before {background-color:var(--chart-color8);}
.ratio-index__part--i::before {background-color:var(--chart-color9);}
  
/* 또래그룹 비교 차트 */
.bar-chart {line-height: 2rem;}
.bar-chart__item {position: relative; display: flex; align-items: center;}
.bar-chart__item + .bar-chart__item {margin-top: 1.6rem;}
.bar-chart__label {order : 2; width: 7.8rem; text-align: center;}
.bar-chart__bar {display: flex; align-items: center; flex:1;}
.bar-chart__bar--l {order: 1; padding-left: 6.4rem; justify-content: flex-end;}
.bar-chart__bar--r {order: 3; padding-right: 6.4rem;}
.bar-chart__value {position: absolute; top: 0;}
.bar-chart__value--up::before {content: '▲ '; color: #FF200C;}
.bar-chart__value--down::before {content: '▼ '; color: #007EFF}
.bar-chart__bar--l .bar-chart__value {left: 0;}
.bar-chart__bar--r .bar-chart__value {right: 0;}
.bar-chart__bg {display: block; height: 0.8rem; animation: growWidth 1.2s;}
.bar-chart__item:nth-child(2) .bar-chart__bg {animation-delay: .2s;}
.bar-chart__item:nth-child(3) .bar-chart__bg {animation-delay: .4s;}
.bar-chart__item:nth-child(4) .bar-chart__bg {animation-delay: .6s;}
.bar-chart__item:nth-child(5) .bar-chart__bg {animation-delay: .8s;}
.bar-chart__bar--l .bar-chart__bg {border-radius: 0.2rem 0 0 0.2rem;}
.bar-chart__bar--r .bar-chart__bg {border-radius: 0 0.2rem 0.2rem 0;}
.bar-chart__bg--a {background-color:var(--chart-color1);}
.bar-chart__bg--b {background-color:var(--chart-color2);}
.bar-chart__bg--c {background-color:var(--chart-color3);}
.bar-chart__bg--d {background-color:var(--chart-color4);}
.bar-chart__bg--e {background-color:var(--chart-color5);}
.bar-chart__bg--f {background-color:var(--chart-color6);}
.bar-chart__bg--g {background-color:var(--chart-color7);}
.bar-chart__bg--h {background-color:var(--chart-color8);}
.bar-chart__bg--i {background-color:var(--chart-color9);}
.bar-chart--type2 .bar-chart__label {width: 2.5rem; margin-right: 1.2rem; text-align:left;}
.bar-chart--type2 .bar-chart__bg {height: 1.6rem; width: calc((var(--percent)/ 10) * 100% );}
.bar-chart--type2 .bar-chart__bar--r .bar-chart__bg {border-radius: 0 0.4rem 0.4rem 0; }   
.bar-chart.bar-chart--type2 .bar-chart__bg--a {background: var(--gage-blue);}
.bar-chart.bar-chart--type2 .bar-chart__bg--b {background: var(--gray020);}
.bar-chart.bar-chart--type2 .bar-chart__bg--c {background: var(--gage-yellow);} 

/* chk */
.chk-all {border-radius: .8rem; border: .1rem solid var(--gray020);}
.chk-all.on::after {border-radius: .8rem;}
.chk-all__head .check-box label {font-weight: 600;}
.chk-all__head .check-box label:before {margin-right: .8rem;}
.chk-all__body {border-top: .1rem solid var(--gray020);}
.chk-all__body .check-box input + label:before {background-image:url(https://img1.kbcard.com/home_re/mo/ico/16/ico-check-off.svg) !important;}
.chk-all--re {margin-top: 4px; padding: 0 0 0 1.6rem; border: none;}
.chk-all--re .chk-all__head {border:1px solid var(--gray020);} /* 2025-12-22 finance, card, info css 취합 수정 */
.chk-all--re .chk-all__head .check-box input[type="checkbox"]:checked + label:after {border: 2px solid var(--gray090);} /* 2025-12-22 finance, card, info css 취합 수정 */
.chk-all--re .chk-all__head .check-box input[type="checkbox"] + label:after { content: ''; position: absolute; top: -1.6rem; right: -2.9rem; bottom: -1.6rem; left: -1.6rem; border: 1px solid transparent; border-radius: .8rem; transition: border 300ms;} /* 2025-12-22 finance, card, info css 취합 수정 */
.chk-all__body .check-box input:disabled + label {color:var(--gray060);}
.pay3 .chk-all__body .check-box__detail {background:url(https://img1.kbcard.com/home_re/mo/arr/16/arr-1-right-b.svg) no-repeat 100% .3rem;}


/* 카드형 플레이트 : ex. VIP라운지 > VIP카드 쿠폰함 */
.pay3 .cp-list {letter-spacing:-.03rem;}
.pay3 .cp-list > li {padding:1.6rem; margin-bottom:1.2rem; border-radius:1.6rem; border:.1rem solid var(--gray020); background-color:var(--gray000); box-shadow:none;}
.pay3 .cp-list .badge {margin-bottom:.8rem;}
.pay3 .cp-list .tit-dep3 {margin-bottom:.4rem; color:var(--gray090);}
.pay3 .cp-list__desc {color:var(--gray060); line-height:1.57;}
.pay3 .cp-list__desc > span {margin-left:0;}
.pay3 .cp-list__desc > span::before {content:" : "; margin-left:.4rem;}
.pay3 .cp-list__desc + .cp-list__desc {margin-top:0;}
.pay3 .cp-list__condition {margin-top:1.6rem; padding-top:0; border-top:0;}
.cp-list__condition-has-fullbtn {width:calc(100% + 3.4rem); margin:1.6rem -1.7rem -1.7rem;}
.cp-list__condition-has-fullbtn .btn {border-radius:0 0 1.6rem 1.6rem;}
.pay3 .cp-list .btn-txt.txt-s {margin-top:0;}

/* form-field : ex. 금융 */
.pay3 .form-field__unit {display: flex; border-bottom: 2px solid var(--gray030); align-items: center;}
.pay3 .form-field__unit input {flex: 1; height: 4.6rem; padding: .7rem 0 .7rem .4rem; border: none;}
.pay3 .form-field__unit .form-field__btn {position: absolute; right: 0; z-index: 9;}
.pay3 .form-field__unit .form-field__btn--reset {position: relative; top: initial; right: initial;}
.pay3 .form-field__unit .form-field__btn span {margin:0 .4rem; font-size:1.6rem; font-weight: 600;}

/* bs-slt */
.bs-slt__link {padding: 1.2rem 4rem 1.2rem 0;}
.bs-slt__item.on .bs-slt__link {background-color: var(--gray000);}
.bs-slt__item.on .bs-slt__link:after {right:0; background-image: url(https://img1.kbcard.com/home_re/mo/ico/24/ico-2-check2.svg);}

/* 이용 전 확인해 주세요 */
.pay3 .article + .article.cont__btm, 
.article.cont__btm {margin:0; padding:6.5rem 0 0;}
.article.cont__btm::before {width:calc(100% + 3.2rem); height:.1rem; top:4rem; left:-1.6rem; border-top:0; background-color:var(--gray010);}
.article.cont__btm .accordions--note .accordions__tit {display:block; font-size:1.4rem; font-weight:600; line-height:1.57; letter-spacing:-.03rem; color:var(--gray090);}
.article.cont__btm .accordions--note .accordions__tit::before {background-image:url(https://img1.kbcard.com/home_re/mo/arr/24/arr-1-down.svg);}
.article.cont__btm .accordions--note .accordions__item.on .accordions__tit::before {background-image:url(https://img1.kbcard.com/home_re/mo/arr/24/arr-1-up.svg);}
.article.cont__btm .accordions--note .accordions__view, 
.article.cont__btm .accordions--note .accordions__view {padding-top:1.2rem;}
.article.cont__btm .accordions--note .accordions__view .tit-dep2, 
.article.cont__btm .accordions--note .accordions__view .tit-dep2 {margin:1.2rem 0 .6rem; font-size:1.4rem; font-weight:400; line-height:1.57; color:var(--gray090);}
.article.cont__btm .accordions--note .accordions__view .tit-dep2:first-of-type, 
.article.cont__btm .accordions--note .accordions__view .tit-dep2:first-of-type {margin-top:0;}
.article.cont__btm .accordions--note .accordions__view .list-blt:not(:last-of-type) {margin-bottom:.6rem;}
.article.cont__btm .accordions--note .accordions__view .list-blt > li, 
.article.cont__btm .accordions--note .accordions__view .list-blt > li {padding-left:1rem; font-size:1.3rem; line-height:1.54; color:var(--gray060);}
.article.cont__btm .accordions--note .accordions__view .list-blt > li + li, 
.article.cont__btm .accordions--note .accordions__view .list-blt > li + li {margin-top:.6rem;}
.article.cont__btm .accordions--note .accordions__view .list-blt > li::before, 
.article.cont__btm .accordions--note .accordions__view .list-blt > li::before {top:.7rem;}
.article.cont__btm .accordions--note .accordions__view .list-blt .listType2 {margin-top:.6rem; color:var(--gray060);}
.article.cont__btm .accordions--note .accordions__view .list-blt .listType2:last-of-type {margin-bottom:0;}
.article.cont__btm .accordions--note .accordions__view .list-blt .listType2 > li {margin-bottom:.4rem; padding-left:1rem; font-size:inherit; color:inherit; line-height:1.54;}
.article.cont__btm .accordions--note .accordions__view .list-blt .listType2 > li:last-of-type {margin-bottom:0;}
.article.cont__btm .accordions--note .accordions__view .list-blt .listType2 > li + li {margin-top:0;}

/* 카드 로고 logo */
.card-box--local::before, 
.card-box--local .card-box__logo, 
.card-brand--local span:before {background-image:url(https://img1.kbcard.com/home_re/mo/logo/svg/logo-local.svg);}
.card-box--master::before, 
.card-box--master .card-box__logo {background-image:url(https://img1.kbcard.com/home_re/mo/logo/svg/logo-mastercard.svg);}
.card-box--visa::before, 
.card-box--visa .card-box__logo {background-image:url(https://img1.kbcard.com/home_re/mo/logo/svg/logo-visa.svg);}
.card-box--amex::before, 
.card-box--amex .card-box__logo {background-image:url(https://img1.kbcard.com/home_re/mo/logo/svg/logo-americanexpress.svg);}
.card-box--jcb::before, 
.card-box--jcb .card-box__logo {background-image:url(https://img1.kbcard.com/home_re/mo/logo/svg/logo-jcb.svg);}
.card-box--k-jcb::before, 
.card-box--k-jcb .card-box__logo {background-image:url(https://img1.kbcard.com/home_re/mo/logo/svg/logo-jcb-kworld.svg);}
.card-box--upi::before, 
.card-box--upi .card-box__logo {background-image:url(https://img1.kbcard.com/home_re/mo/logo/svg/logo-unionpay.svg);}
.card-box--k-upi::before, 
.card-box--k-upi .card-box__logo {background-image:url(https://img1.kbcard.com/home_re/mo/logo/svg/logo-unionpay-kworld.svg);}

/* 카드 프로세스 개선 공통 콤포넌트 */
.switch-cont {line-height:2.0rem; color:var(--gray060);} 

/* 플로팅 배너 */
.float-banner {position:fixed; left:1.6rem; bottom:10.4rem; width:4.8rem; border-radius:2.4rem; opacity:0; z-index:100;}
.float-banner.float-banner__open {animation:floatBannerAni 1.5s linear forwards;}
.float-banner.float-banner__ing {width:calc(100% - 3.2rem); max-height:fit-content; opacity:1; transform:translateY(0%); box-shadow:0 1.0rem 1.0rem 0 rgba(0,0,0,0.2);}
.float-banner.float-banner__hide {animation:floatBannerHideAni .8s linear forwards;}
.float-banner .btn {display:block; position:relative; width:auto; height:auto; padding:0; border:none; background-color:unset;}
.float-banner .float-banner__link::after {content:''; display:block; position:absolute; top:50%; right:1.6rem; width:1.6rem; height:1.6rem; margin-top:-.8rem; background:url(https://img1.kbcard.com/home_re/mo/arr/16/arr-1-right-w2.svg) no-repeat; z-index:0; opacity:0; visibility:hidden;}
.float-banner .event-link__none {pointer-events:none;}
.float-banner .event-link__none::after {background:none;}
.float-banner__cont {display:flex; justify-content:space-between; align-items:center; min-height:4.8rem; padding:1.2rem 1.6rem 1.2rem 1.2rem; border-radius:2.4rem; background:linear-gradient(to left, #6d6bdd 12%, #7452d1);}
.float-banner__img {display:block; position:absolute; left:1.2rem; bottom:0; width:6.0rem; height:6.0rem; opacity:0; visibility:hidden;}
.float-banner__img img {display:block; width:100%; height:100%; object-fit:contain;}
.float-banner__desc {width:calc(100% - 5.2rem); max-height:2.2rem; font-weight:600; font-size:1.4rem; line-height:1.57; color:var(--gray000); margin-left:.8rem; word-break:keep-all; -ms-word-break:keep-all; display:-webkit-box; line-clamp:2; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow:hidden; opacity:0; visibility:hidden;}
.float-banner__open .float-banner__link::after,
.float-banner__open .float-banner__img,
.float-banner__open .float-banner__close {opacity:1; visibility:visible; transition:opacity 0.5s; transition-delay:1.5s;}
.float-banner__open .float-banner__desc {max-height:4.4rem; opacity:1; visibility:visible; transition-property:max-height, opacity; transition-duration:.5s; transition-delay:1.5s;}
.float-banner__img + .float-banner__desc {width:calc(100% - 8.0rem); margin-left:6.0rem;}
.float-banner .btn-enter {width:4.0rem; height:2.4rem; font-weight:400; font-size:1.4rem; color:var(--gray000); background:var(--badge-color-violet); z-index:1; opacity:0;}
.float-banner__close {display:none; position:absolute; top:-2.8rem; right:0; width:2.8rem; height:2.8rem; border:none; background:url(https://img1.kbcard.com/home_re/mo/ico/20/ico-floating-close.png) center no-repeat; background-size:2.0rem; opacity:0; visibility:hidden;}
.float-banner__ing .float-banner__link::after,
.float-banner__ing .float-banner__img,
.float-banner__ing .float-banner__close {opacity:0; visibility:hidden; transition:opacity 0.5s;}
.float-banner__ing .float-banner__desc {max-height:2.2rem; opacity:0; visibility:hidden; transition-property:max-height, opacity; transition-duration:.5s; transition-delay:0s;}

@keyframes floatBannerAni{
  0% {opacity:0; transform:translateY(100%);}
  25% {opacity:1; transform:translateY(0%);}
  40% {transform:rotate(0deg);}
  60% {transform:rotate(360deg);}
  65% {width:4.8rem; box-shadow:none;}
  100% {width:calc(100% - 3.2rem); max-height:fit-content; opacity:1; transform:translateY(0%); box-shadow:0 1.0rem 1.0rem 0 rgba(0,0,0,0.2);}
}

@keyframes floatBannerHideAni{
  55% {width:4.8rem; box-shadow:none; opacity:1;}
  90% {width:4.8rem; opacity:1; transform:translateY(0%);}
  100% {width:4.8rem; opacity:0; transform:translateY(100%);}
}