@charset "UTF-8";


em { 
    font-style: normal;
    font-weight:inherit
}
.simg { }
.simg.ct { text-align: center}
.simg.rt { text-align: right}
.simg.lt { text-align: left}
.simg img { vertical-align: top;}
.simg .lottie-icon.sz112 {
    display: block;
    width: 112px;
    height: 112px;
    margin: 0 auto;
    overflow: hidden;
}
.simg .lottie-icon.sz112 svg {
    display: block;
    width: 100%;
    height: 100%;
}
.simg .lottie-icon.sz140 {
    display: block;
    width: 140px;
    height: 140px;
    margin: 0 auto;
    overflow: hidden;
}
.simg .lottie-icon.sz140 svg {
    display: block;
    width: 100%;
    height: 100%;
}
.simg.ty1 {padding-top:16px}

.simg.right-grid {margin-right:2px}
.simg.left-grid {margin-right:2px}

em.point1 { color: var(--foundation-ui-success); }
em.point3 { color: var(--foundation-font-bnk-red); }
em.point2 { color: var(--foundation-ui-error); }
em.bold {font-weight: 800;}
em.normal {font-weight: 400;}

/* IR (Image Replacement) 기법 - 웹접근성 대체텍스트 */
.ir-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    clip-path: inset(50%);
}

.ir-image {
    display: block;
    width: 100%;
    height: auto;
}
header {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background:var(--foundation-bg-bg-white);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9500;
}


header .header-wrapper {
    /* display: flex; */
    /* justify-content: space-between; */
    /* align-items: center; */
    width: 100%;
    position: relative;
}

header .header-wrapper .logo {
    width: 107px;
}

header .header-wrapper .logo img {
    width: 100%;
}

header .header-wrapper .logo a {
    display: flex;
    align-items: center;
}

header .header-wrapper .logo a object {
    width:100%;
}

/* 헤더 로고 포커스 스타일 */
header .header-wrapper .logo a:focus {
    outline: 2px solid var(--foundation-primary-bnk-red);
    outline-offset: 2px;
    border-radius: var(--radius-2);
}

header .header-wrapper .history-back {
    color: var(--foundation-font-black);
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 16px */
    letter-spacing: -0.08px;
    display: flex;
    align-items: center;
    gap:4px;
    /* border: 1px solid #f00; */
    text-align: center;
    justify-content: center;
}

header .header-wrapper .history-back .bnk-icon {
    position:absolute;
    top: 0;
    left:0;
    bottom: 0;
    margin: auto;
}

/* Navigation / Header / Status — 타입=서브페이지 */
header .header-wrapper.subpage {
    gap: 0;
}

header .header-wrapper.subpage .history-back {
    flex: 1 1 auto;
    min-width: 0;
}

header .header-wrapper.subpage .history-back .bnk-icon.chevron-left {
    flex-shrink: 0;
}

header .header-wrapper.subpage .history-back .title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

header .header-wrapper.subpage .gnb {
    flex-shrink: 0;
}

header .header-wrapper .gnb {
    /* display: flex; */
    /* justify-content: space-between; */
    /* align-items: center; */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 24px;
    margin: auto;
}
header .header-wrapper .gnb .bnk-btnset {gap:12px}

header .header-wrapper .gnb .bnk-btnset .bnk-btn.icon {
    padding:0
}

header .header-wrapper .gnb .gnb-menu-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header .header-wrapper .gnb .gnb-menu-list + .toggle-switch {margin-left:4px}

header .header-wrapper .gnb .gnb-menu-list li {
    list-style: none;
    font-size: 0;
    position: relative;
}

header .header-wrapper .gnb .gnb-menu-list li + li::before {
    content:"";
    display:inline-block;
    width:1px;
    height: 10px;
    vertical-align:middle;
    margin: 0 0 0px 0;
    background: var(--foundation-line-gray-3);
    /* position: absolute; */
    top: 0;
    bottom: 2px;
    margin: auto;
    margin: 0 12px;
}

header .header-wrapper .gnb .gnb-menu-list li a {
    color: var(--foundation-font-black);
    font-size: 1.4rem;
    font-weight: 600;
    padding: 10px 0;
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    outline: none;
    transition: all 0.2s ease;
}

/* ***************************** 헤더 메뉴 스타일 ***************************** */
header .header-wrapper .gnb .gnb-menu-list li a:focus {
    outline: 2px solid var(--foundation-primary-bnk-red);
    outline-offset: 2px;
    border-radius: var(--radius-2);
}

header .header-wrapper .gnb .gnb-menu-list li a:hover {
    opacity: 0.7;
}

header .header-wrapper .gnb .toggle-switch .bnk-inputset.ckbox {vertical-align: top;background: transparent;}

/* 토글 스위치 포커스 스타일 */
header .header-wrapper .gnb .toggle-switch input[type="checkbox"]:focus + label {
    outline: 2px solid var(--foundation-primary-bnk-red);
    outline-offset: 2px;
    border-radius: var(--radius-2);
}
.subwrapper {
    padding: 56px 0 136px 0;
}
.bnk-title { }
.bnk-title.ct {text-align: center;/* display: flex; *//* justify-content: center; */}
.bnk-title.rt { text-align: right; }
.bnk-title.lt { text-align: left; }
.bnk-title.both { display: flex; justify-content: space-between; align-items: center; gap: 1.6rem; }
.bnk-title.both .pos.inline [class*="hd"],
.bnk-title.inline [class*="hd"] { display: inline-block; vertical-align: middle; }

.pos.inline [class^="hd"] + [class^="label"] { margin-left: 4px; }


.bnk-title.ct.certification-number .stxt + .hd2 {
    margin-top:4px
}
.bnk-title.both .pos.inline .hd3 + .bnk-label {
    margin-left: 4px;
}

.bnk-title.both .pos.inline .hd4 + .bnk-btn.icon {
    margin-left: 2px;
    vertical-align: middle;
    /* border: 1px solid #f00; */
    border-radius: 0;
    padding: 0;
}


.bnk-title.icon-grid {
    display:grid;
    /* grid-template-columns: repeat(2, auto); */
    grid-template-columns: auto 1fr;
    gap: 0 8px;
    align-items: center;
}

/* ty1: 로고+제목+부제목 — 아이콘을 첫 줄(제목) 기준 상단 정렬 (계좌 카드 등) */
.bnk-title.icon-grid.ty1 {
    align-items: start;
    /* grid-template-columns: auto max-content; */
    justify-items: start;
    width: fit-content;
    max-width: 100%;
}

.bnk-title.icon-grid.ty1 .hd3,
.bnk-title.icon-grid.ty1 .stxt,
.bnk-title.icon-grid.ty1 .stxt.sm,
.bnk-title.icon-grid.ty1 .bnk-label,
.bnk-title.icon-grid.ty1 .bnk-labelset {
    grid-column: 2;
    justify-self: start;
    width: fit-content;
    max-width: 100%;
}

.bnk-title.icon-grid .bnk-icon { }
.bnk-title.icon-grid img.bank-logo {
    grid-row: span 2;
    align-self: center;
}

.bnk-title.icon-grid.ty1 .bnk-icon,
.bnk-title.icon-grid.ty1 img.bank-logo,
.bnk-title.icon-grid.ty1 .simg {
    grid-row: 1;
    align-self: start;
}

.bnk-title.icon-grid.ty2 { 
    display:flex
}

/* ty3: 아이콘 + 두 줄 텍스트. 아이콘과 텍스트 12px, 텍스트 사이 2px */
.bnk-title.icon-grid.ty3 {
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    max-width: 100%;
}

.bnk-title.icon-grid.ty3 .icon-grid-txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.bnk-title.icon-grid.ty3 img.bank-logo {
    grid-row: auto;
    flex-shrink: 0;
}

.bnk-title.icon-grid.ty3 .stxt {
    grid-column: auto;
    line-height: 1.5;
}

.bnk-title.icon-grid .hd3 { }
.bnk-title.icon-grid .stxt { 
    grid-column: 2
}

.bnk-title.icon-grid:not(.ty1) .stxt + .bnk-label {
    grid-column: 2;
}

.hyphen-line { }
.hyphen-line::before {content: "-";display: inline-block;vertical-align: middle;margin-right:4px;/* line-height: normal; *//* margin-bottom: 3px; */transform: translateY(-2px);}


.hd2 { 
    color: var(--foundation-font-black);
    font-size: 2.8rem;
    font-style: normal;
    font-weight: 800;
    line-height: 146%; /* 40.88px */
    }

.hd3 { 
color: var(--foundation-font-black);
font-size: 2rem;
font-style: normal;
font-weight: 800;
line-height: 146%; /* 29.2px */
letter-spacing: -0.1px;
}

.hd3.light {
    font-size:1.8rem;
}

.hd4 { 
color: var(--foundation-font-black);
font-size: 1.8rem;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 27px */
letter-spacing: -0.09px;
}
.hd4.light { 
    font-size:1.6rem
}

.hd4 .bnk-icon { margin:0 0 3px 0}

.hd5 { 
    color: var(--foundation-font-black);
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 800;
    line-height: 150%; /* 21px */
    letter-spacing: -0.07px;
}

.hd6 {
    color: var(--foundation-font-gray-1);
font-size: 1.4rem;
font-style: normal;
font-weight: 800;
line-height: 150%; /* 21px */
letter-spacing: -0.07px;
}

.stxt { 
color: var(--foundation-font-gray-1);
font-size: 1.4rem;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
letter-spacing: -0.07px;
word-break: keep-all;
}
.stxt.sm  {
    color: var(--foundation-font-gray-2);
font-size: 1.2rem;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 16.8px */
letter-spacing: -0.06px;
}

.stxt.acc {
    color: var(--foundation-font-gray-1);
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 18px */
letter-spacing: -0.06px;
}

.stxt.lg {
    color: var(--foundation-font-black);
font-size: 1.6rem;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 24px */
letter-spacing: -0.08px;
}

.stxt.ty1 {
    color: var(--foundation-font-black);
    font-weight: 700;
}

.stxt.ty2 {
    color: var(--foundation-font-gray-2);
font-size: 1.4rem;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 21px */
letter-spacing: -0.07px;
}

.stxt.line {
    text-decoration: underline;
    text-underline-position: from-font;
}

.list-count { 
    color: var(--foundation-font-black);
font-size: 1.4rem;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
letter-spacing: -0.07px;
}
.list-count em {margin:0 2px}

/* 검색 정보 세트 */
.find-infoset { }
.find-infoset.lv2 .bnk-btnset {gap:0}
.find-infoset.lv2 .bnk-btnset .bnk-btn {
    /* border: 1px solid #f00; */
    position: relative;
}
.find-infoset.lv2 .bnk-btnset .bnk-btn + .bnk-btn::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 10px;
    vertical-align: middle;
    margin: 0 0 0px 0;
    background: var(--foundation-line-gray-2);
    top: 0;
    bottom: 2px;
    margin: auto;
    margin: 0;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.hrzn { 
    display: block;
    height: 8px;
    background: var(--foundation-bg-bg-1);
    border:none
}
.hrzn.ty1 { 
    background: var(--foundation-line-gray-1);
    height:1px
}

/* 공인인증서 비밀번호 키패드 */
.cert-password {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0 24px;
}
.cert-password.bnk-grid-padding-top02 { 
    padding-top: 32px;
}

.cert-password .pw-indicators-8 {
    display: flex;
    gap: 10px;
    justify-content: center;
    /* margin-top: 16px; */
    padding: 48px 0 32px 0;
}

.cert-password .pw-indicator-8 {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transition: all 0.2s;
    fill: var(--foundation-font-gray-4);
    background: var(--foundation-font-gray-4);
}

.cert-password .pw-indicator-8.active {
    background-color: var(--foundation-primary-bnk-red);
    border-color: var(--foundation-primary-bnk-red);
}

.cert-password .cert-keypad {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--foundation-bg-bg-1);
    padding: 2px;
}

.cert-password .keypad-row {
    display: flex;
    gap: 2px;
    justify-content: center;
    align-items: center;
}

.cert-password .keypad-row.special .keypad-key{
    color: var(--foundation-font-gray-1);
    text-align: center;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 14px */
    letter-spacing: -0.07px;
    width: 64px;
    max-width:unset;
    flex: none;
}
.cert-password .keypad-row.special .keypad-key.space-btn {
    width: 94px;
    border-color: var(--foundation-line-gray-2);
}

.cert-password .keypad-key {
    max-width: 28px;
    height: 48px;
    padding: 0;
    border: none;
    background-color: var(--foundation-bg-bg-white);
    border-radius: 3px;
    font-size: 1.8rem;
    font-weight: 600;
    cursor: pointer;
    /* transition: all 0.15s; */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    flex: 1;
    /* max-width: 48px; */
    color: var(--foundation-font-gray-1);
    text-align: center;
    border: 1px solid var(--foundation-line-gray-2);
    background: var(--foundation-bg-bg-white);
    gap: 5px;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 16px */
    letter-spacing: -0.08px;
}

.cert-password .logomark {
    width: 28px;
    height: 25px;
    display: flex;
    background-image: url('../image/common/bnk-mark.svg');
    background-size: 25px 7px;
    background-repeat: no-repeat;
    background-position: center;
    /* align-items: center; */
    /* text-align: center; */
    /* border: 1px solid #f00; */
}

.cert-password .blank-key {
    max-width: 28px;
    height: 48px;
    flex: 1;
    visibility: hidden;
}



.cert-password .keypad-key:active,
.cert-password .keypad-key.active {
    border: 1px solid var(--foundation-line-gray-2);
    background: var(--foundation-btn-2-btn);
    transform: scale(0.95);

}

.cert-password .keypad-key .main {
    font-size: 1.8rem;
    line-height: 1;
    color: var(--foundation-font-black);
    text-align: center;

    font-size: 1.6rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 16px */
    letter-spacing: -0.08px;
}

.cert-password .keypad-key .sub {
    font-size: 1.2rem;
    color: var(--foundation-font-gray-2);
    /* position: absolute; */
    /* top: 2px; */
    /* line-height: 1; */
    /* color: var(--foundation-font-gray-2, #656669); */
    text-align: center;
/* Component/12_B_100%_-0.5% */
    /* font-family: "Pretendard Variable"; */
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 12px */
    letter-spacing: -0.06px;
}

/* .cert-password .keypad-key:active .main,
.cert-password .keypad-key.active .main,
.cert-password .keypad-key:active .sub,
.cert-password .keypad-key.active .sub {
    color: var(--foundation-font-white);
} */

.cert-password .keypad-row.alphabet .keypad-key {
    flex-direction: column;
}

.cert-password .keypad-key.special-btn {
    font-size: 1.2rem;
    /* background-color: var(--foundation-bg-bg-2); */
    color: var(--foundation-font-gray-2);
    border: none;
    background: var(--foundation-bg-bg-3);
}
.cert-password .keypad-key.special-btn .custom-uppercase {
    width: 15px;
    height: 16px;
}

.cert-password .keypad-key.special-btn .custom-keydelete {
    width: 18px;
    height: 13px;
}


/* .cert-password .keypad-key.uppercase-toggle.active {
    background-color: var(--foundation-primary-bnk-red);
    color: var(--foundation-font-white);
} */

.cert-password .keypad-key.space-btn {
    flex: 1;
    max-width: max-content;
    background: var(--foundation-bg-bg-white);
    /* width: 92px; */
}

.cert-password .keypad-key.delete-btn {
    /* background-color: transparent; */
}

.cert-password .keypad-key.delete-btn .bnk-icon {
    /* width: 24px; */
    /* height: 24px; */
    /* filter: brightness(0.5); */
}

.cert-password .keypad-key.delete-btn:active {
    background-color: var(--foundation-bg-bg-2);
}

.cert-password .keypad-key.delete-btn:active .bnk-icon {
    filter: brightness(0);
}

.faceid-wrapper  {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}
.faceid-wrapper .bnk-title + .simg {margin-top:0}

.faceid-wrapper .simg .lottie-icon,
.faceid-wrapper .simg .login-faceid-gif {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto;
}

.faceid-wrapper .simg .login-faceid-gif {
  object-fit: contain;
}

.faceid-wrapper .simg .lottie-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 백로딩 — main-back-loading.html */
.is-back-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
}

.back-loading-lottie {
  width: 56px;
  height: 56px;
  flex: none;
}

.back-loading-lottie svg {
  display: block;
  width: 100%;
  height: 100%;
}

.banner-content {display: flex;justify-content: space-between;border-radius: var(--radius-6);background: var(--palette-red-lighter);padding: 0 20px;align-items: center;min-height: 96px;}

.banner-content.ct { 
    justify-content: center;
}
.banner-content .hd3  {
    /* color: var(--foundation-primary-black); */
    color: #222;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 24px */
    letter-spacing: -0.08px;
}
.banner-content .hd4 {font-size: 1.4rem;font-style: normal;font-weight: 700;line-height: 150%; /* 24px */letter-spacing: -0.08px;color: var(--foundation-font-black);}
.banner-content .banner-img { }
.banner-content .banner-img .bnk-icon {
    width: 56px;
    height: 56px;
}

.banner-content.ty1 {
    background: var(--foundation-bg-bg-1);
    padding-top:40px;
    padding-bottom:40px;
}

.banner-content.ty1 .simg.big { 
    max-width:140px;
    margin:0 auto;
}
.banner-content.ty1 .simg.big img { 
    width:100%
}

.banner-content.ty2 {
    background: var(--foundation-bg-bg-1);
    padding-top:20px;
    padding-bottom:20px;
}


.pop-msg {
    border-radius: var(--radius-6);
    background: var(--palette-gray-1000);
    backdrop-filter: blur(5px);
    display:inline-block;
    color: var(--foundation-font-white);
    text-align: center;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 14px */
    letter-spacing: -0.07px;
    padding:12px 16px;
    max-width: 262px;
}

.list-viewbox { 
    background: var(--foundation-bg-bg-1);
    padding:16px 0;
    border-radius: var(--radius-4);
}

/* 탭메뉴 컨포넌트 타입 */
.bnk-tab {
    position:relative
}
.bnk-tab::after {
    content:"";
    display:block;
    position:absolute;
    top: 55px;
    left:0;
    right:0;
    border-bottom: 1px solid var(--foundation-line-gray-1);
    z-index: -1;
}
.bnk-tab.fst::after {
    top: 39px;
}
.bnk-tab .tablist {position:relative;overflow:hidden;/* display: flex; */padding-left: 20px;padding-right: 20px;}
.bnk-tab .tablist > dt {float:left;/* background: #f00; */width: calc((100% / 3) - 16px);}
.bnk-tab .tablist.col2 > dt { width: calc((100% / 2) - 16px);}
.bnk-tab .tablist.col3 > dt { width: calc((100% / 3) - 16px);}
.bnk-tab .tablist.col4 > dt {width: calc((100% / 4) - 18px);}

.bnk-tab .tablist > dt ~ dt {margin-left:24px}
.bnk-tab .tablist > dt > a {display:block;padding: 16px 0 16px 0;border-left:none;color: var(--foundation-line-gray-3);text-align: center;font-size: 1.6rem;font-style: normal;font-weight: 700;line-height: 150%; /* 24px */letter-spacing: -0.08px;}
.bnk-tab.fst .tablist > dt > a {
    padding-top:0
}
.bnk-tab .tablist > dt:first-of-type > a {/* border-left:1px solid #666; */}
.bnk-tab .tablist > dt.on > a {
color: var(--foundation-primary-black);
font-size: 1.6rem;font-style: normal;font-weight: 700;line-height: 150%; /* 24px */letter-spacing: -0.08px;color: var(--foundation-primary-black);position: relative;
}
.bnk-tab .tablist > dt.on > a::after {
    content:"";
    display:block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--foundation-global-red);
}
.bnk-tab .tablist > dd {float:right;width:100%;margin-top: 56px;margin-left: -100%;display:none;/* padding-right: 20px; */}
.bnk-tab.fst .tablist > dd {margin-top:40px}
.bnk-tab .tablist > dd .bnk-row.inner.g1 {margin-top:16px}
.bnk-tab .tablist > dd .bnk-row.inner.g2 {margin-top:32px}
.bnk-tab .tablist > dd:first-of-type {display:block;/* border: 1px solid #f00; */}

.bnk-tab .tablist > li {float:left}
.bnk-tab .tablist > li > a {display:block; padding:10px; border:1px solid var(--palette-gray-800); border-left:none}
.bnk-tab .tablist > li:first-child > a {border-left:1px solid var(--palette-gray-800)}
.bnk-tab .tablist > li.on > a {background:var(--palette-gray-800); color: var(--foundation-font-white)}

.bnk-tab.ustyle::after {
    display:none
}
.bnk-tab.ustyle .tablist {
    display: flex;
    overflow: inherit;
    padding: 0;
}
.bnk-tab.ustyle .tablist::before {
    content:"";
    border:1px solid var(--foundation-line-gray-2);
    border-radius: var(--radius-6);
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 0;
}
.bnk-tab.ustyle .tablist > li {
    position:relative;
    flex: 1;
    z-index: 10;
}
.bnk-tab.ustyle .tablist > li > a {
    border: none;
    text-align: center;
    position: relative;
    background:none;
    color: var(--foundation-font-gray-2);
    text-align: center;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 14px */
    letter-spacing: -0.07px;
    height: 48px;
    background:none;
    padding: 0;
    line-height: 47px;
}
.bnk-tab.ustyle .tablist > li.on > a {
    color: var(--foundation-font-black);
    font-weight: 800;
}
.bnk-tab.ustyle .tablist > li.on > a::before {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    bottom: 0;
    left: -1px;
    border-radius: var(--radius-6);
    border: 2px solid var(--foundation-global-red);
    background: transparent;
    z-index: 1000;
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.05);
}
.bnk-tab.ustyle .tabcont {margin-top: 16px;}
.bnk-tab.ustyle.custom01 .tabcont {margin-top: 0px;}
.bnk-tab.ustyle .tabcont .cont {display:none}
.bnk-tab.ustyle .tabcont .cont:first-child {display:block}

/* ustyle tablist - ty1 (Navigation Tab Line Fix) */
.bnk-tab.ustyle .tablist.ty1::before {
  display: none;
}

.bnk-tab.ustyle .tablist.ty1 {
  gap: 24px;
  padding: 16px 20px 0;
  border-bottom: 1px solid var(--foundation-line-gray-1);
  background: var(--foundation-bg-bg-white);
  align-items: flex-start;
}

.bnk-tab.ustyle .tablist.ty1 > li > a {
  height: auto;
  padding: 0 0 16px;
  line-height: 150%;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.08px;
  color: var(--foundation-font-gray-3);
  white-space: nowrap;
}

.bnk-tab.ustyle .tablist.ty1 > li.on > a {
  color: var(--foundation-primary-black);
  font-weight: 700;
}

.bnk-tab.ustyle .tablist.ty1 > li.on > a::before {
  display: none;
}

.bnk-tab.ustyle .tablist.ty1 > li.on > a::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--foundation-global-red);
}

/* ustyle tablist - ty2 (Segmented Control / Radio Option) */
.bnk-tab.ustyle .tablist.ty2::before {
  display: none;
}

.bnk-tab.ustyle .tablist.ty2 {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-7);
  background: var(--foundation-bg-bg-2);
  align-items: center;
}

.bnk-tab.ustyle .tablist.ty2 > li {
  float: none;
  flex: 1;
}

.bnk-tab.ustyle .tablist.ty2 > li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 10px;
  background: var(--foundation-line-gray-2);
  z-index: 1;
}

.bnk-tab.ustyle .tablist.ty2 > li > a {
  height: 48px;
  padding: 8px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.07px;
  color: var(--foundation-font-gray-2);
  border-radius: var(--radius-6);
  border: 4px solid transparent;
}

.bnk-tab.ustyle .tablist.ty2 > li.on > a {
  color: var(--foundation-font-black);
  font-weight: 800;
  background: var(--foundation-bg-bg-white);
  border-color: var(--foundation-bg-bg-2);
  border-radius: 15px;
}

.bnk-tab.ustyle .tablist.ty2 > li.on > a::before {
  display: none;
}

/* tabswiper 타입 (슬라이드 탭메뉴) */
.bnk-tab.tabswiper {
    position: relative;
}
.bnk-tab.tabswiper::after {
    content: "";
    display: block;
    position: absolute;
    top: 39px;
    left: 0;
    right: 0;
    border-bottom: 1px solid var(--foundation-line-gray-1);
    z-index: -1;
}
.bnk-tab.tabswiper .tablist {
    position: relative;
    overflow: visible;
    padding: 0 20px;
}
.bnk-tab.tabswiper .tablist .swiper-wrapper {
    display: flex;
}
.bnk-tab.tabswiper .tablist .swiper-wrapper > .swiper-slide {
    float: none;
    width: auto;
    flex-shrink: 0;
    margin-left: 0;
}
.bnk-tab.tabswiper .tablist .swiper-wrapper > .swiper-slide ~ .swiper-slide {
    margin-left: 24px;
}
.bnk-tab.tabswiper .tablist .tab-button {
    display: block;
    padding: 0 0 16px 0;
    border: none;
    background: none;
    color: var(--foundation-font-gray-3);
    text-align: center;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.08px;
    white-space: nowrap;
    cursor: pointer;
    width: 100%;
    position: relative;
}
.bnk-tab.tabswiper .tablist .tab-button:focus {
    outline: 2px solid var(--foundation-global-red);
    outline-offset: 2px;
    border-radius: var(--radius-1);
}
.bnk-tab.tabswiper .tablist .tab-button.on {
    color: var(--foundation-primary-black);
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.08px;
    color: var(--foundation-primary-black);
    position: relative;
}
.bnk-tab.tabswiper .tablist .tab-button.on::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--foundation-global-red);
}
.bnk-tab.tabswiper .tabpanels {
    position: relative;
    padding: 0 20px;
    /* border: 1px solid #f00; */
}
.bnk-tab.tabswiper .tabpanels > [role="tabpanel"] {
    margin-top: 16px;
}
.bnk-tab.tabswiper .tabpanels > [role="tabpanel"][hidden] {
    display: none;
}

/* 약관상세 — 탭 아래 본문 자리를 시트 높이만큼 확보 */
.lysheet.view.full .bnk-tab.tabswiper.agree-detail {
    flex: 1 1 0%;
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.lysheet.view.full .bnk-tab.tabswiper.agree-detail .tablist {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}
.lysheet.view.full .bnk-tab.tabswiper.agree-detail .tabpanels {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.lysheet.view.full .bnk-tab.tabswiper.agree-detail .tabpanels > [role="tabpanel"]:not([hidden]) {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.agree-detail-visual {
    flex: 1 1 0%;
    min-height: 0;
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--foundation-bg-bg-1);
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.filter-wrap { }
.filter-item {display: flex;align-items: center;gap: 8px;justify-content: flex-end;}
.filter-item-txt {display: flex;align-items: center;gap: 4px;color: var(--foundation-font-gray-1);
font-size: 1.4rem;font-style: normal;font-weight: 400;line-height: 150%; /* 21px */letter-spacing: -0.07px;}
.filter-item-txt .dot {width: 3px;height: 3px;background: var(--foundation-font-gray-2);border-radius: 50%;}

.filter-item .bnk-icon.icon-filter { margin:0 }


.qabox { }
.qabox .bnk-icon.icon-sz1 { margin-bottom:1px; margin-right:0}


.graph-outer {
position:relative
}

.graph-outer .dot-wrap {
    position: absolute;
    top: 0;
    right: 0;
}

.graph-outer .bnk-title { }
.graph-outer .bnk-title .stxt + .stxt {
    margin-top:8px
}

.graph-outer .bnk-title .hd3 {
    color: var(--foundation-font-black);
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 24px */
    letter-spacing: -0.08px;
    display: flex;
    align-items: center;
}

.graph-outer .bnk-title .hd3 .sub-label {
    color: var(--foundation-font-black);
font-size: 1.4rem;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
letter-spacing: -0.07px;
}

.graph-outer .bnk-title + .balance-row {
    margin-top: 16px;
}

.graph-outer .balance-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.graph-outer .balance-row .simg.kdic-mark {
    flex-shrink: 0;
    width: 48px;
    height: 31px;
}

.graph-outer .balance-row .simg.kdic-mark img {
    display: block;
    width: 48px;
    height: 31px;
    object-fit: cover;
}

.graph-outer .balance-row .bnk-list.display.ty1 {
    flex: 1;
    min-width: 0;
}

.graph-outer .balance-row .bnk-list.display.ty1 > li > dl {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0;
}

.graph-outer .stxt { 
    display:flex;
    justify-content: flex-start;
    align-items: center;
}
.graph-outer .stxt .sub-label { }
.graph-outer .separator { 
    width: 1px;
    height: 12px;
    background: var(--foundation-line-gray-2);
    display:inline-block;
    margin:0 8px
}
.graph-outer .stxt .bnk-btn.icon {padding: 0;margin-left: 2px;}


.graph-outer.ty1 .bnk-title.icon-grid {
    align-items: start;
}

.graph-outer.ty1 .bnk-title.icon-grid .bnk-icon {
    grid-row: 1;
    align-self: center;
}

.graph-outer.ty1 .bnk-title.icon-grid img.bank-logo {
    grid-row: 1;
    align-self: center;
}

.graph-outer.ty1 .bnk-title.icon-grid .bnk-title.inline {
    grid-column: 2;
}

.graph-outer.ty1 .bnk-title.icon-grid .bnk-title.inline .hd3 + .hd3::before,
.graph-outer.ty1 .bnk-title .bnk-title.inline .hd3 + .hd3::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    background: var(--foundation-line-gray-2);
    margin: 0 8px;
    vertical-align: middle;
}

.graph-outer.ty1 .bnk-title .bnk-title.inline .hd3.light {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.07px;
}

.graph-wrap { }
.graph-wrap .graph {padding: 47px 0 0 0;position: relative;}
.graph-wrap .graph .graph-title {position: relative;position: absolute;left: calc(50%);top: 0;transform: translateX(-25px);}
.graph-wrap .graph .graph-title-text {
    color: var(--foundation-global-white);
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 12px */
    letter-spacing: -0.06px;
    border-radius: var(--radius-10);
    background: #353D4E;
    display: inline-block;
    padding:8px;
    margin: 0 0 15px 0;
    position: relative;
    /* transform: translateX(50%); */
    /* position: absolute; */
    /* left: 0; */
    /* top: 0; */
}
.graph-wrap .graph .graph-title-text::after {
    content:"";
    display:block;
    width: 6px;
    height: 4px;
    background: url('../image/icon/custom/graph-arrow-horn.svg') no-repeat 0 0 / 100%;
    margin:auto;
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100PX;
}
.graph-wrap .graph .graph-bar {
    border-radius: 100px;
    background: var(--foundation-bg-bg-3);
    height:6px;
    position:relative;
    overflow: hidden;
}
.graph-wrap .graph .graph-bar-inner { 
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    background: var(--foundation-primary-bnk-red);
    border-radius: 0 100px 100px 0;
}
.graph-wrap .graph .graph-desc {display: flex;margin-top: 19px;justify-content: space-between;}
.graph-wrap .graph .graph-desc-text { 
    color: var(--foundation-font-gray-1);
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 12px */
    letter-spacing: -0.06px;
}

.graph-wrap .graph .graph-desc-text.co1 {
    color: var(--foundation-global-red);
}

/* graph-wrap ty1 : 거래내역조회 계좌요약 (말풍선 없음, 진행바 12px) */
.graph-wrap.ty1 .graph {
    padding: 0;
}
.graph-wrap.ty1 .graph .graph-bar {
    height: 6px;
}
.graph-wrap.ty1 .graph .graph-desc {
    margin-top: 8px;
}



.chat-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--foundation-bg-bg-1);
}

.chat-wrapper .chat-header {
    padding: 16px;
    text-align: center;
    /* background: var(--foundation-bg-bg-white); */
    /* border-bottom: 1px solid var(--foundation-line-gray-2); */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.chat-wrapper .chat-header::after {
    content:"";
    display:block;
    position:absolute;
    top:0;
    bottom:0;
    left: 20px;
    right: 20px;
    height:1px;
    margin:auto;
    background: var(--foundation-line-gray-2);
}

.chat-wrapper .chat-date {
    font-size: 1.4rem;
    color: var(--foundation-font-gray-1);
    font-weight: 400;
    text-align: center;
    color: var(--foundation-font-gray-2);
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 16.8px */
    letter-spacing: -0.06px;
    position: relative;
    z-index: 100;
    background: var(--foundation-bg-bg-1);
    display: inline-block;
    padding: 0 8px;
}

.chat-wrapper .chat-messages {
    /* flex: 1; */
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.chat-wrapper .chat-message {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-direction: column;
}

.chat-wrapper .chat-message.user {
    flex-direction: row-reverse;
}

.chat-wrapper .chat-avatar {

}


.chat-wrapper  .chat-avatar .chat-avatar-icon {
    width:72px;
    height:72px;
    border-radius: 50%;
    background: var(--foundation-bg-bg-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}




.chat-wrapper .chat-avatar-icon::after {
content:"";
    display:block;
    width:56px;
    height:56px;
    background:url('../image/icon/custom/icon-chatbot.svg') no-repeat 0 0 / 100%
}

.chat-wrapper .chat-bubble {
    /* max-width: 70%; */
    padding: 0;
    font-size: 1.4rem;
    line-height: 1.5;
    color: var(--foundation-font-black);
}
.chat-wrapper .chat-bubble .stxt { 
    color: var(--foundation-font-gray-1);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
    letter-spacing: -0.07px;
}
.chat-wrapper .chat-bubble .stxt.lg { 

color: var(--foundation-font-black);
font-size: 1.8rem;
font-weight: 800;
letter-spacing: -0.09px;
}
.chat-wrapper .chat-bubble .stxt + .stxt.lg { margin-top:8px}

.chat-wrapper .chat-message.user .chat-bubble {
    border-radius: var(--radius-10) 0 var(--radius-10) var(--radius-10);
    background: var(--foundation-bg-bg-3);

    box-shadow: 0 4px 10px -4px rgba(2, 16, 48, 0.15);
    padding: 16px;
    color: var(--foundation-font-black);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
    letter-spacing: -0.07px;
}

.chat-wrapper .chat-suggestions {
    margin-top: 16px;
    border-radius: 0 var(--radius-10) var(--radius-10) var(--radius-10);
    background: var(--foundation-bg-bg-white);

/* BOX/Talk Process */
    box-shadow: 0 4px 10px -4px rgba(2, 16, 48, 0.3);
    padding: 16px;
    width: 80%;
}

.chat-wrapper .chat-suggestions-title {
    color: var(--foundation-font-black);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
    letter-spacing: -0.07px;
}

.chat-wrapper .chat-suggestion-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.chat-wrapper .chat-suggestion-button {
    padding: 0;
    text-align: left;
    color: var(--foundation-font-black);
    cursor: pointer;
    transition: background 0.2s;
    color: var(--foundation-font-black);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 800;
    line-height: 100%; /* 14px */
    letter-spacing: -0.07px;
    border-radius: var(--radius-6);
    border: 1px solid var(--foundation-line-gray-2);
    background: var(--foundation-bg-bg-white);
    padding: 15px 0;
    text-align: center;
}



.chat-wrapper .chat-suggestion-button:active {
    background: var(--foundation-line-gray-2);
}

.chat-wrapper .chat-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 32px;
}

.chat-wrapper .chat-quick-action {
    padding: 0 12px;
    cursor: pointer;
    transition: background 0.2s;
    border-radius: var(--radius-4);
    border: 1px solid var(--foundation-line-gray-2);
    background: var(--foundation-bg-bg-white);
/* Component/14_B_100%_-0.5% */
    /* font-family: "Pretendard Variable"; */
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 14px */
    letter-spacing: -0.07px;
    color: var(--foundation-font-gray-2);
    height: 32px;
}

.chat-wrapper .chat-quick-action:active {
    background: var(--foundation-line-gray-2);
}

.chat-wrapper .chat-floating-button {
border-radius: var(--radius-10) 0 var(--radius-10) var(--radius-10);
background: var(--foundation-bg-bg-3);

/* BOX/Talk Process */
box-shadow: 0 4px 10px -4px rgba(2, 16, 48, 0.15);
}

.chat-wrapper .chat-input-area {
    padding: 12px 20px;
    background: var(--foundation-bg-bg-white);
    /* border-top: 1px solid var(--foundation-line-gray-2); */
    display: flex;
    align-items: center;
    gap: 8px;
    height: 84px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.chat-wrapper .chat-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    /* background: var(--foundation-bg-bg-2); */
    border-radius: var(--radius-12);
    padding: 8px 0;
    gap: 12px;
}
.chat-wrapper .chat-input-wrapper .bnk-inputset {
    flex:1
}
.chat-wrapper .chat-input-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
}

.chat-wrapper .chat-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1.4rem;
    color: var(--foundation-font-black);
    outline: none;
}

.align-linefix {}
.align-linefix .align-linefix-text {display: inline-block;vertical-align: middle;}
.align-linefix .bnk-icon {display: inline-block;vertical-align: middle;}

.bnk-tab .tablist > dt > a { color: var(--foundation-font-gray-3);}



.goldmall-detail .banner-content.ty1 { 
    padding-left:0;
    padding-right:0
}