@charset "UTF-8";

@font-face {
    font-family: 'Paperlogy-8ExtraBold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}




/*font*/

html,body,*{
    font-family:'SUIT';
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    font-size: 14px;
}

textarea{ resize: none; border: none;}
caption{display: none;}
fieldset{border: none;}
a{text-decoration: none; cursor: pointer; color: #333;display: block}
a:hover{cursor: pointer;}

/*all set*/

a.backFont {display: block; font-weight: 300; color: #666; font-size: 14px;text-align: center;margin: 50px 0;}
a.backFont:hover{text-decoration: underline}

.fin-wrap{
    width: 90%; margin: 110px auto;
    max-width: 1200px;
    background-color: #fff;
    border-radius: 10px;
    padding: 2rem 1rem;
}
.fin-indexBtn{
    display: none;
    width: 30%;
    font-size: 1em;
    background-color: #031F5D;
    color: #fff;
    font-weight: 400;
    padding: 15px 10px;
    border-radius: 50px;
    text-align: center;
    margin: 30px 0;
}

/* all layout*/


/*계산기 공통 부분*/

.calc-inner div button:not(.deleteBtn,.addBtn,#addChild,#deleteChild){
    display: none;
}
.calcTable table{
    width: 100%;
    margin: 20px auto;
}
#calcPage{
    margin: 10px 0 100px;
}
#calcPage thead th{
    font-size: 1.2em;
    font-weight: 600;
    border-bottom: 1px solid #707070ff;
    padding: 0 0 10px;
}
#calcPage thead th strong{
    font-size: 1.3em;
    margin-right: 5px;
}

#calcPage table th,#calcPage table td{
    vertical-align: middle;
    text-align: center;
}
#calcPage table input:not(input[id*=childMarried]){
    border: 1px solid #eee;
    background: transparent;
    outline: #666;
    text-align: center;
    margin: 0 10px;
    border-radius: 8px;
    width: 60%;
    font-size: 14px;
    padding: 10px;
}
#calcPage table input:focus{
    outline: 1px solid #666;
    border: 1px solid #666
}

#calcPage table td{
    padding: 10px 0;
    width: 45%;
    height: 60px;
    font-size: 15px;
}

#calcPage table tr:not(.unPadding) td{
    padding: 10px 5px;
}
#calcPage table td.sub{
    font-size: 14px;
    color: #666;
    line-height: 18px;
}
#calcPage table td.sub b{
    color: #444;
    font-weight: 800;
}
#calcPage table td:first-of-type{
    border-right: 1px solid #f3f3f3;
}
#calcPage table .tfoot td,
#calcPage table tfoot td{
    padding: 20px 5px;
    font-weight: 700;
}
#calcPage table .tfoot td,
#calcPage table tfoot td,
.total{
    background: #e1e1e1;
}
td[id*=requiredAmount]{
    overflow-y: auto;
}
.hide-at{
    color: transparent;
}

/*cal fine*/


/* 재무계산기 css*/


/* 적금 계산 시작 ****************/
/*savings Page*/
#savingPage .date{

    display: flex;
    align-items: center;
    gap: 5px;
    text-align: center;
    justify-content: space-evenly;
    margin: 20px 0 30px;
}
#savingPage .date .choice{
    font-size: 14px;
    width:26%;
    background: rgb(210, 223, 255);
    font-weight: 500;
    padding: 10px;
    text-align: center;
    border-radius: 20px;
    position: relative;
    color: #031F5D;
    border: 1px solid #031F5D;
}
#savingPage .date .choice:after{
    content: 'click';
    font-size: 10px;
    font-weight: 300;
    color: #031F5D;
    display: none;

    position: absolute;
    top: 50%; right: 0;
    transform: translateY(-50%);
}

#savingPage .date input[type="radio"] {
    display: none; /* 기본 라디오 버튼 숨기기 */
}

#savingPage .date label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 40px;
    border-radius: 24px;
    border: 1px solid #031F5D;
    font-size: 14px;
    font-weight: 500;
    color: #031F5D;
    cursor: pointer;
    position: relative;
    transition: background 0.3s ease, color 0.3s ease;
}

#savingPage .date input[type="radio"]:checked + label {
    background: #031F5D;
    color: white;
    font-weight: 600;
}

/* 가운데 원 추가 */
#savingPage .date input[type="radio"]:checked + label::before {
    content: "";
    width: 15px;
    height: 15px;
    background: transparent;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*savings Page done*/

/* 적금 계산 끝  ****************/




/* ai 재무설계 start **********/
#finPlanningPage table{
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}
#finPlanningPage table td[colspan="2"] {
    text-align: center;
    width: 100%;
}
#finPlanningPage  td[colspan="2"] * {
    width: 100%;
    display: block;
}
/* ai 재무설계 start */
#finPlanningPage table{
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}
#finPlanningPage table td[colspan="2"] {
    text-align: center;
    border: 1px solid transparent;
    width: 100%;
}
#finPlanningPage  td[colspan="2"] * {
    width: 100%;
    display: block;
}
#finPlanningPage td[colspan="2"] #addChild,
#finPlanningPage td[colspan="2"] input {
    display: block;
    width: 100%;
    box-sizing: border-box;
}
#finPlanningPage #addChild{
    width: 100%; height: 100%;
    background: #eee;
    color: #065F46;
    font-size: 15px;
    border: 1px solid transparent;
    border-radius: 8px;
}
#finPlanningPage #addChild:hover{
    background-color: rgba(6, 95, 70, 0.2); ;
    font-weight: 700;
}

#finPlanningPage #addChild+span{
    font-size: 12px;
    display: block;
    width: 100%;
    color: #666;
    position: absolute;
    text-decoration: underline;
    bottom: -9px;
    left: 50%; transform: translateX(-50%);
}


#finPlanningPage #deleteChild{
    width: 100%; height: 100%;
    background: #ffd9d9;
    color: #5d0303;
    font-size: 15px;
    border: 1px solid transparent;
    border-radius: 8px;
}
#finPlanningPage #deleteChild:hover{
    background-color: rgba(93, 3, 3, 0.2);
    font-weight: 700;
}

#finPlanningPage td[colspan="2"].radioFlex label {
    width: 50%;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#finPlanningPage input[type=radio]{
    display: none !important;
}
#finPlanningPage .custom-radio{
    /*padding: 10px 15px;*/
    margin: 5px 10px;
    background-color: #fff;
    color: #065F46;
    border: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#finPlanningPage input[type=radio]:checked + .checkmark {
    background-color: #065F46;
    color: #fff;
}
#finPlanningPage .custom-radio:hover {
    background-color: #f8f8f8;
}
input[type="radio"]:checked + .checkmark {
    background-color: #065F46; /* 클릭 시 배경색 */
    color: white; /* 텍스트 색 변경 */
}



#finPlanningPage table .marryLabel{
    display: flex;
    align-items: center;
    position: relative;
    justify-content: flex-end;
    cursor: pointer;
}
#finPlanningPage table .marryLabel input{
    display: none;
}

#finPlanningPage input[id*=childM]{
    outline: none !important;
    visibility: hidden;
}
#finPlanningPage input[id*=childAge]{
    width: 100% !important;
}


#finPlanningPage  .marryLabel .checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 5px;
    margin-left: 8px;
    position: relative;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

#finPlanningPage .marryLabel input:checked + .checkmark {
    background-color: #065F46;
    border-color: #065F46;
}

/* 체크박스 내부의 체크 표시 */
#finPlanningPage .marryLabel input:checked + .checkmark:after {
    content: '';
    position: absolute;
    left: 4px;
    top: 0;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

#finPlanningPage .marryLabel span {
    margin-left: 10px;
    font-size: 14px;
    color: #333;
}



td.radioFlex{
    border-right: 1px solid transparent !important;
}

.custom-radio .checkmark {
    display: inline-block;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #065F46;
    border-radius: 50%;
    margin-right: 10px;
    position: relative;
    background-color: #fff;
    vertical-align: middle;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

input[type="radio"]:checked + .checkmark::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px !important;
    height: 10px !important;
    background-color: #fff !important;
    border-radius: 50%;
}

#finPlanningPage td[colspan="3"]{
    border-right: 1px solid transparent !important;
}

#addTableContainer{
    position: relative;
}

#addTableContainer table{
    margin: 50px 0;
}
#addTableContainer table td:first-of-type{
    border-right: 1px solid transparent !important;
}
#addTableContainer table td{
    font-size: 13px !important;
}
#addTableContainer table input {
    width: 100% !important;
    border: 1px solid transparent !important;
    margin: 0 !important;
    padding: 5px;
}
#addTableContainer table tbody:first-of-type tr:first-of-type{
    border-bottom: 1px solid #eee;
}

#finPlanningPage #pdfPrint{
    padding: 20px 10px;
    font-weight: 700;
    border: 1px solid #065F46;
    background: #065F46;
    color: #fff;
    width: 35%;
    border-radius: 8px;
    margin: 10px auto;
}

/*-------------------------------------------------*/


/*맞춤 시작*/


ol.tabArea{
    display: grid;
    width: 90%;
    grid-template-columns: repeat(2,1fr);
    gap: 5px;
    margin: 0 auto ;
    padding-top: 100px;
    border-bottom: 1px solid #eee;
    max-width: 1200px;
}
ol.tabArea li{
    width: 100%;
    padding: 15px 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
ol.tabArea li a{
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    color: #b7b7b7;
}

#finPlanningPage2 .question-box,
#finPlanningPage3 .question-box{
    margin: 50px 0;
}
#finPlanningPage3 .question-box:nth-child(1) span{
    width: 65px;
    text-align: center;
}



#finPlanningPage2 .questChildBtn{
    color: #065F46;
}
#finPlanningPage3 .questChildBtn{
    color: #031f5d;
}
#finPlanningPage2 .questChildBtn,
#finPlanningPage3 .questChildBtn{
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    position: relative;
    text-decoration: underline;
    margin-bottom: 15px;
}
#finPlanningPage2 .questChildBtn:after{
    background-color: rgba(6, 95, 70, 0.1);
}
#finPlanningPage3 .questChildBtn:after{
    background-color: rgba(3, 31, 93, 0.1);
}
#finPlanningPage2 .questChildBtn:after,
#finPlanningPage3 .questChildBtn:after{
    position: absolute;
    bottom: 0;
    left: 50%; right: 0; transform: translateX(-50%);
    height: 8px;
    content: '';
    width: 110px;
    display: block;
}

#finPlanningPage2 div[class*=child] ,
#finPlanningPage3 div[class*=child],#finPlanningPage3 .question-box:nth-child(1) .qBox.marryAge {
    display: none;
}



#finPlanningPage2 .question-box input:not(input[name=totalRetireMoney]),
#finPlanningPage3 .question-box input:not(input[name=totalRetireMoney]){
    border: 1px solid #eee;
    background: transparent;
    outline: #666;
    text-align: center;
    border-radius: 8px;
    font-size: 12px;
    padding: 10px;
}

#finPlanningPage2 .question-box .questTit,
#finPlanningPage3 .question-box .questTit{
    font-size: 14px;
    background-color: rgba(6, 95, 70, 0.2); ;
    border-radius: 8px;
    padding: 10px;
    font-weight: 600;
    display: block;
    margin-bottom: 30px;
    color: #031f5d;
}

#finPlanningPage3 .qBox.myAge select,
#finPlanningPage3 .qBox #wishPartJop{
    padding: 5px;
    border: 1px solid #031f5d;
    color: #031f5d;
    border-radius: 4px;
    width: 50%;
    outline: none !important;
}


#finPlanningPage2 .qBox,
#finPlanningPage3 .qBox{
    text-align: center;
    position: relative;
}
/*합계부분*/
#finPlanningPage2 .total,
#finPlanningPage3 .total {
    padding: 10px;
    border-radius: 8px;
}
#finPlanningPage2 .qBox.total span,
#finPlanningPage3 .qBox.total span{
    font-weight: bold;
}
#finPlanningPage2 .qBox.total input,
#finPlanningPage3 .qBox.total input{
    border: 1px solid transparent !important;
    outline: none;
    text-align: center;
    font-weight: bold;
    color: #031f5d;
    font-size: 16px;
    background-color: transparent;
}
/*합계부분 끝*/
#finPlanningPage2 .qBox span:not(span[class*=educationCost]),
#finPlanningPage3 .qBox span:not(span[class*=educationCost]){
    display: inline-block;
    /*margin-right: 10px;*/
}
#finPlanningPage2 input[name=myName],#finPlanningPage2 input[name=spouseName],#finPlanningPage2 input[name^=child],
#finPlanningPage3 input[name=myName],#finPlanningPage3 input[name=spouseName],#finPlanningPage3 input[name^=child]{
    /*margin-bottom: 8px;*/
}
#finPlanningPage2 .qBox.me,#finPlanningPage2 .qBox.spouse,#finPlanningPage2 .qBox.child1,#finPlanningPage2 .qBox.child2,
#finPlanningPage3 .qBox.me,#finPlanningPage3 .qBox.spouse,#finPlanningPage3 .qBox.child1,#finPlanningPage3 .qBox.family,
#finPlanningPage3 .qBox.myAge,#finPlanningPage3 .qBox.marry,#finPlanningPage3 .qBox.marryAge,
#finPlanningPage3 .qBox.marryAge, #finPlanningPage3 .qBox.wishMarry{
    margin-bottom: 20px;

}



#finPlanningPage2 input[name=myRetireMoney],
#finPlanningPage2 input[name=spouseRetireMoney],
#finPlanningPage3 input[name=myRetireMoney],
#finPlanningPage3 input[name=spouseRetireMoney]{
    width: 45%;
    overflow: auto;
}

#finPlanningPage2 .question-box div[class*=homeInputBox]:not(.loanBox,.actualNeedBox,.purchaseTimeBox),
#finPlanningPage3 .question-box div[class*=homeInputBox]:not(.loanBox,.actualNeedBox,.purchaseTimeBox){
    display: none;
}
#finPlanningPage2 .question-box div[class*=homeInputBox] input,
#finPlanningPage3 .question-box div[class*=homeInputBox] input{
    width: 130px;
}
#finPlanningPage2 .question-box.homeBuy .qBox,
#finPlanningPage2 .question-box.nowHome .qBox,
#finPlanningPage3 .question-box.homeBuy .qBox,
#finPlanningPage3 .question-box.nowHome .qBox{
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}
#finPlanningPage2 .question-box.nowHome .qBox strong,
#finPlanningPage3 .question-box.nowHome .qBox strong{
    width: 100px;
}


/*자녀 교육 수준*/

#finPlanningPage2 li.childEdu .qBox,
#finPlanningPage2 li.childMarry .qBox,
#finPlanningPage3 li.childEdu .qBox,
#finPlanningPage3 li.childMarry .qBox{
    margin-bottom: 20px;
    position: relative;
}
#finPlanningPage2 li.childEdu .qBox>strong,
#finPlanningPage2 li.childMarry .qBox>strong,
#finPlanningPage3 li.childEdu .qBox>strong,
#finPlanningPage3 li.childMarry .qBox>strong{
    display: block;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 15px;
    color: #AD1E5EFF;
}
#finPlanningPage2 li.childEdu .qBox select,
#finPlanningPage2 li.childMarry .qBox select,
#finPlanningPage3 li.childEdu .qBox select,
#finPlanningPage3 li.meMarry .qBox select,
#finPlanningPage3 li.childMarry .qBox select,
#finPlanningPage3 #buildingType,
#finPlanningPage3 #purchaseType,
#finPlanningPage3 #purchase0{
    margin: 0 10px 10px;
    padding: 5px 12px;
    outline: 0 none;
    border-radius: 4px;
}


#finPlanningPage3 li.childEdu .qBox select,
#finPlanningPage3 li.childMarry .qBox select{
    border: 1px solid transparent;
    background-color: rgba(173, 30, 94, 0.2);
    outline: none;
    color: #AD1E5EFF;
}

#finPlanningPage2 li.childEdu .qBox span:not(span[id^=totalCost]),
#finPlanningPage2 li.childMarry .qBox span:not(span[id^=totalMarriageCost]),
#finPlanningPage3 li.childEdu .qBox span:not(span[id^=totalCost]),
#finPlanningPage3 li.childMarry .qBox span:not(span[id^=totalMarriageCost]){
    font-size: 12px;
    color: #666;
}
#finPlanningPage2 li.childEdu .total,
#finPlanningPage2 li.childMarry .total,
#finPlanningPage3 li.childEdu .total,
#finPlanningPage3 li.meMarry .total,
#finPlanningPage3 li.childMarry .total{
    margin-top: 20px;
}




#finPlanningPage2 li.childMarry .qBox label,
#finPlanningPage3 li.childMarry .qBox label{
    font-size: 12px;
}
#finPlanningPage2 .etcMoney .qBox,
#finPlanningPage3 .etcMoney .qBox{
    padding-bottom: 20px;
}
#finPlanningPage2 .etcMoney .qBox strong,
#finPlanningPage3 .etcMoney .qBox strong{
    margin-right: 5px;
}
#finPlanningPage2 .etcMoney .qBox:not(:last-of-type),
#finPlanningPage3 .etcMoney .qBox:not(:last-of-type){
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

#finPlanningPage2 .etcMoney input,
#finPlanningPage3 .etcMoney input{
    margin-bottom: 10px;
    width: 40%;
}





#finPlanningPage2 .etcMoney .deleteBtn,
#finPlanningPage3 .etcMoney .deleteBtn{
    border: 1px solid #b40707;
    background-color: #fff;
    color: #b40707;
    padding: 10px;
    font-size: 12px;
    border-radius: 4px;
    margin-left: 5px;
}
#finPlanningPage2 .etcMoney .deleteBtn:hover,
#finPlanningPage3 .etcMoney .deleteBtn:hover{
    background-color: #b40707;
    color: #fff;
}
#finPlanningPage2 .etcMoney .addBtn,
#finPlanningPage3 .etcMoney .addBtn{
    padding: 10px;
    width: 100%;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    color: #065F46;
    background-color: rgba(6, 95, 70, 0.1);
    border: 1px solid #065F46;
    max-height: 40px;
}

#finPlanningPage2 .calcPage,
#finPlanningPage3 .calcPage{
    overflow-x: auto;
}
#finPlanningPage2 .calcPage table,
#finPlanningPage3 .calcPage table{
    width: 190%;
    table-layout: fixed;
    border-collapse: collapse;
}
#finPlanningPage2 .calcPage table thead th,
#finPlanningPage3 .calcPage table thead th{
    font-size: 11px;
    padding: 10px 5px;
    text-align: center;
    border-bottom: 1px solid #333;
}
#finPlanningPage2 .calcPage table th.fund,
#finPlanningPage3 .calcPage table th.fund{
    width: 100px !important;
    padding: 20px;
}
#finPlanningPage2 .calcPage table tbody td:first-of-type,
#finPlanningPage3 .calcPage table tbody td:first-of-type{
    padding: 5px;
    font-size: 11px;
    border-right: 1px solid #333;
}
#finPlanningPage2 .calcPage table td,
#finPlanningPage3 .calcPage table td{
    text-align: center;
    border: 1px solid #eee;
    font-size: 12px;
}
#finPlanningPage2 .calcPage table td input,
#finPlanningPage3 .calcPage table td input{
    border: 1px solid transparent !important;
    overflow: auto;
    font-size: 11px;
    width: 100%;
    text-align: center;
}



#finPlanningPage2 #pdfPrint,
#finPlanningPage3 #pdfPrint{
    width: 40%;
    margin: 50px auto;
    height: 40px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid transparent;
    background-color: #031f5d;
    color: #fff;
}




#finPlanningPage3 .question-box .questTit{
    position: relative;
}
#finPlanningPage3 .question-box .questTit:before{
    position: absolute;
    display: block;
    content: '';
    width: 30px; height: 30px;
    background-position: center;
    background-size: 100%;
}
#finPlanningPage3 .question-box .questTit:after{
    position: absolute;
    display: block;
    content: '';
    width: 30px; height: 30px;
    background-position: center;
    background-size: 100%;
}
#finPlanningPage3 .question-box .questTit.first:before{
    background-image: url("../img/fin-emoji1.png");
    top: -20px;
    left: 30px;
}
#finPlanningPage3 .question-box .questTit.first:after{
    background-image: url("../img/fin-emoji2.png");
    top: -35px;
    width: 45px; height: 45px;
    left: 150px;
}
#finPlanningPage3 .question-box .questTit.myself:before{
    background-image: url("../img/fin-emoji3.png");
    top: -25px;
    left: 25px;
}
#finPlanningPage3 .question-box .questTit.myself:before{
    background-image: url("../img/fin-emoji3.png");
    top: -25px;
    left: 25px;
}
#finPlanningPage3 .question-box .questTit.oldMoney:before{
    background-image: url("../img/fin-emoji4.png");
    top: -25px;
    left: 25px;
}
#finPlanningPage3 .question-box .questTit.together:before{
    background-image: url("../img/fin-emoji5.png");
    top: -20px;
    left: 25px;
}
#finPlanningPage3 .question-box .questTit.dreamM:before{
    background-image: url("../img/fin-emoji6.png");
    top: -20px;
    left: 97px;
}
#finPlanningPage3 .question-box .questTit.bucket:before{
    background-image: url("../img/fin-emoji7.png");
    top: -20px;
    left: 25px;
}


#finPlanningPage3 .question-box.introMyself2 p.comment,
#finPlanningPage3 .question-box.introPart2 p.comment{
    text-align: center;
    color: #031f5d;
    margin: 0 auto 20px;
}
#finPlanningPage3 .lastComm{
    border-radius: 8px;
    background-color: #eee;
    padding: 15px 10px;
}
#finPlanningPage3 .lastComm p{
    font-weight: 800;
}

#finPlanningPage3 .introPart2 b{
    width: 100%;
    display: block;
    padding: 10px;
    color: #031f5d;
    background-color: rgba(3, 31, 93, 0.1);
    border-radius: 8px;
}

#finPlanningPage3 .qBox.marry label{

    align-items: center;
    cursor: pointer;
    font-size: 16px;
    width: 85px !important;
    color: #333;
    padding: 5px 10px;
    border: 2px solid transparent;
    border-radius: 5px;
    transition: all 0.3s ease;
}
#finPlanningPage3 .qBox.marry label:hover{
    color: #031f5d;
}



#finPlanningPage3 span.family,
#finPlanningPage3 span.RUMarry{
    position: relative;
    z-index: 10;
}
/*ai 재무설계 끝-----------*/


/* 재무설계 (일반) 시작  **********************/
#finPlanningResult{padding-top: 30px}
#finPlanningResult #calcPage .point,#finPlanning2Result #calcPage .point{font-weight: 700; color: #031f5d; font-size: 1rem;}
#finPlanningResult #calcPage .top,
#finPlanning2Result #calcPage .top{
    margin-bottom: 20px;
    font-size: 1rem;
    width: 100%;
    border-radius: 10px 10px 0 0;
    background-color: #fff;
    padding: 1rem;
}
#finPlanningResult #calcPage .bottom,
#finPlanning2Result #calcPage .bottom{
    border-radius: 0 0 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#finPlanningResult #calcPage .bottom .contentBox,
#finPlanning2Result #calcPage .bottom .contentBox,
#finPlanning2Result #calcPage .bottom .box{
    background-color: #fff;
    padding: 1rem;
}

#finPlanningResult #calcPage .bottom .contentBox:last-child,
#finPlanning2Result #calcPage .bottom .contentBox:last-child{
    border-radius: 0 0 10px 10px !important;
}

#finPlanningResult #calcPage .bottom .contentBox strong,
#finPlanning2Result #calcPage .bottom .contentBox strong{
    position: relative;
    font-size: .9rem;
    padding-left: 25px;
    display: block;
    margin-bottom: 10px;
}
#finPlanningResult #calcPage .bottom .contentBox strong:before{
    content: '';
    background-image: url(../../../images/icon/ico-calendar666.png);
    background-size: 100%; background-repeat: no-repeat; background-position: center;
    width: 18px; height: 18px;
    position: absolute; top: 50%; left: 0; transform: translateY(-50%);
}
#finPlanningResult #calcPage .bottom .contentBox p,
#finPlanning2Result #calcPage .bottom .contentBox p,
#finPlanning2Result #calcPage .bottom .box p{
    font-size: .9rem;
    line-height: 1.4rem;
}
#finPlanningResult+div.btnBox,
#finPlanning2Result+div.btnBox{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
    padding-bottom: 15vh;
}
#finPlanningResult+div.btnBox button,
#finPlanning2Result+div.btnBox button{
    width: 30%;
}
/* 재무설계 (일반) 끝   ---------*/
/* 재무설계 (맞춤) 시작 ----------*/
#finPlanning2Result em{
    font-style: normal;
    font-size: .8rem;
    color: #666;
    display: block;
    text-align: center;
}
#finPlanning2Result .bottom .contentBox strong:before{
    content: '';
    background-image: url(../../../images/icon/ico-goal.png);
    background-size: 100%; background-repeat: no-repeat; background-position: center;
    width: 22px; height: 22px;
    position: absolute; top: 50%; left: 0; transform: translateY(-50%);
}
#finPlanning2Result span.small{
    font-size: .6rem;
    font-weight: 300;
    color: #666;
}
#finPlanning2Result .total{
    border-radius: 10px;
    border: 1px solid #031f5d;
}

/* 재무설계  끝   **********************/





/* 평균 계산기 프린트 시작***********************/
.life-pic{
    width: 100%;
    margin-bottom: 60px;
}
.life-pic .picLife-inner{
    align-items: flex-end;
}
.life-pic .picLife-inner,
.life-pic ul{
    display: flex;
}
.life-pic .imgWrap{
    width: 2.5cm;
    height: 4cm;
    transform: translateX(-16px);
}
.life-pic .imgWrap img{
    width: 100%; height: 100%;
}
.life-pic ul{
    position: relative;
    width: 100%;
    padding-bottom: 20px;
    justify-content: space-between;
    height: 6cm;
    /*height: 12cm;*/
}
.life-pic ul:after{
    content: '';
    background-color: #031f5d;
    height: 5px;
    border-radius: 20px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
}

.life-pic ul li{
    display: flex;
    align-items: flex-end;
    position: relative;
}
.life-pic ul li:after{
    content: '';
    position: absolute;
    bottom: -26px;
    left: 50%; transform: translateX(-50%);
    height: 17px; width: 5px;
    border-radius: 20px;
    background-color: #031f5d;
}
.life-pic .content{
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.life-pic .content span{
    position: relative;
    font-size: 11pt;
    font-weight: bold;
    color: #dd9b00;
    text-align: center;
    display: inline-block;
}
.life-pic .content span:before{
    position: absolute;
    display: block;
    content: '';
    top: -35px;
    left: 50%; transform: translateX(-50%);
    background-image: url("../../../images/ico-coinImg.png");
    background-size: 30px;
    width: 30px; height: 30px;
    background-position: center;
}
.life-pic .content .use{
    text-align: center;
    font-family: 'Paperlogy-8ExtraBold' !important;
    font-size: 10pt;
    color: #031f5d;
    display: block;
    margin-top: 10px;
}

.life-pic .content strong{
    font-family: 'Paperlogy-8ExtraBold'!important;
    text-align: center;
    position: absolute;
    display: block;
    bottom: -43px;
    width: 36px;
    font-size: 8pt;
    left: 50%; transform: translateX(-50%);
}
/* 재무설계 끝 ***********************************/
#calcPage2 ul.companyCalcTap{
    display: flex; justify-content: space-between; margin-bottom: 100px;
}
#calcPage2 ul.companyCalcTap li{
    cursor: pointer; width: 50%;
    border-bottom: 3px solid #ddd; padding-bottom: 5px; transition: .3s ease-in-out;
}
#calcPage2 ul.companyCalcTap li:hover{
    border-bottom-color: rgba(3, 31, 93, 0.2);
}
#calcPage2 ul.companyCalcTap li:hover a{
    color: rgba(3, 31, 93, 0.7);
}
#calcPage2 ul.companyCalcTap li a{
    font-size: 1.1rem; font-weight: 600; color: #999; display: block; text-align: center; transition: .3s ease-in-out;
}
#calcPage2 ul.companyCalcTap li.on{
    border-bottom-color: #031f5d!important;
}
#calcPage2 ul.companyCalcTap li.on a{
    color: #031f5d!important;
}

#calcPage2.bank table{
    border-bottom: 1px solid #666;
}
#calcPage2.bank table th,
#calcPage2.bank table td{
    padding: 10px; font-size: 1rem; vertical-align: middle;
}
#calcPage2.bank table thead{border-bottom: 1px solid #666;}
#calcPage2.bank table thead strong{font-size: 2rem; font-weight: 800; display: block; text-align: center; margin-bottom: 10px;}

#calcPage2.bank table td.th{
    font-weight: 700; border-right: 1px solid #eee;
}
#calcPage2.bank table td input{
    width: 80%; display: inline-block; padding: 1rem; border: 1px solid #eee; border-radius: 5px;
}
#calcPage2.bank table td.total{
    color: #059669; font-weight: 800; background-color: transparent; font-size: 1.3rem;
}
#calcPage2.bank table td.total2{
    color: #031f5d; font-weight: 800; background-color: transparent;
}
#calcPage2.bank tbody tr:first-of-type td{
    padding-top: 2rem;
}
#calcPage2.bank tfoot td{
    padding: 1.2rem 10px; overflow-x: auto; max-width: 312px;
}
#calcPage2.bank tbody tr:last-of-type td{
    padding-bottom: 2rem;
}
#calcPage2.bank tfoot tr:first-of-type td{
    border-top: 2px solid #ddd;
    padding-top: 2rem;
}

/* 단리, 복리 계산기 ======================================================*/

#calcPage2.companyFinCalc table tr.point td{
    border-bottom: 1px solid rgba(3, 31, 93, 0.5); background-color: rgba(3, 31, 93, 0.1);
    border-top: 1px solid rgba(3, 31, 93, 0.5);
}
#calcPage2.companyFinCalc table td.borderL,
#calcPage2.shortDollar table td.pin{
    color: #0089f7; text-align: center; font-weight: 700;
}
#calcPage2.companyFinCalc table td.total{
    text-align: center;
}
#calcPage2.companyFinCalc tbody tr:last-of-type td{padding-bottom: 10px;}

#calcPage2.companyFinCalc table tbody .styleAdd{
    border-radius: 30px; background-color: rgba(3, 31, 93, 0.1); color: #031f5d; font-weight: 600;margin-bottom: 20px;
}
#calcPage2.companyFinCalc table tfoot td.th{
    border-right: unset; text-align: center;
}
#calcPage2.companyFinCalc table tr:has(+ .point) td{
}
#calcPage2.companyFinCalc tfoot td.th2{
    font-weight: 700;
}
/* 달러 계산기 ======================================================*/
#calcPage2.shortDollar{
    overflow-x: auto;
}
#calcPage2.shortDollar table td{ vertical-align: middle}
#calcPage2.shortDollar table tr.borderB td{
    padding-bottom: 2rem; border-bottom: 1px solid rgba(3, 31, 93, 0.3);
    border-top: unset!important;
}

#calcPage2.shortDollar table tr.tableStyle{
    border-top: 1px solid #666;
}
#calcPage2.shortDollar table tbody:nth-last-of-type(2) tr:not(:first-of-type) td,
#calcPage2.shortDollar table tbody:last-of-type tr:not(:first-of-type) td{
    border: 1px solid #f1f1f1;
}
#calcPage2.shortDollar table tbody td.th2{
    font-weight: 700;
    background-color: rgba(3, 31, 93, 0.1);
    text-align: center;
}
#calcPage2.shortDollar table td.pin input{
    color: #0089f7; font-weight: 600;
}
#calcPage2.shortDollar table tr td.total:first-of-type{
    text-align: center;
}









@media all and (max-width: 768px) {
    /*재무설계 평균-------------------------------------*/
    #calcPage table td.sub b{
        font-size: 12px;
    }
    #calcPage table td.sub{
        font-size: 12px;
    }

    /*재무설계 평균 끝 ----------------------------------*/
    ol.tabArea{
        padding-top: 20px;
    }
    .fin-wrap{
        padding: .5rem 1rem;
    }
    #calcPage{
        margin: 0;
    }

    #calcPage table td,
    #finPlanningPage2 .etcMoney .qBox strong,
    #finPlanningPage2 .question-box.nowHome .qBox strong, #finPlanningPage3 .question-box.nowHome .qBox strong,
    #finPlanningPage2 .qBox span:not(span[class*=educationCost]), #finPlanningPage3 .qBox span:not(span[class*=educationCost]){
        font-size: 14px;
    }
    #finPlanningPage2 .etcMoney .qBox strong {;
        margin: 0;
    }
    .etcMoney .qBox span, .etcMoney .qBox strong{ margin-left: 0 !important;}

/* 재무설계 프린트 부분 ---------------------------------*/
    .life-pic{
        position: relative;
        height: 270px;
        overflow-x: auto;
    }
    .life-pic .picLife-inner{
        width: 300%;
    }
    .life-pic .imgWrap{
        width: 8%;
        height: auto;
        transform: unset;
    }

    .life-pic ul{
        width: 98%;
        height: 180px;
    }

    .fin-wrap .line{
        position: absolute;
        bottom: 20px; left: 10px;
        width: 50%; height: 10px;
    }
    .fin-wrap .line:before{
        content: '좌우로 스크롤해서 확인하세요!';
        display: block;
        font-size: 10px;
        font-weight: 300;
        color: #666;
        position: absolute;
        bottom: 0;
        left: 0;
        opacity: 1;
        animation: shadow 2s ease-in-out infinite;
    }
    @keyframes shadow {
        0%{ opacity: 1; }
        50%{ opacity: 0; }
        100%{ opacity: 1; }
    }

/*    은행 적금 계산기  시작 =================================================*/
    #calcPage2 ul.companyCalcTap{
        margin-top: 50px;
    }
    #calcPage2 ul.companyCalcTap li a,
    #calcPage2.bank table td,
    #calcPage2.bank table th{ font-size: .95rem; line-height: 1.5}

}