@charset "utf-8";

.detailBoxP {
    padding: 10rem 2rem 0 !important;
}
/********************** 내용 박스 스타일 **********************/
.conRbrdrBox {
    position: relative;
    border-radius: 1rem;
    border: 1px solid var(--c-gray-200);
    padding: 2rem;
    margin: 0 0 1rem;
}
.rndBrdBox {
    position: relative;
    border-radius: 1rem;
    border: 1px solid var(--c-gray-200);
    padding: 1.5rem;
    margin: 0 0 1rem;
}
.rndBrdBox.on {
    border-color: var(--cobalt-blue);
}

.bgGrayBox {
    width: 100%;
    border-radius: 1rem;
    background: var(--c-gray-50);
    padding: 1.5rem;
    margin: 0 0 1rem;
}
.bgGrayBox2 {
    width: 100%;
    border-radius: 1rem;
    background: var(--c-gray-50);
    padding: 1.5rem;
    margin: 0 0 1rem;
}
.bgGrayBox3 {
    width: 100%;
    border-radius: 1rem;
    background: var(--c-gray-50);
    padding: 1.5rem;
    margin: 0 0 1rem;
}
.bgGrayBox + .bgGrayBox {
    margin-top: 2rem;
}

/* noteBox */
.notiBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 1rem 0;
}
.notiBox span {
    display: inline-flex;
    position: relative;
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    font-weight: var(--fw-regular);
    padding-left: 2rem;
}
.notiBox span::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 1.8rem;
    height: 1.8rem;
    background: url(../img/ico_noti_gray5.svg) no-repeat top left/1.8rem 1.8rem;
}
.notiBox.blue span {
    color: var(--primary-light);
}
.notiBox.blue span::before {
    background-image: url(../img/ico_noti_blue.svg);
}
.notiBox.red span {
    color: var(--negative);
}
.notiBox.red span::before {
    background-image: url(../img/ico_noti_red.svg);
}

/* 코멘트 박스 */
.commentBox {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 1rem 0;
    border-radius: 1rem;
    background: var(--c-gray-50);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.commentBox span {
    display: inline-flex;
    position: relative;
    font-size: var(--fs-ms);
    color: var(--c-gray-700);
    font-weight: var(--fw-default);
}
.commentBox span::before {
    content: "";
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background: url(../img/ico_question.svg) no-repeat top left/contain;
    padding-right: 0.5rem;
}
.commentBox p {
    width: 100%;
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    font-weight: var(--fw-regular);
    padding-left: 2.5rem;
    padding-top: 0.5rem;
}

/********************** input, button 스타일 박스 **********************/
/* fixed 버튼박스 */
.conBtnbox {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 9.7rem;
    padding: 2rem;
    background-color: var(--white);
    z-index:2;
}
.conBtnbox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2rem;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.6),
        rgba(255, 255, 255, 1)
    );
    pointer-events: none;
    z-index: 2;
}
/* 인풋,버튼박스 스타일 */
.column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
} /* 세로로 추가*/
.row {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    width: 100%;
    align-items: center;
    justify-content: space-between;
} /* 가로로 추가 1줄만*/
.row .first {
    flex: 1;
    min-width: 0;
}
.row .second01 {
    flex: none;
    width: 14rem;
}
.row .input {
    flex: 1;
} /* 남은공간 모두차지*/
.rowWrap {
    display: flex;
    gap: 1rem;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
} /* 가로로 추가 1줄이상*/
.rowWrap .input {
    flex: 1;
}
.singleMsg {
    flex-basis: 100%;
    width: 100%;
}
.btnWrap2 {
    display: flex;
    gap: 1rem;
    width: 100%;
}
/* 가이드공통팝업 */
.guideRow {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex-wrap: wrap;
}
.guideRow button {
    width: calc(50% - 0.5rem);
}

.inputBox {
    position: relative;
    display: flex;
    gap: 0.5rem;
    width: 100%;
}
.inputBox:read-only {
    border-color: var(--c-gray-200);
}
.inputBox.errorInput .input,
.inputBox.errorInput .input:focus-within {
    border-color: var(--negative);
}
.inputBox.errorInput ~ p.valueMsg {
    display: block;
    position: relative;
    font-size: var(--fs-xs);
    color: var(--negative);
    padding-left: 1.5rem;
}
.inputBox.errorInput ~ p.valueMsg::before {
    content: "";
    display: block;
    position: absolute;
    width: 1.4rem;
    height: 1.4rem;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background: url(../img/ico_serror.svg) no-repeat center / 1.4rem;
}
.inputBox.correctInput .input,
.inputBox.correctInput .input:focus-within {
    border-color: var(--positive);
}
.inputBox.correctInput ~ p.valueMsg {
    display: block;
    position: relative;
    font-size: var(--fs-xs);
    color: var(--positive);
    padding-left: 1.5rem;
}
.inputBox.correctInput ~ p.valueMsg::before {
    content: "";
    display: block;
    position: absolute;
    width: 1.4rem;
    height: 1.4rem;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background: url(../img/ico_scorrect.svg) no-repeat center / 1.4rem;
}
/* div 인풋박스 */
.inputWrap {
    display: flex;
    align-items: center;
    position: relative;
    border: 1px solid var(--c-gray-200);
    border-radius: 1rem;
    padding: 0 1.6rem;
}
.inputWrap .input,
.inputWrap .select {
    flex: 1;
    outline: none;
    border: none;
    padding: 0;
}
.inputWrap .select {
    padding-right: 4rem;
}
.inputWrap .input:focus,
.inputWrap .select:focus {
    border: none !important;
}
.inputWrap:focus-within {
    border-color: var(--cobalt-blue);
}
.inputWrap.errorInput,
.inputWrap.errorInput:focus-within {
    border-color: var(--negative);
}
.inputWrap.errorInput ~ p.valueMsg {
    display: block;
    position: relative;
    font-size: var(--fs-xs);
    color: var(--negative);
    padding-left: 1.5rem;
}
.inputWrap.errorInput ~ p.valueMsg::before {
    content: "";
    display: block;
    position: absolute;
    width: 1.4rem;
    height: 1.4rem;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background: url(../img/ico_serror.svg) no-repeat center / 1.4rem;
}
.inputWrap.correctInput,
.inputWrap.correctInput:focus-within {
    border-color: var(--positive);
}
.inputWrap.correctInput ~ p.valueMsg {
    display: block;
    position: relative;
    font-size: var(--fs-xs);
    color: var(--positive);
    padding-left: 1.5rem;
}
.inputWrap.correctInput ~ p.valueMsg::before {
    content: "";
    display: block;
    position: absolute;
    width: 1.4rem;
    height: 1.4rem;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background: url(../img/ico_scorrect.svg) no-repeat center / 1.4rem;
}
.inputWrap label {
    display: block;
    font-size: var(--fs-ms);
    color: var(--c-gray-700);
}
.inputWrap .prefix,
.inputWrap .suffix {
    margin-top:.2rem;
    font-size: var(--fs-ms);
    color: var(--c-gray-700);
    font-weight: var(--fw-regular);
    white-space: nowrap;
}
.inputWrap .suffix + .clearInput {
    right: 4rem;
} /* 클리어버튼 위치조정 */
.inputWrap .endpd {
    padding-right: 3.5rem;
} /* 인풋 오른쪽 패딩조정 */
.inputWrap .inputBox.float {
    position: relative;
}
.inputWrap .inputBox.float > .floatBtn {
    right: 0;
}
.inputWrap .inputBox.float > .input {
    padding-right: 7rem;
}
.inputBox.float .floatTxt {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 8.5rem !important;
    font-size: var(--fs-ms);
    color: var(--c-gray-700);
}
.inputWrap.disabled {
    background: var(--c-gray-100);
    border-color: var(--c-gray-300);
}
.inputWrap.disabled .prefix,
.inputWrap.disabled .suffix {
    opacity: 0.5;
}

.inputWrap.labelTop {
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 2rem;
}
.inputWrap.labelTop label {
    margin-bottom: 0.5rem;
    font-weight: var(--fw-default);
}
.inputWrap.labelTop .input,
.inputWrap.labelTop .select {
    width: 100%;
    text-align: right;
}

.inputWrap.ar .input,
.inputWrap.ar .select {
    text-align: right;
}
/* 언더라인 인풋박스 Wrap */
.inputWrap.underLine {
    position: relative;
    display: flex;
    align-items: flex-start;
    border: none;
    border-bottom: 1px solid var(--c-gray-300);
    border-radius: 0;
    padding: 0;
}
.inputWrap.underLine .input {
    height: 5.5rem;
    text-align: right;
    vertical-align: top;
    padding: 0;
}
.inputWrap.underLine label {
    padding-top: 1.7rem;
    padding-left: 0.5rem;
}
.inputWrap.underLine .dataDel {
    display: none;
    position: absolute;
    top: 1.8rem;
    right: 0;
    width: 2rem;
    height: 2rem;
    background: url(../img/ico_data_del.svg) no-repeat top left / contain;
}
.inputWrap.underLine.disabled label {
    opacity: 0.5;
}
.inputWrap.underLine:focus-within {
    border-bottom-color: var(--cobalt-blue);
}
.inputWrap.underLine.errorInput,
.inputWrap.underLine.errorInput:focus-within {
    border-bottom-color: var(--negative);
}
.inputWrap.underLine.correctInput,
.inputWrap.underLine.correctInput:focus-within {
    border-bottom-color: var(--positive);
}
/*  */
.inputWrap.nobrd {
    border: none;
}
/* 인풋박스안 float 버튼 */
.inputBox.float {
    position: relative;
}
.inputBox.float > .floatBtn {
    position: absolute;
    top: 50%;
    right: 1.2rem;
    min-width: 5.7rem;
    width: fit-content;
    transform: translateY(-50%);
}
.inputBox.float > .floatBtn:disabled {
    background: var(--c-gray-100) !important;
    color: var(--c-gray-800) !important;
}
.inputBox.float > .input {
    padding-right: 8rem;
}
.inputBox.float:last-child {
    margin-bottom: 0;
}
.pInput1 {
    padding-left: 0;
    padding-right: 8rem;
}
.pInput2 {
    padding-left: 0;
    padding-right: 2rem;
}
.pInput3 {
    padding-left: 0;
    padding-right: 0;
}
.pInput4 {
    padding-left: 1.2rem;
    padding-right: 13rem !important;
}

/* titleWhideBtn */
.titWithBtn {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.titWithBtn span {
    padding: 0;
}

/* 수량버튼 */
.quantityBox {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 2rem 0;
}
.quantityBox > .quantityTit {
    display: flex;
    font-size: var(--fs-ms) !important;
    font-weight: var(--fw-default);
    color: var(--c-gray-700);
    padding: 0 1rem 0 0 !important;
}
.quantity {
    position: relative;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3.6rem;
    border-radius: 1rem;
    background: var(--c-gray-200);
    border: 4px solid var(--c-gray-200);
    overflow: hidden;
}
.quantity > button {
    width: 2.5rem;
    height: 2.5rem;
}
.quantity > .minusBtn {
    background: url(../img/ico_quantity_minus.svg) no-repeat center / 2rem;
}
.quantity > .plusBtn {
    background: url(../img/ico_quantity_plus.svg) no-repeat center / 2rem;
}
.quantity > .minusBtn:disabled,
.quantity > .plusBtn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.quantity > .num {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 3rem;
    height: 100%;
    background: var(--white);
    font-size: var(--fs-ms);
    color: var(--c-gray-800);
    margin: auto 0.3rem;
    border-radius: 0.6rem;
    text-align: center;
}

/********************** 내용 타이틀, 텍스트 **********************/
.conTit {
    display: block;
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    line-height: 1.4;
    color: var(--c-gray-800);
    padding: 0 0 1.5rem;
}
.conTitC {
    display: block;
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    line-height: 1.4;
    color: var(--c-gray-800);
    text-align: center;
    padding-bottom: 2rem;
}
.conTitC span {
    font-weight: var(--fw-regular) !important;
}
.conTitC.xl {
    font-size: var(--fs-xl);
}
.conSubTit {
    display: block;
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
    line-height: 1.4;
    margin-bottom: 2rem;
}
.conSubTit2 {
    display: block;
    font-size: var(--fs-m);
    color: var(--c-gray-900);
    font-weight: var(--fw-bold);
    line-height: 1.4;
}
.titDesC {
    display: block;
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
    line-height: 1.4;
    text-align: center;
}
.desc {
    display: block;
    font-size: var(--fs-ms);
    color: var(--c-gray-600);
    line-height: 1.2;
}
.desC {
    display: block;
    font-size: var(--fs-ms);
    color: var(--c-gray-800);
    font-weight: var(--fw-regular);
    line-height: 1.2;
    text-align: center;
}
.desC1 {
    display: block;
    font-size: var(--fs-m);
    color: var(--c-gray-700);
    line-height: 1.2;
    text-align: center;
}
.desCSub {
    display: block;
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    line-height: 1.4;
    text-align: center;
    margin-top: 1rem;
}
.desCSub.gray8 {
    color: var(--c-gray-800);
}
.desCSub.blue {
    color: var(--cobalt-blue);
}

.depTit1 {
    display: block;
    font-size: var(--fs-l) !important;
    font-weight: var(--fw-bold) !important;
    padding-bottom: 2rem;
} /* 22px */
.depTit2 {
    display: block;
    font-size: var(--fs-ml) !important;
    font-weight: var(--fw-bold) !important;
    padding: 1.5rem 0 1rem;
} /* 20px */
.depTit3 {
    display: block;
    font-size: var(--fs-m) !important;
    font-weight: var(--fw-bold) !important;
    padding: 1.5rem 0 1rem;
} /* 18px */
.depTit4 {
    display: block;
    font-size: var(--fs-ms) !important;
    font-weight: var(--fw-bold) !important;
    padding: 1rem 0 1rem;
} /* 16px */
.depTit5 {
    display: block;
    font-size: var(--fs-xs) !important;
    font-weight: var(--fw-default) !important;
    padding-bottom: 1rem;
} /* 14px */
.depTit1.gray9,
.depTit2.gray9,
.depTit3.gray9,
.depTit4.gray9 {
    color: var(--c-gray-900) !important;
}
.depTit1.gray7,
.depTit2.gray7,
.depTit3.gray7,
.depTit4.gray7,
.depTit5.gray7 {
    color: var(--c-gray-700) !important;
}
.depTit1.gray6,
.depTit2.gray6,
.depTit3.gray6,
.depTit4.gray6,
.depTit5.gray6 {
    color: var(--c-gray-600) !important;
}
.depTit1.blue,
.depTit2.blue,
.depTit3.blue,
.depTit4.blue {
    color: var(--cobalt-blue) !important;
}

.conTxt1 {
    display: block;
    font-size: var(--fs-l);
    font-weight: var(--fw-default) !important;
    padding-bottom: 2rem;
}
.conTxt2 {
    display: block;
    font-size: var(--fs-ml);
    font-weight: var(--fw-default) !important;
    padding: 1.5rem 0 1rem;
}
.conTxt3 {
    display: block;
    font-size: var(--fs-m);
    font-weight: var(--fw-default) !important;
    padding: 1.5rem 0 1rem;
}
.conTxt4 {
    display: block;
    font-size: var(--fs-ms);
    font-weight: var(--fw-default);
    padding-bottom: 0.8rem;
}
.conTxt5 {
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular) !important;
    padding-bottom: 1rem;
}
.conTxt6 {
    display: block;
    font-size: var(--fs-xxs);
    font-weight: var(--fw-regular) !important;
}
.conTxt1.default,
.conTxt2.default,
.conTxt3.default,
.conTxt4.default,
.conTxt5.default {
    color: var(--c-gray-900);
}
.conTxt1.gray8,
.conTxt2.gray8,
.conTxt3.gray8,
.conTxt4.gray8,
.conTxt5.gray8,
.conTxt6.gray8 {
    color: var(--c-gray-800);
}
.conTxt1.gray7,
.conTxt2.gray7,
.conTxt3.gray7,
.conTxt4.gray7,
.conTxt5.gray7,
.conTxt6.gray7 {
    color: var(--c-gray-700);
}
.conTxt1.gray6,
.conTxt2.gray6,
.conTxt3.gray6,
.conTxt4.gray6,
.conTxt5.gray6,
.conTxt6.gray6 {
    color: var(--c-gray-600);
}
.conTxt1.primary,
.conTxt2.primary,
.conTxt3.primary,
.conTxt4.primary,
.conTxt5.primary {
    color: var(--cobalt-blue) !important;
}
.conTxt1.blue,
.conTxt2.blue,
.conTxt3.blue,
.conTxt4.blue,
.conTxt5.blue {
    color: var(--cobalt-blue) !important;
}
.conTxt1.bold,
.conTxt2.bold,
.conTxt3.bold,
.conTxt4.bold,
.conTxt5.bold {
    font-weight:var(--fw-bold) !important;
}

.cntDesc {
    display: block;
    font-size: var(--fs-ms);
    font-weight: var(--fw-regular);
    color: var(--c-gray-800);
    padding: 0 0 1rem 0;
}

/* 아이콘 타이틀 */
.noteTit {
    display: inline-block;
    position: relative;
    font-size: var(--fs-ms);
    font-weight: var(--fw-default);
    color: var(--c-gray-700);
    background: url("../img/ico_info.svg") no-repeat top 0.3rem right/1.6rem;
    padding: 0.2rem 2rem 0.8rem 0;
}
.noteTit.not {
    background: none;
}
.noteTit.toggle {
    position: relative;
    display: inline-block;
    padding-right: 2rem;
    color: var(--c-gray-600) !important;
    background: none;
    padding: 0.5rem 2.3rem 0.5rem 0;
}
.noteTit.toggle::after {
    content: "";
    position: absolute;
    top: 0.4rem;
    right: 0;
    width: 1.8rem;
    height: 1.8rem;
    background: url("../img/ico_arrowb.svg") no-repeat top center;
    background-size: 1.8rem;
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}
.noteTit.toggle.rotated::after {
    transform: rotate(180deg);
}
.icoBinfo {
    display: block;
    font-size: var(--fs-ms);
    font-weight: 600;
    color: var(--c-gray-700);
    background: url("../img/ico_noti_blue.svg") top left/ 1.8rem no-repeat;
    padding: 0 0 1rem 2.5rem;
}
.icoInfo {
    background: url("../img/ico_info.svg") top left/ 1.6rem no-repeat;
    padding-left: 2.5rem;
    padding-top: 0;
}

.noteGrayTit {
    display: block;
    position: relative;
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    color: var(--c-gray-700);
    padding-left: 2rem;
    margin-bottom:1rem;
}
.noteGrayTit::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1.4rem;
    height: 1.4rem;
    background: url("../img/ico_info_deepgray.png") no-repeat top left/1.4rem;
}
.tblDefault + .noteGrayTit {margin-top:.8rem;}
/********************** 타이틀 + 내용 + 버튼 조합등 ***************************/
/* 티이틀 + 텍스트 조합 */
.inner > .depTit3:first-child {
    padding-top: 0;
}
.conTitBox .conTit {
    padding-top: 1rem;
    padding-bottom: 2rem;
}
.conTit + .conTxt3 {
    padding-top: 0;
    padding-bottom: 2rem;
    line-height: 1.4;
}
.depTit3 + .writeInfo {
    padding-bottom: 0;
}
.bgGrayBox > .noteTit {
    padding-bottom: 0.5rem;
}
/* 티이틀 + 버튼 조합 */
.titBox {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0 0.8rem;
}
.titBox > .conTxt2,
.titBox > .conTxt3,
.titBox > .conTxt4,
.titBox > .conTxt5,
.titBox > .depTit2,
.titBox > .depTit3,
.titBox > .depTit4,
.titBox > .depTit5,
.titBox > .notiBox {
    padding: 0;
    flex-shrink: 0;
}
.titBox > .label {
    color: var(--c-gray-700);
    font-weight: var(--fw-default);
}
.titBox > button {
    width: fit-content;
}
.titBox.flexR {
    justify-content: flex-end;
}
.titBox .num {
    font-size: var(--fs-ms);
    color: var(--c-gray-700);
    font-weight: var(--fw-default);
}
/* 리스트 조합 */
.detailList + .detailList {
    margin-top: 1rem;
}
.bgGrayBox > .detailList.nobg + .detailList.nobg {
    margin-top: 2rem;
}
/********************** 레이어 팝업 ***************************/
/* 슬라이딩 팝업 */
.layerPopWrap {
    position: fixed;
    width: var(--100vw);
    height: var(--100vh);
    left: 0;
    bottom: -100%;
    z-index: 10;
}
.layerPopWrap.on {
    background-color: var(--bg-dim-gray);
    bottom: 0;
    border-radius: 0;
}
.layerPopWrap .layerBox {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: absolute;
    bottom: -100%;
    width: 100%;
    height: auto;
    max-height: calc(100% - 9rem);
    padding: 2rem 2.4rem;
    padding-bottom: 0;
    background-color: var(--white);
    border-radius: 2.4rem 2.4rem 0 0;
    transition: 0.4s ease bottom;
}
.layerPopWrap.on .layerBox {
    bottom: 0;
}
/* 전체페이지 고정 팝업 */
.layerPopWrap .layerFullBox {
    position: absolute;
    bottom: 0;
    flex: 1;
    width: 100%;
    height: var(--100vh);
    background-color: var(--white);
    transition: 0.4s ease bottom;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.layerFullBox::-webkit-scrollbar {
    display: none;
} /* 스크롤 숨김 */
.layerPopWrap.on .layerFullBox {
    bottom: 0;
}
/* 중앙에 띄우는 alert 팝업 */
.layerPopWrap3 {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background-color: var(--bg-dim-gray);
}
.layerPopWrap3.on {
    display: flex;
}
.layerBox3 {
    background: var(--white);
    border-radius: 1.6rem;
    max-width: 48rem;
    width: 100%;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    padding: 2rem;
}
/* 팝업 컨테인영역 */
.popConBox {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.popTop .inner {
    padding: 2rem 2.4rem 2rem 2.4rem;
}
.popBtm .inner {
    padding: 1.5rem 2.4rem 2rem 2.4rem;
}
.popAlert {
    padding: 0 0 2rem 0;
}
.ptPop {
    padding-top: 4rem !important;
} /* 팝업 상단패딩 */
.popBtm {padding:2rem 2.4rem;}
/* 바텀시트팝업 스크롤영역 -header */
.popListBox {
    flex: 1;
    width: 100%;
    max-height: calc(var(--100vh) - 6rem);
    overflow-y: auto;
    padding-bottom: 2rem;
}
.popListBox .popRecord:first-child {
    padding-top: 0;
}
.popListBox .popRecord {
    border-top: 1px solid var(--lc-gray);
    padding-top: 3rem;
    padding-bottom: 1rem;
    margin-top: 2rem;
}
.popListBox .popRecord:first-child {
    border-top: none;
    padding-top: none;
}
.popListBox.fixBtn {
    padding-bottom: 9.7rem;
} /* 바텀시트팝업 버튼영역 */
.popListBox.fixAddArea {
    padding-bottom: 15rem;
} /* 바텀시트팝업 버튼+텍스트 영역 */
.popListBox.minH {
    position: relative;
    max-height: calc(var(--100vh) - 30rem);
    margin-bottom: 2rem;
} /* 바텀시트팝업 컨텐츠 스크롤영역(계좌,은행) */
/* 바텀시트팝업 컨텐츠 스크롤영역(계좌,은행) */
.popListBox2 {
    width: 100%;
    max-height: calc(var(--100vh) - 30rem);
    overflow-y: auto;
    position: relative;
    padding-bottom: 2rem;
}
/* 전체팝업 하단고정버튼영영 제외한 스크롤 */
.popListBox5 {
    flex: 1;
    max-height: calc(100vh - 9.7rem);
    overflow-y: auto;
} /* 기존클래스 사용중 삭제X */
.popfixBox {
    flex: 1;
    max-height: calc(100vh - 9.7rem);
    overflow-y: auto;
}

/* 팝업-약관 스크롤영역(-btnArea) */
.popTermsBox {
    flex: 1;
    max-height: calc(100vh - 9.7rem);
    overflow-y: auto;
}
.popTermsBox .popTop {
    position: relative;
}
.popTermsBox .popTop .inner {
    padding: 0;
}

.popTop .popCloseBox {
    position: sticky;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    top: 0;
    left: 0;
    background: var(--white);
    width: 100%;
    padding: 0.5rem 2rem;
    z-index: 1000;
}
.popTop .popCloseBox button {
    margin-top: 1.2rem;
}
.popTop .popCloseBox + .inner {
    padding-top: 0;
}
/* 팝업-약관 상단 닫기버튼 */
.layerBox > .closeBtn {
    position: relative;
    width: 100%;
    height: 3.4rem;
}
.layerBox > .closeBtn::after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 5.2rem;
    height: 0.6rem;
    background: var(--c-gray-300);
    border-radius: 2.4rem;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.layerBox .closeBtn.noAfter::after {
    content: none;
}

/* 바텀시트,전체full 팝업 fixed 버튼 */
.popBtnBox {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 9.7rem;
    padding: 2rem 2.4rem;
    background-color: var(--white);
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid var(--white);
    z-index: 100;
}
.popBtnBox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2rem;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    pointer-events: none;
    z-index: 2;
}
.popBtnBox.addArea {
    height: 15rem;
    padding-bottom: 2rem;
}
/* 전체팝업 fixed 버튼 */
.popBtnbox {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 9.7rem;
    padding: 2rem 2.4rem;
    background-color: var(--white);
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid var(--white);
    z-index: 100;
}
.popBtnbox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2rem;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    pointer-events: none;
    z-index: 2;
}
/* 팝업-약관 fixed 버튼 */
.layerPopWrap:not(.on) .popBtnBox,
.layerPopWrap:not(.on) .popBtnbox,
.layerPopWrap:not(.on) .termsBtnWrap {
    display: none !important;
}
.termsBtnWrap {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 9.7rem;
    bottom: 0;
    padding-bottom: 2rem;
    overflow: hidden;
    background: var(--white);
    z-index: 900;
}
.grBg {
    width: 100%;
    height: 2rem;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 1)
    );
}
.termsBtnbox {
    width: 100%;
    height: 100%;
    padding: 0 2.4rem;
    background-color: var(--white);
}

/* Alert/Bottom 팝업 타이틀 */
.popTit {
    font-size: var(--fs-ml);
    font-weight: var(--fw-bold);
    line-height: 1.4;
    text-align: left;
    padding-bottom: 1.5rem;
}
.popTit span.warning {
    display: inline-block;
    background: url("../img/ico_warning.svg") top right/ 2.4rem no-repeat;
    padding-right: 3rem;
}
.popTitC {
    font-size: var(--fs-xxl);
    font-weight: var(--fw-bold);
    line-height: 1.4;
    text-align: center;
    padding-bottom: 2rem;
}
.popTitC.fullPop {
    padding-top: 2rem;
}
.popTitC span {
    font-weight: var(--fw-default) !important;
}
.popTitC.xl {
    font-size: var(--fs-xl);
    padding-bottom: 2rem;
}
/* .popAlert .popTitC1 {font-size: var(--fs-m);} */
.popTitC1 {
    font-size: var(--fs-m);
    font-weight: var(--fw-bold);
    line-height: 1.4;
    text-align: center;
    padding-bottom: 1rem;
}
.popTitSubTxt {
    display: block;
    font-size: var(--fs-ms);
    color: var(--c-gray-800);
    font-weight: var(--fw-regular);
    padding-bottom: 1.5rem;
}
.popSubTit {
    display: block;
    font-size: var(--fs-ms);
    color: var(--c-gray-600);
    font-weight: var(--fw-default);
    line-height: 1.2;
    text-align: left;
    padding-bottom: 1rem;
}
.popTxtWrap {
    display: flex;
    gap: 1rem;
    width: 100%;
    align-items: center;
    justify-content: center;
}
.popTxt.stxt {
    font-size: var(--fs-xs);
    color: var(--c-gray-800);
}
.popTxt.bluetxt {
    font-size: var(--fs-xs);
    color: var(--cobalt-blue);
}
.popTxtC {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: 1rem;
}
.popTxtC.stxt {
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    font-weight: var(--fw-regular);
    line-height: 1.4;
}
/* pull팝업 타이틀 */
.fullPopTit {
    font-size: var(--fs-xxl);
    font-weight: var(--fw-bold);
    line-height: 1.4;
    text-align: left;
    padding: 2.5rem 0 2rem;
}
.fullPopTitC {
    font-size: var(--fs-xxl);
    font-weight: var(--fw-bold);
    line-height: 1.4;
    text-align: left;
    padding: 2.5rem 0 2rem;
    text-align: center;
}
.fullPopTit.typeS {
    font-size: var(--fs-xl);
    padding-bottom: 1rem;
}
.fullPopTitXL {
    font-size: var(--fs-xl);
    padding-bottom: 0;
}
.fullPoPSubTit {
    display: block;
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
    line-height: 1.4;
    padding-bottom: 1.5rem;
}
/* Toast팝업 텍스트 */
.toast span {
    display: block;
    font-size: var(--fs-ms);
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
    line-height: 1.2;
    text-align: center;
}
.fadeTst {
    opacity: 1;
    transition: opacity 0.2s ease;
}
.fadeTst.fade-out {
    opacity: 0;
}

/********************** 탭버튼 ***************************/
/* tab */
.checkTabWrap {
    display: flex;
    gap: 1rem;
}
.checkTabWrap.mt23 {
    margin-top: 2.3rem;
}
.checkTabWrap a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 42px;
    line-height: 40px;
    background: #e1e1e1;
    border: 1px solid #e1e1e1;
    color: #050505;
    font-size: 1.9rem;
    border-radius: 2rem;
    font-weight: var(--fw-default);
}
.checkTabWrap a.on {
    background: #0f3b62;
    border: 1px solid #0f3b62;
    color: var(--white);
}

.tabConWrap {
    height: 25rem;
}
/* 숨김 처리 (aria-hidden=true일 때) */
[role="tabpanel"] {
    display: none;
}
[role="tabpanel"][aria-hidden="false"] {
    display: block;
}
/* 탭버튼 : 최근내역 */
.sendTabWrap {
    display: flex;
    width: 100%;
}
.sendTabWrap button {
    font-size: var(--fs-ms);
    color: var(--c-gray-400);
    border-bottom: 1px solid var(--c-gray-200);
    height: 3.8rem;
    line-height: 3.8rem;
    font-weight: 500;
}
.sendTabWrap button:focus {
    background: rgba(255, 255, 255, 0.15);
}
.sendTabWrap.tab2 button {
    width: 50%;
}
.sendTabWrap.tab3 button {
    width: 33.333%;
}
.sendTabWrap.tab4 button {
    width: 25%;
    font-size: var(--fs-xs);
}
.sendTabWrap.tab5 button {
    width: 20%;
    font-size: var(--fs-xs);
}
.sendTabWrap button:last-child {
    border-right: 0;
}
.sendTabWrap button.on {
    color: var(--blue-400);
    border-bottom: 2px solid var(--blue-400);
}
/* 탭버튼 : 내용스크롤형식 */
.scrollTabWrap {
    display: flex;
    width: 100%;
}
.scrollTabWrap button {
    font-size: var(--fs-xs);
    color: var(--c-gray-400);
    border-bottom: 1px solid var(--c-gray-200);
    height: 4rem;
    line-height: 4rem;
    font-weight: var(--fw-default);
}
.scrollTabWrap button:focus {
    background: rgba(255, 255, 255, 0.15);
}
.scrollTabWrap.tab3 button {
    width: 33.333%;
}
.scrollTabWrap.tab4 button {
    width: 25%;
}
.scrollTabWrap.tab5 button {
    width: 20%;
}
.scrollTabWrap button:last-child {
    border-right: 0;
}
.scrollTabWrap button.on {
    color: var(--blue-400);
    border-bottom: 2px solid var(--blue-400);
}
/* 탭버튼 :기본형 */
.tabDefault {
    display: flex;
    width: 100%;
    border-radius: 1rem;
    background: var(--bg-light-gray2);
}
.tabDefault button {
    font-size: var(--fs-ms);
    color: var(--c-gray-500);
    height: 5.5rem;
    font-weight: var(--fw-default);
    border-radius: 0.8rem;
    border: 2px solid var(--bg-light-gray2);
}
.tabDefault.tab button {
    min-width: 20%;
} /* 텍스트타입탭버튼 :사이즈 */
.tabDefault.tab2 button {
    width: 50%;
}
.tabDefault.tab3 button {
    width: 33.333%;
}
.tabDefault.tab4 button {
    width: 25%;
}
.tabDefault.tab5 button {
    width: 20%;
}
.tabDefault button.on {
    color: var(--c-gray-700);
    font-weight: var(--fw-default);
    background-color: var(--white);
    border: 3px solid var(--bg-light-gray2);
}
/* 텍스트타입탭버튼 */
.tabDefault.txtType {
    border-radius: 0;
    background: none;
}
.tabDefault.txtType button {
    position: relative;
    font-size: var(--fs-ml);
    color: var(--c-gray-300);
    height: 5rem;
    font-weight: var(--fw-bold);
    border-radius: none;
    border: none;
    padding-right: 1.5rem;
}
.tabDefault.txtType button.on {
    color: var(--c-gray-800);
}
.popTabCon {
    display: none;
    min-height: 30rem;
    margin-top: 1rem;
}
.popTabCon.active {
    display: block;
}
/* 탭버튼 :라운드기본형 */
.tabRndBox {
    display: flex;
    width: 100%;
    border-radius: 1rem;
    background: var(--bg-light-gray2);
}
.tabRndBox button {
    font-size: var(--fs-ms);
    color: var(--c-gray-500);
    height: 5.2rem;
    font-weight: var(--fw-default);
    border-radius: 0.8rem;
    border: 2px solid var(--bg-light-gray2);
}
.tabRndBox.tab2 button {
    width: 50%;
}
.tabRndBox.tab3 button {
    width: 33.333%;
}
.tabRndBox.tab4 button {
    width: 25%;
}
.tabRndBox.tab5 button {
    width: 20%;
}
.tabRndBox button.on {
    color: var(--c-gray-900);
    font-weight: var(--fw-default);
    background-color: var(--white);
    border: 3px solid var(--bg-light-gray2);
}
/* 탭버튼  */
.selBtnWrap {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}
.selBtnWrap > button:only-child {
    border-radius: 1rem;
}
.selBtnWrap > button {
    position: relative;
    flex: 1;
    margin-left: -1px;
    z-index: 1;
    transition: z-index 0.1s;
    height: 4.8rem;
    font-size: var(--fs-xs);
    color: var(--c-gray-700);
    font-weight: var(--fw-default);
    line-height: 1.1;
    text-align: center;
}
.selBtnWrap > button {
    border: 1px solid var(--c-gray-200);
}
.selBtnWrap > button:active,
.selBtnWrap > button[data-select-btn].on {
    color: var(--cobalt-blue);
    border-color: var(--cobalt-blue);
    background-color: var(--bg-dim-primary);
    z-index: 10;
}
.selBtnWrap > button:active,
.selBtnWrap > button[data-select-btn].on em {
    color: var(--cobalt-blue);
}
.selBtnWrap > button:first-child {
    margin-left: 0;
}
.selBtnWrap > button:first-child {
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
}
.selBtnWrap > button:last-child {
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}
.selBtnWrap > button em {
    font-size: var(--fs-xxs);
    color: var(--c-gray-600);
}
.selBtnWrap.small > button {
    height: 4.3rem;
}

/*  */
.popAccoList {
    width: 100%;
}
.popAccoList li {
    border-bottom: 1px solid #ddd;
    padding: 3rem 0;
}
.popAccoList li .text-r {
    margin-top: 2rem;
}
.popAccoList li:last-child {
    border-bottom: 0;
}

.popAccoList .accMoney {
    font-size: 2.6rem;
    font-weight: var(--fw-default);
    color: #171717;
    padding-top: 1rem;
}
.popAccoList .accMoney span {
    font-size: 2.6rem;
    font-weight: bold;
    color: #1d1d1d;
}
.popAccoList .accoNum {
    font-size: 1.6rem;
    font-weight: var(--fw-default);
    color: #777;
    margin-top: 1rem;
}
.popAccoList .depositName {
    font-size: 2rem;
    font-weight: var(--fw-default);
    display: flex;
    align-items: center;
    color: #171717;
}

/* 팝업 은행선택 2025*/
.bankList {
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    align-items: stretch;
    -ms-flex-align: stretch;
    margin: 2rem 0 0;
}
.bankList .bankBox {
    flex: 0 1 33.333333%;
    max-width: 33.333333%;
    padding: 0 4px;
    box-sizing: border-box;
}
.bankList .bankBox:nth-child(n + 4) {
    margin-top: 8px;
}
.bankList .bankLink {
    display: flex;
    display: -ms-flexbox;
    flex-direction: column;
    justify-content: center;
    -ms-flex-pack: center;
    align-items: center;
    -ms-flex-align: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    line-height: 1.1;
    letter-spacing: -0.1rem;
    position: relative;
    height: 100%;
    padding: 1.5rem 0.5rem;
    border-radius: 1rem;
    box-sizing: border-box;
    background-color: var(--gray-200);
    text-align: center;
}
.bankList .bankLink span > img {
    width: 2.8rem;
    height: 2.8rem;
}

/* 계좌, 조회결과 없을떄 */
.notList {
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 9rem 0;
}
.notList img {
    width: 5.3rem;
}
.notList p {
    font-size: 1.8rem;
    font-weight: var(--fw-default);
    padding-top: 3rem;
    color: #656565;
}

/* badge */
.popAccoList .badge {
    padding: 0 0.87rem;
    height: 30px;
    line-height: 28px;
    margin-right: 1rem;
    vertical-align: top;
    display: inline-block;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    border: 1px solid;
    border-radius: 2rem;
}
.popAccoList .badge.green {
    border-color: #046d55;
    color: #046d55;
}
.popAccoList .badge.blue {
    border-color: #0173b4;
    color: #0173b4;
}
.popAccoList .badge.deepr {
    border-color: #ce4747;
    color: #ce4747;
}
.popAccoList .badge.purple {
    border-color: #4c1f9f;
    color: #4c1f9f;
}

.rndBadge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    min-width: 4rem;
    height: 2.8rem;
    border-radius: 2rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-default);
    border: 1px solid;
    margin-left: 1rem;
    padding: 0 1rem;
}
.rndBadge.blueBrd {
    border-color: var(--cobalt-blue);
    color: var(--cobalt-blue);
}
.rndBadge.blue {
    border-color: var(--cobalt-blue);
    color: var(--cobalt-blue);
    background-color: var(--bg-dim-focusBlue);
}
.rndBadge.gray {
    border-color: var(--c-gray-300);
    color: var(--c-gray-800);
}
.rndBadge.red {
    border-color: var(--negative);
    color: var(--negative);
}
.rndBadge.small {
    height: 2.1rem;
    font-size: var(--fs-xxs);
    padding: 0 0.7rem;
}

/* 스크롤바 숨기기 */
.popListBox::-webkit-scrollbar {
    width: 0;
    background: transparent;
    display: none;
}
.popListBox::-webkit-scrollbar-track {
    width: 0;
    background: transparent;
    display: none;
}
.popListBox::-webkit-scrollbar-thumb {
    width: 0;
    background: transparent;
    display: none;
}
/********************** progress ***************************/
.progress {
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--white);
    top: 0;
    left: 0;
    width: 100%;
    z-index: 998;
}
.progress .progressSteps {
    display: flex;
    justify-content: flex-end;
    font-size: var(--fs-xxs);
    color: var(--c-gray-800);
    font-weight: var(--fw-regular);
    padding: 1rem 2rem 0.5rem 2rem;
    background: var(--white);
}
.progress .progressSteps em.total {
    color: var(--c-gray-800);
    margin-left: 0.5rem;
}
.progress .progressSteps em.current {
    color: var(--dark-blue-500);
    font-weight: var(--fw-bold);
    margin: 0 0.5rem;
}
.progress.not {
}
.progress.not .progressSteps {
    justify-content: flex-start;
    font-size: var(--fs-xs);
}
.progress + .inner {
    padding-top: 1rem !important;
}

/********************** list Type ***************************/
/* dot 리스트타입 */
.listType {
    color: var(--c-gray-600);
    margin-bottom: 1rem;
}
.listType > li {
    position: relative;
    color: var(--c-gray-800);
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    padding-left: 1rem;
    line-height: 1.4;
}
.listType > li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.8rem;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background-color: var(--c-gray-600);
}
.listType > li + li {
    margin-top: 0.5rem;
}
.listType > li > span {
    display: block;
    color: var(--c-gray-600);
    margin-top: 0.3rem;
}
.listType > li.rTxt {
    color: var(--negative);
}
.listType > li.rTxt:before {
    background-color: var(--negative);
}
.listType > li.gTxt {
    color: var(--c-gray-700);
}
.listType > li.gTxt:before {
    background-color: var(--c-gray-700);
}
.listType > .noDot {
    padding-left: 0;
}
.listType > .noDot:before {
    display: none;
}

.listType.oneLine > li {
    margin-bottom: 0;
}
.listType.bold > li {
    font-weight: var(--fw-default);
}
.listType.lTxt > li {
    font-size: var(--fs-ms);
}
.listType.xlTxt > li {
    font-size: var(--fs-m);
    font-weight: var(--fw-default);
}
.listType.xlTxt > li:before {top:1rem;}
.listType.sTxt {
    margin-bottom: 0;
}
.listType.sTxt > li {
    font-size: var(--fs-xxs);
    font-weight: var(--fw-regular);
    line-height: 1.4;
}
.listType.sTxt > li::before {
    top: 0.8rem;
    background-color: var(--primary);
}
.listType.sTxt > li + li {
    margin-top: 0.5rem;
}
.listType.gray6 > li {
    color: var(--c-gray-600);
    font-weight: var(--fw-regular);
}
.listType.gray6 > li:before {
    background-color: var(--c-gray-700);
}
.listType.gray6 > li.b {
    font-size: var(--fs-ms);
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
}
.listType.gray6 > li.b > span {
    font-size: var(--fs-xxs);
    font-weight: var(--fw-regular);
}
.listType.gap1 > li + li {
    margin-top: 1rem;
}
.listType.gap05 > li + li {
    margin-top: 0.5rem;
}
/* bgBox 리스트 */
.listType.bgBox {
    border-radius: 1rem;
    background: var(--c-gray-50);
    padding: 1.5rem;
    margin: 2rem 0;
}

/* 숫자형 리스트타입 */
.listNum {
    position: relative;
}
.listNum > li {
    display: flex;
    position: relative;
}
.listNum > li .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-right: 1.5rem;
    margin-bottom: 2rem;
    border-radius: 3rem;
    border: 1px solid var(--primary-light);
    background: var(--dark-blue-400);
    color: var(--white);
    font-size: var(--fs-ms);
    font-weight: var(--fw-default);
    line-height: 6rem;
    letter-spacing: -0.42px;
}
.listNum > li::before {
    content: "";
    position: absolute;
    left: 1.2rem;
    top: 3.5rem;
    width: 0;
    height: calc(100% - 2.5rem);
    border-left: 0.2rem solid var(--c-gray-200);
}
.listNum > li .info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1;
    font-weight: var(--fw-default);
    line-height: 1.2;
    padding-top: 0.3rem;
}
.listNum > li .info strong {
    display: contents;
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
}
.listNum > li .info span {
    display: flex;
    font-size: var(--fs-ms);
    color: var(--c-gray-600);
    font-weight: var(--fw-regular);
    padding-top: 0.8rem;
}
.listNum > li .info span.inline {
    display: inline;
}
.listNum > li .newLink {
    display: inline-flex;
    text-decoration: underline;
    color: inherit;
}
.listNum > li .desc {
    display: block;
    margin-top: 0.5rem;
}
.listNum > li .label {
    font-size: var(--fs-xs);
    line-height: 1.38;
    letter-spacing: -0.39px;
    color: var(--c-gray-900);
}
.listNum > li + li {
    margin-top: 2rem;
}
.listNum > li:last-child::before {
    display: none;
}
.listNum.step > li .num {
    width: 6.7rem;
    height: 3rem;
    margin-bottom: 4rem;
    background: var(--white);
    color: var(--cobalt-blue);
}
.listNum.step > li .info strong {
    display: contents;
    font-size: var(--fs-m);
}
.listNum.step > li:last-child .num {
    margin-bottom: 0;
}
.listNum.step > li + li {
    margin-top: 1rem;
}
.listNum.step > li::before {
    height: calc(100% - 3rem);
    left: 3.3rem;
    top: 3.5rem;
    margin-right: 4rem;
}

.listNum.has-icon .icon-area {
    width: 4rem;
    height: 4rem;
    margin-right: 1.5rem;
    padding: 8px;
    background-color: var(--gray-000);
    border-radius: 50%;
}
.listNum.sm > li .tit {
    color: var(--c-gray-800);
    display: contents;
}

.listNum2 {
    color: var(--c-gray-600);
    padding: 1rem 0 1rem 1.5rem;
    list-style-position: inside;
}
.listNum2 > li {
    list-style: decimal !important;
    font-size: var(--fs-ms);
    font-weight: var(--fw-default);
    color: var(--c-gray-600);
    line-height: 1.4;
}

.listNum2.ls3 > li {
    list-style: none !important;
    font-size: var(--fs-ms);
    font-weight: var(--fw-default);
    color: var(--c-gray-600);
    line-height: 2rem;
    position: relative;
}
.listNum2.ls3 > li:before {
    content: "";
    display: block;
    width: 0.3rem;
    height: 0.3rem;
    background: #3a404b;
    border-radius: 50%;
    position: absolute;
    top: 0.6rem;
    left: -1rem;
}
/* .listNum2.ls3 > li::marker {
    font-size: 1rem;
    color: #3a404b;
} */
.listNum2 > li + li {
    margin-top: 0.8rem;
}
.listNum2.sTxt li {
    font-size: var(--fs-xs);
    line-height: 1.4;
    font-weight: var(--fw-regular);
}
.listNum2.sTxt li + li {
    margin-top: 0.5rem;
}
.listNum2.gray8 li {
    color: var(--c-gray-800);
}
.listNum2.gray7 li {
    color: var(--c-gray-700);
}
.listNum2.gray6 li {
    color: var(--c-gray-600);
}
.listNum2.gap1 > li + li {
    margin-top: 1rem;
}
.listNum2.bgBox {
    border-radius: 1rem;
    background: var(--c-gray-50);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

/* 밑줄형 리스트타입 */
.listLine {
    padding: 1rem 0;
}
.listLine > li {
    position: relative;
    font-size: var(--fs-m);
    border-bottom: 1px solid var(--c-gray-300);
}
.listLine > li > a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 3rem 0;
}
.listLine > li:last-child {
    border-bottom: none;
}
/* 밑줄없는 리스트타입 */
.itemlist {
    padding: 1rem 0;
}
.itemlist > li {
    position: relative;
    font-size: var(--fs-m);
    padding-left: 1rem;
}
.itemlist > li + li {
    padding-top: 1rem;
}
.itemlist > li > a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    color: var(--c-gray-800);
    padding: 1rem 0;
}
.itemlist > li > button {
    display: block;
    position: relative;
    width: 100%;
    color: var(--c-gray-800);
    padding: 1rem 0;
}
.itemlist > li:last-child {
    border-bottom: none;
}
.itemlist.arrow > li {
    display: flex;
    align-items: center;
    font-size: var(--fs-ms);
    padding-left: 0;
    min-height: 4.8rem;
}
.itemlist.arrow > li + li {
    padding-top: 0;
}
.itemlist.arrow > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 3rem;
}
.itemlist.arrow > li > a > span {
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
}
.itemlist.arrow > li > a::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2.4rem;
    height: 2.4rem;
    background: url("../img/ico_arrowr_detail.svg") no-repeat top right / 2.4rem;
}

.itemlist.arrow > li > button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--fs-ms);
    color: var(--c-gray-800);
    padding-right: 3rem;
}
.itemlist.arrow > li > button > span {
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
}
.itemlist.arrow > li > button::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2.4rem;
    height: 2.4rem;
    background: url("../img/ico_arrowr_detail.svg") no-repeat top right / 2.4rem;
}

/* 유의사항 리스트 없어질지 확인*/
.noteList {
}
.noteList li {
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    padding: 0 0 0.5rem 2.5rem;
}
.noteList li.tit {
    font-size: var(--fs-ms);
    color: var(--c-gray-700);
    font-weight: var(--fw-default);
    background: url("../img/ico_info.svg") no-repeat top left/ 1.8rem 1.8rem;
    padding-left: 2.5rem;
    margin-top: 0.5rem;
}
.noteList.blue li.tit {
    background-image: url("../img/ico_noti_blue.svg");
    background-size: 2rem 2rem;
}

/* noDot 리스트 */
.noDotList {
    padding-top: 1rem;
}
.noDotList li {
    font-size: var(--fs-xs);
    color: var(--c-gray-800);
    font-weight: var(--fw-regular);
}
.noDotList .tit {
    display: block;
    font-size: var(--fs-xs);
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
    padding-bottom: 0.3rem;
}
.noDotList .txt {
    display: block;
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
}
.noDotList .stxt {
    display: block;
    font-size: var(--fs-xxs);
}
.noDotList.not {
    display: none;
}
.noDotList li + li {
    margin-top: 0.5rem;
}

/* 검색어리스트 */
.wordList {
    min-height: 10rem;
}
.wordList li {
    position: relative;
    display: inline-block;
    margin: 0 1rem 1rem 0;
}
.wordList .wordItem {
    display: block;
    overflow: hidden;
    max-width: 100%;
    padding: 1rem 4rem 1rem 2rem;
    height: 4rem;
    background-color: var(--c-gray-100);
    border-radius: 2.4rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--c-gray-800);
    font-size: var(--fs-m);
    font-weight: var(--fw-default);
}
.wordList .wordItem.bg2 {
    background-color: var(--c-gray-200);
}
.wordList .wordDel {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    align-items: center;
    width: 4rem;
    height: 4rem;
    background: url(../img/ico_del.svg) no-repeat center / 1.6rem;
}
/* 내용 리스트 */
.cntList {
}
.cntList > li {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    color: var(--c-gray-800);
    line-height: 1.4;
}
.cntList > li + li {
    margin-top: 1.5rem;
}
.cntList > li > span {
    display: block;
}
.cntList > li > p {
    font-size: var(--fs-xxs);
    color: var(--c-gray-800);
}
.cntList > li > .tit {
    font-size: var(--fs-ms);
    font-weight: var(--fw-bold);
    color: var(--c-gray-800);
    line-height: 1.4;
    margin-bottom: 0.5rem;
}
.cntList > li > .sdesc {
    font-size: var(--fs-ms);
    font-weight: var(--fw-regular);
    color: var(--c-gray-800);
}
.cntList > li > .ltit {
    font-size: var(--fs-m);
    font-weight: var(--fw-bold);
}
.cntList > li > .mtit {
    font-size: var(--fs-ms);
    font-weight: var(--fw-default);
}
.cntList > li > .stit {
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
}
.cntList > li > .txt {
    font-size: var(--fs-xs);
    font-weight: var(--fw-default);
    color: var(--c-gray-800);
}
.cntList > li > .listNum2 {
    padding-top: 0;
}
.cntList > li .listType {
    margin: 0 0 0.5rem 0;
}
.cntList.stxt li {
    font-size: var(--fs-xxs);
}
.cntList.stxt > li + li {
    margin-top: 1.5rem;
}
.cntList.stxt > li > .tit {
    font-size: var(--fs-xs);
    font-weight: var(--fw-default);
    color: var(--c-gray-800);
}
.cntList.single > li + li {
    margin-top: 1rem;
}
.cntList.single > li {
    display: flex;
    flex-direction: row;
}
.cntList.single > li > span {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-default);
    color: var(--c-gray-800);
}
.cntList.single > li > .label {
    color: var(--c-gray-600);
    margin-right: 1rem;
}
.cntList.single > li > .data {
    color: var(--c-gray-800);
}
.cntList.sblock {
    margin-top: 1rem;
}
.cntList.sblock > li {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}
.cntList.sblock > li > span {
    font-size: var(--fs-xs);
    font-weight: var(--fw-default);
    color: var(--c-gray-800);
    line-height: 1.2;
    margin: 0;
}
.cntList.sblock > li > .label {
    width: 35%;
    color: var(--c-gray-600);
    padding-top: 0.2rem;
}
.cntList.sblock > li > .data {
    width: 65%;
    font-size: var(--fs-ms);
    word-break: break-all;
}
.cntList.agree > li > .stit {
    color: var(--c-gray-600);
}
.cntList.agree > li > .sdesc {
    font-weight: var(--fw-regular);
}
/* 리스트형버튼 */
.listTypeBtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0 0 0;
}
.listTypeBtn li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 5.7rem;
    border: 1px solid var(--c-gray-200);
    border-radius: 1rem;
}
.listTypeBtn li.on {
    border-color: var(--cobalt-blue);
    color: var(--cobalt-blue);
}
.listTypeBtn li.leftItem {
    padding: 0 2rem;
}
.icoBtn {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 2rem;
}
.icoBtn .icon {
    width: 2.4rem;
    height: 2.4rem;
    background-size: 2.4rem;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 2rem;
}
.icoBtn .txt {
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
}
.listTypeBtn li.disabled {
    pointer-events: none;
    opacity: 0.5;
    background-color: var(--c-gray-100);
    border-color: var(--c-gray-300);
}
.listTypeBtn li.disabled .txt {
    color: var(--c-gray-500);
}
.listTypeBtn.addItem {
    margin: 0;
}
.listTypeBtn.addItem li {
    height: initial;
    padding: 1.5rem;
}
.listTypeBtn.detail li {
    position: relative;
    height: initial;
}
.listTypeBtn.detail li a {
    display: block;
    width: 100%;
    padding: 1.5rem;
    background: url("../img/ico_arrow_sright.svg") no-repeat center right 1.5rem /
        1.8rem;
}
.listTypeBtn.detail li span {
    display: block;
}
.listTypeBtn.detail li .tit {
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
    line-height: 1.4;
}
.listTypeBtn.detail li .subtxt {
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    font-weight: var(--fw-regular);
}

.icoBtn.arrowR {
    background: url("../img/ico_arrow_right.svg") no-repeat center right 1rem /
        2.4rem;
}
/*  */
.deposit .icon {
    background-image: url("../img/ico_pro_deposit.svg");
}
.save .icon {
    background-image: url("../img/ico_pro_save.svg");
}
.acco .icon {
    background-image: url("../img/ico_pro_acco.svg");
}
.method01 .icon {
    background-image: url("../img/ico_financial.svg");
}
.method02 .icon {
    background-image: url("../img/ico_public.svg");
}
/* 제휴사광장 */
.ptn01 .icon {
    background-image: url("../img/ico_ptn_status.svg");
}
.ptn02 .icon {
    background-image: url("../img/ico_ptn_result.svg");
}
.ptn03 .icon {
    background-image: url("../img/ico_ptn_sch.svg");
}
.ptn04 .icon {
    background-image: url("../img/ico_ptn_sales.svg");
}
.ptn05 .icon {
    background-image: url("../img/ico_calc.svg");
}

/* 팝업 계좌,상품선택 리스트 */
.selectItem {
    width: 100%;
}
.selectItem li + li {
    margin-top: 0.5rem;
}
.selectItem li:last-child {
    border-bottom: 0;
}
.selectItem li a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: 0 0 auto;
    padding: 1.5rem;
}
.selectItem li a.on {
    background: var(--c-gray-100);
    border-radius: 1rem;
}
.selectItem li .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;
}
.selectItem li .icoBank image {
    width: 3.8rem;
    height: 3.8rem;
}
.selectItem li .accoBank {
    flex: 1;
    width: calc(100%-6rem);
}
.selectItem li .text-r {
    margin-top: 2rem;
}
.selectItem li p {
    display: flex;
}
.selectItem li p.tit {
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
}
.selectItem li p.decs {
    font-size: var(--fs-ms);
    color: var(--c-gray-800);
    font-weight: var(--fw-regular);
    margin-top: 0.3rem;
}
/* 상태,버튼추가 리스트 */
.selectItem.status li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: 0 0 auto;
    position: relative;
    padding: 1.5rem 0;
}
.selectItem.status li .statusBox {
    position: absolute;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 7rem;
    height: 100%;
    top: 50%;
    transform: translateY(-50%);
    right: 0.5rem;
}
/* 선택없는 리스트 */
.selectItem.noSel li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: 0 0 auto;
    padding: 1.5rem 0;
}
.selectItem.noSel li p.tit {
    font-weight: var(--fw-bold);
}
.selectItem.noSel li p.decs {
    font-size: var(--fs-xs);
}
.selectItem.noSel li.num {
    justify-content: flex-end;
    font-size: var(--fs-xxl);
    font-weight: var(--fw-bold);
    color: var(--gray-900);
    padding: 0 0 2rem 0;
}
/* 온보딩 */
.selectItem.onboarding {
    margin-top: 1rem;
}
.selectItem.onboarding li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: 0 0 auto;
    padding: 1.5rem 0;
}
.selectItem.onboarding li p.tit {
    font-size: var(--fs-m);
    font-weight: var(--fw-default);
}
.selectItem.onboarding li p.decs {
    margin-top: 0.5rem;
    color: var(--c-gray-600);
    font-weight: var(--fw-regular);
}
.selectItem li .ico {
    display: flex;
    position: relative;
    width: 4.8rem;
    height: 4.8rem;
    margin-right: 1.5rem;
    z-index: 1;
    background-color: var(--gray-200);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 2.4rem;
    border-radius: 50%;
}
.selectItem li .ico.storage {
    background-image: url("../img/ico_storage.svg");
}
.selectItem li .ico.security {
    background-image: url("../img/ico_caution.svg");
}
.selectItem li .ico.camera {
    background-image: url("../img/ico_camera.svg");
}
.selectItem li .ico.phone {
    background-image: url("../img/ico_phone.svg");
}
/* 드래그앤드롭 순서변경 */
.selectItem.sort li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: 0 0 auto;
    position: relative;
    padding: 1.5rem 0.5rem;
    user-select: none;
    touch-action: none;
}
.selectItem.sort li::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0.5rem;
    width: 2.4rem;
    height: 2.4rem;
    background: url(../img/ico_sort.svg) no-repeat center / 2.4rem;
}
.sortable-placeholder {
    background: var(--c-gray-100);
    height: 7rem;
    margin: 0.5rem 0;
    border-radius: 1rem;
}

/********************** table ***************************/
table caption {
    overflow: hidden !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    clip: rect(0 0 0 0) !important;
    margin: -1px !important;
    padding: 0 !important;
    color: transparent !important;
}
.tableWrap {
    padding-bottom: 2rem;
}
.tblDefault {
    width: 100%;
    border-top: 1px solid var(--dark-blue-400);
}
.tblDefault > thead > tr > th,
.tblDefault > thead > tr > td {
    font-size: var(--fs-xs);
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
    text-align: center;
    border-right: none;
    border-bottom: 1px solid var(--c-gray-200);
    height: 4rem;
    padding: 0.8rem;
}
.tblDefault > thead > tr > th {
    background-color: var(--c-gray-100);
}
.tblDefault > thead > tr > td {
    text-align: center;
}
/* .tblDefault > thead > tr > th:last-child,
.tblDefault > thead > tr > td:last-child {border-right: 0} */
.tblDefault > thead > tr > th.brd-r {
    border-right: 1px solid var(--c-gray-200);
}
.tblDefault > thead > tr:first-child > th,
.tblDefault > thead > tr:first-child > td {
    border-top: 1px solid var(--dark-blue-400);
}
/* .tblDefault:not(:has(thead)) > tbody > tr:first-child > td {
    border-top: 1px solid var(--dark-blue-400);
} */
.tblDefault > tbody > tr > th,
.tblDefault > tbody > tr > td {
    font-size: var(--fs-xs);
    color: var(--c-gray-800);
    word-break: break-all;
    text-align: center;
    border-right: 1px solid var(--c-gray-200);
    border-bottom: 1px solid var(--c-gray-200);
    height: 4rem;
    padding: 0.8rem;
}
.tblDefault > tbody > tr > th {
    font-weight: var(--fw-default);
    background-color: var(--c-gray-100);
}
.tblDefault > tbody > tr > th:last-child {
    border-right: 0;
}
.tblDefault > tbody > tr > td {
    font-weight: var(--fw-regular);
    line-height: 1.4;
}
.tblDefault > tbody > tr > td strong {
    display: inline-block;
}
.tblDefault > tbody > tr > td:last-child {
    border-right: 0;
}
.tblDefault > tbody > tr > td.rbrd {
    border-right: 1px solid var(--c-gray-200);
}
.tblDefault > tbody > tr > td.brd-right,
.tblDefault > tbody > tr > td:last-child.brd-right {
    border-right: 1px solid var(--c-gray-200);
}
.tblDefault > thead > tr > .nobt,
.tblDefault > tbody > tr > .nobt {
    border-bottom: none;
}
.tblDefault > tbody > tr > td > .inline {
    display: inline-block;
    vertical-align: top;
    font-size: inherit;
    color: inherit;
    margin-right: 0.2rem;
}
.tblDefault > tbody > tr > td .listType {
    margin-bottom: 0;
}
.tblDefault > tbody > tr > td .listType li + li {
    margin-top: 0;
}
.tblDefault > tbody > tr > td .conTxt5 {
    padding: 0;
}

.tblDefault.vertical > thead > tr > th {
    border-right: 1px solid var(--c-gray-200);
}
.tblDefault.bTit > tbody > tr > td.stit {
    color: var(--c-gray-900);
    font-weight: var(--fw-default);
    text-align: center !important;
}
.tblDefault.al > thead > tr > th,
.tblDefault.al > thead > tr > td,
.tblDefault.al > tbody > tr > th,
.tblDefault.al > tbody > tr > td {
    text-align: left;
}
.tblDefault.al > thead > tr > th span.ac,
.tblDefault.al > thead > tr > td span.ac,
.tblDefault.al > tbody > tr > th span.ac,
.tblDefault.al > tbody > tr > td span.ac {
    display: block;
    text-align: center;
}

.tblDefault.nobg {
    border-color: var(--dark-blue-400);
}
.tblDefault.nobg th {
    font-size: var(--fs-xs);
    color: var(--c-gray-800);
    font-weight: var(--fw-regular);
    background-color: var(--white);
    line-height: 1.4;
}
.tblDefault.nobg th,
.tblDefault.nobg td {
    border-right: none;
}
.tblDefault.nobg td {
    font-size: var(--fs-xxs);
    color: var(--c-gray-800);
    font-weight: var(--fw-regular);
    line-height: 1.4;
}
.tblDefault.nobg td .roundChk {
    margin-top: 1rem;
}
.tblDefault.nobg th .markUp {
    display: block;
    position: relative;
    font-size: inherit;
    padding-left: 1.8rem;
    margin-top: 2rem;
}
.tblDefault.nobg th .markUp::before {
    content: "└";
    position: absolute;
    left: 0;
    top: 0;
    width: 1rem;
}

.tblDefault.nobrd {
    border-color: var(--dark-blue-400);
}
.tblDefault.nobrd th {
    background-color: var(--c-gray-100);
}
.tblDefault.nobrd th,
.tblDefault.nobrd td {
    border-right: none;
    font-weight: var(--fw-regular);
}
/* 가로형 테이블 */
.tbl-form {
    table-layout: fixed;
    width: 100%;
}
.tbl-form th,
.tbl-form td {
    height: 6rem;
    vertical-align: middle;
    text-align: left;
    border: 1px solid #a2a2a2;
    font-size: 2rem;
    color: #333;
    font-weight: var(--fw-default);
}
.tbl-form th {
    padding: 0.5rem 0.5rem 0.6rem 1.6rem;
    background-color: #ededed;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}
.tbl-form td {
    padding: 0.5rem 0.5rem 0.6rem 1.6rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
}

.selBtn {
    width: 100%;
    height: 100%;
    font-size: 2rem;
    font-weight: var(--fw-default);
    text-align: left;
    background: url(../img/ico-select-down.png) right 1rem center no-repeat;
    background-size: 1.6rem auto;
    padding-right: 2.6rem;
    overflow: hidden;
    display: inline-block;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
}
/* 세로형 테이블 */
.tbl-list {
    table-layout: fixed;
    width: 100%;
}
.tbl-list th,
.tbl-list td {
    height: 6rem;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #a2a2a2;
    font-size: 2rem;
    color: #333;
    font-weight: var(--fw-default);
}
.tbl-list thead th {
    background-color: #ededed;
    border-bottom: 0;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}
.tbl-list tbody th,
.tbl-list tbody td {
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
}

/********************** 입력 레이아웃 ***************************/
/* 작성리스트 */
.writeInfo {
    width: 100%;
    margin-bottom: 1rem;
}
.writeInfo > li {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    position: relative;
}
.writeInfo > li + li {
    margin-top:1rem;
}
.writeInfo > li.row {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    width: 100%;
    align-items: center;
}
.writeInfo > li.row > .inputWrap {
    flex: 1;
}
.writeInfo > li > .roundChk:last-child {margin-bottom:0;}
.writeInfo > li > .rndChk:first-child {margin-top:1rem;}
.writeInfo > li > .rndChk:last-child {margin-bottom:0rem;}
.writeInfo.gap0 > li + li {
    margin-top: 0;
}
.writeInfo.gap0 > li {
    gap: 0.8rem;
}
.writeInfo.gap1 > li + li {
    margin-top: 1.2rem;
}
.writeInfo.gap2 > li + li {
    margin-top: 2rem;
}
.writeInfo.firstP > li:first-child > span.label,
.writeInfo.firstP > li:first-child > label {
    padding-top: 0;
}
.writeInfo > li:first-child > span.label,
.writeInfo > li:first-child > label {
    padding-top: 1.5rem;
}
.writeInfo > li > span.label,
.writeInfo > li > label {
    display: block;
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
    padding: 1rem 0 0 0;
}
.writeInfo > li > label.chkBox {
    display: inline-flex;
    padding: initial;
}
.writeInfo > li > label.noti {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}
.writeInfo > li > label .asterisk {
    display: inline-block;
    color: var(--negative);
    margin: 0 0.3rem;
}
.writeInfo > li > span {
    display: block;
    color: var(
        --c-gray-700
    ); /* font-weight: var(--fw-regular); padding: 0.5rem 0; */
}
.writeInfo > li > span.data {
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
    padding: 0.5rem 0 1rem 0;
}
.writeInfo > li > span.success {
    display: block;
    font-size: var(--fs-ms);
    color: var(--c-gray-700);
    font-weight: var(--fw-default);
    text-align: center;
}
.writeInfo > li > span.fw400 {
    color: var(--c-gray-600);
    font-size: var(--fs-ms);
    font-weight: var(--fw-regular) !important;
    padding-top: 0;
}
.writeInfo > li > .slabel {
    display: block;
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    font-weight: var(--fw-default);
    padding: 1.5rem 0 0.5rem;
}
.writeInfo > li > .arMsg {
    display: block;
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    text-align: right;
    padding: 0;
}
.writeInfo > li > .resultInfo {
    width: 100%;
    border-radius: 1rem;
    background: var(--c-gray-50);
    padding: 1.5rem;
    font-size: var(--fs-xs);
    color: var(--c-gray-700);
    font-weight: var(--fw-regular);
    line-height: 1.4;
    text-align: center;
}
.writeInfo > li > .noteGrayTit {
    margin: 0;
}
.writeInfo > li.dtListBox {
    padding-top: 2rem;
}
.writeInfo > li.dtListBox .detailList + .detailList {
    margin: 0;
}
/* 양쪽 아이템 */
.writeInfo > li > .sp {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.writeInfo > li > .sp > span {
    display: inherit;
}
.writeInfo > li > .sp > span.label {
    flex-shrink: 0;
    color: var(--c-gray-700);
}
.writeInfo > li > .sp > button {
    width: fit-content;
}
.writeInfo > li > .sp > .roundChk {
    width: 50%;
}
/* 폰트사이즈18 */
.writeInfo.fs18 > li > label {
    font-size: var(--fs-m);
    font-weight: var(--fw-default);
    padding: 1.5rem 0 1rem;
}
.writeInfo.fs18 > li > span {
    font-size: var(--fs-ms);
    color: var(--c-gray-600);
    font-weight: var(--fw-regular);
    padding-top: 0;
    padding-bottom: 1.5rem;
}
.writeInfo.fs18 > li:first-child > label {
    padding-top: 1rem;
}

.inputDataBox {
    display: flex;
    align-items: center;
    height: 5.4rem;
    font-size: var(--fs-m);
    color: var(--c-gray-800);
}
.notiBtn {
    width: 1.8rem;
    height: 1.8rem;
    background: url(../img/ico_noti.svg) no-repeat center / 1.6rem;
}

/********************** 내역상세 레이아웃 ***************************/
.hdlName {
    font-size: 2rem;
    color: #171717;
    font-weight: var(--fw-bold);
}
/* 좌우정렬 리스트 */
.detailInfo {
    padding: 0;
}
.detailList {
    padding: 1.6rem;
    border-radius: 1rem;
    background: var(--c-gray-50);
    border: 0px solid var(--c-gray-50);
}
.pdtop16 {
    padding-top: 16px !important;
}
.detailList > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.detailList li + li {
    margin-top: 1.6rem;
}
.detailList li.tit {
    border-bottom: 1px solid var(--c-gray-200);
    padding-bottom: 1rem;
    align-items: center;
}
.detailList li.brdB1 {
    border-bottom: 1px solid var(--c-gray-200);
    padding-bottom: 1rem;
}
.detailList li.tAlign {
    align-items: flex-start;
}
.detailList li.singleItemL {
    justify-content: flex-start;
}
.detailList li.singleItemR {
    justify-content: flex-end;
    margin-top: 0 !important;
}
.detailList li.singleItemC {
    justify-content: center;
    align-items: center;
}
.detailList li.brdTit {
    border-bottom: 1px solid var(--c-gray-200);
    font-size: var(--fs-ms);
    font-weight: var(--fw-default);
    padding-bottom: 1.5rem;
}
.detailList li > p {
    font-size: var(--fs-ms);
}
.detailList li > p.detailLeft {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 10rem;
    font-size: var(--fs-xs);
    color: var(--c-gray-700);
    font-weight: var(--fw-regular);
    vertical-align: top;
}
.detailList li > p.detailRight {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: var(--c-gray-900);
    font-weight: var(--fw-default);
    text-align: right;
    word-break: break-all;
}
.detailList li p.secondRow {
    display: block;
    text-align: right;
    margin-top: 0.5rem;
}
.detailList li p.amount {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
}
.detailList li p.tit {
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    font-weight: var(--fw-bold);
}
.detailList li p.num {
    font-size: var(--fs-ms);
    color: var(--c-gray-800);
    font-weight: var(--fw-bold);
}
.detailList li p.done {
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
}
.detailList li p .subtxt {
    font-size: var(--fs-xs);
    color: var(--c-gray-700);
    font-weight: var(--fw-regular);
}
.detailList li p .subtxtM {
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    font-weight: var(--fw-default);
    line-height: 1.4;
}
.detailList li p .caution {
    font-size: var(--fs-xs);
    color: var(--negative);
}
.detailList li p .done {
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
}
.detailList li p .active {
    font-size: var(--fs-xs);
    color: var(--cobalt-blue);
}
.detailList li p a.link {
    color: var(--cobalt-blue);
    font-weight: var(--fw-bold);
}
.detailList.sTxt {
    padding: 1.5rem;
}
.detailList.sTxt li p {
    font-size: var(--fs-xs);
}
.detailList.sTxt li + li {
    margin-top: 1rem;
}

.conBoxTit {
    display: flex;
    justify-content: center;
    min-height: 2.6rem;
    color: var(--c-gray-900) !important;
    font-size: var(--fs-m) !important;
    font-weight: var(--fw-bold) !important;
    line-height: 1.2;
}
.boxDesc {
    display: block;
    font-size: var(--fs-ms) !important;
    color: var(--c-gray-600) !important;
    font-weight: var(--fw-default) !important;
    padding: 0.5rem 0;
    line-height: 1.2;
}
.detailList.on {
    background-color: var(--blue-50);
    border: 1px solid var(--blue-400);
}
.detailList.focus {
    cursor: pointer;
}
.detailList.focus.on {
    background-color: var(--blue-50);
    border-color: var(--blue-400);
}
/* blue백그라운드 */
.detailList.blueBg {
    border-radius: 1.4rem;
    background: var(--dark-blue-50);
}
.detailList.grayBg {
    width: 100%;
    border-radius: 1rem;
    background: var(--c-gray-200);
    padding: 1.5rem;
}
/* no백그라운드 */
.detailList.nobg {
    background: none;
    padding: 0;
    border-radius: 0;
}
/* 보더박스 */
.detailList.brd {
    border: 1px solid var(--c-gray-200);
    background: none;
}
/* 박스보더 */
.detailList.brdT1 {
    margin-top: 1.5rem;
    padding-top: 1.5rem !important;
    border-top:1px solid var(--c-gray-200);
}
.detailList.brdB1 {
    padding-bottom: 1.5rem;
}
/* li간격  */
.detailList.gab0 li + li {
    margin-top: 0;
}
.detailList.gab05 li + li {
    margin-top: 0.5rem;
}
.detailList.gab1 li + li {
    margin-top: 1rem;
}
/* 폰트사이즈 */
.detailList.fs18 li p {
    font-size: var(--fs-m); /* 폰트기본 18 */
}

.detailList2.not {
    display: none;
}
.detailList2 {
}
.detailList2 li {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.detailList2 li + li {
    margin-top: 2rem;
}
.detailList2 li.tit {
    margin-top: 0;
}
.detailList2 li.topAlign {
    align-items: flex-start;
}
.detailList2 li.singleItemR {
    justify-content: flex-end; /* 오른쪽 정렬 */
    margin-top: 0 !important;
}
.detailList2 li.singleItemC {
    justify-content: center; /* 중앙 정렬 */
}
.detailList2 li p {
    font-size: var(--fs-ms);
    font-weight: var(--fw-default);
}
.detailList2 li p.detailLeft {
    min-width: 13rem;
    color: var(--c-gray-600);
    vertical-align: top;
}
.detailList2 li p.detailRight {
    color: var(--c-gray-900);
    text-align: right;
}
.detailList2 li p.secondRow {
    display: block;
    text-align: right;
    margin-top: 0.5rem;
}

/* 한줄값 리스트 */
.inlineList {
    margin-bottom: 1.5rem;
}
.inlineList > li {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
    padding-top: 2rem;
}
.inlineList > li > span {
    display: block;
}
.inlineList > li > span.tit {
    height: 3rem;
    font-size: var(--fs-m);
    font-weight: var(--fw-bold);
}
.inlineList > li > span.decs {
    font-size: var(--fs-ms);
    color: var(--c-gray-600);
    font-weight: var(--fw-regular);
}

/* 입력데이타리스트 */
.inputLog {
    width: 100%;
}
.inputLog > li {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.inputLog > li + li {
    margin-top: 1rem;
}
.inputLog.gap0 > li + li {
    margin-top: 0;
}
.inputLog.gap1 > li + li {
    margin-top: 1rem;
}
.inputLog.gap2 > li + li {
    margin-top: 2rem;
}
.inputLog > li > span .asterisk {
    display: inline-block;
    color: var(--negative);
    margin: 0 0.3rem;
}
.inputLog > li > span {
    display: block;
    font-weight: var(--fw-regular);
}
.inputLog > li > span.label {
    font-size: var(--fs-ms);
    color: var(--c-gray-700);
}
.inputLog > li > span.data {
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    font-weight: var(--fw-default);
    padding-bottom: 1rem;
}

/* 추가정보보기 토글버튼 */
.popDetailBtn {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    border-top: 1px solid var(--c-gray-200);
}
.popDetailBtn a {
    display: block;
    position: relative;
    width: 100%;
    font-size: var(--fs-xs);
    color: var(--c-gray-500);
    line-height: 1.2;
    padding: 1.6rem 0 0 0;
    text-align: center;
}
.popDetailBtn a::after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 1.8rem;
    height: 1.4rem;
    background-size: 1.4rem;
    background: url(../img/ico_arrow_sopen.svg) no-repeat center right;
    transition: transform 0.3s ease;
}
.popDetailBtn a.open::after {
    transform: rotate(0deg);
}
.popDetailBtn a.close::after {
    transform: rotate(180deg);
}
.popDetailBtn.nobrd {
    border-top: none;
}

/* 내역상세 버튼 */
.detailItem {
    display: flex;
    gap: 1rem;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 0 0;
}
.detailItem li {
    position: relative;
    font-size: var(--fs-ms);
    color: var(--c-gray-700);
}
.detailItem li.itemTxt {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
}
.detailItem li.itemTxt.h2 {
    height: 2rem;
}
.detailItem li.desc {
    font-size: var(--fs-ms);
    color: var(--c-gray-600) !important;
}
.detailItem li button.itemBtn {
    display: inline-block;
    font-size: var(--fs-xs);
    color: var(--c-gray-700);
    line-height: 2.4rem;
    padding: 1rem 3rem 1rem 2rem;
}
.detailItem li .itemBtn::after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 2.4rem;
    height: 2.4rem;
    background: url(../img/ico_arrow_sright.svg) no-repeat center right;
    background-size: 1.4rem;
}
.detailDecs {
    display: block;
    width: 100%;
    text-align: center;
    color: var(--negative);
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    line-height: 1.4;
    margin-bottom: 2rem;
    border: 1px solid var(--red-400);
    border-radius: .6rem;
}

/********************** 간편인증 ***************************/
/* 비밀번호 */
.passwordMasking {
    text-align: center;
    padding-top: 8rem;
}
.passwordMasking .passwordDot {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #e5e5e5;
    vertical-align: top;
}
.passwordMasking .passwordDot + .passwordDot {
    margin-left: 17px;
}
.passwordMasking .passwordDot.on {
    background-color: var(--primary);
}
/* 키보드 */
.tenKey {
    border: 0;
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    min-height: 252px;
    padding: 2.6rem 1.8rem;
    background-color: var(--primary);
}
/*전체 keypadSection 및 숫자버튼 + dummy css*/
.tenKey .btnSection {
    text-align: center;
    height: inherit;
    display: flex;
    flex-wrap: wrap;
    padding: 0 2rem;
}
.tenKey .btnSection .btnCustom {
    cursor: pointer;
    position: relative;
    width: 33.3%;
    height: 19%;
    height: 6.3rem;
    font-size: var(--fs-xxxl);
    color: var(--white);
    font-weight: var(--fw-default);
    letter-spacing: -0.5px;
    text-align: center;
}
.tenKey .btnSection .btnCustom:focus {
    background: rgba(255, 255, 255, 0.15);
}
/* delete 버튼용 css */
.tenKey .btnSection .btnCustom.delete {
    background: url("../img/ico_arrow_wleft.svg") center center no-repeat;
}
.tenKey .btnSection .btnCustom.inactive {
    pointer-events: none; /* 클릭 등 사용자 이벤트 무시 */
    cursor: default; /* 커서도 기본값으로 변경 */
    outline: none; /* 포커스 시 외곽선 제거 */
}

/********************** datePicker ***************************/
.datePikArea {
    padding-top: 0;
    padding-bottom: 9.7rem;
}
.ui-widget.ui-widget-content {
    border: none;
}
.ui-datepicker {
    width: 100%;
    padding: 0;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    border: none;
    background: none;
    color: var(--c-gray-800);
}
.ui-widget-header {
    background: none;
} /* 년,월 영역  */
.ui-datepicker .ui-datepicker-header {
    padding: 0;
    position: relative;
} /* 년,월 영역  */
.ui-datepicker .ui-datepicker-title {
    font-size: var(--fs-ml);
    font-weight: normal;
    color: var(--c-gray-900);
    margin: 0;
    line-height: 1.8em;
    text-align: center;
    white-space: nowrap;
} /* 년,월 폰트설정  */
.ui-datepicker .ui-datepicker-title select.ui-datepicker-month {margin-left:1rem;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-month,
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year {
    height:3.8rem;
    padding-right:2rem;
    background:url(../img/ico-select-down.png) no-repeat right center/1rem auto;
    font-family:"Pretendard Variable", "Pretendard", sans-serif;
    font-size:var(--fs-ml);
    line-height:3.8rem;
}
.ui-widget-header .ui-icon {
    background: url("../img/ico_date_prev.svg") no-repeat center left !important;
} /* 년,월 이동 이미지  */
.ui-icon-circle-triangle-e {
    transform: scaleX(-1);
} /* 년,월 이동 이미지반전  */
/* 년,월 이동 이미지 위치 */
.ui-datepicker .ui-datepicker-prev {
    left:0;
}
.ui-datepicker .ui-datepicker-next {
    right:0;
}
.ui-datepicker th span {
    color: var(--c-gray-700);
    font-weight: var(--fw-default);
}
.ui-datepicker table {
    font-size: var(--fs-ms);
    font-weight: var(--fw-default);
    margin: 0;
    height: 26.4rem;
} /* 달력높이지정 */
#datepicker {
    border: none;
    box-sizing: border-box;
    padding: 0;
} /* 모든 border 제거 */
/* 달력 내 모든 border 제거 */
.ui-datepicker,
.ui-datepicker td,
.ui-datepicker th,
.ui-datepicker-header,
.ui-datepicker-calendar {
    border: none !important;
}
.ui-datepicker td {
    text-align: center;
}
/* 요일 셀 (th) - 가운데 정렬 */
.ui-datepicker-calendar th {
    text-align: center;
    vertical-align: middle;
    height: 3rem;
}
/* 요일 텍스트 span 가운데 정렬 */
.ui-datepicker-calendar th span {
    display: inline-block;
    text-align: center;
}
/* 날짜 셀 (td) */
.ui-datepicker td {
    text-align: center;
    vertical-align: middle;
    height: 3.5rem;
}
/* 날짜 링크 (숫자) - 정 가운데 정렬, 원형 배경 유지 */
.ui-datepicker td a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s;
    margin: 0 auto;
}
/* 오늘 날짜 */
.ui-datepicker-today a {
    background-color: var(--cobalt-blue);
    color: var(--white);
    font-weight: var(--fw-default);
}
/* 선택된 날짜 */
.ui-datepicker .ui-datepicker-current-day a {
    background-color: var(--cobalt-blue);
    color: var(--white) !important;
    border-radius: 1.2rem;
    font-weight: bold;
}
/* minDate 이전 비활성 날짜 스타일 커스터마이즈 */
.ui-datepicker td span,
.ui-datepicker td a {
    text-align: center;
}
.ui-datepicker-unselectable .ui-state-disabled {
    color: var(--c-gray-400) !important;
    background-color: var(--white) !important;
    font-weight: normal;
}
/* 오늘 버튼 */
.ui-datepicker .ui-datepicker-buttonpane {
    border-top: 0;
    margin: 0.5rem 0 0 0;
    padding: 0;
} /* 기존 버튼영역 */
.ui-datepicker .ui-datepicker-buttonpane button {
    height: 3.5rem;
    width: 100%;
    font-size: var(--fs-ms);
    color: var(--primary);
    font-weight: var(--fw-default);
    border-radius: 0.6rem;
    background: var(--blue-50) !important;
    cursor: pointer;
    margin: 0;
}

/* 20250813 이후 */

.rdoBox .rdoIcon {
    width: 2.1rem;
    height: 2.1rem;
}
.layerBox3 {
    max-height: calc(100vh - 4rem);
    max-height: calc(100dvh - 4rem);
}
.popListBox5 {
    max-height: calc(100vh - 9.7rem);
    max-height: calc(100dvh - 9.7rem);
}
.popfixBox {
    max-height: calc(100vh - 9.7rem);
    max-height: calc(100dvh - 9.7rem);
}
.popTermsBox {
    max-height: calc(100vh - 9.7rem);
    max-height: calc(100dvh - 9.7rem);
}

.accordion {display:grid;}
.accordion .accordion-item {overflow:hidden; display:grid; grid-template-rows: auto 0fr; transition:grid-template-rows 0.3s ease;}
.accordion .accordion-item.active {grid-template-rows: auto 1fr;}
.accordion .accordion-item .accordion-header {position: relative; display:flex; align-items: flex-start;}
.accordion .accordion-item .accordion-toggle {position:relative; width:100%; min-height:3.6rem; padding-right:3.6rem; color:var(--c-gray-700); font-size:2rem; font-weight:700; line-height: 2.8rem; text-align:left;}
.accordion .accordion-item .accordion-toggle:after {content:''; position:absolute; top:.5rem; right:0; width:2.6rem; height:2.6rem; background:url(../img/ico_arrow_down_gnb.svg) no-repeat center center;}
.accordion .accordion-item.active .accordion-header .accordion-toggle:after {transform: rotateZ(180deg);}
.accordion .accordion-item .accordion-content {display:none; padding:2rem 0;}
.accordion .accordion-item.active .accordion-content {display: block;}