@charset "UTF-8";

/* BNK Grid System CSS */


.bnk-grid-top0 {margin-top: 0;}
.bnk-grid-top01 {margin-top: 16px;}
.bnk-grid-top02 {margin-top: 32px;}
.bnk-grid-top03 {margin-top: 4px;}
.bnk-grid-top04 {margin-top: 8px;}
.bnk-grid-top05 {margin-top: 24px;}
.bnk-grid-top06 {margin-top: 10px;}

.bnk-grid-padding-top00 {padding-top: 0}
.bnk-grid-padding-top01 {padding-top: 16px;}
.bnk-grid-padding-top02 {padding-top: 32px;}
.bnk-grid-padding-top03 {padding-top: 48px;}
.bnk-grid-padding-top04 {padding-top: 8px;}
.bnk-grid-padding-top05 {padding-top: 24px;}



/* 기본 그리드 스타일 */
.bnk-row {
  padding:0 20px
}

.bnk-row.bnk-grid-padding-top04 {padding-top: 8px}

.bnk-row.bnk-grid-top01 + .bnk-row.bnk-grid-top01,
.bnk-row.bnk-grid-top01 {margin-top: 16px;}
.bnk-row.bnk-grid-top02 {margin-top:40px}
.bnk-row.bnk-grid-top03 {margin-top:24px}

.bnk-row.both { 
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bnk-row.inner { 
  padding:0;
}
.bnk-row.bottom-grid {
  /* padding:16px 0 0 0; */
  padding-top: 16px;
}

.bnk-row.tab-viewbox-wrapper {
  padding:0;
}

.bnk-row.ct { text-align: center;}

.bnk-row.bnk-row-center { 
  display: flex;
  justify-content: center;
}
.bnk-row.bnk-row-right { 
  display: flex;
  justify-content: flex-end;
}

.bnk-row.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(calc(50% + 20px));
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.3s;
  z-index: 100;
  pointer-events: none;
  background: var(--foundation-bg-bg-white);
  padding-bottom: 20px;
  padding-top: 16px;
  background: 차;
}

.bnk-row.fixed.co1 { 
background-color: var(--foundation-bg-bg-1);
  }

.bnk-row.fixed.visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 접근성: 스크린 리더 전용 상태 알림 */
.bnk-row.fixed[aria-hidden="true"] {
  pointer-events: none;
}

.bnk-row.fixed[aria-hidden="false"] {
  pointer-events: auto;
}

.bnk-grid {
  display:grid;
  width: 100%;
}
.bnk-grid.col1 {
  grid-template-columns: repeat(1, 1fr);
  gap: 16px 0;
}

.bnk-grid.col2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 0;
}

/* ***************************** 전체 간격 조정  중요 ***************************** */

.banner-content .bnk-title + .simg.bnk-grid-top0,
.bnk-list.display.line-ty1 + .bnk-list.display.line-ty1,
.bnk-row + .bnk-row.bnk-grid-top0,
.bnk-row + .hrzn.main-account-set-hr {margin-top: 0}


.banner-content .bnk-title + .simg.bnk-grid-top03,
.bnk-card .info-wrapper .bnk-title .hd3 + .stxt {margin-top:4px}

.banner-content .bnk-title + .simg.bnk-grid-top04,
.banner-content .bnk-title + .simg.big.bnk-grid-top04,
.bnk-title + .graph-wrap,
.bnk-list.inputfrm > li  .label-title + .bnk-inputset,
.bnk-list.inputfrm > li  .label-title + .input-mask,
.bnk-list.inputfrm > li  .label-title + .input-date-range,
.bnk-list.inputfrm > li  .label-title + .checklist,
.bnk-list.inputfrm > li .label-title + .bnk-inputset.incert,
.bnk-list.inputfrm > li .label-title + .select-wrapper,
.bnk-list.bullet + .hd5,
.bnk-list.bullet + .hd6,
.hd5 + .bnk-list.bullet,
.hd6 + .bnk-list.bullet,
.useinfo-group .hd6 + .stxt,
.useinfo-group .stxt + .hd6,
.bnk-list.collapse + .bnk-row.min,
.displaybox .bnk-list.display + .bnk-list.bullet3,
.label-title + .input-radio-style,
.label-title + .input-processing,
.useinfo-group .stxt + .bnk-list.bullet,
.input-processing .bnk-inputset + .bnk-inputset,
.stxt + .bnk-list.bullet,
.graph-outer .bnk-title .hd3 + .stxt,
.graph-outer .stxt + .bnk-labelset,
.graph-outer.ty1 .bnk-title.icon-grid .bnk-title.inline + .stxt,
.bnk-title + .bnk-list.display.ty2,
.graph-outer .bnk-title + .stxt,
.transfer-manage-body .displaybox + .displaybox  { 
  margin-top: 8px;
}

.displaybox + .displaybox,
.bnk-card .card-header + .card-body,
.bnk-card .card-body + .card-footer,
.find-infoset .lv1 + .lv2,
.displaybox .bnk-list.display + .bnk-list.display,
.displaybox .bnk-list.bullet3 + .bnk-list.display,
.bnk-list + .bnk-btnset.collapse,
.banner-content + .displaybox.ty1,
.bnk-row.min + .bnk-row.min  {
  margin-top:12px
}

.tbview + .bnk-list.bullet3,
.info-wrapper + .bnk-row,
.info-wrapper .stxt + .simg,
.bnk-title .hd2 + .stxt,
.bnk-title .hd3 + .stxt,
.bnk-title .hd4 + .stxt,
.bnk-title + .simg.bnk-grid-top01,
.bnk-title + .simg.grid-top-ty1,
.simg + .bnk-list.bullet,
.simg + .bnk-list.bullet,
.simg + .bnk-title,
.bnk-row + .list-viewbox-wrapper,
.useinfo-group + .tbview,
.useinfo-group .hd4 + .hd5,
.useinfo-group .hd4 + .hd6,
.bnk-list.bullet3 + .hd5,
.bnk-list.bullet3 + .hd6,
.info-wrapper .bnk-title .simg + .hd3,
.bnk-card + .bnk-list.full.ty2,
.stxt + .bnk-labelset,
.banner-content + .banner-content,
.bnk-title + .bnk-list.bullet3,
.bnk-row + .bnk-row.min,
.bnk-list.inputfrm > li .bnk-inputset +  .bnk-btnset,
.bnk-title + .bnk-list.bullet,
.hd4 + .bnk-list.bullet,
.list-viewbox-wrapper + .tab-viewbox-wrapper,
.bnk-title + .bnk-list.line.row.ty1,
.bnk-list.line.row.ty1 + .bnk-btnset,
.bnk-card.ty1 .card-body .bnk-list.inputfrm + .bnk-btnset,
.bnk-card.ty1 .card-body .bnk-list.inputfrm > li + li,
.bnk-title + .survey-wrapper,
.displaybox + .bnk-list.inputfrm,
.bnk-title.h4 + .bnk-title.h5,
.bnk-title.h5 + .displaybox,
.bnk-title.h5 + .stxt,
.displaybox + .bnk-title.h5,
.displaybox + .bnk-list.bullet3,
.bnk-list.inputfrm > li .input-radio-style + .input-processing,
.bnk-list.inputfrm > li .input-processing + .input-radio-style,
.useinfo-group .bnk-list.bullet + .bnk-list.bullet3,
.useinfo-group  .hd4 + .stxt,
.useinfo-group  .stxt + .line-num,
.bnk-card .card-header + .card-body.bnk-grid-top01,
.card-connect-wrapper .bnk-card.ty1 + .hrzn,
.bnk-list.bullet + .bnk-list.line-num,
.bnk-list.line-num + .bnk-list.bullet,
.bnk-title + .bnk-list.line.row,
.bnk-title + .bnk-list.display.ty1,
.useinfo-group .hd5 + .stxt,
.useinfo-group .hd5 + .bnk-list.bullet,
.useinfo-group .hd4 + .tbview,
.bnk-title + .bnk-card,
.alarm-screen .alarm-screen-content .alarm-msgbox .alarm-msg + .hrzn.grid-custom01,
.bnk-row + .hrzn.grid-custom03 { margin-top: 16px; }


.bnk-list.line.row + .hrzn,
.hrzn + .card-infobox,
.bnk-card .info-wrapper .bnk-title .simg + .hd3,
.bnk-card.ty1 .bnk-row + .hrzn,
.bnk-row + .bnk-row.min2 {margin-top:20px}


.bnk-list.display.ty1 + .graph-wrap {margin-top: 16px;}
.find-infoset .bnk-btnset + .bnk-btnset {margin-top:6px}

.find-infoset .lv2 + .lv3 { margin-top: 120px}


.bnk-title + .bnk-list.display.ty1.custom01,
.banner-content .bnk-title + .simg,
.alarm-screen.ty1 .bnk-row .bnk-col-s-12 + .bnk-col-s-12,
.banner-content.ty1 .bnk-title + .simg.big,
.useinfo-group .hd5 + .line-num,
.bnk-row + .bnk-row.min3,
.bnk-list.line-num.bnk-grid-top05,
.bnk-row + .hrzn,
.hrzn + .bnk-row,
.transfer-bank-sheet .tablist + .tabcont { margin-top: 24px}

.bottom-btnset .bnk-btnset + .bnk-btnset { margin-top: 28px}


.bnk-row + .hrzn.grid-type02,
.hrzn.grid-type02 + .bnk-row,
.survey-wrapper + .banner-content,
.survey-wrapper + .bnk-title,
.bnk-title + .inputfrm,
.bnk-title + .bnk-row,
.bnk-row + .bnk-row,
.hrzn + .inputfrm,
.hrzn + .hd4,
.bnk-list.accordion + .hrzn,
.bnk-title + .bnk-list.accordion,
.loginform-wrapper + .bnk-btnset,
.bnk-title + .bnk-list.line,
.bnk-title + .displaybox,
.bnk-list.inputfrm + .hrzn,
.hrzn + .bnk-title,
.hd3 + .displaybox,
.hrzn + .useinfo-group,
.bnk-row.fixed .bnk-btnset + .bnk-btnset,
.bnk-row + .bnk-row.certi-list,
.bnk-row + .banner,
.bnk-row-right + .faceid-wrapper,
.bnk-list.bullet + .hd4,
.bnk-labelset + .simg,
.bnk-list.bullet + .simg,
.bnk-title + .simg,
.simg + .bnk-list.inputfrm,
.simg + .input-code,
.bnk-list.inputfrm + .bnk-row.bottom-grid,
.alarm-screen + .bnk-row,
.bnk-list.bullet3 + .bnk-btnset,
.bnk-card.ty1.line .card-header + .card-body,
.simg.ty1 + .hd3,
.useinfo-group .bnk-list.bullet3 + .hd5,
.useinfo-group .line-num + .hd5,
.useinfo-group .stxt + .hd5,
.alarm-screen .alarm-screen-content .alarm-msgbox .alarm-msg + .hrzn,
.bnk-row + .hrzn.bnk-grid-top02,
.hrzn.bnk-grid-top02 + .bnk-row,
.hrzn.grid-type01 + .bnk-row,
.hrzn.grid-custom01 + .bnk-row,
.hrzn.grid-custom03 + .bnk-row {margin-top: 32px}

.survey-wrapper + .bottom-btnset,
.displaybox + .bottom-btnset { margin-top: 36px}

.bnk-row + .bnk-row.lv-confirm { margin-top: 46px}

.bnk-row + .bnk-row.max1 { margin-top: 48px}

.bnk-row.fixed .bnk-btnset.txt + .bnk-btnset { margin-top: 14px}

.bnk-list + .bnk-btnset { margin-top: 95px}
.bnk-list + .find-infoset { margin-top: 22px}

.faceid-wrapper + .banner {margin-top:80px}

.alarm-screen.ty1 .hd3 + .alarm-img { margin-top: 100px}


.bnk-row + .bnk-row.transfer-extra-fields,
.bnk-row + .bnk-row.transfer-amount-summary { 
  margin-top:67px
}

.bnk-row.customer-center-nav .bnk-list.nav + .bnk-list.nav {
  margin-top: 32px;
}