/* 청구서 생성 */

.billCrBox {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 30px;
}

.billCrBox > .billCrItem {
    position: relative;
    padding-bottom: 40px;
    flex-grow: 1;
    flex-shrink: 0;
    width: calc(100% / 3 - 52px);
    box-sizing: border-box;
}

.billCrItem > .topItem {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.billCrItem > .topItem h4.tit {
    font-size: 24px;
    font-weight: bold;
    word-break: keep-all;
    word-wrap: break-word;
}

.billCrItem > .topItem > span.infoTxt {
    flex-shrink: 0;
    color: var(--Greyscale7);
    font-size: 14px;
    font-weight: 400;
}

.billCrItem > .bodyItem {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.billCrItem > .bodyItem .inputBox {
    position: relative;
    width: 100%;
}

.billCrItem > .bodyItem .inputBox > span {
    position: absolute;
    left: 0;
    bottom: -17px;
}

.billCrItem > .bodyItem .flexBox {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.billCrItem > .bodyItem .flexBox .inputField {
    width: 100%;
}

.billCrItem > label.chkBox {
    position: absolute;
    bottom: 20px;
}

.billCrItem > .bodyItem.flexBox {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
}

.billCrItem > .bodyItem.flexBox .chkItemBox {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.billCrItem > .bodyItem.flexBox .chkItemBox > b.tit {
    color: #000;
    font-size: 18px;
    font-weight: bold;
}

.billCrItem > .bodyItem.flexBox .chkItemBox .chkItem {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.billCrItem > .bodyItem.flexBox .chkItemBox > .inputField {
    width: 100%;
}

.billCrItem .bodyItem > .btnBox {
    margin-top: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.billCrItem .bodyItem > .btnBox a {
    flex-grow: 1;
    width: calc(100% / 2 - 10px);
    box-sizing: border-box;
}

.billCrItem .bodyItem > .titBox p.titTxt {
    color: var(--Greyscale7);
    font-size: 16px;
    font-weight: bold;
}

.billCrItem .bodyItem > .previewBox {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}

.billCrItem .bodyItem > .previewBox .prewviewItem {
    width: calc(100% / 8 -  12.5px);
    border: 1px solid var(--Greyscale4);
}

.billCrItem .bodyItem > .previewBox .prewviewItem img {
    width: 100%;
    height: 100%;
}

.billCrItem .bodyItem > .previewBox > .conNone {
    width: 100%;
    color: var(--Greyscale5);
    font-size: 15px;
    text-align: center;
}

.slcFooter {
    padding: 16px 20px 0;
}

.slcFooter .topItem {
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.slcFooter .topItem p.tit {
    color: var(--Greyscale9);
    font-size: 16px;
    font-weight: 500;
}

.slcFooter .topItem p.count {
    color: var(--Primary1);
    font-size: 16px;
    font-weight: 500;
}

.slcFooter .topItem span.subTit {
    color: var(--Greyscale6);
    font-size: 14px;
    font-weight: 400;
}

.slcFooter .chipBox {
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 11px;
    flex-wrap: wrap;
}

.slcFooter .chipBox .chip {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 2px 10px 2px 16px;
    background: var(--Primary1);
    border-radius: 16px;
}

.slcFooter .chipBox .chip p.name {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.pointInfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.pointInfo > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 300px;
}

.pointInfo > div p.tit {
    width: 120px;
    color: var(--Greyscale6);
    font-size: 18px;
    font-weight: 400;
    text-align: left;
}

.pointInfo > div p.con {
    font-size: 24px;
    font-weight: bold;
    text-align: right;
}

.pointInfo > div .con.deducation {
    color: #FF4B4B;
}

.pointInfo > div p.leftOver {
    color: var(--Primary1);
}

.btnBox {
    margin-top: 30px;
}

/* 불러오기 모달팝업 */
.popupInner.call .popupCon {
    margin-top: 16px;
    max-height: 361px;
    overflow-y: auto;
}

.popupInner.call .popupCon > ul.conBox {
    padding-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.popupInner.call .popupCon > ul.conBox > li {
    padding: 8px 10px;
    border: 1px solid var(--Greyscale4);
    border-radius: 8px;
}

.popupInner.call .popupCon > ul.conBox > li a {
    display: block;
}

.popupInner.call .popupCon > ul.conBox > li ul li {
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.popupInner.call .popupCon > ul.conBox > li ul li:last-child {
    margin-bottom: 0;
}

.popupInner.call .popupCon > ul.conBox > li ul li p.titTxt {
    color: var(--Greyscale7);
    font-size: 13px;
    font-weight: 400;
}

.popupInner.call .popupCon > ul.conBox > li ul li p.conTxt {
    color: var(--Greyscale9);
    font-size: 15px;
    font-weight: 500;
}

@media (max-width: 1199px) {
    .billCrBox {
       flex-direction: column;
    }

    .billCrBox > .billCrItem {
        margin-top: 0;
        padding-bottom: 30px;
        width: 100%;
    }

    .billCrItem > label.chkBox {
        position: unset;
        margin-top: 20px;
    }

    .billCrItem .bodyItem > .previewBox .prewviewItem {
        width: calc(100% / 5 -  12px);
    }
}

@media (max-width: 960px) {
    .billCrItem .bodyItem > .previewBox .prewviewItem {
        width: calc(100% / 4 -  11px);
    }
}

@media (max-width: 768px) {
    .billCrItem > .topItem h4.tit {
        font-size: 18px;
    }

    .inputBox > label.titTxt,
    .billCrItem > label.chkBox span {
        font-size: 15px;
    }

    .billCrItem > .bodyItem.flexBox {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .billCrItem > .bodyItem.flexBox .chkItemBox {
        width: 100%;
    }

    .billCrItem > .bodyItem.flexBox .chkItemBox > b.tit {
        font-size: 16px;
    }

    .billCrItem > .bodyItem.flexBox .chkItemBox > .chkBox > span {
        font-size: 15px;
    }

    .billCrItem .bodyItem > .btnBox a {
        font-size: 15px;
        border-radius: 8px;
    }

    .billCrItem .bodyItem > .titBox p.titTxt {
        font-size: 15px;
    }

    .billCrItem .bodyItem > .previewBox .prewviewItem {
        width: calc(100% / 3 -  10px);
    }

    .pointInfo > div p.tit {
        font-size: 15px;
    }

    .pointInfo > div p.con {
        font-size: 18px;
    }

    .btnBox a {
        font-size: 15px;
        border-radius: 8px;
    }
}

@media (max-width: 640px) {
    .pointInfo > div {
        width: 100%;
    }

    .billCrItem .bodyItem > .previewBox .prewviewItem {
        width: calc(100% / 2 -  8px);
    }
}

@media (max-width: 460px) {
    .billCrItem .bodyItem > .btnBox {
        flex-direction: column;
    }

    .billCrItem .bodyItem > .btnBox a {
        width: 100%;
    }
}



/* 피보험자 정보 입력 */

.billCrBox.full {
    display: unset;
}

.billCrBox.full > .billCrItem {
    width: 100% !important;
}

.billCrItem > .topItem > h4.tit > span {
    color: var(--Primary1);
}

@media (max-width: 1199px) {
    .billCrBox.full > .billCrItem:nth-child(2) {
        margin-top: 30px;
    }
}

.tabsBox {
    margin-top: 20px;
    padding: 2px;
    display: flex;
    position: relative;
    width: fit-content;
    background: var(--Greyscale1);
    border: 1px solid var(--Greyscale2);
    border-radius: 50px;
}

.tabsBox input[type="radio"] {
    display: none;
}

.tabsBox .tabs {
    padding: 7px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    color: var(--Greyscale5);
    font-size: 14px;
    font-weight: 500;
    transition: color ease-in;
}

.tabsBox input[type="radio"] + label,
.tabsBox input[type="radio"]:checked + label {
    box-sizing: border-box;
}

.tabsBox input[type="radio"]:checked + label {
    color: var(--Greyscale9);
    font-weight: 600;
    background: #fff;
    border-radius: 50px;
}

.tabsBox input[id="user01"]:checked ~ .glider {
    transform: translateX(0);
}

.tabsBox input[id="user02"]:checked ~ .glider {
    transform: translateX(100%);
}

@media (max-width: 460px) {
    .tabsBox {
        width: 100%;
    }

    .tabsBox .tabs {
        min-width: 50%;
    }
}


/* 이용약관 모달 */

.tmsMdoal > .popupCon {
    padding: 16px;
    max-height: 300px;
    border: 1px solid var(--Greyscale5);
    overflow-y: auto;
}

.tmsMdoal > .popupCon > div {
    margin-top: 18px;
}

.tmsMdoal > .popupCon > div:first-child {
    margin-top: 0;
}

.tmsMdoal > .popupCon > div p.tit {
    font-size: 16px;
    font-weight: 600;
}

.tmsMdoal > .popupCon > div > .conTxt {
    margin-top: 8px;
}

.popupWrap .popupInner.tms01,
.popupWrap .popupInner.tms02 {
  display: none;
}

.popupWrap .popupInner.tms01.on,
.popupWrap .popupInner.tms02.on {
  display: block;
}



/* 수익자 정보 입력 */

.btnBox.flexBox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.btnBox.flexBox > a {
    flex-grow: 1;
    box-sizing: border-box;
}

.termsBox {
    padding: 17px 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.termsBox > a {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    color: var(--Greyscale8);
    font-size: 15px;
    font-weight: 400;
}

@media (max-width: 460px) {
    .btnBox.flexBox {
        flex-direction: column-reverse;
        gap: 8px;
    }

    .btnBox.flexBox > a {
        width: 100%;
    }
}