@charset "utf-8";

.Wrap {
    width: 100%;
    height: var(--100vh);
    background: var(--c-gray-50);
    display: flex;
    flex-direction: column;
}
.whiteWrap {
    width: 100%;
    height: var(--100vh);
    background: var(--white);
    display: flex;
    flex-direction: column;
}
section {
    width: 100%;
    height: 100vh;
    flex: auto 1;
    overflow-y: auto;
}
.headerWrap {
    padding: 0 2rem;
}
.conWrap {
    height: 100%;
    overflow-x: hidden;
    position: relative;
}
.conWrap .inner {
    padding: 0 2.4rem 2rem 2.4rem;
}
.conTop {
    position: relative;
}
header {
    width: 100%;
    height: 6rem;
    background: var(--white);
    border-bottom: 1px solid var(--c-gray-200);
}
header.gray {
    background: none !important;
}
footer {
    width: 100%;
    height: 8.5rem;
    background: var(--white);
    position: relative;
    /* border-radius: 1.6rem 1.6rem 0 0; */
    box-shadow: var(--bx-s-footer);
}
/* 스크롤바 노출 */
.conWrap {
    z-index: 8;
}
.mainWrap {
    z-index: 0 !important;
}
/* 세로중앙정렬 conBox에 추가 conBtm은 삭제 */
.vCenter {
}
.vCenter .conTop {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.vCenter .conTop .inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 2.4rem;
    position: relative;
}
.vCenter .conTop .btnWrap {
    margin-top: auto;
}

.conTop.vCenter {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.conTop.vCenter .inner:first-of-type {
    flex: 0 0 auto;
}
.conTop.vCenter .inner:last-of-type {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.conTop.vCenter .inner:last-of-type .dataSchWrap {
    flex: 0 0 auto;
}
.conTop.vCenter .inner:last-of-type .noHistory {
    flex: 1 1 auto;
    min-height: 0;
}

.popTop.vCenter {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.popTop.vCenter .inner:first-of-type {
    flex: 0 0 auto;
}
.popTop.vCenter .inner:last-of-type {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.popTop.vCenter .inner:last-of-type .dataSchWrap {
    flex: 0 0 auto;
}
.popTop.vCenter .inner:last-of-type .noHistory {
    flex: 1 1 auto;
    min-height: 0;
}

/********************** 컨텐츠 ***************************/
.conBox {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.conBox .inner {
    padding: 2rem 2.4rem 2rem 2.4rem;
}
.conBox .inner.bgGray {
    background:var(--c-gray-100);
}
.conListBox {
    flex: 1;
    width: 100%;
    max-height: calc(var(--100vh) - 19rem);
    overflow-y: auto;
    padding-bottom: 3rem;
} /* 컨텐츠 스크롤영역 */
.fixeArea {
    padding-bottom: 9.7rem;
} /* 하단 고정버튼영역 제외한 스크롤영역 */

/******************** Header ************************/
.headerWrap {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.headerWrap h1 {
    font-size: var(--fs-m);
    font-weight: var(--fw-default);
    color: var(--gray-900);
}
.headerWrap .headerL,
.headerWrap .headerR {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
}
.headerWrap .headerR .gnbAlramBtn {
    width: 2.4rem;
    height: 2.3rem;
    background: url(../img/ico_gnb_alram.svg) no-repeat;
    background-size: 100% 100%;
    margin-left: 1.4rem;
    flex: 0 0 auto;
}
.headerWrap .headerR .gnbAsideBtn {
    width: 2.4rem;
    height: 2.3rem;
    background: url(../img/ico_gnb_aside.svg) no-repeat;
    background-size: 100% 100%;
    margin-left: 1.4rem;
    flex: 0 0 auto;
}
.headerWrap .headerR .gnbSetBtn {
    width: 2.8rem;
    height: 2.8rem;
    background: url(../img/ico_gnb_set.svg) no-repeat;
    background-size: 100% 100%;
    margin-left: 1.4rem;
    flex: 0 0 auto;
}
.headerWrap .headerC {
    position: absolute;
    width: calc(100% - 4rem);
    text-align: center;
    z-index: 1;
}
/******************** PopUp 삭제가능 ************************/
.popHead {
    width: 100%;
    height: 6rem;
    background: var(--white);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    border-bottom: 1px solid var(--c-gray-200);
}
.popHead h1 {
    font-size: var(--fs-m);
    font-weight: var(--fw-default);
    color: var(--gray-900);
}
.popHead > .headerL,
.popHead > .headerR {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
}
.popHead > .headerR > .popClose {
    width: 2.4rem;
    height: 2.4rem;
    background: url(../img/ico-close-black.svg) no-repeat center right;
    background-size: 1.8rem;
    flex: 0 0 auto;
}
.popHead > .headerC {
    position: absolute;
    width: calc(100% - 4rem);
    text-align: center;
    z-index: 1;
}
.popFooter {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 8.5rem;
    background: var(--white);
    border-radius: 2.4rem 2.4rem 0 0;
    box-shadow: 0 -1rem 15px 0 rgba(0, 16, 32, 0.05);
    z-index: 888;
}
.popFooterWrap {
    position: relative;
    background: var(--white);
    height: 8.5rem;
    width: 100%;
    line-height: 6rem;
    display: flex;
    border-radius: 2.4rem 2.4rem 0 0;
    padding-left: 0;
    transition: none;
    min-width: 32rem;
    border: 1px solid var(--gray-300);
    border-bottom: none;
}

/******************** Footer ************************/
.footerWrap {
    background: var(--white);
    height: 7rem;
    width: 100%;
    line-height: 6rem;
    display: flex;
    border-radius: 1.6rem 1.6rem 0 0;
    padding-left: 0;
    transition: none;
    min-width: 32rem;
    border: none;
}

.footerWrap .gnbNav {
    display: flex;
    width: 100%;
    position: relative;
    padding: 0 2.4rem;
    border-radius: 2.4rem 2.4rem 0 0;
    box-sizing: border-box;
}
.footerWrap .gnbNav li {
    flex: 1;
    justify-content: center;
    display: flex;
}
.footerWrap .gnbNav li a {
    color: var(--white);
    padding: 0;
    position: relative;
}
.footerWrap .gnbNav li button {
    color: var(--c-gray-600);
    padding: 0;
    position: relative;
    width: 100%;
    height: 100%;
}
.footerWrap .gnbNav li button:after {
    content: "";
    width: 2.4rem;
    height: 2.4rem;
    position: absolute;
    left: 50%;
    top: 1.2rem;
    transform: translateX(-50%);
    background-color: var(--white);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 2.4rem;
}
.footerWrap .gnbNav li.ico-01 button:after {
    background-image: url(../img/ico_gnb_home.svg);
}
.footerWrap .gnbNav li.ico-02 button:after {
    background-image: url(../img/ico_gnb_deposit.svg);
}
.footerWrap .gnbNav li.ico-03 button:after {
    background-image: url(../img/ico_gnb_loan.svg);
}
.footerWrap .gnbNav li.ico-04 button:after {
    background-image: url(../img/ico_gnb_menu.svg);
}
.footerWrap .gnbNav li.ico-01 button:active:after {
    background-image: url(../img/ico_gnb_home_on.svg);
}
.footerWrap .gnbNav li.ico-02 button:active:after {
    background-image: url(../img/ico_gnb_deposit_on.svg);
}
.footerWrap .gnbNav li.ico-03 button:active:after {
    background-image: url(../img/ico_gnb_loan_on.svg);
}
.footerWrap .gnbNav li.ico-04 button:active:after {
    background-image: url(../img/ico_gnb_menu_on.svg);
}
.footerWrap .gnbNav li.ico-01.on button:after {
    background-image: url(../img/ico_gnb_home_on.svg);
}
.footerWrap .gnbNav li.ico-02.on button:after {
    background-image: url(../img/ico_gnb_deposit_on.svg);
}
.footerWrap .gnbNav li.ico-03.on button:after {
    background-image: url(../img/ico_gnb_loan_on.svg);
}
.footerWrap .gnbNav li.ico-04.on button:after {
    background-image: url(../img/ico_gnb_menu_on.svg);
}
.footerWrap .gnbNav li button > span {
    position: absolute;
    display: block;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--fs-xs);
    font-weight: var(--fw-default);
    color: #666;
    letter-spacing: -0.4px;
    line-height: 150%;
}
.footerWrap .gnbNav li.on button > span,
.footerWrap .gnbNav li button:active > span {
    color: var(--cobalt-blue);
}

/******************** 메인탭 메뉴 Gnb ************************/
.gnbWrap {
    width: 100%;
    height: 100%;
}
.gnbHeaderWrap {
    height: 13.5rem;
    padding: 2rem;
}
.gnbHeaderWrap .btnWrap {
    min-height: 2.8rem;
}
.gnbHeaderWrap .badgeBtn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: 2.8rem;
    border-radius: 2rem;
    font-size: var(--fs-xs);
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
    border: 1px solid var(--c-gray-200);
    padding: 0 1rem;
}
.gnbHeaderWrap .gnbTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
}
.gnbHeaderWrap .gnbTop .seccion {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.gnbHeaderWrap .gnbTop .seccion .user {
    display: flex;
    align-items: center;
    font-size: var(--fs-ml);
    color: var(--c-gray-800);
    font-weight: var(--fw-bold);
}
.gnbHeaderWrap .gnbTop .seccion .user button {
    margin-left: 0.5rem;
}
.gnbHeaderWrap .gnbTop .seccion span {
    display: block;
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    font-weight: var(--fw-regular);
    margin-top: 0.5rem;
}
#gnbNavWrap {
    height: calc(100%-13.5rem);
    background: var(--c-gray-100);
    overflow-y: auto;
}
/* util 바로가기 */
.gnbTop .util {
    width: fit-content;
}
.gnbTop .util {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}
/* .gnbTop .util li {flex: 1 0 50%;} */
.gnbTop .util li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem 0;
    text-align: center;
    min-width: 4.8rem;
    font-size: var(--fs-xs);
    line-height: 1.2;
    font-weight: var(--fw-regular);
    padding-top: 3rem;
}
.gnbTop .util .item1 {
    background: url(../img/ico_bio_pw.svg) no-repeat top center / 2.4rem;
}
.gnbTop .util .item2 {
    background: url(../img/ico_customer.svg) no-repeat top center / 2.4rem;
}

/* Gnb Menu */
/* #gnav 네이티브적용아닐때 height: calc(100vh - 13.5rem); */
#gnav {
    height: 100vh;
    background: var(--c-gray-100);
    overflow-y: auto;
    position: relative;
    border-top: 0.8rem solid var(--c-gray-100);
}
#gnav:before {
    display: block;
    content: "";
    width: 0.1rem;
    height: 100%;
    background-color: #efefef;
    position: absolute;
    left: 14rem;
    top: 0;
    bottom: 0;
}

.gnavDep1 > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 11.3rem;
    height: 6rem;
    font-size: var(--fs-ms);
    font-weight: var(--fw-bold);
    color: var(--c-gray-800);
    padding: 0 2rem;
    box-sizing: border-box;
    white-space: nowrap;
    position: relative;
}
.gnavDep1 > li > a:focus-visible {
    outline-offset: -0.2rem;
}
.gnavDep2Wrap {
    display: none;
    position: absolute;
    left: 11.3rem;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: var(--white);
}
.gnavDep2 {
    padding: 1.5rem 2rem;
    background-color: var(--white);
}
.gnavDep2 > li > a {
    display: flex;
    align-items: center;
    padding: 1rem 0;
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    font-weight: var(--fw-bold);
    position: relative;
}
.gnavDep2 > li.isSub > a:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    right: 0;
    display: inline-block;
    width: 2.4rem;
    height: 2.4rem;
    background: url("../img/ico_arrow_up_gnb.svg") no-repeat center right /
        2.4rem;
    transition: transform 0.3s ease;
}
.gnavDep2 > li.isSub.active > a::before {
    transform: translateY(-50%) rotate(180deg);
}
.gnavDep3 {
    height: auto;
    padding-bottom: 1rem;
    overflow: hidden;
    transition-timing-function: ease-in-out !important;
}
.gnavDep3 > li > a {
    font-size: var(--fs-m);
    color: var(--c-gray-700);
    font-weight: var(--fw-regular);
    display: block;
    padding: 0.8rem 1.2rem;
    position: relative;
    line-height: 1.4;
}
.gnavDep3 > li > a:focus-visible {
    outline-offset: -0.2rem;
}
.gnavDep4 {
    padding: 0.4rem 0.8rem;
    display: none;
}
.gnavDep4 > li > a {
    font-size: 1.4rem;
    color: #737373;
    display: block;
    padding: 0.4rem 0.4rem 0.4rem 1rem;
}
.gnavDep2 > li.active {
    min-height: 5.7rem;
}
.gnavDep1 > li.active > a {
    font-weight: var(--fw-bold);
    color: var(--white);
    background-color: var(--primary);
    z-index: 2;
}
.gnavDep1 > li.active .gnavDep2Wrap {
    display: block;
    overflow-y: auto;
    max-height: calc(
        calc(100vh - calc(var(--page-scale) * 18rem)) / var(--page-scale)
    );
}
.gnavDep2 > li.active .gnavDep3 {
    display: block;
}
.gnavDep2 > li.active {
    border-top-width: 0;
}
.gnavDep2 > li.active > a {
}
.gnavDep3 > li.active .gnavDep4 {
    display: block;
}
.gnavDep2 > li.isSub.active > a:before {
}
.gnavDep3 > li.active > a {
}
/* utill 팝업메뉴 */
.gnbUt .conTop .inner {
    padding-top: 1.5rem;
}
.popNavList {
}
.popNavList li + li {
    margin-top: 1.2rem;
}
.popNavList li.tit {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    height: 3.5rem;
    font-size: var(--fs-ms);
    color: var(--c-gray-800);
    font-weight: var(--fw-bold);
    padding: 0.2rem 0 0 3.5rem;
    border-bottom: solid 1px var(--c-gray-200);
}
.popNavList li.decs {
    font-size: var(--fs-xs);
    color: var(--dark-blue-500);
    font-weight: var(--fw-default);
    padding: 0.5rem 0;
}
.popNavList li a {
    display: block;
    font-size: var(--fs-m);
    color: var(--c-gray-700);
    font-weight: var(--fw-regular);
    margin-left: 0.5rem;
    padding: 0.5rem 1rem;
}
.popNavList.custmr .ico1 {
    background: url("../img/ico_menu_cust_01.svg") no-repeat top left / 2.4rem;
}
.popNavList.custmr .ico2 {
    background: url("../img/ico_menu_cust_02.svg") no-repeat top left / 2.4rem;
}
.popNavList.custmr .ico3 {
    background: url("../img/ico_menu_cust_03.svg") no-repeat top left / 2.4rem;
}
.popNavList.custmr .ico4 {
    background: url("../img/ico_menu_cust_04.svg") no-repeat top left / 2.4rem;
}

.popNavList.certify .ico1 {
    background: url("../img/ico_menu_certify_01.svg") no-repeat top left /
        2.4rem;
}
.popNavList.certify .ico2 {
    background: url("../img/ico_menu_certify_02.svg") no-repeat top left /
        2.4rem;
}
.popNavList.certify .ico3 {
    background: url("../img/ico_menu_certify_03.svg") no-repeat top left /
        2.4rem;
}
.popNavList.certify .ico4 {
    background: url("../img/ico_menu_certify_04.svg") no-repeat top left /
        2.4rem;
}
.popNavList.certify .ico5 {
    background: url("../img/ico_menu_certify_05.svg") no-repeat top left /
        2.4rem;
}
.popNavList.certify .ico6 {
    background: url("../img/ico_menu_certify_06.svg") no-repeat top left /
        2.4rem;
}
.gnbUt .serviceCenter {padding:.9rem 0 2rem;}
/******************** 메인 ************************/
.welcome {
    display: flex;
    line-height: 2.8rem;
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    margin: 2rem 2.4rem;
}
.welcome a {
    position: relative;
    padding-right: 3rem;
}
.welcome a span {
    font-weight: bold;
}
.welcome a::after {
    content: "";
    position: absolute;
    display: inline-block;
    top: 0.2rem;
    width: 2.4rem;
    height: 2.4rem;
    background: url(../img/ico_mypro_detail.svg) no-repeat;
    background-size: 2.4rem;
    margin-left: 0.5rem;
}

.accoTopWrap {
}
.accoHideWrap {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
    margin: 0 2rem;
}
.accoHide {
    display: flex;
}
.accoHideWrap span {
    font-size: 1.5rem;
    font-weight: var(--fw-default);
    width: 4.5rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    color: #444;
}

.comSmBtn {
    width: 2.4rem;
    height: 2.4rem;
    background: url(../img/ico_comsmbtn.svg) no-repeat;
    background-size: 100% 100%;
    margin-left: 0.5rem;
    flex: 0 0 auto;
}

/* 뱅킹 탭메뉴 */
.bankTabMenu {
    position: relative;
    display: flex;
    margin: 0 2.4rem 2rem 2.4rem;
}
.bankTabMenu .tabBtn {
    color: var(--c-gray-300);
    font-size: var(--fs-m);
    font-weight: var(--fw-default);
    padding-right: 1.5rem;
}
.bankTabMenu .tabBtn.on {
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
}

.accoTopWrap .accMoneyWrap.noBalance p {
    font-size: 3.2rem;
}

.mainWrap .accoTopWrap .accMoneyWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    letter-spacing: -0.1rem;
}
.accoNumWrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    letter-spacing: 0.02rem;
    color: #0c3356;
}
.depositName {
    position: relative;
    display: flex;
    align-items: center;
    font-size: var(--fs-m);
    font-weight: var(--fw-bold);
    color: var(--gray-800);
}
.depositName .accFev {
    display: inline-block;
    width: 2.2rem;
    height: 2.2rem;
    background: url("../img/ico_myacco.svg") no-repeat bottom center / 1.6rem;
}
.transWrap .accMoney span.num {
    font-size: var(--fs-xxl);
    font-weight: var(--fw-bold);
    color: var(--gray-900);
}

p.accoNum,
span.accoNum {
    font-size: var(--fs-xs);
    color: var(--c-gray-600) !important;
    letter-spacing: -0.01rem;
    -webkit-touch-callout: none; /* iOS에서 자동 감지 비활성화 */
    -webkit-user-select: text; /* 텍스트 선택 가능하도록 설정 */
}
/* 나의계좌 메뉴 박스 */
.accMoneyWrap {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    position: relative;
    margin-top: 3.5rem;
    scroll-snap-type: x mandatory;
}
.accMoneyWrap p {
    line-height: var(--fs-xxxl);
}
.accMoneyWrap .accMoney {
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-xxxl);
    font-weight: var(--fw-bold);
    letter-spacing: -0.05rem;
    color: var(--gray-900);
    margin-right: 0.3rem;
    word-break: break-all;
}
.accMoneyWrap.noBalance .accMoney {
    font-size: var(--fs-xl) !important;
    color: var(--c-gray-300);
    font-weight: var(--fw-default);
}
.accMoneyWrap .accMoney ~ span {
    display: inline-block;
    font-size: var(--fs-l);
    font-weight: var(--fw-default);
}
/* 나의계좌 메뉴 */
.accoMenu {
    background-color: var(--dark-blue-600);
    border-radius: 2rem;
    margin: 0 2.4rem;
}
.accoMenu .accoBtnArea {
    text-align: center;
    padding: 0.6rem 0;
}
.accoMenu .accoBtnArea .accBtn {
    width: 100%;
    height: 2.8rem;
}
.accoMenu .accoBtnArea .accBtn.on {
    background: url(../img/ico_main_accbtn.svg) no-repeat center 0.3rem;
    background-size: 3.2rem;
    flex: 0 0 auto;
}
.accoMenu .accoBtnArea .accBtn.off {
    background: url(../img/ico_main_accbtn_off.svg) no-repeat center 0.3rem;
    background-size: 3.2rem;
    flex: 0 0 auto;
}
.accoMenu .accoMlist {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
}
.accoMenu .accoMlist ul {
    display: flex;
    justify-content: space-between;
}
.accoMenu .accoMlist li {
    width: calc(25% - 0);
    text-align: center;
}
.accoMenu .accoMlist li.type01 {
    background: url(../img/ico_main_acc01.svg) no-repeat top center;
    background-size: 4rem;
}
.accoMenu .accoMlist li.type02 {
    background: url(../img/ico_main_acc02.svg) no-repeat top center;
    background-size: 4rem;
}
.accoMenu .accoMlist li.type03 {
    background: url(../img/ico_main_acc03.svg) no-repeat top center;
    background-size: 4rem;
}
.accoMenu .accoMlist li.type04 {
    background: url(../img/ico_main_acc04.svg) no-repeat top center;
    background-size: 4rem;
}
.accoMenu .accoMlist li.open01 {
    background: url(../img/ico_main_acc01.svg) no-repeat top center;
    background-size: 4rem;
}
.accoMenu .accoMlist li.open02 {
    background: url(../img/ico_main_open02.svg) no-repeat top center;
    background-size: 4rem;
}
.accoMenu .accoMlist li.open03 {
    background: url(../img/ico_main_open03.svg) no-repeat top center;
    background-size: 4rem;
}
.accoMenu .accoMlist li.open04 {
    background: url(../img/ico_main_acc04.svg) no-repeat top center;
    background-size: 4rem;
}
.accoMenu .accoMlist li a {
    display: block;
}
.accoMenu .accoMlist li a span {
    display: block;
    color: var(--white);
    font-size: var(--fs-xs);
    line-height: 1.4;
    padding-top: 4rem;
}
/* 나의 계좌 */
.myAccountWrap {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2rem;
    min-height: 22.5rem;
    background: var(--white);
    border-radius: 2rem;
    box-shadow: var(--bx-s-default);
    overflow: hidden;
}
.myAccountWrap.accoOne {
    height: 20rem;
}
.myAccountWrap.accoDesc {
    height: 24rem;
}
.myAccountWrap.slick-dotted.slick-slider {
    overflow: hidden;
}
.myAccountWrap.open {
    height: fit-content;
    padding-bottom: 2rem;
}
.myAccountWrap.open + .myAccountWrap.open {
    margin-top: 2rem;
}
.myAccountWrap.open .myAccountBox {
    height: fit-content;
}
.myAccountWrap.open .myAccountBox .accMoneyWrap {
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
}

.myAccountBox {
    width: 100%;
    min-height: 19rem;
    padding: 2rem 2rem 0 2rem;
    scroll-snap-align: start;
}
.myAccountBox .decs {
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    font-weight: var(--fw-regular);
    text-align: center;
    padding: 0.5rem 0;
}
.myAccountBox .decs + .btnWrap {
    margin-top: 0.5rem;
}
.myAccountBox .btnWrap {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
}
.myAccountBox .accoNumWrap .btnCopy {
    margin: 0;
}
.myAccountBox .totalNum {
    font-size: var(--fs-ms);
    color: var(--c-gray-700);
}
/* 나의계좌 slick */
.myAccountWrap .slick-list {
    overflow: hidden;
}
/* .myAccountWrap .slick-track{padding-bottom: 1rem;} */
.myAccountWrap.not .slick-track {
    padding-bottom: 0.8rem;
}

/* 메인 slick 공통 */
.slick-dots {
    height: 0.8rem;
    bottom: 1.5rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.slick-dots li {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: var(--c-gray-300);
    margin: 0 0.3rem !important;
}
.slick-dots li.slick-active {
    width: 2.3rem;
    background: var(--c-gray-600);
    border-radius: 0.5rem;
}
.slick-dots li button {
    width: 100%;
    height: 100%;
    padding: 0;
}
.slick-dots li button:before {
    content: "";
    display: none;
}
.slick-dotted.slick-slider {
    margin-bottom: 0 !important;
}

/* 로그인 전 or 입출금계좌 없을 경우  */
.assistList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 2.4rem;
}
.assistList li {
    max-width: 50%;
    width: 50%;
    height: 12rem;
    margin-top: 2rem;
}
.assistList li:nth-child(1),
.assistList li:nth-child(2) {
    margin-top: 0;
}
.assistList li:nth-child(odd) {
    padding-right: 1rem;
}
.assistList li:nth-child(even) {
    padding-left: 1rem;
}
.assistList li a {
    position: relative;
    display: block;
    height: 100%;
    padding: 1rem;
    border-radius: 1.2rem;
    background-color: #fff;
    background-size: 3.2rem;
    background-repeat: no-repeat;
    background-position: right 1.5rem bottom 1.5rem;
    box-shadow: var(--bx-s-default);
}
.assistList li a:after {
    content: "";
    display: block;
    padding-bottom: 8.3rem;
}
.assistList li a .tit {
    position: absolute;
    top: 2rem;
    left: 2rem;
    font-size: var(--fs-m);
    width: 76%;
    line-height: 1.31;
    font-weight: var(--fw-default) !important;
}
.assistList li:nth-child(1) a {
    background-image: url(../img/ico_main_bnr1.svg);
}
.assistList li:nth-child(2) a {
    background-image: url(../img/ico_main_bnr2.svg);
}
.assistList li:nth-child(3) a {
    background-image: url(../img/ico_main_bnr3.svg);
}
.assistList li:nth-child(4) a {
    background-image: url(../img/ico_main_bnr4.svg);
}

.btn2 button {
    width: 100%;
}
.accoBtn {
    font-size: var(--fs-ml);
    line-height: var(--lnh-ml);
    color: var(--c-gray-700);
    background: var(--tertiary);
    padding: 1.3rem 1rem;
    border-radius: 1rem;
    border: solid 1px var(--c-gray-300);
}
.accoBtn > span {
    display: inline-block;
    font-size: var(--fs-m);
    color: var(--c-gray-700);
    line-height: 2rem;
    font-weight: var(--fw-default);
}
.accoBtn.htBtn {
    background: var(--white);
    border: solid 1px #c4cbd3;
}
.accoBtn.tfBtn {
    border-color: var(--tertiary) !important;
}

.accoBtmWrap {
    padding: 2rem 2.4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* 메인중간배너 :대출이어하기,내계좌찾기,상품찿기배너 */
.accBnrWrap {
    height: 13.5rem;
    position: relative;
    overflow: hidden;
    padding: 1rem 0 0 0;
}
.accBnrWrap .accoBnr {
    display: flex;
    gap: 3rem;
    overflow: visible;
}
.accBnrWrap .accoBnr a {
    display: block;
    position: relative;
    width: 100%;
    height: 10.5rem;
    border-radius: 1.5rem;
    box-shadow: var(--bx-s-default);
    padding: 2rem;
    margin: 1rem 2.4rem;
}
.accBnrWrap .accoBnr a.accoBnr01 {
    background: var(--bg-light-pink) url(../img/ico_main01.png) no-repeat center
        right 2rem / 6.8rem 6.8rem;
}
.accBnrWrap .accoBnr a.accoBnr02 {
    background: var(--tertiary) url(../img/ico_main03.png) no-repeat center
        right 2rem / 6.8rem;
}
.accBnrWrap .accoBnr a.accoBnr03 {
    background: var(--white) url(../img/ico_main02.png) no-repeat center right
        2rem / 6.8rem;
}
.accBnrWrap .accoBnr strong {
    display: block;
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    font-weight: var(--fw-bold);
    line-height: var(--lnh-xxxl);
}
.accBnrWrap .accoBnr span {
    display: block;
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    margin-top: 0.5rem;
}
/* 중간배너 slick */
.accBnrWrap .slick-list {
    overflow: visible;
}
.accBnrWrap .slick-dots {
    position: absolute;
    bottom: 2rem;
    height: 0.8rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: 0;
}
.accBnrWrap .slick-track {
    padding-bottom: 0;
}
.accBnrWrap.not .slick-track {
    padding-bottom: 0.8rem;
}
/* 서비스 바로가기 */
.favMenu {
    width: 100%;
}
.favMenu ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2.4rem 1.2rem;
}
.favMenu ul li {
    position: relative;
    flex: 1 0 25%;
}
.favMenu ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem 0;
    text-align: center;
    font-size: var(--fs-xs);
    line-height: 1.2;
    font-weight: var(--fw-regular);
}
.favMenu ul li a::before,
.favMenu ul li a::after {
    content: "";
    display: inline-block;
    width: 6rem;
    height: 6rem;
}
.favMenu ul li a::before {
    border-radius: 50%;
    background-color: var(--white);
    box-shadow: 0px 0.2rem 0.4rem rgba(15, 57, 97, 0.1);
}
.favMenu.on ul li a::before {
    transform: scale(1);
}
.favMenu ul li a::after {
    position: absolute;
    top: 0;
    background-repeat: no-repeat;
    background-size: 3.2rem;
    background-position: center;
}
.favMenu .item1 a::after {
    background-color: transparent;
    background-image: url(../img/ico_main_service1.svg);
}
.favMenu .item2 a::after {
    background-color: transparent;
    background-image: url(../img/ico_main_service2.svg);
}
.favMenu .item3 a::after {
    background-color: transparent;
    background-image: url(../img/ico_main_service3.svg);
}
.favMenu .item4 a::after {
    background-color: transparent;
    background-image: url(../img/ico_main_service4.svg);
}
.favMenu.deposit {
    margin-bottom: 2rem;
}
.favMenu.deposit .item1 a::after {
    background-color: transparent;
    background-image: url(../img/ico_main_service4.svg);
}
.favMenu.deposit .item2 a::after {
    background-color: transparent;
    background-image: url(../img/ico_transper.svg);
}
.favMenu.deposit .item3 a::after {
    background-color: transparent;
    background-image: url(../img/ico_main_service2.svg);
}
.favMenu.deposit .item4 a::after {
    background-color: transparent;
    background-image: url(../img/ico_main_calc.svg);
}
.favMenu.loan .item1 a::after {
    background-color: transparent;
    background-image: url(../img/ico_loan_service01.svg);
}
.favMenu.loan .item2 a::after {
    background-color: transparent;
    background-image: url(../img/ico_loan_service02.svg);
}
.favMenu.loan .item3 a::after {
    background-color: transparent;
    background-image: url(../img/ico_loan_service03.svg);
}
.favMenu.loan .item4 a::after {
    background-color: transparent;
    background-image: url(../img/ico_loan_service04.svg);
}
/* 나에게맞는상품 */
.prdWrap {
    width: 100%;
    padding-left: 2.4rem;
}
.prdListBox {
    overflow: hidden;
}
.prdListBox .prdList {
    padding: 1rem 0;
    scroll-snap-align: start;
}
.prdListBox .prdList a {
    position: relative;
    display: block;
    height: 11rem;
    overflow: hidden;
    background-color: var(--white);
    border-radius: 1.5rem;
    box-shadow: var(--bx-s-default);
    padding: 1.6rem;
    flex-shrink: 0;
    margin-right: 2rem;
}
.prdListBox .prdList a strong {
    display: block;
    width: 70%;
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
    line-height: 1.2;
}
.prdListBox .prdList a > span {
    display: block;
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    margin-top: 1rem;
}
.prdListBox .prdList a > span {
    width: 70%;
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    margin-top: 1rem;
}
.prdListBox .prdList a > .item {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1.6rem;
    width: 5.8rem;
    height: 5.8rem;
    border-radius: 2rem 1.6rem;
    background-color: var(--c-gray-100);
    margin: 0;
    background-position: center;
    background-size: 2.6rem;
    background-repeat: no-repeat;
}
.popListBox .accMoney {
    margin-right: 0;
}
/* 예금 */
.item.deposit {
    background-image: url("../img/ico_pro_deposit.svg");
} /* 정기예금 */
.item.depositR {
    background-image: url("../img/ico_pro_deposit_rate.svg");
} /* 회전식예금 */
.item.save {
    background-image: url("../img/ico_pro_save.svg");
} /* 정기적금 */
.item.saveFs {
    background-image: url("../img/ico_pro_save_freestyle.svg");
} /* 프리스타일적금 */
.item.saveF {
    background-image: url("../img/ico_pro_save_free.svg");
} /* 자유적립예금 */
.item.transper {
    background-image: url("../img/ico_pro_transper.svg");
} /* 보통예금 */
.item.transperE {
    background-image: url("../img/ico_pro_transper_e.svg");
} /* E-보통예금 */
.item.transperS {
    background-image: url("../img/ico_pro_transper_s.svg");
} /* E-보통예금 */
/* 대출 */
.item.credit {
    background-image: url("../img/ico_pro_credit.svg");
} /* 오리치론 */
.item.creditY {
    background-image: url("../img/ico_pro_credit_yes.svg");
} /* 오예스론 */
.item.mortgageH {
    background-image: url("../img/ico_pro_mortgage_happy.svg");
} /* 해피홈론 */
.item.mortgageO {
    background-image: url("../img/ico_pro_mortgage_obiz.svg");
} /* 오비즈론 */
.item.mortgageR {
    background-image: url("../img/ico_pro_mortgage_real.svg");
} /* 부동산담보 */
.item.mortgageS {
    background-image: url("../img/ico_pro_mortgage_security.svg");
} /* 예적금담보 */
.item.installment {
    background-image: url("../img/ico_pro_installment.svg");
} /* 핣부금융 */
.flexR {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.menuDot {
    width: 0.4rem;
    height: 2rem;
    background: url("../img/ico-view-menu.png") no-repeat;
    background-position: right center;
    background-size: 100% 100%;
    flex: 0 0 auto;
}

/********************** 이체 ***************************/
.ingTit {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
}
.ingTit span {
    display: block;
    margin-bottom: 1rem;
}
.ingTit span {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
}
.ingTit span.subTxt {
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
    padding-top: 0.5rem;
    margin-bottom: 0;
}
/* .labelEx{font-size: var(--fs-xs); color: #3b7bdb; font-weight: var(--fw-default); margin-top: 0.9rem;} */
.labelEx {
    display: block;
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    font-weight: var(--fw-default);
    margin-top: 0.5rem;
    text-align: right;
}
.labelEx1 {
    display: block;
    font-size: var(--fs-ms);
    color: var(--c-gray-700);
    font-weight: var(--fw-default);
}
.labelEx2 {
    display: block;
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    font-weight: var(--fw-default);
    line-height: 1.4;
    margin-bottom: 0.5rem;
    text-align: right;
}
.labelEx2 span.msg {
    color: var(--c-gray-600);
}
p.valueMsg ~ .labelEx {
    margin-top: 1.8rem;
}

.accoTitBox {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 12.5rem;
}
.accoTitBox span {
    display: flex;
    justify-content: center;
}
.accoTitBox .amount {
    font-size: var(--fs-ms);
    color: var(--c-gray-600);
    font-weight: var(--fw-default);
}
.accoTitBox .amount .blue {
    color: var(--cobalt-blue);
    margin-left: 0.5rem;
}
.accoTitBox .conTitC {
    padding: 1rem 0;
}
.accoTitBox .account {
    font-size: var(--fs-xs);
    color: var(--c-gray-700);
}

.transForm {
    padding: 0 0 1rem;
}
.transForm li {
    display: block;
}
.transForm li + li {
    margin-top: 1.5rem;
}

/* 이체내역 버튼 */
.transBtnWrap {
    display: flex;
    gap: 1rem;
    width: calc(100%-4rem);
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--c-gray-300);
    padding: 1.5rem 0;
    margin: 0 2.5rem;
}
.transBtnWrap button {
    width: 100%;
    font-size: var(--fs-xs);
    color: var(--c-gray-800);
    text-align: center;
}
.transBtnWrap span.divider {
    font-size: var(--fs-xs);
    color: var(--gray-400);
}
/* 이체내역최근내역 */
.accRecent {
    min-height: 20rem;
}
.accListBox {
    width: 100%;
    padding: 1.5rem 0;
    overflow-y: auto;
}
.accoList {
    width: 100%;
}
.accoList li + li {
    margin-top: 0.5rem;
}
.accoList li a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: 0 0 auto;
    width: 100%;
    padding: 1.5rem;
}
.accoList li a.on {
    background: var(--c-gray-100);
    border-radius: 1rem;
}
.accoList li a .icoBank {
    display: flex;
    position: relative;
    width: 3.8rem;
    height: 3.8rem;
    border-radius: 1.6rem;
    background: var(--gray-200);
    margin-left: 0.5rem;
    margin-right: 1.5rem;
}
.accoList li a .icoBank image {
    width: 3.8rem;
    height: 3.8rem;
}
.accoList li a .accoBank {
    flex: 1;
    width: calc(100%-6rem);
}
.accoList li .text-r {
    margin-top: 2rem;
}
.accoList li:last-child {
    border-bottom: 0;
}
.accoList .accMoney {
    font-size: 2.6rem;
    font-weight: var(--fw-default);
    color: #171717;
    padding-top: 1rem;
}
.accoList .accMoney span {
    font-size: 2.6rem;
    font-weight: bold;
    color: #1d1d1d;
}
.accoList .accoNum {
    font-size: 1.6rem;
    color: #777;
    margin-top: 1rem;
}
.accoList .depositName {
    font-size: 2rem;
    font-weight: var(--fw-default);
    display: flex;
    align-items: center;
    color: #171717;
}
.accoList li a p.accoName {
    font-size: var(--fs-m);
    display: flex;
    align-self: center;
}
.accoList li a p.accoNum {
    font-size: var(--fs-ms);
    color: var(--c-gray-700) !important;
    font-weight: var(--fw-regular);
    display: flex;
    align-self: center;
    margin-top: 0.3rem;
}
.accoList.status li {
    position: relative;
}
.accoList.status li .statusBox {
    position: absolute;
    width: fit-content;
    height: fit-content;
    top: 50%;
    transform: translateY(-50%);
    right: 1.5rem;
}
.accoList.status li .statusBox button {
    width: fit-content;
}

.debitAccoList {
}
.debitAccoList li {
}
.debitAccoList li.on {
    border-color: var(--cobalt-blue);
}
.debitAccoList li .debitAccoBox {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 2rem 0;
    border-top: 1px solid var(--c-gray-200);
}
.debitAccoList li .debitAccoBox > span {
    display: block;
}
.debitAccoList li .tit {
    font-size: var(--fs-m);
    font-weight: var(--fw-default);
}
.debitAccoList li .txt {
    font-size: var(--fs-xs);
    color: var(--c-gray-700);
    font-weight: var(--fw-regular);
    margin-top: 0.3rem;
}
.debitAccoList li .num {
    align-self: flex-end;
    font-size: var(--fs-ml);
    font-weight: var(--fw-bold);
    margin-top: 0.5rem;
    text-align: right;
}
.debitAccoList li .accoDel {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    align-items: center;
    width: 2.4rem;
    height: 2.4rem;
    background: url(../img/ico_del.svg) no-repeat center / 1.8rem;
}

/******************** 메인탭 ************************/
.proListWrap {
    position: relative;
}
/* 예금메인 */
.proBannerWrap {
    position: relative;
}
.proBannerSlider {
    padding-bottom: 2rem;
}
.proBannerSlider .slick-dots {
    position: absolute;
    bottom: 0; /* 부모인 .proBannerWrap 기준 아래 */
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex !important;
    justify-content: center;
}
.proBanner {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 16rem;
    background: var(--c-gray-200);
    border-radius: 1.6rem;
    padding: 2.4rem;
}
.proBanner a {
    display: block;
}
.proBanner span {
    display: block;
    color: var(--c-gray-800);
}
.proBanner .stit {
    font-size: var(--fs-m);
    font-weight: var(--fw-regular);
}
.proBanner .tit {
    font-size: var(--fs-ml);
    font-weight: var(--fw-bold);
}
.proBanner .btn {
    width: fit-content;
    height: 3.6rem;
    border-radius: 0.8rem;
    padding: 0.8rem 1.5rem;
    margin-top: 2.5rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    font-weight: var(--fw-default);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.proBanner.deposit01 {
    background: #e7e2fe url("../img/mn_pro_deposit01.png") no-repeat center
        right 2.4rem /6rem 9.5rem;
}
.proBanner.deposit01 .btn {
    background-color: #cfc5fd;
}
.proBanner.deposit02 {
    background: #e2eeff url("../img/mn_pro_deposit02.png") no-repeat center
        right 2.4rem /9.9rem 5.9rem;
}
.proBanner.deposit02 .btn {
    background-color: #c5ddff;
}
.proBanner.deposit03 {
    background: #d6f4eb url("../img/mn_pro_deposit03.png") no-repeat center
        right 2.4rem /8.4rem 5.3rem;
}
.proBanner.deposit03 .btn {
    background-color: #ade9d7;
}
.proBannerWrap .slick-dots {
    justify-content: flex-end;
    position: absolute;
    bottom: 3.5rem;
    padding-right: 2.4rem;
}
.proBannerWrap .slick-dots li {
    background-color: var(--white);
}
.proBannerWrap .slick-dots li.slick-active {
    background-color: var(--c-gray-600);
}
/* 대출메인 */
.proBanner.loan01 {
    background: #e2eeff url("../img/mn_pro_loan01.png") no-repeat center right
        2.4rem /7rem 7rem;
}
.proBanner.loan01 .btn {
    background-color: #c5ddff;
}
.proBanner.loan02 {
    background: #ffe7da url("../img/mn_pro_loan02.svg") no-repeat center right
        1.3rem /8.4rem 9.9rem;
}
.proBanner.loan02 .btn {
    background-color: #ffcfb5;
}
.proBanner.loan03 {
    background: #e6ecf6 url("../img/mn_pro_loan03.svg") no-repeat center right
        2.4rem /9rem 8rem;
}
.proBanner.loan03 .btn {
    background-color: #cdd9ed;
}
/******************** 예적금 상품 ************************/
/* 예적금상품리스트 */
.proListBox {
    position: relative;
    padding: 1rem 0;
}
.proListBox h8 {
    display: block;
    font-size: var(--fs-ml) !important;
    font-weight: var(--fw-bold) !important;
    padding: 1.5rem 0 1rem;
}
.proList li a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: 0 0 auto;
    padding: 1.5rem 0;
}
.proList li a:active {
    background-color: var(--c-gray-100);
    border-radius: 1rem;
}
.proList li a .icoPro {
    flex: 0 0 auto;
    display: flex;
    position: relative;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 1.6rem;
    margin-left: 0.5rem;
    margin-right: 1.5rem;
    background-color: var(--c-gray-100);
    background-position: center;
    background-size: 2.6rem;
    background-repeat: no-repeat;
}
.proList li a .text-l {
    flex: 1 1 auto;
    min-width: 0;
}
/* 예금 */
.proList li a .icoPro.deposit {
    background-image: url("../img/ico_pro_deposit.svg");
} /* 정기예금 */
.proList li a .icoPro.depositR {
    background-image: url("../img/ico_pro_deposit_rate.svg");
} /* 회전식예금 */
.proList li a .icoPro.save {
    background-image: url("../img/ico_pro_save.svg");
} /* 정기적금 */
.proList li a .icoPro.saveFs {
    background-image: url("../img/ico_pro_save_freestyle.svg");
} /* 프리스타일적금 */
.proList li a .icoPro.saveF {
    background-image: url("../img/ico_pro_save_free.svg");
} /* 자유적립예금 */
.proList li a .icoPro.transper {
    background-image: url("../img/ico_pro_transper.svg");
} /* 보통예금 */
.proList li a .icoPro.transperE {
    background-image: url("../img/ico_pro_transper_e.svg");
} /* E-보통예금 */
.proList li a .icoPro.transperS {
    background-image: url("../img/ico_pro_transper_s.svg");
} /* S-보통예금 */
/* 대출 */
.proList li a .icoPro.credit {
    background-image: url("../img/ico_pro_credit.svg");
} /* 오리치론 */
.proList li a .icoPro.creditY {
    background-image: url("../img/ico_pro_credit_yes.svg");
} /* 오예스론 */
.proList li a .icoPro.mortgageH {
    background-image: url("../img/ico_pro_mortgage_happy.svg");
} /* 해피홈론 */
.proList li a .icoPro.mortgageO {
    background-image: url("../img/ico_pro_mortgage_obiz.svg");
} /* 오비즈론 */
.proList li a .icoPro.mortgageR {
    background-image: url("../img/ico_pro_mortgage_real.svg");
} /* 부동산담보 */
.proList li a .icoPro.mortgageS {
    background-image: url("../img/ico_pro_mortgage_security.svg");
} /* 예적금담보 */
.proList li a .icoPro.installment {
    background-image: url("../img/ico_pro_installment.svg");
} /* 핣부금융 */
.proList .depositName {
    font-size: 2rem;
    font-weight: var(--fw-default);
    display: flex;
    align-items: center;
    color: #171717;
}
.proList li a p.accoName {
    display: flex;
    align-items: center;
    font-size: var(--fs-m);
    font-weight: var(--fw-default);
    display: flex;
    align-self: center;
}
/* iOS WebView 전용 스타일 덮어쓰기 */
.ios-webview .proList li a p.accoName {
    font-weight: 600;
}
.proList li a p.accoTxt {
    font-size: var(--fs-ms);
    font-weight: var(--fw-regular);
    color: var(--c-gray-700);
    display: flex;
    align-self: center;
    margin-top: 0.5rem;
}
/* 추천상품 */
.proList.best {
    display: flex;
    position: relative;
    align-items: center;
    height: 9.5rem;
    background: var(--alice-blue);
    border-radius: 1rem;
    padding: 2rem;
    margin-top: 2rem;
}
.proList.best .badge {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: auto;
    border-radius: 2rem;
    background: var(--cobalt-blue);
    color: var(--white);
    font-size: var(--fs-xs);
    padding: 0.5rem 1.5rem;
}
/* 상품소개 */
.productWrap {
}
.proTitBox {
    margin-bottom: 4rem;
}
.proTitBox .subTit {
    display: block;
    margin-bottom: 0.8rem;
    font-size:1.6rem;
    color: var(--c-gray-700);
    font-weight:500;
    line-height: 1.9rem;
}
.proTitBox .mainTit {
    display: block;
    font-size:2.6rem;
    color: var(--c-gray-800);
    font-weight:700;
    line-height:3.6rem;
}
.proTitBox.noRate {
    margin-bottom: 2rem;
}
.productInfo.noRate > .infoItem {
    margin-top: 0;
}
.productInfo {
    margin-bottom:2rem;
}
.productInfo .rateInfo  {
    display:flex;
    flex-direction:column;
    gap:.4rem;
    margin-bottom:4rem;
}
.productInfo .rateInfo .label {
    font-size:1.6rem;
    color: var(--c-gray-600);
    font-weight:500;
    line-height:1.9rem;
}
.productInfo .rateInfo .rate {
    font-size:2.8rem;
    color: var(--cobalt-blue);
    font-weight:700;
    line-height:3.9rem;
}
.productInfo > .infoItem {
    margin-bottom: 4rem;
}
.productInfo > .infoItem > li {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}
.productInfo > .infoItem > li + li {
    margin-top: 2rem;
}
.productInfo > .infoItem > li > span {
    display: flex;
    min-height: 2.5rem;
    font-size:1.8rem;
    line-height:2.5rem;
    font-weight:500;
}
.productInfo > .infoItem > li > .label {
    flex-shrink:0;
    width: 11.1rem;
    padding-left:2.8rem;
    color: var(--c-gray-700);
}
.productInfo > .infoItem > li > .value {
    color: var(--c-gray-900);
}
.productInfo > .infoItem > li > .label.amount {
    display: block;
    background: url(../img/ico_pro_deposit.svg) no-repeat center left / 2.2rem;
}
.productInfo > .infoItem > li > .label.cal {
    display: block;
    background: url(../img/ico_cal.svg) no-repeat center left / 2.2rem;
}
.productInfo > .infoItem > li > .label.loan {
    display: block;
    background: url(../img/ico_loan.svg) no-repeat center left / 2.2rem;
}
.productInfo > .infoItem > li > .label.rate {
    display: block;
    background: url(../img/ico_rate.svg) no-repeat center left / 2.2rem;
}

.infoList {
}
.infoList dt:first-child {
    margin-top: 0;
}
.infoList dt {
    display: block;
    font-size:var(--fs-ml);
    color: var(--c-gray-900);
    font-weight:var(--fw-bold);
    margin:3rem 0 .8rem;
    line-height: 1.4;
}
.infoList dd {
    display: block;
    font-size: var(--fs-m);
    color: var(--c-gray-700);
    font-weight: var(--fw-default);
    line-height: 1.4;
}
.infoList dd .listType {
    margin:.8rem 0;
}

.kdic {
    background: url(../img/logo_KDIC2.png) no-repeat top center /9.9rem 6.4rem;
    padding-top: 8rem;
}
.kdic span {
    display: block;
    line-height: 1.4;
}
.kdic .law {
    font-size: var(--fs-xs);
    color: var(--c-gray-800);
}
.kdic .regno {
    position: relative;
    padding-left:1rem;
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    font-weight: var(--fw-regular);
    margin-top: 1.5rem;
}
.kdic .regno:before {content:''; position:absolute; top:.8rem; left:0; width:.3rem; height:.3rem; background-color:var(--primary); border-radius:50%;}
.kdic.type02 {min-height:4rem; margin-bottom:2rem; padding:0 0 0 7.2rem; background-size:6.2rem 4rem; background-position:left top;}
.kdic.type02 .law {font-size: var(--fs-xxs); font-weight: var(--fw-regular);}
.kdic.nobg {background: none; margin-top:3rem; padding-top: 0;}
.kdic.nobg .regno {margin:0; padding:0; color:var(--c-gray-700);}
.kdic.nobg .regno:before {display: none;}
.kdic.nobg2 {background: none; padding-top: 0;}
.kdic.nobg2 .regno {margin-top:0;}

/******************** 거래내역조회 ************************/
.transWrap {
    display: flex;
    flex-direction: column;
}

/* 전체계좌 */
.accoWrap {
    display: flex;
    flex-direction: column;
}
.allAccoWrap {
    width: 100%;
}
.allAccoWrap .myAccoType:first-child .myAccoInfo {
    border-top: none;
}
.myAccoType .myAccoInfo {
    border-top: 1px solid var(--c-gray-200);
}
.myAccoType .myAccoBox:last-child {
    margin-bottom: 2rem;
}
.myAccoInfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 6rem;
}
.myAccoInfo span {
    display: inline-block;
}
.myAccoInfo .type {
    color: var(--c-gray-900);
    font-size: var(--fs-ms);
    font-weight: var(--fw-bold);
}
.myAccoInfo .type .num {
    color: var(--cobalt-blue);
    margin-left: 0.5rem;
}
.myAccoInfo .num {
    color: var(--c-gray-700);
    font-weight: var(--fw-default);
    margin-left: 0.5rem;
}
.myAccoInfo .amount {
    color: var(--c-gray-800);
    font-size: var(--fs-ms);
    font-weight: var(--fw-default);
}
.myAccoInfo.brd {
    border-top: 1px solid var(--c-gray-200);
    margin-top: 2rem;
}
.myAccoInfo.brd + .myAccoInfo.brd {
    margin-top: 0;
}
/* 확인할 계좌 */
.myAccoBox {
    position: relative;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
    padding: 0;
    border-bottom: none;
}
.myAccoBox + .myAccoBox {
    margin-top: 2rem;
}
.myAccoBox.brd {
    border: 1px solid var(--c-gray-200);
    border-radius: 1.2rem;
    padding: 1.6rem 1.6rem 0 1.6rem;
}
.myAccoBox.mnbrd {
    border: 1px solid var(--c-gray-200);
    border-radius: 1.2rem;
    padding: 1.6rem;
}
.myAccoBox.brdBox {
    border: 1px solid var(--c-gray-200);
    border-radius: 1.2rem;
    padding: 2rem;
}
.myAccoBox .depositName {
    display: flex;
    align-items: center;
    font-size: var(--fs-m);
    font-weight: var(--fw-bold);
    color: var(--c-gray-900);
}
.myAccoBox .accoNumWrap {
    display: flex;
    gap: 0;
    margin-top: 0.5rem;
}
.myAccoBox .accoNum {
    font-size: var(--fs-xs);
    font-weight: var(--fw-default);
    color: var(--c-gray-600) !important;
}
.myAccoBox .accMoney {
    font-size: var(--fs-xxl);
    font-weight: var(--fw-bold);
    color: var(--gray-900);
    margin-top: 2.5rem;
}
.myAccoBox .accFev {
    display: inline-block;
    width: 2.2rem;
    height: 2.2rem;
    background: url("../img/ico_myacco.svg") no-repeat center center / 1.6rem;
}
.myAccoBox .accMoney span {
    display: block;
}
.myAccoBox .accMoney span.num {
    font-size: 2.8rem;
    font-weight: var(--fw-bold);
    color: var(--gray-900);
}
.myAccoBox .accMoney span.decs {
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    line-height: 1.4;
    font-weight: var(--fw-default);
    letter-spacing: 0;
    padding-top: 2rem;
}
.myAccoBox .accMoney span.krw {
    font-size: var(--fs-l);
    color: var(--c-gray-700);
    font-weight: var(--fw-default);
}
.myAccoBox .btnWrap {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
}
.myAccoBox .btnfixWrap {
    position: relative;
    width: 100%;
    height: 5rem;
    border-top: 1px solid var(--c-gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}
.myAccoBox .btnfixWrap button {
    width: 100%;
    height: 3rem;
    font-size: var(--fs-xs);
    color: var(--c-gray-800);
    text-align: center;
}
.myAccoBox .btnfixWrap span.divider {
    font-size: var(--fs-xs);
    color: var(--c-gray-200);
}
.myAccoBox .btnfixWrap button.blue {
    color: var(--cobalt-blue);
}

/* 거래기간 검색 */
.dateSelBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dateSelBox .count {
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
}
.dateSelBox .btnBox {
    width: 8rem;
}
.dataSchWrap {
}
.dataSchWrap ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
}
.dataSchWrap li {
    display: flex;
    align-items: center;
}
.dataSchWrap li a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    font-weight: var(--fw-regular);
    padding: 0.5rem;
}
.dataSchWrap li a.date {
    width: 3rem;
    height: 2.4rem;
    background: url("../img/ico_date_sch.svg") no-repeat right 0.3rem center;
    background-size: 1.8rem auto;
}
.dataSchWrap li:nth-child(1)::after,
.dataSchWrap li:nth-child(2)::after {
    content: "";
    display: inline-block;
    width: 0.3rem;
    height: 0.3rem;
    margin-left: 0.5rem;
    border-radius: 50%;
    background-color: var(--c-gray-600);
}
.dataSchWrap li.noAfter::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.5rem;
    border-radius: 0;
    background-color: transparent;
}
/* 팝업 기간 조회 설정  */
.datePickerWrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 1rem 0;
}
.datePickerWrap > span {
    display: block;
    width: 2.4rem;
    height: 5.6rem;
    line-height: 5.6rem;
    flex: 0 0 auto;
    font-size: 2rem;
    color: #777;
    font-weight: var(--fw-default);
    text-align: center;
}
.datePickerWrap > div {
    width: 100%;
}
.datePickerWrap input {
    height: 5.6rem;
    text-align: center;
}
.datePickerWrap.not {
    display: none;
}

/* 거래내역리스트 */
.historyWrap {
    background: var(--white);
    flex: 1 1 auto;
}
.historyWrap.not {
    background: #f4f5f6;
}
.historyList {
    width: 100%;
}
.historyList > li {
    border-bottom: 1px solid var(--c-gray-200);
    padding: 2rem 0;
}
.historyList > li a {
    display: block;
}
.historyList > li:last-child {
    border-bottom: 0;
}

.historyBox {
}
.historyBox li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 3rem;
    border-bottom: none;
}
.historyBox li.singleItemR {
    justify-content: flex-start;
    align-items: flex-start;
}
.historyBox li.singleItemC {
    justify-content: center; /* 중앙 정렬 */
}
.historyBox li.itemT {
    align-items: flex-start; /* 상단 정렬 */
}
.historyBox li span.detailLeft {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: flex-start;
    text-align: left;
}
.historyBox li span.detailRight {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: flex-end;
    text-align: right;
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
}
.historyBox li span.detailRight p.itemTxt2,
.historyBox li span.detailRight p.itemTxt3 {
    letter-spacing: -0.1rem;
}
.historyBox li span.detailRight p.itemTxt2 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}
.historyBox .itemTxt1 {
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    font-weight: var(--fw-default);
}
.historyBox .itemTxt2 {
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    font-weight: var(--fw-bold);
    margin-bottom: 0.5rem;
}
.historyBox .detailRight .itemTxt2 {
    font-weight: var(--fw-regular);
}
.historyBox .itemTxt2 .type {
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    font-weight: var(--fw-regular);
}
.historyBox .itemTxt3 {
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    font-weight: var(--fw-regular);
    line-height: 1.4;
}
.historyBox li span p {
    display: block;
}
.historyList > li > .historyBox.ftNomal .itemTxt2 {
    font-weight: var(--fw-default);
}

/* 출금/입금 컬러 */
.feeRed {
    color: var(--negative) !important;
    font-weight: var(--fw-default);
}
.feeBlue {
    color: var(--cobalt-blue) !important;
    font-weight: var(--fw-default);
}

/* 이체대기 건수/금액 */
.totalWrap {
    background: var(--white);
    flex: 1 1 auto;
}
.totalList {
    width: 100%;
    padding: 0.5rem 0;
}
.totalList li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--fs-ms);
    font-weight: var(--fw-regular);
    padding: 0.5rem 0;
}
/* .totalList li + li {margin-top: 1rem;} */
.totalList li .detailLeft {
    color: var(--c-gray-600);
}
.totalList li .detailRight {
    color: var(--c-gray-800);
}
.totalList li .num {
    font-weight: var(--fw-default);
}
.totalList .totalBox {
    height: 3.5rem;
}
.totalList .totalBox .totalTxt {
    color: var(--c-gray-600);
    font-weight: var(--fw-regular);
}
.totalList .totalBox .totalNum {
    font-size: var(--fs-m);
    color: var(--cobalt-blue);
    font-weight: var(--fw-default);
    letter-spacing: -0.1rem;
}
.totalList.bgGray {
    background: var(--c-gray-100);
    border-radius: 1rem;
}
.totalList.bgGray li {
    padding: 1rem 2rem;
}
/* 팝업 datepicker 버튼영역 */
.selTimeWrap {
    padding: 1rem 0;
}
.selTimeWrap.btnWrap {
    display: flex;
    gap: 1rem;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
.selTimeWrap.btnWrap .sBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8rem;
}
/*  */
.resultBox {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    border: 1px solid var(--c-gray-200);
    padding: 2rem;
    margin: 0 0 1.5rem;
}
.resultBox .resultTxt {
    display: inline-flex;
    align-items: center;
    position: relative;
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    font-weight: var(--fw-bold);
}
.resultBox em {
    color: var(--cobalt-blue);
    font-weight: var(--fw-bold);
    margin-left: 0.5rem;
}

.resultNum {
    display: flex;
    justify-content: space-between;
    min-height: 3rem;
}
.resultNum span.txt {
    font-size: var(--fs-xs);
    color: var(--c-gray-700);
}
.resultNum span.num {
    font-size: var(--fs-xs);
    color: var(--cobalt-blue);
}

/******************** 예금 가입( S보통 ) ************************/
/* 실명인증 */
.identityWrap {
}
.identityDetail {
    margin-top: 1rem;
}
.identityDetail li {
    line-height: 1.2;
    padding-bottom: 2rem;
}
.identityDetail li.lineTit {
    position: relative;
    display: inline-block;
    padding: 1rem 0.7rem 0.7rem !important;
    margin-bottom: 1.3rem;
}
.identityDetail li.lineTit::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2rem;
    background: var(--tertiary);
}
.identityDetail li.lineTit .text {
    position: relative;
    z-index: 1;
    font-size: var(--fs-m);
    font-weight: var(--fw-bold);
    line-height: 1.2;
}
.identityDetail li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}
.identityStep {
    margin: 6rem 0 2rem;
}
/* 사진촬영 */
.ScanIdBox {
    width: 100%;
    height: 15rem;
    margin-bottom: 3rem;
    background: url(../img/img_userid.svg) no-repeat top center/contain;
}
.drvlF {
    flex: none !important;
    width: 8rem !important;
}
/* 추가인증 */
.verifyWrap {
    padding: 2rem;
}
.verifyStep {
    border-top: 0.6rem solid var(--gray-000);
    padding: 3rem 2rem 2rem;
}

/* 약관동의 */
.termsList {
    border: solid 1px var(--c-gray-200);
    border-radius: 1rem;
    padding: 1.6rem;
    margin-bottom:2rem;
}
.termsList > li {
    position: relative;
    display: flex;
    align-items: center;
}
.termsList > li + li {
    margin-top:1.6rem;
}
.termsList > .allChk {
    margin-bottom:1.6rem;
    padding:0 3.5rem 2rem 0;
    border-bottom: solid 1px var(--c-gray-200);
}
.termsList:has(.dpNone) > .allChk {
    margin-bottom:0;
    padding-bottom:0;
    border-bottom:0;
}
.termsList > li > input {
    background: transparent;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -webkit-appearance: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}
.termsList label:before {
    content: "";
    position: absolute;
    left: 0;
    width: 2.5rem;
    height: 2.5rem;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center;
}
.termsList.single > li {
    margin-bottom:0;
    padding-bottom:0;
    border-bottom: none !important;
}
.termsList.nobrd {
    border: none !important;
}
.termsList.nobrd > li {
    padding: 0 !important;
}
.termsList.nobrd > li > label > span {
    font-size: var(--fs-ms);
    font-weight: var(--fw-default);
}
.termsList.row {
    display: flex;
    gap: 0.9rem;
    align-items: center;
    justify-content: space-around;
    border: none !important;
}
.termsList.row .allChk > label {
    font-size: var(--fs-xs) !important;
    padding-top: 0.5rem;
}
.termsList.row > li + li {
    padding-top: 0 !important;
}
.termsList.row > li:first-child {
    border-bottom: none !important;
}
.termsList.item3 {
    justify-content: flex-start !important;
}
.termsList.item3 > li {
    display: flex;
    align-items: center;
    width: calc((100% - 1.8rem) / 3);
}

/* 체크박스 앞 아이콘 설정 (기본) */
.allChk {
    position: relative;
    font-size: var(--fs-m);
    font-weight: var(--fw-bold);
    line-height: 1.4;
}
.allChk > input[type="checkbox"] {
}
.allChk > input[type="checkbox"] + label {
    position: relative;
    display: inline-block;
    padding: 0px 0px 0 3.5rem;
    font-size: var(--fs-m);
    font-weight: var(--fw-bold);
    line-height: 1.4;
}
.allChk > input[type="checkbox"] + label:before {
    background: url("../img/ch_unchecked.svg");
    top: 0;
}
.allChk > input[type="checkbox"]:checked + label:before {
    background: url("../img/ch_checked.svg");
}
.allChk > .termBoxBtn {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 2.5rem;
    height: 2.5rem;
    background-size: contain;
}
.allChk > .termBoxBtn.open {
    background: url("../img/ico_arrow_close.svg") no-repeat center right;
}
.allChk > .termBoxBtn.close {
    background: url("../img/ico_arrow_open.svg") no-repeat center right;
}

/* 체크된 상태 이미지 및 색상 */
.checkItem {
    position: relative;
    font-size: var(--fs-ms);
    line-height: 1.2;
}
.checkItem > input {
    background: transparent;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -webkit-appearance: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}
.checkItem label:before {
    content: "";
    position: absolute;
    left: 0;
    width: 2.5rem;
    height: 2.5rem;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center;
}
.checkItem > input[type="checkbox"] + label {
    position: relative;
    display: inline-block;
    padding: 0 3.5rem 0 3rem;
    color: var(--c-gray-800);
    font-weight: var(--fw-regular);
}
.checkItem > input[type="checkbox"] + label:before {
    background: url("../img/line_ch_unchecked.svg");
    top: -0.3rem;
}
.checkItem > input[type="checkbox"]:checked + label:before {
    background: url("../img/line_checked_ch.svg");
}
.checkItem > input[type="checkbox"]:checked + label {
    color: var(--c-gray-900);
} /* 체크되었을때 */
/* 약관명 필수,선택 */
.checkItem > label > em {
    color: inherit;
    font-weight: 600;
}
.checkItem > label > em.nomal {
    color: inherit;
    font-weight: 600;
}
.checkItem > a {
    font-size: 0;
    display: inline-block;
    width: 4rem;
    height: 4rem;
    position: absolute;
    top: 1.5rem;
    right: 0;
    z-index: 2;
    font-size: 1px;
    line-height: 0;
}
.checkItem > .icoArrowR {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 1.8rem;
    height: 1.8rem;
    background: url("../img/ico_arrow_terms.svg") no-repeat center right;
    background-size: 1.8rem;
}

/* 체크박스 오른쪽정렬 : 자택주소와동일 등 */
.checkItem.ar {
    padding-top: 0.5rem;
    color: var(--c-gray-600);
}
.checkItem.ar > input[type="checkbox"] + label {
    font-size: var(--fs-xs);
    padding: 0.2rem 1rem 0 2.5rem;
    text-align: right;
}
.termsinfo {
}
/* 약관 서비스 체크박스 */
.termsService {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.5rem; /* 위아래 간격 */
    padding: 0 0 0 3rem;
}
/* termsContact 공통 스타일 */
.termsContact {
    display: flex;
    gap: 1rem;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    padding: 0.5rem 0;
}
.termsContact li {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 5rem;
}
.termsContact.fs {
    justify-content: flex-start;
    align-items: flex-start;
}
.termsContact.fs li {
    width: 10rem;
    padding-top: 0;
}
/* 체크박스 숨기고 label에 이미지 사용 */
.termsContact input[type="checkbox"] {
    background: transparent;
    border-radius: 0;
}
/* 체크박스 앞 아이콘 설정 (기본) */
.termsContact label {
    position: relative;
    display: inline-block;
    padding: 0 0 0 2.5rem;
    font-size: var(--fs-xs);
    color: var(--c-gray-700);
    font-weight: var(--fw-regular);
}
.termsContact label:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 2.5rem;
    height: 2.5rem;
    transform: translateY(-50%);
    background: url("../img/line_ch_unchecked.svg") center/contain no-repeat;
}
/* 체크된 상태 이미지 및 색상 */
.termsContact input[type="checkbox"]:checked + label:before {
    background: url("../img/line_checked_ch.svg") center/contain no-repeat;
}
.termsContact input[type="checkbox"]:checked + label {
    color: var(--c-gray-700);
}

/* 체크박스없는약관 */
.noCheckTerms {
    border: solid 1px var(--c-gray-200);
    border-radius: 1rem;
    padding: 0 1.5rem 1.5rem;
    margin-bottom: 1rem;
}
.noCheckTerms > li {
    position: relative;
    display: flex;
    align-items: center;
    font-size: var(--fs-ms);
    line-height: 1.2;
}
.noCheckTerms > li:first-child {
    min-height: 5rem;
    border-bottom: solid 1px var(--c-gray-200);
    padding: 1rem 0;
    margin-bottom: 1rem;
}
.noCheckTerms .allTerrm > span.label {
    position: relative;
    display: inline-block;
    padding: 0;
    font-size: var(--fs-m);
    font-weight: var(--fw-bold);
    line-height: 1.4;
}
.noCheckTerms .item a {
    display: block;
    position: relative;
    width: 100%;
    padding: 0.5rem 0;
}
.noCheckTerms .item a span.label {
    position: relative;
    display: inline-block;
    padding-right: 3.5rem;
    color: var(--c-gray-800);
    font-weight: var(--fw-regular);
}
.noCheckTerms .item a::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 2.4rem;
    height: 2.4rem;
    background: url("../img/ico_right.svg") no-repeat top right;
    background-size: contain;
}
.noCheckTerms .termsService {
    padding-left: 0;
    padding-top: 1rem;
}

.noCheckTerms.nobrd {
    border: none;
    border-radius: 0;
    padding: 0;
    margin-top: 2rem;
}
.noCheckTerms.nobrd > li:first-child {
    min-height: initial;
    border: none;
    padding: 0;
}
.noCheckTerms.nobrd > li .contxt {
    font-size: var(--fs-ms);
    color: var(--c-gray-800);
    font-weight: var(--fw-regular);
    line-height: 1.4;
}
/* 완료 */
.completeWrap {
    margin-top: 3rem;
}
.complete {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 7rem 0 0 0;
}
.complete .conTitC {
    font-size: var(--fs-xxl);
    padding-bottom: 1.5rem;
}
.complete.ico {
    background: url("../img/ico_complete.svg") no-repeat top center/ 6rem;
}
.complete.ars {
    background: url("../img/ico_ars_complete.svg") no-repeat top center/ 6rem;
}
.complete.add {
    background: url("../img/ico_add_complete.svg") no-repeat top center/ 6rem;
}
.complete span {
    display: block;
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    line-height: 1.4;
    text-align: center;
    padding-bottom: 1.5rem;
}
.complete span.subtxt {
    font-size: var(--fs-ms);
    color: var(--c-gray-600);
    line-height: 1.2;
}
.complete span.subtxtxs {
    font-size: var(--fs-xs);
    color: var(--c-gray-800);
    font-weight: var(--fw-regular);
    line-height: 1.4;
    padding-top: 2.5rem;
}
.complete .box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 1rem;
    border: 1px solid var(--c-gray-200);
    padding: 1.5rem;
    margin-bottom: 1rem;
}
.completeWrap .box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 1rem;
    border: 1px solid var(--c-gray-200);
    padding: 1.5rem;
    margin-bottom: 1rem;
    font-size: var(--fs-m);
}
.completeWrap .bgGrayBox {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.completeWrap .conRbrdrBox {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.completeWrap.cnt {
    margin-top: 0;
}
/* 해지,실패 */
.cancelWrap {
    margin-top: 3rem;
}
.cancelWrap .cancel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 7rem 0 0 0;
}
.cancelWrap .cancel .conTitC {
    font-size: var(--fs-xxl);
    padding-bottom: 2.5rem;
}
.cancelWrap .cancel.ico {
    background: url("../img/ico_cancel.svg") no-repeat top center/ 6rem;
}
.cancelWrap .cancel span {
    display: block;
    font-size: var(--fs-m);
    line-height: 1.4;
    text-align: center;
    padding-bottom: 1.5rem;
}
.cancelWrap .cancel .subtxtxs {
    font-size: var(--fs-xs);
    color: var(--c-gray-800);
    font-weight: var(--fw-regular);
    line-height: 1.4;
    padding-top: 1.5rem;
}
.cancelWrap .cancel .red {
    color: var(--negative);
}
.cancelWrap.pop {
    margin-top: 0;
}
.cancelWrap.pop .cancel {
    padding: 6rem 0 0 0;
}
.cancelWrap.pop .cancel.ico {
    background: url("../img/ico_cancel.svg") no-repeat top center/ 5rem;
}
/* 안내 */
.infoWrap {
    margin-top: 3rem;
}
.infoWrap .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 7rem 0 0 0;
}
.infoWrap .info .conTitC {
    font-size: var(--fs-xxl);
    padding-bottom: 2.5rem;
}
.infoWrap .info.ico {
    background: url("../img/ico_info_mark.svg") no-repeat top center/ 6rem;
}
.infoWrap .info span {
    display: block;
    font-size: var(--fs-m);
    line-height: 1.4;
    text-align: center;
    padding-bottom: 1.5rem;
}
.infoWrap .info .subtxtxs {
    font-size: var(--fs-xs);
    color: var(--c-gray-800);
    font-weight: var(--fw-regular);
    line-height: 1.4;
    padding-top: 1.5rem;
}
.infoWrap .info .red {
    color: var(--negative);
}
.infoWrap.pop {
    margin-top: 0;
}
.infoWrap.pop .info {
    padding: 6rem 0 0 0;
}
.infoWrap.pop .info.ico {
    background: url("../img/ico_info_mark.svg") no-repeat top center/ 5rem;
}

/* 라운드박스 체크 - 없어질수 있음 확인*/
.rndChkBox {
    border-radius: 1.6rem;
    border: 1px solid var(--c-gray-300);
    padding: 2rem;
    margin: 1.5rem 0;
}
.rndChkBox li {
    position: relative;
    display: flex;
    align-items: center;
}
.rndChkBox li span {
    display: block;
    font-size: var(--fs-ms);
    color: var(--c-gray-700);
    font-weight: var(--fw-regular);
}
.rndChkBox.on {
    border-color: var(--cobalt-blue);
    background-color: var(--bg-dim-primary);
}
/* 체크박스 앞 아이콘 설정 (기본) */
.boxChk {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
    padding: 0 0 1rem 0;
}
.boxChk > label {
    position: relative;
    display: inline-block;
    width: 100%;
    font-size: var(--fs-m);
    font-weight: var(--fw-bold);
}
.boxChk > label:before {
    content: "";
    position: absolute;
    width: 2rem;
    height: 2rem;
    background: url("../img/ico_rndchk_off.svg");
    right: 0;
    top: 0;
}
.boxChk > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.boxChk > input[type="checkbox"]:checked + label:before {
    background: url("../img/ico_rndchk_on.svg");
}

/******************** 인증, 회원가입 ************************/
/* 패턴인증 */
.patternWrap {
    min-height: 5.5rem;
    margin-top: 2rem;
}
.patternReg {
    width: 100%;
    height: 10rem;
    background: url(../img/img_patternreg.svg) no-repeat top center/10rem 10rem;
    margin: 8rem auto 0 auto;
}
.patternLock {
    width: 24rem;
    height: 24rem;
    background: url(../img/img_pattern.svg) no-repeat top center/24rem 24rem;
    margin: auto;
}

/* 생체인증 */
.bioWrap {
    margin-top: 2rem;
}
.bionLock {
    width: 100%;
    height: 10rem;
    background: url(../img/img_bio.svg) no-repeat top center/10rem 10rem;
    margin: 5rem auto 0 auto;
}
.btmMsg {
    display: block;
    font-size: var(--fs-xs);
    color: var(--c-gray-700);
    font-weight: var(--fw-regular);
    line-height: 1.4;
    margin-bottom: 2rem;
    text-align: center;
}
.btmMsg.err {
    color: var(--negative);
}

/* 금융공동인증 */
.rndBrdBox > a > .conBoxTit {
    justify-content: flex-start;
}
.detailList.iconCert {
    padding-left: 10.5rem;
}
.detailList.iconCert::before {
    content: "";
    position: absolute;
    bottom: 1rem;
    left: 1.5rem;
    width: 9.2rem;
    height: 9.2rem;
    background: url("../img/ico_public.svg") center/contain no-repeat;
}
/* OTP인증 */
.detailList.iconOtp {
    padding-left: 10.5rem;
}
.detailList.iconOtp::before {
    content: "";
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    width: 9.2rem;
    height: 9.2rem;
    background: url("../img/ico_otp.svg") center/contain no-repeat;
}

/* 로그인방법 선택 */
.loginOption {
    display: flex;
    gap: 1.4rem;
    width: 100%;
    height: 14.2rem;
    align-items: stretch;
    justify-content: space-between;
    margin-bottom: 1rem;
}
/* 왼쪽 큰 버튼 */
.loginOption .left {
    flex: 1;
}
.loginOption .simple {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--secondary);
    border-radius: 1.6rem;
    width: 100%;
    height: 100%;
    text-align: center;
}
/* 오른쪽 두 줄 버튼 */
.loginOption .right {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    flex: 1;
}
.loginOption .bio,
.loginOption .pattern {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.8rem;
    background: var(--secondary);
    border-radius: 1.6rem;
    height: 50%;
    width: 100%;
    text-align: center;
}
/* 아이콘 클래스명 일치 (ico → icon으로 수정) */
.loginOption .simple .ico {
    width: 3.2rem;
    height: 3.2rem;
    background: url("../img/ico_simple_pw.svg") no-repeat center / 3.2rem;
    margin-bottom: 1.8rem;
}
.loginOption .bio .ico {
    width: 2.4rem;
    height: 2.4rem;
    background: url("../img/ico_bio_pw.svg") no-repeat center / 2.4rem;
}
.loginOption .pattern .ico {
    width: 2.4rem;
    height: 2.4rem;
    background: url("../img/ico_pattern_pw.svg") no-repeat center / 2.4rem;
}

/* 텍스트 */
.loginOption .txt {
    font-size: var(--fs-m);
    color: var(--c-gray-700);
    font-weight: var(--fw-bold);
}
/* 로그인인증 선택 */
.loginMethod {
    display: flex;
    justify-content: space-around;
    margin-top: 4rem;
}
.loginMethod li {
    width: 10rem;
    height: 10.8rem;
}
.loginItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    text-decoration: none;
}
.loginItem .icon {
    width: 2.5rem;
    height: 2.5rem;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 2.5rem 0;
}
.loginItem .txt {
    font-size: var(--fs-m);
    color: var(--c-gray-700);
    font-weight: var(--fw-default);
}
.simplePw .icon {
    background-image: url("../img/ico_simple_pw.svg");
}
.bioPw .icon {
    background-image: url("../img/ico_bio_pw.svg");
}
.patternPw .icon {
    background-image: url("../img/ico_pattern_pw.svg");
}
/* 또는 */
.or {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.or::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50%;
    border-top: 1px solid var(--c-gray-300);
    z-index: 0;
}
.or > span {
    display: inline-block;
    font-size: var(--fs-ms);
    color: var(--c-gray-600);
    background: var(--white);
    padding: 1rem;
    z-index: 1;
}
/* 로그인인증 선택 */
.certifiMethod {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    margin: 1rem 0 0 0;
}
.certifiMethod li {
    width: 100%;
    height: 5.7rem;
    border: 1px solid var(--c-gray-200);
    border-radius: 1rem;
}
.certifiMethod li.on {
    border-color: var(--cobalt-blue);
    color: var(--cobalt-blue);
}
.certifiItem {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 2rem;
}
.certifiItem .icon {
    width: 2.4rem;
    height: 2.4rem;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 1.5rem;
}
.certifiItem .txt {
    font-size: var(--fs-m);
    color: var(--c-gray-700);
    font-weight: var(--fw-default);
}
.certifiItem.arrowR {
    background: url(../img/ico_arrow_right.svg) no-repeat center right 1rem /
        1.8rem;
}
/* 텍스트만 가운데 정렬 */
.certifiMethod.ac .certifiItem .txt {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
/* 아이콘 */
.finaccial .icon {
    background-image: url("../img/ico_financial.svg");
}
.public .icon {
    background-image: url("../img/ico_public.svg");
}
.idpw .icon {
    background-image: url("../img/ico_idpw.svg");
}
.toss .icon {
    background-image: url("../img/ico_toss.svg");
}
.naver .icon {
    background-image: url("../img/ico_naver.svg");
}
.kakao .icon {
    background-image: url("../img/ico_kakao.svg");
}
.pass .icon {
    background-image: url("../img/ico_pass.svg");
}
.certify .icon {
    background-image: url("../img/ico_certify.svg");
}
.light .icon {
    background-image: url("../img/ico_light.svg");
}
.simple .icon {
    background-image: url("../img/ico_simple_pw.svg");
}
.bio .icon {
    background-image: url("../img/ico_bio_pw.svg");
}
.unbio .icon {
    background-image: url("../img/ico_unbio_pw.svg");
}
.pattern .icon {
    background-image: url("../img/ico_pattern_pw.svg");
}
.unpattern .icon {
    background-image: url("../img/ico_unpattern_pw.svg");
}
.document .icon {
    background-image: url("../img/ico_document.svg");
}

/* 로그인 */
.loginWrap {
    margin: 2rem 0 2rem;
}
.login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 0 9rem 0;
}
.login .conTitC {
    font-size: var(--fs-xxl);
}
.login.ico {
    background: url("../img/img_login.svg") no-repeat bottom center/ 8rem;
}
.login.key {
    background: url("../img/ico_bg_login.svg") no-repeat top center/ 7rem;
}
.login span {
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    line-height: 1.4;
    text-align: center;
}
.loginWrap.lgn .login {
    padding: 9rem 0 0 0;
}
.loginWrap.pw .login {
    padding: 10rem 0 0 0;
}
.loginWrap.pw .login.ico {
    background-position: top center;
}
.loginWrap.nobg {
}
.loginWrap.nobg .login {
    padding-bottom: 0;
}
.loginWrap.noTit {
}

/* 인증보안-프로그램정보 */
.appInfoWrap {
    margin-top: 3rem;
}
.appInfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 16rem;
}
.appInfo.ico {
    background: url("../img/ci_osb_simbol01.svg") no-repeat top center/ 13.6rem
        7.9rem;
}
.appDetail {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.appDetail li {
    text-align: center;
}
.appDetail li span {
    display: inline-block;
    padding: 0.5rem;
}
.appDetail li .label {
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    font-weight: var(--fw-default);
}
.appDetail li .data {
    font-size: var(--fs-ms);
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
}

/* otp인증 박스 */
.otpListBox {
}
.otpListBox .detailList + .detailList {
    margin-top: 2rem;
}

/* 신분증 촬영 */
.lightBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.5rem 0 2rem;
}
.lightBox span {
    display: inline-flex;
    position: relative;
    font-size: var(--fs-m);
    font-weight: var(--fw-bold);
    color: var(--c-gray-800);
}

.icolist {
    color: var(--c-gray-600);
    margin-bottom: 1rem;
}
.icolist > li + li {
    margin-top: 2rem;
}
.icolist > li {
    font-size: var(--fs-ms);
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
    padding-left: 3rem;
}
.icolist > li > span {
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-default);
    color: var(--c-gray-600);
    margin-top: 0.3rem;
}
.icolist > li.photo01 {
    background: url("../img/ico_photo_01.svg") no-repeat top left/ 1.9rem 1.8rem;
}
.icolist > li.photo02 {
    background: url("../img/ico_photo_02.svg") no-repeat top left/ 1.9rem 1.8rem;
}
.icolist > li.photo03 {
    background: url("../img/ico_photo_03.svg") no-repeat top left/ 1.9rem 1.8rem;
}

/******************** 뱅킹서비스 ************************/
/* 증명서발급안내 */
.contentPage {
}
.contentPage span {
    display: block;
}
.contentPage .contxt {
    color: var(--c-gray-800);
    font-size: var(--fs-ms);
    font-weight: var(--fw-regular);
    margin-bottom: 1rem;
}
.contentPage .bgBox {
    margin: 2rem 0;
}
#panel1-1 .detailList {
    margin-bottom: 2rem;
}

/* 예적금계산기 */
.calcTxt {
    display: block;
    font-size: var(--fs-ms);
    color: var(--c-gray-800);
    font-weight: var(--fw-regular);
    margin-bottom: 1rem;
}
.calcResult {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    border: 1px solid var(--c-gray-200);
    padding: 2rem;
    margin: 0 0 1.5rem;
}
.calcResult .resultTxt {
    display: inline-flex;
    align-items: center;
    position: relative;
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    font-weight: var(--fw-bold);
}
.calcResult .resultTxt::before {
    content: "";
    display: inline-block;
    top: 0;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    background: url(../img/ico_calc.svg) no-repeat top left / 2.4rem;
    padding-right: 0.5rem;
}
.calcResult em {
    color: var(--cobalt-blue);
    font-weight: var(--fw-bold);
    margin-left: 0.5rem;
}
.calcResult.noicon .resultTxt::before {
    display: none !important;
}

/* 계좌관리 */
.accoManage {
    display: flex;
    align-items: top;
    justify-content: space-between;
}
.accoManage .icoBox {
    display: flex;
    align-items: top;
    justify-content: flex-start;
}
.accoManage .icoBox .icoBox {
    display: flex;
    align-items: top;
}
.accoManage .icoBox .icoBank {
    display: flex;
    position: relative;
    width: 3.8rem;
    height: 3.8rem;
    border-radius: 1.6rem;
    background: var(--gray-200);
    margin-left: 0.5rem;
    margin-right: 1.5rem;
}
.accoManage .icoBox .icoBank image {
    width: 3.8rem;
    height: 3.8rem;
}
.accoManage .icoBox {
}

.managelimit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 1rem;
    background: var(--c-gray-50);
    padding: 1.5rem;
    margin: 0 0 1rem;
}
.managelimit li {
    font-size: var(--fs-ms);
    font-weight: var(--fw-regular);
}
.managelimit li.detailLeft {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.managelimit li.detailLeft .tit {
    color: var(--c-gray-800);
}
.managelimit li.detailLeft .desc {
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
}
.managelimit li.detailRight {
}
.managelimit li.detailRight .caution {
    display: flex;
    align-items: center;
    position: relative;
    min-height: 2.4rem;
    font-size: var(--fs-ms);
    color: var(--negative);
    padding-right: 3rem;
}
.managelimit li.detailRight .caution::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    width: 2.4rem;
    height: 2.4rem;
    background: url("../img/ico_arrowr_detail.svg") no-repeat top right/2.4rem;
}

.autoTransNum {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    height: 4.5rem;
    font-size: var(--fs-m);
    font-weight: var(--fw-bold);
    border-bottom: 1px solid var(--c-gray-200);
    margin-bottom: 2rem;
}

/* 만기해지방법 선택 팝업 */
.cancelMethod {
    width: 100%;
    margin-bottom: 2rem;
}
.cancelMethod li + li {
    margin-top: 0.5rem;
}
.cancelMethod li a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: 0 0 auto;
    padding: 1.5rem;
}
.cancelMethod li a.on {
    background: var(--c-gray-100);
    border-radius: 1rem;
}
.cancelMethod li a p.tit {
    font-size: var(--fs-m);
    font-weight: var(--fw-bold);
}
.cancelMethod li a p.decs {
    font-size: var(--fs-ms);
    color: var(--c-gray-800);
    font-weight: var(--fw-regular);
    margin-top: 0.7rem;
}
.cancelMethod li a p.focus {
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    font-weight: var(--fw-regular);
    margin-top: 0.3rem;
}
/* sorry 메세지 */
.sorryWrap {
}
.sorryWrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sorryWrap span {
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    line-height: 1.4;
    text-align: center;
}

/* 계좌보기 */
.myAccoWrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid var(--c-gray-200);
    background: var(--white);
}
.myAccoWrap > li {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
}
.myAccoWrap > li.singleL {
    justify-content: flex-start;
    align-items: flex-start;
}
.myAccoWrap > li.singleR {
    justify-content: flex-end;
    align-items: flex-end;
}
.myAccoWrap > li.singleM {
    justify-content: center;
    align-items: center;
}
.myAccoWrap > li.list {
    margin-top: 0.5rem;
}
.myAccoWrap > li.arrowR {
    background: url("../img/ico_arrow_down.svg") no-repeat center right / 1.8rem;
}
.myAccoWrap > li a {
    display: block;
    width: 100%;
}
.myAccoWrap > li span {
    display: block;
}
.myAccoWrap > li .singleL {
    justify-content: flex-start;
    align-items: flex-start;
}
.myAccoWrap > li .singleR {
    justify-content: flex-end;
    align-items: flex-end;
}
.myAccoWrap > li .tit {
    font-size: var(--fs-m);
    color: var(--c-gray-900);
    font-weight: var(--fw-bold);
}
.myAccoWrap > li .arrowR {
    background: url("../img/ico_marrow_right.svg") no-repeat center right /
        2.6rem;
}
.myAccoWrap > li .tit em {
    color: var(--cobalt-blue);
    font-weight: var(--fw-bold);
}
.myAccoWrap > li .subtxt {
    font-size: var(--fs-ms);
    color: var(--c-gray-700);
    font-weight: var(--fw-regular);
}
.myAccoWrap > li .num {
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    font-weight: var(--fw-bold);
}
.myAccoWrap > li .stxt {
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
}
.myAccoWrap > li .balance {
    font-size: var(--fs-ms);
    color: var(--c-gray-800);
    font-weight: var(--fw-bold);
    text-align: right;
}
.myAccoWrap > li .popDetailBtn {
    margin-top: 0.5rem;
}
.myAccoWrap + .myAccoWrap {
    margin-top: 2rem;
}
.myAccoWrap:last-child {
    margin-bottom: 2rem;
}
.myAccoWrap.nobrd {
    border: none;
    padding: 1.5rem 0;
}
.myAccoWrap > li .accoDel {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    align-items: center;
    width: 2.4rem;
    height: 2.4rem;
    background: url(../img/ico_del.svg) no-repeat center / 1.8rem;
}
.myAccoWrap.ntit > li .tit {
    font-weight: var(--fw-default);
}
.myAccoWrap.main {
    min-height: 11rem;
    border: none;
    box-shadow: var(--bx-s-default);
    margin-bottom: 2rem;
    padding-top: 2rem;
}
.myAccoWrap.main > li .tit {
    font-weight: var(--fw-default);
}
.myAccoWrap.main > li .num {
    font-size: var(--fs-xxl);
    color: var(--c-gray-800);
    font-weight: var(--fw-bold);
    margin-top: 0.5rem;
}

.myAccoWrap.icoCard {
    flex-direction: row;
    align-items: stretch;
    gap: 3.5rem;
    min-height: 10rem;
    border: none;
    box-shadow: var(--bx-s-default);
    padding: 2.5rem 3rem;
    margin-bottom: 2rem;
}
.myAccoWrap.icoCard > li {
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.myAccoWrap.icoCard > li span {
    display: block;
    font-size: var(--fs-ms);
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
    padding-top: 5rem;
    text-align: center;
}
.myAccoWrap.icoCard > li.divider {
    flex: none;
    width: 1px;
    height: 5rem;
    align-self: center;
    background-color: var(--c-gray-200);
}
.myAccoWrap.icoCard > li.openAcco {
    background: url("../img/ico_open_acco.svg") no-repeat top center;
}
.myAccoWrap.icoCard > li.accoSch {
    background: url("../img/ico_acco_sch.svg") no-repeat top center;
}
.myAccoWrap.icoCard > li.simpleLoan {
    background: url("../img/ico_loan_simple.svg") no-repeat top center;
}
.myAccoWrap.icoCard > li.loanSch {
    background: url("../img/ico_loan_sch.svg") no-repeat top center;
}

.myAccoWrap.addChk > li {
    gap: 0.2rem;
    position: relative;
    padding-left: 4rem;
}
.myAccoWrap.addChk > li .ntit {
    font-size: var(--fs-m);
    color: var(--c-gray-900);
    font-weight: var(--fw-default);
}
.myAccoWrap.addChk > li > .accoChk {
    position: absolute;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 100%;
    top: 0;
    left: 0;
}
.myAccoWrap.addChk + .myAccoWrap.addChk {
    margin-top: 0;
}
.myAccoWrap.addChk:last-child {
    margin-bottom: 0;
}
.myAccoWrap.addChk.on {
    border-color: var(--blue-400);
    background-color: var(--blue-50);
}

/* 사진촬영버튼 */
.squareBtnWrap {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
}
.photoBox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 9.6rem;
    height: 8.2rem;
    border-radius: 1rem;
    background-color: var(--c-gray-50);
    color: var(--blue-400);
    font-size: var(--fs-xs);
}
.squareBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 9.6rem;
    height: 8.2rem;
    border-radius: 1rem;
    border: 1px solid var(--c-gray-200);
}
.squareBtn span.photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    position: relative;
    font-size: var(--fs-xs);
    color: var(--cobalt-blue);
}
.squareBtn span.photo::before {
    content: "";
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    background: url("../img/ico_plus_blue.svg") no-repeat center center /
        contain;
}

/* 뱅킹관리안내 */
.infoBox {
}
.infoBox > .conTxt5 {
    padding-bottom: 0.5rem;
}
.infoBox > .listType {
    margin-bottom: 1.5rem;
}

/******************** 대출.할부 ************************/
/* 간편한도대출 상품 */
.poploanProduct {
}
.poploanProduct > li {
    border-radius: 1.2rem;
    border: 1px solid var(--c-gray-300);
    margin: 0 0 1.5rem;
}
.poploanProduct > li.on {
    border-color: var(--cobalt-blue);
}
.poploanProduct > li > a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    padding: 2.5rem 2rem;
}
.poploanProduct > li > a .tit {
    display: block;
    font-size: var(--fs-ml);
    font-weight: var(--fw-bold);
}
.poploanProduct > li > a .txt {
    display: block;
    font-size: var(--fs-m);
    color: var(--c-gray-600);
    font-weight: var(--fw-default);
    margin-top: 0.3rem;
}

.loanPrd > .writeInfo > li > .termsList {
    border: none;
    padding: 0 0 1rem 0;
    margin: 0;
}
.loanPrd > .writeInfo > li > .termsList > li:first-child {
    border: none;
    padding: 0 !important;
    margin: 0;
}
.proSubtit {
    display: block;
    font-size: var(--fs-ms);
    color: var(--c-gray-700);
    font-weight: var(--fw-default);
    margin: 1rem 0 0.8rem 0;
}
/******************** 대출관리 ************************/
/* 서류제출 */
.cardBox {
    position: relative;
    border-radius: 1rem;
    border: 1px solid var(--c-gray-200);
    padding: 1.5rem;
}
.cardBox li {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-right: 10rem;
}
.cardBox li > button {
    position: absolute;
    width: auto !important;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}
.cardBox li > .btnArea {
    position: absolute;
    width: fit-content;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
}
.cardBox li > .btnArea > button {
    width: fit-content;
}
.cardBox li > .span {
    display: inline-flex;
}
.cardBox li > .label {
    font-size: var(--fs-ms);
    color: var(--c-gray-800);
    line-height: 1.4;
}
.cardBox li > .sTxt {
    position: relative;
    display: inline-flex;
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    line-height: 1.4;
}
.cardBox.focus {
    cursor: pointer;
}
.cardBox.on {
    border-color: var(--cobalt-blue);
}
.deleteBtn {
    width: 2.4rem !important;
    height: 2.4rem !important;
    background: url("../img/ico_delete.svg") no-repeat center / 2rem;
}

/******************** 고객센터 ************************/
/*board list*/
.boardList {
    border-top: 1px solid var(--cobalt-blue);
    border-bottom: 1px solid var(--c-gray-200);
    margin-bottom: 2rem;
}
.boardList li {
    position: relative;
    border-top: 1px solid var(--c-gray-200);
}
.boardList li a {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 1.2rem 5rem 1.2rem 1.2rem;
}
.boardList li a > span {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.boardList li a .row {
    display: flex;
    gap: 1rem;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
}
.boardList li a .row > .rndBadge {
    width: fit-content;
    margin-left: 0;
    height: 2.1rem;
    font-size: var(--fs-xxs);
    padding: 0 0.7rem;
}
.boardList li a .tit {
    color: var(--c-gray-800);
    font-size: var(--fs-ms);
    font-weight: var(--fw-default);
    margin-bottom: 0.5rem;
}
.boardList li a .date {
    color: var(--c-gray-600);
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
}
.boardList li a::after {
    content: "";
    display: block;
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 2.4rem;
    height: 2.4rem;
    margin-top: -1.2rem;
    background: url("../img/ico_arrowr_detail.svg") no-repeat 0 0;
    background-size: 2.4rem;
}

.boardView {
    margin-bottom: 2rem;
}
.boardView .viewHeader {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--c-gray-200);
}
.boardView .viewHeader > span {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.boardView .viewHeader .row {
    display: flex;
    gap: 1rem;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
}
.boardView .viewHeader .row > .rndBadge {
    width: fit-content;
    margin-left: 0;
    height: 2.1rem;
    font-size: var(--fs-xxs);
    padding: 0 0.7rem;
}
.boardView .viewHeader .tit {
    color: var(--c-gray-900);
    font-size: var(--fs-m);
    font-weight: var(--fw-bold);
    margin-bottom: 0.8rem;
}
.boardView .viewHeader .date {
    color: var(--c-gray-600);
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
}
.boardView .viewBody {
    color: var(--c-gray-800);
    font-size: var(--fs-ms);
    padding: 2.4rem 0;
}
.boardView .viewReply {
    color: var(--c-gray-800);
    font-size: var(--fs-xs);
    padding: 2.4rem 0;
}
.boardView .viewReply .reply {
    display: block;
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    margin-bottom: 2rem;
}
.boardView .viewFooter {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--cobalt-blue);
}
.boardView .viewFooter .post {
    border-bottom: 1px solid var(--c-gray-200);
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.boardView .viewFooter .post span:first-child {
    width: 4rem;
    flex-shrink: 0;
}
.boardView .viewFooter .post span:last-child {
    flex: 1;
}
.boardView .viewFooter .post span {
    display: inline-block;
    color: var(--c-gray-600);
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
}
.boardView .viewFooter .post span + span {
    padding-left: 2rem;
}
.boardView .viewFooter .post span.notit {
    color: var(--c-gray-300);
}
.boardView .viewFooter .post a {
    color: var(--c-gray-800);
}

/*toggle list*/
.toggleList {
    border-top: 1px solid var(--cobalt-blue);
    border-bottom: 1px solid var(--c-gray-200);
    margin: 2rem 0;
}
.toggleList li {
    position: relative;
    border-top: 1px solid var(--c-gray-200);
}
.toggleList li a {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 1.5rem 5rem;
}
.toggleList li a span {
    display: block;
    width: 100%;
    overflow: hidden;
}
.toggleList li a .tit {
    color: var(--c-gray-800);
    font-size: var(--fs-ms);
    font-weight: var(--fw-default);
}
.toggleList li.view {
    display: none;
    color: var(--c-gray-800);
    font-size: var(--fs-xs);
    line-height: 1.4;
    padding: 1.5rem;
}
.toggleList li.view .date {
    display: block;
    text-align: right;
    color: var(--c-gray-600);
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    margin-top: 0.5rem;
}
.toggleList li a::before {
    content: "";
    display: block;
    position: absolute;
    left: 1.5rem;
    top: 2.5rem;
    width: 2.4rem;
    height: 2.4rem;
    margin-top: -1.2rem;
    background: url("../img/ico_faq.svg") no-repeat 0 0;
    background-size: 2.4rem;
}
.toggleList li a::after {
    content: "";
    display: block;
    position: absolute;
    right: 1.6rem;
    top: 2.5rem;
    width: 2.4rem;
    height: 2.4rem;
    margin-top: -1.2rem;
    background: url("../img/ico_arrowb.svg") no-repeat 0 0;
    background-size: 2.4rem;
}
.toggleList li a.active::after {
    background-image: url("../img/ico_arrowt.svg");
}

/* 사고신고 */
.noHistory {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--fs-ms);
    color: var(--c-gray-300);
    line-height: 1.4;
    margin: auto;
}
.noHistory span {
    display: block;
    text-align: center;
    background: url(../img/ico_document_gray.svg) no-repeat top center / 3.2rem;
    padding-top: 4.2rem;
    font-size: var(--fs-ms);
    color: var(--c-gray-300);
    line-height: 1.2;
}
.noHistory.success span {
    background: none;
    padding-top: 0;
}

/* 지점안내 */
.branchInfo {
    width: 100%;
}
.branchInfo li + li {
    border-top: solid 1px var(--c-gray-200);
}
.branchInfo li:last-child {
    border-bottom: 0;
}
.branchInfo li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: 0 0 auto;
    padding: 1.5rem 0;
}
.branchInfo li .map {
    display: flex;
    position: relative;
    width: 8rem;
    height: 5.6rem;
    background: var(--gray-200);
    margin-right: 1.5rem;
}
.branchInfo li .map image {
    width: 8rem;
    height: 5.6rem;
}
.branchInfo li .text-l {
    display: flex;
    flex-direction: column;
}
.branchInfo li p {
    display: flex;
}
.branchInfo li .tit {
    font-size: var(--fs-ms);
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
}
.branchInfo li .addr {
    font-size: var(--fs-xxs);
    color: var(--c-gray-600);
    font-weight: var(--fw-regular);
    margin-top: 0.3rem;
}
.branchInfo li .call {
    font-size: var(--fs-xxs);
    color: var(--c-gray-600);
    font-weight: var(--fw-default);
    margin-top: 1rem;
    padding-left: 2rem;
}
.branchInfo li .call {
    background: url("../img/ico_call.svg") no-repeat center left / 1.4rem;
}

.quarter {
    font-size: var(--fs-xxs);
    margin-bottom: 0.5rem;
}

/******************** 오픈뱅킹 ************************/
.bgOpenJoin {
    background: url(../img/bg_open_join.png) no-repeat bottom 9.7rem center /
        contain;
}
.bgOpenAcco {
    background: url(../img/bg_open_reg.svg) no-repeat top 13rem center / contain;
}
.openTitBox {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-top: 2rem;
}
.openTitBox > span {
    display: block;
    text-align: center;
}
.openTitBox > .tit {
    font-size: var(--fs-xxl);
    color: var(--c-gray-800);
    font-weight: var(--fw-bold);
    line-height: 1.2;
}
.openTitBox > .tit > em {
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
}
.openTitBox > .stit {
    font-size: var(--fs-ms);
    color: var(--c-gray-600);
    font-weight: var(--fw-default);
    margin-top: 1.5rem;
}

/******************** 온보딩 ************************/
.bgGrBlue {
    background: linear-gradient(to bottom, #fff 0%, #fff 20%, #f6fafe 100%);
}
/* .bgGrBlue {background:#F6FAFE url("../img/bg_onboarding.svg")no-repeat top left / 100%;} */
.obBoxWrap {
    flex: 1;
    position: relative;
}
.obBox {
    width: 100%;
    height: 100%;
}
.obTitBox {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 7rem;
    margin-top: 3rem;
}
.obTitBox span {
    display: block;
    text-align: center;
}
.obTitBox .stxt {
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
}
.obTitBox .tit {
    font-size: var(--fs-xxl);
    color: var(--c-gray-800);
    font-weight: var(--fw-bold);
}
.obBox {
    background-repeat: no-repeat;
    background-position: bottom -7rem center;
    background-size: 26rem 53rem;
}
.obBox.bg01 {
    background-image: url("../img/img_onboarding01.png");
}
.obBox.bg02 {
    background-image: url("../img/img_onboarding02.png");
}
.obBtnBg {
    background-color: #f6faff;
}
.obBoxWrap .slick-dots {
    top: 5rem;
}
.obBoxWrap .slick-track,
.obBoxWrap .slick-list {
    height: 100%;
}

/******************** 일반정보페이지 ************************/
.infoType {
    font-size: var(--fs-xs);
    color: var(--c-gray-900);
    font-weight: var(--fw-regular);
}
.infoType h1 {
    font-size: 1.8rem;
    padding: 0 0 0.8rem 0;
    font-weight: bold;
}
.infoType h2 {
    font-size: 1.6rem;
    padding: 1.4rem 0 0.8rem 0;
    font-weight: bold;
}
.infoType h4 {
    font-size: 1.4rem;
    padding: 1.4rem 0 0.8rem 0;
    font-weight: bold;
}

.infoType .fw {
    font-size: var(--fs-ms);
    font-size: var(--fs-ms);
    font-weight: var(--fw-bold);
    line-height: 1.4;
}
.infoType .emphasis {
    color: var(--negative);
}

.infoType dl {
}
.infoType dl.fs16 {
    font-size: var(--fs-ms);
}

.textlist {
    padding: 0;
    margin-bottom: 4rem;
    margin-top: 1.5rem;
}
.textlist dt {
    position: relative;
    padding-left: 1.2rem;
    margin-top: 1rem;
    font-size: var(--fs-ms);
}
.textlist dt::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #333;
}
.textlist dd {
    margin: 0.25rem 0 1rem 1.5rem;
    text-indent: -0.8rem;
    color: var(--c-gray-700);
    line-height: 1.4;
}
.textlist dd::before {
    content: "- ";
}

.layerTop {
    position: relative;
    font-size: var(--fs-ml);
    font-weight: bold;
    padding: 2rem 0;
    text-align: center;
}
.layerCon p {
    display: inline-block;
    font-size: var(--fs-ms);
    letter-spacing: -0.1rem;
    line-height: 1.4;
}
.infoType dl {
    margin-top: 2rem;
}
.infoType dd {
    padding-left: 1rem;
}
.infoType p {color:var(--c-gray-700);}
.infoType p + .lst_num {
    margin-top:1rem;
}
.infoType .lst_num {
    margin: 0 0 1rem 0px;
}
.infoType .lst_num li {
    text-indent: -1.4rem;
    padding: 0 0 0 1.4rem;
    color:var(--c-gray-900);
    font-size: var(--fs-xs);
    font-weight: var(--fw-default);
    margin-top:.4rem;
    line-height: 1.4;
    word-break: break-all;
}
.infoType .lst_num li:first-child {
    margin-top:0;
}
.infoType .lst_num2 {
    margin: 0 0 1rem 0px;
}
.infoType .lst_num2 li {
    text-indent: -1.7rem;
    padding: 0 0 0 2rem;
    color: inherit;
    background: none !important;
    margin: 0 !important;
    line-height: 1.6;
}
.infoType ul.guide {
    margin: 0;
    padding: 0;
    font-size: inherit;
}
.infoType ul.guide li {
    position: relative;
    font-size: 0.867em;
    padding: 0 0 0 1.5rem;
    line-height: 1.4;
}
.infoType ul.guide li::before {
    content: "※";
    position: absolute;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    top: 0;
    left: 0;
}

.infoType p.guide3 {
    color: var(--c-gray-600);
    ine-height: 1.4;
    margin: 2rem 0 0 0;
    padding: 0;
}
.infoType .dashed {
    border-top: 1px dashed var(--c-gray-200);
    padding-bottom: 1rem;
}
.infoType .agBgBox {
    background-color: var(--gray-300);
    padding: 1.5rem;
    border-radius: 0.4rem;
}

/******************** 약관 본문페이지 ************************/
.cntAgree + .depTit3 {
    padding: 0 !important;
}
.cntAgree .tblDefault {
    margin-bottom: 1rem;
}

/******************** 약관 팝업 ************************/
.agreeTit {
    font-size: 1.6rem;
    font-weight: var(--fw-bold);
    color: var(--c-gray-800);
    line-height: 1.2;
    vertical-align: middle;
    padding: 1.5rem 0;
}
.popAgreeWrap {
    font-size: var(--fs-xxs);
    color: var(--c-gray-700);
    font-weight: var(--fw-regular);
}

.agreeBox {
    margin: 2rem 2.4rem;
}
.agreeBox + .agreeBox {
    margin-top: 2rem;
}
.popAgreeWrap .divider {
    display: block;
    width: 100%;
    height: 0.8rem;
    border-top: 0.8rem solid var(--c-gray-100);
}

.layerTit {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
#layerTit {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
.table > .tblDefault > thead > tr > th,
.table > .tblDefault > thead > tr > td,
.table > .tblDefault > tbody > tr > th,
.table > .tblDefault > tbody > tr > td {
    font-size: var(--fs-xxs);
}

.agreeBox .tblDefault > thead > tr > th {
    font-size: var(--fs-xxs);
}
.agreeBox .tblDefault > thead > tr > td {
    font-size: var(--fs-xxs);
}
.agreeBox .tblDefault > tbody > tr > th,
.agreeBox .tblDefault > tbody > tr > td {
    font-size: var(--fs-xxs);
}
.agreeBox .tblDefault.al > thead > tr > th {
    font-size: var(--fs-xxs);
    text-align: center;
}
.agreeBox .tblDefault.al > thead > tr > td {
    font-size: var(--fs-xxs);
}
.agreeBox .tblDefault.al > tbody > tr > th {
    font-size: var(--fs-xxs);
    text-align: center;
    padding: 0.8rem 0.5rem;
    word-break:keep-all;
}
.agreeBox .tblDefault.al > tbody > tr > td {
    font-size: var(--fs-xxs);
    text-align: left;
    padding: 0.8rem 0.5rem;
}
.agreeBox .tblDefault.ac thead th,
.agreeBox .tblDefault.ac thead td {
    font-size: var(--fs-xxs);
}
.agreeBox .tblDefault.ac > tbody > tr > th,
.agreeBox .tblDefault.ac > tbody > tr > td {
    font-size: var(--fs-xxs);
    text-align: center;
    padding: 0.8rem 0.5rem;
}
.agreeBox .tblDefault.ac > tbody > tr > th > strong,
.agreeBox .tblDefault.ac > tbody > tr > td > strong {
    font-size: 1.4rem !important;
}
.agreeBox .sign {
    display: block;
    text-align: right;
    font-weight: bold;
    margin-top: 0.5rem;
}

.agType1 * {
    font-size: 1.2rem;
    letter-spacing: -0.1rem;
    line-height: 1.4;
}
.agType1 h1 {
    font-size: 1.8em;
    padding: 0.5rem 0 1.5rem 0;
    word-break: keep-all;
}
.agType1 h2 {
    font-size: 1.4rem;
    padding: 0 0 0.5rem 0;
}
.agType1 h4 {
    font-weight: bold;
    padding: 0 0 0.5rem 0;
}
.agType1 ul + h4 {margin-top:1rem;}

.agType1 span {
    display: inline;
}
.agType1 p:not(:last-child) {
    margin-bottom: 0.5rem;
}
.agType1 .ag-underline {
    text-decoration: underline;
    font-size: 1.2em;
    font-weight: var(--fw-bold);
}
.agType1 .ag-list1 {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1rem;
}
.agType1 .ag-list2 {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.5rem;
}
.agType1 img.contain {
    width: 100%;
    height: auto;
}
.agType1  .info-list {margin-bottom:2rem;}
.agType1  .info-list li {display: flex; gap:1rem; margin-top:2rem;}
.agType1  .info-list li:first-child {margin-top:0;}
.agType1  .info-list li .ico {flex-shrink:0;}
.agType1  .info-list li .text {display: flex; flex-direction: column; gap:.6rem;}
.agType1  .opAgTxt {font-size:1.4rem;}
.lst_num > li {
    font-size: 1.2rem;
}
.lst_num > li > strong,
.lst_num > li > strong > span,
.lst_num > li > span {
    display: inline !important;
    font-size: 1.2rem;
}

.color3 {
    color: var(--primary) !important;
}
.color4 {
    color: var(--negative) !important;
}

.newPOPType1 * {
    font-size: 1.4rem;
    word-break: keep-all;
}
.newPOPType1 p {
    font-size: 1.4rem;
    word-break: break-all;
}
.newPOPType1 p.tac {
    display: block;
    text-align: center;
}
.newPOPType1 p strong {
    font-size: 1.4rem;
}
.newPOPType1 p + .lst_num {
    margin-top:1rem;
}
.newPOPType1 > .lst_num + .lst_num {
    margin-top:1rem;
}
.newPOPType1 > .lst_num li {
    margin-top:.4rem;
    font-size:var(--fs-xs);
    color: var(--c-gray-900);
}
.newPOPType1 > .lst_num li:first-child {
    margin-top:0;
}
.newPOPType1 h4 {
    margin-top: 1rem;
}
.newPOPType1 h4:first-child {
    margin-top: 0;
}

.agPro span {
    display: inline-block !important;
}
.agPro .con .tit_wrap {
    margin-top: 2rem;
}
.agPro .con .tit_wrap span {
    font-size: 2rem;
    font-weight: var(--fw-bold);
}
.agPro .tblDefault {
    margin-bottom: 1rem;
}
.agPro .tblDefault > tbody > tr > td > img {
    max-width: 100%;
}
.agPro .tblDefault > tbody > tr > td > strong {
    display: inline;
}
.agPro div img {
    max-width: 100%;
}
.agPro .color3 {
    color: var(--primary);
}
.agPro .color4 {
    color: var(--negative);
}
.agPro .linebox02 {
    width: 100%;
    border-radius: 1rem;
    background: var(--c-gray-50);
    padding: 1.5rem;
    margin: 0 0 1rem;
}
.agPro .call_wrap {
    text-align: center;
    background: url(../img/bg_phone.svg) no-repeat top center/7.4rem 6rem;
    padding-top: 8rem;
}
.agPro .call_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.agPro .call_wrap p {
    display: block;
}
.agPro .call_wrap p.tit strong {
    font-size: var(--fs-ms);
    font-weight: var(--fw-bold);
}
.callBtn {
    width: fit-content;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-default);
    border-radius: 0.6rem;
    padding: 0 2rem;
    text-align: center;
    background: var(--primary);
    color: var(--white);
    margin: 1rem 0;
}
.info3_wrap {
    padding-left: 0.8rem;
    position: relative;
}
.info3_wrap::before {
    content: "";
    position: absolute;
    top: 0.6rem;
    left: 0;
    width: 0.3rem;
    height: 0.3rem;
    background-color: var(--c-gray-600);
    border-radius: 50%;
}
.agPro .decs {
    font-size: var(--fs-xs) !important;
    font-weight: var(--fw-regular);
    line-height: 1.2;
}

.agBgBox1 {
    background-color: var(--gray-300);
    padding: 1rem;
    border-radius: 0.4rem;
}
.agBgBox1 p {
    padding: 0;
}
.agBox1 {
    border-top: 1px solid var(--c-gray-300);
    border-bottom: 1px solid var(--c-gray-300);
    padding: 1rem 0;
}

.agreeBox .markUp {
    position: relative;
    font-size: inherit;
    padding-left: 1.8rem;
}
.agreeBox .markUp::before {
    content: "└";
    position: absolute;
    left: 0;
    top: 0;
    width: 1rem;
}
/*약관상세보기 등급*/
.agreeBox .grade {
    display: inline-block;
    margin-right: 0.5rem;
}
.agreeBox .grade span {
    display: inline-block;
    width: 3.6rem;
    height: 2.2rem;
    color: var(--white);
    text-align: center;
    line-height: 2.1rem;
    border-radius: 1.5rem;
    font-size: 1.2rem;
    font-weight: bold;
}
.agreeBox .grade span.one {
    background: var(--cobalt-blue);
}
.agreeBox .grade span.three {
    background: #fcdb19;
    color: #051e37;
}
.agreeBox .grade span.five {
    background: #ee3f24;
}
/* 약관등급 이미지 */
.grade_qr_img_wrap span {
    display: inline-block;
    vertical-align: top;
}
.grade_qr_img_wrap span img {
    max-width: 100%;
}
.grade_qr_img_wrap .grade {
    width: 58%;
}
.grade_qr_img_wrap .qr {
    width: 40%;
    float: right;
    margin-top: -1.5rem;
}
/* 약관내 테이블 */
.tblDefault.tableBlock {
    border: 0;
}
.tblDefault.tableBlock colgroup {
    display: none;
}
.tblDefault.tableBlock * {
    box-sizing: border-box;
}
.tblDefault.tableBlock td {
    padding: 0.4rem;
    height: auto;
}
.tblDefault.tableBlock td img {
    max-width: 100%;
}

.tblDefault.tableBlock thead {
    display: none;
}
.tblDefault.tableBlock tr {
    display: block;
    margin-bottom: 1rem;
    border-top: none;
}
.tblDefault.tableBlock th,
.tblDefault.tableBlock td {
    display: block;
    position: relative;
    padding: 1rem 0;
    padding-left: calc(50% + 1rem);
    border-width: 0 0 1px 0;
}
.tblDefault.tableBlock td:before {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: var(--c-gray-100);
    border-bottom: 1px solid var(--c-gray-200);
}
.tblDefault.tableBlock td:nth-child(1) {
    border-top: 1px solid var(--dark-blue-400);
}
/*금융상품 중요사항안내 테이블*/
.tblDefault.tableBlock.finan_pro01 td:nth-child(1):before {
    content: "";
}
.tblDefault.tableBlock.finan_pro01 td:nth-child(2):before {
    content: "고정금리";
}
.tblDefault.tableBlock.finan_pro01 td:nth-child(3):before {
    content: "변동금리";
}
.tblDefault.tableBlock.finan_pro01 td:nth-child(4):before {
    content: "혼합금리";
}

.tblDefault.tableBlock.finan_pro02 td:nth-child(1):before {
    content: "원리금 균등상환";
}
.tblDefault.tableBlock.finan_pro02 td:nth-child(2):before {
    content: "원금 균등상환";
}
.tblDefault.tableBlock.finan_pro02 td:nth-child(3):before {
    content: "만기 일시상환";
}

.tblDefault.tableBlock.finan_pro03 td:nth-child(1):before {
    content: "대출기간";
}
.tblDefault.tableBlock.finan_pro03 td:nth-child(2):before {
    content: "원금";
}
.tblDefault.tableBlock.finan_pro03 td:nth-child(3):before {
    content: "이자";
}
.tblDefault.tableBlock.finan_pro03 td:nth-child(4):before {
    content: "상환금액";
}
.tblDefault.tableBlock.finan_pro03 td:nth-child(5):before {
    content: "대출잔액";
}

.tblDefault.tableBlock.finan_pro04 td:nth-child(1):before {
    content: "담보권";
}
.tblDefault.tableBlock.finan_pro04 td:nth-child(2):before {
    content: "대출상품";
}
.tblDefault.tableBlock.finan_pro04 td:nth-child(3):before {
    content: "담보의 대상";
}
.tblDefault.tableBlock.finan_pro04 td:nth-child(4):before {
    content: "담보권 설정의 절차";
}

.tblDefault.tableBlock.finan_pro05 td:nth-child(1):before {
    content: "담보권";
}
.tblDefault.tableBlock.finan_pro05 td:nth-child(2):before {
    content: "대출상품";
}
.tblDefault.tableBlock.finan_pro05 td:nth-child(3):before {
    content: "담보권의 실행";
}

.tblDefault.tableBlock.finan_pro06 td:nth-child(1):before {
    content: "대출금액";
}
.tblDefault.tableBlock.finan_pro06 td:nth-child(2):before {
    content: "5천만원 이하";
}
.tblDefault.tableBlock.finan_pro06 td:nth-child(3):before {
    content: "5천만원 초과 1억원 이하";
}
.tblDefault.tableBlock.finan_pro06 td:nth-child(4):before {
    content: "1억원 초과 10억원 이하";
}
.tblDefault.tableBlock.finan_pro06 td:nth-child(5):before {
    content: "10억원 초과";
}

.tblDefault.tableBlock.finan_pro07 td:nth-child(1):before {
    content: "";
}
.tblDefault.tableBlock.finan_pro07 td:nth-child(2):before {
    content: "고정금리";
}
.tblDefault.tableBlock.finan_pro07 td:nth-child(3):before {
    content: "변동금리";
}
.tblDefault.tableBlock.finan_pro07 td:nth-child(4):before {
    content: "혼합금리";
}
/* 예적금 상품설명서 테이블 */
.pro_table {
    width: 100%;
    overflow: hidden;
}
.pro_table table {
    border-top: 3px solid #00407e;
    border-bottom: 1px solid #c3c3c3;
    width: 99%;
}
*:first-child + html .pro_table table {
    border-collapse: collapse;
}
.pro_table table th {
    padding: 0.8rem 0.4rem 0.8rem 3px;
    color: #333;
    background-color: #f9f9f9;
    text-align: center;
    line-height: 2.2rem;
    border-top: 1px solid #c3c3c3;
    border-right: 1px solid #c3c3c3;
}
.pro_table table td {
    border-top: 1px solid #c3c3c3;
    padding: 0.8rem 0.4rem 5px 3px;
    color: #555;
    background-color: #fff;
    line-height: 1.8rem;
    text-align: center;
    border-right: 1px solid #c3c3c3;
    letter-spacing: 0;
}
.pro_table table .left_line {
    border-left: 1px solid #c3c3c3;
}
.pro_table table .right_line {
    border-left: 1px solid #c3c3c3;
}
.pro_table table dl {
    overflow: hidden;
    position: relative;
}
.pro_table table dt {
    color: #666;
    font-size: 2rem;
    font-weight: bold;
    line-height: 2.7rem;
}
.pro_table table dd {
    color: #00407e;
    font-size: 2.2rem;
    font-weight: bold;
}
.pro_table table dd span {
    color: #01305e;
    font-size: 5rem;
    font-weight: bold;
    line-height: 4.5rem;
    letter-spacing: -0.2rem;
}
/*회전식 단리정기예끔 예시테이블 2022-04-20*/
.pro_table.qq table {
    border: 0;
}
.pro_table.qq tr.two td {
    border-bottom: 3px solid #00407e;
    padding: 3px;
}
.pro_table.qq tr.three td {
    border: 0 !important;
    vertical-align: top;
}
.pro_table.qq td.line0 {
    border: 0 !important;
}
.pro_table.qq .bg_blue {
    background: #b9deef;
    font-weight: bold;
}

/******************** 공통 ************************/
/* 예금자보호 팝업 */
.bgProtc {
    background-color: var(--dark-blue-50) !important;
}
.bgProtc .popListBox {
    padding-bottom: 9rem;
}
.protcTxt {
    display: block;
    color: var(--dark-blue-200);
    font-size: var(--fs-xxs);
}
.protcBtnArea {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 7rem;
    background-color: var(--white);
    padding: 1.6rem 2.4rem 0 2.4rem;
    z-index: 100;
}
.layerPopWrap:not(.on) .protcBtnArea {
    display: none !important;
}

.protcBtnArea .close {
    font-size: var(--fs-xs);
    color: var(--c-gray-800);
}
.protcBtnArea button {
    width: fit-content;
}
.noShow {
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
}
/* 주소찾기 */
.addrBox {
    position: relative;
    border-radius: 1rem;
    border: 1px solid var(--c-gray-200);
    padding: 1.5rem;
    margin: 0 0 1rem;
    font-size: var(--fs-xs);
    cursor: pointer;
    margin-bottom: 1.5rem;
}
.addrBox > span {
    display: block;
}
.addrBox > span + span {
    margin-top: 0.5rem;
}
.addrBox > .post {
    color: var(--cobalt-blue);
    font-weight: var(--fw-regular);
}
.addrBox > .addr {
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
}
.addrBox > .addrList {
    margin-top: 1rem;
}
.addrBox > .addrList li {
    font-size: var(--fs-xxs);
    color: var(--c-gray-600);
}
.addrBox > .addrList li + li {
    margin-top: 0.5rem;
}
.addrBox > .addrList li::before {
    content: "";
    display: inline-block;
    width: 5.8rem;
    height: 2.1rem;
    color: var(--c-gray-800);
    border-radius: 9999px;
    border: 1px solid var(--c-gray-200);
    font-size: var(--fs-xxs);
    text-align: center;
    line-height: 2.1rem;
    margin-right: 0.5rem;
}
.addrBox > .addrList li:nth-child(1)::before {
    content: "지번";
}
.addrBox > .addrList li:nth-child(2)::before {
    content: "참고항목";
}
.addrBox.on {
    border-color: var(--cobalt-blue);
}
/* 상담사찾기 */
.borderBox {
    position: relative;
    border-radius: 1rem;
    border: 1px solid var(--c-gray-200);
    padding: 1.5rem;
    font-size: var(--fs-xs);
}
.borderBox.on {
    border-color: var(--cobalt-blue);
}
.borderBox > a {
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.5rem;
}
.borderBox > a > span {
    display: block;
}
.borderBox > a > .sTxtBlue {
    font-size: var(--fs-xs);
    color: var(--cobalt-blue);
    font-weight: var(--fw-regular);
}
.borderBox > a > .tit {
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
}
/* 서명영역 */
.signBox {
    border-radius: 1rem;
    padding: 1.5rem;
    background-color: var(--c-gray-50);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.signBox > span {
    display: block;
    color: var(--c-gray-800);
}
.signBox > .desc {
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    line-height: 1.4;
    padding-bottom: 1rem;
}
.signBox > .stxt {
    font-size: var(--fs-xxs);
    font-weight: var(--fw-regular);
    text-align: right;
}
.signBox > .signarea {
    font-size: var(--fs-ms);
    font-weight: var(--fw-default);
    text-align: right;
}
.signBox > .txtl {
    font-size: var(--fs-ms);
    font-weight: var(--fw-default);
    text-align: right;
}
.signBox > span > em {
    display: inline-block;
    width: 6rem;
    border-bottom: 1px solid var(--c-gray-800);
    margin: 0 0.5rem;
}
.signBox.notbg {
    background-color: transparent;
}
/* 리스트 */
.gap05 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.gap10 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.lgap08 > li + li {
    margin-top: 0.8rem;
}
/* 프로그레스바 */
progress {
    width: 100%;
    height: 0.3rem;
    background-color: var(--c-gray-100);
}
progress::-webkit-progress-bar {
    background-color: var(--c-gray-100);
}
progress::-webkit-progress-value {
    background-color: var(--cobalt-blue);
}
progress::-moz-progress-bar {
    background-color: var(--cobalt-blue);
}

/* 로딩 스피너 */
.loadingWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: auto;
}
/* .loadingSpinner {width: 5.6rem;height: 5.6rem;border: 5px solid var(--cobalt-blue);border-top: 5px solid var(--c-gray-200);border-radius: 50%;animation: rotate 1.5s linear infinite;} */
/* @keyframes rotate {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
} */
.loadingSpinner {
    width: 5.6rem;
    height: 5.6rem;
    animation: rotate 1.5s linear infinite;
}
.spinnerCircle {
    animation: dash 1.5s ease-in-out infinite;
    transform-origin: center;
    stroke: var(--cobalt-blue);
}

.loadingWrap .loadingbar {
}
.loadingWrap .loadingTit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin: 0 2rem 2rem 2rem;
}
.loadingWrap .loadingTit span {
    display: block;
    font-size: var(--fs-ms);
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
    text-align: center;
    margin-top: 1rem;
}
.loadingbar .progress-bar {
    width: 13rem;
    height: 0.7rem;
    background-color: var(--c-gray-200);
    border-radius: 10rem;
    position: relative;
    overflow: hidden;
}
.progress-bar-gauge {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0.7rem;
    border-radius: 100px;
    background-color: var(--cobalt-blue);
    animation-name: loading-bar;
    animation-duration: 2400ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}
.loadingWrap.bg {
    background-color: var(--c-gray-50);
}
.loadingBox {
    width: 20rem;
}
.loadingBox .infoTxt {
    font-size: var(--fs-xs);
    color: #113961;
    font-weight: var(--fw-regular);
    vertical-align: middle;
    text-align: center;
}
.loadingBox .infoTxt em {
    font-size: var(--fs-ms);
    color: #113961;
    font-weight: var(--fw-default);
}
.loadingBox .vCi {
    width: 100%;
    height: 4rem;
    background: url("../img/ci_osb_vertical.svg") no-repeat top center / 19rem
        3.9rem;
    margin-top: 1.6rem;
}
.loadingBox .hCi {
    width: 100%;
    height: 8rem;
    background: url("../img/ci_osb_horizon.svg") no-repeat top center / 13rem
        7.9rem;
    margin-bottom: 1.6rem;
}
.color_light_gray {
    color: var(--c-gray-300);
}

.title_big_h1 {
    width: 100%;
    height: auto;
    line-height: 3.4rem;
    font-size: 2.4rem;
    font-weight: var(--fw-bold);
    color: var(--c-gray-800);
}

button.plus_add {
    width: 100%;
    height: 4.4rem;
    border-radius: 1rem;
    border: 1px solid #e3e5e8;
    text-align: center;
    margin-top: 2rem;
    background: white url("../img/plus_big.svg") no-repeat;
    background-position: center center;
    background-size: 2.4rem 2.4rem;
}
.layerBox .txt_n {
    height: auto;
    line-height: 1.9rem;
    width: 100%;
    font-size: 1.6rem;
    font-weight: 400;
    color: #3a404b;
    margin-bottom: 1rem;
}
.layerBox .txt_n b {
    font-weight: 700;
}

.month_calc {
    width: 100%;
    height: 57px;
    border: 1px solid #e3e5e8;
    border-radius: 1rem;
    text-align: center;
    line-height: 55px;
    font-size: 1.8rem;
    font-weight: 700;
    color: #3a404b;
    margin-bottom: 1.2rem;
}
.month_calc span {
    color: #3882f5;
}
.month_calc i {
    display: inline-block;
    width: 2.4rem;
    height: 2.4rem;
    background: url("../img/calc123.svg") no-repeat;
    background-size: 100% 100%;
    margin-right: 0.4rem;
    vertical-align: middle;
    margin-top: -0.2rem;
}
.popTitSubTxt span {
    color: #3882f5;
}

.big_list {
    width: 100%;
    height: auto;
    margin-bottom: 1.2rem;
}
.big_list .big_list_cell {
    height: 2.9rem;
    width: 100%;
    line-height: 2.9rem;
    font-size: 1.8rem;
    font-weight: 500;
    color: #2c313a;
    margin-bottom: 1.6rem;
}
.big_list .big_list_cell span {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    text-align: center;
    line-height: 2.6rem;
    color: white;
    font-size: 1.4rem;
    font-weight: 600;
    display: inline-block;
    margin-right: 1rem;
    background: #6790cb;
}

.contents_wrap {
    width: 100%;
    height: 100%;
    position: fixed;
    bottom: 0px;
    left: 0px;
    padding: 2.4rem;
    padding-top: calc(2.4rem + 0px + 2.8rem);
    line-height: 2.5rem;
    font-size: 1.8rem;
    font-weight: 500;
    color: #3a404b;
    text-align: left;
}
.contents_wrap b {
    display: block;
    height: auto;
    line-height: 3.4rem;
    text-align: left;
    color: #3a404b;
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
}
header.header_for_web {
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 2.9rem;
    background: white;
    border-bottom: 1px solid #e3e5e8;
    z-index: 9999;
}
header.header_for_web .top_header {
    width: 100%;
    height: 2.8rem;
    text-align: center;
    line-height: 2.8rem;
    background: white url("../img/CI12.svg") no-repeat;
    background-size: 9.9rem 2rem;
    background-position: center center;
}
header.header_for_web .header_bottom {
    width: 100%;
    height: 5.6rem;
    line-height: 5.6rem;
    text-align: center;
    position: relative;
    font-size: 1.8rem;
    font-weight: 500;
    color: #2c313a;
}
header.header_for_web .header_bottom button.left {
    width: 2.4rem;
    height: 2.4rem;
    border: none;
    position: absolute;
    left: 2rem;
    top: 50%;
    margin-top: -1.2rem;
    background: url("../img/item-left.svg") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    border: none;
}
.popBtnbox.pd_b_added {
    height: calc(8.9rem + 3.7rem);
}
.conBtm.pd_b_added {
    height: calc(8.9rem + 3.7rem);
    padding-bottom: 4rem;
}
.popBtnbox.pd_b_added span {
    display: block;
    text-align: center;
    width: 100%;
    height: 1.7rem;
    line-height: 1.7rem;
    position: absolute;
    left: 0px;
    bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 500;
    color: #6a7684;
}
.pd20 {
    padding: 2rem;
}
.divider2 {
    width: calc(100% + 4.8rem);
    height: 0.8rem;
    background: #f9fafa;
    margin-left: -2.4rem;
    margin-right: -2.4rem;
}

span.mid_title {
    display: block;
    height: 2.5rem;
    line-height: 2.5rem;
    width: 100%;
    text-align: left;
    font-size: 1.8rem;
    font-weight: 700;
    color: #2c313a;
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.mini_text_right {
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    text-align: right;
    font-size: 1.4rem;
    font-weight: 500;
    color: #6a7684;
    margin-bottom: 2rem;
}
.inputBox .won {
    width: 1.4rem;
    height: 1.9rem;
    position: absolute;
    text-align: center;
    line-height: 1.9rem;
    font-size: 1.6rem;
    font-weight: 400;
    color: #4f5867;
    right: 1.2rem;
    top: 50%;
    margin-top: -1rem;
}
ul.cont {
    font-size: 1.6rem;
    font-weight: normal;
    color: black;
    line-height: 2.3rem;
}
ul.cont li {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    color: inherit;
}
.popAlert.tl {
    text-align: left;
}
.popAlert.tl * {
    text-align: left;
}
.popAlert.tl .sub-list * {
    font-size: 1.6rem;
    line-height: 2.3rem;
}
.blue_bg {
    border-radius: 0.6rem;
    background: rgb(232, 237, 240);
    color: black;
    padding: 1rem;
    font-size: 1.6rem;
    font-weight: normal;
    line-height: 2.3rem;
    text-align: left;
    margin-bottom: 1rem;
}
.accoMenu .accoMlist {
    padding-left: 2rem;
    padding-right: 2rem;
}
.myAccountBox {
    padding-left: 2rem;
    padding-right: 2rem;
}
footer.span_bottom_footer {
    display: block;
    text-align: center;
    width: 100%;
    height: 2.7rem;
    line-height: 1.7rem;
    position: fixed;
    left: 0px;
    bottom: -1px;
    font-size: 1.2rem;
    font-weight: 500;
    color: #6a7684;
}

.depTit3 .roundChk.gap3 {
    width: auto;
    display: inline-block;
    float: right;
    padding: 0px;
}
.depTit3 .roundChk.gap3 label {
    font-size: 1.6rem;
    font-weight: 500;
    color: #3a404b;
}
.depTit3 .roundChk > li > label:before {
    margin-top: -1px;
}

.custom_select {
    cursor: pointer;
    width: 100%;
    height: 5.4rem;
    border: 1px solid #e3e5e8;
    border-radius: 1rem;
    padding-left: 1.2rem;
    font-size: 1.8rem;
    line-height: 5.4rem;
    font-weight: 500;
    color: #3a404b;
    position: relative;
    padding-right: 4rem;
}
.custom_select.active {
    border: 1px solid #3882f5;
    z-index: 2;
}
.custom_select:after {
    content: "";
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    background: url("../img/sla.svg") no-repeat;
    background-size: 100% 100%;
    position: Absolute;
    right: 1.2rem;
    top: 1.5rem;
}
.custom_select .custom_select_options {
    display: none;
    height: 1px;
}
.custom_select.active .custom_select_options {
    display: block;
    width: 100%;
    height: auto;
    top: 6.4rem;
    left: 0px;
    border: 1px solid #e3e5e8;
    border-radius: 1rem;
    overflow: hidden;
    position: absolute;
}
.custom_select.active .custom_select_options .custom_select_cell {
    width: 100%;
    height: 5.7rem;
    line-height: 5.7rem;
    padding-left: 1.6rem;
    font-size: 1.8rem;
    font-weight: 500;
    color: #3a404b;
    text-align: left;
    padding-right: 1.6rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.custom_select.active .custom_select_options .custom_select_cell:hover {
    background: #f1f6fe;
    color: #3882f5;
}

.fixed_style {
    background: white;
    position: fixed;
    z-index: 9999;
    top: 5.5rem;
    left: 0px;
    margin: 0px !important;
    box-sizing: border-box;
    padding: 1rem;
    padding-left: 2.4rem;
    padding-right: 2.4rem;
}
.with_fixed_style {
    padding-top: 7.4rem !important;
}
.special_adding {
    background: white;
    z-index: 9;
    line-height: 2.7rem !important;
}
.writeInfo > li > .slabel {
    font-size: 1.4rem !important;
    font-weight: 400 !important;
    line-height: 2rem !important;
    color: #3a404b !important;
}
.cardBox.jh li > .sTxt {
    margin-top: 0.4rem;
}
.rl_jh {
    position: relative;
}
.check_right_jh {
    position: absolute;
    right: 0px;
    top: 0px;
}
.check_right_jh span {
    margin-right: 0px !important;
}

.none_nothing {
    width: 100%;
    height: 44.4rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.none_nothing div.cute_box {
    width: 100%;
    height: auto;
    text-align: center;
    line-height: 1.9rem;
    font-size: 1.6rem;
    font-weight: 500;
    color: #c7ccd1;
}
.none_nothing div.cute_box i {
    display: block;
    width: 2.4rem;
    height: 1.8rem;
    background: url("../img/cute.svg") no-repeat;
    background-size: 100% 100%;
    margin: 0px auto;
    margin-bottom: 1rem;
}

.myAccoBox .btnfixWrap {
    width: calc(100% + 3.2rem) !important;
    margin-left: -1.6rem;
    margin-right: -1.6rem;
    background: #f1f6fe;
    border-top: 0px solid #d4d4d4;
}

.myAccoBox .btnfixWrap.dc {
    width: calc(100% + 3.2rem) !important;
    margin-left: -1.6rem;
    margin-right: -1.6rem;
    background: #fff3f3;
    border-top: 0px solid #d4d4d4;
}
.myAccoBox.brd {
    overflow: hidden;
}

.loading_wrap {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 999999999;
    left: 0px;
    top: 0px;
    display: flex;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
}
.loading_wrap div.loading_ch {
    width: 16rem;
    height: 12.3rem;
    font-size: 1.6rem;
    text-align: center;
    font-weight: 500;
    color: white;
}
.loading_wrap div.loading_ch i {
    display: block;
    margin: 0px auto;
    width: 7.4rem;
    height: 7.4rem;
    background: url("../img/book.svg") no-repeat;
    background-size: 100% 100%;
    margin-bottom: 2rem;
}
.cardBox li > button.x_ja {
    width: 2rem !important;
    height: 2rem !important;
    background: url("../img/x_.svg") no-repeat !important;
    background-size: 100% 100% !important;
    position: absolute !important;
    right: 0px !important;
    top: 50% !important;
    margin-top: 0px !important;
    border: 0px solid #d4d4d4 !important;
}
.myAccoBox .btnfixWrap button {
    font-size: 1.6rem !important;
    font-weight: 500 !important;
    color: #3a404b !important;
}

.downing {
    width: 100%;
    height: 2.2rem;
    background: url("../img/down.png") no-repeat;
    background-position: center center;
    background-size: 2rem 2.2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.complete .conTitC {
    font-size: 2.4rem;
}
.complete span {
    font-size: 1.6rem;
}
.complete .conTitC {
    padding-bottom: 1.2rem;
}

.fixed_auto_height {
    position: fixed;
    z-index: 2;
    top: 0px;
    left: 0px;
    height: auto;
    width: 100%;
    background: white;
    padding: 2rem;
    padding-bottom: 0px;
    height: 22rem;
}
.jh_sp_wrapping {
    padding-top: 22rem;
}

.trans_history_jh {
    width: 100%;
    height: auto;
    position: relative;
    padding-bottom: 3.2rem;
    border-bottom: 1px solid #e3e5e8;
}
.trans_history_jh h3 {
    display: block;
    width: 100%;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: left;
    color: #2c313a;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0px;
    padding: 0px;
    margin-bottom: 0.2rem;
}
.trans_history_jh span {
    display: block;
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    font-size: 1.4rem;
    font-weight: 400;
    color: #4f5867;
    margin-bottom: 0.8rem;
}
.trans_history_jh span.resting {
    text-align: right;
    height: 2.8rem;
    font-size: 2rem;
    font-weight: 700;
    color: #2c313a;
}
.trans_history_jh span.resting i {
    font-style: normal;
    font-size: 1.4rem;
    font-weight: 400;
    color: #6a7684;
    margin-right: 0.8rem;
}
.trans_history_jh2 {
    width: 100%;
    height: auto;
}
.trans_history_jh2 h5 {
    display: block;
    height: 1.9rem;
    line-height: 1.9rem;
    text-align: left;
    margin: 0px;
    padding: 0px;
    margin-bottom: 1rem;
    margin-top: 4rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: #3a404b;
}
.dbbb {
    display: block !important;
}
.jun_account_jh {
    width: 100%;
    height: auto;
    background: #f4f5f6;
    padding: 2rem;
    padding-left: 2.4rem;
    padding-right: 2.4rem;
}
.jun_account_jh .jun_account_jh_cell {
    width: 100%;
    min-height: 19.7rem;
    border-radius: 1.6rem;
    background: White;
    padding: 1.6rem;
    padding-left: 2rem;
    padding-right: 2rem;
    height: auto;
}
.jun_account_jh .jun_account_jh_cell .jun_account_jh_cell_header {
    width: 100%;
    min-height: 2.5rem;
    position: relative;
    line-height: 2.5rem;
    font-size: 1.8rem;
    font-weight: 700;
    color: #3a404b;
    display: block;
    margin-bottom: 0.4rem;
    height: auto;
}
.jun_account_jh .jun_account_jh_cell .jun_account_jh_cell_header span {
    display: inline-block;
    vertical-align: top;
    height: 2.1rem;
    line-height: 2.1rem;
    margin-left: 0.8rem;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    background: white;
    border: 1px solid #c7ccd1;
    border-radius: 1rem;
    font-size: 1.2rem;
    font-weight: 500;
    color: #3a404b;
    margin-top: 0.2rem;
}
.jun_account_jh
    .jun_account_jh_cell
    .jun_account_jh_cell_header
    button.dotdotdot {
    width: 2rem;
    height: 2rem;
    border: none;
    background: url("../img/dotdotdot.svg") no-repeat;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 50%;
    margin-top: -1rem;
}
.jun_account_jh .jun_account_jh_cell span.spanning {
    display: block;
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    margin-bottom: 1.6rem;
    font-size: 1.4rem;
    font-weight: 400;
    color: #6a7684;
    text-align: left;
    cursor: pointer;
}
.jun_account_jh .jun_account_jh_cell span i {
    width: 1.2rem;
    height: 1.2rem;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.4rem;
    background: url("../img/copy_paste.svg") no-repeat;
    background-size: 100% 100%;
    margin-top: -0.2rem;
}
.jun_account_jh .jun_account_jh_cell .price_jh {
    width: 100%;
    height: 3.9rem;
    line-height: 3.9rem;
    text-align: center;
    margin-bottom: 1.6rem;
    font-size: 2.8rem;
    font-weight: 700;
    color: #3a404b;
}
.jun_account_jh .jun_account_jh_cell .price_jh button.reset_jh {
    width: 1.8rem;
    height: 1.8rem;
    background: url("../img/rs.svg") no-repeat;
    border: none;
    margin-left: 0.4rem;
}
.jun_account_jh .jun_account_jh_cell .btn_area_jh {
    width: 100%;
    height: 4.5rem;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    gap: 1.2rem;
}
.jun_account_jh .jun_account_jh_cell .btn_area_jh button {
    float: left;
    width: calc(50% - 0.6rem);
    height: 4.5rem;
    background: #f4f5f6;
    border-radius: 1rem;
    cursor: pointer;
    text-align: center;
    border: none;
    font-size: 1.8rem;
    font-weight: 500;
    color: #3a404b;
    flex: 1;
}
.jun_account_jh .jun_account_jh_cell .btn_area_jh button:last-of-type {
    background: #335c97;
    color: white;
}
.dan_jh {
    width: 100%;
    height: auto;
    border-bottom: 0.8rem solid #f9fafa;
    padding-bottom: 0px;
    padding-left: 2.4rem;
    padding-right: 2.4rem;
    padding-top: 2rem;
    background: white;
}
.chong_number_jh {
    width: 100%;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: left;
    margin-bottom: 2.8rem;
    font-size: 1.8rem;
    font-weight: 500;
    color: #3a404b;
}
.chong_number_jh span {
    font-weight: 700;
    color: BLACK;
}

.chong_number_jh .switch_on_off {
    width: auto;
    float: right;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: right;
    font-size: 1.4rem;
    font-weight: 500;
    color: #3a404b;
}
.chong_number_jh .switch_on_off .switch_on_off_itself {
    cursor: pointer;
    width: 4.3rem;
    height: 2.5rem;
    border-radius: 1.25rem;
    background: #c7ccd1;
    vertical-align: top;
    margin-left: 8px;
    cursor: pointer;
    position: relative;
    display: inline-block;
}
.chong_number_jh .switch_on_off .switch_on_off_itself:before {
    content: "";
    display: block;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: white;
    position: absolute;
    left: 0.4rem;
    top: 0.4rem;
}
.chong_number_jh .switch_on_off .switch_on_off_itself.ac {
    background: #3882f5;
}
.chong_number_jh .switch_on_off .switch_on_off_itself.ac:before {
    content: "";
    display: block;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: white;
    position: absolute;
    right: 0.4rem;
    top: 0.4rem;
    left: auto;
}
.hide_calc {
    font-size: 2.4rem !important;
    font-weight: 500 !important;
    color: #6a7684 !important;
}
.dan_jh .dan_jh_header {
    height: 3.3rem;
    line-height: 3.3rem;
    text-align: left;
    width: 100%;
    position: relative;
    font-size: 1.8rem;
    font-weight: 500;
    color: #2c313a;
    padding-right: 2.8rem;
    margin-bottom: 2rem;
}
.dan_jh .dan_jh_header span {
    color: #85909d;
    font-weight: 500;
    font-size: 1.8rem;
    margin-left: 0.8rem;
}
.dan_jh.daechool_jh .dan_jh_header span {
    color: #85909d;
    font-weight: 500;
    font-size: 1.8rem;
    margin-left: 0.8rem;
}

.dan_jh .dan_jh_header:after {
    content: "";
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    background: url("../img/kknd.svg") no-repeat;
    position: Absolute;
    right: 0px;
    top: 50%;
    margin-top: -1.2rem;
}

.dan_jh .dan_jh_header b {
    float: right;
    font-size: 1.8rem;
    font-weight: 700;
    color: #3a404b;
}
.dan_jh .dan_jh_header b i {
    font-style: normal;
    font-weight: 500;
    font-size: 1.8rem;
}

.dan_jh .jun_account_jh_cell {
    width: 100%;
    min-height: 18.7rem !important;
    border-radius: 1.6rem;
    background: #f1f6fe;
    padding: 1.6rem;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-bottom: 2rem;
    height: auto !important;
}

.dan_jh .jun_account_jh_cell.daechool_jh {
    width: 100%;
    height: 19.7rem;
    border-radius: 1.6rem;
    background: #fff3f3;
    padding: 1.6rem;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-bottom: 2rem;
}
.dan_jh .jun_account_jh_cell .jun_account_jh_cell_header {
    width: 100%;
    min-height: 2.5rem;
    position: relative;
    line-height: 2.5rem;
    font-size: 1.8rem;
    font-weight: 700;
    color: #3a404b;
    display: block;
    margin-bottom: 0.4rem;
    height: auto;
}
.dan_jh .jun_account_jh_cell span.mark {
    display: inline-block;
    vertical-align: top;
    height: 2.1rem;
    line-height: 2.1rem;
    margin-right: 0.8rem;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    background: none;
    border: 1px solid #c7ccd1;
    border-radius: 1rem;
    font-size: 1.2rem;
    font-weight: 500;
    color: #3a404b;
    margin-bottom: 1rem;
}

.dan_jh .jun_account_jh_cell span.mark.alert {
    background: #ff2e3c;
    border: 0px solid #d4d4d4;
    color: white;
}

.dan_jh .jun_account_jh_cell span.mark.restrict {
    background: #3882f5;
    border: 0px solid #d4d4d4;
    color: white;
}

.jun_account_jh .jun_account_jh_cell span.mark {
    display: inline-block;
    vertical-align: top;
    height: 2.1rem;
    line-height: 2.1rem;
    margin-right: 0.8rem;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    background: none;
    border: 1px solid #c7ccd1;
    border-radius: 1rem;
    font-size: 1.2rem;
    font-weight: 500;
    color: #3a404b;
    margin-bottom: 1rem;
}

.jun_account_jh .jun_account_jh_cell span.mark.alert {
    background: #ff2e3c;
    border: 0px solid #d4d4d4;
    color: white;
}

.jun_account_jh .jun_account_jh_cell span.mark.restrict {
    background: #3882f5;
    border: 0px solid #d4d4d4;
    color: white;
}
.jun_account_jh .jun_account_jh_cell span.spanning {
    padding-left: 0px;
    padding-right: 0px;
    border: 0px solid #d4d4d4;
}
.dan_jh .jun_account_jh_cell .jun_account_jh_cell_header button.dotdotdot {
    width: 2rem;
    height: 2rem;
    border: none;
    background: url("../img/dotdotdot.svg") no-repeat;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 50%;
    margin-top: -1rem;
}
.dan_jh .jun_account_jh_cell span.spanning {
    display: block;
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    margin-bottom: 1.6rem;
    font-size: 1.4rem;
    font-weight: 400;
    color: #6a7684;
    text-align: left;
    cursor: pointer;
    border: 0px solid #d4d4d4;
    padding-left: 0px;
    padding-right: 0px;
}
.dan_jh .jun_account_jh_cell span i {
    width: 1.2rem;
    height: 1.2rem;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.4rem;
    background: url("../img/copy_paste.svg") no-repeat;
    background-size: 100% 100%;
    margin-top: -0.2rem;
}
.dan_jh .jun_account_jh_cell .price_jh {
    width: 100%;
    height: 3.9rem;
    line-height: 3.9rem;
    text-align: center;
    margin-bottom: 1.6rem;
    font-size: 2.6rem;
    font-weight: 700;
    color: #3a404b;
}
.dan_jh .jun_account_jh_cell .price_jh button.reset_jh {
    width: 1.8rem;
    height: 1.8rem;
    background: url("../img/rs.svg") no-repeat;
    border: none;
    margin-left: 0.4rem;
}
.dan_jh .jun_account_jh_cell .btn_area_jh {
    width: 100%;
    height: 3.5rem;
    flex-flow: row wrap;
    display: flex;
    gap: 1.2rem;
}
.dan_jh .jun_account_jh_cell .btn_area_jh2 {
    width: 100%;
    height: 3.5rem;
}
.dan_jh .jun_account_jh_cell .btn_area_jh button {
    float: left;
    width: calc(50% - 0.6rem);
    height: 3.5rem;
    background: #fff;
    border-radius: 0.6rem;
    cursor: pointer;
    text-align: center;
    border: none;
    font-size: 1.6rem;
    font-weight: 500;
    color: #3a404b;
    border: 1px solid #e3e5e8;
    flex: 1;
    flex-grow: 1;
    gap: 1.2rem;
}

.dan_jh:last-of-type {
    border-bottom: 0px solid #d4d4d4;
}
.jun_account_jh {
    margin-top: -2rem;
    width: calc(100% + 2.4rem + 2.4rem);
    margin-left: -2.4rem;
    margin-right: -2.4rem;
}
.dan_jh {
    width: calc(100% + 2.4rem + 2.4rem);
    margin-left: -2.4rem;
    margin-right: -2.4rem;
}

.myAccountWrap .slick-dots li {
    width: 0.5rem;
    height: 0.5rem;
    position: relative;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
}
.myAccountWrap.five_more {
    white-space: nowrap;
}
.myAccountWrap.five_more .slick-dots li {
    display: inline-block;
    vertical-align: top;
}
.accBnrWrap .slick-dots li {
    width: 0.5rem;
    height: 0.5rem;
    position: relative;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
}
.bd_zero {
    padding-bottom: 0px !important;
    border-bottom: 0px solid #d4d4d4 !important;
}
.layerPopWrap:not(.on) .jh_sp_wrapping {
    display: none;
}
.jh_sp_wrapping .decs {
    font-weight: 500 !important;
}

.loading_with_animation {
    width: 9.2rem;
    height: 10.2rem;
    position: relative;
}
.loading_with_animation i {
    display: block;
    width: 6.2rem;
    height: 6.2rem;
    background: url("../img/osb_bank.svg") no-repeat;
    background-size: 100% 100%;
    margin: 0px auto;
    margin-bottom: 3rem;
}

.loader {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    display: block;
    margin: 3rem auto;
    position: relative;
    color: #fff;
    box-sizing: border-box;
    animation: animloader 1s linear infinite alternate;
}

@keyframes animloader {
    0% {
        opacity: 0;
        box-shadow: -3.8rem -1.2rem, -1.4rem 0, 1.4rem 0, 3.8rem 0;
    }
    33% {
        box-shadow: -3.8rem 0px, -1.4rem -1.2rem, 1.4rem 0, 3.8rem 0;
    }
    66% {
        box-shadow: -3.8rem 0px, -1.4rem 0, 1.4rem -1.2rem, 3.8rem 0;
    }
    100% {
        opacity: 1;
        box-shadow: -3.8rem 0, -1.4rem 0, 1.4rem 0, 3.8rem -1.2rem;
    }
}

.jh_account {
    width: 100%;
    height: auto;
    padding: 1.6rem;
    background: #f9fafa;
    border-radius: 1rem;
    margin-bottom: 2rem;
}
.jh_account b {
    display: block;
    width: 100%;
    height: auto;
    line-height: 2.5rem;
    font-size: 1.8rem;
    font-weight: 700;
    color: #2c313a;
}
.jh_account .jh_line {
    width: 100%;
    height: 1px;
    background: #e3e5e8;
    margin-top: 2rem;
    margin-bottom: 1.6rem;
}
.jh_account span {
    display: block;
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    text-align: left;
    font-size: 1.4rem;
    font-weight: 500;
    color: #6a7684;
}
.jh_account span em {
    float: right;
    font-style: normal;
    font-size: 1.6rem;
    font-weight: 500;
    color: #3a404b;
    height: 2rem;
    line-height: 2rem;
}

.jh_tab {
    width: 100%;
    height: 4.8rem;
    margin-bottom: 2rem;
    position: relative;
}
.jh_tab .jh_tab_cell {
    width: 50%;
    float: left;
    border: 1px solid #e3e5e8;
    border-radius: 1rem 0px 0px 1rem;
    text-align: center;
    line-height: 4.6rem;
    color: #3a404b;
    font-size: 1.4rem;
    font-weight: 500;
    border-right: 0px solid #d4d4d4;
}
.jh_tab .jh_tab_cell:last-of-type {
    border-right: 1px solid #e3e5e8;
    border-radius: 0px 1rem 1rem 0px;
}
.jh_tab .jh_tab_cell.ac {
    border: 1px solid #3882f5;
    background: #f1f6fe;
    color: #3882f5;
}

.jh_on {
    border: 1px solid #3882f5 !important;
    background: #f1f6fe !important;
    color: #3882f5 !important;
    position: relative;
    z-index: 2 !important;
}

.jh_sp_wrapping2 .tabCont {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100% !important;
    overflow: auto;
    padding-top: 25rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 12rem;
}

#toast-container.toast-top-center > div,
#toast-container.toast-bottom-center > div {
    width: calc(100% - 4.8rem) !important;
}

.jh_inner2 {
    padding: 2rem 2.4rem 2rem 2.4rem !important;
}
.rndChk.fs16 label {
    line-height: 1.7;
}
/* 20250812 부터 */
.depTit3 {
    padding-bottom: 2rem;
}
.jh_height_40 {
    width: 100%;
    height: calc(4rem - 0.8rem - 0.8rem);
}
.writeInfo > li:first-child > span.label,
.writeInfo > li:first-child > label {
    padding-top: 2rem;
}

.send_del_jh {
    width: 4rem;
    background: url("../img/send_x.svg") no-repeat center center;
    background-size:2rem;
    cursor: pointer;
    border: none;
    position: absolute;
    right:0;
    top:0;
    bottom:0;
}
.mbt_20 {
    margin-bottom: 2rem;
}

.icoCal {
    padding-left: 3.8rem;
}

.jh_sp_wrapping .tabCont {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding:24rem 2rem 12rem;
}

.font_16 {
    font-size: 1.6rem !important;
}

.mid_tit_jh_18 {
    font-size: 1.8rem;
    width: 100%;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: left;
    margin-bottom: 0.8rem;
    color: #2c313a;
    font-weight: 700;
}
.tl_jh {
    text-align: left !important;
    font-weight: 500 !important;
}
.pagingInfoJh {
    width: 100%;
    height: 2rem;
    text-align: right;
    line-height: 2rem;
    font-size: 1.4rem;
    font-weight: 400;
    color: #4f5867;
    padding-right: 2.4rem;
    padding-left: 2.4rem;
    margin-top: 0.8rem;
}
.pagingInfoJh span {
    color: #b0b7bf;
}
.pagingInfoJh b {
    color: #3882f5;
    font-weight: 500;
}

.pagingInfoJh .pre_jh {
    width: 1.6rem;
    height: 1.6rem;
    background: url("../img/Icon-chevron-left.svg") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    margin-right: 0.4rem;
    display: inline-block;
    vertical-align: middle;
}

.pagingInfoJh .next_jh {
    width: 1.6rem;
    height: 1.6rem;
    background: url("../img/next.svg") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    margin-left: 0.4rem;
    display: inline-block;
    vertical-align: middle;
}

.myAccountWrap .dots-wrap {
    display: block;
    overflow: hidden;
    white-space: nowrap;
}
.myAccountWrap .slick-dots {
    display: flex !important;
    align-items: end;
    justify-content: center;
}

.myAccountWrap.five_more .slick-dots {
    display: inline-block !important;
    align-items: initial;
    justify-content: initial;
    padding-left: calc(50% - 2.25rem - 0.45rem);

    text-align: left;
}

.myAccountWrap {
    overflow: hidden;
}
.myAccountWrap:after {
    content: "";
    display: block;
    width: calc(50% - 2.25rem - 0.45rem);
    height: 0.8rem;
    position: absolute;
    bottom: 1.5rem;
    right: 0px;
    background: white;
    z-index: 9999;
}

.myAccountWrap:before {
    content: "";
    display: block;
    width: calc(50% - 2.25rem - 0.45rem);
    height: 0.8rem;
    position: absolute;
    bottom: 1.5rem;
    left: 0px;
    background: white;
    z-index: 9999;
}
.input.icoId {
    padding-left: 4rem;
}
.input.icoPw {
    padding-left: 4rem;
}
.myAccoWrap {
    padding: 1.6rem;
}
.myAccoWrap > li.list {
    margin-top: 1.1rem;
    padding-top: 1rem;
    gap: 0px;
    border-top: 1px solid #e3e5e8;
}
.myAccoWrap > li.list + li.singleR .num {
    font-size: 1.6rem;
}
.mt12 {
    margin-top: 1.2rem !important;
}
.mb16 {
    margin-bottom: 1.6rem;
}
.listNum2.gray7 li {
    color: #3a404b;
}
.complete .conTitC {
    font-size: 2.6rem;
    line-height: 3.6rem;
}
.detailList li > p.detailLeft {
    font-size: 1.6rem;
}
.mb8 {
    margin-bottom: 0.8rem;
}
.row_down label:before {
    top: 0px !important;
    margin-top: 1px !important;
}
.dan_jh .dan_jh_header:after {
    transform: rotate(180deg);

    transform-origin: center;
}

.dan_jh .dan_jh_header.upside_down:after {
    transform: rotate(0deg);

    transform-origin: center;
}
.tblDefault.table_color_none,
.tblDefault.table_color_none th,
.tblDefault.table_color_none td {
    border:none;
    background:transparent;
}
.error.ico {
    background: url("../img/err_2.svg") no-repeat top center/ 6rem;
}
.error.ico02 {
    background: url("../img/err_3.svg") no-repeat top center/ 6rem;
}
.error {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 7rem 0 0 0;
}
.error .conTitC {
    font-size: var(--fs-xxl);
    padding-bottom: 1.5rem;
}
.error span {
    display: block;
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    line-height: 1.4;
    text-align: center;
    padding-bottom: 1.5rem;
}
.error span {
    font-size: 1.6rem;
}
.bgGrayBox span.without_icon {
    display: block;
    height: 2rem;
    line-height: 2rem;
    text-align: left;
    width: 100%;
    font-size: 1.4rem;
    font-weight: 500;
    color: #6a7684;
    margin-bottom: 0.8rem;
}

.serviceCenter {
    width: 100%;
    text-align: center;
    line-height: 2rem;
    font-size: 1.4rem;
    font-weight: 400;
    color: #6a7684;
}
.serviceCenter i {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: url("../img/Icon-telephone.svg") no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    vertical-align: top;
    margin-right: 0.4rem;
}
.serviceCenter span {
    font-size: 1.4rem;
    font-weight: 500;
    color: #4f5867;
}

.imgBanner {
    margin-top:2rem;
    text-align: center;
}
.imgBanner img {max-width:100%;}

.openBanking {
    background: #f4f5f6 !important;
}
.pdt0 {
    padding-top: 0px;
}
button.jik {
    width: 8rem;
    height: 3.5rem;
    border: 1px solid #e3e5e8;
    border-radius: 0.6rem;
    background: white;
    text-align: center;
    color: #3a404b;
    font-size: 1.6rem;
    font-weight: 500;
    float: right;
    margin-bottom: 2rem;
}
.clear {
    clear: both;
}

.open_banking_more {
    width: 100%;
    height: auto;
    min-height: 4.5rem;
    border: 1px solid #e3e5e8;
    border-radius: 1rem;
    margin-bottom: 2rem;
    line-height: 4.5rem;
    text-align: center;
    background: white;
    font-size: 1.8rem;
    font-weight: 500;
    color: #3a404b;
    cursor: pointer;
    overflow: hidden;
}
.open_banking_more .open_banking_more_detail {
    display: none;
}
.open_banking_more.ac .open_banking_more_detail {
    display: block;
    width: 100%;
    height: auto;
    margin-top: -4.5rem;
    min-height: 7rem;
    background: white;
    position: relative;
    z-index: 2;
}
.open_banking_more.ac
    .open_banking_more_detail
    .open_banking_more_detail_header {
    width: 100%;
    height: 5.7rem;
    background: #335c97;
    text-align: left;
    padding-left: 2rem;
    font-size: 1.8rem;
    color: #f4f5f6;
    font-weight: 500;
    line-height: 5.7rem;
}
.open_banking_more.ac
    .open_banking_more_detail
    .open_banking_more_detail_header
    span {
    margin-left: 0.8rem;
    color: #f4f5f6;
}
.open_banking_more.ac .open_banking_more_detail .open_banking_more_detail_list {
    width: 100%;
    height: auto;
    padding: 2rem;
    position: relative;
    line-height: 1.2;
}
.open_banking_more.ac
    .open_banking_more_detail
    .open_banking_more_detail_list
    .selectItem.status
    li {
    border-bottom: 1px solid #e3e5e8;
    margin-bottom: 1rem;
    padding-bottom: 2rem;
}
.open_banking_more.ac
    .open_banking_more_detail
    .open_banking_more_detail_list
    .selectItem.status
    li:last-of-type {
    border-bottom: 0px solid #dadada;
}
.open_banking_more.ac
    .open_banking_more_detail
    .open_banking_more_detail_list
    button.more_jik {
    width: 100%;
    height: 3.5rem;
    background: #f4f5f6;
    cursor: pointer;
    border: 0px solid #d4d4d4;
    border-radius: 0.6rem;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 500;
    color: #3a404b;
}

.mid_span {
    width: 100%;
    height: auto;
    line-height: 2.5rem;
    text-align: left;
    font-size: 1.8rem;
    font-weight: 500;
    color: #3a404b;
    margin-bottom: 2rem;
}
.jb_span {
    width: 100%;
    height: auto;
    line-height: 1.9rem;
    text-align: left;
    font-size: 1.6rem;
    font-weight: 500;
    color: #3a404b;
    margin-bottom: 2rem;
}

.hando_cont {
    width: 100%;
    height: auto;
    padding: 2rem;
    background: #f9fafa;
    border-radius: 1rem;
    margin-bottom: 1rem;
}
.hando_cont b {
    display: block;
    height: 1.9rem;
    line-height: 1.9rem;
    width: 100%;
    text-align: left;
    font-size: 1.6rem;
    font-weight: 700;
    color: #3a404b;
    margin-bottom: 2rem;
}
.hando_cont ul li {
    padding-left: 3.2rem;
    height: auto;
    line-height: 2rem;
    position: relative;
    font-size: 1.4rem;
    font-weight: 500;
    color: #3a404b;
    margin-bottom: 2rem;
}
.hando_cont ul li:first-of-type:before {
    position: absolute;
    content: "";
    display: block;
    width: 2.2rem;
    height: 2.2rem;
    background: url("../img/li_icon_01.svg") no-repeat;
    background-size: 100% 100%;
    top: 0px;
    left: 0px;
}
.hando_cont ul li:last-of-type {
    margin-bottom: 0px;
}
.hando_cont ul li:last-of-type:before {
    position: absolute;
    content: "";
    display: block;
    width: 2.2rem;
    height: 2.2rem;
    background: url("../img/li_icon_02.svg") no-repeat;
    background-size: 100% 100%;
    top: 0px;
    left: 0px;
}
.tongjang {
    width: 100%;
    height: 38.4rem;
    border-radius: 1rem;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    padding: 2rem;
    padding-top: 2.6rem;
    margin-bottom: 2rem;
    background: #f9fafa;
}
.dimed_logo_ab {
    position: absolute;
    top: -1.5rem;
    left: calc(100% - 14.5rem);
    width: 16rem;
    height: 16rem;
}

.tongjang:before {
    background: #e60013;
    width: 50%;
    left: 0px;
    top: 0px;
    position: absolute;
    display: block;
    height: 0.6rem;
    content: "";
}

.tongjang:after {
    background: #0f3962;
    width: 50%;
    right: 0px;
    top: 0px;
    position: absolute;
    display: block;
    height: 0.6rem;
    content: "";
}
.tongjang b {
    display: block;
    height: 4.8rem;
    text-align: left;
    width: 100%;
    line-height: 2.8rem;
    font-size: 2rem;
    font-weight: 700;
    color: #2c313a;
    border-bottom: 1px solid #e3e5e8;
    margin-bottom: 2rem;
}
.tongjang table {
    border-collapse: collapse;
    width: 100%;
    background: none;
    border: none;
    margin-bottom: 2rem;
}
.tongjang table th {
    border: none;
    text-align: left;
    padding-bottom: 1.6rem;
    line-height: 1.9rem;
    font-size: 1.6rem;
    font-weight: 500;
    color: #6a7684;
}
.tongjang table td {
    text-align: right;
    padding-bottom: 1.6rem;
    line-height: 1.9rem;
    font-size: 1.6rem;
    font-weight: 500;
    color: #3a404b;
}
.tongjang table tr:last-of-type th {
    padding-bottom: 0px;
}
.tongjang table tr:last-of-type td {
    padding-bottom: 0px;
}
.tongjang_span {
    display: block;
    padding-top: 2rem;
    border-top: 1px solid #e3e5e8;
    text-align: left;
    height: auto;
    line-height: 2rem;
    font-size: 1.4rem;
    font-weight: 400;
    color: #6a7684;
    padding-left: 1.1rem;
    position: relative;
}
.tongjang_span:before {
    content: "";
    display: block;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: #4074bf;
    position: absolute;
    left: 0px;
    top: 2.8rem;
}
.tongjang .emblem {margin-top:4rem; text-align: right;}
.tongjang .emblem img {
    width: 13.4rem;
    height:2.1rem;
}
.boho {
    display: block;
    padding:0 2.4rem;
    line-height: 1.4;
    font-size: var(--fs-xs);
    font-weight:var(--fw-default);
    color: var(--c-gray-700);
}
.boho img {
    display: block;
    width: 13.8rem;
    height: 8.9rem;
    margin:0 auto 1.6rem;
}

.waiting_on {
    background: url("../img/Icon-wating_on.svg") no-repeat !important;
    background-position: center top !important;
}

.send_certi {
    text-align: left;
    width: 100%;
    height: auto;
    position: relative;
    margin-bottom: 2rem;
    font-weight: 700;
    font-size: 2.4rem;
    color: #3a404b;
}
.send_certi .os_logo {
    width: 10.1rem;
    height: 2rem;
    background: url("../img/os_logo.svg") no-repeat;
    background-size: 100% 100%;
    margin-bottom: 0.8rem;
}
.send_certi_right {
    width: 100%;
    text-align: right;
    height: 2.8rem;
    margin-top: 2rem;
    line-height: 2.8rem;
    font-size: 1.4rem;
    font-weight: 400;
    color: #6a7684;
    margin-bottom: 2rem;
}
.send_certi_right span {
    margin-left: 0.8rem;
    font-size: 2rem;
    font-weight: 700;
    color: #2c313a;
}
.span_blue {
    width: 100%;
    height: auto;
    text-align: left;
    margin-bottom: 2rem;
    font-size: 1.4rem;
    font-weight: 400;
    color: #3882f5;
    line-height: 2rem;
    display: block;
}
.save_img {
    width: 100%;
    height: 3.5rem;
    background: white;
    border: 1px solid #e3e5e8;
    border-radius: 0.6rem;
    cursor: pointer;
    color: #3a404b;
    font-size: 1.6rem;
    font-weight: 500;
}
.redding {
    background: #ff2e3c !important;
    color: white !important;
}
.blueing {
    background: #3882f5 !important;
    color: white !important;
}

.proBannerWrap .slick-dots li {
    width: 0.5rem;
    height: 0.5rem;
    position: relative;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
}
.detailList > li.flex_left_jh {
    justify-content: left;
}
.rndBadge {
    height: 2.1rem;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    line-height: 2.1rem;
    font-size: 1.2rem;
    font-weight: 500;
}
.po_rel {
    position: relative;
}
.go_arrow {
    width: 2.4rem;
    height: 2.4rem;
    background: url("../img/right_go.svg") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    cursor: pointer;
    border: none;
}
.detailList > li {
    align-items: start;
}

.main_card {
    width: 100%;
    height: 15rem;
    padding-left: 2rem;
    padding-top: 4rem;
    background: white url("../img/main_card_bg_01.svg") no-repeat;
    background-size: 11.5rem 9.6rem;
    background-position: right center;
    border-radius: 1.2rem;
    border: 1px solid #e3e5e8;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    font-size: 1.6rem;
    font-weight: 500;
    color: #6a7684;
}
.main_card b {
    display: block;
    width: 100%;
    height: 2.8rem;
    line-height: 2.8rem;
    text-align: left;
    font-size: 2rem;
    font-weight: 700;
    color: #3a404b;
    margin-bottom: 0.4rem;
}
.main_card_padding {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
}

.middle_add {
    margin: 1.8rem auto 4rem;
    text-align:center;
}
.middle_add a {
    position:relative;
    display:inline-block;
    padding-left:5.5rem;
    text-align:left;
}
.middle_add a:before {
    content: "";
    position: absolute;
    top:50%;
    left: 0;
    transform: translateY(-50%);
}
.middle_add .accoConnection:before {
    width: 3.5rem;
    height: 3.1rem;
    background: url("../img/ico_accoConnection.svg") no-repeat center center;
}
.middle_add .loanConnection:before {
    width: 3.5rem;
    height: 3.6rem;
    background: url("../img/ico_loanConnection.svg") no-repeat center center;
}
.middle_add a .text {
    display: block;
    color:var(--c-gray-700);
    font-size:var(--fs-xs);
    font-weight: var(--fw-default);
    line-height:2rem;
}
.middle_add a .link {
    position: relative;
    display:inline-block;
    margin-top:.2rem;
    padding-right:2rem;
    color:var(--c-gray-800);
    font-size:var(--fs-ms);
    font-weight: var(--fw-bold);
    line-height: 2rem;
}
.middle_add a .link:after {
    content: "";
    display: block;
    width: 2rem;
    height: 2rem;
    background: url("../img/a_arrow.svg") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0px;
    right: 0px;
}
.main_card2 {
    width: 100%;
    height: 15rem;
    padding-left: 2rem;
    padding-top: 4rem;
    background: white url("../img/main_card_bg_02.svg") no-repeat;
    background-size: 9.6rem 9.6rem;
    background-position: right 2rem center;
    border-radius: 1.2rem;
    border: 1px solid #e3e5e8;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    font-size: 1.6rem;
    font-weight: 500;
    color: #6a7684;
}
.main_card2 b {
    display: block;
    width: 100%;
    height: 2.8rem;
    line-height: 2.8rem;
    text-align: left;
    font-size: 2rem;
    font-weight: 700;
    color: #3a404b;
    margin-bottom: 0.4rem;
}
.pdb_64 {
    padding-bottom: 6.4rem;
}

.bgw {
    background: white !important;
    height: 4.95rem;
    font-size: 1.8rem;
    color: #3a404b;
    font-weight: 500;
}

.bgw i {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background: url("../img/pl.svg") no-repeat;
    background-size: 100% 100%;
    vertical-align: middle;
    margin-right: 0.4rem;
    margin-top: -0.2rem;
}

.popup_new {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    z-index: 99999999;
    justify-content: center;
    align-items: center;
}

.popup_new .new_popup {
    width: 32rem;
    height: 42rem;
    display: block;
    background: white;
    border-radius: 16px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    text-align: center;
    padding: 2.4rem;
    font-size: 1.6rem;
    font-weight: 400;
    color: #3a404b;
    line-height: 1.9rem;
    padding-left: 2rem;
    padding-right: 2rem;
    position: relative;
}
.popup_new .new_popup i {
    width: 5rem;
    height: 5rem;
    background: url("../img/pop_icon.svg") no-repeat;
    background-size: 100% 100%;
    margin: 0px auto;
    display: block;
    margin-bottom: 1.2rem;
}
.popup_new .new_popup h2 {
    display: block;
    text-align: center;
    width: 100%;
    height: 2.8rem;
    line-height: 2.8rem;
    font-size: 2rem;
    font-weight: 700;
    color: #3a404b;
    padding: 0px;
    margin: 0px;
    margin-bottom: 1.2rem;
}
.popup_new .new_popup span.gry_txts {
    display: block;
    line-height: 2rem;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 500;
    color: #6a7684;
    margin-top: 1.2rem;
    margin-bottom: 2rem;
}
.popup_new .new_popup .gray_boxed {
    width: 100%;
    height: 9.6rem;
    background: #f9fafa;
    border-radius: 0.6rem;
    padding: 1.6rem;
    text-align: left;
}
.popup_new .new_popup .gray_boxed span {
    display: block;
    height: auto;
    padding-left: 14px;
    position: relative;
    line-height: 2rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: #3a404b;
}
.popup_new .new_popup .gray_boxed span:before {
    content: "";
    display: block;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    position: absolute;
    background: #4074bf;
    top: 0.8rem;
    left: 0px;
}
.popup_new .new_popup .gray_boxed span b {
    font-weight: 700;
    color: #3a404b;
    font-size: 1.6rem;
    display: block;
    text-align: left;
    height: 1.9rem;
    line-height: 1.9rem;
    margin-bottom: 0.45rem;
}
.popup_new .new_popup .new_pop_bottom {
    bottom: 0px;
    left: 0px;
    width: calc(100% + 0rem);
    height: 6.8rem;
    text-align: left;
    line-height: 6.8rem;
    padding-left: 2.8rem;
    padding-right: 2.8rem;
    border-top: 1px solid #e3e5e8;
    position: absolute;
    display: flex;
    align-items: center;
}

.popup_new .new_popup .new_pop_bottom button {
    background: none;
    text-align: center;
    height: 6.8rem;
    width: 7.8rem;
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 1.4rem;
    font-weight: 500;
    color: #3a404b;
}
.popup_new .new_popup .new_pop_bottom .rndChk {
    display: inline-block;
    width: auto;
}
.popup_new .new_popup.hau {
    height: 90%;
}
.popup_new .new_popup.hau .hau_wrap {
    width: 100%;
    height: calc(100% - 14.9rem);
    overflow: auto;
    position: relative;
    text-align: left;
    line-height: 2rem;
    font-size: 1.4rem;
    color: #3a404b;
    font-weight: 500;
    padding-bottom: 7rem;
}
.popup_new .new_popup.hau .hau_wrap span {
    font-size: 1.4rem;
    font-weight: 400;
    color: #6a7684;
}

.decs.smaller_pice {
    font-size: 1.4rem;
    font-weight: 500;
    color: #6a7684;
}
.open_banking_more.ac
    .open_banking_more_detail
    .open_banking_more_detail_list
    .selectItem.status
    li {
    align-items: start;
}
.open_banking_more.ac
    .open_banking_more_detail
    .open_banking_more_detail_header {
    position: relative;
}
.open_banking_more.ac
    .open_banking_more_detail
    .open_banking_more_detail_header:after {
    width: 2.4rem;
    height: 2.4rem;
    background: url("../img/w_down.svg") no-repeat;
    background-size: 100% 100%;
    display: block;
    content: "";
    position: absolute;
    top: 1.65rem;
    right: 2rem;
}
.rndChk > li > label {
    font-size: 1.6rem;
}
.pdb10 {
    padding-bottom: 1rem !important;
}
.cblack {
    color: #2c313a !important;
}
textarea.textarea_form_input {
    width: 100%;
    height: 10.7rem;
    border: 1px solid #e3e5e8;
    border-radius: 1rem;
    padding: 1.6rem;
    text-align: left;
    font-size: 1.8rem;
    font-weight: 500;
    color: #3a404b;
    font-family: inherit;
    resize: none;
    outline: none;
}
.display_inline_block_center_wrap {
    text-align: center;
}
.display_inline_block_center {
    display: inline-block;
    width: auto;
    height: auto;
}
.fixeArea2 .cntList > li {
    font-size: 1.6rem;
    line-height: 1.9rem;
}
.fixeArea2 .listType > li {
    font-size: 1.6rem;
    line-height: 1.9rem;
}

.check_added {
    width: 100%;
    height: auto;
    position: relative;
}
.check_added h4 {
    display: block;
    height: auto;
    width: 100%;
    font-size: 1.6rem;
    font-weight: 700;
    color: #3a404b;
    margin-bottom: 2rem;
}
.check_added div.li_s {
    display: block;
    width: 100%;
    height: auto;
    line-height: 1.9rem;
    text-align: left;
    padding-left: 2.1rem;
    font-weight: 500;
    font-size: 1.6rem;
    color: #3a404b;
    margin-bottom:2rem;
    position: relative;
}
.check_added div.li_s .before_s {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1.5rem;
    text-align: center;
    height: 1.9rem;
    line-height: 1.9rem;
    font-size: 1.6rem;
    color: #3a404b;
}
.text_align_right {
    justify-content: end;
}
.roundChk > li > label {
    font-size: 1.6rem;
}
.sanghwan {
    width: 100%;
    height: 5.7rem;
    line-height: 5.7rem;
    border: 1px solid #e3e5e8;
    border-radius: 1rem;
    text-align: center;
    color: #3a404b;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 2rem;
}
.sanghwan span {
    color: #3882f5;
}
.otp_ico_wrap {
    width: 100%;
    height: 24.1rem;
    padding-top: 6rem;
    text-align: center;
    line-height: 1.9rem;
    font-size: 1.6rem;
    color: #6a7684;
    font-weight: 500;
    margin-bottom: 2rem;
}
.otp_ico_wrap i {
    display: block;
    width: 8.3rem;
    height: 8.3rem;
    background: url("../img/otp_ico.svg") no-repeat;
    background-size: 100% 100%;
    margin: 0px auto;
    margin-bottom: 2rem;
}

.listTypeBtn.addItem .chkBox.txt {
    font-size: 1.8rem !important;
}

/* 외부팝업 시작 */
.popInfo {
    overflow:hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    width: calc(100% - 4rem);
    max-height: calc(100vh - 4rem);
    max-height: calc(100dvh - 4rem);
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    transform: translate(-50%, -50%);
}
.popInfo .popCloseBtn {
    position: absolute;
    height: 6.8rem;
    width: 7.8rem;
    bottom: 0px;
    right: 0px;
    z-index: 1;
    text-align: center;
    color: #3a404b;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 6.8rem;
    background: none;
    border: none;
}
.popInfo .popCloseBtn:before {
    display: inline;
    content: "닫기";
}
.popInfo .popInner {
    overflow-y:auto;
    max-height:calc(100% - 6.8rem);
    padding:2rem;
}
.popInfo .popHead {
    display: block;
    padding:0;
    height: auto;
    text-align: center;
    border-bottom:0;
}
.popInfo .popHead .popTop {
    width: 5rem;
    height: 5rem;
    margin: 0px auto;
    margin-bottom: 1.2rem;
}
.popInfo .popHead .popTop img {
    width: 100%;
    height: 100%;
}
.popInfo .popHead h3 {
    display: block;
    text-align: center;
    width: 100%;
    min-height: 2.8rem;
    line-height: 2.8rem;
    font-size: 2rem;
    font-weight: 700;
    color: #3a404b;
    padding: 0px;
    margin: 0px;
    margin-bottom: 1.2rem;
    height: auto;
}
.popBody {
    font-size: 1.6rem;
    font-weight: 400;
    color: #3a404b;
    line-height: 1.9rem;
}
.popFoot {
    height: 6.8rem;
    padding:0 2rem;
    line-height: 6.8rem;
    border-top: 1px solid #e3e5e8;
    text-align: left;
    font-size: 1.6rem;
    background:var(--white);
}
.popFoot .checkbox + label {
    padding-left: 3rem;
    position: relative;
    font-weight: 400;
    font-size: 1.6rem;
    color: var(--c-gray-800);
    display:inline-block;
    height:auto;
}
.popFoot .checkbox + label:before {
    background: url("../img/d_ch_unchecked.svg") no-repeat;
    background-size: 100% 100%;
    width: 2.1rem;
    height: 2.1rem;
    position: absolute;
    top: 50%;
    margin-top: -1.05rem;
    border: 0px solid #d4d4d4;
    left: 0px;
}

.skyBlueBox {
    width: 100%;
    height: auto;
    background: #f9fafa;
    border-radius: 0.6rem;
    padding: 1.6rem;
    text-align: left;
    font-size: 1.4rem;
    margin-top: 1.6rem;
}
.skyBlueBox b {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
}
.skyBlueBox span {
    display: block;
    height: auto;
    padding-left: 14px;
    position: relative;
    line-height: 2rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: #3a404b;
}
.skyBlueBox span:before {
    content: "";
    display: block;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    position: absolute;
    background: #4074bf;
    top: 0.8rem;
    left: 0px;
}
.skyBlueBox span b {
    font-weight: 700;
    color: #3a404b;
    font-size: 1.6rem;
    display: block;
    text-align: left;
    height: 1.9rem;
    line-height: 1.9rem;
    margin-bottom: 0.45rem;
}
.aside {
    background:rgba(0,0,0,0.4);
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:99999999;
    display:flex;
    justify-content:center;
    align-items:center;
}
.layerpop.layer_finger_regist {
    width:32.0rem;
    height:30.3rem;
    background:white;
    border-radius:1.6rem;
    box-shadow:0px 0px 4px rgba(0,0,0,0.2);
    position:relative;
    padding:2.0rem;
    padding-top:2.4rem;
}
.layerpop.layer_finger_regist:before { 
    content:'';
    width:5.0rem;
    height:5.0rem;
    background:url('../img/o_mark.svg') no-repeat;
    background-size:100% 100%;
    display:block;
    margin:0px auto;
    margin-bottom:1.2rem;

}
.layerpop.layer_finger_regist .cnt .cnt strong.tit  span:first-of-type { display:block;text-align:center;line-height:2.8rem;height:auto;font-size:2.0rem !important;font-weight:700 !important;color:#3A404B !important;margin-bottom:1.2rem; }
.layerpop.layer_finger_regist .cnt .cnt strong.tit br { display:none }
.layerpop.layer_finger_regist .cnt .cnt strong.tit  span.tl { text-align:center !important;font-size:1.6rem !important;display:block !important;line-height:1.9rem !important;font-weight:400 !important;color:#3A404B !important }
.layerpop.layer_finger_regist .cnt .cnt strong.tit  span.tl span { font-size:inherit !important;font-weight:inherit !important;color:inherit !important;display:inline !important }
.layerpop.layer_finger_regist .cnt .cnt button { width:100%;height:5.7rem;text-align:center;color:white;background:#335C97;border-radius:1.0rem;cursor:pointer;font-size:1.8rem;font-weight:500;border:none;margin-top:2.0rem; }

/* 외부팝업 끝 */

.hide_alert {
    color: #ff2e3c !important;
    font-weight: 500 !important;
}

.hide_alert .reset_jh {
    background: url("../img/red_reset.svg") no-repeat !important;
    background-size: 100% 100% !important;
}
.dan_jh .jun_account_jh_cell.openBanking .jun_account_jh_cell_header {
    padding-left: 5rem;
}
.dan_jh .jun_account_jh_cell.openBanking span.spanning {
    padding-left: 5rem;
}
.dan_jh .jun_account_jh_cell.openBanking .jun_account_jh_cell_header {
    position: relative;
}
.dan_jh .jun_account_jh_cell.openBanking .jun_account_jh_cell_header img {
    width: 2.1rem;
    height: 2.1rem;
    position: absolute;
    top: 0.95rem;
    left: 1rem;
}
.scrollTabWrap.tab3 button {
    font-size: 1.6rem;
}

.explain_added {
    width: 100%;
    height: auto;
    position: relative;
    margin-bottom: 2rem;
    margin-top: 1.5rem;
}
.explain_added h3 {
    display: block;
    width: 100%;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: left;
    font-size: 1.8rem;
    font-weight: 700;
    color: #2c313a;
    padding: 0px;
    margin: 0px;
    margin-bottom: 0.2rem;
}
.explain_added .li_no_list {
    position: relative;
    width: 100%;
    height: auto;
    line-height: 1.9rem;
    text-align: left;
    padding-left: 2.7rem;
    font-size: 1.6rem;
    font-weight: 500;
    color: #4f5867;
    margin-bottom: 1.4rem;
    margin-top: 1rem;
}
.explain_added .li_no_list span {
    position: absolute;
    line-height: 1.9rem;
    height: 1.9rem;
    width: 2rem;
    text-align: center;
    left: 0px;
    top: 0px;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}
.explain_added .li_no_list_small {
    position: relative;
    width: 100%;
    height: auto;
    line-height: 2rem;
    text-align: left;
    padding-left: 2.7rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: #6a7684;
    margin-bottom: 1.4rem;
    margin-top: -0.6rem;
}
.explain_added .li_no_list_small:before {
    content: "";
    display: block;
    width: 0.3rem;
    height: 0.3rem;
    background: #6a7684;
    border-radius: 50%;
    position: absolute;
    left: 0.9rem;
    top: 0.7rem;
}
.m_gray_small {
    font-size: 1.4rem;
    font-weight: 500;
    color: #6a7684;
    margin-top: 0.8rem;
}
.inner {
    height: auto;
}
footer {
    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: constant(safe-area-inset-bottom);
}
.popfixBox {
    max-height: calc(100vh - 9.7rem);
    max-height: calc(100dvh - 9.7rem);
}
section {
    height: 100vh;
    height: 100dvh;
}
.conTop.vCenter {
    height: 100vh;
    height: 100dvh;
}
.popTop.vCenter {
    height: 100vh;
    height: 100dvh;
}
#gnav {
    height: 100vh;
    height: 100dvh;
}

.gnavDep1 > li.active .gnavDep2Wrap {
    max-height: calc(
        calc(100vh - calc(var(--page-scale) * 18rem)) / var(--page-scale)
    );
    max-height: calc(
        calc(100dvh - calc(var(--page-scale) * 18rem)) / var(--page-scale)
    );
}
.bgGrayBox2 .conTxt5 {
    font-size: 1.6rem;
    font-weight: 500;
    color: #3a404b;
}
.bgGrayBox2 .listType.sTxt > li {
    font-size: 1.4rem;
    font-weight: 400;
    color: #3a404b;
}
.popListBox img {
    max-width: 100%;
}
.protcTxt2 {
    font-size: 1.4rem;
    color: #b3c7e5;
    font-weight: 400;
}
.bottom_finda {
    width: 100%;
    height: calc(24.2rem + 5.7rem);
    position: relative;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 400;
    color: #4f5867;
}
.bottom_finda2 {
    height: calc(22.1rem + 5.7rem);
}
.bottom_finda h4 {
    display: block;
    text-align: center;
    height: auto;
    margin: 0px;
    padding: 0px;
    line-height: 3.4rem;
    font-size: 2.4rem;
    font-weight: 700;
    color: #3a404b;
    margin-bottom: 1.2rem;
}
.bottom_finda i {
    display: block;
    width: 6.2rem;
    height: 7.5rem;
    margin: 0px auto;
    background: url("../img/finda_icon.svg") no-repeat;
    background-size: 100% 100%;
    margin-top: 2.8rem;
    margin-bottom: 2.4rem;
}
.bottom_finda i.icon2 {
    display: block;
    width: 6.2rem;
    height: 7.5rem;
    margin: 0px auto;
    background: url("../img/finda_icon_02.svg") no-repeat;
    background-size: 100% 100%;
    margin-top: 2.8rem;
    margin-bottom: 2.4rem;
}
.bottom_finda button {
    border: none;
    width: 100%;
    height: 5.7rem;
    border-radius: 1rem;
    text-align: center;
    background: #335c97;
    color: white;
    font-size: 1.8rem;
    font-weight: 500;
}
.gr_bg {
    background: #f9fafa;
    border-radius: 0.6rem;
    padding: 1.6rem;
    height: 8.8rem;
    width: 100%;
    margin-top: 2.8rem;
    margin-bottom: 2.4rem;
}
.gr_bg table {
    border-collapse: collapse;
    width: 100%;
    height: auto;
    border: 0px solid #d4d4d4;
}
.gr_bg table tr:nth-of-type(1) th {
    padding-bottom: 0.8rem;
    text-align: left;
    font-size: 1.6rem;
    font-weight: 400;
    color: #4f5867;
    padding-left: 2.8rem;
    position: relative;
}
.gr_bg table tr:nth-of-type(1) td {
    padding-bottom: 0.8rem;
    padding-left: 2rem;
    font-size: 1.6rem;
    font-weight: 500;
    color: #2c313a;
    text-align: left;
}
.gr_bg table tr:nth-of-type(2) th {
    padding-top: 0.8rem;
    text-align: left;
    font-size: 1.6rem;
    font-weight: 400;
    color: #4f5867;
    padding-left: 2.8rem;
    position: relative;
}
.gr_bg table tr:nth-of-type(1) th i {
    display: block;
    margin: 0px;
    width: 2rem;
    height: 2rem;
    background: url("../img/table_icon_01.svg") no-repeat;
    background-size: 100% 100%;
    margin-right: 0.8rem;
    position: absolute;
    top: 0px;
    left: 0px;
}
.gr_bg table tr:nth-of-type(2) th i {
    display: block;
    margin: 0px;
    width: 2rem;
    height: 2rem;
    background: url("../img/table_icon_02.svg") no-repeat;
    background-size: 100% 100%;
    margin-right: 0.8rem;
    position: absolute;
    top: 0.8rem;
    left: 0px;
}
.gr_bg table tr:nth-of-type(2) td {
    padding-top: 0.8rem;
    padding-left: 2rem;
    font-size: 1.6rem;
    font-weight: 500;
    color: #2c313a;
    text-align: left;
}
.added_design {
    font-size: 1.8rem;
    font-weight: 700;
    color: #2c313a !important;
}
.added_design_02 li {
    font-size: 1.4rem !important;
    font-weight: 500 !important;
    color: #3a404b !important;
}
.added_design_02 li b {
    font-weight: 700 !important;
}
.m_gray_small {
    font-size: 1.4rem;
    font-weight: 500;
    color: #3a404b;
    padding-left: 2.1rem;
    position: relative;
}
.m_gray_small:before {
    content: "";
    display: block;
    width: 0.3rem;
    height: 0.3rem;
    background: #3a404b;
    border-radius: 50%;
    position: absolute;
    left: 0.8rem;
    top: 0.6rem;
}

.nothing {
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    height: calc(100vh - 14.1rem);
    height: calc(100dvh - 14.1rem);
}
.nothing .nothing_cell i {
    display: block;
    margin: 0px auto;
    margin-bottom: 1rem;
    width: 3.2rem;
    height: 3.2rem;
    background: url("../img/nothing.svg") no-repeat;
    background-size: 100% 100%;
}
.nothing .nothing_cell {
    width: 100%;
    text-align: center;
    height: 8rem;
    line-height: 1.9rem;
    font-size: 1.6rem;
    color: #b0b7bf;
    font-weight: 500;
}
.noHistory0828 {
    height: 10.3rem;
    width: 100%;
    text-align: center;
    padding-top: 2.8rem;
    font-size: 1.6rem;
    font-weight: 500;
    color: #b0b7bf;
}
.noHistory0828 i {
    display: block;
    margin: 0px auto;
    margin-bottom: 1rem;
    width: 2.4rem;
    height: 1.8rem;
    background: url("../img/Unionv.svg") no-repeat;
    background-size: 100% 100%;
}
.design_added3 {
    font-size: 1.8rem;
    margin-bottom: 1.6rem;
}

.design_added4 { color:#3A404B }
.design_added5 { font-size:1.4rem; }  
.trans_history_jh h3 { font-size:2.0rem;line-height:2.8rem;height:2.8rem; }

.infoWrap.pop .info.ico.with_osb { background:url("../img/osbank.svg") no-repeat top center/ 5rem }
.popTitC1.with_osb2 { font-size:2.0rem;font-weight:700;color:#3A404B }

.openTitBox > .tit > em.emsp { margin-bottom:0.2rem;display:block;text-align:center; }  
.titjh { font-size:2.4rem !important; }
.bgOpenAcco { background:url(../img/minasang.svg) no-repeat top 13rem center / contain }
.selectItem li a { align-items:flex-start } 
.pdb16 { padding-bottom:1.6rem;border-bottom:1px solid #E3E5E8 }