@charset "UTF-8";

:root {
    --primary: #065F46;        /* 메인 프라이머리 */
    --primary-light: rgba(47, 164, 127, 0.7);  /* 호버, 라이트 버전 */
    --primary-dark: #064E3B;   /* 진한 버전 */
}

html,body{
    width: 100%; height: 100%;
    /* font-family: 'NEXON Lv2 Gothic'; */
    font-family: 'SUIT';
    color: #333;
}
*{
    box-sizing: border-box;
}
.only-mo{display: none;}

/* !!! */

.bold{
    font-weight: 800;
    color: #386850;
}
input{
    outline: none;
}



#myHome,
.myPageWrap,
.loginArea,
#cunsultPage,
#finPlanningPage3.fin-wrap,
#ma-home{
    padding: 70px 0;
    min-height: calc(100vh - 320px);
}
.joinArea,
#findAccount{
    padding-top: 30px;
}

#touch-icon{display: none;}

/*스크롤 scroll top
#scrollTop{
    width: 50px; height: 50px;
    position: fixed;
    right: 10%;
    bottom: 10%;
    border-radius: 50%;
    color: #666;
    font-size: 20px;
    font-weight: 800;
    background-color: #fff;
    border: 1px solid #b7b7b7;
    transition: opacity .3s ease-in-out;
    opacity: 0;
}
#scrollTop.show{
    opacity: 1;
}
scroll top 끝*/


span.card{
    font-size: 0.65rem!important;
    width: 115px;
    padding: 5px 8px;
    color: #134E4A;
    border-radius: 5px;
    background-color: rgba(3, 31, 93, 0.1);
    font-weight: 600;
    display: flex!important;
    justify-content: center;
    align-items: center;
    gap: 5px;
    line-height: 12px;
}
span.card img{
    width: 12px; height: 12px;
}

span.back{
    text-align: center;
    display: block;
    color: #666;
    cursor: pointer;
}

span.back:hover{
    text-decoration: underline;
}

.totalCountTag{
    font-weight: 500;
    color: #666;
    display: inline-block;
    margin-bottom: 30px;
}

.totalCountTag b{
    color: #065F46;
    font-weight: 800;
}


/*  팝업 모음 ******* */
#linkShare{
    width: 100%;
}
#linkShare .link-inner{
    width: 80%;
    margin: 20px auto;
}
#linkShare h2{
    font-size: 16px;
    text-align: center;
    color: #065F46;
    font-weight: 600;
    padding-bottom: 20px;
    border-bottom: 2px solid #065F46;
    margin-bottom: 20px;
}
#linkShare form{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 50px;
}
#linkShare .box{
    text-align: center;
    width: 80%;
    margin: 0 auto;
}
#linkShare span{
    display: inline-block;
    width: 30%;
}
#linkShare input,
#linkShare select,
#suggestContent .list-box select{
    width: 50%;
    transition: all .3s ease-in-out;
}
#linkShare input{
    border: 1px solid transparent;
    border-bottom: 1px solid #065F46;
    font-size: 14px;
    padding: 1rem;
}
#linkShare select,
#suggestContent .list-box select{
    padding: 1rem;
    outline: none !important;
    border: 1px solid transparent;
    border-radius: 10px;
    background-color: rgba(5, 150, 105, 0.2); ;
    font-size: 14px;
}
#linkShare input:invalid,
#linkShare select:invalid,
#suggestContent .list-box select:invalid{
    background-color: #f1f1f1;
    border-radius: 10px;
    border-bottom: 1px solid transparent;
}
#linkShare .btnBox{
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

/*----------------*/
#callPopupBg,
#callPopup{
    display: none;
}
#callPopupBg{
    background-color: rgba(1,1,1,.5);
    position: fixed;
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: 300;
    width: 100%; height: 100vh;
}
#callPopup{
    z-index: 400;
    position: fixed;
    width: 20%;
    border-radius: 10px;
    background-color: #fff;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
#callPopup .popup-inner{
    padding: 1rem;
}
#callPopup strong{
    font-size: 18px;
    font-weight: 800;
    display: block;
    margin-bottom: 20px;
}
#callPopup p{
    font-size: 16px;
    color: #949494;
}
#callPopup #closeBtn{
    background-color: #f1f4f6;
    width: 100%;
    border-radius: 0 0 10px 10px;
    border: 1px solid transparent;
    padding: 1rem 0;
    color: #666;
    font-size: 16px;
}

#consultContentPopup{
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    width: 85%; background-color: #fff;
    z-index: 501;
    border-radius: 10px;
    transform: translate(-50%, -50%);
}
#consultContentPopup .popup-inner,
#consultContentPopup .consultDelBox{
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#consultContentPopup h3,
#consultContentPopup .consultDelBox h4{
    font-size: 1.2rem;
    text-align: center;
    margin: 50px auto 20px;
}
#consultContentPopup textarea{
    min-height: 100px;
    max-height: 200px;
    height: auto;
    overflow-y: auto;
}
#consultContentPopup textarea#sangDamText+input{
    border: 1px solid transparent;
    border-bottom: 1px solid #eee!important;
    text-align: center;
    padding: 1rem .2rem;
    font-size: 18px;
    font-weight: 600;
    overflow-x: auto;
    width: auto;
    background-color: transparent;
    max-width: 120px;
    color: #065F46;
}
#consultContentPopup textarea,
#consultContentPopup #sangDamCancel{
    padding: 15px;
    width: 100%; height: 100%;
    font-size: .9rem;
    color: #333;
    border: 1px solid transparent;
    border-radius: 10px;
    background-color: rgba(0,23,51,0.02);
}
#consultContentPopup .btnWrap,
#consultContentPopup .consultDelBox .btnWrap{
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}
#consultContentPopup .consultDelBox{
    display: none;
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%,-50%);
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 2rem;
    width: 100%;
    margin: 20px auto;
    flex-direction: column;
    gap: 20px;
}
#consultContentPopup .consultDelBox button{
    width: 110px;
}

#consultContentPopup .consultDelBox button.close{
    border: 1px solid #666;
    color: #666;
    background-color: #fff;
}
#consultContentPopup .consultDelBox button.close:hover{
    background-color: #b7b7b7;
}

.popupBg{
    display: none;
    position: fixed;
    width: 100%; height: 100%;
    background-color: rgba(1,1,1,.4);
    z-index: 500;
    top: 0; left: 0; bottom: 0; right: 0;
}
.personal-popup,
.personal-popup2,
.personal-popup3{
    overflow: auto;
    display: none;
    width: 80%;
    height: 80vh;
    position: fixed;
    background-color: #fff;
    border-radius: 10px;
    top: 100px; left: 50%; transform: translateX(-50%);
    z-index: 600;
}
.personal-popup .btn-close,
.personal-popup2 .btn-close,
.personal-popup3 .btn-close,
#consultPopup #popCloseBtn,
#payPopup #popupClose,
#consultContentPopup #popupCloseBtn,
#finPopup #closeBtn,
.simulationUserListPopup .close,
#linkCopyPopup .popupClose,
.baseLinePopup .popupClose,
.counselChk-overlay .popupClose{
    width: 100%;
    border-radius: 10px 10px 0 0;
    background-color: #eee;
    color: #666;
    border: 1px solid transparent;
    height: 50px;
}
.personal-popup p,
.personal-popup2 p,
.personal-popup3 p{
    height: 100%;
    max-height: 850px;
    padding: 3rem;
    font-size: 14px;
    line-height: 28px;
}
.personal-popup p strong,
.personal-popup2 p strong,
.personal-popup3 p strong{
    color: #065F46;
    font-weight: 800;
}

.personal-popup p span,
.personal-popup2 p span,
.personal-popup3 p span{
    font-weight: 800;
    margin-top: 30px;
    display: block;
}


#consultPopup{
    display: none;
    width: 85%;
    background-color: #fff;
    border-radius: 10px;
    position: absolute;
    top: 6%; left: 50%; transform: translateX(-50%);
    z-index: 999;
}


#consultPopup h2#title{
    text-align: center!important;
}


/* 시뮬레이션 팝업 시작 000000000000000000000000000000000000000000000*/
.simulationUserListPopup{
    display: none;
    z-index: 1000;
    position: fixed; top: 50%; left: 50%; width: 60%; min-width: 320px; background-color: #fff; transform: translate(-50%, -50%);
    border-radius: 15px;
}
.simulationUserListPopup .popup-inner{ padding: 1.2rem}
.simulationUserListPopup h3{
    font-size: 1.5rem;
    margin: 30px auto;
    text-align: center;
    color: #059669;
}

/* 결제페이지 - 쿠폰 팝업 시작 000000000000000000000000000000000000000000000*/
#couponPopup{
    display: none;
}
#couponPopup,
#couponPopup .overlay-bg {
    position: fixed;
    z-index: 100;
    width: 100%; height: 100vh;
    top: 0; left: 0;
}
#couponPopup .overlay-bg {
    background-color: rgba(1,1,1,.2);
}
#couponPopup .popup-inner {

    padding: 15px;
    border-radius: 10px;
    background-color: #fff;
    z-index: 200;
    width: 90%;
    max-width: 500px;
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
#couponPopup .overflowWrap{
    overflow-y: auto;
    max-height: 50vh;
    padding: 20px 10px;
    min-height: 300px;
    height: 100%;
    margin-bottom: 20px;
    background-color: #f1f4f6;
}

#couponPopup h4 {
    font-size: 1.6rem;
    display: flex;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    justify-content: space-between;
    align-items: flex-start;
}
#couponPopup h4 span.point {
    color: var(--primary);
    font-weight: 800;
}
#couponPopup h4 span{
    line-height: 1.5;
}

#couponPopup ul{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

#couponPopup li{
    background-color: #fff;
    padding: 15px 10px;
    border-radius: 5px;
    display: flex;
    gap: 15px;
}

#couponPopup li .contWrap{
    width: 100%;
}

#couponPopup li .area{
    text-align: right;
    font-size: .95rem;
    color: #666;
    font-weight: 600;
    margin-bottom: 15px;
}
#couponPopup li .radioBox {
    display: flex;
    border-top: 1px solid #ddd;
    padding-top: 15px;
    gap: 15px;
}
#couponPopup li .radioBoxTit{
    color: #666;
    font-size: .95rem;
}
#couponPopup b{
    font-size: 1rem;
    line-height: 1.4;
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}
#couponPopup li .radioWrap{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
#couponPopup .couponSubmitBtn {
    display: block;
    padding: 15px 5px;
    border: 1px solid transparent;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    border-radius: 5px;
    color: var(--primary);
    background-color: rgba(16, 185, 129, 0.2);
    width: 100%;
}
#couponPopup .couponSubmitBtn:hover,
#couponPopup .couponSubmitBtn:active{
    background-color: rgba(16, 185, 129, 0.3);
}


/*강의 신청 캘린터 시작 ----------------------------------------------*/

#consultPopup .calendar-title{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    gap: 15px;
    font-weight: 700;
    margin-bottom: 30px;
}
#consultPopup .calendar-title button{
    border: unset;
    height: 25px;
    padding: 0 20px;
    background-color: unset;
    background-position: center; background-size: 50%; background-repeat: no-repeat;
}
#consultPopup .calendarArea caption{display: none;}
#consultPopup .calendarArea table{
    width: 100%;
    table-layout: fixed;
}
#consultPopup .calendarArea .calendar-th th{
    font-size: .9rem;
    color: #666;
    font-weight: 400;
}
#consultPopup .calendarArea .calendar-body:before {
    display: table-row;
    content: ''; height: 12px;
}
#consultPopup .calendarArea .calendar-body td{
    width: 100%;
    padding: 5px;
    height: 50px;
    position: relative;
}
#consultPopup .calendarArea .calendar-body td button{
    border: unset;
    display: flex;
    height: 100%;
    border-radius: 10px;
    width: 100%;
    background-color: transparent;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#consultPopup .calendar-body button.selected{
    background-color: #065F46!important;
}
#consultPopup .calendar-body button.selected >*{
    color: #fff !important;
}
#consultPopup .calendar-body button.unselectable >*{
    color: #b7b7b7!important;
    pointer-events: none;
}
#consultPopup .calendar-body button.dayoff>*{
    color: #F15F79;
}
#consultPopup .calendar-body button.dayoff2>*{
    color: #0089f7;
}
#consultPopup .calendar-body button.today >*{
    color: #065F46;
    font-weight: 500;
}
#consultPopup .calendar-body button span{
    font-size: .95rem;
    font-weight: 400;
    display: block;
}
#consultPopup .calendar-body button span.txt{
    font-size: .85rem;
    margin-top: 5px;
    font-weight: 600;
}

#consultPopup .calendar-title button.btn_prev{
    background-image: url("../images/icon/ico-arrow.png");
    transform: rotate(180deg);
}
#consultPopup .calendar-title button.btn_next{
    background-image: url("../images/icon/ico-arrow.png");
}

#consultPopup .timeArea{
    display: none;
    margin-top: 30px;
    border-top: 1px solid #eee;
    padding-top: 30px;
    flex-direction: column;
    gap: 20px;
}
#consultPopup .timeArea div{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
#consultPopup .timeArea .clockInfo{
    display: block;
    width: 100%;
    margin-bottom: 15px;
    color: #666;
    font-size: .85rem;
    font-weight: 400;
}
#consultPopup .timeArea button{
    padding: .8rem 1.2rem;
    width: 20%;
    display: inline-block;
}
#consultPopup .timeArea button.unselect{
    border-color: #eee;
    color: #b7b7b7;
    pointer-events: none;
}

#consultPopup .timeArea button.selected{
    color: #fff;
    background-color: #065F46;
    border: 1px solid #065F46;
}
#consultPopup .checking ,
#consultContentPopup .checking{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    border-top: 1px solid #eee;
    padding: 15px;
}

#consultPopup .checking strong{
    display: block; width: 100%;
}
#consultPopup .checking p,
#consultContentPopup .checking p{
    font-weight: 600;
    line-height: 1.8;
    font-size: 1.1rem;
}
.checking .choice-text-topic{
    display: block;
    width: 100%;
    color: #666;
}
#consultPopup .checking p:not(:last-of-type, .choice-text-topic),
#consultContentPopup .checking p:not(:last-of-type, .choice-text-topic){
    border-right: 1px solid #b7b7b7; padding-right: 15px;
}

#consultPopup textarea{
    width: 100%;
    height: auto;
    min-height: 30px;
    outline: none;
    max-height: 400px;
    overflow-y: auto;
    background-color: rgba(0,23,51,0.02);
    padding: 1rem;
    font-size: .9rem;
    border: none;
    color: #333;
}

#payPopup,
#finPopup{
    display: none;
    width: 50%;
    background-color: #fff;
    border-radius: 10px;
    position: fixed;
    z-index: 501;
    top: 100px; left: 50%; transform: translateX(-50%);
}
#consultPopup .popup-inner,
#payPopup .pop-inner,
#finPopup .pop-inner{
    padding: 2rem 1rem;
}
#payPopup h3,
#finPopup h3{
    font-size: 1.4rem;
    line-height: 1.5;
    font-weight: 500;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}


#payPopup #popupClose,
#finPopup #closeBtn{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
#payPopup #popupClose:hover,
#finPopup #closeBtn:hover{
    background-color: #b7b7b7;
}
#payPopup .inputWrap,
#finPopup .inputWrap{
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5%;
    width: 70%;
    margin: 0 auto 40px;
}

#payPopup .inputWrap table{
    width: 100%;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    text-align: center;
}
#payPopup .inputWrap table th{
    font-size: 1rem;
    font-weight: 600;
    padding: 10px 5px;
    border-bottom: 1px solid #ddd;
}
#payPopup .inputWrap table td {
    font-size: 1rem;
    font-weight: 400;
    padding: 14px 10px;
}
#payPopup .inputWrap table tr:not(:last-of-type) td{
    border-bottom: 1px dotted #ddd;
}
#payPopup .inputWrap table td input{
    width: 20px; height: 20px;
}
#payPopup .inputWrap input[type=radio], #finPopup .inputWrap input[type=radio]{display: none;}
#payPopup .inputWrap input[type=radio]+label, #finPopup .inputWrap input[type=radio]+label{display: flex;align-items: center; font-size: 1rem; font-weight: 600; padding: 1rem 1.2rem; border: 1px solid #059669; border-radius: 20px; color: #fff; background-color: rgba(5, 150, 105, 0.6);}
#payPopup .inputWrap input[type=radio]:checked+label, #finPopup .inputWrap input[type=radio]:checked+label {background-color: #059669; font-weight: 700; border-color: #059669}
#payPopup span.chose, #finPopup span.chose{font-size: 12px; font-weight: 400; color: #059669; text-align: center; display: block; margin-bottom: 15px}
#payPopup button.visible,#finPopup button.visible{pointer-events: none; background-color: #b7b7b7; cursor: not-allowed}
#payPopup button,#finPopup button{transition: .3s ease-in-out; width: 30%; margin: 0 auto; font-size: 1.2rem; color: #fff; background-color: #065F46; border: 1px solid transparent; display: block; padding: 1rem; border-radius: 10px;}
#payPopup button:hover,#payPopup button:hover{background-color: #059669}

#payPopup .inputWrap table + p{
    font-size: .95rem; font-weight: 700; color: #666;
    text-align: center; line-height: 1.7;
}

#payPopup .inputWrap label[for=nicePayInput] img{
    width: 16px; height: 16px;
}
#payPopup .inputWrap label[for=nicePayInput] img,
#payPopup .inputWrap label i{
    display: inline-block; margin-left: 10px;
}

#finListPopup{
    display: none;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background-color: #fff; width: 80%;
    border-radius: 10px; z-index: 501; height: 30vh;
}
#finListPopup .finList-inner{padding: 1rem;  height: 100%; display: flex; flex-direction: column; gap: 20px; justify-content: center; align-items: center}
#finListPopup p{font-size: 1.2rem; font-weight: 500;color: #333; text-align: center;}
#finListPopup .backLink{font-size: 1rem; font-weight: 700; color: #666; text-align: center; display: block; cursor: pointer}
#finListPopup .backLink:hover{text-decoration: underline}


#finPopup .infoInput{
    display: none;
}
#finPopup .info-inner{
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
}
#finPopup .inputDiv{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#finPopup .inputDiv label{
    font-size: .9rem;
    color: #666;
    font-weight: 600;
    padding-left: .5rem;
}
#finPopup .inputDiv strong{
    display: block;
    text-align: center;
    margin-bottom: 10px;

}
#finPopup .inputDiv input{
    border: 1px solid transparent; border-bottom: 1px solid #b7b7b7;
    padding: .5rem; font-size: .9rem;
}
#finPopup .inputDiv input:not(:last-of-type){
    margin-bottom: 20px;
}

#chargePayPopup {
    display: none;
    position: relative;
    top: 0; left: 0;
    width: 100%;
    z-index: 600;
}
#chargePayPopup .overlay-bg{
    background-color: rgba(1,1,1,.15);
    width: 100%; height: 100%;
    z-index: 605;
    position: fixed;
    top: 0; left: 0;
}
#chargePayPopup .charge-inner {
    width: 90%;
    background-color: #fff;
    border-radius: 10px 10px ;
    max-width: 600px;
    min-height: 30vh;
    position: fixed;
    top: 50%; left: 50%; transform: translate(-50% , -50%);
    z-index: 610;
    display: flex;
    padding-bottom: 20px;
    flex-direction: column;
    gap: 20px;
}
#chargePayPopup .pop-inner >* {
    width: 90%; margin: 0 auto; display: block;
}
#chargePayPopup #popupClose{
    border-radius: 10px 10px 0 0;
    background-color: #eee;
    color: #666;
    text-align: center;
    cursor: pointer;
    padding: 20px 0;
}

#chargePayPopup p{
    text-align: center;
    font-weight: 700;
    color: #065F46;
    line-height: 1.4;
    font-size: 1rem;
}
#chargePayPopup .charge {
    font-weight: 800;
    font-size: 1.2rem;
    text-align: center;
    display: block;
}
#chargePayPopup h3{
     margin-bottom: 15px !important;
    color: #666; font-size: .9rem; font-weight: 500;
}

#chargePayPopup strong.titDiv{
    font-size: .95rem;
    font-weight: 700;
    color: #666;
    display: block;
    margin-bottom: 15px;
}

#chargePayPopup .inputWrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
    background-color: #f1f1f1;
}
#chargePayPopup .wrapBox{
    display: flex;
    align-items: center;
    gap: 15px;
}
#chargePayPopup input[type=radio]{ display: none}
#chargePayPopup input+label{
    padding: 15px; border-radius: 5px;
    background-color: rgba(102, 102, 102, 0.3);
    min-height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #666;
    font-weight: 500;
}
#chargePayPopup input:checked+label {
    background-color: var(--primary-light);
    color: #fff;
}

#chargePayPopup i{
    color: #fff; display: inline-block; margin-left: 10px;
}
#chargePayPopup label[for=nicePayInput],
#chargePayPopup label[for=PayPal]{
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    align-items: center;
}
#chargePayPopup label[for=depositor] {
    gap: 10px;
    display: flex;
    align-items: center;
}
#chargePayPopup label[for=depositor] input {
    border: 1px solid #666;
    padding: 5px;
    border-radius: 5px;
}
#chargePayPopup .bookNum{
    display: none;
    flex-direction: column;
    gap: 15px;
}
#chargePayPopup .bookNum.on{
    display: flex;
}
#chargePayPopup .bookNum span.num{
    font-weight: 800;
    font-size: 1rem;
}
#chargePayPopup .bookNum span.copy{
    border-radius: 5px;
    font-weight: 700;
    cursor: pointer;
    background-color: #ddd;
    padding: 5px 10px;
    display: inline-block;
    margin-left: 10px;
}
#chargePayPopup .bookNum span.copy:active,
#chargePayPopup .bookNum span.copy:hover {
    opacity: .8;
}

#chargePayPopup .chose {
    display: none;
    text-align: center;
    color: #F15F79;
    font-size: .9rem;
}
#chargePayPopup .chose.on{
    display: block;
}
#chargePayPopup button.visible {
    border-radius: 10px;
    padding: 10px 0;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background-color: #065F46;
    border: 1px solid transparent;
    margin-top: 10px;
}
#chargePayPopup img{
    width: 24px; height: 24px;
}


    /*  팝업 끝 ******* */




/*  검색 모음 ******* */
#search{
    width: 60%;
    margin: 50px 0 ;
    /*margin-left: calc((100% - 1140px) /2);*/
}

#search .search-inner{
    width: 100%;
    display: flex;
    gap: 15px;
}
#search input[type=date]{
    width: 30%;
}
#search input,
#search select{
    padding: 12px;
    outline: none;
    border: 1px solid transparent;
    background-color: #eee;
    border-radius: 4px;
}
#search button{
    margin: unset !important;
}
#search input,#search select, #search button{height: 60px; white-space: nowrap}



#filter{
    width: 20%;
    min-width: 200px;
}
#filter .f-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 50px;
}
#filter .f-top h3{
    font-size: 24px;
    font-weight: 800;
}
#filter .f-top button{
    background-color: transparent;
    border: 1px solid #b7b7b7;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 5px;
    letter-spacing: 1px;
    font-weight: 800;
    color: #b7b7b7;
}
#filter #filterSearch{
    border-color: #065F46;
    color: #065F46;
    background-color: rgba(3, 31, 93, 0.1);
}
#filter .f-top button:hover{
    background-color: #eee;
}
#filter .filter-list{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
#filter .filter-list li>button{
    width: 100%;
    padding: unset;
    text-align: left;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    border: 1px solid transparent;
    background-color: transparent;
    position: relative;
}
#filter .filter-list li>button:after{
    content: '>';
    top: 50%; right: 5px;
    transform: translateY(-50%) rotate(90deg);
    color: #333;
    font-size: 14px;
    position: absolute;
}
#filter .filter-list li.on>button:after{
    transform: translateY(-50%) rotate(-90deg);
}

#filter .filter-list li >ul{
    display: none;
    margin-top: 20px;
    gap: 20px;
    flex-direction: column;
    max-height: calc(100vh - 500px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2px 0;
}
#filter .filter-list li.on >ul{
    display: flex;
}
#filter .filter-list li >ul li{
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: -.04rem;
    color: #777;
}
#filter .filter-list li >ul li input[type=checkbox]{display: none;}
#filter .filter-list li >ul li input[type=checkbox] +span{
    position: relative;
}
#filter .filter-list li > ul li label{
    padding-left: 30px; cursor: pointer; display: block;
}
#filter .filter-list li >ul li label:hover input[type=checkbox] +span:before{
    background-color: #eee;
}
#filter .filter-list li >ul li input[type=checkbox] +span:before{
    content: ''; display: block;
    position: absolute; top: 50%; left: -30px; transform: translateY(-50%);
    width: 15px; height: 15px;
    border: 1px solid #b7b7b7; background-color: #fff;
    border-radius: 2px;
}

#filter .filter-list li >ul li input[type=checkbox]:checked +span{
    font-weight: 700;
    color: #333;
}
#filter .filter-list li >ul li input[type=checkbox]:checked +span:after{
    content: '✔'; display: block;
    position: absolute; top: 50%; left: -25px; transform: translateY(-50%);
    font-size: 12px;
    color: #065F46;
    border-radius: 2px;
}

/* 컨텐츠 리스트 검색부분 시작------*/
.search-wrap{
    width: 100%;
    margin-bottom: 50px;
}

.search-wrap .contSearch-inner{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #b7b7b7;
}
.search-wrap button#search-btn{
    width: 40px; height: 40px;
    background-image: url("../images/icon/myPage-icon3.png");
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: 55%;
    background-position: center;
    border: 1px solid transparent;
}
.search-wrap input[class=search-input]{
    width: 100%;
    background-color: transparent;
    color: #777;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 1rem;
    border: 1px solid transparent;
}
/*dbGroup2 버전 검색 시작*/
.search-inner .dbSeaDesign{display: flex;flex-direction: column; gap: 20px}
.search-inner .dbSeaDesign .inputSearchWrap{display: flex; gap: 15px;}

.dbSeaDesign #filterBtn {
    border: 1px solid #eee;
    background-color: #fff;
    width: 60px;
    border-radius: 5px;
    background-image: url("/admin/img/icon-filter.png");
    background-repeat: no-repeat; background-position: center; background-size: 55%;
}
.dbSeaDesign h3{display: none}
.dbSeaDesign .seaDesign { display: flex; max-height: 0;   width: 100%; gap: 20px; transition: all .5s ease-in-out; overflow: hidden}
.dbSeaDesign .seaDesign.on{ max-height: 500px; overflow: unset; margin-bottom: 20px;}
.dbSeaDesign .seaDesign div[class$=Wrap]{display: flex;flex-direction: column; gap: 10px;}
.dbSeaDesign .seaDesign div[class$=Wrap] strong{ font-weight: 600; font-size: 12px;}
.dbSeaDesign .seaDesign .dateWrap span{ font-size: 12px; font-weight: 500; color: #b7b7b7; display: inline-block;width: 17%}
.dbSeaDesign .seaDesign .dateWrap input[type=date]{width: 80% !important;}




/*  검색 모음 ******* */


/*  마이페이지 사이드 ******* */
#aside{
    max-width: 300px;
    width: 100%;
    background-color: #4d5f5a;
    left: 0 ;
    height: calc(100vh - 70px);
    transition: all .3s ease-in-out;
    overflow: auto;
    position: fixed;
    top: 70px;
}
#aside .aside-inner{
    padding: 30px 20px;
    height: 100%;
}

#aside.userList #growBtn{
    border-radius: 15px;
    transition: all .2s ease-in-out;
}

#aside ul {
    gap: 15px;
    display: flex;
    flex-direction: column;
}

#aside ul li{
    padding: 10px 5px;
    display: block;
    width: 100%;
    transition: .3s ease-in-out;
    border-radius: 5px;
}

#aside ul li:hover {
    background-color: rgba(255,255,255, 0.15);
}
#aside ul li.on {
    background-color: #efefef;
}
#aside ul .buttonGroup.on {
    background-color: rgba(239, 239, 239, 0.7);
}
#aside ul li.on a{
    color: #4d5f5a;
}

#aside ul li:hover i,#aside ul li:hover strong{
    color: #fff;
}
#aside .wrap button{
    border: 1px solid transparent;
    text-align: left;
    display: block;
    width: 100%;
    background-color: transparent;
    padding: 0;
    margin: 0;
}
#aside .wrap ol {
    margin: 10px 0 0 5px;
    display: none;
}
#aside .wrap ol.show {
    display: block;
}
#aside.userList #growBtn i{
    font-weight: 700;
    color: #4d5f5a;
}

#aside ol.profile .pointWrap{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#aside ol.profile .pointWrap .tit{
    font-weight: 400;
    color: #fff;
}
#aside ol.profile .pointWrap .point{
    font-weight: 800;
    color: #fff
}
#aside ol.profile {
    display: flex;
    gap: 15px;
    flex-direction: column;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 30px;
}
#aside ol.profile li {
    display: flex;
    color: #fff;
    width: 100%;
    justify-content: space-between;
    gap: 10px;
}
#aside.userList ol.profile > li:last-of-type {
    border-top: 1px solid rgba(255,255,255,.2);
    padding-top: 20px;
}
#aside ol.profile .profileBtn li{
    justify-content: right;
    padding: 0;
}
#aside ol.profile .profileBtn button{
    border-radius: 0;
    background-color: transparent;
    color: #fff;
    font-size: .95rem;
    font-weight: 300;
    display: flex;
    gap: 5px;
}
#aside ol.profile .profileBtn li.only-mo {
    display: none;
}
#aside ol.profile .pdf{
    color: #fff;
    font-size: .95rem;
    line-height: 1.6;
}
#aside ol.profile strong{
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}
#aside ol.profile .money strong {
    display: inline-block;
    margin-left: 5px;
}
#aside ol.profile +ul{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#aside ul li a,
#aside .wrap button,
#aside .wrap button i,
#aside.userList #growBtn i,
#aside ul li.on:hover ol li,
#aside ul li.on ol li strong {
    font-weight: 500;
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 15px;
}
#aside ul li img{
    width: 25px; height: 25px;
}
#aside ul li strong,
#aside ul li.on ol li i{
    font-weight: 500;
    color: #fff;
}
#aside ul li.on:hover i,
#aside ul li.on strong ,
#aside ul li.on button i,
#aside ul li.on ol li strong,
#aside .wrap button.put{
    color: #4d5f5a;
    font-weight: 700;
}
#aside .wrap button.put strong {
    color: #fff;
}


#aside ul li.on ol li.on i,
#aside ul li.on strong {
    color: #4d5f5a;
    font-weight: 700;
}

#aside .menu-section-title {
    padding: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0;
    margin-bottom: -10px;
}



#aside .profile ul strong{
    font-weight: 700;
    font-size: 20px;
    display: inline-block;
}
#aside .profile li button{
    cursor: pointer;
    padding: 2px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    border: 1px solid transparent;
    background-color: #fff;
    color: #666;
    border-radius: 15px;
    height: 20px;
}

#aside + .menuFold {
    transition: all .3s ease-in-out;
    width: 50px;
    height: 50px;
    background-color: #fff;
    font-size: 24px;
    border: unset;
    z-index: 5000;
    color: #666;
    left: 0;
    font-weight: 400;
    display: none;
    position: relative;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
#aside.on+ .menuFold {
    left: 78%;
}

/*-----------------사용자 사이드바 시작*/

#aside.userList #growBtn{
    display: flex;
    gap: 15px;
    align-items: center;
    width: 100%;
    text-align: left;
    font-size: 1rem;
    color: #333;
    background-color: transparent;
    border: 1px solid transparent;
}

#aside.userList .wrap ol{
    margin-left: 20px;
    padding: 15px 0;
    display: none;
    transition: all .2s ease-in-out;
}
#aside.userList .wrap ol.show{
    display: block;
}
/*  마이페이지 사이드 ******* */

/*  페이징 ******* */
.finxPaging{
    height: 50px!important;
    width: 80%;
    margin: 30px auto;
}
.finxPaging .paging-inner{
    height: 100% !important;
}
.finxPaging ul{
    height: 100% !important;
    display: flex!important;
    justify-content: center!important;
    gap: 2rem!important;
}

.finxPaging ul li{
    min-height: unset!important;
    height: 40px !important;
    width: auto!important;
    border: unset!important;
    padding: 0!important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
.finxPaging ul li:hover{
    transform: unset!important;
}
.finxPaging ul li a{
    line-height: 20px!important;
    font-size: 1.1rem!important;
    display: flex!important;
    justify-content: center!important;
    align-items: center!important;
    color: #333!important;
    font-weight: 500!important;
    padding: 10px !important;
}
.finxPaging ul li.focus a{
    color: #065F46;
    text-decoration: underline;
    cursor: default;
}
.finxPaging ul li:not(.focus) a:hover{
    color: #666;
    text-decoration: underline;
}

.finxPaging ul li.arrow{
    position: relative;
}
.finxPaging ul li.arrow:before{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    content: '';
    background-color: transparent;
    border-radius: 5px;
    width: 40px;
    height: 40px;
    z-index: -1;
    border: 1px solid #eee;
}

.finxPaging ul li.arrow:hover:before{
    background-color: rgba(6, 95, 70, 0.2);
}
.finxPaging ul li.arrow:hover a{
}
.finxPaging ul li.arrow a{
    color: #065F46;
    font-size: 14px;
}
/*  페이징 ******* */





/*  버튼 모음 ******* */

.btnStyle{
    padding: 1rem 1.5rem;
    font-size: 1rem;
    cursor: pointer;
    border: 1px solid #666;
    font-weight: 600;
    border-radius: 4px;
}
.btnStyle.submit{
    background-color: #065F46;
    border: 1px solid transparent;
    color: #fff;
    font-weight: 600;
}
.btnStyle.default{
    background-color: transparent;
    border: 1px solid #065F46;
    color: #065F46;
    font-weight: 600;
}
.btnStyle.default:hover,
#myHome .order .btnBox button:last-of-type:hover{
    background-color: rgba(5, 150, 105, 0.2); ;
}
.btnStyle.del{
    background-color: transparent;
    border: 1px solid #ff4365;
    color: #ff4365;
    font-weight: 600;
}
.btnStyle.del:hover{
    background-color: rgba(255, 67, 101, 0.2);
}

table .btnMore{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
table .delBtn,
table .editBtn,
table .msigFree{
    cursor: pointer;
    padding: 5px 10px;
    border: 1px solid #333;
    border-radius: 5px;
    background-color: transparent;
}
table .msigFree{
    display: block;
    margin: 0 auto 5px;
}
table .delBtn{
    color: #F15F79;
    border-color: #F15F79;
}

table .delBtn:hover{
    background-color: rgba(241, 95, 121, 0.2);
}
table .editBtn{
    color: #065F46;
    border-color: #065F46;
}
table .editBtn:hover{
    background-color: rgba(5, 150, 105, 0.2); ;
}

.btnStyle.etcBtn,
table .etcBtn,
table .msigFree{
    color: #666;
    border-color: #949494;
}

.btnStyle.etcBtn:hover,
table .etcBtn:hover,
table .msigFree:hover{
    background-color: #eee;
}

/*  버튼 모음 ******* */

header .only-mo{
    display: none!important;
}

header{
    display: block;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 70px!important;
    top: 0;
    left: 0;
    z-index: 100;
    background-color:#fff!important;
    border-bottom: 1px solid transparent;
    color: #fff;
}
header.scrolled{
    display: flex;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 70px;
    top: 0;
    left: 0;
    z-index: 100;
}
header .header-inner{
    height: 70px!important;
    width: 100%;
    max-width: 1200px;
    background-color: #fff;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
header h1{
    width: 100px;
    height: auto;
}
header .swiper.headerSwiper{
    height: 20px;
    background-color: transparent;
    max-width: 150px!important;
    width: fit-content!important;
    margin: 0!important;
    visibility: visible;
}
header .swiper.headerSwiper .swiper-wrapper{
    align-items: center!important;
}
header .swiper.headerSwiper .swiper-slide{
    font-family: 'ChosunBg';
    display: flex; align-items: center;
    font-size: .9rem;
    font-weight: 500;
    color: #666;
}
header .header-inner ul{
    visibility: visible;
    display: flex;
    gap: 10px;
    height: 100%;
    align-items: center;
}
header .header-inner ul:nth-of-type(2) {
    width: 55%;
    justify-content: space-between;
}

header .header-inner ul >li.pointed{
    position: relative;
}

@keyframes opacity {
    0%{opacity: 0;}
    100%{opacity: 1;}
}
header .header-inner ul >li.pointed:after{
    content: '';
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    border: 3px solid #065F46;
    width: 100%; height: 80%;
    border-radius: 50%;
    animation: opacity 1.5s ease infinite;
}
header .header-inner ul >li{
    cursor: pointer;
    height: 100%;
    border-radius: 10px;
    display: flex;
    align-items: center;
    position: relative;
}
header .header-inner ul li a{
    font-size: .9rem;
    padding: 15px;
    display: block;
    color: #8b95a1;
}

/* Zone Area Styling - for main menu items with submenus */
header .header-inner ul li.zoneArea .zoneBtn a{
    font-size:.95rem;
    padding: 8px 5px;
    display: block;
    color: #8b95a1;
}

header .header-inner ul li.zoneArea:hover div.zoneBtn,
header .headerBtnList li:hover a{
    background-color: rgb(139, 149, 161,.2);
    border-radius: 10px;
}

/* Submenu Styling */
header .header-inner ul li .subMenu{
    display: none !important;
    background-color: #fff;
    overflow: auto;
    border: 1px solid #b7b7b7;
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    z-index: 200;
}
header li.zoneArea:hover .subMenu {
    display: block;
    animation: delayedShow 0.2s;
}

header li.zoneArea .subMenu:hover {
    display: block;
}

@keyframes delayedShow {
    from { opacity: 0; }
    to { opacity: 1; }
}
header .header-inner ul li .subMenu ol{
    display: grid;
    width: 100%;
    max-width: 1200px;
    gap: 1rem;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    padding: 0 1rem;
}
header .header-inner ul li .subMenu.expertZone ol{
    grid-template-columns: repeat(2,1fr);
}

header .header-inner ul li .subMenu ol li{
    padding: 1.2rem 0 1rem 1rem;
}
header .header-inner ul li .subMenu ol li:last-of-type{
    padding-right: 1rem;
}
header .header-inner ul li .subMenu ol li:first-of-type{
    display: none;
}
header .header-inner ul li .subMenu ol li{
    border-radius: unset;
}
header .header-inner ul li .subMenu ol li:hover{
    background-color: transparent;
}

header .subMenu ol li:not(:first-of-type):not(:nth-of-type(2)){
    border-left: .1rem solid #b7b7b7;
}

/* Help Zone Special Styling */
header .header-inner ul li .subMenu ol li.helpZone{
    flex-direction: column;
    align-items: flex-start;
}
header .header-inner ul li .subMenu ol li.helpZone dd:not(.tit):not(.display){
    display: none;
}
header .header-inner ul li .subMenu ol li.helpZone dd.tit.click ~ dd:not(.tit){
    display: block;
}
header .header-inner ul li .subMenu ol li.helpZone dd.tit,
header .header-inner ul li .subMenu ol li dl dd.lector{
    position: relative;
    font-weight: 600;
    cursor: pointer;
}
header .header-inner ul li .subMenu ol li.helpZone dd.tit:after,
header .header-inner ul li .subMenu ol li dl dd.lector:after{
    position: absolute;
    content: '▾';
    color: #333;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
}
header .header-inner ul li .subMenu ol li.helpZone dd.tit.click:after,
header .header-inner ul li .subMenu ol li dl dd.lector.click:after{
    transform: translateY(-50%) rotate(180deg);
}
header .header-inner ul li .subMenu ol li.helpZone dd.tit:hover{
    background-color: transparent;
    font-weight: 800;
}

/* Content within submenus */
header .header-inner ul li .subMenu ol li dl{
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #333;
}
header .header-inner ul li .subMenu ol li dl .subT{
    position: relative;
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: 800;
}
header .header-inner ul li .subMenu ol li dl .subT:after{
    content: '';
    display: block;
    position: absolute;
    bottom: -4px;
    left: 0;
    height: 5px;
    background-color: rgba(5, 150, 105, 0.2); ;
    width: 0;
    transition: width .3s ease-in-out;
}
header .helpZone dl:nth-of-type(2){
    padding-top: .5rem;
}

header .header-inner ul li .subMenu ol li dl .subT.active:after{
    width: 100%;
}
header .header-inner ul li .subMenu ol li dl dd{
    font-size: 1rem;
    padding: 5px 0;
    cursor: pointer;
    font-weight: 500;
    transition: all .3s ease-in-out;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
header .header-inner ul li .subMenu ol li dl dd.lector{
    margin-top: 10px;
}
header .header-inner ul li .subMenu ol li dl dd a{
    padding: unset;
    line-height: 1.4rem;
    color: #777;
}
header .header-inner ul li .subMenu ol li dl dd a:hover{
    font-weight: 700;
    background-color: rgba(102, 102, 102, 0.1);
}

/* Show submenus on hover */
header .header-inner ul li.zoneArea:hover .subMenu{
    display: block;
}

/* Close buttons styling */
header .header-inner ul li .subMenu ol li button[id^="subMenuFold"]{
    display: none;
}

header .userSet li{
    line-height: 15px;
    color: #fff;
}
header .userSet li.default{}
header .userSet li.default a{color: #065F46; background-color: #fff;border: 1px solid #065F46; border-radius: 10px}
header .userSet li.default:hover a{background-color: rgba(6, 95, 70, 0.2);}
header .header-inner ul li .subMenu ol li button[id^="subMenuFold"]{
    border: 1px solid transparent; font-size: 14px; color: #8b95a1 !important;
    background-color: unset; font-weight: 600;
}
header dd .smallTxt{
    font-size: .85rem;
    margin-bottom: 10px; display: block;
    color: #b7b7b7;
    width: 100%;
}
/*
header .header-inner ul li .subMenu ol li dl dd a:nth-of-type(2),
header .header-inner ul li .subMenu ol li dl dd a:last-of-type{
    margin-top: 10px;
}

 */

header dd .subTab{
    font-weight: 500;
    display: block;
    color : #777;
    position: relative;
    transition: all .3s ease-in-out;
}
header dd .subTab:after{
    content: '▼'; position: absolute; top: 50%; left: 80px; transform: translateY(-50%);
    font-size: 14px; color: #666;
}
header dd .subTab.on:after {
    content: '▲';
}
header dd .subTab:hover{
    background-color: #eee;
}
header dd .subCont{
    display: none;
}
header dd .subCont.on {
    display: block;
    margin: 15px 0 0 5px;
}

header .subMenu .aiZoneLi dl{
    flex-direction: row !important; flex-wrap: wrap;
}
header .subMenu .aiZoneLi dt {
    width: 100%;
}
header .subMenu .aiZoneLi dd {
    width: 45%;
}
@media (max-width: 1200px) {
    header .header-inner ul li .subMenu{
        left: -100px;
        margin-left: 0;
        width: calc(100vw - 40px);
    }

    header .header-inner ul li .subMenu ol{
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        padding: 0 0.5rem;
    }
}

@media (max-width: 768px) {
    header .header-inner ul li .subMenu ol{
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}
/* main */



/* 공통 애니메이션 설정 */
.fade-up, .fade-right {
    opacity: 0;
    transition: opacity 0.9s ease-out, transform 0.8s ease-out;
}
.fade-up{
    transform: translateY(70px);
}
.fade-right {
    transform: translateX(-50px);
}

/* 화면에 보일 때 활성화 */
.fade-up.active, .fade-right.active {
    opacity: 1;
    transform: translateY(0);
}
.fade-right.active {
    transform: translateX(0);
}





div[id*=index]{
    box-sizing: border-box;
    height: 100vh;
    font-size: 14px;
}

div[id*=index]:not(#index5) .fp-tableCell{
    padding-top: 70px;
    box-sizing: border-box;
    height: 100%;
}
div[id*=index]:not(#index1) div[class*=-inner]{
    width: 90%; margin: 20px auto;
    max-width: 1200px;
    height: calc(100vh - 70px - 40px);
    box-sizing: border-box; /* 추가 */
}


#index6 .contact-inner{
    max-height: calc(300px - 70px);
}

.character {
    position: absolute;
    z-index: 1000;
    display: none;
    height: 90vh; right: 0; left: 0; bottom: 0;
}
.character.active{
    display: block!important;
}
.character .imgWrap{
    width: 80px; height: 80px;
    border-radius: 50%;
    border: 2px solid #031f5d;
    background-color: #fff;
}
.character .imgWrap img{
    width: 100%; height: 100%; object-fit: contain;
}

.character p{
    font-weight: 600;
    color: #031f5d;
    font-size: 1.1rem;
    line-height: 1.6;

}

.character .only-mo{
    display: none;
}
.character .mainWrap{
    display: flex;
    justify-content: center; align-items: center;
    gap: 20px;
}
.character .skipBtn{
    text-decoration: underline;
}
.character button{
    background-color: transparent!important;
    border: 1px solid transparent;
    color: #031f5d!important;
    font-size: 20px;
}
.character button:hover{
    font-weight: 800;text-decoration: underline;
    background-color: transparent;
}
.character div[class*=step]{
    background-color: #fff;
    flex-direction: column;
    width: 45%;
    gap: 20px; justify-content: center; align-items: center;
    display: none;
    box-shadow: 0 0 10px 8px rgba(1,1,1,0.1);
    position: absolute;
    border-radius: 10px; padding: 1rem 2rem;
}
.character div[class*=step].on{
    display: block;
}
.character .step1,
.character .step2{
    top: 50%; left: 50%; transform: translate(-50%, -50%);
}

.character span.bold{
    font-weight: 800;
    color: #031f5d;
}

.character .step1 span:not(.bold){
    display: block;
}
.character .btnWrap{
    margin: 20px auto;
    width: 50%;
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}
.character .step3{
    z-index: 500!important;
    top: 0;
    left: 30%;
}


.character .point{
    border-radius: 50%;
    width: 120px;
    height: 30px;
    border: 1px solid #2c3e50;
}
.character .step4,
.character .step5,
.character .step6{
    left: 30%;
    top: 0;
}


.guideList .subMenu {
    display: none;
}

.guideList:hover .subMenu{
    /*display: block !important;*/
}
.guideList.active .subMenu{
    display: block;
}








div[id*=index]:not(#index1) div[class*=-inner] h3{
    font-family: 'ChosunBg';
    font-weight: 200;
    color: #065F46;
    margin-bottom: 20px;
    font-size: 2rem;
}


div[id*=index]:not(#index1) div[class*=-inner] strong {
    font-weight: 600;
    letter-spacing: -1px;
}
div[id*=index] div[class*=-inner] strong.active{
    opacity: 1!important;
}



#index1{
    color: #fff;
    letter-spacing: 1px;
    position: relative;
}
#index1 #guideBtn{
    position: fixed;
    bottom: 5%; right: 5%;
    z-index: 100;
    background-color: #fff;
    border-radius: 10px; padding: .2rem .5rem;
    display: flex; gap: 10px;
    color: #031f5d;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 0 10px 8px rgba(1,1,1,.1);
}
#index1 #guideBtn:hover{
    background-color: #031f5d;
    color :#fff;
}
#index1 #guideBtn .imgWrap{
    border: 2px solid #031f5d;
    width: 40px; height: 40px;
    border-radius: 50%;
}
#index1 #guideBtn img{
    width: 100%; height: 100%; object-fit: cover;
}
#index1 .swiper{
    height: 100%;
}
#index1 .mains-inner{
    height: 100vh;
    width: 100%;
}

#index1 .swiper-slide{
    position: relative;
    width: 100%;
    height: 100%;
}
#index1 .swiper-slide img{
    width: 100%; height: 100vh; object-fit: cover;
    position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -1;
}
#index1 .swiper-slide .textWrap{
    width: 90%; margin: 80px auto 0;
    height: 100%;
    max-width: 1200px;
    display: flex;
}
#index1 .swiper-slide.theraBot .textWrap {
    width: 65% !important;
}
#index1 .swiper-slide .textWrap h2,
#index1 .swiper-slide.first h2{
    font-size: 80px;
    line-height: 6rem;
    font-family: 'SUIT';
    font-weight: 800;
    margin-top: 100px;
    text-align: center;
}
#index1 .swiper-slide.theraBot .textWrap {
    top: 22% !important;
    transform: unset !important;
    right: -6% !important;
    left: unset !important;
}
#index1 .swiper-slide.theraBot .textWrap strong {
    line-height: 1.4;
    font-weight: 700;
    color : #145142;
}
#index1 .swiper-slide.theraBot .textWrap strong b,

#index1 .swiper-slide.theraBot .textWrap strong b+span{
    display: block;
    font-weight: 800;
    font-size: 80px;
}
#index1 .swiper-slide.theraBot .textWrap strong span.sm{
    font-size: 1.5rem;
    line-height: 1.7;
}
#index1 .swiper-slide.theraBot .textWrap button{
    margin: 0 !important; max-width: 200px;
    font-size: 1rem;
}

#index1 button{
    background-color: #333;
    padding: 1rem 2rem;
    font-size: 1.2rem;
    font-weight: 400;
    width: auto;
    max-width: 400px;
    color: #fff;
    text-align: center;
    display: block;
    border-radius: 20px;
    border: 1px solid transparent;
    cursor: pointer;
    margin: 0 auto;
}
#index1 button:hover,
#index1 button:active{
    background-color: #000;
}
#index1 .swiper-slide h2 .small{
    font-size: 1.1rem;
    line-height: 1.2rem;
    margin-top: 10px;
    display: block;
}
#index1 .swiper-slide h2 + div,
#index1 .info,
#index1 ul li{
    font-size: 20px; line-height: 2rem ; text-align: center;
}
#index1 .swiper-slide div h3{
    font-weight: 700; font-size: 44px;
     line-height: 4rem;
}
#index1 .swiper-slide h2 + div{display: flex; flex-direction: column; gap: 20px;}
#index1 .swiper-slide.two >*{
    color: #333;
}
#index1 .swiper-slide .textWrap{
    gap: 40px;
}

/* 첫번째 슬라이드 --------------------------------------------------*/


#index1 .swiper-slide.start .textWrap h2{
    font-size: 3rem;
    line-height: 1.6;
}
#index1 .swiper-slide.start .textWrap h2 span{
    font-weight: 700;
}
#index1 .swiper-slide.start .textWrap h2 b {
    display: block;
}

#index1 .swiper-slide.first .textWrap{
    justify-content: center;
    align-items: center;
}
#index1 .swiper-slide.first .back,
#index1 .swiper-slide.start .back{
    position: absolute;
    width: 100%; height: 100vh; top: 0; right: 0; bottom: 0; left: 0;
    background-color: rgba(0,0,0,.4);
}
#index1 .swiper-slide.first .textWrap h3, #index1 .swiper-slide.first .textWrap,#index1 .swiper-slide.first .textWrap h2{
    margin-top: unset!important;
}
#index1 .swiper-slide.first b{
    display: block;
    font-size: 2rem;
}
/* 두번째+세번쨰 슬라이드 --------------------------------------------------*/
#index1 ul{
    background-color: rgba(255,255,255,.1);
    padding: 2rem;
    border-radius: 10px;
    width: fit-content;
    margin: 0 auto;
}
#index1 ul li{
    display: flex;
    gap: 20px;
    justify-content: flex-start;
}
#index1 ul li .bold{
    color: #059669;
    display: inline-block;
}
/* 네번쨰 슬라이드 --------------------------------------------------*/


#index1 .swiper-slide .textWrap{
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    flex-direction: column!important;
}
#index1 .indexScroll{
    padding-top: 80px;
    position: relative;
    width: 30%;
    z-index: 30;
    bottom: 15%; left: 50%; transform: translateY(-50%);
    height: 300px !important;
}
#index1 .indexScroll span{
    position: absolute;
    top: 0;
    left: 50%;
    width: 25px;
    height: 25px;
    margin-left: -12px;
    opacity: .4;
    border-left: 2px solid #b7b7b7;
    border-bottom: 2px solid #b7b7b7;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: sdb 2s infinite;
    animation: sdb 2s infinite;
    box-sizing: border-box;
}
#index1 .indexScroll span:nth-of-type(1){
    -webkit-animation-delay: 0s;
    top: -40px;
    animation-delay: 0s;
}
#index1 .indexScroll span:nth-of-type(2){
    top: -10px;
    -webkit-animation-delay: .15s;
    animation-delay: .15s;
}
#index1 .indexScroll span:nth-of-type(3){
    top: 20px;
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
}
@-webkit-keyframes sdb {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes sdb {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

#index1 .swiper-pagination{
    position: relative;
    right: 5%; top: -10%;
}
#index1 .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{
    display: flex; justify-content: center;
    width: 100%;
    background-color: transparent;
}
#index1 .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
    border-radius: 0; width: 10px; height: 10px;
}
#index1 .swiper-pagination-bullet-active{
    background-color: #065F46;
    border-radius: 0;
}

/* index1 fine */



#index2{
    overflow-y: hidden;
}
#index2 h3{
    margin-bottom: 50px!important;
}
#index2 .abouts-inner{
    overflow: hidden;
}
#index2 .index2Swiper{
    height: 80%;
    overflow: unset;
}
#index2 .swiper-wrapper{
    display: grid;
    justify-items: center;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
}
#index2 .card-inn{
    display: flex;
    flex-direction: column;

}
#index2 .indexCard{
    height: 30vh;
    border: 1px solid #eee;
    width: 98%;
    padding: 2rem 1rem;
    border-radius: 10px;
    box-shadow: 0 8px 10px rgba(1,1,1,.2);
    display: flex;
    justify-content: center;
    align-items: center;
}
#index2 .indexCard:hover{
    transform: translateY(-10px);
}
#index2 .indexCard strong{
    text-align: center;
    padding-left: 40px;
    display: inline-block;
    position: relative;
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 auto 50px;
}
#index2 .indexCard strong:before,
#index2 .indexCard strong:after{
    display: block;
    position: absolute;
    content: ''; top: 50%; transform: translateY(-50%);
}
#index2 .indexCard strong:before{
     left: -30px;
    width: 58px; height: 58px;
    background-color: rgba(5, 150, 105, 0.2);
    border-radius: 50%;
}
#index2 .indexCard strong:after{
    left: -15px;
    width: 30px; height: 30px;
    background-size: 100%; background-repeat: no-repeat; background-position: center;
}
#index2 .indexCard:first-of-type strong:after{background-image: url("../images/icon/myPage-icon1.png");}
#index2 .indexCard:nth-of-type(2) strong:after{background-image: url("../images/icon/ico-indexStroke2.png");}
#index2 .indexCard:nth-of-type(3) strong:after{background-image: url("../images/icon/ico-indexStroke3.png");}
#index2 .indexCard:nth-of-type(4) strong:after{background-image: url("../images/icon/ico-indexStroke4.png");}
#index2 .indexCard strong img{
    display: inline-block; margin-right: 20px; z-index: 5;
    width: 30px; height: 30px; object-fit: contain;
}

#index2 .indexCard p{
    position: relative;
    font-size: 1.3rem;
    padding: 0 50px;
    font-weight: 400;
    line-height: 2rem;
    text-align: center;
}
#index2 .indexCard p:before,
#index2 .indexCard p:after{
    content: '';
    position: absolute;
    background-image: url("../images/icon/ico-quote.png"); background-repeat: no-repeat; background-position: center; background-size: 100%;
    width: 40px; height: 40px; opacity: .2;
}
#index2 .indexCard p:before{top: -20px; left: 0;transform: rotate(180deg)}
#index2 .indexCard p:after{bottom: -20px; right: 0;}
#index2 button,
#index3 button,
#index4 button{
    width: 40%;
    border: 1px solid #b7b7b7;
    color: #666;
    background-color: #fff;
    padding: 1.5rem 1rem;
    font-size: 1.3rem;
    font-weight: 500;
    margin: 0 auto;
    display: block;
    border-radius: 10px;
}
#index2 button:hover,
#index3 button:hover,
#index4 button:hover{
    background-color: rgba(1,1,1,.05);
}

#index3 .business-inner{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#index3 h3, #index3 p{
    text-align: center;
}
#index3 p,
#index4 p{
    font-size: 1.2rem;
    font-weight: 400;
}
#index3 .imgWrap{
    width: 50%;
}
#index3 .imgWrap img{
    border-radius: 10px;
}
#index3 .contentWrap{
    margin-top: 50px;
    flex-direction: column;
    display: flex;
    align-items: center;
    gap: 20px;
}



#index4{
    background-color: #f1f1f1;
}
#index4 .questFlex{
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 30px 0 20px;
    height: 78%;
}
#index4 .listBox{
    background: linear-gradient(135deg, #064E3B 0%, #059669 100%);
    border-radius: 20px;
    height: 100%;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

#index4 .listBox:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
#index4 .listBox::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    pointer-events: none;
}
#index4 .list-inn{
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 2;
    text-align: center;
    height: 100%;
}
#index4 .list-inn .number{
    display: flex;
    justify-content: center; align-items: center;
    margin: 0 auto;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    line-height: 60px;
    font-size: 1.2rem;
    font-weight: 700;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
#index4 .list-inn strong{
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
}
#index4 .list-inn p{
    font-size: 0.95rem;
    line-height: 1.2;
    opacity: 0.9;
}
#index4 .list-inn:last-of-type{
    margin-bottom: 0;
}
#index4 button{
    border-color: #065F46;
    color: #065F46;
}
#index7 h3{
    transition-delay: .3s;
}
#index7 p{
    transition-delay: .6s;
}
#index7 h3, #index7 p{
    font-family: 'SUIT' !important;
    text-align: center;
    font-size: 4rem;
    font-weight: 700!important;
}
#index7 .consult-inner{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#index7 img{
    width: auto; height: 52px;
    object-fit: cover;
    display: inline-block;
    margin-right: 20px;
}
#index7 .textDummy{
    align-items: center;
    transition-delay: .9s;
    margin-top: 20px;
    font-size: 2.7rem;
    font-weight: 500;
    color: #979798;
    line-height: 1.8;
    letter-spacing: -0.88px;
    text-align: center;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#index7 .textDummy span{
    width: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}
#index7 .textDummy span.inline{
    width: 50%;
}
#index7 .textDummy .only-mo{display: none;}
#index7 .textDummy span:nth-of-type(1){transition-delay: .4s}
#index7 .textDummy span:nth-of-type(2){transition-delay: .6s}
#index7 .textDummy span:nth-of-type(3){transition-delay: .9s; justify-content: flex-end}
#index7 .textDummy span:nth-of-type(4){transition-delay: 1.2s; justify-content: flex-start}
#index7 .textDummy span:nth-of-type(5){transition-delay: 1.5s}
#index7 .textDummy span:nth-of-type(6){transition-delay: 1.9s}
#index7 .textDummy span:nth-of-type(7){transition-delay: 2s}


#index8{height: 100vh!important; position: relative}
#index8 .expert-inner{
    height: calc(70vh - 70px - 40px)!important;
    position: absolute;
    top: 50%; left: 0; right: 0; transform: translateY(-50%);
}
#index8 h3{ text-align: center}
#index8 .helpSwiper {margin-top: 30px;}
#index8 .helpSwiper .helpSlide{
    border: 1px solid rgba(6, 95, 70, 0.4);
    border-radius: 10px;
    height: 40vh;
    /*box-shadow: 0 4px 10px rgba(1,1,1,.2);*/
}
#index8 .helpSwiper .helpSlide:hover,#index8 .helpSwiper .helpSlide:active{
    border-color: #065F46;
    cursor: pointer;
    scale: 1.002;
    box-shadow: 0 2px 4px 8px rgba(6, 95, 70, 0.05);
}
#index8 .helpSwiper .helpSlide:hover .imgWrap,#index8 .helpSwiper .helpSlide:active .imgWrap{
    border-color: #065F46;
}
#index8 .helpSwiper .helpSlide .imgWrap{
    height: 200px; width: 100%;
    border-bottom: 1px solid rgba(6, 95, 70, 0.4);
}
#index8 .helpSwiper .helpSlide .imgWrap img{
    width: 100%; height: 100%; object-fit: contain;
}
#index8 .helpSwiper .helpSlide .userName strong{
    font-size: 24px;
    margin-top: 20px;
    display: block;
    font-weight: 700;
}
#index8 .helpSwiper .helpSlide .userName{padding: 1rem;}
#index8 .helpSwiper .helpSlide p{
    padding: 0 1rem 1rem;
    font-size: 16px;
    height: 100%;
    max-height: 60px;
    line-height: 1.8;
    font-weight: 400;
    word-break: break-word;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
#index8 .expert-inner >a {
    font-size: 16px;
    font-weight: 600;
    position: relative;
    text-align: right;
    display: block;
    margin-top: 20px;
    color: #666;
    padding-right: 20px;
}
#index8 .expert-inner >a:hover{ font-weight: 800}
#index8 .expert-inner >a:after{
    content: '>';
    position: absolute; top: 50%; right: 0; transform: translateY(-50%);
    color: #666;
    font-size: 16px;
}

#index9 {position: relative;}
#index9 .touch_out{position: absolute; z-index: 10; background-color: transparent;width: 100%; height: 100%;top: 0; right: 0; bottom: 0;left:0;}
#index9 .swiper{overflow: unset!important;position: absolute;}
#index9 .swiper:first-of-type{top: 0;}
#index9 .review-inner{
    position: relative;
}
#index9 .swiper-wrapper{
    transition-timing-function: linear !important;
    opacity: .7; touch-action: none;
}

#index9 h3{
    color: #333!important;
    text-align: center;
    position: absolute;
    top: 45%; transform: translate(-50%,-50%);
    display: block; width: 100%;
    left: 50%;
    font-size: 3.5rem;
}

#index9 .subTitle{
    text-align: center;
    font-weight: 800;
    color: #666;
    position: absolute;
    top: 55%; transform: translate(-50%,-50%);
    display: block; width: 100%;
    left: 50%;
    font-size: 3.5rem!important;
}
#index9 h3 span.point{
    color: #059669!important;
    font-size: 4rem}
#index9 .swiper:last-of-type{bottom: 0;}
#index9 .reviewSlide{
    padding: 1rem;
    touch-action: none;
    border-radius: 10px;
    height: 25vh;
    box-shadow: 0 4px 10px rgba(1,1,1,.1);
    background-color: #fff;
    width: 33%!important;
}
#index9 .reviewSlide .top{
    display: flex;
    gap: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px; margin-bottom: 20px;
}
#index9 .reviewSlide strong.user{
    font-weight: 700;
    font-size: 1rem;
    color: #666;
}
#index9 .reviewSlide .star{
    display: flex; gap: 5px;
}
#index9 .reviewSlide .starImg{
    width: 12px; height: 12px;
}
#index9 .reviewSlide .star img{ width: 100%; height: 100%;}

#index9 .reviewSlide .starCount {
    font-weight: 700;
    font-size: 14px;
    color: #4294ff;
}
#index9 .reviewSlide p.txt{
    font-size: 1.2rem;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    word-break: break-word;
    -webkit-line-clamp: 4;
    line-height: 1.8;
    -webkit-box-orient: vertical;
}













#index5{
    position: relative;
    overflow: hidden;
}
#index5 img{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    object-fit: contain;
}
#index5 .five-inn{
    width: 100% !important;
    height: 30vh;
    position: relative;
    padding-top: unset !important;

}
#index5 h3{
    letter-spacing: -1px;
    position: absolute;
    width: 100%;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size:  2rem;
    color: #fff;
    text-align: center;
    line-height: 3rem;
    font-weight: 600;
}
#index5 h3 span{
    font-weight: 800;
}
#index5 h3 small{
    font-size: 1rem;
    letter-spacing: 1px;
}








#index6.myPageFooter{
    width: calc(100% - 300px);
    margin-left: 300px;
    padding: unset;
}
#index6.myPageFooter .f-inner{
    width: 100%;
    padding: 20px 2%;
    max-width: unset;
}

#index6{
    padding: 20px 0;
    background-color: #f9fafb;
}
#index6 .f-inner{
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
}
#index6 .f-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
/* 구분선 스타일 */
#index6 .divider {
    width: 1px;
    height: 10px;
    background-color: #d1d6db; /* 옅은 회색 */
}
#index6 a{
    color: #8b95a1;
    text-decoration: none;
    display: block;
}
#index6 a:hover{
    text-decoration: underline;
}

#index6 .top h3{
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 800;
    margin-bottom: 20px;
    color: #333;
}
#index6 .top address{
    font-style: normal;
    font-size: .9rem;
    line-height: 1.8rem;
    color: #8b95a1;
}

#index6 .bottom{
    margin: 3rem 0;
}
#index6 .f-term-wrapper{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* main fine */


.section-inner{
    width: 100%;
    margin: 0 auto;
    max-width: 1200px;
}



/* 본인 인증 시작 ************************************/

#identityPage.verification {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#identityPage.verification .ver-inner {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 480px;
}

#identityPage.verification .ver-inner> *:not(.ver-intro) {
    width: 90%;
    margin: 0 auto 20px;
}

    /* 인트로 섹션 */
#identityPage.verification .ver-intro {
    max-width: 480px;
    width: 100%;
    background: linear-gradient(135deg, #065F46 0%, #047857 100%);
    color: white;
    border-radius: 12px 12px  0 0;
    padding: 48px 30px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

#identityPage.verification .ver-intro::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

#identityPage.verification .brand-label {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    opacity: 0.9;
    margin-bottom: 8px;
}

#identityPage.verification .intro-title {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 16px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#identityPage.verification .intro-description {
    font-size: 15px;
    line-height: 1.6;
    opacity: 0.95;
    margin-bottom: 32px;
    font-weight: 400;
}

#identityPage.verification .test-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

#identityPage.verification .feature-item {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

#identityPage.verification .feature-item:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

#identityPage.verification .feature-icon {
    font-size: 16px;
}

#identityPage.verification .feature-text {
    letter-spacing: 0.3px;
}

#identityPage.verification .test-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

#identityPage.verification .info-badge {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

#identityPage.verification .info-divider {
    opacity: 0.6;
    font-size: 12px;
}

#identityPage.verification .auth-notice {
    font-size: 14px;
    opacity: 0.85;
    font-weight: 400;
    margin: 0;
}



#identityPage.verification .ver-header {
    text-align: center;
    padding-top: 30px;
}

#identityPage.verification .ver-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
}

#identityPage.verification .ver-subtitle {
    font-size: 14px;
    color: #6b7280;
}

#identityPage.verification .terms-section {
    margin-bottom: 35px;
}

#identityPage.verification .term-item {
    margin-bottom: 30px;
}

#identityPage.verification .term-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
    cursor: pointer;
}

#identityPage.verification .term-required {
    color: #065F46;
    font-size: 12px;
    font-weight: 500;
}

#identityPage.verification .term-toggle {
    color: #9ca3af;
    font-size: 12px;
    user-select: none;
}

#identityPage.verification .term-content {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 15px;
    font-size: .85rem;
    color: #4b5563;
    max-height: 150px;
    overflow-y: auto;
    line-height: 1.7;
}

#identityPage.verification .term-content::-webkit-scrollbar {
    width: 6px;
}

#identityPage.verification .term-content::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

#identityPage.verification .term-content.collapsed {
    display: none;
}

#identityPage.verification .checkbox-section {
    padding: 20px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 24px;
}

#identityPage.verification .checkbox-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

#identityPage.verification .checkbox-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #065F46;
}

#identityPage.verification .checkbox-label {
    font-size: 14px;
    color: #1a1a1a;
    cursor: pointer;
    user-select: none;
}

#identityPage.verification .checkbox-label .required-mark {
    color: #065F46;
    font-weight: 600;
}

#identityPage.verification .verify-button {
    width: 100%;
    height: 52px;
    background: #065F46;
    display: block;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

#identityPage.verification .verify-button:hover {
    background: #047857;
}

#identityPage.verification .verify-button:disabled {
    background: #d1d5db;
    cursor: not-allowed;
}
#identityPage.verification span.back{
    font-size: .9rem;
    font-weight: 400;
    margin: 20px 0 0;
}
/* 본인 인증 끝 ************************************/





/* 컨텐츠 소개 시작 ******/
#contentInfo{
    width: 100%;
    background-color: #000;
}
#contentInfo .banner{
    position: relative;
    height: 100vh;
    width: 100%;
}
#contentInfo .banner .title{
    position: absolute;
    z-index: 10;
    left: calc((100vw - 1200px) /2);
    top: 40%;
}
#contentInfo .banner strong{
    transition: all .5s ease-in-out;
    color: #fff;
    font-weight: 700;
    font-size: 80px;
    display: block;
    opacity: 0;
    overflow: hidden;
    position: relative;
}
#contentInfo .banner strong::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: translateX(-100%);
    transition: transform .8s ease-in-out;
}

#contentInfo .banner strong.active{
    opacity: 1;
}
#contentInfo .banner strong.active::before{
    transform: translateX(100%);
}


#contentInfo .banner strong:nth-of-type(2){
    margin: 30px 0;
}


#contentInfo .contentScroll{
    position: absolute;
    left: 50%; transform: translateX(-50%);
    display: inline-block;
    bottom: 10vh;
}
#contentInfo .scrollUi{
    padding-top: 60px;
    position: relative;
}
#contentInfo .scrollUi span{
    position: absolute;
    top: 0;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-left: 1px solid #ffff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: sdb2 2s infinite;
    animation: sdb2 2s infinite;
    box-sizing: border-box;
}
@-webkit-keyframes sdb2 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    -webkit-transform: rotate(-45deg) translate(-10px, 10px);
  }
  40% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
}
@keyframes sdb2 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    transform: rotate(-45deg) translate(-10px, 10px);
  }
  40% {
    transform: rotate(-45deg) translate(0, 0);
  }
}

#contentInfo .content1 {

}

#contentInfo .content1 .con-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 120px;
}

#contentInfo .content1 .intro-header {
    text-align: center;
    margin: 80px 0;
}

#contentInfo .content1 .intro-header h2 {
    position: relative;
    font-weight: 700;
    font-size: 2rem;
    color: #fff;
    margin-bottom: 30px;
    padding-top: 80px;
    line-height: 1.4;
}

#contentInfo .content1 .intro-header .subtitle {
    font-size: 1rem;
    color: var(--primary-light);
    font-weight: 600;
    margin-bottom: 20px;
}

#contentInfo .content1 .intro-header p {
    font-size: 18px;
    line-height: 1.8;
    color: #b0b0b0;
    max-width: 800px;
    margin: 0 auto 20px;
}

#contentInfo .content1 .intro-header .highlight {
    font-size: 20px;
    color: #fff;
    font-weight: 600;
    margin-top: 30px;
}

#contentInfo .content1 .values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

#contentInfo .content1 .value-card {
    background: rgba(255, 255, 255, 0.03);
    padding: 50px 30px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

#contentInfo .content1 .value-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary-light);
    transform: translateY(-5px);
}

#contentInfo .content1 .value-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 30px;
}

#contentInfo .content1 .value-icon svg {
    width: 100%;
    height: 100%;
}

#contentInfo .content1 .value-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #fff;
}

#contentInfo .content1 .value-card .value-title-kr {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--primary-light);
}

#contentInfo .content1 .value-card p {
    font-size: 16px;
    line-height: 1.6;
    color: #b0b0b0;
}


/* ? content1 끝 */
#contentInfo .content2 {
    padding: 120px 0;
    background-color: #fff;
}

#contentInfo .content2 .con-inner {
    max-width: 1200px;
    margin: 0 auto;
}

#contentInfo .content2 .company-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

#contentInfo .content2 .overview-left {
    position: sticky;
    top: 100px;
}

#contentInfo .content2 .company-title {
    font-size: 42px;
    font-weight: 700;
    color: #333;
    margin-bottom: 40px;
    line-height: 1.3;
}

#contentInfo .content2 .company-info {
    background: rgba(255, 255, 255, 0.03);
    padding: 40px;
    border-radius: 16px;
    border: 1px solid rgba(212, 165, 116, 0.2);
}

#contentInfo .content2 .info-item {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#contentInfo .content2 .info-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

#contentInfo .content2 .info-label {
    font-size: 14px;
    color: #888;
    margin-bottom: 8px;
    font-weight: 500;
}

#contentInfo .content2 .info-value {
    font-size: 18px;
    color: #333;
    line-height: 1.6;
}

#contentInfo .content2 .overview-right {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

#contentInfo .content2 .story-section {

}

#contentInfo .content2 .story-title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

#contentInfo .content2 .story-title::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
}

#contentInfo .content2 .story-content {
    font-size: 1rem;
    line-height: 1.9;
    color: #666;
    margin-bottom: 25px;
}

#contentInfo .content2 .story-content:last-child {
    margin-bottom: 0;
}

#contentInfo .content2 .highlight-quote {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin: 30px 0;
    line-height: 1.7;
}

#contentInfo .content2 .vision-box {
    background: rgba(255, 255, 255, 0.03);
    padding: 50px;
    border-radius: 16px;
    border: 1px solid var(--primary-light);
    text-align: center;
}

#contentInfo .content2 .vision-text {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-dark);
    line-height: 1.8;
    font-style: italic;
}


/* 컨텐츠2 끝 * */

/* bigPic 시작 * */
.bigPicWrap{
    height: 200vh;
    position: relative;
    overflow: hidden;
}
.bigPic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 10;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform: scale(1);
}
.bigPic:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0; bottom: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(1,1,1,.2);
    z-index: 10;
}

.bigPic.hide {
    opacity: 0;
    pointer-events: none;
}
.bigPicText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2.5rem;
    font-weight: bold;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 11;
    text-align: center;
    pointer-events: none;
}

.bigPic img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.5s ease, transform 0.5s ease;
    will-change: transform, filter;
}
/* bigPic 끝 * */


#contentInfo .content3 {
    padding: 140px 20px;
    background: #fff;
}

#contentInfo .content3 .con-inner {
    max-width: 1200px;
    margin: 0 auto;
}

#contentInfo .content3 .mission-vision-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 100px;
    align-items: start;
}

#contentInfo .content3 .mv-left {
    display: flex;
    flex-direction: column;
    gap: 80px;
    position: sticky;
    top: 120px;
}

#contentInfo .content3 .mv-section {
    border-left: 3px solid var(--primary);
    padding-left: 32px;
}

#contentInfo .content3 .mv-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-light);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

#contentInfo .content3 .mv-title {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    line-height: 1.5;
    letter-spacing: -0.02em;
}

#contentInfo .content3 .mv-right {
    background: rgba(255, 255, 255, 0.03);
    padding: 60px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#contentInfo .content3 .ip-header {
    margin-bottom: 48px;
}

#contentInfo .content3 .ip-header h4 {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    letter-spacing: -0.02em;
}

#contentInfo .content3 .ip-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

#contentInfo .content3 .ip-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

#contentInfo .content3 .ip-item:hover {
    background: rgba(0, 105, 52, 0.05);
    border-color: rgba(0, 105, 52, 0.3);
    transform: translateX(8px);
}

#contentInfo .content3 .ip-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(38, 111, 120,0.1);
    border-radius: 12px;
    color: var(--primary-light);
}

#contentInfo .content3 .ip-icon svg {
    width: 24px;
    height: 24px;
}

#contentInfo .content3 .ip-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

#contentInfo .content3 .ip-name {
    font-size: 17px;
    font-weight: 500;
    color: #333;
    line-height: 1.5;
}

#contentInfo .content3 .ip-badge {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-light);
    background: rgba(49, 130, 246, 0.15);
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
}
/* 컨텐츠3 끝 */
#contentInfo .content4{
    width: 100%;
    background-color: #fff;
    padding: 200px 0;
}
#contentInfo .content4 .con-inner{
    max-width: 1200px;; margin: 0 auto;
}
#contentInfo .content4 .cont-flex{
    transition-delay: .3s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#contentInfo .content4 .lft{
    width: 60%;
}
#contentInfo .content4 h2{
    font-size: 3rem;
    color: #333;
    font-weight: 700;
    line-height: 4rem;
    margin-bottom: 50px;
}
#contentInfo .content4 ul {
    display: flex;
    justify-content: space-between;
}
#contentInfo .content4 ul li{
    color: #333;
}
#contentInfo .content4 ul li:first-of-type,
#contentInfo .content4 .rft{
    transition-delay: .3s;
}
#contentInfo .content4 ul li:last-of-type{
    transition-delay: .4s;
}
#contentInfo .content4 ul li span{
    font-size: 1.4rem;
    font-weight: 600;
    display: block;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}
#contentInfo .content4 ul li strong{
    font-size: 1.8rem;
    font-weight: 700;
}
#contentInfo .content4 .rft .imgWrap{
    width: 90%;
    margin: 0 auto;
    animation: float-diagonal 1.5s ease-in-out infinite;
}
@keyframes float-diagonal {
    0% {
        transform: translate(-10px, -10px);
    }
    50% {
        transform: translate(10px, 10px);
    }
    100% {
        transform: translate(-10px, -10px);
    }
}
/* content 4 끝 ~~~~~~*/

#contentInfo .content5 {
    position: relative;
    background: #fff;
}

#contentInfo .content5 .con-inner {
    position: relative;
    max-width: 1200px;
    width: 100%;
    padding: 100px 0;
    display: flex;
    justify-content: space-between;
    gap: 80px;
    margin: 0 auto;
}

#contentInfo .content5 .yearList {
    max-width: 280px;
    width: 30%;
    height: fit-content;
}

#contentInfo .content5 .yearList ol {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    list-style: none;
    border-left: 2px solid var(--primary);
}

#contentInfo .content5 .yearList ol li {
    position: relative;
    padding-left: 20px;
    font-size: 24px;
    font-weight: 500;
    color: #6b7684;
    cursor: pointer;
    transition: all 0.3s ease;
}

#contentInfo .content5 .yearList ol li:hover {
    color: #fff;
}

#contentInfo .content5 .yearList ol li::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -6px;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 15px;
    border: 1px solid var(--primary-dark);
    background-color: #fff;
}

#contentInfo .content5 .yearArea {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

#contentInfo .content5 .yearArea h3 {
    font-size: 48px;
    font-weight: 700;
    color: #333;
    letter-spacing: -0.03em;
}

#contentInfo .content5 .yearConArea {
    position: relative;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

#contentInfo .content5 .yearArea .yearBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    background: rgba(255, 255, 255, 0.03);
    padding: 48px;
    border-radius: 20px;
    border: 1px solid rgba(1,1,1, 0.05);
    pointer-events: none;
    transition: all 0.5s ease;
}

#contentInfo .content5 .yearArea .yearBox:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #3182f6;
}

#contentInfo .content5 .yearArea dt {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(0, 105, 52, 0.2);
}

#contentInfo .content5 .yearArea dd {
    margin: 0;
}

#contentInfo .content5 .yearArea dd ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
    list-style: none;
}

#contentInfo .content5 .yearArea dd ul li {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    padding-left: 28px;
    position: relative;
}

#contentInfo .content5 .yearArea dd ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--primary);
}

/* 컨텐츠 소개1 끝 *******/

/* 컨텐츠 소개 2 시작 *******/
#contentInfo2 .banner{
    padding: 100px 0;
    border-bottom: 100px solid rgba(238, 238, 238, 0.3);
}
#contentInfo2 .banner >*{
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: block;
}
#contentInfo2 .banner .title strong{
    font-size: 60px;
    font-weight: 800;
}
#contentInfo2 .banner p{
    margin-top: 30px;
    font-size: 1.2rem;
    line-height: 1.9;
    color: #333;
    font-weight: 700;
}
#contentInfo2 .content1 {
    min-height: 100vh;
}

#contentInfo2 .content1 .con-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 40px 0;
}

#contentInfo2 .content1 .section-title {
    margin-bottom: 100px;
    /*opacity: 0;*/
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

#contentInfo2 .content1 .section-title.active {
    opacity: 1;
    transform: translateY(0);
}

#contentInfo2 .content1 .section-title h2 ,
#contentInfo2 .content1 .wellness-definition h3,
#nestEgg .banner strong{
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #333;
    letter-spacing: -0.5px;
}

#contentInfo2 .content1 .section-title p ,
#contentInfo2 .content1 .wellness-definition > p{
    font-size: 20px;
    line-height: 1.8;
    color: rgba(51, 51, 51, 0.85);
    font-weight: 300;
}

#contentInfo2 .content1 .core-elements {
    background: rgba(0, 105, 52, 0.05);
    border-radius: 20px;
    padding: 60px .5rem;
    margin-bottom: 100px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    /*opacity: 0;*/
    transform: translateY(30px);
    transition: all 0.8s ease-out 0.2s;
}

#contentInfo2 .content1 .core-elements.active {
    opacity: 1;
    transform: translateY(0);
}

#contentInfo2 .content1 .core-elements h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 40px;
    text-align: center;
    color: #666;
}

#contentInfo2 .content1 .core-elements ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

#contentInfo2 .content1 .core-elements li {
    background: rgba(255, 255, 255, 0.08);
    padding: 1rem;
    border-radius: 15px;
    border: 1px solid rgba(0, 105, 52, 0.1);
    transition: all 0.3s ease;
    line-height: 1.9;
}

#contentInfo2 .content1 .core-elements li:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

#contentInfo2 .content1 .core-elements li strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--primary);
}
#contentInfo2 .content1 .core-elements li b{
    font-size: 1rem;
    color: var(--primary-light);
}


#contentInfo2 .content1 .wellness-definition {
    margin: 100px 0 ;
}
#contentInfo2 .content1 .wellness-definition h4 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 100px 0 40px;
    color: #333;
}

#contentInfo2 .content1 .wellness-definition ul {
    list-style: none;
    padding: 0;
}

#contentInfo2 .content1 .wellness-definition li {
    font-size: 1rem;
    line-height: 1.7;
    color: #666;
    margin-bottom: 20px;
    position: relative;
}

#contentInfo2 .content1 .wellness-definition li strong {
    display: block;
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: #333;
    font-weight: 700;
}

#contentInfo2 .content2 {
    max-width: 1200px;
    margin: 0 auto 100px;
    background-color: #ffffff;
    border-radius: 20px;
    padding: 60px 40px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

#contentInfo2 .content2 .con-inner {
    width: 100%;
}

#contentInfo2 .content2 .section-title {
    font-size: 1.5rem;
    line-height: 1.5;
    font-weight: 700;
    color: #191f28;
    margin-bottom: 60px;
    text-align: center;
    letter-spacing: -0.5px;
}

#contentInfo2 .content2 .diagram-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

#contentInfo2 .content2 .wellbeing-box {
    background-color: #f8f9fa;
    border: 2px solid #e5e8eb;
    border-radius: 16px;
    padding: 24px 36px;
    margin-bottom: 16px;
    position: relative;
}

#contentInfo2 .content2 .wellbeing-title {
    font-size: 20px;
    font-weight: 700;
    color: #191f28;
    margin-bottom: 16px;
    text-align: center;
}

#contentInfo2 .content2 .wellbeing-desc {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#contentInfo2 .content2 .wellbeing-desc-item {
    font-size: 15px;
    color: #4e5968;
    line-height: 1.6;
    padding-left: 12px;
    position: relative;
}

#contentInfo2 .content2 .wellbeing-desc-item::before {
    content: "→";
    position: absolute;
    left: -2px;
    color: var(--primary);
}

#contentInfo2 .content2 .wellness-box {
    background-color: #ffffff;
    border: 2px solid #e5e8eb;
    border-radius: 16px;
    padding: 24px 36px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

#contentInfo2 .content2 .wellness-title {
    font-size: 20px;
    font-weight: 700;
    color: #191f28;
    white-space: nowrap;
}

#contentInfo2 .content2 .wellness-desc {
    font-size: 15px;
    color: #4e5968;
    padding-left: 12px;
    position: relative;
}

#contentInfo2 .content2 .wellness-desc::before {
    content: "→";
    position: absolute;
    left: -2px;
    color: var(--primary);
}

#contentInfo2 .content2 .connector-line {
    width: 2px;
    height: 40px;
    background-color: #e5e8eb;
    margin: 0 auto;
}

#contentInfo2 .content2 .stages-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
    margin: 0 auto;
}

#contentInfo2 .content2 .stage-box {
    background-color: #f8f9fa;
    border: 2px solid #e5e8eb;
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    transition: all 0.3s ease;
}

#contentInfo2 .content2 .stage-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: var(--primary);
}

#contentInfo2 .content2 .stage-title {
    font-size: 18px;
    font-weight: 700;
    color: #191f28;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e8eb;
}

#contentInfo2 .content2 .stage-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#contentInfo2 .content2 .stage-item {
    font-size: 14px;
    color: #4e5968;
    line-height: 1.5;
}
#contentInfo2 .pageService3Btn {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    color: var(--primary-dark);
    text-decoration: none;
    font-size: 16px;
    margin-top: 30px;
    position: relative;
    font-weight: 600;
    transition: all 0.3s ease;
}

#contentInfo2 .pageService3Btn::before{
    content: ''; bottom: -4px; left: 0; width: 0; height: .15rem; background-color: var(--primary); position: absolute; transition: width 0.3s ease;
}
#contentInfo2 .pageService3Btn:hover:before{
    width: 100%;
}
#contentInfo2 .pageService3Btn::after {
    content: "→";
    font-size: 1rem;
    transition: transform 0.3s ease;
}

#contentInfo2 .pageService3Btn:hover {
    color: var(--primary);
}

#contentInfo2 .pageService3Btn:hover::after {
    transform: translateX(4px);
}
/* 컨텐츠 소개 2 끝   *********/


/* 컨텐츠 소개 3 시작   *********/
#contentInfo3 .content1 {
    max-width: 1200px;
    margin: 0 auto 40px;
    background-color: #ffffff;
    padding: 100px 0;
}

#contentInfo3 .content1 .con-inner {
    width: 100%;
}

#contentInfo3 .content1 .main-question {
    font-size: 36px;
    font-weight: 700;
    color: #191f28;
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: -0.8px;
    line-height: 1.4;
}

#contentInfo3 .content1 .sub-description {
    font-size: 18px;
    color: #4e5968;
    text-align: center;
    margin-bottom: 80px;
    line-height: 1.6;
}

#contentInfo3 .content1 .journey-title {
    font-size: 24px;
    font-weight: 700;
    color: #191f28;
    margin-bottom: 50px;
    text-align: center;
}

#contentInfo3 .content1 .journey-title .highlight {
    color: var(--primary);
}

#contentInfo3 .content1 .journey-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 60px;
    gap: 20px;
}

#contentInfo3 .content1 .journey-item {
    flex: 1;
    text-align: center;
}

#contentInfo3 .content1 .journey-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background-color: var(--primary);
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    border-radius: 50%;
    margin-bottom: 16px;
}

#contentInfo3 .content1 .journey-name {
    font-size: 20px;
    font-weight: 700;
    color: #191f28;
    margin-bottom: 12px;
}

#contentInfo3 .content1 .journey-desc {
    font-size: 14px;
    color: #6b7684;
    line-height: 1.6;
}

#contentInfo3 .content1 .journey-arrow {
    font-size: 24px;
    color: #e5e8eb;
    flex-shrink: 0;
}

#contentInfo3 .content1 .journey-details {
    background-color: #f8f9fa;
    border-radius: 16px;
    padding: 40px 50px;
    margin-bottom: 50px;
}

#contentInfo3 .content1 .detail-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 24px;
    align-items: center;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid #e5e8eb;
}

#contentInfo3 .content1 .detail-row:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

#contentInfo3 .content1 .detail-label {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-light);
}

#contentInfo3 .content1 .detail-content {
    font-size: 15px;
    color: #4e5968;
    line-height: 1.8;
}

#contentInfo3 .content1 .closing-message {
    background: linear-gradient(135deg, #059669 0%, #11d391 100%);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    color: #ffffff;
}

#contentInfo3 .content1 .closing-message p {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 8px;
}

#contentInfo3 .content1 .closing-message p:last-child {
    font-size: 20px;
    font-weight: 700;
    margin-top: 20px;
}

/* Content2 - 출발점 선택 */
#contentInfo3 .content2 {
    max-width: 1200px;
    margin: 0 auto 100px;
    background-color: #ffffff;
    border-radius: 20px;
    padding: 80px 60px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

#contentInfo3 .content2 .con-inner {
    width: 100%;
}

#contentInfo3 .content2 .section-title {
    font-size: 1.8rem;
    line-height: 1.5;
    font-weight: 700;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}

#contentInfo3 .content2 .section-subtitle {
    font-size: 17px;
    color: #6b7684;
    text-align: center;
    margin-bottom: 60px;
    line-height: 1.6;
}

#contentInfo3 .content2 .options-list {
    margin-bottom: 60px;
}

#contentInfo3 .content2 .option-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 28px 0;
    border-bottom: 1px solid #e5e8eb;
    transition: all 0.3s ease;
    cursor: pointer;
}


#contentInfo3 .content2 .option-item:last-child {
    border-bottom: none;
}

#contentInfo3 .content2 .option-item:hover {
    padding-left: 12px;
    background-color: rgba(0, 105, 52, 0.1);
}

#contentInfo3 .content2 .option-item:hover .option-icon {
    transform: scale(1.1);
}

#contentInfo3 .content2 .option-icon {
    font-size: 24px;
    flex-shrink: 0;
    margin-top: 4px;
    transition: transform 0.3s ease;
}

#contentInfo3 .content2 .option-content {
    flex: 1;
}

#contentInfo3 .content2 .option-label {
    font-size: 14px;
    color: var(--primary-light);
    font-weight: 600;
    margin-bottom: 8px;
}

#contentInfo3 .content2 .option-title {
    font-size: 20px;
    font-weight: 700;
    color: #191f28;
    margin-bottom: 6px;
}

#contentInfo3 .content2 .option-description {
    font-size: 15px;
    color: #6b7684;
    line-height: 1.6;
}

#contentInfo3 .content2 .final-message {
    background-color: #fafffa;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
}

#contentInfo3 .content2 .final-message p {
    font-size: 17px;
    color: #4e5968;
    line-height: 1.8;
    margin-bottom: 8px;
}

#contentInfo3 .content2 .final-message .highlight-text {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary);
    margin-top: 16px;
}
/* 컨텐츠 소개 3 끝   *********/


/* 부의 예측 시작   *********/
#moneyPrediction .cont-inner{
    max-width: 1200px;
    width: 90%;
    margin: 0 auto 50px;
    padding-bottom: 100px;
}
#moneyPrediction .rgt .prediction-container {
    max-width: 100%;
    padding: 40px 0;
}

#moneyPrediction .rgt .intro-section {
    background: white;
    border-radius: 12px;
    padding: 40px;
    margin-bottom: 40px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

#moneyPrediction .rgt .section-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.4;
}

#moneyPrediction .rgt .intro-text {
    font-size: 1rem;
    line-height: 1.8;
    color: #495057;
    text-align: center;
}

#moneyPrediction .rgt .intro-text strong ,
#moneyPrediction .rgt .section-note strong{
    margin: 10px 0;
    color: var(--primary);
    font-weight: 700;
}

/* 차트 섹션 */
#moneyPrediction .rgt .chart-section {
    border-radius: 12px;
    padding: 2rem 1rem;
    margin-bottom: 40px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

#moneyPrediction .rgt .chart-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
}

#moneyPrediction .rgt .chart-left,
#moneyPrediction .rgt .chart-right {
    flex: 1;
    display: flex;
    justify-content: space-between;
    min-height: 130px;
    gap: 5px;
    align-items: center;
}

#moneyPrediction .rgt .chart-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #333;
    text-align: center;
}

#moneyPrediction .rgt .chart-canvas-wrapper {
    width: 100%;
    max-width: 500px;
}
#moneyPrediction .rgt .chart-canvas-wrapper canvas{
    width: 100%;
    height: auto;
}

#moneyPrediction .rgt .chart-legend {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}
#moneyPrediction .rgt .chart-legend span{
    font-size: 1rem;
}

#moneyPrediction .rgt .valueBox{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#moneyPrediction .rgt .legend-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 1.4rem;
    color: #495057;
}
#moneyPrediction .rgt .legend-item span{
    font-size: 1rem;
    font-weight: 700;
    color: #666;
}
#moneyPrediction .rgt .legend-item i{
    font-size: 30px;
    color: var(--primary-light);
}

#moneyPrediction .rgt .legend-color {
    width: 20px;
    height: 20px;
    border-radius: 3px;
}

#moneyPrediction .rgt .prediction-values {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 40px 20px;
}

#moneyPrediction .rgt .value-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

#moneyPrediction .rgt .value-label {
    font-size: 16px;
    color: #495057;
    font-weight: 500;
}

#moneyPrediction .rgt .value-number {
    font-size: 24px;
    font-weight: 700;
    color: #000;
}

/* 컨텐츠 섹션 */
#moneyPrediction .rgt .content-section {
    background: white;
    border-radius: 12px;
    padding: 40px;
    margin-bottom: 40px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

#moneyPrediction .rgt .section-desc {
    font-size: .95rem;
    text-align: center;
    line-height: 1.8;
    color: #495057;
    margin-bottom: 30px;
}

#moneyPrediction .rgt .section-note {
    font-size: .95rem;
    text-align: center;
    line-height: 1.8;
    color: #495057;
    margin-top: 20px;
}

/* 파워 그리드 */
#moneyPrediction .rgt .power-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

#moneyPrediction .rgt .power-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 25px;
    border-left: 4px solid var(--primary-light);
}

#moneyPrediction .rgt .power-title {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin-bottom: 12px;
}

#moneyPrediction .rgt .power-desc {
    font-size: 14px;
    line-height: 1.7;
    color: #495057;
}

/* 위험 그리드 */
#moneyPrediction .rgt .risk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

#moneyPrediction .rgt .risk-card {
    background: #fff5f5;
    border-radius: 8px;
    padding: 25px;
    border-left: 4px solid #ef4444;
}

#moneyPrediction .rgt .risk-title {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin-bottom: 12px;
}

#moneyPrediction .rgt .risk-desc {
    font-size: 14px;
    line-height: 1.7;
    color: #495057;
}

/* 의미 박스 */
#moneyPrediction .rgt .meaning-box {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 30px;
    margin: 20px 0;
}

#moneyPrediction .rgt .meaning-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: #495057;
    margin-bottom: 15px;
}

#moneyPrediction .rgt .meaning-item:last-child {
    margin-bottom: 0;
}

#moneyPrediction .rgt .meaning-icon {
    font-size: 20px;
    color: var(--primary);
}

/* CTA 섹션 */
#moneyPrediction .rgt .cta-section {
    text-align: center;
    margin: 60px auto ;
}

#moneyPrediction .rgt .prediction-btn {
    background: linear-gradient(135deg, #88dcc5 0%, #065F46 100%);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 18px 60px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(77, 169, 255, 0.3);
}

#moneyPrediction .rgt .prediction-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(77, 169, 255, 0.4);
}
#moneyPrediction .rgt strong{
    display: block; text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: #960505;
    margin-bottom: 15px;
    line-height: 1.6;
}
#moneyPrediction .rgt .btnWrap{
    display: flex;
    justify-content: center;
    gap: 15px;
}


/* 부의 예측 끝   *********/

/* 뉴플러스 통장 시작  *********/


/* 헤더 섹션 */
#moneyPrediction .bankBook .hero-section {
    text-align: center;
    margin-bottom: 80px;
}

#moneyPrediction .bankBook .hero-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 24px;
    color: #191f28;
}

#moneyPrediction .bankBook .hero-description {
    font-size: 18px;
    line-height: 1.7;
    color: #4e5968;
    margin-bottom: 16px;
}

#moneyPrediction .bankBook .hero-highlight {
    font-size: 17px;
    line-height: 1.7;
    color: #3182f6;
    font-weight: 600;
}

/* 방법 섹션 */
#moneyPrediction .bankBook .method-section {
    background: linear-gradient(to right, #fce7f3, #e0e7ff);
    border-radius: 20px;
    padding: 2rem 1.8rem;
    margin-bottom: 80px;
    color: #333;
}

#moneyPrediction .bankBook .method-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 20px;
}

#moneyPrediction .bankBook .method-description {
    font-size: 16px;
    line-height: 1.8;
    opacity: 0.95;
    margin-bottom: 12px;
}

#moneyPrediction .bankBook .method-highlight {
    font-size: .9rem;
    line-height: 1.6;
    font-weight: 600;
    margin-top: 24px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

/* 카드 그리드 */
#moneyPrediction .bankBook .cards-section {
    margin-bottom: 40px;
}

#moneyPrediction .bankBook .section-header {
    text-align: center;
    margin-bottom: 48px;
}

#moneyPrediction .bankBook .section-emoji {
    font-size: 40px;
    margin-bottom: 16px;
}

#moneyPrediction .bankBook .section-title {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #191f28;
}

#moneyPrediction .bankBook .section-subtitle {
    font-size: 16px;
    color: #6b7684;
}

#moneyPrediction .bankBook .cards-grid {
    display: grid;
    gap: 20px;
    margin-bottom: 60px;
}

#moneyPrediction .bankBook .card {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e8eb;
    transition: all 0.3s ease;
}

#moneyPrediction .bankBook .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

#moneyPrediction .bankBook .card-number {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: #3182f6;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 16px;
}

#moneyPrediction .bankBook .card-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #191f28;
}

#moneyPrediction .bankBook .card-description {
    font-size: 15px;
    line-height: 1.7;
    color: #4e5968;
    margin-bottom: 20px;
}

#moneyPrediction .bankBook .card-list {
    list-style: none;
    margin-bottom: 20px;
}

#moneyPrediction .bankBook .card-list li {
    font-size: 15px;
    color: #6b7684;
    padding: 8px 0;
    padding-left: 20px;
    position: relative;
}

#moneyPrediction .bankBook .card-list li:before {
    content: '•';
    position: absolute;
    left: 0;
    color: #3182f6;
    font-weight: 700;
    font-size: 18px;
}

#moneyPrediction .bankBook .card-highlight {
    background: #f2f4f6;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 15px;
    color: #3182f6;
    font-weight: 600;
    margin-top: 16px;
}
/* 뉴플러스 통장 끝   *********/

/* 비상 자금 시작   *********/
/* 스냅샷 섹션 */
#nestEgg .snapshot-section {
    background: linear-gradient(to right, #fce7f3, #e0e7ff);
    border-radius: 20px;
    padding: 48px 40px;
    margin-bottom: 80px;
    color: #333;
}

#nestEgg .snapshot-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 40px;
    text-align: center;
}

#nestEgg .snapshot-flow {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#nestEgg .snapshot-item {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

#nestEgg .snapshot-number {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: white;
    color: #667eea;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
}

#nestEgg .snapshot-content {
    flex: 1;
}

#nestEgg .snapshot-main {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 4px;
}

#nestEgg .snapshot-arrow {
    margin: 0 8px;
    opacity: 0.8;
}

#nestEgg .snapshot-sub {
    font-size: 14px;
    opacity: 0.9;
}

/* 메인 타이틀 */
#nestEgg .main-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 60px;
    color: #191f28;
}

#nestEgg .main-title .emoji {
    margin-right: 8px;
}

/* 스텝 카드 */
#nestEgg .step-card {
    background: white;
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e8eb;
}

#nestEgg .step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

#nestEgg .step-icon {
    font-size: 24px;
}

#nestEgg .step-title {
    font-size: 22px;
    font-weight: 700;
    color: #191f28;
}

#nestEgg .step-section {
    margin-bottom: 24px;
}

#nestEgg .step-section:last-child {
    margin-bottom: 0;
}

#nestEgg .section-label {
    display: inline-block;
    background: #f2f4f6;
    color: #4e5968;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    margin-bottom: 16px;
}

#nestEgg .step-list {
    list-style: none;
    margin-bottom: 20px;
}

#nestEgg .step-list li {
    font-size: 15px;
    color: #4e5968;
    padding: 10px 0;
    line-height: 1.6;
}
#nestEgg .step-list .list-number {
    font-weight: 600;
    color: #191f28;
    margin-right: 4px;
}

#nestEgg .sub-list {
    list-style: none;
    margin-top: 12px;
    margin-left: 16px;
}

#nestEgg .sub-list li {
    font-size: 14px;
    color: #6b7684;
    padding: 6px 0;
    padding-left: 20px;
}

#nestEgg .sub-list li:before {
    content: '•';
    position: absolute;
    left: 16px;
    color: #8b95a1;
    font-size: 16px;
}

#nestEgg .purpose-box {
    background: #f8f9fa;
    border-left: 4px solid #3182f6;
    padding: 20px 24px;
    border-radius: 8px;
    margin-top: 20px;
}

#nestEgg .purpose-title {
    font-size: 15px;
    font-weight: 700;
    color: #3182f6;
    margin-bottom: 12px;
}

#nestEgg .purpose-content {
    font-size: 15px;
    color: #4e5968;
    line-height: 1.7;
}

#nestEgg .purpose-highlight {
    display: block;
    font-weight: 600;
    color: #191f28;
    margin-top: 8px;
}

/* 최종 스텝 강조 */
#nestEgg .final-step {
    background: linear-gradient(to right, #e0e7ff, #cffafe);
    color: #333;
    border: none;
}

#nestEgg .final-step .section-label {
    background: rgba(255, 255, 255, 0.2);
    color: #333;
}

#nestEgg .final-step .step-title {
    color: #333;
}

#nestEgg .final-step .step-list li {
    color: #333;
}

#nestEgg .final-step .step-list li:before {
    background: white;
}

#nestEgg .final-step .purpose-box {
    background: rgba(255, 255, 255, 0.8);
    border-left-color: white;
    backdrop-filter: blur(10px);
}

#nestEgg .final-step .purpose-title {
    color: #666;
}

#nestEgg .final-step .purpose-content {
    color: rgba(0, 0, 0, 0.95);
}

#nestEgg .final-step .purpose-highlight {
    color: #333;
}

/* CTA 섹션 */
#nestEgg .cta-section {
    margin-top: 60px;
    text-align: center;
}

#nestEgg .cta-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 32px;
    color: #191f28;
}

#nestEgg .cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 40px;
}

#nestEgg .cta-button {
    background: #3182f6;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

#nestEgg .cta-button:hover {
    background: #1b64da;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(49, 130, 246, 0.3);
}

#nestEgg .cta-button.secondary {
    background: white;
    color: #3182f6;
    border: 2px solid #3182f6;
}

#nestEgg .cta-button.secondary:hover {
    background: #f0f7ff;
}

#nestEgg .workbook-section {
    background: white;
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #e5e8eb;
}

#nestEgg .workbook-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #191f28;
}

#nestEgg .workbook-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

#nestEgg .workbook-list li {
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 8px;
}
#nestEgg .workbook-list li a{
    font-size: .9rem;
    cursor: pointer;
    color: #4e5968;
    display: block;
}

/* 비상 자금 끝   *********/






/* 로그인페이지/회원가입  시작 *******/
#login .loginArea,
#join .joinArea{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
#login .login-inner,
#join .join-inner{
    width: 100%;
    margin: 100px 0 150px;
}
.introArea h2,
#login h2,
.editAccount h2,
#join h2{
    font-size: 2rem;
    text-align: center;
    margin-bottom: 50px;
}

.editAccount h2{
    text-align: left;
}
#login h2+p.unUserInfo{
    text-align: center; font-size: .9rem; color: #666; line-height: 1.6; margin: -20px 0 50px;
}
#join .idChk{
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;

}
#join .idChk input,
#join #address1{
    width: 100% !important;
}
#join .idChk span{
    display: block;
    width: 100%;
    margin: 10px 0 10px 5px;
    font-size: 14px;
}
.introArea .addressArea button,
.editAccount .addressArea button,
#join .idChk button,
#join .addressArea button{
    color: #065F46;
    border: 1px solid #065F46;
    background-color: #fff;
}

.introArea .addressArea button:hover,
.editAccount .addressArea button:hover,
#join .idChk button:hover,
#join .addressArea button:hover{
    background-color: rgba(3, 31, 93,.1);
}
#login .inputBox .pwdArea,
#login .inputBox2 .pwdArea{
    position:relative;
}

#login .inputBox .pwdArea #showPwd,
#login .inputBox2 .pwdArea #showPwd{
    width: 60px; height: 60px;
    background-color: #f1f1f1;
    border-radius: 0 10px 10px 0;
    border: 1px solid transparent;
}
#login .inputBox .pwdArea #showPwd img,
#login .inputBox2 .pwdArea #showPwd img{
    width: 80%; height: 80%; object-fit: contain;
}
#login .inputBox .pwdArea i.bi,
#login .inputBox2 .pwdArea i.bi{
    position: absolute;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 60px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#login .inputBox input,
#login .inputBox2 input{
    padding: 15px 60px 15px 15px!important;
}
#login .inputBox,
#login .inputBox2,
#join .inputBox{
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 80%;
    margin: 0 auto 10px;
}
#login .inputBox2{
    width: 100%;
}
.introArea .inputBox input:not(input[type=radio]),
.editAccount .inputBox input:not(input[type=radio]),
.editAccount .inputBox select,
#login .inputBox input,
#join .inputBox input:not(input[type=radio]),
#join .inputBox select,
#join .userJobBox select,
#login .inputBox2 input{
    padding: 15px;
    font-size: 1rem;
    border: 1px solid transparent;
    outline: none;
    background-color: #eee;
    border-radius: 10px;
    width: 100%;
    transition: all .3s ease-in-out;
    height: 60px;
}
.editAccount .address label {
    display:  block;
    margin-bottom: 10px;
}
.introArea .inputBox input:not(input[type=radio]):invalid,
.editAccount .inputBox input:not(input[type=radio]):invalid,
#join .inputBox input:not(input[type=radio]):invalid,
#join .userJobBox select:invalid,
#login .inputBox2 input:invalid{
    border-bottom: 1px solid #F15F79;
    background-color: #fafbff;
    border-radius: 0 0 0 0;
}

#login .idRemem{
    width: 80%;
    margin: 30px auto ;
    text-align: right;
}
#login .idRemem input{
    display: none;
}
#join .inputBox label[for=userPlace]{
    display: block;
    margin-bottom: 10px;
}
#login .idRemem label{
    position: relative;
    font-size: 1rem;
    padding-left: 30px;
}
#login .idRemem label:before{
    content: '';
    display: block;
    position: absolute;
    top: -1px; left: 0;
    border-radius: 4px;
    border: 1px solid #666;
    width: 20px;
    height: 20px;
    transition: all .5s ease;
}
#login .idRemem input[type=checkbox]:checked + label:before{
    background-color: #e9f0ff;
    content: '✔️';
}
#login .aBox{
    width: 40%;
    margin: 0 auto 40px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
#login .login-inner a{
    color: #666;
    text-decoration: underline;
    text-align: center;
}
#login .login-inner a:hover{
    color:#333;
}
#login .btnWrap{
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 50px auto;
}
#login .login-inner button.submit{
    width: 70%;
    margin: unset!important;
}
#login .login-inner button.submit:hover{
    background-color: rgba(0, 105, 52, 0.7);
}
#login .login-inner button.expertSubmit{
    width: 25%;
    background-color: #fff;
    height: 53px;
    border: 1px solid #065F46;
    color: #065F46;
}
#login .login-inner button.expertSubmit:hover{
    background-color: #059669; color: #fff; border-color: #059669;
}
.editAccount button.submit,
#join button.submit{
    margin: 50px auto;
    display: block;
    width: 50%;
    cursor: pointer;
}
/*전문가 로그인 ------------------*/
#login .login-inner .btnWrap2{
    width: 80%;
    margin: 0 auto 50px;
}
#login p.loginType{text-align: center; color: #065F46; font-size: 1rem; font-weight: 600; margin-bottom: 10px;}
#login .radioBox{
    display: flex; justify-content: center; align-items: center; gap: 20px;
    width: 80%; margin:0 auto 30px; text-align: center;
    border: 1px solid #065F46; border-radius: 10px; padding: 2rem 1rem;
}
#login  .radioBox input[type=radio]{display: none;}
#login  .radioBox input[type=radio]+label{position: relative; padding-left: 30px; font-weight: 500; color: #666; transition: .3s ease-in-out}
#login  .radioBox input[type=radio]+label:before,#login  .radioBox input[type=radio]+label:after{content: ''; position: absolute;top:50%;transform: translateY(-50%); border-radius: 50%;}
#login  .radioBox input[type=radio]+label:before{width: 20px; height: 20px; left: 0;border: 1px solid #666; background-color: #fff;}
#login  .radioBox input[type=radio]+label:after{width: 12px; height: 12px; left: 5px; background-color: #065F46; display: none;}
#login  .radioBox input[type=radio]:checked+label {font-weight: 700; color: #065F46}
#login .radioBox input[type=radio]:checked+label:after{display: block;}
#login .login-inner .btnWrap2 button{
    width: 100%!important;
}



/*비회원 로그인 -----------*/

#login .unUser{
    display: none;
    width: 50%; margin: 70px auto 0; padding-bottom: 50px;
    overflow: hidden;
}
#login .unUser strong{
    display: block;
    margin-bottom: 35px;
    position: relative;
    font-size: 1rem;
    color: #666;
    font-weight: 400;
    text-align: center;
}
#login .unUser strong:before,#login .unUser strong:after{
    content: '';
    width: 30%;
    height: .02rem;
    position: absolute;
    background-color: #b7b7b7;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
#login .unUser strong:after{
    right: 0;
    left:  unset;
}
#login .unUser #unUserBtn{
    width: 100%;
    height: 50px;
    margin-bottom: 60px;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 600;
    color: #666;
    border: 1px solid #b7b7b7;
    background-color: #eee;
    display: block;
}
#login .unUser #unUserBtn:hover{
    background-color: #e1e1e1;
}

#login .unUser .unUserInputArea{
    display: none;
    width: 70%;
    margin: 0 auto;
}

#login .unUser .unUserInputArea input{
    background-color: transparent;
    border: 1px solid #b7b7b7;
    border-radius: 5px;
}
#login .unUser button.unUserSubmit{
    width: 100%;
    margin-top: 30px;
    color: #065F46;
    background-color: rgba(3, 31, 93, 0.1);
    border: 1px solid rgba(3, 31, 93, 0.3);
}
#login .unUser button.unUserSubmit:hover{
    background-color: rgba(5, 150, 105, 0.2); ;
}


/*비회원 끝*/



#join .chooseMem{
    padding: 30px;
    background-color: rgba(3, 31, 93, 0.1);
    width: 50%;
    margin: 50px auto;
    display: flex;
    border-radius: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
}
#join .chooseMem strong{
    display: block;
    text-align: center;
    font-size: 1.2rem;
    width: 100%;
    color: #065F46;
    margin-bottom: 25px;
}
#join .chooseMem input[type=radio]{
    display: none;
}
#join .chooseMem label{
    padding-left: 20px;
    font-size: 1.1rem;
    font-weight: 400;
    position: relative;
}
#join .chooseMem label:before{
    display: block;
    content: '';
    position: absolute;
    border: 1px solid #333;
    width: 20px; height: 20px;
    border-radius: 50%;
    top: 50%; left: -6px; transform: translateY(-50%);
}
#join .chooseMem label:after{
    display: block;
    content: '';
    position: absolute;
    border: 1px solid transparent;
    background-color: transparent;
    width: 10px; height: 10px;
    border-radius: 50%;
    top: 50%; left: -1px; transform: translateY(-50%);
}

#join .chooseMem input[type=radio]:checked + label{
    color: #065F46;
    font-weight: 600;
}
#join .chooseMem input[type=radio]:checked + label:after{
    background-color: #065F46;
}


.introArea .genderBox,
.editAccount .genderBox,
#join .genderBox{
    display: flex;
    gap: 15px;
    width: 100%;
    margin: 10px 0;
}
.introArea .genderBox input[type=radio],
.editAccount .genderBox input[type=radio],
#join .genderBox input[type=radio]{
    display: none;
}
.introArea .genderBox label,
.editAccount .genderBox label,
#join .genderBox label{
    padding: 15px 20px;
    position: relative;
    border: 1px solid #065F46;
    border-radius: 30px;
    color: #065F46;
}

.introArea .genderBox label:checked + label,
.editAccount .genderBox input:checked + label,
#join .genderBox input:checked + label{
    background-color: #065F46;
    color: #fff;
}
.introArea .addressArea,
.editAccount .addressArea,
#join .addressArea{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 50px;
}
#join .interestBox strong,#join .userJobBox strong{
    display: block;
    margin-bottom: 15px;
    font-weight: 400;
    width: 100%;
}
#join .interestBox{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
#join .interestBox input{display: none;}
#join .interestBox input+label{font-weight: 400;position: relative; padding-left: 30px; transition: .3s ease-in-out}
#join .interestBox input+label:before{content: ''; position: absolute;top: 50%;transform: translateY(-50%); left: 0;width: 20px; height: 20px; background-color: #fff;border: 1px solid #666;}
#join .interestBox input+label:after{content: '✔'; position: absolute;top: 50%;transform: translateY(-50%); left: 4px;font-size: 16px; color: transparent;transition: .3s ease-in-out}
#join .interestBox input:checked+label{font-weight: 700;}
#join .interestBox input:checked+label:after{color: #065F46}
#join .interestBox input:invalid+label:before{background-color: #f1f1f1; border: 1px solid #ff7777}
/* 로그인페이지 끝 *******/

/* 계정찾기 시작 *** *******/
#findAccount,
#accountResult{
    width: 100%;
}
#findAccount .findArea,
#accountResult .acResultArea{
    max-width: 1200px;
    margin: 100px auto;
}

#findAccount h2,
#accountResult h2{
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 50px;
    text-align: center;
}
#findAccount form,
#accountResult form{
    width: 50%;
    margin: 0 auto 30px;
}
#findAccount .inputBox input,
#accountResult .resultBox{
    border: 1px solid #065F46;
    border-radius: 10px;
    display: block;
    padding: 1.5rem;
    font-size: 16px;
    font-weight: 500;
    width: 100%;
}

#findAccount .inputBox input:invalid{
    border-radius: 0;
    border-bottom: 1px solid #ff7777;
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
}

#findAccount .inputBox input:not(:last-of-type){
    margin-bottom: 20px;
}
#findAccount .inputBox input:last-of-type{
    margin-bottom: 50px;
}
#findAccount button{
    margin: 0 auto;
    display: block;
}
#findAccount button:hover{
    background-color: #065F46;
    color: #fff;
}

#findAccount .findIdLink{
    width: 50%;
    margin: 0 auto;
    display: block;
    text-align: center;
    color: #666;
    font-size: 14px;
    font-weight: 600;
}
#findAccount .findIdLink a{
    display: inline-block;
    margin-left: auto;
    color: #065F46;
    font-weight: 700;
    cursor: pointer;
}
#findAccount .findIdLink a:hover{
    text-decoration: underline;
}

#myHome .accountEditWrap {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 15px;
}
#myHome .accountEditWrap a{
    width: 100%;
    border-radius: 20px;
    font-weight: 500;
    background-color: rgba(255, 255, 255, .86);
    text-align: center;
    padding: 10px 5px;
    min-height: 50px;
    display: flex;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    color: #5d688a;
    font-size: .9rem;
}
#myHome .accountEditWrap a.on{
    background-color: rgba(67, 82, 78, 0.7);
    color: #fff;
    font-weight: 700;
}
#myHome .accountEditWrap a:hover,
#myHome .accountEditWrap a:active{
    background-color: rgba(67, 82, 78, 0.2);
}




/*-----result 시작*/
#accountResult .resultBox{
    text-align: center;
    font-size: 18px;
    color: #065F46;
    font-weight: 700;
}
#accountResult .resultBox span{
    color: #333 !important;
    display: inline-block;
    margin-right: 10px;;
}
#accountResult .resultBox strong{
    font-weight: 800;
    display: inline-block;
}
#accountResult .btnBox{
    display: flex;
    justify-content: center;
}
#accountResult .btnBox button{
    width: 100%;
    margin: 30px auto;
    border-radius: 0;
}
#accountResult .btnBox button:first-of-type{
    border: 1px solid #666;
    background-color: #e8e8e8;
    color: #666;
}

#accountResult .resultBox .newPwd{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#accountResult .resultBox .newPwd strong{
    display: block;margin-bottom: 20px;
    width: 100%;
}

#accountResult .resultBox .newPwd input{
    border-bottom: 1px solid #065F46;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    background-color: transparent;
    padding: 1rem;
    font-size: 16px;
}

/* 계정찾기 끝 *** *******/




/* db분배 페이지 + lecture 시작 *******/
.myPageWrap{
    width: 100%;
    background-color: #f1f4f6;
}
.myPageWrap .page-inner,

#myHome .account-inner, #myHome .setting-inner{
    padding-top: 10px;
    display: flex;
    margin-right: 2%;
    margin-left: calc(300px + 2%);
    width: calc(100% - 300px - 2%);
}

.tableChkBox{
    display: none;
}
.tableChkBox + label{
    position: relative;
}
.tableChkBox + label:after,
.tableChkBox + label:before{
    content: '';
    top: -12px;
    left: -10px;
    position: absolute;
    display: block;
    width: 20px; height: 20px;
    border: 1px solid #065F46;
    background-color: #fff;
}
input[type=checkbox][id=allCheck]:checked + label:after,
input[type=checkbox][class=tableChkBox]:checked + label:after{
    display: none;
}
input[type=checkbox][id=allCheck]:checked + label:before,
input[type=checkbox][class=tableChkBox]:checked + label:before{
    background-color: #065F46;
    content: '✔';
    color: #fff;
}

#dbContent,
#lectureContent,
#introContent,
#suggestContent,
#CAList,
.myPageWrap .page-inner >div,
#myHome .account-inner > div,
#myHome .setting-inner>div{
    padding: 20px;
    width: 100%;
    margin-top: 10px;
    background-color: #fff;
    border-radius: 10px;
}

#dbContent .dbRequestArea{
    border-bottom: 1px solid #eee;
    margin : 0 auto 0 !important;;
}
#dbContent .listContain{
    margin: 50px auto !important;
}

#dbContent >div:not(#search),
.lectureArea,
#introContent .introArea,
#suggestContent .suggestArea{
    width: 100%;
    margin: 0 auto;
}

.lect-inner,
#introContent .intro-inner,
#suggestContent .suggestArea{
    width: 70%;
    margin: 100px auto;
}

#dbContent .dbDivTable{
    /*margin-bottom: 200px;*/
}
#dbContent .inputBox,
#lectureContent .inputBox,
#introContent .inputBox,
#suggestContent .inputBox{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

#lectureContent .list-box,
#introContent .list-box,
#suggestContent .list-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#dbContent .inputBox{
    margin-top: 30px;
}
#dbContent .list-box{
    gap: 10px;
    display: flex;
    align-items: center;
}

#dbContent .list-box strong{
    min-width: 100px;
}

#dbContent h2,
#lectureContent h2,
#suggestContent h2,
#CAList h2,
#myHome .pay h2,
#myHome .payBox h2,
#setting >h2{
    font-size: 1.4rem;
    margin: 0 0 50px;
}
#dbContent h2 .sub {
    display: block;
    margin-top: 10px;
    font-size: .95rem;
    color: var(--primary-light);
}

#dbContent .adjustTop .caution {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    margin: -10px 0 50px;
    line-height: 1.4;
    font-size: .95rem;
    background-color: rgba(93, 104, 138, 0.05);
    border-radius: 5px;
    padding: 15px;
}
#dbContent .adjustTop .caution b{
    color: #5d688a;
    font-size: 1rem;
    margin-bottom: 5px;
    font-weight: 800;
    display: block;
}
#dbContent .adjustTop button{
    padding: 10px 15px;
    font-size: 1rem;
    font-weight: 700;
    border: 1px solid var(--primary);
    border-radius: 5px;
    color: var(--primary);
    background-color: #fff;
}


#dbContent .list-box input,
#lectureContent .list-box input,
#lectureContent .list-box textarea,
#suggestContent .list-box input,#suggestContent .list-box textarea{
    padding: 15px;
    font-size: 1rem;
    border: 1px solid transparent;
    outline: none;
    background-color: #eee;
    border-radius: 10px;
    width: 50%;
    height: 60px;
    transition: all .5s ease;
}

#suggestContent .list-box textarea{
    min-height: 100px;
    height: auto;
}

#join .idChk input:invalid,
#dbContent .list-box input:invalid,
#lectureContent .list-box input:invalid,
#accountResult .resultBox .newPwd input:invalid,
#suggestContent .list-box input:invalid,
#suggestContent .list-box textarea:invalid{
    border-bottom: 1px solid #ff7777;
    border-radius: 0;
}

#dbContent .list-box strong a{
    color: #065F46;
    text-decoration: underline;
    font-weight: 500;
    display: inline-block;
    margin-left: 5px;
}
#dbContent .list-box strong a:hover{
    font-weight: 700;
}

#dbContent button.submit,
#lectureContent button.submit,
#introContent button.submit,
#suggestContent button.submit{
    margin: 50px 0;
    display: block;
}

#dbContent .buyCollect img,#dbContent .buyFail img{
    width: 20%; height: auto;
    margin: 20px auto; display: block;
}
#dbContent .buyFail img{
    transform: rotate(210deg) scale(-1, 1);
}

/*---dbList start*/
#dbContent .listContain .top,
#dbContent .dbListArea .top,
#CAList .lectureListTop{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 50px;
}
#dbContent .listContain .top h2,
#dbContent .dbListArea .top h2,
#CAList .lectureListTop h2{
    margin-bottom: unset;
}
#dbContent .listContain .top .btnWrap,
#dbContent .dbListArea .top .btnWrap{
    display: flex;
    width: 35%;
    gap: 10px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}
#dbContent .listContain .top button,
#dbContent .dbListArea .top button,
#CAList .lectureListTop button{
    margin-left: auto;
    border-radius: 35px;
    display: block;
    width: 150px;
    height: 40px;
    cursor: pointer;
    background-color: transparent;
    border: 1px solid #134E4A;
    font-size: 14px;
    color: #134E4A;
}
#dbContent .listContain .top button:hover,
#dbContent .dbListArea .top button:hover,
#CAList .lectureListTop button:hover{
    background-color: #134E4A;
    color: #fff;
}
#dbContent .dbListArea .more{
    display: block;
    text-align: right;
    margin: 15px 0;
    color: #666;
    cursor: pointer;
}
#dbContent .dbListArea .more:hover{
    color: #333;
}
#dbContent .account{
    display: block;
    text-align: center;
    color: #134E4A;
}
#dbContent .dbTopWrap{
    display: flex;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
}
#dbContent .dbTopWrap .info{
    border-radius: 5px;
    padding: 10px;
    background-color: #eee;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.3;
    font-size: .95rem;
}

/* db분배 페이지 끝 ********/



/* db그룹 페이지 끝 ********/



/* 상담 정산 페이지 시작 ********/
#CAList .lectureListTop i{
    display: inline-block; margin-left: 10px;
}
#CAList #search {
    width: 100%;
}
#CAList #search input[type=date]{
    width: 40%;
}
#CAList #search span{
    font-size: .9rem;
    font-weight: 600;
    color: #666;
    display: inline-block;
    margin: 0 5px;
}

#CAList .flexBox{
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}
#CAList #adjustment{
    position: relative;
    display: flex;
    width: 50%;
    flex-direction: column;
    align-items:  flex-end;
    gap: 10px;
}
#CAList #adjustment >p {
    cursor: pointer;
    position: relative;
    z-index: 10;
    width: 90px;
    text-align: center;
    border: 1px solid #065F46;
    padding: 1rem;
    border-radius: 10px;
    display: inline-block;
}
#CAList #adjustment >p:hover{
    background-color: rgba(6, 95, 70, 0.05);
}
#CAList .flexBox .adjustInfo {
    transform: translateY(20px);
    opacity: 0;
    transition: all .4s ease-in-out;
    position: absolute;
    top: -80px;
    background-color: #85c0af;
    display: flex;
    padding: 1rem;
    border-radius: 10px;
    align-items: center;
    gap: 15px;
}
#CAList .flexBox .adjustInfo.on{
    transform: translateY(0);
    opacity: 1;
}
#CAList .flexBox .adjustInfo span:not(.bold){
    color: #fff;
    line-height: 1.2;
}
#CAList .totalCountTag{
    margin-bottom: unset;
}
#CAList .list-inn{
    margin-top: 30px;
}
#CAList table{
    table-layout: fixed;
    transition: .3s ease-in-out;
}

#CAList table tr.total{
    display: none;
}
#CAList table td.effect{
    font-weight: 700;
}
#CAList table td[class^=end]{
    color: #777;
}
#CAList table td[class^=un]{
    color: #065F46;
}
#CAList table td.ing{
    color: #059669;
}
#CAList table .total{
    background-color: rgba(6, 95, 70, 0.05);
    font-weight: 800;
}
#CAList table .total td:first-of-type{
    letter-spacing: 1px;
    color: #065F46;
}
#CAList form .editBox-inner{
    display: flex;
    gap: 10px;
}
#CAList .editBox.on button.del{
    display: block;
}
#CAList .editBox button{
    height: 38px;
    padding: 0 1.5rem;
    font-size: .9rem;
    font-weight: 400;
}
#CAList .editBox button#edit{
    border: 1px solid #b7b7b7;
    background-color: #f1f1f1;
    color: #666;
}
#CAList .editBox button#edit:hover{
    background-color: #b7b7b7;
    color: #fff;
}
#CAList .editBox button.del{
    display: none;
}

#CAList td strong.consultInput{
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
}
#CAList td strong.consultInput:hover{
    font-weight: 800;
}
/* 상담 정산 페이지 끝 ********/











/* db리스트 페이지 시작 ********/

.dbListArea{
    width: 100%;
}
.dbListArea .dbList-inner{
    width: 100%;
    margin: 0 0 auto;
}
.dbListArea table,
.listContain table,
.userResultArea  table{
    table-layout: fixed;
    width: 100%;
    display: table;
    font-size: 1rem;
}

.dbListArea table th,
.listContain table th,
.userResultArea  table th{
    vertical-align: middle;
    padding: 20px 0;
    border-bottom: 1px solid #065F46;
}
.dbListArea table tbody td,
.listContain table tbody td,
.userResultArea  table tbody td{
    vertical-align: middle;
    padding: 25px 1px;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.dbListArea.counselling table tbody td.statusArea span{
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}
.dbListArea.counselling table tbody td.statusArea span.notYet{
    color: #980909;
}
.dbListArea.counselling table tbody td.statusArea span.completed{
    color: #096898;
}
.dbListArea.counselling table tbody td.statusArea span.notYet:hover,
.dbListArea.counselling table tbody td.statusArea span.notYet:active,
.dbListArea.counselling table tbody td.statusArea span.notYet:focus{
    font-weight: 800;
}
.dbListArea.counselling table tbody td.reportArea {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.dbListArea.counselling table tbody td.reportArea button {
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: .85rem;
    padding: 5px 10px;
    font-weight: 400;
    background-color: #ddd;
    color: #666;
}
.dbListArea.counselling table tbody td.reportArea button:hover,
.dbListArea.counselling table tbody td.reportArea button:active{
    background-color: #666;
    color: #fff;
}

.myListArea .starArea {
    display: flex;
    gap: 5px;
    align-items: center;
    margin : 0 0 -15px;
    justify-content: right;
}
.myListArea .starArea span {
    font-size: .85rem;
    font-weight: 500;
    color: #666;
}

.dbListArea.counselling table tbody td.starArea i,
.myListArea .starArea i{
    color: #ff9d00;
}


/* 상담 내용 / 상담 후기 페이지 시작 -------------------------------*/

.counselInput-header {
    margin-bottom: 30px;
}

.counselInput-header h2 {
    font-size: 24px;
    font-weight: 600;
    color: #2d3748;
    margin: 0;
}

.counselInput-container {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 30px;
}

.counselInput-form {
    margin-bottom: 20px;
}

.counselInput-row {
    display: flex;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
}

.counselInput-label {
    width: 150px;
    padding: 15px 20px;
    background: #f7fafc;
    border-right: 1px solid #e2e8f0;
    font-weight: 500;
    color: #2d3748;
    display: flex;
    align-items: center;
    font-size: 14px;
}

.counselInput-content {
    flex: 1;
    padding: 15px 20px;
    display: flex;
    gap: 10px;
}

.counselInput-date {
    padding: 8px 12px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-size: 14px;
    color: #2d3748;
}

.counselInput-status {
    padding: 8px 12px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-size: 14px;
    color: #2d3748;
    background: #fff;
}

.counselInput-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    line-height: 1.6;
}

.counselInput-textarea::placeholder {
    color: #a0aec0;
}

.counselInput-actions {
    padding-top: 10px;
}

.counselInput-btn {
    padding: 10px 40px;
    background: #fff;
    border: 1px solid var(--primary);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary);
    cursor: pointer;
}

.counselInput-btn:hover {
    background: var(--primary);
    color: #fff;
}

.counselInput-row:last-child {
    margin-bottom: 0;
}
/* 상담 내용 / 상담 후기 페이지 끝 -------------------------------*/








.dbListArea table tbody td.link,
.listContain table tbody td.link{
    background-color: #e4e9ff;
}
.dbListArea table tbody td> a,
.listContain table tbody td> a{
    display: block;
    width: 100%; height: 100%;
    color: #333;
}
.dbListArea table tbody td> a:hover,
.listContain table tbody td> a:hover{
    text-decoration: underline;
}
.dbListArea table tbody td button.simulationBtn,
.dbListArea table tbody td button.saveSimulation{
    cursor: pointer;
    margin-top: 8px;
    padding: 5px 10px;
    border: 1px solid #065F46;
    border-radius: 5px;
    background-color: transparent;
    color: #065F46;
}
.dbListArea.month td.total {
    color: var(--primary-dark);
    font-weight: 700;
}

.dbListArea table tfoot td{
    border-top: 2px solid #065F46;
    text-align: center;
    background-color: #eee;
    padding: 20px 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #065F46;
}

.listContain .dbListTitle{
    font-size: 1.2rem;
    background-color: rgb(3, 31, 93,.1);
    padding: 1rem;
    border-radius: 8px;
    color: #065F46;
}
.listContain table{
    margin: 50px 0 100px;
}

.dbListArea h3.totalStyle{
    border-bottom: 1px solid #666;
    color: #666;
    display: inline-block;
    font-size: 16px;
    letter-spacing: 1px;
    padding-bottom: 5px;
}

/* db리스트 페이지 끝 ********/


#myHome{
    min-height: 100vh;
    width: 100%;
    background-color: #f1f4f6;
}
#myHome .myHomeArea,
#myHome .myListArea,
#myHome .reviewContain{
    width: 100%;
    margin: 10px auto;
    display: flex;
}
#myHome .home-inner{
    width: calc(100vw - 300px - 2%);
    margin-top: 10px;
    margin-left: calc(300px + 2%);
    margin-right: 2%;
}

#myHome.unUser .home-inner{
    width: calc(100vw - 600px - 4%)
}
#myHome.unUser .unUserSideMenu{
    right: 0; left: unset;
}
#myHome .search,
#myHome .test,
#myHome .filter{
    background-color: #fff;
    width: 100%;
    margin-left: auto;
}


#myHome .profile a.link{
    font-weight: bold;
    position: relative;
    z-index: 1;
    padding-right: 30px;
    display: inline-block;
    color: #333;
}
#myHome .profile a.link:hover{
    text-decoration: underline;
}
#myHome .profile a.link:after{
    content: '>';
    z-index: 1;
    display: block;
    position: absolute;
    right: 10px;
    top: 50%; transform: translateY(-50%);
    color: #333;
}
#myHome .contentArea{
    width: 100%;
    margin-left: auto;
}
#myHome .contentArea .btnBox{
    display: flex;
}
#myHome .contentArea >div{
    padding: 1rem;
    margin: 20px 0;
    background-color: #fff;
}
#myHome .contentArea .user ul,
#myHome .contentArea .manager ul{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

#myHome .contentArea .user ul li,
#myHome .contentArea .manager ul li{
    min-width: 160px;
    padding-right: 10px;
}


#myHome .contentArea .selectShare{
    width: 100%;
    display: block;
    outline: none;
    margin-bottom: 10px;
    background-color: rgba(5, 150, 105, 0.2); ;
    border: 1px solid transparent;
    padding: 5px;
    font-size: 14px;
    border-radius: 10px;
    color: #333;
}
#myHome .contentArea .user ul li a,
#myHome .contentArea .manager ul li a{
    color: #000;
    font-weight: 600;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}
#myHome .contentArea .manager ul li ul li:first-of-type{
    /*margin-right: 30px;*/
}
#myHome .contentArea .user strong,
#myHome .contentArea .manager strong{
    font-weight: 800;
    font-size: 18px;
    display: inline-block;
    margin-right: 2px;
}
#myHome .contentArea .user .imgWrap,
#myHome .contentArea .manager .imgWrap{
    width: 45px; height: 45px;
    padding: 10px;
    background-color: #f1f4f6;
    border-radius: 50%;
}
#myHome .contentArea .user .imgWrap img,
#myHome .contentArea .manager .imgWrap img{
    width: 100%; height: 100%;
}
#myHome .account-inner strong,
#myHome .setting-inner strong{
    font-size: 16px;
    margin-bottom: 50px;
    font-weight: 300;
    display: block;
}
#myHome .account-inner li{
    margin-bottom: 35px;
    position: relative;
}
#myHome .account-inner li a{
    display: block;
    position: relative;
    font-size: 18px;
    color: #333;
    font-weight: 500;
    cursor: pointer;
}

#myHome .account-inner li:after{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    content: '>';
    display: block;
    color: #b7b7b7;
    font-size: 20px;
}


#myHome .account-inner form,
#myHome .setting-inner form {
    overflow-y: auto;
}
.editAccount .inputBox{
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 70%;
}

.editAccount button.submit{
    margin: 50px 0;
    width: 70%;
}
.myHomeArea.index .payStatus ul li{
    display: flex;
    width: 90%;
    max-width: 400px;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
}
.myHomeArea.index .payStatus ul li div {

}
.myHomeArea.index .payStatus ul li div.user {
    font-weight: 400;
    font-size: .95rem;
    line-height: 1.5;
    padding-right: 20px;
    position: relative;
}

.myHomeArea.index .payStatus ul li div.user:after{
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    right: 0;
    background: #ddd;
    width: 1px;
    height: 20px;
}

.myHomeArea.index .payStatus ul li div.user+div {
    padding-left: 20px;
    line-height: 1.5;
}
.myHomeArea.index .payStatus ul li div span.point {
    font-weight: 600;
    display: inline-block;
    margin-left: 5px;
}
.myHomeArea.index .contentArea {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(1000px, 1fr));
    gap: 30px;
}

.myHomeArea.index .list-inn {
    border-radius: 10px;
}
.myHomeArea.index .table-top{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
    margin-bottom: 20px;
    align-items: center;
}
.myHomeArea.index .table-top strong {
    font-weight: 600;
    font-size: .95rem;
}
.myHomeArea.index .table-top a{
    font-size: .9rem;
    font-weight: 400;
    color: #4d5f5a;
}

.myHomeArea.index td.btn button{
    border: 1px solid #0a3622;
    color: #0a3622;
    background: #fff;
    border-radius: 5px;
}

    /*myHome 끝**************/

/*myHome  포인트 시작*************/
.myPointList .titleOl {
    display: grid;
    margin: 50px 0 20px;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
}
.myPointList .titleOl li {
    width: 100%;
    border-radius: 20px;
    font-weight: 500;
    background-color: rgba(255,255,255,.86);
    text-align: center;
    padding: 10px 5px;
    min-height: 50px;
    display: flex;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    color: #5d688a;
}
.myListArea.myPointList{
    text-align: left;
}
.myListArea.myPointList b{
    font-weight: 300;
    display: block;
    margin-top: 15px;
}
.myPointList .titleOl li:hover,
.myPointList .titleOl li:active{
    background-color: rgba(67, 82, 78, 0.2);
}
.myPointList .titleOl li.on{
    background-color: rgba(67, 82, 78, 0.7);
    color: #fff;
    font-weight: 700;
}
.myListArea.myPointList ul {
    display: block;
}
.myListArea.myPointList ul li{
    display: none;
}
.myListArea.myPointList ul li.on{
    display: block;
}
.myListArea.myPointList table{
    width: 100%;
}
.myListArea.myPointList table td,
.myListArea.myPointList table th {
    text-align: center;
    vertical-align: middle;
    line-height: 1.5;
}
#myHome .contentArea.pointList .pointArea{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    width: 50%;
}
#myHome .contentArea.pointList .listArea ul:not(#page) li .textArea{
    width: 50%;
    display: block;
}
#myHome .contentArea.pointList .pointArea .point{
    font-weight: 700;
    font-size: 1.4rem;
}
#myHome .contentArea.pointList .pointArea .point.use{
    color: #e53e3e;
}
#myHome .contentArea.pointList .pointArea .point.add{
    color: #3182f6;
}

#myHome .contentArea.pointList .pointArea .total{
    color: #666;
    font-size: .95rem;
    font-weight: 400;
}
/*myHome 포인트 끝**************/



/*myHome 구매리스트 시작**************/
#myHome .myListArea .search{
    padding: 2rem 1rem;
    border-radius: 10px 10px 0 0;
    margin-bottom: 20px;
}
#myHome .myListArea .search strong,
#myHome .cart strong,
#myHome .payBox strong,
#myHome .order>strong, #myHome .payInfo>strong,
#myHome .test strong{
    display: block;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 700;
}
#myHome .myListArea .search input{
    padding: 1rem;
    border: 1px solid transparent;
    width: 90%;
    background-color: #e8ecef;
    border-radius: 10px;
    color: #949494;
    height: 50px;
}
#myHome .myListArea .search button{
    width: 5%;
    height: 50px;
    background-color: transparent;
    border: transparent;
    text-indent: -9999px;
    background-image: url("../images/icon/myPage-icon3.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
}
#myHome .myListArea ul:not(#page){
    display: flex;
    flex-direction: column;
}
#myHome .myListArea .listArea ul:not(#page,.info) li{
    background-color: #fff;
    padding: 2rem 1rem;
    border-bottom: 1px solid #eee;
}
#myHome .myListArea .listArea ul:not(#page) li:last-of-type{
    border-radius: 0 0 10px 10px;
    border-bottom: 1px solid transparent;
}
#myHome .myListArea .listArea ul:not(#page) li .textArea,
#myHome .myListArea .listArea ol li .textArea{
    display: flex;
    width: 100%;
    gap: 1rem;
}
#myHome .myListArea .listArea ul li .textArea .imgWrap,
#myHome .order .orderCont .cont .imgWrap{
    width: 20%;
    height: 100%;
    max-width: 110px;
}
#myHome .myListArea .listArea ul li .textArea .textWrap,
#myHome .myListArea .listArea ol li .textArea .textWrap{
    display: flex;
    width: calc(100% - 20% - 1rem);
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}

#myHome .myListArea .listArea ul li .textArea .textWrap span{
    color: #949494;
    font-size: 12px;
    font-weight: 500;
}
#myHome .myListArea .listArea ul li .textArea .textWrap strong{
    font-size: 20px;
    line-height: 1.4;
    font-weight: 600;
}
#myHome .myListArea .listArea ul li .textArea .textWrap b{
    font-size: 24px;
    font-weight: 800;
}
#myHome .myListArea .listArea ul li .textArea .textWrap .aTag,
#myHome .reviewArea .textWrap .aTag{
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin: 10px 0;
}
#myHome .myListArea .listArea ul li .textArea .textWrap .aTag a,
#myHome .reviewArea .textWrap .aTag a{
    display: inline-block;
    font-weight: 500;
    font-size: 14px;
}
#myHome .myListArea .listArea ul li .textArea .textWrap .aTag a:hover,
#myHome .reviewArea .textWrap .aTag a:hover{
    font-weight: 700;
}
#myHome .myListArea .listArea ul li .textArea .textWrap .aTag a.moreDetail{
    color: #065F46;
}
#myHome .myListArea .listArea ul li .textArea .textWrap .aTag a#call,
#myHome .reviewArea .textWrap .aTag a#call{
    color: #666;
}

#myHome .myListArea .listArea ul li .textArea .delBtnWrap,
#myHome .written-review .btn{
    width: 20%; display: flex; justify-content: flex-end; align-items: flex-start;
}
#myHome .myListArea .listArea ul li .textArea .delBtnWrap button{
    width: 50px; height: 50px;
    background-color: transparent;
    border: 1px solid transparent;
}
#myHome .myListArea .listArea ul li .textArea .delBtnWrap button img{
    width: 100%; height: 100%; object-fit: contain;
}
#myHome .myListArea .listArea ul li .textArea .delBtnWrap button:hover img{
    background-image: url("../images/icon/ico-delColor.png"); background-size: 100%; background-position: center; background-repeat: no-repeat;
}
#myHome .myListArea .listArea ul li .btnArea{
    margin: 20px 0 0;
    width: 100%;
    display: flex;
    gap: 10px;
}
#myHome .myListArea .listArea ul li .btnArea button {
    flex: 1;
    padding: 8px;
}
#myHome .myListArea .listArea ul li .btnArea .cartBtn{
    border: 1px solid #949494;
    width: 45%;
    background-color: #fff;
    color: #949494;
}
#myHome .myListArea .listArea ul li .btnArea .cartBtn:hover,
#myHome .order .btnBox button:hover{
    background-color: #eee;
}
#myHome .myListArea .listArea ul li .btnArea .buy{
    width: 50%;
}
/*mmyHome 구매리스트 끝**************/



/*mmyHome 찜리스트 시작**************/
#myHome .favList .fav-top{
    padding-bottom: 20px;
}
#myHome .favList li a{
    display: flex;
    cursor: pointer;
    width: 100%;
    color: #333;
    align-items: center;
}

/*mmyHome 찜리스트 끝**************/

/* 리뷰 시작**************/

#myHome .reviewArea li,
#myHome .written-review .review-top,
#myHome .reviewShow .review-top,
#myHome .favList .fav-top{
    display: flex;
    gap: 25px;
    align-items: center;
}

#myHome .reviewArea .imgBox,
#myHome .written-review .imgBox,
#myHome .reviewShow .imgBox,
#myHome .favList .imgBox{
    width: 100px;
    height: 100px;
}
#myHome .reviewArea .imgBox img,
#myHome .written-review  img,
#myHome .reviewShow img,
#myHome .favList img{
    width: 100%; height: 100%; object-fit: contain;
}

#myHome .reviewArea .rightBox,
#myHome .written-review .rightBox,
#myHome .reviewShow .rightBox,
#myHome .favList .rightBox{
    width: 80%;
}
#myHome .reviewArea h3 ,
#myHome .written-review h3,
#myHome .reviewShow  h3,
#myHome .favList h3{
    font-size: 1.2rem !important;
}
#myHome .reviewArea .textWrap,
#myHome .reviewShow .textWrap,
#myHome .favList .textWrap{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#myHome .reviewArea .textWrap span,
#myHome .written-review .review-top span,
#myHome .reviewShow .review-top span,
#myHome .favList .fav-top span{
    color: #666;
    font-size: .9rem;
}
#myHome .reviewArea .textWrap span strong,
#myHome .favList .fav-top span strong{
    font-weight: 700;
    display: inline-block;
    margin-left: 5px;
}
#myHome .reviewArea .textWrap span strong b,
#myHome .favList .fav-top span strong b{
    color: #065F46;
    display: inline-block;
    margin-left: 5px;
}
#myHome .reviewArea .btn{
    width:180px;
    height: 30px;
}
#myHome .reviewArea .btn button,
#myHome .favList .btn button{
    font-size: .9rem;
}
#myHome .written-review .review-top,
#myHome .reviewShow .review-top,
#myHome .favList .fav-top{
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}
#myHome .written-review .review-top button,
#myHome .reviewShow .review-top button,
#myHome .favList .fav-top button{
    width: 50px;
    height: 50px;
    background-color: transparent;
    border: unset;

}
#myHome .written-review .review-top button img,
#myHome .reviewShow .review-top button img,
#myHome .favList .fav-top button img{
    opacity: .5;
}
#myHome .written-review .textBox .star,
#myHome .reviewShow .textBox .star{
    display: flex;
    gap: 5px;
    align-items: center;
    margin-bottom: 15px;
}
#myHome .written-review .textBox .top{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#myHome .written-review .textBox .star .starCount,
#myHome .reviewShow .textBox .star .starCount{
    margin-left: 5px;
    font-weight: 800;
    font-size: .8rem;
    display: flex;
    align-items: center; justify-content: center;
    line-height: 10px;
}

#myHome .written-review #editBtn{
    border: 1px solid #b7b7b7;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px;
    font-size: .7rem;
    font-weight: 500;
    color: #666;
}
#myHome .written-review #editBtn:hover{
    background-color: #eee;
}
#myHome .written-review .textBox .starImg,
#myHome .reviewShow .textBox .starImg,
.myListArea .starArea .starImg{
    width: 14px; height: 14px;
}

#myHome .written-review textarea,
#myHome .reviewShow textarea{
    text-align: left;
    font-size: .9rem;
    outline: none;
    line-height: 1.8rem;
    border: unset;
    width: 100%;
    height: auto;
    min-height: 100px;
}
#myHome .reviewShow .text-top{
    display: flex;
    gap: 15px;
}
#myHome .reviewShow .text-top .user{
    font-weight: 700;
}
/* 리뷰 끝**************/

/*리뷰 작성시작 *****************************************/
#myHome .reviewContain .test strong{margin-bottom: unset!important;}
#myHome .reviewContain .contentArea{margin-top: 20px}
#myHome .reviewContain .top{
    margin-bottom: 20px;
    padding: 2rem 1rem;
    background-color: #fff;
}
#myHome .reviewContain .productNam{
    font-size: 1.2rem;
    margin-bottom: 15px;
    font-weight: 700;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}
#myHome .reviewContain .star{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#myHome .reviewContain .starWrap{
    margin-bottom: 20px;
    display: flex; gap: 10px;
    align-items: center;
    justify-content: center;
}
#myHome .reviewContain .starWrap button{
    width: 40px; height: 40px;
    position: relative;
    background-color: transparent;
    text-indent: -9999px;
    border: 1px solid transparent;
}
#myHome .reviewContain .starWrap button:before{
    content: '';
    width: 100%; height: 100%;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    background-image: url("../images/icon/ico-starVisibility.png");
    background-size: 100%; background-position: center; background-repeat: no-repeat;
}
#myHome .reviewContain .starWrap button.active{
    transition: .3s ease-in-out;
}
#myHome .reviewContain .starWrap button:hover:before,
#myHome .reviewContain .starWrap button.active:before{
    background-image: url("../images/icon/ico-star.png");
}
#myHome .reviewContain .comment{
    font-size: .8rem;
    font-weight: 400;
    color: #0089f7;
}
#myHome .reviewContain .comment b{
    color: #0089f7;
}
#myHome .reviewContain .tit{
    text-align: center;
    display: block;
    color: #666;
    font-weight: 500;
    margin-bottom: 15px;
    font-size: 1rem;
}
#myHome .reviewContain .textBox{
    width: 100%;
    background-color: #fff;
    padding: 2rem 1rem;
    border-radius: 0 0 10px 10px;
}
#myHome .reviewContain .textBox textarea{
    height: auto;
    min-height: 30px;
    width: 100%;
    padding: 10px;
    font-weight: 400;
    outline: #b7b7b7;
    border: 1px solid transparent;
    font-size: .9rem;
    max-height: 300px;
    color: #333;
    background-color: rgba(0,23,51,0.02);
    line-height: 1.8rem;
    overflow: hidden;
}
#myHome .reviewContain .textBox #textLengthCheck{
    display: block;
    font-size: .7rem;
    font-weight: 400;
    text-align: right;
    margin-top: 5px;
    color: #666;
}
#myHome .reviewContain .textBox #textLengthCheck em{
    color: #065F46;
    font-style: normal;
    font-weight: 800;
}
#myHome .reviewContain button.submit{
    display: block;
    margin: 20px auto;
}
/*리뷰 작성 끝 *****************************************/


/*mmyHome 구매 상세 시작**************/

#myHome .myListArea .order,
#myHome .myListArea .payInfo{
    margin-bottom: 50px;
}
#myHome .order .orderCont,#myHome .payInfo .payCont{
    background-color: #fff;
    border-radius: 10px;
    padding: 2rem 1rem;
}
#myHome .order .orderCont .contTop{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #f1f4f6;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
#myHome .order .orderCont .contTop h2{
    width: 90px;
    height: auto;
}
#myHome .order .orderCont .contTop button{
    border: 1px solid #b7b7b7;
    color: #666;
    background-color: transparent;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 600;
}
#myHome .order .orderCont .cont{
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
}
#myHome .order .orderCont .cont .textWrap{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#myHome .order .orderCont .cont span{
    color: #666;
}
#myHome .order .orderCont .cont strong{
    font-size: 18px;
    font-weight: 600;
}
#myHome .order .orderCont .cont b{
    color: #065F46;
    font-weight: 700;
    font-size: 24px;
}
#myHome .order .btnBox{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
#myHome .order .btnBox button{
    width: 49%;
    border: 1px solid #b7b7b7;
    color: #666;
    font-weight: 700;
    letter-spacing: .5px;
    background-color: #fff;
}
#myHome .order .btnBox button:last-of-type{
    border-color: #065F46;
    color: #065F46;
}

#myHome .payInfo .payCont>dl:not(.money){
    display: flex;
    flex-wrap: wrap;
    width: 65%;
    margin: 0 auto;
}
#myHome .payInfo dl .point{
    color: #065F46;
    font-weight: 800;
    font-size: 20px;
    width: 50%;
}
#myHome .payInfo dl dd.point{
    text-align: right;
}
#myHome .payInfo .etc{
    margin: 25px 0 0 20px;
    border-left: 4px solid #eee;
    padding-left: 10px;
    width: 100%;
}
#myHome .payInfo .etc dl{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#myHome .payInfo .etc dl div{
    display: flex;
    color: #666;
    justify-content: space-between;
}
#myHome .payInfo .money{
    width: 65%;
    margin: 20px auto 0;
    border-top: 2px solid #f1f4f6;
    padding-top: 20px;
}
#myHome .payInfo .money div{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
#myHome .payInfo .money div:not(:last-of-type){
    margin-bottom: 15px;
}
#myHome .payInfo .money div dt{
    font-weight: 700;
    color: #333;
}
/*mmyHome 구매 상세  끝**************/

/*mmyHome 결제하기 페이지 시작**************/
#myHome .myListArea .cautionBox li{
    font-size: 1rem;
    line-height: 2;
    font-weight: 500;
}
#myHome .myListArea .cautionBox li:first-of-type{
    font-weight: 700;
    color: var(--primary-light);
    font-size: 1.15rem;
}

#myHome .payBox label{
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}
#myHome .payBox h2.chargeHead {
    display: flex;
    gap: 10px;
    align-items: center;
}
#myHome .payBox .baseLineGrid {
    border: 1px solid var(--primary);
    background-color: #fff;
    padding: 5px 10px;
    color: var(--primary);
    font-weight: 600;
    font-size: .95rem;
    border-radius: 5px;
}
#myHome .payBox .baseLineGrid:hover{
    opacity: .8;
}
#myHome .payBox #chargeMoney {
    max-width: 200px;
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
    background-color: #f9fafb;
    color: #1a1a1a;
}
#myHome .payBox .submitPay {
    max-width: 120px;
    padding: .8rem 1.5rem;
    border: 1px solid transparent;
    background-color: #f1f1f1;
    font-weight: 600;
    color: #666;
    border-radius: 5px;
    margin: 30px 0;
    font-size: .95rem;
}


.baseLinePopup {
    display: none;
    position: fixed;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 90%; max-width: 600px;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    z-index: 1005;
}
.baseLinePopup .popup-inner {
    padding: 20px ;
    overflow-y: auto;
    height: 40vh;
}
.baseLinePopup h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    text-align: center;
}
.baseLinePopup table{
    table-layout: fixed;
    text-align: center;
    width: 100%;
}
.baseLinePopup th,
.baseLinePopup td {
    font-size: .95rem;
    padding: 15px 5px;
    font-weight: 500;
}
.baseLinePopup th{
    font-weight: 700;
    border-bottom: 1px solid #666;
}
.baseLinePopup td{
    border-bottom: 1px solid #eee;
}
.baseLinePopup td:not(:last-of-type) {
    border-right: 1px solid #eee;
}
.baseLinePopup tr:last-of-type td {
    border-bottom: 1px solid #666;
}
.baseLinePopup p.sup{
    font-size: .9rem;
    font-weight: 700;
    color: #666;
    margin: 20px 0;
}

    /*상담 완료 보고 시작 -------------------------*/
.counselChk-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.counselChk-overlay.on{
    display: flex;
}

/* 팝업 컨테이너 */
.counselChk-popup {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 500px;
    animation: counselChk-fadeIn 0.3s ease;
}

@keyframes counselChk-fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.counselChk-popup .counselChk-inner {
    padding: 30px;
}

.counselChk-popup .counselChk-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0 0 24px 0;
    padding-bottom: 16px;
    border-bottom: 2px solid #006847;
}

.counselChk-popup .counselChk-box {
    margin-bottom: 24px;
}

.counselChk-popup .counselChk-item {
    margin-bottom: 20px;
}

.counselChk-popup .counselChk-item:last-child {
    margin-bottom: 0;
}

.counselChk-popup .counselChk-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

.counselChk-popup .counselChk-input,
.counselChk-popup .counselChk-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.counselChk-popup .counselChk-input:focus,
.counselChk-popup .counselChk-textarea:focus {
    outline: none;
    border-color: #006847;
}

.counselChk-popup .counselChk-input[type="date"] {
    font-family: inherit;
}

.counselChk-popup .counselChk-textarea {
    min-height: 140px;
    resize: none;
    font-family: inherit;
    line-height: 1.5;
}

/* 버튼 영역 */
.counselChk-btnWrap {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 24px;
}

/* 버튼 공통 */
.counselChk-btnCancel,
.counselChk-btnSave {
    padding: 10px 24px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

/* 취소 버튼 */
.counselChk-btnCancel {
    background-color: #f5f5f5;
    color: #666;
}

.counselChk-btnCancel:hover {
    background-color: #e0e0e0;
}

/* 저장 버튼 */
.counselChk-btnSave {
    background-color: #006847;
    color: #ffffff;
}

.counselChk-btnSave:hover {
    background-color: #005239;
}

/* 반응형 */
@media (max-width: 768px) {
    .counselChk-popup {
        width: 95%;
        max-width: none;
    }

    .counselChk-inner {
        padding: 20px;
    }

    .counselChk-title {
        font-size: 18px;
    }
}

    /*예전 PDF 시작----------------*/
#myHome .payBox ul li:hover,
#myHome .payBox ol li:hover{
    background-color: #eee !important;
    cursor: pointer;
}
#myHome .payBox ul li em,
#myHome .payBox ol li em{
    font-size: 14px ;
    color: #134E4A ;
    padding: 5px;
    background-color: rgba(5, 150, 105, 0.2); ;
    border-radius: 5px;
    font-style: normal;
    text-align: center;
    width: 28%;
    min-width: 100px;
    margin-bottom: 10px;
}
#myHome .myListArea .listArea.payBox ul li .textArea .textWrap b,
#myHome .myListArea .listArea.payBox ol li .textArea .textWrap b{
    font-size: 26px;
    color: #333;
}
#myHome .myListArea .listArea.payBox h4{
    margin: 50px 0 20px;
}
#myHome .myListArea .listArea.payBox ol li{
    background-color: #fff;
    padding: 2rem 1rem;
    border-bottom: 1px solid #eee;

}
#myHome .myListArea .listArea.payBox ol li:last-of-type{
    border-radius: 0 0 10px 10px;
    border-bottom: 1px solid transparent;
}
#myHome .myListArea .listArea.payBox ol li span{
    font-size: 12px;
    color: #666;
    animation: opa 1.5s ease-in-out infinite;
}
@keyframes opa {
    0%{opacity: 0;}
    100%{opacity: 1;}
}
/*---- 결제확인 페이지-----------*/
#myHome .myListArea .listArea.payChk ul:not(.war) li{
    padding: unset;
    font-size: 18px;
    margin-bottom: 50px;
}
#myHome .listArea.payChk li span,
#myHome .listArea.payChk li.pay1{
    display: inline-block;
    margin-right: 10px;
    font-weight: 600;
}

#myHome .listArea.payChk li .copy{
    font-size: 14px;
    font-weight: 400;
    display: inline-block;
    margin-left: 10px;
    color: #134E4A;
    text-decoration: underline;
}
#myHome .listArea.payChk select{
    padding: .5rem;
    background-color: transparent;
    border: 2px solid #eee;
    border-radius: 10px;
}

#myHome .listArea.payChk li #bank_name{
    width: 50%;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 16px;
    background-color: #eee;
    color: #333;
    padding: 1rem;
    transition: all .3s ease-in-out;
}

#myHome .listArea.payChk li #bank_name:invalid{
    background-color: transparent;
    border-radius: 0;
    border-bottom: 1px solid #F15F79;
}

#myHome .payChk .warning-area,
#expertInput .warning-area,
#consultPopup .warning-area,
#consultContentPopup .warning-area{
    background-color: rgba(5, 150, 105, 0.2); ;
    border-radius: 10px;
    padding: 1rem;
    margin: 30px 0 50px;
}
#myHome .payChk .warning-area .war li,
#expertInput .warning-area .war li,
#expertInput .warning-area .war li{
    background-color: transparent !important;
    position: relative;
}
#myHome .payChk .warning-area .war li:before{
    display: block;
    content: '❗️';
    position: absolute;
    top: 50%; left: -4px; transform: translateY(-50%);
}
#myHome .payChk .warning-area input#ma-payCaution,#expertInput .warning-area input#payCaution{display: none;}
#myHome .payChk .warning-area input#ma-payCaution + span,
#expertInput .warning-area input#payCaution +span,
#consultContentPopup .warning-area input#consultCaution + span{
    font-weight: 500; position: relative; padding-left: 30px;
}
#myHome .payChk .warning-area input#ma-payCaution + span:before,
#expertInput .warning-area input#payCaution +span:before,
#consultContentPopup .warning-area input#consultCaution +span:before{
    content: '';
    display: block;
    background-color: #fff;
    width: 20px; height: 20px;
    position: absolute;
    top: 50%;
    left: -1px;
    border-radius: 2px;
    transform: translateY(-50%);
    border: 1px solid transparent;
}

#myHome .payChk .warning-area input#ma-payCaution:checked + span,
#expertInput .warning-area input#payCaution:checked +span ,
#consultContentPopup .warning-area input#consultCaution:checked +span{
    font-weight: 800;
    color: #065F46;
}
#myHome .payChk .warning-area input#ma-payCaution:checked + span:before,
#expertInput .warning-area input#payCaution:checked +span:before,
#consultContentPopup .warning-area input#consultCaution:checked + span:before{
    content: '✔';
}
#myHome .ma-payBtn{
    transition: all .3s ease-in-out;
    opacity: .5;
    cursor: not-allowed;
    background-color: #666;
    border: 1px solid transparent;
    color: #fff;
    /*pointer-events: none;*/
}
#myHome .ma-payBtn.active{
    opacity: 1;
    background-color: #065F46;
    cursor: pointer;
    pointer-events: auto;
}


/*mmyHome 결제하기 페이지 끝 **************/

/*mmyHome 장바구니 시작**************/
#myHome .cart,
#myHome .pay{
    border-radius: 10px 10px 0 0;
    padding: 1rem;
    background-color: #fff;
    margin-bottom: 20px;
}
#myHome .topB:after{
    display: block; content: ''; clear: both;
}
#myHome .topB{
    display: flex;
    align-items: center;
}
#myHome .topB input[type=checkbox] + label{  transition: all .3s ease-in-out; margin-right: 20px; padding-left: 30px; position: relative; color: #666;}

#myHome .topB input[type=checkbox] + label:after {
    content: '';
    display: block;
    border: 1px solid #666;
    background-color: #fff;
    width: 20px; height: 20px;
    position: absolute; top: 50%; left: 0; transform: translateY(-50%);
}
#myHome .topB input[type=checkbox]:checked + label:after{
    content: '✔';
    background-color: #eee;
}
#myHome .topB span{
    color: #666;
}
#myHome .topB span b{
    color: #065F46;
    font-weight: 700;
}
#myHome .topB button{
    padding: 10px;
    background-color: #e8ecef;
    color: #666;
    border: 1px solid #b7b7b7;
    font-weight: 400;
    font-size: 14px;
}
#myHome .topB button#chkDel{ display: none;}
#myHome .topB button#cartEdit{
    float: right;
    margin-left: auto;
}
#myHome .contentArea.cart2 ul li{
    display: flex;
    cursor: pointer;
    align-items: flex-start;
    padding: 2rem 1rem;
}
#myHome .contentArea.cart2 ul li input[type=checkbox]{display: none;}
#myHome .contentArea.cart2 ul li input[type=checkbox] + label{ display: none; position: relative; color: transparent;margin-right: 10px;}
#myHome .contentArea.cart2 ul li input[type=checkbox] + label:after{
    background-color: #fff;
    border: 1px solid #666;
    width: 18px; height: 18px;
    content: ''; display: block;
    position: absolute; top:0; left: 0;
    font-size: 16px;
}
#myHome .contentArea.cart2 ul li input[type=checkbox]:checked + label:after{
    content: '✔';
    color: #fff;
    background-color: #b7b7b7;
}

#myHome .contentArea.cart2 ul li a{
    display: block;
    width: 100%;
    color: #333;
}

#myHome .contentArea .listArea ul li .listDelBtn{
    width: 55px; height: 45px;
    border: 1px solid transparent;
    background-color: transparent;
}
#myHome .contentArea .listArea ul li .listDelBtn img{
    width: 100%; height: 100%;
    opacity: .4;
}
#myHome .contentArea .listArea ul li .textWrap strong{
    margin-bottom: unset;
}
#myHome .contentArea .listArea ul li .textArea strong{
    font-size: 18px;
}
#myHome .contentArea .listArea ul li .textArea b{
    font-size: 20px;
}
/*mmyHome 장바구니 끝**************/

/*mmyHome 검사리스트 시작**************/
#myHome .test{
    margin-bottom: 2px;
    padding: 2rem 1rem;
}
#myHome .filter{
    display: none;
    border-top: 1px;
    border-radius: 0 !important;
    margin-bottom: 10px;
}
#myHome .filter ul{
    display: none ;
    padding: 10px 10px 0;
    overflow-x: auto;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 10px;
}
#myHome .filter li {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 70px;
    line-height: 2;
    font-size: .85rem;
    cursor: pointer;
    font-weight: 600;
    text-align: center;
    border-bottom: 2px solid transparent;
    letter-spacing: 1px;
}
#myHome .unUser .only-mo{
    display: none!important;
}
#myHome .filter li.active{
    font-weight: 800;
    color: #065F46;
    border-bottom: 2px solid #065F46;
}
#myHome .unUserSideMenu {
    width: 300px;
    position: fixed;
    height: 100%;
    top: 70px; left: 0;
    border-top: 1px solid #eee;
    background-color: #f8fff9;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
}
#myHome .unUserSideMenu .wrap{
    padding: 1rem;
}
#myHome .unUserSideMenu .wrap strong{
    font-size: 1.1rem; font-weight: 700;
    margin-bottom: 20px; display: block;
    padding-bottom: 15px;
    border-bottom: 1px solid #f1f4f6;
}
#myHome .unUserSideMenu ul {
    display: flex; flex-direction: column; gap: 15px;
}
#myHome .unUserSideMenu li{
    cursor: pointer;
    padding: .5rem; font-size: 1rem; font-weight: 600;
    line-height: 1.2; border-radius: 10px;
}
#myHome .unUserSideMenu li:hover{
    background-color: rgba(241, 244, 246, 0.85);
}
#myHome .unUserSideMenu li.active{
    background-color: rgba(5, 150, 105, 0.1);
    color: #006934; font-weight: 800;
}

#myHome .listArea h3{
    display: block;
    margin-bottom: 10px;
    width: 100%;
    font-size: 16px;
    font-weight: 800;
}
#myHome .listArea h3 .consult-cuz{
    font-size: 14px;
    color: #666;
    font-weight: 500;
    display: inline-block;
    margin-left: 10px;

}

/*mmyHome 검사리스트  끝**************/

/*mmyHome pdfList  시작**************/
#myHome .listArea .pdfList h3 span{
    font-weight: 500;
    font-size: 14px;
}
#myHome .listArea .pdfList >div:first-of-type{
    margin-bottom: 15px;
}
#myHome .myListArea .listArea  ul li.pdfList .textArea .textWrap strong{
    font-weight: 800;
}

/*mmyHome pdfList  끝**************/



/*링크 복사 팝업 0000000000000000000000000000000*/
#linkCopyPopup {
    display: none;
    border-radius: 10px;
    position: fixed;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 80%; max-width: 500px;
    z-index: 1500;
    height: 30vh; overflow-y: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    background-color: #fff;
}
#linkCopyPopup h2 {
    font-size: 1.5rem;
    margin: 50px auto 30px;
    text-align: center;
}
#linkCopyPopup .popup-inner {
    padding: 20px 15px;
    justify-content: center;
    display: flex;
    gap: 20px;
    align-items: center;
}
#linkCopyPopup select {
    width: 50%;
    display: block;
    outline: none;
    background-color: rgba(5, 150, 105, 0.2); ;
    border: 1px solid transparent;
    padding: 5px;
    font-size: 14px;
    border-radius: 10px;
    color: #333;
}
#linkCopyPopup a {
    display: flex;
    gap: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 5px 10px;
    align-items: center;
    font-size: .95rem;
    cursor: pointer;
    font-weight: 600;
    color: #666;
}
#linkCopyPopup a:hover,
#linkCopyPopup a:active{
    font-weight: 700;
    background-color: #f1f1f1;
}

/* 링크 복사 팝업 끝 00000000000000000000000000000000*/



/*마이페이지 결제 시작**************/
#setting strong.total,
.myListArea.myPointList b{
    color: #065F46;
    line-height: 1.5;
    font-size: 1rem !important;
}
#setting strong.total span,
.myListArea.myPointList b span{
    font-weight: 700;
}
#setting table,
.myPointList{
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
}
#setting table th,
.myPointList table th{
    padding: 20px 2px;
    border-top: 1px solid #065F46;
    border-bottom: 1px solid #065F46;
    color: #065F46;
}
#setting table td,
.myPointList table td{
    padding: 15px 5px;
}
#setting table tr:not(:last-of-type) td,
.myPointList table tr:not(:last-of-type) td{
    border-bottom: 1px solid #eee;
}
#setting table tr:last-of-type td ,
.myPointList table tr:last-of-type td {
    border-bottom: 2px solid #b7b7b7;
}
#setting button{
    font-size: 14px;
    cursor: pointer;
    padding: 5px !important;
}
#setting input[type="checkbox"]{
    display: none;
}
#setting input[type="checkbox"] + label{
    position: relative;
    display: block;
}
#setting input[type="checkbox"] + label:after{
    border: 1px solid #666;
    background-color: #fff;
    width: 20px; height: 20px;
    position: absolute;
    top: -14px;
    left: 17px;
    content: '';
    display: block;
}
#setting input[type="checkbox"]:checked + label:after {
    background-color: #065F46;
    border-color: transparent;
    content: '✔';
    color: #fff;
}
/*마이페이지 결제 끝**************/


/*사용자 결제 리스트 페이지 시작**************/
.userPayList {
    min-height: 80vh;
}
.userPayList form{
    position: relative;
    height: 80%;
    overflow-y: unset;
}
.userPayList table{
    position: relative;
    display: block;
}

.userPayList table thead {
    display: table;
    width: 100%;
    table-layout: fixed;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
}

.userPayList table tbody {
    display: block;
    max-height: 600px;
    overflow-y: auto;
}

.userPayList table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.userPayList table thead th,
.userPayList table tbody td {
    width: auto;
}
    /*사용자 결제 리스트 페이지 끝**************/



/*회원 탈퇴 시작**************/
.widthdraw .warning{
    background-color: rgba(5, 150, 105, 0.2); ;
    padding: 1rem;
    border-radius: 10px;
}
.widthdraw .warning{
    margin-bottom: 50px;
}
.widthdraw .warning >strong{
    text-align: center;
    margin-bottom: 20px !important;
    display: block;
    color: #065F46;
    font-size: 16px;
}
.widthdraw .warning p{
    text-align: center;
    font-size: 16px;
}



.widthdraw .cuzArea >strong{
    text-align: center;
    font-size: 18px !important;
    display: block;
    font-weight: 600;
}
.widthdraw .cuzArea .chkBox{
    width: 100%;
   margin: 20px auto ;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    align-items: center;
}
.widthdraw .cuzArea .chkBox .box{
    width: 30%;
}
.widthdraw .cuzArea .chkBox input{
    display: none;
}
.widthdraw .cuzArea .chkBox label{
    position: relative;
    padding-left: 20px;
    font-size: 16px;
    font-weight: 600;
}
.widthdraw .cuzArea .chkBox label:before{
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    left: -8px;
    transform: translateY(-50%);
    width: 20px; height: 20px;
    border: 1px solid #b7b7b7;
    border-radius: 5px;
    background-color: #fff;
}
.widthdraw .cuzArea .chkBox input:checked + label:before{
    background-color: #065F46;
    content: '✔';
    color: #fff;
}

.widthdraw .cuzArea textarea{
    display: none;
    resize: none;
    width: 100%;
    height: 150px;
    overflow-y: auto;
    margin: 10px 10px;
    padding: 1rem;
    font-size: 14px;
    border: 1px solid #b7b7b7;
    background-color: #fff;
    border-radius: 10px;
}
.widthdraw button{
    margin: 50px auto;
    display: block;
}

/*회원 탈퇴 끝**************/


/* 컨텐츠 목록 시작**************/
#content,
#content2,
#hubPage{
    width: 100%;
    position: relative;
}
.c-top{
    opacity: 0 !important;
    height: 10vh !important;
}
#content .c-top,
#content2 .c-top,
#moneyPrediction .c-top,
#hubPage .c-top{
    width: 100%;
    height: 34vh;
    background-color: #f1f4f6;
}
#content .c-top .title,
#content2 .c-top .title,
#moneyPrediction .c-top .title,
#hubPage .c-top .title{
    width: 100%;
    margin: 0 auto;
    max-width: 1200px;color: #fff;
    height: 100%;
    position: relative;
    transition: opacity 0.9s ease-out 0.1s, transform 0.8s ease-out 0.1s;
}
#content .c-top .title strong,
#content2 .c-top .title strong,
#moneyPrediction .c-top .title strong,
#hubPage .c-top title strong{
    position: absolute;
    font-size: 2.2rem;
    top: 32%;
    left: 0;
    font-weight: 800;
}
#content .c-top .title span,
#content2 .c-top .title span,
#moneyPrediction .c-top .title span,
#hubPage .c-top .title span{
    transition-delay: .2s;
    font-size: 1.2rem;
    font-weight: 600;
    left: 0; top: 46%; line-height: 1.5rem;
    position: absolute;
}
#content .c-top .title p,
#content2 .c-top .title p,
#moneyPrediction .c-top .title p,
#hubPage .c-top .title p{
    transition-delay: .4s;
    left: 0; top: 67%; position: absolute;
    font-size: 1rem;
    line-height: 1.5rem;
}
#content .c-top .title .pop,
#content2 .c-top .title .pop,
#moneyPrediction .c-top .pop,
#hubPage .c-top .pop{
    transition-delay: 5s;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    left: 0; top: 46%; line-height: 1.6rem;
    position: absolute;
}
#content div[class^=content],
#content2 div[class^=content]{
    width: 100%;
    margin: 300px 0;
}

#content .con-inner,
#content2 .con-inner,
#hubPage .con-inner{
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    flex: 1;
}
#content .section-inner .cont-flex,
#content2 .section-inner .cont-flex,
#content .section-inner .cont-flex2{
    width: 75%;
}
#content .section-inner .cont-flex ul{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 20px;
    height: 100%;
}
#content .section-inner .cont-flex li:hover{
    transform: translateY(-2px); transition: all .3s ease-in-out;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
#content .section-inner .cont-flex li a{
    display: flex;
    color: #333;
    align-items: center;
    justify-content: space-between;
}
#content li .imgWrap,
#content2 li .imgWrap,
#hubPage li .imgWrap{
    width: 100%;
    height: 200px;
}
#content .section-inner .cont-flex li strong.title{
    font-size: 1.8rem;
    font-weight: 800;
    display: block;
    letter-spacing: -.01rem;
    margin-bottom: 20px;
}
#content .section-inner .cont-flex .title-wrap b{
    font-size: 14px;
    font-weight: 500;
    color: #666;
}

#content .section-inner .cont-flex .cost b{
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 1.5rem;
    letter-spacing: -.05rem;
    font-weight: 700;
    color: #065F46;text-align: right;
}

#content .section-inner .cont-flex li span{
    font-size: .9rem;
    position: relative;
    color: #b7b7b7;
    letter-spacing: -.05rem;
    font-weight: 500;
}

#content .cont-flex{
    width: 100%;
}
#content .listArea{
    height: 100%;
}

#content .listArea .dateWrap{
    padding-bottom:  30px;
    border-bottom: 1px solid rgba(3, 31, 93, 0.1);
    margin-bottom: 30px;
}
#content .listArea .dateWrap .date-inner{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
#content .listArea .dateWrap span{
    display: inline-block;
    width: 22%;
    letter-spacing: -1px;
    text-align: center;
    padding: 5px 0;
    border: 1px solid rgba(19, 78, 74, 0.5);
    font-size: 1rem;
    border-radius: 5px;
    background-color: rgba(19, 78, 74, 0.2);
    font-weight: 700;
    color: #134E4A;
}

#content .listArea .dateWrap p{
    font-size: 1rem;
    line-height: 22px;
}

#content .listArea .dateWrap b.point{
    font-weight: 800;
    /*text-decoration: underline;*/
    color: #134E4A;
    font-size: 1.2rem;
    display: inline;
}
#hubPage .listArea strong.listCount,
#content .listArea strong.listCount{
    color: #065F46;
    font-weight: 800;
    font-size: 1.6rem;
    display: block;
    margin: 50px 0 30px;
}
#content .section-inner .cont-flex li,
#content2 .section-inner .cont-flex li{
    width: 100%;
    padding: 40px 20px;
}
#content .section-inner .cont-flex  li:not(:last-of-type),
#content2 .section-inner .cont-flex  li:not(:last-of-type){
    border-bottom: 1px solid #eee;
}

/*growList 시작 성장리스트 시작*/
#content .cont-flex2 ul{
    display: flex;
    gap: 20px;
    align-items: center;
}
#content .cont-flex2 ul li{
    min-height: 250px;
    height: auto;
    width: 33%;
    position: relative;
    cursor: pointer;
    border: 1px solid #b7b7b7;
    border-radius: 10px;
    transition: .4s ease-in-out;
}
#content .cont-flex2 ul li:hover{
    border-color: #666;
    transform: translateY(-10px);
}
#content .cont-flex2 ul li a{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;
}
#content .cont-flex2 ul li .title-wrap{
    padding: 2rem 1rem;
    color: #333;
    font-weight: 500;
    font-size: 16px;
}
#content .cont-flex2 ul li .title{
    font-weight: 800;
    font-size: 1.2rem;
    display: block;
    margin-bottom: 25px;
}

#content .cont-flex2 ul li b,
#content .cont-flex2 ul li span{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 4rem;
    line-height: 1.4rem;
    word-break: break-word;
}
#content .cont-flex2 ul li b {
    font-weight: 700;
    margin-bottom: 15px;
}
#content .cont-flex2 ul li span{
    border-top: 1px solid #dedede;
    padding-top: 15px;
    font-size: .85rem;
    color: #666;
}

/*상담사 목록 시작 -------------------------------*/
#content2 .listArea strong.listCount {
    color: #065F46;
    font-weight: 700;
    margin-right: auto;
    font-size: 1.2rem;
    display: block;
}
#content2 .listArea .top{
    display: flex;
    margin-bottom: 30px;
    justify-content: flex-start;
    gap: 1rem;
    align-items: center;
}
#content2 .listArea .top button{
    color: #fff;
    background-color: #065F46;
    padding: 1rem 1.2rem;
    font-size: 14px;
    border: 1px solid transparent;
    border-radius: 10px;
}
#content2 .listArea .top button:hover{
    background-color: rgba(3, 31, 93, 0.8);
}
#content2 .section-inner .cont-flex li a{
    display: flex;
    color: #333;
    gap: 30px;
    align-items: center;
}
#content2 .userName{
    display: flex;
    gap: 8px;
    flex-direction: column;
}
#content2 .title-wrap {
    width: 90%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 150px;
}
#content2 .listArea .profileImg{
    width: 270px;
    height: 200px;
}
#content2 .listArea .profileImg img{
    width: 100%; height: 100%;
    object-fit: contain;
}
#content2 .bigTop{
    flex-wrap: wrap;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}
#content2  .title-wrap .bigTop strong{
    margin-bottom: 0;
    font-size: 24px;
    margin-right: 10px;
    font-weight: 800;
    color: #000;
}
#content2 .title-wrap .tagMore{
    display: flex;
    flex-wrap: wrap; gap: 10px;
}
#content2 .title-wrap .tagMore span.field{
    padding: 5px 10px 5px 18px;
    font-size: 12px;
    color: #666;
    background-color: #ddd;
    border-radius: 30px;
    position: relative;
}
#content2 .title-wrap .tagMore span.field:before{
    position: absolute;
    content: '#';
    font-size: 12px; color: #666;
    top: 50%; left: 8px; transform: translateY(-50%);
}
#content2 .title-wrap b{
    width: 100%;
    color: #666;
    font-weight: 400;
    font-size: .9rem;
    line-height: 1.2rem;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 3;
}
#content2  .elementBox{
    display: flex;
    gap: 20px;
}
#content2  .elementBox > div{
    position: relative;
    padding-left: 20px;
}
#content2  .elementBox > div:before{
    content: '';
    position: absolute; top: 50%;left: -1px; transform:translateY(-50%);
    background-position: center; background-repeat: no-repeat; background-size: 100%;
    width: 15px; height: 15px;
}
#content2  .elementBox .star:before{
    background-image: url("../images/icon/ico-star.png");
}
#content2  .elementBox .clock:before{
    background-image: url("../images/icon/ico-time64x64.png");
}
#content2  .elementBox p{
    font-size: .9rem;
    color: #666;
}
#content2  .elementBox .reviewCount,
#content .expertDetail table .star .reviewCount{
    color: #065F46;
    font-weight: 700;
}

#content2 .listArea li button{
    width: 20%;
    padding: 10px 0;
    display: block;
    font-weight: 600;
    font-size: 1rem;
    background-color: #fff;
    color: #065F46;
    border-radius: 10px;
    border: 1px solid #065F46;
}

#content2 .listArea li button:hover{
    background-color: #065F46;
    color: #fff;
}


#content2 .gridTemp{
    display: grid;
    grid-template-columns: repeat(3,1fr);
}
#content2 .section-inner .cont-flex  .gridTemp li{
    padding: 1rem!important;
    transition: .3s ease-in-out;
    border-radius:10px;
}
#content2 .gridTemp li:not(.noSearch):hover{
    box-shadow: 0 4px 10px rgba(1,1,1,.1);
}
#content2 .gridTemp li a{
    flex-direction: column;
}
#content2 .section-inner .cont-flex .gridTemp li:not(:last-of-type){
    border: unset;
}
#content2 .section-inner .cont-flex .gridTemp .noSearch strong{
    font-size: 1.1rem; font-weight: 800;
    margin-top: 20px; display: block; color: #666 ;
}
#content2 .gridTemp .clock,#content2 .gridTemp .clock +div, #content2 .gridTemp li button{
    display: none;
}
/*상담사 목록 끝 -------------------------------*/





/*허브 페이지 시작 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#hubPage .c-top {
    opacity: 0 !important;
    height: 10vh !important;
}
#hubPage strong.title span.emoji{
    display: inline-block;
    margin-right: 8px;
    font-size: 1rem;
    line-height: 1.6;
}
#hubPage .category{
    width: 100%;
    background-color: #fafafa;
    margin-bottom: 100px;
}

#hubPage .category .cate-inner{
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
#hubPage .category ul{
    display: flex;
    justify-content: space-between;
    gap: 5px;
    align-items: center;
}
#hubPage .category li{
    padding: 2rem ;
    transition: all .2s ease-in-out;
}
#hubPage .category li.on,
#hubPage .category li:hover{
    background-color: #f1f1f1;
}
#hubPage .category a{
    color: var(--primary);
    font-size: 1rem;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#hubPage .category img{
    width: 80px; height: 80px;
    display: block;
    margin-bottom: 10px;
    opacity: .8;
}
#hubPage .cont-flex{
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 100%;
}
#hubPage .productImg{
    max-width: 400px;
    max-height: 200px;
    height: 200px;
    width: 100%;
    margin-bottom: 15px;
}
#hubPage .productImg img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}
#hubPage .listArea .gridTemp{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    margin: 30px 0;
    gap: 40px;
}

#hubPage .listArea .gridTemp li{
    width: 100%;
}
#hubPage .listArea .gridTemp li a{
    color: #333;
}
#hubPage .gridTemp .title-wrap,
#hubPage .cardWrap .bigTop{
    margin-bottom: 20px;
}
#hubPage .gridTemp strong.tit,
#hubPage .cardWrap strong.tit{
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight : 700;
    color: #333;
    word-break: break-word;
    line-height: 1.9;
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 5px;
}
#hubPage div.charge{
    text-align: right;
    color: #666;
    font-weight: 600;
    font-size: 1rem;
}

#hubPage .tit .point {
    margin-left: auto;
    color: var(--primary-light);
    font-size: .9rem;
}
#hubPage .listArea .gridTemp li .btnWrap {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
#hubPage .listArea .gridTemp li .btnWrap button{
    border: 1px solid #eee;
    background-color: transparent;
    font-size: .9rem;
    font-weight: 700;
    color: #666;
    border-radius: 10px;
    padding: 10px;
    display: block;
    transition: .2s ease-in-out;
}
#hubPage .listArea .gridTemp li .btnWrap button:nth-of-type(2) {
    border-color: var(--primary);
    color: var(--primary);
}
#hubPage .listArea .gridTemp li .btnWrap button:hover{
    background-color: #fafafa;
}

#hubPage .finxMall .cont-flex {
    gap: 100px;
}
#hubPage .finxMall .listTop {
    padding: 2rem 10px;
    background-color: #f1f4f6;
    margin-bottom: 2rem;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
#hubPage .finxMall .listTop .cate-tit {
    font-size: 1.8rem;
    font-weight: 800;
    display: block;
    margin-bottom: 20px;
}
#hubPage .finxMall .listTop .cate-cont{
    font-size: 1rem;
    line-height: 1.5;
}
#hubPage .finxMall .listTop .small{
    font-size: 1.2rem;
    font-weight: 600;
    color: #666;
}
#hubPage .finxMall .listTop .point {
    font-weight: 800;
    display: block;
    margin-bottom: 10px;
    font-size: 1.2rem;
}
#hubPage .finxMall .listTop .bold {
    font-weight: 800;
}
/*공통 끝 ~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


/*about 시작 ~~~~~~~~~~~~~~~*/
#hubPage .infoCardArea {
    width: 90%;
    margin: 100px auto;
    max-width: 1200px;
}

#hubPage .infoCardArea h2 {
    font-size: 3rem;
    font-weight: 800;
    color: #065F46;
    margin-bottom: 50px;
    letter-spacing: -0.02em;
}

#hubPage .infoCardArea  h2 + .top {
    padding-bottom: 50px;
}

#hubPage .hubPageBanner{
    position: relative;
    width: 100%;
    aspect-ratio: 1920/ 1000;
    margin-bottom: 50px;
}
#hubPage .hubPageBanner.mindTech{
    aspect-ratio: 1920/ 600;
}
#hubPage .hubPageBanner .banner-text {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
/*mincTech*/
#hubPage .hubPageBanner.mindTech{
    background: url("../images/banner/hubPage-mindTech.png") top / cover no-repeat;
}
/*ai*/
#hubPage .hubPageBanner.ai{
    background: url("../images/banner/hubPage-ai.png") top / cover no-repeat;
}
/*therapy*/
#hubPage .hubPageBanner.therapy{
    background: url("../images/banner/hubPage-therapy2.png") top / cover no-repeat;
}
/*mall*/
#hubPage .hubPageBanner.mall{
    background: url("../images/banner/hubPage-mall.png") top / cover no-repeat;
}

#hubPage .finxMall .filter{
    margin-bottom: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
}
#hubPage .finxMall .filter .mallFilterBtn{
    border: 1px solid #ddd;
    background-color: #fff;
    height: 30px;
    border-radius: 5px;
    padding: 2px 10px;
    font-size: .9rem;
    font-weight: 500;
}
#hubPage .finxMall .filter .mallFilterBtn.on{
    background-color: rgba(6, 95, 70, 0.2);
}
#hubPage .finxMall .filter #mallReset {
    background-color: #eee;
}
#hubPage .finxMall .filter #mallReset i{
    font-weight: 800;
}
#hubPage .finxMall .filter .mallFilterBtn:hover{
    opacity: .8;
}




#hubPage .infoCardArea .info-card {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
}
#hubPage .infoCardArea .smallTit{
    margin-bottom: 20px;
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #666;
}

#hubPage .infoCardArea .info-card li {
    position: relative;
}

#hubPage .infoCardArea .info-card li a {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 200px;
    padding: 1.5rem 1rem;
    background: #ffffff;
    border: 1px solid var(--primary-light);
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

#hubPage .infoCardArea .info-card li a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #065F46 0%, #10b981 100%);
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#hubPage .infoCardArea .info-card li a:hover {
    border-color: var(--primary);
    box-shadow: 0 12px 24px -8px rgba(6, 95, 70, 0.15);
    transform: translateY(-4px);
}

#hubPage .infoCardArea .info-card li a:hover::before {
    transform: scaleX(1);
}

#hubPage .infoCardArea .info-card li a:hover .title {
    color: #065F46;
}

#hubPage .infoCardArea .info-card li a:hover .arrowText {
    transform: translateX(4px);
    color: #065F46;
}

#hubPage .infoCardArea .info-card li a:hover .arrowText::after {
    opacity: 1;
    transform: translateX(0);
}

#hubPage .infoCardArea .info-card .title {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.8;
    color: #1a1a1a;
    margin-bottom: 12px;
    transition: color 0.3s ease;
    letter-spacing: -0.01em;
}
#hubPage .infoCardArea .info-card .title .small{
    font-size: .9rem;
    font-weight: 600;
    color: #666;
    display: inline-block;
    margin-left: 5px;
}

#hubPage .infoCardArea .info-card .sub {
    font-size: 15px;
    line-height: 1.6;
    color: #6b7280;
    margin-bottom: auto;
    flex-grow: 1;
}

#hubPage .infoCardArea .info-card .arrowText {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-dark);
    margin-top: 20px;
    transition: all 0.3s ease;
    position: relative;
}

#hubPage .infoCardArea .info-card .arrowText::after {
    content: '→';
    margin-left: 6px;
    font-size: 16px;
    opacity: 0.7;
    transition: all 0.3s ease;
    transform: translateX(-4px);
}

/*about 시작 -------*/

#hubPage .about .container {
    max-width: 1200px;
    margin: 0 auto;
}

/* ==================== HERO SECTION ==================== */
#hubPage .about .hero {
    background: linear-gradient(135deg, #065F46 0%, #047857 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

#hubPage .about .hero::before {
    content: '';
    position: absolute;
    top: -150px;
    left: -150px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

#hubPage .about .hero::after {
    content: '';
    position: absolute;
    bottom: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

#hubPage .about .hero-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

#hubPage .about .hero h1 {
    font-size: 72px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 40px;
    letter-spacing: -0.02em;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}

#hubPage .about .hero-line {
    width: 120px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    margin: 0 auto 40px;
    transform-origin: center;
}

#hubPage .about .hero-subtitle {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.05em;
    font-weight: 300;
}

/* ==================== MAIN DESCRIPTION ==================== */
#hubPage .about .main-desc {
    background: linear-gradient(180deg, #ffffff 0%, #f8fffe 100%);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

#hubPage .about .main-desc::before {
    content: '';
    position: absolute;
    top: 10%;
    right: -100px;
    width: 400px;
    height: 400px;
    background: rgba(6, 95, 70, 0.03);
    border-radius: 50%;
    z-index: 0;
}

#hubPage .about .main-desc::after {
    content: '';
    position: absolute;
    bottom: 15%;
    left: -80px;
    width: 350px;
    height: 350px;
    background: rgba(6, 95, 70, 0.02);
    border-radius: 50%;
    z-index: 0;
}

#hubPage .about .main-desc .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}

#hubPage .about .main-desc-content {
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
}

#hubPage .about .main-desc-content::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #065F46, transparent);
}

#hubPage .about .main-desc-content::after {
    content: '';
    position: absolute;
    top: -50px;
    right: 15%;
    width: 60px;
    height: 60px;
    background: rgba(6, 95, 70, 0.08);
    border-radius: 50%;
    z-index: -1;
}

#hubPage .about .main-desc-content.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .main-desc .section-label {
    font-size: 14px;
    font-weight: 600;
    color: #065F46;
    letter-spacing: 0.15em;
    margin-bottom: 20px;
}

#hubPage .about .main-desc .main-title {
    font-size: 48px;
    font-weight: 700;
    color: #0a0a0a;
    margin-bottom: 40px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    position: relative;
    display: inline-block;
}


#hubPage .about .main-desc .main-text {
    font-size: 18px;
    color: #666;
    line-height: 1.8;
    max-width: 1000px;
    margin: 0 auto;
}

/* ==================== PROCESS SECTION ==================== */
#hubPage .about .process {
    background: linear-gradient(135deg, #065F46 0%, #047857 100%);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

#hubPage .about .process::before {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

#hubPage .about .process::after {
    content: '';
    position: absolute;
    bottom: -120px;
    right: -120px;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    border-radius: 50%;
}

#hubPage .about .process .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}

#hubPage .about .process-header {
    text-align: center;
    margin-bottom: 80px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

#hubPage .about .process-header.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .process-header .process-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.15em;
    margin-bottom: 15px;
}

#hubPage .about .process-header .process-subtitle {
    font-size: 42px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    position: relative;
    display: inline-block;
}


#hubPage .about .process-steps {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 30px;
    align-items: center;
}

#hubPage .about .step {
    background: rgba(255, 255, 255, 0.95);
    padding: 50px 40px;
    border-radius: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    opacity: 0;
    min-height: 445px;
    transform: translateY(50px);
    transition: all 0.8s ease;
    position: relative;
    overflow: hidden;
}

#hubPage .about .step::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(6, 95, 70, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

#hubPage .about .step::after {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    background: rgba(6, 95, 70, 0.08);
    border-radius: 10px;
    transform: rotate(15deg);
}

#hubPage .about .step.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .step:nth-child(1) {
    transition-delay: 0s;
}

#hubPage .about .step:nth-child(3) {
    transition-delay: 0.2s;
}

#hubPage .about .step:nth-child(5) {
    transition-delay: 0.4s;
}

#hubPage .about .step:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

#hubPage .about .step-number {
    font-size: 48px;
    font-weight: 700;
    color: #065F46;
    margin-bottom: 25px;
    text-shadow: 0 0 20px rgba(6, 95, 70, 0.3);
}

#hubPage .about .step-title {
    font-size: 24px;
    font-weight: 600;
    color: #0a0a0a;
    margin-bottom: 10px;
}

#hubPage .about .step-subtitle {
    font-size: 14px;
    color: #065F46;
    margin-bottom: 25px;
    font-weight: 500;
}

#hubPage .about .step-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
}

#hubPage .about .step-feature {
    font-size: 15px;
    color: #666;
    padding-left: 30px;
    position: relative;
    line-height: 1.7;
}

#hubPage .about .step-feature::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 16px;
    height: 16px;
    background: rgba(6, 95, 70, 0.2);
    border-radius: 4px;
}

#hubPage .about .step-feature::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 13px;
    width: 6px;
    height: 6px;
    background: #065F46;
    border-radius: 50%;
}

#hubPage .about .step-output {
    background: linear-gradient(90deg, rgba(6, 95, 70, 0.08) 0%, transparent 100%);
    padding: 15px 20px 15px 40px;
    border-radius: 8px;
    border-left: 3px solid #065F46;
    font-size: 14px;
    color: #065F46;
    font-weight: 600;
    position: relative;
}

#hubPage .about .step-output::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: #065F46;
    border-radius: 50%;
}

#hubPage .about .arrow {
    font-size: 32px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
}

/* ==================== FINAL SECTION ==================== */
#hubPage .about .final {
    background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

#hubPage .about .final::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(6, 95, 70, 0.2) 0%, transparent 70%);
    border-radius: 50%;
}

#hubPage .about .final::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(6, 95, 70, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

#hubPage .about .final .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}

#hubPage .about .final-content {
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

#hubPage .about .final-content.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .final-label {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.15em;
    margin-bottom: 20px;
}

#hubPage .about .final-title {
    font-size: 42px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 60px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    position: relative;
    display: inline-block;
}

#hubPage .about .final-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: #065F46;
}

#hubPage .about .final-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

#hubPage .about .final-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    padding: 40px 30px;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

#hubPage .about .final-card::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(6, 95, 70, 0.3) 0%, transparent 70%);
    border-radius: 50%;
}

#hubPage .about .final-card::after {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 15px;
    width: 30px;
    height: 30px;
    background: rgba(6, 95, 70, 0.2);
    border-radius: 6px;
    transform: rotate(20deg);
}

#hubPage .about .final-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #065F46;
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(6, 95, 70, 0.3);
}

#hubPage .about .final-card-number {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 15px;
    letter-spacing: 0.1em;
    display: inline-block;
    padding: 5px 15px;
    background: rgba(6, 95, 70, 0.2);
    border-radius: 20px;
}

#hubPage .about .final-card-title {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

#hubPage .about .final-text {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
}

/* ==================== WHY FINX SECTION ==================== */
#hubPage .about .why-finx {
    background: linear-gradient(180deg, #fafafa 0%, #ffffff 50%, #f8fffe 100%);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

#hubPage .about .why-finx::before {
    content: '';
    position: absolute;
    top: 12%;
    left: -120px;
    width: 450px;
    height: 450px;
    background: rgba(6, 95, 70, 0.03);
    border-radius: 50%;
    z-index: 0;
}

#hubPage .about .why-finx::after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: -100px;
    width: 400px;
    height: 400px;
    background: rgba(6, 95, 70, 0.02);
    border-radius: 50%;
    z-index: 0;
}

#hubPage .about .why-finx .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}

/* Why Header */
#hubPage .about .why-header {
    text-align: center;
    margin-bottom: 100px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
}

#hubPage .about .why-header::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #065F46, transparent);
}

#hubPage .about .why-header::after {
    content: '';
    position: absolute;
    top: -50px;
    right: 20%;
    width: 60px;
    height: 60px;
    background: rgba(6, 95, 70, 0.08);
    border-radius: 50%;
    z-index: -1;
}

#hubPage .about .why-header.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .why-header .section-label {
    font-size: 14px;
    font-weight: 600;
    color: #065F46;
    letter-spacing: 0.15em;
    margin-bottom: 20px;
}

#hubPage .about .why-header .why-title {
    font-size: 48px;
    font-weight: 700;
    color: #0a0a0a;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    position: relative;
    display: inline-block;
}

#hubPage .about .why-header .why-subtitle {
    font-size: 18px;
    color: #666;
    line-height: 1.7;
}

/* Limitation Section */
#hubPage .about .limitation-section {
    margin-bottom: 120px;
}

#hubPage .about .limitation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

#hubPage .about .limitation-left {
    background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
    padding: 50px 40px;
    border-radius: 12px;
    border: 2px solid rgba(6, 95, 70, 0.1);
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
    overflow: hidden;
}

#hubPage .about .limitation-left::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(6, 95, 70, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

#hubPage .about .limitation-left::after {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    background: rgba(6, 95, 70, 0.05);
    border-radius: 8px;
    transform: rotate(15deg);
}

#hubPage .about .limitation-left.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .limitation-right {
    background: linear-gradient(135deg, #065F46 0%, #047857 100%);
    padding: 50px 40px;
    border-radius: 12px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    transition-delay: 0.2s;
    position: relative;
    overflow: hidden;
}

#hubPage .about .limitation-right::before {
    content: '';
    position: absolute;
    top: -40px;
    left: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

#hubPage .about .limitation-right::after {
    content: '';
    position: absolute;
    bottom: 25px;
    right: 25px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transform: rotate(20deg);
}

#hubPage .about .limitation-right.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .limitation-title {
    font-size: 28px;
    font-weight: 600;
    color: #0a0a0a;
    margin-bottom: 20px;
}

#hubPage .about .limitation-desc {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
    line-height: 1.7;
}

#hubPage .about .limitation-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#hubPage .about .limitation-item {
    font-size: 15px;
    color: #333;
    padding-left: 30px;
    position: relative;
    line-height: 1.7;
}

#hubPage .about .limitation-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 16px;
    height: 16px;
    background: rgba(6, 95, 70, 0.2);
    border-radius: 4px;
}

#hubPage .about .limitation-item::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 13px;
    width: 6px;
    height: 6px;
    background: #065F46;
    border-radius: 50%;
}

#hubPage .about .reality-text {
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 25px;
}

#hubPage .about .reality-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

#hubPage .about .reality-item {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    padding-left: 30px;
    position: relative;
    line-height: 1.7;
}

#hubPage .about .reality-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 16px;
    height: 16px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

#hubPage .about .reality-item::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 13px;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
}

#hubPage .about .reality-conclusion {
    font-size: 16px;
    color: #fff;
    line-height: 1.8;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Starting Point */
#hubPage .about .starting-point {
    background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
    padding: 80px 60px;
    border-radius: 16px;
    margin-bottom: 120px;
    border: 1px solid rgba(6, 95, 70, 0.1);
    position: relative;
    overflow: hidden;
}

#hubPage .about .starting-point::before {
    content: '';
    position: absolute;
    top: 40px;
    right: 40px;
    width: 120px;
    height: 120px;
    background: rgba(6, 95, 70, 0.03);
    border-radius: 20px;
    transform: rotate(15deg);
}

#hubPage .about .starting-content {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

#hubPage .about .starting-content.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .starting-content .starting-title {
    font-size: 32px;
    font-weight: 600;
    color: #0a0a0a;
    text-align: center;
    margin-bottom: 15px;
}

#hubPage .about .starting-content .starting-subtitle {
    font-size: 18px;
    color: #666;
    text-align: center;
    margin-bottom: 50px;
}

#hubPage .about .question-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

#hubPage .about .question-card {
    background: #fff;
    padding: 30px 25px;
    border-radius: 12px;
    border: 2px solid #f0f0f0;
    font-size: 16px;
    color: #065F46;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

#hubPage .about .question-card::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(6, 95, 70, 0.12) 0%, transparent 70%);
    border-radius: 50%;
}

#hubPage .about .question-card::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 20px;
    height: 20px;
    background: rgba(6, 95, 70, 0.08);
    border-radius: 4px;
    transform: rotate(15deg);
}

#hubPage .about .question-card.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .question-card:nth-child(1) {
    transition-delay: 0.1s;
}

#hubPage .about .question-card:nth-child(2) {
    transition-delay: 0.2s;
}

#hubPage .about .question-card:nth-child(3) {
    transition-delay: 0.3s;
}

#hubPage .about .question-card:hover {
    border-color: #065F46;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(6, 95, 70, 0.15);
}

#hubPage .about .starting-answer {
    background: linear-gradient(90deg, rgba(6, 95, 70, 0.05) 0%, transparent 100%);
    padding: 40px;
    border-radius: 12px;
    border-left: 4px solid #065F46;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease;
    transition-delay: 0.4s;
    position: relative;
}

#hubPage .about .starting-answer::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 40px;
    width: 12px;
    height: 12px;
    background: #065F46;
    border-radius: 50%;
}

#hubPage .about .starting-answer::after {
    content: '';
    position: absolute;
    right: 30px;
    bottom: 30px;
    width: 40px;
    height: 40px;
    background: rgba(6, 95, 70, 0.08);
    border-radius: 8px;
    transform: rotate(20deg);
}

#hubPage .about .starting-answer.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .starting-answer p {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 15px;
}

#hubPage .about .starting-answer p:last-child {
    margin-bottom: 0;
}

#hubPage .about .starting-answer strong {
    color: #065F46;
    font-weight: 600;
}

/* Difference Section */
#hubPage .about .difference-section {
    margin-bottom: 120px;
}

#hubPage .about .difference-section .difference-title {
    font-size: 32px;
    font-weight: 600;
    color: #0a0a0a;
    text-align: center;
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
}


#hubPage .about .difference-section .difference-title.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .difference-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

#hubPage .about .diff-card {
    background: #fff;
    padding: 40px 35px;
    border-radius: 12px;
    border: 2px solid #f0f0f0;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
    overflow: hidden;
}

#hubPage .about .diff-card::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(6, 95, 70, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

#hubPage .about .diff-card::after {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 35px;
    height: 35px;
    background: rgba(6, 95, 70, 0.05);
    border-radius: 8px;
    transform: rotate(20deg);
}

#hubPage .about .diff-card.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .diff-card:nth-child(1) {
    transition-delay: 0.1s;
}

#hubPage .about .diff-card:nth-child(2) {
    transition-delay: 0.2s;
}

#hubPage .about .diff-card:nth-child(3) {
    transition-delay: 0.3s;
}

#hubPage .about .diff-card:nth-child(4) {
    transition-delay: 0.4s;
}

#hubPage .about .diff-card:hover {
    border-color: #065F46;
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(6, 95, 70, 0.2);
}

#hubPage .about .diff-number {
    font-size: 14px;
    font-weight: 600;
    color: #065F46;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
    display: inline-block;
    padding: 5px 15px;
    background: rgba(6, 95, 70, 0.1);
    border-radius: 20px;
}

#hubPage .about .diff-title {
    font-size: 20px;
    font-weight: 600;
    color: #0a0a0a;
    margin-bottom: 15px;
}

#hubPage .about .diff-desc {
    font-size: 15px;
    color: #666;
    margin-bottom: 25px;
    line-height: 1.7;
}

#hubPage .about .diff-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 25px;
}

#hubPage .about .diff-item {
    font-size: 14px;
    color: #666;
    padding-left: 30px;
    position: relative;
    line-height: 1.6;
}

#hubPage .about .diff-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 16px;
    height: 16px;
    background: rgba(6, 95, 70, 0.2);
    border-radius: 4px;
}

#hubPage .about .diff-item::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 11px;
    width: 6px;
    height: 6px;
    background: #065F46;
    border-radius: 50%;
}

#hubPage .about .diff-highlight {
    background: linear-gradient(90deg, rgba(6, 95, 70, 0.05) 0%, transparent 100%);
    padding: 20px 25px 20px 45px;
    border-radius: 8px;
    border-left: 3px solid #065F46;
    font-size: 15px;
    color: #065F46;
    font-weight: 600;
    line-height: 1.7;
    position: relative;
}

#hubPage .about .diff-highlight::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: #065F46;
    border-radius: 50%;
}

/* Comparison Section */
#hubPage .about .comparison-section {
    margin-bottom: 120px;
}

#hubPage .about .comparison-section .comparison-title {
    font-size: 32px;
    font-weight: 600;
    color: #0a0a0a;
    text-align: center;
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

#hubPage .about .comparison-section .comparison-title.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .comparison-table {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(6, 95, 70, 0.1);
    box-shadow: 0 8px 30px rgba(6, 95, 70, 0.08);
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    transition-delay: 0.2s;
}

#hubPage .about .comparison-table.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .comparison-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #f0f0f0;
}

#hubPage .about .comparison-row:last-child {
    border-bottom: none;
}

#hubPage .about .comparison-row.header {
    background: linear-gradient(135deg, #065F46 0%, #047857 100%);
}

#hubPage .about .comparison-row.header .comparison-cell {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    padding: 30px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
}

#hubPage .about .comparison-row.header .comparison-cell::before {
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
}

#hubPage .about .comparison-row.header .comparison-cell:last-child {
    border-right: none;
}

#hubPage .about .comparison-cell {
    padding: 25px 30px;
    font-size: 16px;
    color: #666;
    line-height: 1.7;
    text-align: center;
    border-right: 1px solid #f0f0f0;
    position: relative;
}

#hubPage .about .comparison-cell::after {
    content: '';
    position: absolute;
    bottom: 12px;
    left: 12px;
    width: 12px;
    height: 12px;
    background: rgba(6, 95, 70, 0.05);
    border-radius: 3px;
    transform: rotate(15deg);
}

#hubPage .about .comparison-cell:last-child {
    border-right: none;
}

#hubPage .about .comparison-cell.highlight {
    font-weight: 600;
    color: #065F46;
    background: linear-gradient(90deg, rgba(6, 95, 70, 0.03) 0%, transparent 100%);
}

#hubPage .about .comparison-cell.highlight::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #065F46;
}

/* Purpose Section */
#hubPage .about .purpose-section {
    background: linear-gradient(135deg, #065F46 0%, #047857 100%);
    padding: 80px 60px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

#hubPage .about .purpose-section::before {
    content: '';
    position: absolute;
    top: -60px;
    left: -60px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

#hubPage .about .purpose-section::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

#hubPage .about .purpose-content {
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
}

#hubPage .about .purpose-content.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .purpose-label {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 25px;
    letter-spacing: 0.05em;
}

#hubPage .about .purpose-text {
    font-size: 20px;
    color: #fff;
    line-height: 1.8;
}

#hubPage .about .purpose-text strong {
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}


/* ==================== R&D SECTION ==================== */
#hubPage .about .rnd-section {
    background: #fff;
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

#hubPage .about .rnd-section::before {
    content: '';
    position: absolute;
    top: 10%;
    right: -100px;
    width: 400px;
    height: 400px;
    background: rgba(6, 95, 70, 0.03);
    border-radius: 50%;
    z-index: 0;
}

#hubPage .about .rnd-section::after {
    content: '';
    position: absolute;
    bottom: 15%;
    left: -150px;
    width: 500px;
    height: 500px;
    background: rgba(6, 95, 70, 0.02);
    border-radius: 50%;
    z-index: 0;
}

#hubPage .about .rnd-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}

/* R&D Header */
#hubPage .about .rnd-header {
    text-align: center;
    margin-bottom: 100px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
}

#hubPage .about .rnd-header::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #065F46, transparent);
}

#hubPage .about .rnd-header.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .rnd-header .section-label {
    font-size: 14px;
    font-weight: 600;
    color: #065F46;
    letter-spacing: 0.15em;
    margin-bottom: 20px;
}

#hubPage .about .rnd-header .rnd-title {
    font-size: 48px;
    font-weight: 700;
    color: #0a0a0a;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    position: relative;
    display: inline-block;
}


#hubPage .about .rnd-header .rnd-subtitle {
    font-size: 18px;
    color: #666;
    line-height: 1.7;
}

/* Why R&D */
#hubPage .about .why-rnd {
    max-width: 1000px;
    margin: 0 auto 120px;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
}

#hubPage .about .why-rnd::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 20px;
    width: 60px;
    height: 60px;
    background: rgba(6, 95, 70, 0.1);
    border-radius: 50%;
    z-index: -1;
}

#hubPage .about .why-rnd.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .why-rnd .why-rnd-title {
    font-size: 32px;
    font-weight: 600;
    color: #0a0a0a;
    margin-bottom: 40px;
}

#hubPage .about .why-rnd-content {
    background: linear-gradient(135deg, #f8fffe 0%, #ffffff 100%);
    padding: 50px 40px;
    border-radius: 12px;
    border-left: 4px solid #065F46;
    position: relative;
    box-shadow: 0 4px 20px rgba(6, 95, 70, 0.08);
}

#hubPage .about .why-rnd-content::before {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    background: rgba(6, 95, 70, 0.1);
    border-radius: 6px;
    transform: rotate(45deg);
}

#hubPage .about .why-rnd-text {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 20px;
}

#hubPage .about .why-rnd-text:last-child {
    margin-bottom: 0;
}

/* Research Structure */
#hubPage .about .research-structure {
    background: linear-gradient(135deg, #065F46 0%, #047857 100%);
    padding: 80px 60px;
    border-radius: 16px;
    margin-bottom: 120px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
    box-shadow: 0 10px 40px rgba(6, 95, 70, 0.2);
}

#hubPage .about .research-structure::before {
    content: '';
    position: absolute;
    top: -10px;
    right: 40px;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

#hubPage .about .research-structure::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 60px;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transform: rotate(15deg);
}

#hubPage .about .research-structure.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .research-structure .structure-title {
    font-size: 32px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    margin-bottom: 15px;
}

#hubPage .about .research-structure .structure-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    margin-bottom: 60px;
}

#hubPage .about .research-flow {
    max-width: 800px;
    margin: 0 auto 60px;
    position: relative;
}

#hubPage .about .research-step {
    background: rgba(255, 255, 255, 0.95);
    padding: 40px;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    margin-bottom: 20px;
    position: relative;
    transition: all 0.3s ease;
}

#hubPage .about .research-step:hover {
    transform: translateX(10px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

#hubPage .about .research-step::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: #fff;
    border: 3px solid #065F46;
    border-radius: 50%;
}

#hubPage .about .research-step .step-label {
    font-size: 18px;
    font-weight: 600;
    color: #065F46;
    margin-bottom: 10px;
}

#hubPage .about .research-step .step-desc {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
}

#hubPage .about .flow-arrow {
    font-size: 32px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin: 10px 0;
}

#hubPage .about .data-standard {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 50px 40px;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    text-align: center;
}

#hubPage .about .data-standard .standard-title {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 30px;
}

#hubPage .about .standard-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

#hubPage .about .standard-item {
    font-size: 14px;
    color: #fff;
    padding: 20px 15px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

#hubPage .about .standard-item::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: all 0.3s ease;
}

#hubPage .about .standard-item:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-5px);
}

#hubPage .about .standard-item:hover::before {
    top: -20%;
    right: -20%;
}

#hubPage .about .data-standard .standard-desc {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Research Areas */
#hubPage .about .research-areas {
    max-width: 1100px;
    margin: 0 auto 120px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
}

#hubPage .about .research-areas::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    background: rgba(6, 95, 70, 0.05);
    border-radius: 20px;
    transform: rotate(15deg);
    z-index: -1;
}

#hubPage .about .research-areas.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .research-areas .areas-title {
    font-size: 32px;
    font-weight: 600;
    color: #0a0a0a;
    text-align: center;
    margin-bottom: 20px;
}

#hubPage .about .research-areas .areas-subtitle {
    font-size: 16px;
    color: #666;
    text-align: center;
    margin-bottom: 50px;
}

#hubPage .about .areas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

#hubPage .about .area-item {
    background: #fff;
    padding: 35px 30px;
    border-radius: 12px;
    border: 2px solid #f0f0f0;
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    position: relative;
    transition: all 0.3s ease;
}

#hubPage .about .area-item::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
    background: rgba(6, 95, 70, 0.1);
    border-radius: 8px;
    z-index: 0;
}

#hubPage .about .area-item::after {
    content: '';
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 20px;
    height: 20px;
    background: rgba(6, 95, 70, 0.15);
    border-radius: 50%;
}

#hubPage .about .area-item:hover {
    border-color: #065F46;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(6, 95, 70, 0.15);
}

/* Clinical Method */
#hubPage .about .clinical-method {
    background: rgba(6, 95, 70, 0.15);
    padding: 80px 60px;
    border-radius: 16px;
    margin-bottom: 120px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
    overflow: hidden;
}

#hubPage .about .clinical-method::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(6, 95, 70, 0.2) 0%, transparent 70%);
    border-radius: 50%;
}

#hubPage .about .clinical-method::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(6, 95, 70, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

#hubPage .about .clinical-method.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .clinical-method .method-title {
    font-size: 32px;
    font-weight: 600;
    color: #065F46;
    text-align: center;
    margin-bottom: 20px;
}

#hubPage .about .clinical-method .method-subtitle {
    font-size: 16px;
    color: #666;
    text-align: center;
    margin-bottom: 60px;
    line-height: 1.7;
}

#hubPage .about .method-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 40px;
    position: relative;
}

#hubPage .about .method-step {
    text-align: center;
    position: relative;
    padding: 30px 20px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

#hubPage .about .method-step:hover {
    background: rgba(6, 95, 70, 0.2);
    border-color: rgba(6, 95, 70, 0.4);
    transform: translateY(-10px);
}

#hubPage .about .method-step::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background: rgba(6, 95, 70, 0.3);
    border-radius: 50%;
    z-index: -1;
}

#hubPage .about .method-number {
    font-size: 36px;
    font-weight: 700;
    color: #065F46;
    margin-bottom: 20px;
    text-shadow: 0 0 20px rgba(6, 95, 70, 0.5);
}

#hubPage .about .method-text {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}

#hubPage .about .clinical-method .method-conclusion {
    font-size: 16px;
    color: #666;
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Human Data Standard */
#hubPage .about .human-data-standard {
    max-width: 1000px;
    margin: 0 auto 120px;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
}

#hubPage .about .human-data-standard::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -50px;
    width: 100px;
    height: 100px;
    background: rgba(6, 95, 70, 0.05);
    border-radius: 50%;
    z-index: -1;
}

#hubPage .about .human-data-standard.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .human-data-standard .standard-title {
    font-size: 32px;
    font-weight: 600;
    color: #0a0a0a;
    margin-bottom: 20px;
}

#hubPage .about .human-data-standard .standard-subtitle {
    font-size: 16px;
    color: #666;
    margin-bottom: 50px;
    line-height: 1.7;
}

#hubPage .about .data-types {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

#hubPage .about .data-type {
    background: linear-gradient(90deg, rgba(6, 95, 70, 0.05) 0%, transparent 100%);
    padding: 25px 30px 25px 60px;
    border-radius: 8px;
    border-left: 4px solid #065F46;
    font-size: 16px;
    color: #333;
    text-align: left;
    position: relative;
    transition: all 0.3s ease;
}

#hubPage .about .data-type::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: #065F46;
    border-radius: 50%;
}

#hubPage .about .data-type::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    width: 24px;
    height: 24px;
    background: rgba(6, 95, 70, 0.1);
    border-radius: 6px;
    transform: translateY(-50%) rotate(45deg);
}

#hubPage .about .data-type:hover {
    background: linear-gradient(90deg, rgba(6, 95, 70, 0.1) 0%, rgba(6, 95, 70, 0.02) 100%);
    transform: translateX(10px);
}

#hubPage .about .human-data-standard .data-conclusion {
    font-size: 15px;
    color: #666;
    padding-top: 30px;
    border-top: 2px solid rgba(6, 95, 70, 0.2);
    line-height: 1.7;
}

/* Data Provision */
#hubPage .about .data-provision {
    background: linear-gradient(135deg, #f8fffe 0%, #ffffff 100%);
    padding: 80px 60px;
    border-radius: 16px;
    margin-bottom: 120px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
    border: 1px solid rgba(6, 95, 70, 0.1);
}

#hubPage .about .data-provision::before {
    content: '';
    position: absolute;
    top: 30px;
    right: 30px;
    width: 150px;
    height: 150px;
    background: rgba(6, 95, 70, 0.03);
    border-radius: 50%;
}

#hubPage .about .data-provision.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .data-provision .provision-title {
    font-size: 32px;
    font-weight: 600;
    color: #0a0a0a;
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}
#hubPage .about .provision-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

#hubPage .about .provision-box {
    background: #fff;
    padding: 50px 40px;
    border-radius: 12px;
    border: 2px solid #f0f0f0;
    position: relative;
    transition: all 0.3s ease;
}

#hubPage .about .provision-box::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #065F46, transparent);
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

#hubPage .about .provision-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(6, 95, 70, 0.15);
}

#hubPage .about .provision-box:hover::before {
    opacity: 1;
}

#hubPage .about .provision-box .provision-subtitle {
    font-size: 20px;
    font-weight: 600;
    color: #065F46;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(6, 95, 70, 0.2);
}

#hubPage .about .provision-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#hubPage .about .provision-item {
    font-size: 15px;
    color: #666;
    padding-left: 30px;
    position: relative;
    line-height: 1.7;
}

#hubPage .about .provision-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 16px;
    height: 16px;
    background: rgba(6, 95, 70, 0.2);
    border-radius: 4px;
}

#hubPage .about .provision-item::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 13px;
    width: 6px;
    height: 6px;
    background: #065F46;
    border-radius: 50%;
}

/* R&D Direction */
#hubPage .about .rnd-direction {
    background: linear-gradient(135deg, #065F46 0%, #047857 100%);
    padding: 80px 60px;
    border-radius: 16px;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
    overflow: hidden;
}

#hubPage .about .rnd-direction::before {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

#hubPage .about .rnd-direction::after {
    content: '';
    position: absolute;
    bottom: -120px;
    right: -120px;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    border-radius: 50%;
}

#hubPage .about .rnd-direction.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .rnd-direction .direction-text {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.8;
    margin-bottom: 20px;
}

#hubPage .about .rnd-direction .direction-conclusion {
    font-size: 20px;
    color: #fff;
    line-height: 1.7;
}

#hubPage .about .rnd-direction strong {
    font-weight: 600;
    color: #fff;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

/* ==================== TECH PLATFORM SECTION ==================== */
#hubPage .about .tech-section {
    background: linear-gradient(180deg, #fafafa 0%, #ffffff 50%, #f8fffe 100%);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

#hubPage .about .tech-section::before {
    content: '';
    position: absolute;
    top: 15%;
    left: -150px;
    width: 500px;
    height: 500px;
    background: rgba(6, 95, 70, 0.03);
    border-radius: 50%;
}

#hubPage .about .tech-section::after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: -100px;
    width: 400px;
    height: 400px;
    background: rgba(6, 95, 70, 0.02);
    border-radius: 50%;
}

#hubPage .about .tech-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}

/* Tech Header */
#hubPage .about .tech-header {
    text-align: center;
    margin-bottom: 100px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
}

#hubPage .about .tech-header::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #065F46, transparent);
}

#hubPage .about .tech-header.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .tech-header .section-label {
    font-size: 14px;
    font-weight: 600;
    color: #065F46;
    letter-spacing: 0.15em;
    margin-bottom: 20px;
}

#hubPage .about .tech-header .tech-title {
    font-size: 48px;
    font-weight: 700;
    color: #0a0a0a;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    position: relative;
    display: inline-block;
}


#hubPage .about .tech-header .tech-subtitle {
    font-size: 18px;
    color: #666;
    line-height: 1.7;
}

/* Tech Overview */
#hubPage .about .tech-overview {
    max-width: 1000px;
    margin: 0 auto 120px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
}

#hubPage .about .tech-overview::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    background: rgba(6, 95, 70, 0.08);
    border-radius: 50%;
    z-index: -1;
}

#hubPage .about .tech-overview.visible {
    opacity: 1;
    transform: translateY(0);
}
#hubPage .about .tech-conclusion::after {
    content: '';
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    border-radius: 50%;
}

#hubPage .about .tech-conclusion.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .tech-conclusion .conclusion-text {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.8;
}

#hubPage .about .tech-conclusion strong {
    color: #fff;
    font-weight: 600;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}


/* ==================== TECH PLATFORM SECTION ==================== */
#hubPage .about .tech-section {
    background: linear-gradient(180deg, #fafafa 0%, #ffffff 50%, #f8fffe 100%);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

#hubPage .about .tech-section::before {
    content: '';
    position: absolute;
    top: 15%;
    left: -150px;
    width: 500px;
    height: 500px;
    background: rgba(6, 95, 70, 0.03);
    border-radius: 50%;
    z-index: 0;
}

#hubPage .about .tech-section::after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: -100px;
    width: 400px;
    height: 400px;
    background: rgba(6, 95, 70, 0.02);
    border-radius: 50%;
    z-index: 0;
}

#hubPage .about .tech-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}

/* Tech Header */
#hubPage .about .tech-header {
    text-align: center;
    margin-bottom: 100px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
}

#hubPage .about .tech-header::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #065F46, transparent);
}

#hubPage .about .tech-header.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .tech-header .section-label {
    font-size: 14px;
    font-weight: 600;
    color: #065F46;
    letter-spacing: 0.15em;
    margin-bottom: 20px;
}

#hubPage .about .tech-header .tech-title {
    font-size: 48px;
    font-weight: 700;
    color: #0a0a0a;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    position: relative;
    display: inline-block;
}

#hubPage .about .tech-header .tech-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: #065F46;
}

#hubPage .about .tech-header .tech-subtitle {
    font-size: 18px;
    color: #666;
    line-height: 1.7;
}

/* Tech Overview */
#hubPage .about .tech-overview {
    max-width: 1000px;
    margin: 0 auto 120px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
}

#hubPage .about .tech-overview::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    background: rgba(6, 95, 70, 0.08);
    border-radius: 50%;
    z-index: -1;
}

#hubPage .about .tech-overview.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .tech-overview .overview-title {
    font-size: 32px;
    font-weight: 600;
    color: #0a0a0a;
    text-align: center;
    margin-bottom: 40px;
}

#hubPage .about .overview-content {
    background: #fff;
    padding: 50px 40px;
    border-radius: 12px;
    border: 2px solid rgba(6, 95, 70, 0.1);
    position: relative;
}

#hubPage .about .overview-content::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    background: rgba(6, 95, 70, 0.05);
    border-radius: 10px;
    transform: rotate(10deg);
}

#hubPage .about .overview-text {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 20px;
}

#hubPage .about .overview-text:last-child {
    margin-bottom: 0;
}

/* Tech Philosophy */
#hubPage .about .tech-philosophy {
    max-width: 1000px;
    margin: 0 auto 120px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

#hubPage .about .tech-philosophy.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .tech-philosophy .philosophy-title {
    font-size: 32px;
    font-weight: 600;
    color: #0a0a0a;
    text-align: center;
    margin-bottom: 40px;
}

#hubPage .about .philosophy-box {
    background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
    padding: 50px 40px;
    border-radius: 12px;
    border: 2px solid rgba(6, 95, 70, 0.15);
    text-align: center;
    position: relative;
}

#hubPage .about .philosophy-box::before {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    width: 60px;
    height: 60px;
    background: rgba(6, 95, 70, 0.1);
    border-radius: 50%;
}

#hubPage .about .philosophy-box .philosophy-subtitle {
    font-size: 22px;
    font-weight: 600;
    color: #065F46;
    margin-bottom: 25px;
}

#hubPage .about .philosophy-box .philosophy-desc {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 35px;
}

#hubPage .about .philosophy-box .philosophy-desc strong {
    color: #065F46;
    font-weight: 600;
}

#hubPage .about .philosophy-points {
    display: flex;
    justify-content: center;
    gap: 40px;
}

#hubPage .about .philosophy-point {
    font-size: 16px;
    color: #333;
    font-weight: 500;
    padding: 15px 25px;
    background: rgba(6, 95, 70, 0.08);
    border-radius: 20px;
    position: relative;
}

#hubPage .about .philosophy-point::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: #065F46;
    border-radius: 50%;
}

/* Platform Architecture */
#hubPage .about .platform-architecture {
    background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
    padding: 80px 60px;
    border-radius: 16px;
    margin-bottom: 120px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
    border: 1px solid rgba(6, 95, 70, 0.1);
}

#hubPage .about .platform-architecture::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 40px;
    width: 100px;
    height: 100px;
    background: rgba(6, 95, 70, 0.03);
    border-radius: 20px;
    transform: rotate(15deg);
}

#hubPage .about .platform-architecture.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .platform-architecture .architecture-title {
    font-size: 32px;
    font-weight: 600;
    color: #0a0a0a;
    text-align: center;
    margin-bottom: 15px;
}

#hubPage .about .platform-architecture .architecture-subtitle {
    font-size: 16px;
    color: #999;
    text-align: center;
    margin-bottom: 60px;
}

#hubPage .about .architecture-flow {
    max-width: 800px;
    margin: 0 auto 60px;
    position: relative;
}

#hubPage .about .arch-step {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    border: 2px solid rgba(6, 95, 70, 0.15);
    margin-bottom: 20px;
    position: relative;
    transition: all 0.3s ease;
}

#hubPage .about .arch-step:hover {
    transform: translateX(10px);
    box-shadow: 0 8px 30px rgba(6, 95, 70, 0.15);
}

#hubPage .about .arch-step::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: #fff;
    border: 3px solid #065F46;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(6, 95, 70, 0.3);
}

#hubPage .about .arch-step .arch-label {
    font-size: 18px;
    font-weight: 600;
    color: #065F46;
    margin-bottom: 10px;
}

#hubPage .about .arch-step .arch-desc {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
}

#hubPage .about .arch-arrow {
    font-size: 32px;
    color: #065F46;
    text-align: center;
    margin: 10px 0;
    opacity: 0.5;
}

#hubPage .about .platform-data {
    background: linear-gradient(135deg, #065F46 0%, #047857 100%);
    padding: 50px 40px;
    border-radius: 12px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

#hubPage .about .platform-data::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

#hubPage .about .platform-data .platform-data-title {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 30px;
}

#hubPage .about .platform-data-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

#hubPage .about .platform-data-item {
    font-size: 14px;
    color: #fff;
    padding: 20px 15px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

#hubPage .about .platform-data-item:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-5px);
}

/* Core Technologies */
#hubPage .about .core-technologies {
    margin-bottom: 120px;
    position: relative;
}

#hubPage .about .core-technologies::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: rgba(6, 95, 70, 0.03);
    border-radius: 50%;
    z-index: -1;
}

#hubPage .about .core-technologies .core-title {
    font-size: 32px;
    font-weight: 600;
    color: #0a0a0a;
    text-align: center;
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

#hubPage .about .core-technologies .core-title.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .tech-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

#hubPage .about .tech-card {
    background: #fff;
    padding: 50px 40px;
    border-radius: 12px;
    border: 2px solid #f0f0f0;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
    overflow: hidden;
}

#hubPage .about .tech-card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(6, 95, 70, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

#hubPage .about .tech-card::after {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    background: rgba(6, 95, 70, 0.05);
    border-radius: 8px;
    transform: rotate(20deg);
}

#hubPage .about .tech-card.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .tech-card:nth-child(1) {
    transition-delay: 0.1s;
}

#hubPage .about .tech-card:nth-child(2) {
    transition-delay: 0.25s;
}

#hubPage .about .tech-card:nth-child(3) {
    transition-delay: 0.4s;
}

#hubPage .about .tech-card:nth-child(4) {
    transition-delay: 0.55s;
}

#hubPage .about .tech-card:hover {
    border-color: #065F46;
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(6, 95, 70, 0.2);
}

#hubPage .about .tech-card .tech-number {
    font-size: 14px;
    font-weight: 600;
    color: #065F46;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
    display: inline-block;
    padding: 5px 15px;
    background: rgba(6, 95, 70, 0.1);
    border-radius: 20px;
}

#hubPage .about .tech-card .tech-card-title {
    font-size: 22px;
    font-weight: 600;
    color: #0a0a0a;
    margin-bottom: 30px;
    line-height: 1.4;
}

#hubPage .about .tech-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}

#hubPage .about .tech-feature {
    font-size: 15px;
    color: #666;
    padding-left: 30px;
    position: relative;
    line-height: 1.7;
}

#hubPage .about .tech-feature::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 16px;
    height: 16px;
    background: rgba(6, 95, 70, 0.2);
    border-radius: 4px;
}

#hubPage .about .tech-feature::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 13px;
    width: 6px;
    height: 6px;
    background: #065F46;
    border-radius: 50%;
}

#hubPage .about .tech-card .tech-highlight {
    font-size: 15px;
    color: #065F46;
    line-height: 1.7;
    padding: 20px;
    background: rgba(6, 95, 70, 0.05);
    border-radius: 8px;
    border-left: 3px solid #065F46;
    font-weight: 500;
}

/* Platform Differentiation */
#hubPage .about .platform-diff {
    margin-bottom: 120px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

#hubPage .about .platform-diff.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .platform-diff .diff-title {
    font-size: 32px;
    font-weight: 600;
    color: #0a0a0a;
    text-align: center;
    margin-bottom: 60px;
}

#hubPage .about .diff-table {
    max-width: 1100px;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(6, 95, 70, 0.1);
    box-shadow: 0 8px 30px rgba(6, 95, 70, 0.08);
}

#hubPage .about .diff-row {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    border-bottom: 1px solid #f0f0f0;
}

#hubPage .about .diff-row:last-child {
    border-bottom: none;
}

#hubPage .about .diff-row.header {
    background: linear-gradient(135deg, #065F46 0%, #047857 100%);
}

#hubPage .about .diff-row.header .diff-cell {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 25px 30px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

#hubPage .about .diff-row.header .diff-cell:first-child {
    background: #fafafa !important;
    color: #0a0a0a !important;
}

#hubPage .about .diff-row.header .diff-cell:last-child {
    border-right: none;
}

#hubPage .about .diff-cell {
    padding: 25px 30px;
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    border-right: 1px solid #f0f0f0;
}

#hubPage .about .diff-cell.label {
    background: linear-gradient(90deg, rgba(6, 95, 70, 0.08) 0%, transparent 100%);
    font-weight: 600;
    color: #0a0a0a;
}

#hubPage .about .diff-cell:last-child {
    border-right: none;
}

#hubPage .about .diff-cell.highlight {
    font-weight: 600;
    color: #065F46;
    background: rgba(6, 95, 70, 0.03);
}

/* Scalable Platform */
#hubPage .about .scalable-platform {
    max-width: 1000px;
    margin: 0 auto 120px;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
}

#hubPage .about .scalable-platform::before {
    content: '';
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    background: rgba(6, 95, 70, 0.05);
    border-radius: 50%;
    z-index: -1;
}

#hubPage .about .scalable-platform.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .scalable-platform .scalable-title {
    font-size: 32px;
    font-weight: 600;
    color: #0a0a0a;
    margin-bottom: 20px;
}

#hubPage .about .scalable-platform .scalable-subtitle {
    font-size: 16px;
    color: #666;
    margin-bottom: 50px;
    line-height: 1.7;
}

#hubPage .about .scalable-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

#hubPage .about .scalable-item {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    border: 2px solid #f0f0f0;
    font-size: 16px;
    color: #333;
    transition: all 0.3s ease;
    position: relative;
}

#hubPage .about .scalable-item::before {
    content: '';
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    background: rgba(6, 95, 70, 0.1);
    border-radius: 50%;
}

#hubPage .about .scalable-item:hover {
    border-color: #065F46;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(6, 95, 70, 0.15);
}

#hubPage .about .scalable-platform .scalable-conclusion {
    font-size: 16px;
    color: #065F46;
    font-weight: 600;
    padding-top: 30px;
    border-top: 2px solid rgba(6, 95, 70, 0.2);
}

/* Tech Ethics */
#hubPage .about .tech-ethics {
    background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
    padding: 80px 60px;
    border-radius: 16px;
    margin-bottom: 120px;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    border: 1px solid rgba(6, 95, 70, 0.1);
    position: relative;
}

#hubPage .about .tech-ethics::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 30px;
    width: 100px;
    height: 100px;
    background: rgba(6, 95, 70, 0.03);
    border-radius: 20px;
    transform: rotate(15deg);
}

#hubPage .about .tech-ethics.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .tech-ethics .ethics-title {
    font-size: 32px;
    font-weight: 600;
    color: #0a0a0a;
    margin-bottom: 20px;
}

#hubPage .about .tech-ethics .ethics-subtitle {
    font-size: 16px;
    color: #666;
    margin-bottom: 50px;
}

#hubPage .about .ethics-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

#hubPage .about .ethics-item {
    background: #fff;
    padding: 25px 30px 25px 50px;
    border-radius: 8px;
    border-left: 4px solid #065F46;
    font-size: 16px;
    color: #333;
    text-align: left;
    position: relative;
    transition: all 0.3s ease;
}

#hubPage .about .ethics-item::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: #065F46;
    border-radius: 50%;
}

#hubPage .about .ethics-item:hover {
    transform: translateX(10px);
    box-shadow: 0 5px 20px rgba(6, 95, 70, 0.1);
}

#hubPage .about .tech-ethics .ethics-conclusion {
    font-size: 15px;
    color: #666;
    padding-top: 30px;
    border-top: 2px solid rgba(6, 95, 70, 0.2);
}

/* Tech Conclusion */
#hubPage .about .tech-conclusion {
    background: linear-gradient(135deg, #065F46 0%, #047857 100%);
    padding: 80px 60px;
    border-radius: 16px;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
    overflow: hidden;
}

#hubPage .about .tech-conclusion::before {
    content: '';
    position: absolute;
    top: -80px;
    left: -80px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

#hubPage .about .tech-conclusion::after {
    content: '';
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    border-radius: 50%;
}

#hubPage .about .tech-conclusion.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .tech-conclusion .conclusion-text {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.8;
}

#hubPage .about .tech-conclusion strong {
    color: #fff;
    font-weight: 600;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}




/* ==================== SERVICE SECTION ==================== */
#hubPage .about .service-section {
    background: linear-gradient(180deg, #ffffff 0%, #f8fffe 50%, #fafafa 100%);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

#hubPage .about .service-section::before {
    content: '';
    position: absolute;
    top: 10%;
    right: -120px;
    width: 450px;
    height: 450px;
    background: rgba(6, 95, 70, 0.04);
    border-radius: 50%;
    z-index: 0;
}

#hubPage .about .service-section::after {
    content: '';
    position: absolute;
    bottom: 15%;
    left: -100px;
    width: 400px;
    height: 400px;
    background: rgba(6, 95, 70, 0.03);
    border-radius: 50%;
    z-index: 0;
}

#hubPage .about .service-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}

/* Service Header */
#hubPage .about .service-header {
    text-align: center;
    margin-bottom: 100px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
}

#hubPage .about .service-header::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #065F46, transparent);
}

#hubPage .about .service-header::after {
    content: '';
    position: absolute;
    top: -50px;
    right: 20%;
    width: 60px;
    height: 60px;
    background: rgba(6, 95, 70, 0.08);
    border-radius: 50%;
    z-index: -1;
}

#hubPage .about .service-header.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .service-header .section-label {
    font-size: 14px;
    font-weight: 600;
    color: #065F46;
    letter-spacing: 0.15em;
    margin-bottom: 20px;
}

#hubPage .about .service-header .service-title {
    font-size: 48px;
    font-weight: 700;
    color: #0a0a0a;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    position: relative;
    display: inline-block;
}

#hubPage .about .service-header .service-subtitle {
    font-size: 18px;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.7;
}

#hubPage .about .service-header .service-desc {
    font-size: 16px;
    color: #999;
    line-height: 1.7;
}

/* Service Principle */
#hubPage .about .service-principle {
    background: linear-gradient(135deg, #065F46 0%, #047857 100%);
    padding: 80px 60px;
    border-radius: 16px;
    margin-bottom: 120px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
    box-shadow: 0 10px 40px rgba(6, 95, 70, 0.2);
    overflow: hidden;
}

#hubPage .about .service-principle::before {
    content: '';
    position: absolute;
    top: -60px;
    right: 50px;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

#hubPage .about .service-principle::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: 80px;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    transform: rotate(20deg);
}

#hubPage .about .service-principle.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .service-principle .principle-title {
    font-size: 32px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    margin-bottom: 15px;
}

#hubPage .about .service-principle .principle-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    margin-bottom: 60px;
}

#hubPage .about .principle-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 50px;
    position: relative;
}

#hubPage .about .flow-item {
    background: rgba(255, 255, 255, 0.95);
    padding: 20px 30px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    font-size: 15px;
    color: #065F46;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

#hubPage .about .flow-item::before {
    content: '';
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    background: rgba(6, 95, 70, 0.3);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.3s ease;
}

#hubPage .about .flow-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

#hubPage .about .flow-item:hover::before {
    opacity: 1;
    top: -8px;
    right: -8px;
}

#hubPage .about .flow-arrow {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.6);
}

#hubPage .about .principle-highlight {
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
}

#hubPage .about .principle-highlight::before {
    content: '';
    position: absolute;
    top: 30px;
    left: -20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transform: rotate(15deg);
}

#hubPage .about .principle-highlight p {
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 10px;
}

#hubPage .about .principle-highlight p:last-child {
    margin-bottom: 0;
}

/* Service Cards */
#hubPage .about .service-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-bottom: 120px;
}

#hubPage .about .service-card {
    background: #fff;
    border: 2px solid #f0f0f0;
    border-radius: 16px;
    padding: 50px 40px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
    overflow: hidden;
}

#hubPage .about .service-card::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(6, 95, 70, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

#hubPage .about .service-card::after {
    content: '';
    position: absolute;
    bottom: 25px;
    left: 25px;
    width: 50px;
    height: 50px;
    background: rgba(6, 95, 70, 0.05);
    border-radius: 10px;
    transform: rotate(15deg);
}

#hubPage .about .service-card.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .service-card:nth-child(1) {
    transition-delay: 0s;
}

#hubPage .about .service-card:nth-child(2) {
    transition-delay: 0.15s;
}

#hubPage .about .service-card:nth-child(3) {
    transition-delay: 0.3s;
}

#hubPage .about .service-card:nth-child(4) {
    transition-delay: 0.45s;
}

#hubPage .about .service-card:hover {
    border-color: #065F46;
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(6, 95, 70, 0.2);
}

#hubPage .about .service-card .card-number {
    font-size: 32px;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

#hubPage .about .service-card .card-number::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: -10px;
    width: 30px;
    height: 30px;
    background: rgba(6, 95, 70, 0.1);
    border-radius: 50%;
    z-index: -1;
}

#hubPage .about .service-card .card-title {
    font-size: 26px;
    font-weight: 600;
    color: #0a0a0a;
    margin-bottom: 10px;
}

#hubPage .about .service-card .card-tagline {
    font-size: 16px;
    color: #065F46;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 2px solid rgba(6, 95, 70, 0.15);
    font-weight: 500;
}

#hubPage .about .card-content {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

#hubPage .about .card-section .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #065F46;
    margin-bottom: 15px;
    position: relative;
    padding-left: 20px;
}

#hubPage .about .card-section .section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: #065F46;
    border-radius: 3px;
}

#hubPage .about .section-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#hubPage .about .section-list li {
    font-size: 15px;
    color: #666;
    padding-left: 30px;
    position: relative;
    line-height: 1.7;
}

#hubPage .about .section-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 16px;
    height: 16px;
    background: rgba(6, 95, 70, 0.2);
    border-radius: 4px;
}

#hubPage .about .section-list li::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 13px;
    width: 6px;
    height: 6px;
    background: #065F46;
    border-radius: 50%;
}

#hubPage .about .card-experience {
    background: linear-gradient(90deg, rgba(6, 95, 70, 0.05) 0%, transparent 100%);
    padding: 25px 25px 25px 50px;
    border-radius: 8px;
    border-left: 4px solid #065F46;
    position: relative;
}

#hubPage .about .card-experience::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: #065F46;
    border-radius: 50%;
}

#hubPage .about .card-experience::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 20px;
    width: 30px;
    height: 30px;
    background: rgba(6, 95, 70, 0.08);
    border-radius: 6px;
    transform: rotate(45deg);
}

#hubPage .about .card-experience .experience-label {
    font-size: 14px;
    font-weight: 600;
    color: #065F46;
    margin-bottom: 10px;
}

#hubPage .about .card-experience .experience-text {
    font-size: 16px;
    color: #0a0a0a;
    line-height: 1.7;
    font-weight: 500;
}

/* Service Result */
#hubPage .about .service-result {
    background: linear-gradient(135deg, #065F46 0%, #047857 100%);
    padding: 80px 60px;
    border-radius: 16px;
    margin-bottom: 120px;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(6, 95, 70, 0.25);
}

#hubPage .about .service-result::before {
    content: '';
    position: absolute;
    top: -80px;
    left: -80px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
    border-radius: 50%;
}

#hubPage .about .service-result::after {
    content: '';
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    border-radius: 50%;
}

#hubPage .about .service-result.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .service-result .result-number {
    font-size: 32px;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

#hubPage .about .service-result .result-number::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: -15px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    z-index: -1;
}

#hubPage .about .service-result .result-title {
    font-size: 32px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
}

#hubPage .about .service-result .result-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 50px;
    line-height: 1.7;
}

#hubPage .about .result-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 800px;
    margin: 0 auto 40px;
}

#hubPage .about .result-item {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 12px;
    border-left: 4px solid #fff;
    border: 2px solid rgba(255, 255, 255, 0.2);
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    position: relative;
    transition: all 0.3s ease;
}

#hubPage .about .result-item::before {
    content: '';
    position: absolute;
    top: 15px;
    right: 15px;
    width: 25px;
    height: 25px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

#hubPage .about .result-item::after {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 15px;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    transform: rotate(15deg);
}

#hubPage .about .result-item:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-5px);
}

#hubPage .about .service-result .result-conclusion {
    font-size: 20px;
    color: #fff;
    font-weight: 600;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

#hubPage .about .service-result strong {
    color: #fff;
    font-weight: 700;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

/* Service Essence */
#hubPage .about .service-essence {
    max-width: 1000px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    position: relative;
}

#hubPage .about .service-essence::before {
    content: '';
    position: absolute;
    top: -40px;
    left: -40px;
    width: 100px;
    height: 100px;
    background: rgba(6, 95, 70, 0.05);
    border-radius: 20px;
    transform: rotate(20deg);
    z-index: -1;
}

#hubPage .about .service-essence::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 120px;
    height: 120px;
    background: rgba(6, 95, 70, 0.03);
    border-radius: 50%;
    z-index: -1;
}

#hubPage .about .service-essence.visible {
    opacity: 1;
    transform: translateY(0);
}

#hubPage .about .service-essence .essence-title {
    font-size: 32px;
    font-weight: 600;
    color: #0a0a0a;
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}
#hubPage .about .essence-table {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(6, 95, 70, 0.1);
    box-shadow: 0 8px 30px rgba(6, 95, 70, 0.08);
}

#hubPage .about .essence-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #f0f0f0;
}

#hubPage .about .essence-row:last-child {
    border-bottom: none;
}

#hubPage .about .essence-row.header {
    background: linear-gradient(135deg, #065F46 0%, #047857 100%);
}

#hubPage .about .essence-row.header .essence-cell {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    padding: 30px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
}

#hubPage .about .essence-row.header .essence-cell::before {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
}

#hubPage .about .essence-row.header .essence-cell:last-child {
    border-right: none;
}

#hubPage .about .essence-cell {
    padding: 30px;
    font-size: 16px;
    color: #666;
    line-height: 1.7;
    text-align: center;
    border-right: 1px solid #f0f0f0;
    position: relative;
}

#hubPage .about .essence-cell::after {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 15px;
    width: 15px;
    height: 15px;
    background: rgba(6, 95, 70, 0.05);
    border-radius: 3px;
    transform: rotate(15deg);
}

#hubPage .about .essence-cell:last-child {
    border-right: none;
}

#hubPage .about .essence-cell.highlight {
    font-weight: 600;
    color: #065F46;
    background: linear-gradient(90deg, rgba(6, 95, 70, 0.03) 0%, transparent 100%);
}

#hubPage .about .essence-cell.highlight::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #065F46;
}


/* Responsive */
@media (max-width: 1024px) {
    #hubPage .about .why-finx {
        padding: 80px 0;
    }

    #hubPage .about .limitation-grid,
    #hubPage .about .difference-cards {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    #hubPage .about .question-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    #hubPage .about .service-cards {
        grid-template-columns: 1fr;
    }

    #hubPage .about .result-items {
        grid-template-columns: 1fr;
    }
}
/* Responsive */
@media (max-width: 768px) {

    #hubPage .about .main-desc,
    #hubPage .about .rnd-section .container,
    #hubPage .about .tech-section .container{
        width: 90%;
        margin: 0 auto;
    }

    #hubPage .about .rnd-section .container,
    #hubPage .about .tech-section .container{
        padding: 0;
    }

    #hubPage .about .process-steps{
        flex-direction: column;
    }
    #hubPage .about .hero h1 {
        font-size: 48px;
    }

    #hubPage .about .main-title,
    #hubPage .about .final-title,
    #hubPage .about .rnd-header .rnd-title,
    #hubPage .about .research-structure .structure-title,
    #hubPage .about .clinical-method .method-title,
    #hubPage .about .data-provision .provision-title,
    #hubPage .about .tech-header .tech-title,
    #hubPage .about .service-principle .principle-title,
    #hubPage .about .service-header .service-title{
        font-size: 1.4rem;
        line-height: 1.5;
    }

    #hubPage .about .why-header{
        margin-bottom: 50px;
    }

    #hubPage .about .main-title::after {
        display: none;
    }

    #hubPage .about .philosophy-points{
        flex-direction: column;
    }
    #hubPage .about .main-text {
        font-size: 1rem;
        width: 100%;
        padding: 30px;
    }

    #hubPage .about .step {
        flex-direction: column;
        margin-bottom: 0;
    }
    #hubPage .about .arrow{
        opacity: 1;
        transform: rotate(90deg) !important;
    }
    #hubPage .about .step-number {
        margin-bottom: 20px;
        margin-right: 0;
        font-size: 72px;
    }

    #hubPage .about .research-structure,
    #hubPage .about .why-rnd-content,
    #hubPage .about .step-content,
    #hubPage .about .starting-content,
    #hubPage .about .clinical-method,
    #hubPage .about .data-provision,
    #hubPage .about .overview-content,
    #hubPage .about .platform-architecture,
    #hubPage .about .tech-ethics{
        padding: 40px 30px;
    }

    #hubPage .about .data-standard,
    #hubPage .about .final-text,
    #hubPage .about .provision-box,
    #hubPage .about .rnd-direction,
    #hubPage .about .diff-cell,
    #hubPage .about .scalable-item{
        padding: 20px;
    }

    #hubPage .about .process-subtitle {
        font-size: 32px;
    }
    #hubPage .about .research-flow .flow-arrow {
        transform: rotate(0deg) !important;
    }

    #hubPage .about .final-grid ,
    #hubPage .about .standard-items,
    #hubPage .about .method-steps,
    #hubPage .about .provision-grid,
    #hubPage .about .platform-data-items,
    #hubPage .about .tech-cards,
    #hubPage .about .ethics-items{
        grid-template-columns: 1fr;
    }

    #hubPage .about .final .container,
    #hubPage .about .why-finx .container{
        padding: 0;
        width: 90%;
        margin: 0 auto;
    }
    #hubPage .about .arrow::before,
    #hubPage .about .arrow::after {
        width: 100px;
    }

    #hubPage .about .method-step::before {
        top: -15px;
        width: 30px;
        height: 30px;
    }

    #hubPage .about .diff-row{
        grid-template-columns: repeat(3, 1fr);
    }


    #hubPage .about .why-header .why-title {
        font-size: 36px;
    }

    #hubPage .about .starting-point,
    #hubPage .about .limitation-section{
        padding : 0
    }
    #hubPage .about .comparison-table{
        display: block;
    }
    #hubPage .about .why-finx .container,
    #hubPage .about .difference-cards,
    #hubPage .about .comparison-section {
        padding: 0;
    }

    #hubPage .about .limitation-left .limitation-title,
    #hubPage .about .starting-content .starting-title,
    #hubPage .about .difference-section .difference-title,
    #hubPage .about .comparison-section .comparison-title {
        font-size: 28px;
    }
    #hubPage .about .comparison-section .comparison-title{
        padding-top: 40px;
    }

    #hubPage .about .limitation-right,
    #hubPage .about .diff-card,
    #hubPage .about .limitation-left{
        padding: 35px 25px;
    }

    #hubPage .about .starting-answer::before{
        top: 20px;
    }

    #hubPage .about .question-card {
        padding: 30px 25px;
    }

    #hubPage .about .purpose-section,
    #hubPage .about .starting-answer {
        padding: 35px 25px;
    }

    #hubPage .about .purpose-content .purpose-text {
        font-size: 18px;
    }

    #hubPage .about .comparison-row {
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }

    #hubPage .about .comparison-row.header .comparison-cell:first-child {
        border-right: none;
        border-bottom: 1px solid #2a2a2a;
    }

    #hubPage .about .comparison-cell {
        border-right: none;
        border-bottom: 1px solid #e5e5e5;
    }

    #hubPage .about .comparison-cell:last-child {
        border-bottom: none;
    }
    #hubPage .about .service-section {
        padding: 80px 0;
    }

    #hubPage .about .service-section .container {
        padding: 0 20px;
    }

    #hubPage .about .service-principle {
        padding: 50px 30px;
    }

    #hubPage .about .principle-flow {
        flex-direction: column;
    }

    #hubPage .about .flow-arrow {
        transform: rotate(90deg);
    }

    #hubPage .about .service-card {
        padding: 40px 30px;
    }

    #hubPage .about .service-result {
        padding: 50px 30px;
    }

    #hubPage .about .essence-table {
        font-size: 14px;
    }

    #hubPage .about .essence-cell {
        padding: 20px 15px;
    }
}


/*허브 페이지 끝 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
































/* 컨텐츠 목록 끝 **************/


/* 상세페이지 시작 *******/
#content .cont-inner{
    width: 100%;
    margin: 0 auto;
    position: relative;
}
#content .contentDetail .lft,
#content .productDetail .lft{
    overflow-y: auto;
    width: 100%;
    margin: 0 auto 150px;
    scrollbar-width: none;
}
#content .contentDetail .lft .lft-inner,
#content .productDetail .lft .lft-inner{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

}
#content .contentDetail .lft .top,
#content .productDetail .lft .top,
#moneyPrediction .top{
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin: 50px 0;
    height: 380px;
}
#content .contentDetail .lft .top .wrap,
#moneyPrediction .top wrap{
    width: 60%;
}
#content .contentDetail .lft .top h3,
#content .productDetail .lft .top h3,
#moneyPrediction .top h3{
    font-weight: 600;
    font-size: 34px;
    margin-bottom: 20px;
}
#content .contentDetail .lft .top .cost{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#content .contentDetail .lft .top span{
    position: relative;
    display: inline-block;
}
#content .contentDetail .lft .top b,
#content .productDetail .lft .top b{
    font-weight: 700;
    margin-bottom: 20px;
    display: block;
    font-size: 28px;
    color: #065F46;
    line-height: 1.8;
}
#content .contentDetail .lft .top .tabArea,
#content .productDetail .lft .top .tabArea,
#moneyPrediction .top .tabArea{
    width: 100%;
    display: flex;
    gap: 1rem;
    flex-direction: column;
    position: relative;
}
#content .contentDetail .lft .top .tabArea #allDataBtn:after,
#content .productDetail .lft .top .tabArea #allDataBtn:after,
#moneyPrediction .top .tabArea #allDataBtn:after{
    display: block;
    content: '>';
    transform: rotate(90deg) translateX(-50%);
    color: #b7b7b7;
    font-size: 16px;
    font-weight: 200;
    position: absolute;
    top: 50%; right: 10px;
}
#content .contentDetail .lft .top .tabArea #allDataBtn,
#content .productDetail .lft .top .tabArea #allDataBtn,
#moneyPrediction .top .tabArea #allDataBtn{
    position: relative;
    text-align: left;
    border: 1px solid transparent;
    border-bottom: 1px solid #eee;
    background-color: transparent;
    font-size: 16px;
    color: #666;
    padding: 10px 0;
    cursor: pointer;
}

#content .contentDetail .lft .top #allDataCont,
#content .productDetail .lft .top #allDataCont,
#moneyPrediction .top .tabArea #allDataCont{
    color: #333;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease-in-out, opacity .1s ease;
}
#content .contentDetail .lft .top #allDataCont.show,
#content .productDetail .lft .top #allDataCont.show,
#moneyPrediction .top .tabArea #allDataCont.show{
    opacity: 1;
    transition-delay: .2s;
    max-height: 30px;
}
#content .contentDetail .lft .total{
    display: none!important;
    width: 100%;
    font-size: 24px;
    border-top: 1px solid #b7b7b7;
    padding-top: 30px;
    /*display: flex;*/
    font-weight: 800;
    letter-spacing: 1px;
}
#content .contentDetail .lft .total span{
    display: inline-block;
    margin-right: 10px;
    font-weight: 600;
}
#content .contentDetail .lft .total strong{
    display: block;
    font-weight: 800;
}
#content .contentDetail .lft .bottom{
    margin-left: auto;
    display: flex;
    align-items: center;
    width: 30%;
}
#content .contentDetail .lft .btnBox{
    display: flex;
    width: 100%;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}


#content .contentDetail .explain,
#moneyPrediction .lft .explain{
    margin: 30px 0 50px;
    font-size: 14px;
    line-height: 28px;
    color: #666;
}
#content .contentDetail .explain {
    max-width: 800px;
    margin: 50px auto 0;
}
#content .contentDetail .explain .hero-box {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 10px;
    padding: 2rem 1rem;
    color: #fff;
    margin-bottom: 40px;
    box-shadow: 0 8px 24px rgba(6, 95, 70, 0.15);
}
#content .contentDetail .explain .hero-box h2{
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.4;
}
#content .contentDetail .explain .hero-box p {
    line-height: 1.8;
    opacity: 0.95;
    margin: 0;
    font-size: .95rem;
}
#content .contentDetail .explain .simple-card {
    border: 1px solid var(--primary);
    border-radius: 10px;
    padding: 1.2rem;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    background-color: #fff;
}
#content .contentDetail .explain .simple-card p{
    line-height: 1.8;
    color: var(--primary);
    font-size: 1rem;
}
#content .contentDetail .explain .simple-card strong{
    color: var(--primary);
}
#content .contentDetail .explain .info-card {
    background: white;
    border: 1px solid var(--primary);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}
#content .contentDetail .explain .info-card:hover {
    border-color: var(--primary-light);
    box-shadow: 0 4px 16px rgba(6, 95, 70, 0.08);
    transform: translateY(-2px);
}
#content .contentDetail .explain .info-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
#content .contentDetail .explain .info-card .emoji {
    font-size: 1.5rem;
}
#content .contentDetail .explain .info-card .cont {
    color: var(--primary-light);
    font-size: .95rem;
    line-height: 1.8;
}
#content .contentDetail .explain .info-card .cont strong {
    color: var(--primary);
    font-weight: 600;
}
#content .contentDetail .explain .bullet-list {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}
#content .contentDetail .explain .bullet-list li {
    padding-left: 20px;
    margin-bottom: 10px;
    position: relative;
    color: var(--primary-light);
    font-size: 1rem;
    line-height: 1.7;
}
#content .contentDetail .explain .bullet-list li:before {
    content: "•";
    color: var(--primary);
    font-weight: bold;
    position: absolute;
    left: 8px;
}
#content .contentDetail .explain .bullet-list li strong {
    color: var(--primary);
    display: block;
    margin-bottom: 8px;
}
#content .contentDetail .explain .highlight-box {
    background: rgba(47, 164, 127, 0.2);
    border-left: 4px solid var(--primary);
    border-radius: 12px;
    padding: 24px 28px;
    margin: 24px 0;
}
#content .contentDetail .explain .highlight-box p {
    color: var(--primary);
    font-size: 1rem;
    line-height: 1.8;
    margin: 0;
}
#content .contentDetail .explain .highlight-box strong {
    color: var(--primary);
    font-weight: 600;
}
#content .contentDetail .explain .process-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 24px 0;
}
#content .contentDetail .explain .process-item {
    background: white;
    border: 1px solid var(--primary);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
}
#content .contentDetail .explain .process-item:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}
#content .contentDetail .explain .process-item .label {
    font-weight: 600;
    color: var(--primary);
    font-size: 1rem;
    margin-bottom: 8px;
}
#content .contentDetail .explain .process-item .desc {
    font-size: .95rem;
    color: var(--primary-light);
    line-height: 1.5;
}
#content .contentDetail .explain .process-item:hover .desc {
    color : #fff;
}
#content .contentDetail .explain .cta-box {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border: 2px solid var(--primary);
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    margin-top: 48px;
}
#content .contentDetail .explain .cta-box p {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary);
    margin: 0;
}
#content .contentDetail .explain .cta-box .emoji {
    font-size: 28px;
    margin-right: 8px;
}
#content .contentDetail .explain .pattern-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 24px 0;
}
#content .contentDetail .explain .pattern-item {
    background: var(--primary-light);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 1px solid var(--primary);
    transition: all 0.3s ease;
}
#content .contentDetail .explain .pattern-item:hover {
    background: white;
    border-color: var(--primary);
    transform: translateY(-2px);
}
#content .contentDetail .explain .pattern-item .icon {
    font-size: 32px;
    margin-bottom: 8px;
}
#content .contentDetail .explain .pattern-item .title {
    font-weight: 600;
    color: var(--primary);
    font-size: 16px;
}









#content .contentDetail .lft .btnBox button{
    letter-spacing: 1px;
    width: 50%;
}
#content .contentDetail .lft .btnBox button.cart{
    border-color: #b7b7b7;
    background-color: #eee;
    color: #333;
}

#content .contentDetail .lft .btnBox button a{
    color: #333;
    display: block;
}
#content .contentDetail .rgt,
#content .producttDetail .rgt{
    width: 100%;
}

#content .contentDetail .rgt .rgt-inner,
#content .productDetail .rgt .rgt-inner{
    max-width: 1200px;
    margin: 0 auto;
}
#content .contentDetail .rgt .imgWrap,
#content .productDetail .rgt .imgWrap{
    width: 100%;
}



/*npti 상세페이지 시작 ---------------------------------------------------------*/
#content .container{ width: 100%;}
.container.nptiArea ul.tabMenu{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin-bottom: 150px;
}
.container.nptiArea .tabMenu li{
    width: 100%;
    text-align: center;
    color :#666;
    padding: 1rem;
    font-size: 1.3rem;
    border-bottom: 2px solid #eee;
    font-weight: 500;
}
.container.nptiArea .tabMenu li.on{
    font-weight: 800;
    color: #065F46;
    border-bottom: 2px solid #065F46;
}
#nptiInfo-content,
#nptiDetail-content,
#msigInfo-content,
#finMind-content,
#review-container .inn-box,
.finCouple-content {
    display: flex;
    flex-direction: column;
    gap: 150px;
}
#content .container span.smallTit{
    font-size: .9rem;
}
#content .container .point{
    color: #059669;
    line-height: 1.5;
    font-weight: 700;
}
#content .container strong.quest{
    font-size: 1.4rem;
    line-height: 2;
    margin-bottom: 30px;
    background-color: #fff;
    border-bottom: 1px solid rgba(6, 95, 70, 0.4);
    padding-bottom: 20px;
    align-items: center;
    display: flex;
    gap: 10px;
    font-weight: 600;
    color: #333;
}
#content .container strong.lastTit{
    font-size: 1.3rem;
    line-height: 2;
    margin-bottom: 30px;
    align-items: center;
    display: block;
    gap: 10px;
    text-align: center;
    font-weight: 600;
    color: #fff;
}
#content .container strong.quest .ico{
    width: 30px;
    height: 30px;
    background: linear-gradient(45deg, #1cc792, #065f46);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}
#content .container .subScript{
    line-height: 1.6;
    font-size: 1.1rem;
    font-weight: 500;
    color: #333;
}
#content .container .lastTxt{
    text-align: center;
    line-height: 1.6;
    font-size: 1.1rem;
    font-weight: 500;
    color: #fff;
}
#content .container .subScript.styleAdd{
    margin-bottom: 30px;
}
#content .container #nptiDetail-content .qBox:nth-of-type(2),
#content .container #finMind-content .qBox:nth-of-type(4),
#content .container #finMind-content .qBox:nth-of-type(7) .inn-box,
#content .container #finMind-content .qBox:nth-of-type(5) .inn-box,
#content .container #msigInfo-content .qBox.msig-gapStyle,
#content .container #msigInfo-content .qBox.msig-using,
#content .container .finCouple-content .qBox .inn-box,
#content .container .finCouple-content .qBox .inn-box.flexStyle{
    display: flex; flex-direction: column; gap: 100px;
}
#content .container #msigInfo-content .qBox.msig-gapStyle > p.subScript,
#content .container #msigInfo-content .qBox.msig-gapStyle .inn-box:first-of-type{
    margin-top: -100px;
}
#content .container strong.tit{
    line-height: 1.5;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 20px;
    display: block;
}
#content .container table,
.member_details_wrap .table{
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    box-shadow: 0 8px 15px rgba(1,1,1,.2);
    border-radius: 10px;
}

#content .container table th,
.member_details_wrap table th{
    padding: 20px 5px;
    line-height: 2;
    text-align: center;
    vertical-align: middle;
    font-size: 1.2rem;
    background-color: #059669;
    color: #fff;
    border-radius: 10px 10px 0 0;
    font-weight: 700;
}
#content .container table td,
.member_details_wrap table td{
    padding: 20px 5px;
    word-break: break-word;
    font-size: 1rem;
    line-height: 2;
    color: #333;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
#content .container table td.th,
.member_details_wrap table td.th{
    font-weight: 700;
}
#content .container table td:last-child,
.member_details_wrap table td:last-child{
    border-right: unset;
}
#content .container .testClock{
    color: #333;
    font-weight: 600;
    margin-top: 30px;
}
#content .container .reportSampleTxt{
    text-align: center;
    display: block;
    color: #666;
}

#finMind-content .qBox:last-of-type strong.quest{
    text-align: center;
    border: unset;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    color: #065F46;
}

#content .container span.small{font-weight: 400; color: #666;font-size: .9rem; line-height: 1.3}
#content .container #review-container .reviewArea{
    border-radius: 10px;
    box-shadow: 0 8px 15px rgba(1,1,1,.2);
}
#content .container #review-container .top{
    background-color: #059669;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 10px 10px 0 0;
    padding: 1rem;
}
#content .container #review-container p{
    font-size: 1rem;
    color: #333;
    padding: 1rem;
    line-height: 2;
}


#nptiInfo-content .intro .imgWrap{
    margin-bottom: 50px;
    width: 100%;
}
#nptiInfo-content .intro h3{
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
}
#nptiInfo-content .intro > *:nth-of-type(2){
    border: 1px solid rgba(0, 105, 52, 0.3);
    background-color: #fafafa;
    margin-bottom: 30px;
    border-radius: 5px;
    padding: 1.2rem .8rem;
}

#nptiInfo-content .intro p{
    font-size: .95rem;
    text-align: center;
    font-weight: 500;
    line-height: 1.8;
}
#nptiInfo-content .qBox span.small{
    font-size: .9rem;
    font-weight: 500;
    display: block;
    margin-bottom: 15px;
}
#nptiInfo-content .marginStyle{
    margin-bottom : 30px;
}
#nptiInfo-content .btnWrap{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 20px auto;
}
#nptiInfo-content .btnWrap button {
    background-color: #fff; display: block; border-color: #fff;
    min-width: 140px; transition: all .2s ease-in-out;
}
#nptiInfo-content .btnWrap button .small{
    margin: 0; display: inline-block;
}
#nptiInfo-content .btnWrap button:hover{
    background-color: #fafafa; transform: translateY(-2px);
}



/*경제 심리 시작 ---------------------------------------------------*/
#finMind-content ul.finMind-cuz,
#msigInfo-content ul.msig-purpose,
#msigInfo-content ul.msig-cuz,
.finCouple-content ul.finCouple-cuz,
#nptiInfo-content ul{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
#finMind-content ul.finMind-cuz li,
#msigInfo-content ul.msig-purpose li,
#msigInfo-content ul.msig-cuz li,
.finCouple-content ul.finCouple-cuz li,
#nptiInfo-content ul li{
    line-height: 1.4;
    background-color: rgba(0,23,51,0.02);
    border-radius: 10px;
    padding: 1rem;
    border:  1px solid rgba(0,23,51,0.1);
}
#finMind-content ul.finMind-cuz li.hightLight,
#msigInfo-content ul.msig-purpose li.hightLight,
#msigInfo-content ul.msig-cuz li.hightLight,
.finCouple-content ul.finCouple-cuz li.hightLight,
#nptiInfo-content ul li.hightLight{
    border: 1px solid #059669;
}
#finMind-content table td.hightLight{
    background-color: rgba(5, 150, 105, 0.05);
}


#finMind-content ul.finMind-cuz li:hover,
#msigInfo-content ul.msig-purpose li:hover,
#msigInfo-content ul.msig-cuz li:hover,
.finCouple-content ul.finCouple-cuz li:hover,
#nptiInfo-content ul li:hover{
    transition: .3s ease-in-out;
    transform: scale(1.05);

}
/*msig 시작 ---------------------------------------------------*/
#msigInfo-content .msigChapter .subScript{
    font-size: 1.2rem;
    text-align: center;
    color: #065F46;
}
#msigInfo-content .msigChapter .gifWrap{
    width: 40%;
    margin: 0 auto;
}

#msigInfo-content .peoplePicArea{
    display: flex;
    gap: 15px;
}
#msigInfo-content .peopleBox:nth-child(2),#msigInfo-content .peopleBox:nth-child(3){
    margin-top: 100px;
}
#msigInfo-content .peoplePicArea .explain{
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    font-size: 1rem;
     color: #333;
    font-weight: 500;
}

#msigInfo-content .msig-background{
    position: relative;
    margin: 0 auto;
    width: 600px;
    height: 600px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    padding: 50px;
}
#msigInfo-content .msig-background .process-circle {
    position: relative;
    width: 100%;
    height: 100%;
}
#msigInfo-content .msig-background .process-item {
    position: absolute;
    width: 180px;
    height: 90px;
    border-radius: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#msigInfo-content .msig-background .process-item:hover {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

#msigInfo-content .msig-background .process-item.planning {
    top: 25%;
    left: 50%;
    background: linear-gradient(135deg, #16773f 0%, #65621b 100%);
}

#msigInfo-content .msig-background .process-item.action {
    top: 64%;
    right: -20%;
    background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
}

#msigInfo-content .msig-background .process-item.result {
    top: 64%;
    left: 20%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

#msigInfo-content .msig-background .center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #065F46;
    font-weight: bold;
}

#msigInfo-content .msig-background .center-main {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

#msigInfo-content .msig-background .center-sub {
    font-size:1rem;
    border-bottom: 2px dotted #065F46;
    padding-bottom: 2px;
}

#msigInfo-content .msig-background .arrow {
    position: absolute;
    width: 60px;
    height: 60px;
    opacity: 0.8;
}

#msigInfo-content .msig-background .arrow svg {
    width: 100%;
    height: 100%;
    fill: #e74c3c;
}

#msigInfo-content .msig-background .arrow.arrow1 {
    top: 35%;
    right: 15%;
    transform: rotate(-120deg);
}

#msigInfo-content .msig-background .arrow.arrow2 {
    top: 60%;
    left: 50%;
    transform: translateX(-50%) ;
}

#msigInfo-content .msig-background .arrow.arrow3 {
    top: 35%;
    left: 15%;
    transform: rotate(130deg);
}

#msigInfo-content .msig-background .side-labels {
    position: absolute;
    font-size: 24px;
    font-weight: bold;
    color: #666;
}

#msigInfo-content .msig-background .label-left {
    left: -80px;
    top: 50%;
    transform: translateY(-50%);
}

#msigInfo-content .msig-background .label-right {
    right: -80px;
    top: 50%;
    transform: translateY(-50%);
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#msigInfo-content .msig-background .process-item .text-line1 {
    display: block;
}

#msigInfo-content .msig-background .process-item .text-line2 {
    display: block;
    font-size: 16px;
    margin-top: 2px;
}

#msigInfo-content .inn-box .reportEx {
    display: flex;
    justify-content: space-between;
}
#msigInfo-content .inn-box .reportEx .imgWrap{
    width: 45%;
    position: relative;
}
#msigInfo-content .inn-box .reportEx .blurBack{
    width: 100%;
    height: 90%;
    position: absolute;
    top: 10%;
    left: 0; right: 0;
    backdrop-filter: blur(2px);
    background-color: rgba(255,255,255,.2);
}
#msigInfo-content .inn-box .reportEx .imgWrap img{
    width: 100%; object-fit: contain;
}


#msigInfo-content .formula {
    font-size: 16px;
    margin: 0 auto 50px;
    line-height: 1.8;
    color: #444;
    padding: 1rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    max-width: 900px;
    text-align: center;
}
#content .container #finMind-content .qBox:last-of-type,
#content .container #msigInfo-content .qBox:last-of-type{
    background-color: rgba(6, 95, 70, 0.8);
    border-radius: 10px;
    padding:  2rem 1rem;
}
#content .container #finMind-content .qBox:last-of-type button,
#content .container #msigInfo-content .qBox:last-of-type button{
    width: 300px;
    margin: 50px auto 0;
    background-color: #fff;
    display: block;
}





.btInfo{
    transition: bottom 0.5s ease;
    position: fixed;
    padding: 1rem;
    z-index: 200;
    bottom: -300px;
    left: 0; right: 0;
    height: 100px;
    width: 100%;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    background-color: #fff;
}
.btInfo.show{
    bottom: 0;
}
.btInfo .btInfo-inner{
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.btInfo .btInfo-inner h3{
    font-size: 20px;
    font-weight: 700;
}
.btInfo .costArea strong{
    display: block;
    font-size: 22px;
    font-weight: 800;
}
.btInfo .btnBox{
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    width: 40%;
}
.btInfo .btnBox button.submit{
    width: 40%;
}
/* 상세페이지 강사 시작 -------------------------------------------/*/
#content .productDetail .lft .lft-inner{
    position: relative;
}
#content .productDetail .contain{
    height: 100%;
    display: flex;
    gap: 50px;
}
#content .productDetail .contain .imgWrap{
    overflow: hidden;
    width: 300px;
    height: 380px;
}
#content .productDetail .contain .imgWrap img{
    height: 100%; width: 100%;
    object-fit: contain;
}
#content .productDetail .contain ul{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
#content .productDetail .contain ul li:first-of-type .txt{
    display: flex;
}
#content .productDetail .lft .top{
    align-items: center;
}
#content .productDetail .bottom{
    position: sticky;
    top: 20px;
    right: 0;
}
#content .productDetail .bottom button{
    width: 100%;;
}

#content .productDetail .contain .tit,
#content .productDetail .start .tit{
    margin-bottom: 15px;
    font-weight: 700;
    color: #333;
    font-size: 1.2rem;
    padding-bottom: 20px;
    display: block;
}
#content .productDetail .contain .txt,
#content .productDetail .start .txt{
    font-size: 1rem;
    display: flex;
    gap: 5px;
    align-items: center;
}
#content .productDetail .start{
    display: flex;
    flex-direction: column;
    gap: 50px;
}
#content .productDetail .start .tit .emoji{
    display: inline-block;
    margin-right: 10px;
}
#content .productDetail .start .txt{
    line-height: 2rem;
}
#content .productDetail .start li:not(.tit){
    padding-left: 28px;
    position: relative;
}
#content .productDetail .start li:not(.tit):before{
    font-size: 1rem;
    color: #333;
    content: '▪';
    position: absolute; top: 50%; left: 10px; transform: translateY(-50%);
}
#content .productDetail .start .txt a{
    text-decoration: underline;
    color: #065F46;
}

/* 상세페이지 강사 리뉴얼 시작 -------------------------------------------/*/
#content .expertDetail .contain .left{
    height: 100%;
}
#content .expertDetail .contain .imgWrap{
    border: 1px solid #f1f1f1;
}
#content .expertDetail .bottom{
    width: 40%;
}
#content .expertDetail .lft button{
    width: 100%;
}
#content .expertDetail .lft button:hover{
    background-color: #059669;
}
#content .expertDetail .infoWrap{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#content .expertDetail table{
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}
#content .expertDetail table td {
    vertical-align: middle;
    padding: 15px;
    line-height: 1.4;
    border: 1px solid #f1f1f1;
    font-size: .95rem;
}
#content .expertDetail table td.expertName{
    display: flex; gap: 10px;
    align-items: center;
}
#content .expertDetail table td span{
    display: flex;
    gap: 5px;
}
#content .expertDetail table .th{
    width: 18%;
    text-align: center;
    font-weight: 700;
    color: #333;
    font-size: 1rem;
}
#content .expertDetail table .star p{
    padding-left: 20px;
    position: relative;
}
#content .expertDetail table .star p:before{
    content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: 0;
    width: 14px; height: 14px;
    background-image: url("../images/icon/ico-star.png"); background-size: cover; background-repeat: no-repeat;
}
#content .expertDetail .start .tit{
    border-bottom: 1px solid #eee;
}


/* pace 상세페이지 시작 -------------------------------------------/*/
#content .container.pace .imgBtnWrap{
    position: relative;
}
#content .container.pace .imgBtnWrap .btnWrap{
    display: flex;
    justify-content: space-evenly;
    position: absolute; bottom: 100px; width: 94%; height: 110px; left: 50%; transform: translateX(-50%);
}
#content .container.pace .imgBtnWrap .btnWrap a{
    width: 251px; height: 100%; display: block;
}
/* pace 상세페이지 끝 -----------------------------------------------*/
/* 머니라이프 상세페이지 시작 -----------------------------------------------*/
#content .container.moneyLife img{position: relative}
#content .container.moneyLife a {
    display: block;
    width: 300px;
    height: 70px;
    position: absolute;
    bottom: 100px;
    left: 50%; transform: translateX(-50%);
}
/* 머니라이프 상세페이지 끝 -----------------------------------------------*/

/* saas 상세페이지 시작 -----------------------------------------------*/
#content .container.saasPro .btnWrap{
    display: flex; justify-content: space-evenly; align-items: center; gap: 10px;
    flex-wrap: wrap;
}
#content .container.saasPro .btnWrap button{
    font-size: 1rem; font-weight: 700;
    color: #006934;
    background-color: #fff;
    border: 1px solid #006934;
    transition: all .4s ease-in-out;
    border-radius: 10px;
    padding: 1rem 2rem;
    min-height: 50px;
}
#content .container.saasPro .btnWrap button a{
    font-size: 1rem; font-weight: 700;
    color: #006934;
}
#content .container.saasPro .btnWrap button:hover{
    transform: translateY(-2px);
    background-color: rgba(0, 105, 52, 0.05);
}
/* saas 상세페이지 끝 -----------------------------------------------*/




/*시뮬레이션 시작 =========================================================*/

#simulation .container >strong{
    text-align: center;
    display: block;
    margin-bottom: 20px;
    font-size: 2rem;
    color: #333;
    line-height: 1.8;
    animation: bounce 3s ease-in-out infinite;
}
#simulation .label{
    font-size: 1rem;
    font-weight: 700;
    color: #666;
    text-align: center;
}
#simulation .pointTxt{
    width: 50%;
    min-width: 320px;
    text-align: center;
    margin : 20px auto 50px;
    border-radius: 15px;
    padding : 1.5rem 1rem;
    border:  1px solid #eee;
}
#simulation .pointTxt dt{
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 10px;
}
#simulation .pointTxt dd{
    font-weight: 600;
    position: relative;
    color: #006934;;
    font-size: 1.2rem;
    margin-top: 20px; padding-top: 20px;
}
#simulation .pointTxt dd:before{
    content : ''; position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
    width: 100px; height: 1px; background-color: #059669;
}
#simulation .info{
    margin-top: 50px; border-top: 1px solid #eee; padding-top: 50px;
    letter-spacing: 1px;
    line-height: 1.8;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 400;
    margin-bottom: 100px;
}

#simulation .info .point{
    font-weight: 700; color: #059669;
}
#simulation .info p{
    font-weight: 700; text-decoration: underline; margin-top: 10px;
}
#simulation .imtArea{
    position: relative;
    margin: 0 auto 50px;
    padding: 4rem 1rem;
    background-color: rgba(255, 241, 225, 0.2);
}
#simulation .imtArea strong{
    display: block; margin: 0 auto 50px;
    border-radius: 45px; border: 1px solid #006934;
    font-weight: 700; font-size: 1.2rem;
    width: 40%; min-width: 300px;
    color: #006934;
    background-color: #fff;
    padding: 1.5rem 1rem; text-align: center;
}
#simulation .imtArea .positionInfo{
    position: absolute; left: 0; right: 0; width: 100%;
    z-index: 50; height: 200px; display: flex;
}
#simulation .imtArea .positionInfo .makeArea{
    width: 66.5%; border: 1px dotted var(--primary);
    height: 100%; background-color: rgba(5, 150, 105, 0.3);
}
#simulation .imtArea .positionInfo .dangerArea{
    width: calc(100% - 66.5%); border: 1px dotted var(--primary);
    height: 100%; background-color: rgba(150, 5, 5, 0.3)
}
#simulation .imtArea .positionInfo .infoTxt{
    font-size: .8rem;
    font-weight: 600;
    color: #006934;
    display: block;
    text-align: center  ;
}
#simulation .imtArea .positionInfo .dangerArea .infoTxt{
    color: #960505;
}
#simulation .imtArea ul{
    padding: 1rem 0;
    display: grid; grid-template-columns: repeat(3,1fr); flex-wrap: wrap;
    position: relative; z-index: 100;
    justify-content: center; gap: 15px;
}
#simulation .imtArea li{
    font-size: 1rem; text-align: center; width: 100%;
    font-weight: 500; line-height: 1.8;
}
#simulation .imtArea li .emoji{
    display: block; width: 100%;
    font-size: 2rem; text-align: center;
}
/*#simulation .imtArea li:not(:last-of-type){*/
#simulation .imtArea li{
    background-color: #fff;
    border: 1px solid #006934; padding: 1.5rem 1rem; border-radius: 15px;
    /*width: calc(33% - 30px);*/
}
/*
#simulation .imtArea li:last-of-type{
    width: 100%;
    font-size: 1.5rem;
    margin-top: 30px;
    font-weight: 600;
}
 */

#simulation .btnWrap{
    display: flex; flex-wrap: wrap;
    width: 80%;
    margin: 0 auto;
    position: relative;
    min-width: 300px;
    justify-content: center; gap: 15px;
}
#simulation #submitBtn{
    width: 100%;
    margin : 0 auto 50px;
    display: block;
}
#simulation .btnWrap:after{
    content: '검사를 안 하셨다면 다음 중 하나를 검사하고 진행하세요.';
    font-size: 1rem; font-weight: 600; color: #960505; line-height: 1.6; width: 100%;
    position: absolute; left: 50%; top:70px; text-align: center;     transform: translateX(-50%);
}
#simulation #submitBtn:hover,#simulation #submitBtn:active{
    background-color: #004b24;
}
#simulation button:not(#submitBtn) {
    background-color: #fff;
    border : 1px solid #006934; color: #006934;
}
#simulation button:not(#submitBtn):hover, #simulation button:not(#submitBtn):active{
    background-color: #059669;
    color: #fff;
    border-color: #059669;
}
/*시뮬레이션 끝 =========================================================*/




/* 상세페이지 강사 끝 -------------------------------------------/*/






/* 상세페이지 끝  *******/

/* 성장페이지 시작 *******/
#content .content2 .aiSay{
    display: none;
    width: 100%;
    margin-bottom: 50px;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 1rem;
    font-weight: 500;
    line-height: 2.2rem;
    font-size: 1.3rem;
}
#content .content2 .aiSay .point{
    font-weight: 700;
    font-size: 1.6rem;
    position: relative;
}#content .content2 .aiSay .point:not(.point.not){
    color: #065F46;
 }
#content .content2 .aiSay .point:not(.point.not):before{
    content: ''; display: block;
    position: absolute; bottom: 5px; left: 0;
    width: 100%; height: 10px;
    background-color: rgba(148, 148, 148, 0.2);
}
/* 성장페이지 끝  *******/


/* finx 재무설계 시작  *******/
:root {
    --primary-blue: #1a5dff;
    --primary-dark: #0a1628;
    --accent-cyan: #00d4ff;
    --bg-white: #ffffff;
    --bg-gray: #f8f9fb;
    --bg-dark: #0f1721;
    --text-primary: #1a1f2e;
    --text-secondary: #5a6577;
    --text-light: #8a92a3;
    --border-light: #e5e8ed;
    --gradient-primary: linear-gradient(135deg, #1a5dff 0%, #00d4ff 100%);
    --gradient-dark: linear-gradient(135deg, #0a1628 0%, #1a2f4f 100%);
    --shadow-sm: 0 2px 8px rgba(26, 93, 255, 0.08);
    --shadow-md: 0 8px 24px rgba(26, 93, 255, 0.12);
    --shadow-lg: 0 16px 48px rgba(26, 93, 255, 0.16);
}

/* Hero Section - Updated */
#content .finxFinCounsel .hero {
    margin-top: 80px;
    background: var(--gradient-dark);
    color: white;
    padding: 8rem 2rem 6rem;
    position: relative;
    overflow: hidden;
}

#content .finxFinCounsel .hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
            radial-gradient(circle at 20% 50%, rgba(26, 93, 255, 0.15) 0%, transparent 50%),
            radial-gradient(circle at 80% 80%, rgba(0, 212, 255, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

#content .finxFinCounsel .hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

#content .finxFinCounsel .hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 2rem;
    animation: fadeInUp 0.6s ease;
}

#content .finxFinCounsel .hero h1 {
    font-size: 3.8rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
    animation: fadeInUp 0.6s ease 0.1s backwards;
}

#content .finxFinCounsel .hero-subtitle {
    font-size: 1.3rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.5rem;
    font-weight: 400;
    animation: fadeInUp 0.6s ease 0.2s backwards;
}

#content .finxFinCounsel .hero-process-flow {
    font-size: 1.15rem;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 1.5rem;
    padding: 1.5rem 2rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: fadeInUp 0.6s ease 0.25s backwards;
}

#content .finxFinCounsel .hero-process-flow strong {
    color: var(--accent-cyan);
    font-weight: 700;
    display: block;
    text-align: center;
}

#content .finxFinCounsel .hero-description {
    font-size: 1.1rem;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.75);
    max-width: 900px;
    animation: fadeInUp 0.6s ease 0.3s backwards;
}

#content .finxFinCounsel .hero-description strong {
    color: var(--accent-cyan);
    font-weight: 700;
}

/* Process Section - New */
#content .finxFinCounsel .process-section {
    padding: 6rem 2rem;
    background: var(--bg-white);
}

#content .finxFinCounsel .process-inner {
    max-width: 1200px;
    margin: 0 auto;
}

#content .finxFinCounsel .process-steps {
    margin-top: 4rem;
}

#content .finxFinCounsel .process-card {
    background: white;
    border-radius: 24px;
    padding: 3rem;
    margin-bottom: 2.5rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.4s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

#content .finxFinCounsel .process-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.4s ease;
}

#content .finxFinCounsel .process-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-blue);
    transform: translateY(-4px);
}

#content .finxFinCounsel .process-card:hover::before {
    opacity: 1;
}

#content .finxFinCounsel .process-number {
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 4rem;
    font-weight: 900;
    color: rgba(26, 93, 255, 0.08);
    line-height: 1;
}

#content .finxFinCounsel .process-header {
    margin-bottom: 2rem;
}

#content .finxFinCounsel .process-header h3 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

#content .finxFinCounsel .process-subtitle {
    font-size: 1.1rem;
    color: var(--primary-blue);
    font-weight: 600;
}

#content .finxFinCounsel .process-content {
    margin-top: 1.5rem;
}

#content .finxFinCounsel .process-list {
    padding: 0;
    margin-bottom: 1.5rem;
}

#content .finxFinCounsel .process-list li {
    padding: 0.8rem 0;
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
    position: relative;
    padding-left: 1.8rem;
}

#content .finxFinCounsel .process-list li::before {
    content: '●';
    position: absolute;
    left: 0;
    color: var(--primary-blue);
    font-size: 0.8rem;
}

#content .finxFinCounsel .process-benefit {
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f2ff 100%);
    border-left: 4px solid var(--primary-blue);
    padding: 1.3rem 1.8rem;
    border-radius: 12px;
    margin-top: 1.5rem;
}

#content .finxFinCounsel .process-benefit strong {
    color: var(--primary-blue);
    font-size: 1.05rem;
    display: block;
    margin-bottom: 0.5rem;
}

#content .finxFinCounsel .process-benefit p {
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

/* Benefits Section - New */
#content .finxFinCounsel .finx-benefits {
    margin-top: 5rem;
    padding: 3.5rem;
    background: var(--gradient-dark);
    border-radius: 24px;
    text-align: center;
}

#content .finxFinCounsel .finx-benefits h3 {
    font-size: 2.2rem;
    font-weight: 800;
    color: white;
    margin-bottom: 3rem;
    letter-spacing: -0.5px;
}

#content .finxFinCounsel .benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

#content .finxFinCounsel .benefit-item {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 2rem 1.5rem;
    border-radius: 16px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
}

#content .finxFinCounsel .benefit-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-4px);
}

#content .finxFinCounsel .benefit-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

#content .finxFinCounsel .benefit-item p {
    color: white;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.6;
    margin: 0;
    text-align: left;
}

/* Intro Section */
#content .finxFinCounsel .intro-section {
    padding: 5rem 2rem;
    background: var(--bg-gray);
}

#content .finxFinCounsel .intro-inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

#content .finxFinCounsel .section-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    text-align: center;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

#content .finxFinCounsel .section-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    line-height: 1.8;
    text-align: center;
    margin: 0 auto;
}

#content .finxFinCounsel .section-subtitle strong {
    color: var(--primary-blue);
    font-weight: 700;
}

/* Engines Section */
#content .finxFinCounsel .engines-section {
    padding: 5rem 2rem 6rem;
    background: var(--bg-white);
}

#content .finxFinCounsel .engines-inner {
    max-width: 1200px;
    margin: 0 auto;
}

#content .finxFinCounsel .engine-card {
    background: white;
    border-radius: 24px;
    padding: 3.5rem;
    margin-bottom: 3rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.4s ease;
    border: 2px solid transparent;
    opacity: 1;
    transform: translateY(0);
}

#content .finxFinCounsel .engine-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-blue);
    transform: translateY(-8px);
}

#content .finxFinCounsel .engine-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

#content .finxFinCounsel .engine-icon {
    font-size: 3rem;
    line-height: 1;
}

#content .finxFinCounsel .engine-title-group h3 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

#content .finxFinCounsel .engine-title-group p {
    font-size: 1.05rem;
    color: var(--text-secondary);
    font-weight: 500;
}

#content .finxFinCounsel .engine-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-top: 2.5rem;
}

#content .finxFinCounsel .engine-block h4 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid var(--primary-blue);
    display: inline-block;
}

#content .finxFinCounsel .engine-block ul {
    padding: 0;
}

#content .finxFinCounsel .engine-block ul li {
    padding: 0.9rem 0;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.7;
    position: relative;
    padding-left: 1.8rem;
}

#content .finxFinCounsel .engine-block ul li::before {
    content: '●';
    position: absolute;
    left: 0;
    color: var(--primary-blue);
    font-size: 0.8rem;
}

#content .finxFinCounsel .engine-highlight {
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f2ff 100%);
    border-left: 4px solid var(--primary-blue);
    padding: 1.5rem 2rem;
    margin-top: 2rem;
    border-radius: 12px;
    font-size: 1.1rem;
    color: var(--text-primary);
    font-weight: 600;
}

#content .finxFinCounsel .engine-highlight strong {
    color: var(--primary-blue);
}

/* Consultation Section */
#content .finxFinCounsel .consultation-section {
    padding: 6rem 2rem;
    background: var(--gradient-dark);
    color: white;
    position: relative;
    overflow: hidden;
}

#content .finxFinCounsel .consultation-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
            radial-gradient(circle at 30% 40%, rgba(26, 93, 255, 0.2) 0%, transparent 50%),
            radial-gradient(circle at 70% 60%, rgba(0, 212, 255, 0.2) 0%, transparent 50%);
    pointer-events: none;
}

#content .finxFinCounsel .consultation-inner {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

#content .finxFinCounsel .consultation-inner h2 {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    letter-spacing: -0.5px;
}

#content .finxFinCounsel .consultation-inner p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.9;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

#content .finxFinCounsel .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

#content .finxFinCounsel .service-item {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1.5rem;
    border-radius: 16px;
    transition: all 0.3s ease;
}

#content .finxFinCounsel .service-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-4px);
}

#content .finxFinCounsel .service-item h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

#content .finxFinCounsel .cta-button {
    display: inline-block;
    background: white;
    color: var(--primary-blue);
    padding: 1.3rem 3.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    border: none;
}

#content .finxFinCounsel .cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    background: var(--accent-cyan);
    color: white;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    #content .finxFinCounsel .hero h1 {
        font-size: 2.5rem;
    }

    #content .finxFinCounsel .hero-subtitle {
        font-size: 1.1rem;
    }

    #content .finxFinCounsel .hero-process-flow {
        font-size: 1rem;
        padding: 1.2rem 1.5rem;
    }

    #content .finxFinCounsel .section-title {
        font-size: 2rem;
    }

    #content .finxFinCounsel .process-card {
        padding: 2rem;
    }

    #content .finxFinCounsel .process-number {
        font-size: 3rem;
        top: 1.5rem;
        right: 1.5rem;
    }

    #content .finxFinCounsel .process-header h3 {
        font-size: 1.6rem;
    }

    #content .finxFinCounsel .engine-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    #content .finxFinCounsel .benefits-grid {
        grid-template-columns: 1fr;
    }

    #content .finxFinCounsel .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}















#content #consultModal.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    padding-top: 80px;
    backdrop-filter: blur(8px);
    z-index: 2000;
    justify-content: center;
}
#content #consultModal.modal-overlay.on{
    display: flex !important;
}


#content #consultModal .modal-content {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    max-width: 550px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
    position: relative;
    transition: all 0.3s ease;
}

#content #consultModal .modal-overlay.active .modal-content {
    transform: scale(1);
    opacity: 1;
    position: absolute !important;
    bottom: 50px;
}

#content #consultModal .modal-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

#content #consultModal .modal-header h2 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.8rem;
    letter-spacing: -0.5px;
}

#content #consultModal .modal-header p {
    font-size: .9rem;
    color: var(--text-secondary);
}

#content #consultModal .close-modal {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: var(--bg-gray);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

#content #consultModal .close-modal:hover {
    background: var(--primary-blue);
    color: white;
    transform: rotate(90deg);
}

#content #consultModal .form-group {
    margin-bottom: 1.8rem;
}

#content #consultModal .form-group:not(.finxTest) label,
#content #consultModal .finxTest > strong{
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.6rem;
}

#content #consultModal .form-group label span {
    color: var(--primary-blue);
}

#content #consultModal .form-group input,
#content #consultModal .form-group select,
#content #consultModal .form-group textarea {
    width: 100%;
    padding: 10px;
    border: 2px solid var(--border-light);
    border-radius: 12px;
    font-size: .9rem;
    transition: all 0.3s ease;
    background: var(--bg-white);
}

#content #consultModal .form-group input:focus,
#content #consultModal .form-group select:focus,
#content #consultModal .form-group textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(26, 93, 255, 0.1);
}

#content #consultModal .form-group textarea {
    resize: vertical;
    min-height: 120px;
}
#content #consultModal .form-group .finxTestBox {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2,1fr);
}

#content #consultModal .form-group .finxTestBox input[type=checkbox] {
    width: 25px; height: 25px;
}

#content #consultModal .checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

#content #consultModal .checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

#content #consultModal .checkbox-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

#content #consultModal .checkbox-item label {
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}

#content #consultModal .submit-button {
    width: 100%;
    background: var(--gradient-primary);
    color: white;
    padding: 1.3rem;
    font-size: 1.1rem;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

#content #consultModal .submit-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(26, 93, 255, 0.3);
}

#content #consultModal .submit-button:active {
    transform: translateY(0);
}

#content #consultModal .privacy-notice {
    font-size: 0.85rem;
    color: var(--text-light);
    text-align: center;
    margin-top: 1.5rem;
    line-height: 1.6;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


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




/* 전문가 상담신청 폼 시작  *******/
#expertInput,
#contactInput,
#contactList{
    min-height: calc(100vh - 380px);
    padding: 60px 0 100px;
    margin: 20px auto 100px;
    width: 100%;
    max-width: 1200px;
}
#expertInput input:invalid,
#consultPopup input:invalid,
#contactInput input:invalid{
    border-color: transparent transparent #F15F79 transparent !important;
    background-color: #fff;
}
#expertInput .inputWrap,
#consultPopup .inputWrap,
#contactInput .inputWrap{
    border: 1px solid #eee;
    padding: 1.2rem;
}
#expertInput .inputWrap:not(:last-of-type),
#consultPopup .inputWrap:not(:last-of-type),
#contactInput .inputWrap:not(:last-of-type){
    margin-bottom: 40px;
}
#expertInput em,
#consultPopup em,
#contactInput em{
    font-weight: 400;
    font-size: .85rem;
    color: #666;
    display: block;
    margin-bottom: 10px;
    font-style: normal;
}
#expertInput strong,
#expertInput label.tit,
#consultPopup strong,
#consultPopup label.tit,
#contactInput strong,
#contactInput label.tit,
#consultContentPopup strong{
    display: block;
    margin-bottom: 15px;
    font-size: .85rem;
    font-weight: 400;
    color: #666;
}
#expertInput span.small,
#consultPopup span.small,
#contactInput span.small{
    font-size: .8rem;
    color: #b7b7b7;
    display: inline-block;
    margin: 0 5px;
    font-weight: 500;
}
#expertInput h2#title,
#consultPopup h2#title,
#contactInput h2#title,
#contactList h2#title{
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 30px;
}
#expertInput .bigContainer,
#consultPopup .bigContainer,
#contactInput .bigContainer,
#contactList .bigContainer{
    display: flex;
    flex-direction: column;
    gap: 40px;
}
#expertInput .defaultBox{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}
#expertInput .defaultBox .img{
    width: 300px;
    overflow-y: auto;
    height: 380px;
    margin-bottom: 20px;
}
#expertInput .defaultBox .img input[type="file"],
#consultPopup .defaultBox .img input[type='file']{ display: none;}
#expertInput .defaultBox .img .custom-upload-btn,
#consultPopup .defaultBox .img .custom-upload-btn{
    display: block;
    line-height: 40px;
    background-color: #666;
    color: #fff;
    text-align: center;
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    margin-top: -2px;
}
#expertInput .defaultBox .infoImg,
#consultPopup .defaultBox .infoImg{
    margin-top: 50px;
    font-size: .8rem;
}
#expertInput .defaultBox .infoImg p,
#consultPopup .defaultBox .infoImg p{
    line-height: 1.4rem;
    color: #666;
    font-weight: 700;
}
#expertInput .right >.inputWrap{
    display: flex; flex-direction: column;
    gap: 20px;
}

#expertInput .injuck,
#expertInput .divisi,
#contactInput .injuck{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
#expertInput  input[type=text],
#expertInput  input[type=password],
#expertInput  input[type=number],
#expertInput select,
#expertInput .capacityBox input,
#expertInput .canInfoBox input[type=number],
#consultPopup input[type=text],
#consultPopup input[type=number],
#contactInput .capacityBox input,
#contactInput  input[type=number],
#contactInput input[type= password],
#contactInput  input[type=text],
#contactInput  textarea,
#contactInput  input[type=email]{
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    outline: none;
    border: 1px solid #b7b7b7;
    transition: .3s ease-in-out;
}

#expertInput .injuck .pwdChkBox .elementBox{
    display: flex; align-items: center; gap: 10px;
}
#expertInput .injuck .pwdChkBox .elementBox i{
    font-size: 20px;
    cursor: pointer;
}
#expertInput .injuck .pwdChkBox .elementBox i:hover,
#expertInput .injuck .pwdChkBox .elementBox i:active {
    color: #065F46;
    font-weight: 800;
}
#expertInput .injuck .pwdChkBox .elementBox i.bi-eye{
    display: none;
}

#expertInput  input[type=radio],#expertInput input[type=checkbox], #expertInput .canInfoBox input[name=counsel],
#consultPopup  input[type=radio],#consultPopup input[type=checkbox],#contactInput input[type=checkbox],
#myHome .topB input[type=checkbox], #myHome .topB input[type=checkbox] + label,
#consultContentPopup .warning-area input[type=checkbox]{display: none;}

#expertInput  input[type=radio]+label, #expertInput .canInfoBox input[name=counsel]+label,#expertInput input[type=checkbox]+label,
#consultPopup  input[type=radio]+label,#consultPopup  input[type=checkbox]+span,#contactInput input[type=checkbox] +label{cursor:pointer;font-weight: 500; color: #666; position: relative; padding-left: 30px;margin-right: 5px;transition: .3s ease-in-out}

#expertInput  input[type=radio]+label:before,#expertInput input[type=radio]+label:after, #expertInput .canInfoBox input[name=counsel]+label:before, #expertInput input[name=counsel]+label:after,#expertInput .selBoxHere input[type=checkbox]+label:before,#expertInput .coun input[type=checkbox]+label:before,#expertInput .coun input[type=checkbox]+label:after,
#consultPopup input[type=radio]+label:before,#consultPopup input[type=radio]+label:after,#consultPopup input[type=checkbox]+span:before,#consultPopup input[type=checkbox]+span:after,
#contactInput input[type=checkbox]+label:before,#contactInput input[type=checkbox]+label:after{content: ''; position: absolute;top: 50%;transform: translateY(-50%);}

#expertInput  input[type=radio]+label:before, #expertInput .canInfoBox input[name=counsel]+label:before,#expertInput input[type=checkbox]+label:before,
#consultPopup input[type=radio]+label:before,#consultPopup input[type=checkbox]+span:before,
#contactInput input[type=checkbox]+label:before{background-color: #eee;border: 1px solid #b7b7b7;border-radius: 5px;width: 20px;height: 20px;left: 0;}

#expertInput  input[type=radio]+label:after,#expertInput input[type=checkbox]+label:after,
#consultPopup input[type=radio]+label:after,#consultPopup input[type=checkbox]+span:after,
#contactInput input[type=checkbox]+label:after{content: '✔'!important; color: #065F46;font-size: 1rem; left: 4px; display: none;}

#expertInput  input[type=radio]:checked+label, #expertInput .canInfoBox input[name=counsel]:checked+label,#expertInput input[type=checkbox]:checked+label,#expertInput .coun input[type=checkbox]:checked+label,
#consultPopup input[type=radio]:checked+label,#consultPopup input[type=checkbox]:checked+span,
#contactInput input[type=checkbox]:checked+label{font-weight: 700; color: #065F46}

#expertInput  input[type=radio]:checked+label:before, #expertInput .canInfoBox input[name=counsel]:checked+label:before,#expertInput input[type=checkbox]:checked+label:before,
#consultPopup input[type=radio]:checked+label:before,#consultPopup input[type=checkbox]:checked+span:before,
#contactInput input[type=checkbox]:checked+label:before{background-color: #fff;}

#expertInput input[type=radio]:checked+label:after, #expertInput .canInfoBox input[name=counsel]:checked+label:after,#expertInput .coun input[type=checkbox]:checked+label:after,
#consultPopup  input[type=radio]:checked+label:after,#consultPopup  input[type=checkbox]:checked+span:after,
#contactInput input[type=checkbox]:checked+label:after{display: block}



#expertInput .selBoxHere,
#contactInput .selBoxHere{
    width: 100%;
}
#expertInput .selBoxHere .selContain{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}
#expertInput .selBoxHere div.sel{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
#expertInput .selBoxHere button{
    border: 1px solid #666;
    padding: .5rem;
    width: 100%;
    background-color: transparent;
    color: #666;
    max-width: 200px;
    border-radius: 5px;
}
#expertInput .selBoxHere  button.on{
    font-weight: 700;
    color: #444;
}
#expertInput .selBoxHere .sel ul{
    opacity: 0;
    gap: 20px;
    flex-direction: column;
    flex-wrap: wrap;
    display: none;
    transition: .3s ease-in-out;
}

#contactInput #selCon1{
    display: flex; flex-direction: column; gap: 20px;
}
#expertInput .selBoxHere .sel ul.on{
    opacity: 1;
    display: flex;
}
#expertInput .selBoxHere input[type=checkbox]{display: none;}

#expertInput .capacityBox li,
#consultPopup .capacityBox li{
    display: flex;
    align-items: center;
    gap: 10px;
}
#expertInput .capacityBox input, #expertInput .capacityBox li .divDel, #expertInput .capacityBox li .licenseDel, #expertInput .portfolio li .listDel,
#consultPopup .capacityBox input, #consultPopup .capacityBox li .divDel, #consultPopup .capacityBox li .licenseDel, #consultPopup .portfolio li .listDel,
#contactInput li .listDel,
#expertInput .inputWrap li .licenseDel{
    height: 50px;
    position: relative;
}
#expertInput .divDel:after,#expertInput .licenseDel:after, #expertInput .listDel:after ,
#consultPopup .divDel:after,#consultPopup .licenseDel:after, #consultPopup .listDel:after ,
#contactInput li .listDel:after,
#expertInput .inputWrap li .licenseDel:after{
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    content: '';
    width: 35px; height: 35px;
    background-image: url("../images/icon/ico-del.png");
    background-position: center; background-repeat: no-repeat; background-size: 100%;
}
#expertInput .capacityBox li .divDel, #expertInput .capacityBox li .licenseDel, #expertInput .portfolio li .listDel,
#consultPopup .capacityBox li .divDel, #consultPopup .capacityBox li .licenseDel, #consultPopup .portfolio li .listDel,
#contactInput li .listDel,
#expertInput .inputWrap li .licenseDel{
    border: 1px solid #b7b7b7;
    background-color: transparent;
    text-indent: -9999px;
    width: 50px;
}
#expertInput .capacityBox li #licenseAdd, #expertInput .capacityBox li #divAdd,
#consultPopup .capacityBox li #licenseAdd, #consultPopup .capacityBox li #divAdd,
#expertInput .inputWrap li #licenseAdd{
    margin: 0 auto;
    cursor: pointer;
    padding: 1rem 0 1rem 30px;
    position: relative;
    display: block;
    border: 1px solid transparent;
    background-color: transparent;
    font-size: 1rem;
    font-weight: 500;
    color: #065F46;
}
#expertInput .cft_s ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 15px;
}
#expertInput .capacityBox button[id$=Add]:before,
#consultPopup .capacityBox button[id$=Add]:before,
#expertInput .inputWrap li #licenseAdd:before{
    background-image: url("../images/icon/ico-add.png");
    width: 22px; height: 22px; content: '';
    position: absolute; top: 50%; left: 0; transform: translateY(-50%);
    background-repeat: no-repeat; background-size: 100%; background-position: center;
}
#expertInput .capacityBox li:not(:last-of-type),
#consultPopup .capacityBox li:not(:last-of-type){
    margin-bottom: 20px;
}
#expertInput .serviceBox textarea,
#consultPopup .serviceBox textarea{
    width: 100%;
    outline: none;
    font-size: .9rem;
    padding: 1rem;
    max-height: 200px;
    overflow-y: auto;
    box-sizing: border-box;
    min-height: 3rem;
    height: auto;
}
#expertInput .serviceBox textarea:invalid,
#consultPopup .serviceBox textarea:invalid{
    background-color: rgba(0,23,51,0.02);
    border: none;
}
#expertInput .serviceBox .textLimit,
#consultPopup .serviceBox .textLimit{
    text-align: right;
    font-size: .8rem;
    color: #666;
    margin-top: 10px;
}
#expertInput .serviceBox .textLimit span:first-of-type,
#consultPopup .serviceBox .textLimit span:first-of-type{
    color: #065F46;
    font-size: .85rem;
    font-weight: 700;
}
#expertInput .canInfoBox .btnWrap,
#consultPopup .canInfoBox .btnWrap{
    margin-bottom: 25px;
}
#expertInput .canInfoBox button,
#consultPopup .canInfoBox .choice button{
    padding: .5rem 1.2rem .5rem 30px;
}
#expertInput .canInfoBox button,
#consultPopup .canInfoBox .choice button,
#consultPopup .timeArea button{
    border-radius: 5px;
    border: 1px solid #b7b7b7;
    color: #333;
    font-size: .9rem;
    background-color: #fff;
    position: relative;
}
#expertInput .canInfoBox button.reset,
#consultPopup .canInfoBox button.reset{
    padding: .5rem;
    background-color: transparent;
    border: 1px solid transparent;
    color: #333;
    text-decoration: underline;
}
#expertInput .canInfoBox button span{
    position: relative;
    width: 5px;
    height: 100%;
    display: inline-block;
    margin-right: 5px;
}
#expertInput .canInfoBox button.noChose:before,
#consultPopup .canInfoBox button.noChose:before{ color: #666; content: '✔'; position: absolute; top: 50%;transform: translateY(-50%);left: 10px; font-size: 1rem;}

#expertInput .canInfoBox button.noChose:hover,
#consultPopup .canInfoBox button.noChose:hover{
    border-color: #065F46;
}
#expertInput .canInfoBox button.chose, #expertInput .canInfoBox .dayWrap input[type=checkbox]:checked+label,
#consultPopup .canInfoBox button.chose, #consultPopup .canInfoBox .dayWrap input[type=checkbox]:checked+label{
    border-color: #065F46;
    background-color: rgba(6, 95, 70, 0.1);
    color: #065F46;
    font-weight: 600;
}
#expertInput .canInfoBox button.chose span,
#consultPopup .canInfoBox button.chose span{
    position: absolute;
    background-position: center;
    background-size: 100%;
    background-image: url(../images/icon/ico-delColor.png);
    color: #065F46;
    width: 19px;
    height: 12px;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
}

#expertInput .canInfoBox .dayWrap em,
#consultPopup .canInfoBox .dayWrap em{width: 100%; margin-bottom: unset}
#expertInput .canInfoBox .dayWrap,
#consultPopup .canInfoBox .dayWrap{
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
#expertInput .canInfoBox .dayWrap input[type=checkbox]+label,
#consultPopup .canInfoBox .dayWrap input[type=checkbox]+label{border: 1px solid #b7b7b7; color: #333; padding: 10px;font-weight: 500; border-radius: 5px;cursor: pointer}

#expertInput .canInfoBox select,
#consultPopup .canInfoBox select{
    padding: .5rem 1rem;
    outline: none;
    margin-right: 5px;
    font-size: .9rem;
    border: 1px solid #b7b7b7;
    border-radius: 5px;
}
#expertInput .canInfoBox .timeWrap select:last-of-type,
#consultPopup .canInfoBox .timeWrap select:last-of-type{
    margin-left: 5px;
}
#expertInput .canInfoBox input[name=counsel]+label:before,
#consultPopup .canInfoBox input[name=counsel]+label:before{border-radius: 50%;}
#expertInput .canInfoBox input[name=counsel]+label:after,
#consultPopup .canInfoBox input[name=counsel]+label:after{border-radius: 50%; background-color: #065F46;left: 5px;width: 12px;height: 12px;display: none}


#expertInput .canInfoBox input[type=number],
#consultPopup .canInfoBox input[type=number]{
    outline: none;
    width: 50%;
}
#expertInput .portfolio select,
#consultPopup .portfolio select{
    border: 1px solid #b7b7b7;
    font-size: 1rem;
    padding: 1rem;
    outline: none;
    color: #666;
    width: 20%;
}
#expertInput .portfolio li:not(.btn),
#consultPopup .portfolio li:not(.btn),
#contactInput .fileAdd li:not(.btn){
    display: flex;
    gap: 10px;
    align-items: center;
}
#expertInput .portfolio #addListBox{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#expertInput .portfolio li input[type=text],
#contactInput .fileAdd li input[type=text]{
    height: 50px;
    padding: 0 1rem;
    width: 80%;
    border: 1px solid #b7b7b7;
    font-size: 1rem;
}
#expertInput .portfolio li.btn,
#contactInput .fileAdd li.btn{
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 15px;
}
#expertInput .portfolio li.btn button,
#contactInput .fileAdd li.btn button{
    padding: .3rem 1rem;
    border: 1px solid #b7b7b7;
    color: #666;
    border-radius: 5px;
}
#expertInput .portfolio li.btn button:hover,
#contactInput .fileAdd li.btn button:hover{
    background-color: #b8b8b8;
}
#expertInput button#btnText,
#contactInput button#btnText{
    margin: 50px auto 100px;
    display: block;
}
#expertInput .charge{
    display: flex; flex-direction: column; gap: 15px;
}
#expertInput .charge label+div{opacity: 0; overflow: hidden;max-height: 0; transition: opacity.3s ease, max-height .3s ease-in-out}
#expertInput .charge label+div.show{opacity: 1; max-height: 100px;}
/*파일 팝업 -------------------------------*/
#filePopup,
#urlPopup{
    display: none;
    position: fixed;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 60%;
    height: 30vh;
    background-color: #fff;
    z-index: 1000;
    border: 1px solid #666;
}
.expertInput .file-inner{
    padding: 1rem;
    display: flex;
    align-items: center;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
.expertInput .file-inner input{
    border: 1px solid #b7b7b7;
    width: 100%;
}
.expertInput .file-inner .fileWrap{
    width: 100%;
    gap: 20px;
    display: flex;
    align-items: center;
}
.expertInput .file-inner .fileWrap input[type=file]{display: none;}
.expertInput .file-inner .fileWrap .fileName{
    font-size: 1rem;
    border: 1px solid #b7b7b7;
    width: 82%;
    display: inline-block;
    padding: 1rem;
    height: 50px;
}
.expertInput .file-inner .fileWrap .fileLoadBtn{
    padding: 1rem;font-size: 1rem;font-weight: 400; border: 1px solid #b7b7b7; background-color: rgba(0,23,51,0.02);
}
.expertInput .file-inner .btnWrap{
    display: flex;
    margin: 30px 0 ;
    gap:20px;
    width: 50%;
}
.expertInput .file-inner  button{
    width: 50%;
    background-color: transparent;
    padding: 1rem;
    font-size: 1rem;
    border: 1px solid #065F46;
}
.expertInput .file-inner  button:first-of-type{
    border-color: #b7b7b7;
    color: #666;
}
.expertInput .file-inner  button:last-of-type{
    background-color: #065F46;
    color: #fff;
    font-weight: 600;
}
.expertInput input[type=text]{
    padding: 1rem;
    font-size: 1rem;
    color: #333;
}

#expertInput .warning-area,
#consultPopup .warning-area{
    margin-top: 50px;
}
#expertInput .warning-area  li,
#consultPopup .warning-area  li,
#consultContentPopup .warning-area li{
    line-height: 2rem;
}
#expertInput .warning-area  li:last-of-type,
#consultPopup .warning-area  li:last-of-type,
#consultContentPopup .warning-area li:last-of-type{
    margin-bottom: 20px;
}
/* 전문가 상담신청 폼 끝   *******/


/* 제휴문의 목록 시작    ********/

#contactList .settingBtn{
    width: 90px;
    color: #065F46;
    background-color: rgba(5, 150, 105, 0.2);
    border: 1px solid transparent;
    padding: .5rem 0;
    border-radius: 5px;
}
#contactList .btnWrap{display: flex; gap: 10px;}
#contactList .btnWrap.edit-mode button.none{display: block;}
#contactList .btnWrap button.none{display: none;}
#contactList .btnWrap button.yes,#contactList #btnList button:first-of-type{
    border-color: #059669; color: #059669;
    background-color: #fff;
}
#contactList .btnWrap button.yes:hover,#contactList #btnList button:first-of-type:hover{background-color: rgba(5, 150, 105, 0.5); color: #fff;}
#contactList .btnWrap button.no,#contactList #btnList button:last-of-type{
    border-color: #666; color: #666;
    background-color: #fff;
}
#contactList .btnWrap button.no:hover,#contactList #btnList button:last-of-type:hover{
    background-color: rgba(1,1,1,.2);
}
#contactList .btnWrap button.del{
    border-color: #ff4365; color: #ff4365;
    background-color: rgba(255, 67, 101, 0.1);
    margin-right: 20px;
}
#contactList .btnWrap button.del:hover{background-color: rgba(255, 67, 101, 0.5);color: #fff}
#contactList .settingBtn:hover{
    background-color: #059669;
    color: #fff;
    border-color: #059669;
}
#contactList table b.btn:hover{
    background-color: #b7b7b7;
    color: #333;
}
#contactList .list-inner{
    background-color: #fff;
    padding: 2rem 1rem;
    border-radius: 10px;
    width: 100%;
    overflow-x: auto;
}
#contactList table{
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}
.myHomeArea.index table th,
#contactList table th{
    padding: 10px;
    vertical-align: middle;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    border-bottom: 1px solid #666;
}
#contactList table .inputArea{
    display: none;
    width: 3%;
}
.myHomeArea.index table td,
#contactList table td{
    width: 10%;
    overflow: hidden;
    max-width: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-bottom: 1px solid #b7b7b7;
    padding: 15px 5px;
    vertical-align: middle;
    font-size: 1rem;
    position: relative;
}
.myHomeArea.index table b.btn,
#contactList table b.btn{
    width: 50%;
    margin: 0 auto;
    cursor: pointer;
    border: 1px solid #666;
    color: #666;
    border-radius: 5px;
    padding: 1rem;
    display: block;
}
#contactList table .scale{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
}
#contactList table .scaleContent{
    display: none;
    position: fixed;
    z-index: 1000;
    background-color: #fff;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border: 1px solid #ddd;
    white-space: normal;
    word-break: break-word;
    font-size: 0.9rem;
    color: #333;
    max-width: 300px;
    min-width: 150px;
    pointer-events: none;
    transform: translateX(-50%);
}
#contactList table b.btn:hover + #choseList{
    display: block;
}

#contactList #choseList{
    display: none;
    position: absolute;
    top: 50%; transform: translateY(-50%);
    left: 0;
    background-color: #fff;
    z-index: 5;
    padding: .5rem;
    text-align: left;
    border: 1px solid #b7b7b7;
    flex-direction: column;
    gap: 15px;
}

#contactList #choseList li{
    font-size: .9rem;
    color: #666;
}
#contactList #btnList{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#contactList #btnList button{
    width: 100%;
    padding: .5rem;
    font-size: .9rem;
}
#contactList input[type=checkbox]{width: 20px;;height: 20px}

#contactList td.ok{ color: #059669;font-weight: 800}
#contactList td.no{color: #AD1E5E; font-weight: 800}
#contactList td.wait{color: #b7b7b7; font-weight: 800}

#contactList .btnList button:first-of-type
/* 제휴문의 목록 시작 끝   *******/




/* 머니하우스 시작   *******/
#moneyHouseIntro{
    width: 100%;
}
#moneyHouseIntro .mh-inner{
    width: 100%;
}
#moneyHouseIntro .big{
    font-size: 3rem;
    color: #333;
    font-weight: 800;
}
#moneyHouseIntro .bold{
    color: #000;
    font-weight: 800;
}
#moneyHouseIntro .banner{
    width: 100%;
    font-size: 60px;
    background-image: url("../images/therapy-backImg3.jpg"); background-position: center; background-size: 100%; background-repeat: no-repeat;
    font-weight: 600;
    height: 80vh;
    position: relative;
    letter-spacing: 1px;
}

#moneyHouseIntro .b-box1 p:nth-of-type(2){
    transition-delay: .7s;
}
#moneyHouseIntro .banner p,
#moneyHouseIntro .b-box2> div{
    font-weight: 700;
    font-size: 2.8rem;
    line-height: 1.6;
    color: #666;
}

#moneyHouseIntro .marquee-layer{
    width: 99vw;
    overflow-x: hidden;
    position: absolute;
    font-size: 25rem;
    font-weight: 800;
    opacity: .02;
    height: 100%;
    top: 0;
}
#moneyHouseIntro .b-box1 {
    overflow: hidden;
    top: 0;
    height: 100%;
    display: flex;
    width: 90%;
    margin: 0 auto;
    max-width: 1200px;
    flex-direction: column;
    justify-content: center;
    border-radius: 20px;
}
#moneyHouseIntro .swiper-autoheight .swiper-wrapper{
    height: 70px;
}

/* b-box2: 스크롤 후에 나타남 */
#moneyHouseIntro .b-box2 {
    width: 100%;
}
#moneyHouseIntro .b-box2 >div{
}
#moneyHouseIntro .b-box2 .txt{
    display: flex;
    gap: 20px;
    overflow: hidden;
    flex-wrap: wrap;
}
#moneyHouseIntro .b-box2 span.fade-up{
    transition-delay: .6s;
    transform: translateY(0);
}
#moneyHouseIntro .swiper-container{
    text-align: center;
    padding: 0 15px;
    border-radius: 10px;
    height: 100%;
    background-color: #444;
    border: 2px solid #666;
}
#moneyHouseIntro .swiper-container .swiper-slide{
    color: #fff;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

#moneyHouseIntro #section{
    margin: 100px auto;
}

#moneyHouseIntro .fold-wrap{
    padding: 150px 0 ;
    width: 90%; max-width: 1200px; margin: 0 auto;
}
#moneyHouseIntro .listWrap{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
}
#moneyHouseIntro .fold-wrap .fold-list{
    padding: 1.8rem;
    box-shadow: 0 5px 10px rgba(1,1,1,.2);
    height: 30vh;
    border-radius: 10px;
    background-color: #fff;
    color: #333;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
#moneyHouseIntro .fold-wrap .fold-list  p{
    display: flex;
    width: 100%;
    color: #333;
    letter-spacing: 1px;
    line-height: 1.5;
    font-size: 1.3rem;
    font-weight: 600;
}
#moneyHouseIntro .fold-list strong{
    font-size: 1rem;
    color: #666;
    font-weight: 400;
}
#moneyHouseIntro .fold-list .hide{
    display: block;
    color: #333;
    margin-top: 15px;
    font-weight: 800;
    font-size: 1.6rem;
    border-bottom: 1px solid #b7b7b7;
    padding-bottom: 20px;
}



#moneyHouseIntro .s-contain2 {
    padding-top: 200px;
    display: flex;
    flex-wrap: wrap;
}
#moneyHouseIntro .swiperGrid{
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    /*grid-template-columns: repeat(4,1fr);*/
}
#moneyHouseIntro .swiperWrap{
    width: 25%;
}

#moneyHouseIntro .s-contain2 .swiper-slide{
    border-radius: 10px;
    width: 100%;
    object-fit: contain;
    height: auto;
    color: #333;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 1rem;
    background-image: url("../images/therapy-backImg.jpg");
}
#moneyHouseIntro .chapterSwiper{
    width: 100%;
    height: 500px;
}
#moneyHouseIntro .swiper-slide .title {
    font-size: 1.8rem;
    font-weight: 600;
}

#moneyHouseIntro .swiper-slide .subtitle {
    position: relative;
    margin-top: 25px;
    font-size: 1rem;
    font-weight: 400;
}
#moneyHouseIntro .swiper-slide .subtitle:before{
    position: absolute;
    top: -20px; left: 50%; transform: translateX(-50%);
    content: '';
    width: 10%;
    height: 1px;
    background-color: #000;
}

#moneyHouseIntro .swiper-slide .text {
    font-size: 1.5rem;
    max-width: 400px;
    line-height: 1.3;
    font-weight: 600;
    text-align: center;
}
#moneyHouseIntro .swiper-slide p{
    font-size: 1.2rem;
    line-height: 1.8;
}
#moneyHouseIntro .swiper-slide .example{
    display: block;
    margin-top: 50px;
    font-size: 1rem;
    color: #666;
    line-height: 1.5;
    font-weight: 400;
    position: relative;
}
#moneyHouseIntro .s-contain1 h3,
#moneyHouseIntro .s-contain2 h3,
#moneyHouseIntro .s-contain5 h3{
    font-size: 36px;
    display: block;
    width: 100%;
    line-height: 3rem;
    color: #000;
    margin-bottom: 30px;
}







#moneyHouseIntro .s-contain2 .chapterBox{
    /*width: 90%; max-width: 1200px; margin: 0 auto;*/
    height: 70%;
    display: grid;
    gap: 50px;
    grid-template-columns: repeat(2,1fr);
}
#moneyHouseIntro .s-contain4{
    margin-bottom: 100px;
}
#moneyHouseIntro table{
    border-collapse: collapse;
    text-align: center;
    vertical-align: middle;
}
#moneyHouseIntro table th{
    padding: 15px 5px ;
    border-bottom: 1px solid #b7b7b7;
}
#moneyHouseIntro table th, #moneyHouseIntro table td.th{
    font-size: 1.1rem;
    vertical-align: middle;
    font-weight: 700;
}

#moneyHouseIntro table td{
    padding: 20px 5px;
    vertical-align: middle;
    border-bottom: 1px solid #eee;
}
#moneyHouseIntro .s-contain5 .layoutStyle{
    margin-bottom: 200px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    align-items: center;
    gap: 50px;
}
#moneyHouseIntro .s-contain5 .arrow,
#moneyHouseIntro .s-contain5 .room div{
    text-align: center;
}
/* 머니하우스 끝    *******/

/* npti 상담신청 시작   *******/
.therapyPage{
    padding-top: 60px;
    margin: 0 0 100px;
    position: relative;
}
.therapyPage .section-inner{
    width: 90%;
    margin: 0 auto 0;
    max-width: 1200px;
}

.therapyPage .c-top{
    width: 100%;
    height: 80vh;
    position: relative;
}
.therapyPage .c-top img{
    /*transform: rotate(180deg);*/
}
.therapyPage .c-top img,
.therapyPage .c-top .back{
    width: 100%; height: 90%;
    position: absolute;top: 0; left: 0; right: 0; bottom: 0;
}
.therapyPage .c-top .back{
    z-index: 5;
    background-color: rgba(1,1,1,.3);
    backdrop-filter: blur(5px);

}
.therapyPage .c-top .title{
    max-width: 1200px;
    margin: 0 auto;
    position: relative; z-index: 10; top:0;
    height: 90%; width: 100%;
}

.therapyPage .c-top .title strong{
    width: 100%; display: block; text-align: center;
    font-size: 50px;
    position: absolute;
    line-height: 70px;
    left:50%; top: 50%;transform: translate(-50%,-50%);
    color: #fff;
}
.therapyPage .c-top .title p{
    width: 100%; display: block; text-align: center;
    font-size: 16px;
    position: absolute;
    line-height: 30px;
    left:50%; top: 60%;transform: translate(-50%,-50%);
    color: #fff;
}
.therapyPage .c-top .title p span{
    display: block; color: #eee;
    font-weight: 300;
}
.therapyPage .listBtn {
    width: 100%;
    border-bottom: 1px solid #eee;
}
.therapyPage .listBtn ul{
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: center;
    line-height: 50px;
    font-size: 16px;
    font-weight: 600;
}
.therapyPage .listBtn ul li{width: 100%;}
.therapyPage .listBtn ul li a{
    line-height: 60px;
    display: block;
    text-align: center;
    color: #666;
}
.therapyPage .listBtn ul li.on a{
    color: #065F46;
    font-weight: 700;
    border-bottom: 1px solid #065F46;
}
.therapyPage div[class^=box]:not(.box1){
    display: flex; flex-direction: column; gap: 30px;
}
/*----테라피 전체 탑 부분 끝-----*/




#npti.therapyPage .section-inner,
#finMind.therapyPage .section-inner,
#courple.therapyPage .section-inner{
    margin: 80px auto 150px;
}
#npti.therapyPage .content,
#finMind.therapyPage .content,
#courple.therapyPage .content{
    display: flex; flex-direction: column; gap: 200px;
}
#npti.therapyPage h3,
#finMind.therapyPage h3,
#courple.therapyPage h3{
    font-size: 1.8rem;
    font-weight: 800;
}
#npti.therapyPage .box1,
#finMind.therapyPage .box1,
#courple.therapyPage .box1{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#finMind.therapyPage .box1{
    display: none;
}
#npti.therapyPage .box1 .contWrap,
#finMind.therapyPage .box1 .contWrap,
#courple.therapyPage .box1 .contWrap{
    width: 65%;
}
#npti.therapyPage .box1 .divWrap,
#finMind.therapyPage .box1 .divWrap,
#courple.therapyPage .box1 .divWrap{
    display: flex; flex-direction: column;
    gap: 20px; margin-bottom: 20px;
}
#npti.therapyPage .box1 .divWrap div,
#finMind.therapyPage .box1 .divWrap div,
#courple.therapyPage .box1 .divWrap div{
    align-content: center;
    font-size: 1.2rem;
    font-weight: 500;
    border-bottom: 1px solid #eee;
    padding:  1rem;
    color: #333;
    transition: all .3s ease-in-out;
    letter-spacing: 1px;
    opacity: .9;
}
#npti.therapyPage .box1 .divWrap div:hover,
#npti.therapyPage .box1 .divWrap div:active,
#finMind.therapyPage .box1 .divWrap div:hover,
#finMind.therapyPage .box1 .divWrap div:active,
#courple.therapyPage .box1 .divWrap div:hover,
#courple.therapyPage .box1 .divWrap div:active{
    scale:1.05;
    opacity: 1;
}

#npti.therapyPage .box1 .divWrap div:first-of-type,
#finMind.therapyPage .box1 .divWrap div:first-of-type,
#courple.therapyPage .box1 .divWrap div:first-of-type{

}
#npti.therapyPage .box1 .divWrap div:nth-of-type(2),
#finMind.therapyPage .box1 .divWrap div:nth-of-type(2),
#courple.therapyPage .box1 .divWrap div:nth-of-type(2){

}
#npti.therapyPage .box1 .divWrap div:nth-of-type(3),
#finMind.therapyPage .box1 .divWrap div:nth-of-type(3),
#courple.therapyPage .box1 .divWrap div:nth-of-type(3){

}

#npti.therapyPage .box1 .divWrap div:nth-of-type(4),
#finMind.therapyPage .box1 .divWrap div:nth-of-type(4),
#courple.therapyPage .box1 .divWrap div:nth-of-type(4){

}

#npti.therapyPage .box1 .divWrap div:nth-of-type(5),
#finMind.therapyPage .box1 .divWrap div:nth-of-type(5),
#courple.therapyPage .box1 .divWrap div:nth-of-type(5){

}
#finMind.therapyPage .box1 .divWrap div:nth-of-type(6),
#courple.therapyPage .box1 .divWrap div:nth-of-type(6){

}
#npti.therapyPage .box1 .contWrap strong,
#finMind.therapyPage .box1 .contWrap strong,
#courple.therapyPage .box1 .contWrap strong{
    font-size: 1.2rem;
    display: block;
    line-height: 2rem;
    font-weight: 600;
    text-align: center;
    width: 100%;
    border: 1px solid #eee;
    box-shadow: 0 5px 10px rgba(1,1,1,.05);
    padding: 1rem;
    border-radius: 20px;
    animation: bounce 4s ease-in-out infinite;
}
@keyframes bounce{
    0%{transform: translateY(-5px)}
    100%{transform: translateY(0px)}
}

#npti.therapyPage .box2 ul,
#finMind.therapyPage .box2 ul,
#courple.therapyPage .box2 ul{
    display: flex;flex-direction: column;gap: 15px;
    width: 100%
}
#npti.therapyPage .box2 ul li,
#finMind.therapyPage .box2 ul li,
#courple.therapyPage .box2 ul li{
    background-color: #f0f0f0;
    border-radius: 10px;
    align-items: center;
    padding: 1.4rem 1rem;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    gap: 50px;
    transition: .2s ease-in-out;
}
#npti.therapyPage .box2 ul li:nth-of-type(2),
#finMind.therapyPage .box2 ul li:nth-of-type(2),
#courple.therapyPage .box2 ul li:nth-of-type(2){transition-delay: .3s;}
#npti.therapyPage .box2 ul li:nth-of-type(3),
#finMind.therapyPage .box2 ul li:nth-of-type(3),
#courple.therapyPage .box2 ul li:nth-of-type(3){transition-delay: .6s;}
#npti.therapyPage .box2 ul li:nth-of-type(4),
#finMind.therapyPage .box2 ul li:nth-of-type(4),
#courple.therapyPage .box2 ul li:nth-of-type(4){transition-delay: .9s;}
#npti.therapyPage .box2 ul li:nth-of-type(5),
#finMind.therapyPage .box2 ul li:nth-of-type(5),
#courple.therapyPage .box2 ul li:nth-of-type(5){transition-delay: 1.1s;}
#npti.therapyPage .box2 ul li:hover, #npti.therapyPage .box2 ul li:active,
#finMind.therapyPage .box2 ul li:hover, #finMind.therapyPage .box2 ul li:active,
#courple.therapyPage .box2 ul li:hover, #courple.therapyPage .box2 ul li:active{
    scale: 1.05;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(1,1,1,.2);
}
#npti.therapyPage .box2 b,
#finMind.therapyPage .box2 b,
#courple.therapyPage .box2 b{
    width: 20%;
    text-align: center;
    color: #666;
    display: block;
    font-weight: 500;
}
#npti.therapyPage .box2 p,
#finMind.therapyPage .box2 p,
#courple.therapyPage .box2 p{
    width: 40%;
    font-weight: 500;
    color: #333;
    text-align: center;
}
#npti.therapyPage .box2 strong,
#finMind.therapyPage .box2 strong,
#courple.therapyPage .box2 strong{
    width: 40%;
    font-weight: 700;
    text-align: center;
    color: #333;
}
#npti.therapyPage .box3,
#courple.therapyPage .box8{
    padding: 2rem 0;
    background-image: url("../images/therapy-backImg2.jpg"); background-position: center; background-size: cover;
    width: 100%;
    margin-bottom: 150px;
    justify-content: center;
    height: 55vh;
}

#npti.therapyPage .box3 h3,
#courple.therapyPage .box8 h3{
    width: 90%;
    margin: 0 auto;
    color: #fff;
    max-width: 1200px;
}
#npti.therapyPage .box3 .contWrap,
#courple.therapyPage .box8 .contWrap{
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
#npti.therapyPage .box3 ul,
#courple.therapyPage .box8 ul{
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4,1fr);
    width: 100%;
}
#npti.therapyPage .box3 ul li,
#courple.therapyPage .box8 ul li{
    display: flex; gap: 20px;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    width: 100%;
    padding: 2rem 1rem;
    color: #fff;
    border: 1px solid #eee;
    height: 25vh;
    border-radius: 10px;
}
#npti.therapyPage .box3 ul li:first-of-type,
#courple.therapyPage .box8 ul li:first-of-type{ border-color: #c94e7c;box-shadow: 0 4px 10px rgba(201, 78, 124, 0.9);}
#npti.therapyPage .box3 ul li:nth-of-type(2),
#courple.therapyPage .box8 ul li:nth-of-type(2){ border-color: #5f84f1;box-shadow: 0 4px 10px rgba(95, 132, 241, 0.9);transition-delay: .3s;}
#npti.therapyPage .box3 ul li:nth-of-type(3),
#courple.therapyPage .box8 ul li:nth-of-type(3){ border-color: #c05ff1;box-shadow:0 4px 10px rgba(192, 95, 241, 0.9);transition-delay: .6s;}
#npti.therapyPage .box3 ul li:nth-of-type(4),
#courple.therapyPage .box8 ul li:nth-of-type(4){ border-color: #c7a717;box-shadow: 0 4px 10px rgba(199, 167, 23, 0.9);transition-delay: .9s;}
#npti.therapyPage .box3 li p,
#courple.therapyPage .box8 li p{
    font-size: 1.4rem;
    font-weight: 800;
    margin-top: 10px;
    line-height: 1.8rem;
}
#npti.therapyPage .box3 li img,
#courple.therapyPage .box8 li img{
    width: 85px; height: 85px;
}

#npti.therapyPage .box4,
#finMind .box7 h3,#finMind .box7 .contWrap,
#courple.therapyPage .box4,
#courple .box7 h3,#courple .box7 .contWrap{
    width: 90%;
    margin: 0 auto;
    max-width: 1200px;
}
#npti.therapyPage .box4 .cost,
#finMind.therapyPage .box4 .cost,
#courple.therapyPage .box4 .cost{
    width: 100%;
    padding: 2rem 1rem;
    font-size: 1.2rem;
    background-color: #f1f4f6;
    display: flex;
    flex-direction: column;
    gap: 35px;
}
#npti.therapyPage .box4 .cost .bold,
#finMind.therapyPage .box4 .cost .bold,
#courple.therapyPage .box4 .cost .bold{
    font-weight: 800;
    color: #666;
    width: 10%;
    text-align: center;
    display: inline-block;
}
#npti.therapyPage .box4 .cost p:last-of-type:not(span),
#finMind.therapyPage .box4 .cost p:last-of-type:not(span),
#courple.therapyPage .box4 .cost p:last-of-type:not(span){
    font-weight: 800;
}
.therapyPage button{
    z-index: 50;
    position: fixed;
    top: 80px; right: 8%;
    width: 10%;
    min-width: 185px;
    margin: 0 auto;
    font-size: 1rem;
    box-shadow: 0 5px 10px rgba(1,1,1,.2);
    letter-spacing: 1px;
}
/* npti 상담신청 끝    *******/



/* 테라피 특허 시작 ~~~~~~~~~~*/
#therapyPatent .hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px 24px;
    background: #065F46;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

#therapyPatent .hero video {
    position: absolute;
    top: 0; left: 0;
}
#therapyPatent .hero:before{
    content:''; width: 100vw; height: 100vh; position: absolute; z-index: 1; background-color: rgba(0, 0, 0, .5);
}

#therapyPatent .hero-content {
    position: relative;
    z-index: 2;
    opacity: 0;
}

#therapyPatent .hero h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 24px;
    letter-spacing: -1px;
}

#therapyPatent .hero .subtitle {
    font-size: 20px;
    opacity: 0.95;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
}

#therapyPatent .hero .badge {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(255,255,255,0.2);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 32px;
    backdrop-filter: blur(10px);
}

#therapyPatent .section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 24px;
    opacity: 0;
    transform: translateY(50px);
}

#therapyPatent .section.visible {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s ease;
}

#therapyPatent .section-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #191f28;
}

#therapyPatent .section-subtitle {
    font-size: 18px;
    color: #6b7684;
    margin-bottom: 60px;
}

#therapyPatent .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-top: 40px;
}

#therapyPatent .card {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(30px);
}

#therapyPatent .card.visible {
    opacity: 1;
    transform: translateY(0);
}

#therapyPatent .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

#therapyPatent .card-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #065F46;
    color: white;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

#therapyPatent .card h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #191f28;
}

#therapyPatent .card .theory-name {
    color: #065F46;
    font-weight: 600;
    margin-bottom: 8px;
}

#therapyPatent .card p {
    color: #6b7684;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 12px;
}

#therapyPatent .card ul {
    list-style: none;
    margin-top: 16px;
}

#therapyPatent .card li {
    padding: 8px 0 8px 24px;
    position: relative;
    color: #6b7684;
    font-size: 15px;
}

#therapyPatent .card li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #065F46;
    font-weight: 700;
}

#therapyPatent .tech-section {
    background: white;
    border-radius: 24px;
    padding: 60px;
    margin: 40px 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

#therapyPatent .tech-item {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    opacity: 0;
    transform: translateX(-30px);
}
#therapyPatent .tech-item:not(:last-of-type) {
    margin-bottom: 40px;
}

#therapyPatent .tech-item.visible {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.6s ease;
}

#therapyPatent .tech-item:nth-child(even) {
    transform: translateX(30px);
}

#therapyPatent .tech-item:nth-child(even).visible {
    transform: translateX(0);
}

#therapyPatent .tech-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: #065F46;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    font-weight: 700;
}

#therapyPatent .tech-content h4 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #191f28;
}

#therapyPatent .tech-content p {
    color: #6b7684;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 16px;
}

#therapyPatent .highlight-box {
    background: #f0fdf4;
    border-left: 4px solid #065F46;
    padding: 24px 28px;
    border-radius: 12px;
    margin: 24px 0;
    font-size: 16px;
    color: #191f28;
    font-weight: 500;
}

#therapyPatent .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    margin: 60px 0;
}

#therapyPatent .stat-card {
    text-align: center;
    padding: 32px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: transform 0.3s ease;
    opacity: 0;
    transform: scale(0.9);
}

#therapyPatent .stat-card.visible {
    opacity: 1;
    transform: scale(1);
}

#therapyPatent .stat-card:hover {
    transform: scale(1.05);
}

#therapyPatent .stat-number {
    font-size: 40px;
    font-weight: 700;
    color: #065F46;
    margin-bottom: 8px;
}

#therapyPatent .stat-label {
    color: #6b7684;
    font-size: 14px;
}
/* 테라피 특허 끝 ~~~~~~~~~~~*/





/* 경제심리테라피 시작    *******/
#finMind .box3 .flexBox,
#courple .box3 .flexBox{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
#finMind .box3 .contWrap,
#courple .box3 .contWrap{
    display: flex; flex-direction: column; gap: 80px;
}
#finMind .box3 p,
#courple .box3 p{
    font-size: 1.4rem;
    font-weight: 700;
}
#finMind .box3 img,
#courple .box3 img{
    width: 500px; height: auto; object-fit: cover;
    border-radius: 10px;
}
#finMind .box5 .contWrap{
    display: flex; flex-direction: column;
    min-height: 600px;
    gap: 20px;
}
#finMind .box5 .contWrap>div{
    width: 100%;
    align-content: center;
    border-radius: 10px;
    padding: 2rem 1rem;
    color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#finMind .box5 .contWrap>div:hover,
#finMind .box5 .contWrap>div:active{
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}
#finMind .box5 .contWrap>div:nth-of-type(1){
    background: linear-gradient(135deg, #42e178 0%, #2eccb0 100%);
}
#finMind .box5 .contWrap>div:nth-of-type(2){
    background: linear-gradient(135deg, #37c767 0%, #10b497 100%);
}
#finMind .box5 .contWrap>div:nth-of-type(3){
    background: linear-gradient(135deg, #32d068 0%, #15a189 100%);
}
#finMind .box5 .contWrap>div:nth-of-type(4){
    background: linear-gradient(135deg, #30af5b 0%, #1ca68e 100%);
}
#finMind .box5 .contWrap>div:nth-of-type(5){
    background: linear-gradient(135deg, #258f49 0%, #0f7c69 100%);
}
#finMind .box5 .contWrap>div:nth-of-type(6){
    background: linear-gradient(135deg, #125e2b 0%, #096958 100%);
}
#finMind .box5 div strong{
    font-size: 1.4rem;
    font-weight: 700;
}
#finMind .box6 ul,
#courple .box6 ul{
    margin-top: 30px;
    display: flex;
    justify-content: space-between;

}
#finMind .box6 li,
#courple .box6 li{
    background-color: #fff;
    width: 30%;
    box-shadow: 0 2px 10px rgba(1,1,1,.2);
    border-radius: 10px;
    padding: 2rem 1rem;
    text-align: center;
    font-size: 20px;
    line-height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    font-weight: 600;
}
#finMind .box6 li:first-of-type,
#courple .box6 li:first-of-type{transition-delay: .3s;}
#finMind .box6 li:nth-of-type(2),
#courple .box6 li:nth-of-type(2){transition-delay: .6s;}
#finMind .box6 li:nth-of-type(3),
#courple .box6 li:nth-of-type(3){transition-delay: .9s;}


#finMind .box6 li{ flex-direction: column!important;}
#finMind .box6 .imgWrap{
    width: 100px; height: 400px; margin: 0 auto 20px;
}
#finMind .box6 li strong{
    font-size: 1rem; font-weight: 600; text-align: center; display: block; color: #006934;
}
#finMind .box6 .imgWrap img{ width: 100%; height: 100%; object-fit: contain;}

#finMind .box7{
    position: relative;
    background-image: url("../images/therapy-backImg3.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat;
    width: 100%;
    padding: 2rem 0;
    display: flex;
    flex-direction: column; gap: 30px;
    overflow: hidden;
    justify-content: center;
}
#finMind .box7 h3{
    position: relative;
    text-align: center;
}
#finMind .box7 h3:after{
    position: absolute;
    content:'카드를 클릭해 전 후를 비교해보세요!';
    font-size: 14px;
    font-weight: 700;
    color: #065F46;
    bottom: -30px;
    left: 50%; transform: translateX(-50%);
    opacity: 0;
    animation: fade 1.5s linear infinite;
}
@keyframes fade {
    0%{opacity: 0;}
    100%{opacity: 1;}
}
/* 경제심리 테라피 끝    *******/

/* 시뮬레이션 100억 후기 시작    *******/
#simulationDashBoard{ width: 100%}
#simulationDashBoard .dashboard-inner{
    width: 90%; margin: 140px auto 30px;
}
#simulationDashBoard .top{
    border-bottom: 2px solid #666; padding-bottom: 20px;
    display: flex; justify-content: space-between; gap: 10px; align-items: center;
}
#simulationDashBoard .top h3{
    font-weight: 700; color: #333; font-size: 2rem;
}
#simulationDashBoard .searchArea{
    display: flex; gap: 15px;
}
#simulationDashBoard .searchArea input,
#simulationDashBoard .searchArea select{
    border: 1px solid #ddd; padding: .5rem 1rem; font-size: .9rem; color: #333; border-radius: 10px;
}
#simulationDashBoard .searchArea .dateWrap{
    display: flex; align-items: center; gap: 5px;
}

#simulationDashBoard .searchArea #searchBtn{
    padding: .5rem 1.2rem; font-size: .9rem; font-weight: 700; background-color: #006934; color: #fff; border: 1px solid transparent; border-radius: 10px;
}
#simulationDashBoard .bottom{
    min-height: calc(100vh - 51vh);
}
#simulationDashBoard ul li{
    width: 100%; display: flex; justify-content: space-between;
}
#simulationDashBoard ul li:not(:last-of-type){
    border-bottom: 1px solid #eee; padding: 20px .5rem;
}
#simulationDashBoard ul li:last-of-type{
    border-bottom: 1px solid #666; padding: 20px .5rem;
}
#simulationDashBoard .bottom .noList{
    justify-content: center;
}
#simulationDashBoard .bottom li:not(.noList){
    cursor: pointer;
    transition: all .4s ease-in-out;
}
#simulationDashBoard .bottom li:not(.noList):hover{
    transform: translateY(-2px); box-shadow: 0 0 8px 5px rgba(1,1,1,.02);
}
#simulationDashBoard .bottom .title{
    font-size: .95rem; font-weight: 600;
}
#simulationDashBoard .bottom .user{
    color: #666; font-weight: 600; font-size: .9rem;
}
#simulationDashBoard .bottom .user .date{
    display: inline-block; margin-left: 15px; color: #666; font-weight: 400; font-size: .85rem;
}

/* 시뮬레이션 100억 후기 끝    *******/



/*===============================================================================테라피 리뉴얼 시작*/
#therapyP #s1{ position: relative; overflow: hidden; background-color: #222;}
#therapyP #s1:before{
    content:''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(1,1,1,.5); z-index: 5;
}
#therapyP #s1:after{
    content:''; background-color: #222; width: 15%; height: 100vh; position: absolute; top: 0; bottom: 0; right: 0; z-index: 6;
}
#therapyP .therapyVideo{
    width: 100%; height: 100vh; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; transition: all 1.2s ease-in-out; object-fit: cover;
}

#therapyP #s1 .content{
    position: relative; z-index: 10;
}
#therapyP #s1 h2{
    font-size: 4rem; color: #fff;
}
#therapyP #s1 p.lead{
    font-size: 1rem; font-weight: 500; color: #ddd;
}
#therapyP #s1 .bi-arrow-down-short{
    z-index: 50; color: #222; position: fixed; font-size: 50px; bottom: 0; cursor: pointer;
}
#therapyP #s1 .bi-arrow-down-short#topBtn{
    transform: scaleY(-1); display: none;
}
#therapyP #s1 .bi-arrow-down-short:after{
    content: ''; background-color: #fff; width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
}
#therapyP #s2{background-color: #222;color: #fff; position: relative}
#therapyP #s2 .top{
    position: relative; display: flex; margin-bottom: 10%; justify-content: right; padding-bottom: 10px;
}
#therapyP #s2 .top:after{
    content: ''; position: absolute; bottom: 0; left: 0; width: 0;height: 1px; background: #fff; transition: width 1s ease-in-out;
}
#therapyP #s2 .top.move:after {
    width: 100%;
}
#therapyP #s2 .top h2{
    position: absolute; bottom: -23px; left: -2px;
    font-size: 4rem; font-weight: 700; transition: all 1s ease-in-out; transform: translateY(20px); opacity: 0;
}
#therapyP #s2 .top h2.move,
#therapyP #s2 ul li span.big.move,
#therapyP #s2 .top .lead.move{
    opacity: 1; transform: translateY(0);
}
#therapyP #s2 .top .lead{
    font-size: 1.2rem; color: #666; font-weight: 600; transition: all 1s ease-in-out;  text-align: right; transform: translateY(20px); transition-delay: .15s; opacity: 0;
}
#therapyP #s2 ul{
    display: grid; width: 100%;
    /*position: absolute; bottom: 50px; */
    grid-template-columns: repeat(2,1fr); gap: 50px;
    max-width: var(--container);
}
#therapyP #s2 ul li{
    font-size: 1.2rem; font-weight: 400;
}
#therapyP #s2 ul li span.small{
    font-size: 1.8rem; font-weight: 600;
}
#therapyP #s2 ul li span.big{
    font-size: 3rem; font-weight: 800; display: inline-block; margin: 5px 10px 0; transform: translateY(20px); opacity: 0;transition: all 1s ease-in-out;
}


#therapyP #s3{
    position: relative; overflow: hidden;place-items: flex-start; background: #222; color: #fff;
}
#therapyP #s3 h2{
    font-size: 4rem;
    transition: all 1s ease-in-out; transform: translateY(20px); opacity: 0;
}
#therapyP #s3 h2.move{
    transform: translateY(0); opacity: 1;
}
#therapyP #s3 .container{
    max-width: unset; width: 100%; padding: 100px 0; height: 100vh;
}
#therapyP #s3 .container >*:not(.swiper){
    width: 90%; max-width: 1200px; margin: 0 auto;
}
#therapyP #s3 p.total{
    width: 80%!important; max-width: 1000px!important;
    background: rgba(1,1,1,.8); padding: .5rem 1rem; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 20;
    border-radius: 30px;
    display: inline-block; text-align: center;
}
#therapyP #s3 .swiper-slide .wrap{
    position: absolute;
    z-index: 10;
    background: rgba(1, 1, 1, .7);
    padding: 2rem;
    text-align: left;
    top: 0;
    bottom: 0;
    right: 0;
    /*width: calc((100vw - 1200px));*/
    width: 49.6vw;
}
#therapyP #s3 .swiper-slide .wrap h3{
    font-size: 2rem;
    line-height: 1.8;
}

#therapyP #s4{
    position: relative;
    background: linear-gradient(135deg, #222 0%, #383838 100%);
    min-height: 200vh;
}
#therapyP #s4 .sticky{
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#therapyP #s4 .container{
    position: relative;
}
#therapyP #s4 h2 {
    font-size: 4rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0;
    transition: all 1s ease;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}
#therapyP #s4 h2.shrink{
    font-size: 1.5rem;
    margin-bottom: 40px;
}

#therapyP #s4 .ipbox {
    opacity: 0;
    transform: translateY(50px);
    transition: all 2s ease;
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    max-width: 800px;
    margin: 0 auto;
}

#therapyP #s4 .ipbox.show {
    opacity: 1;
    transform: translateY(0);
}

#therapyP #s4 .ipbox > div {
    padding: 15px 20px;
    margin: 10px 0;
    background: #f8f9fa;
    border-radius: 10px;
    text-align: left;
}

#therapyP #s4 .ipbox strong {
    display: inline-block;
    min-width: 120px;
    color: #666;
    font-weight: 600;
    margin-right: 10px;
}

#therapyP #s4 .ipbox .muted {
    background: #006934;
    color: #fff;
    text-align: center;
    margin-top: 20px;
    font-size: 0.95rem;
}
#therapyP #s5{
    background: #222; text-align: center;
}
#therapyP #s5 .container{
    transition: opacity 4s ease-in-out, height 6.5s ease-in-out; text-align: center;
    opacity: 0; height: 0;
}
#therapyP #s5 .container >*{
    height: 0; opacity: 0;
}
#therapyP #s5 .container.move,
#therapyP #s5 .container.move >*{
    opacity: 1; height: 100%; max-height: 130px;
}
#therapyP #s5 h2{
    font-size: 4rem; color: #fff; border-bottom: 1px solid #fff; margin-bottom: 20px; padding-bottom: 15px;
}

#therapyP #s5 button{
    transition: all .3s ease-in-out;
}
#therapyP #s5 button:hover{
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(255,255,255,.7);
}
#therapyP #s5 .experts .muted:first-of-type{
    font-size: 1.5rem;
}

/*===============================================================================테라피리뉴얼  끝*/

/*===============================================================================머니하우징스토리 상세페이지 시작*/

/* money 스토리 시작 *************/

.moneyStory .story-section {
    margin-bottom: 120px;
}

.moneyStory .section-number {
    font-size: 14px;
    font-weight: 600;
    color: #9ca3af;
    margin-bottom: 16px;
    letter-spacing: 0.05em;
}

.moneyStory .section-title {
    font-size: 36px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 24px;
    line-height: 1.3;
}

.moneyStory .section-subtitle {
    font-size: 20px;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 32px;
    line-height: 1.5;
}

.moneyStory .section-content {
    font-size: 17px;
    line-height: 1.8;
    color: #374151;
}

.moneyStory .section-content p {
    margin-bottom: 20px;
}

.moneyStory .section-content strong {
    color: #5d688a;
    font-weight: 700;
}

.moneyStory .highlight-box {
    background: #f3f4f6;
    padding: 28px 32px;
    border-radius: 12px;
    margin-top: 32px;
    border-left: 4px solid #4b5563;
}

.moneyStory .highlight-box p {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    line-height: 1.6;
    margin: 0;
}

.moneyStory .comparison-container {
    margin-top: 48px;
}

.moneyStory .comparison-box {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 36px;
    margin-bottom: 20px;
    transition: all 0.2s ease;
}

.moneyStory .comparison-box:hover {
    border-color: #4b5563;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.moneyStory .comparison-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.moneyStory .comparison-list {
    list-style: none;
    padding: 0;
}

.moneyStory .comparison-list li {
    padding: 12px 0 12px 24px;
    font-size: 16px;
    line-height: 1.6;
    color: #374151;
    position: relative;
}

.moneyStory .comparison-list li::before {
    content: '·';
    position: absolute;
    left: 8px;
    color: #9ca3af;
    font-weight: bold;
    font-size: 20px;
}
.moneyStory .houseWrap{
    display: flex;
    gap: 20px;
    justify-content: space-between;
    flex-wrap: wrap;
}
.moneyStory .house-contain {
    width: 60%;
}
.moneyStory .divider {
    height: 1px;
    background: #e5e7eb;
    margin: 80px 0;
}
.moneyStory .house-preview{
    position: unset !important;
}
.moneyStory .final-message {
    text-align: center;
    padding: 60px 0;
}

.moneyStory .final-message .emoji {
    font-size: 48px;
    margin-bottom: 24px;
}

.moneyStory .final-message h3 {
    font-size: 28px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 16px;
    line-height: 1.4;
}

.moneyStory .final-message p {
    font-size: 17px;
    line-height: 1.7;
    color: #6b7280;
}


.moneyStory .house-preview {
    width: 320px;
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    animation: fadeInRight 0.8s ease-out;
    top: 20px;
    position: sticky;
}

.moneyStory .house-structure {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 지붕 (삼각형) */
.moneyStory .house-roof {
    width: 0;
    height: 0;
    border-left: 130px solid transparent;
    border-right: 130px solid transparent;
    border-bottom: 100px solid #8B4513;
    margin: 0 auto 10px;
    position: relative;
}

.moneyStory .preview-title {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: .9rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.5;
    text-align: center;
    width: 200px;
}

/* 굴뚝 */
.moneyStory .house-chimney {
    position: absolute;
    width: 20px;
    height: 40px;
    background: #6B3410;
    top: 0;
    left: 20px;
    border-radius: 3px 3px 0 0;
}

.moneyStory .house-chimney::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 8px;
    background: #8B4513;
    top: -8px;
    left: -2px;
    border-radius: 2px;
}

.moneyStory .house-door {
    color: #666;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    font-size: .85rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(93, 104, 138, 0.1);
    animation: doorGlow 2s infinite;
}

@keyframes doorGlow {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(93, 104, 138, 0.1);
    }
    50% {
        box-shadow: 0 6px 20px rgba(93, 104, 138, 0.15);
    }
}

.moneyStory .house-floor {
    background: #f3f4f6;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    font-size: 0.95rem;
    color: #9ca3af;
    border: 2px dashed #e5e7eb;
    position: relative;
}

.moneyStory .house-floor.active {
    animation: point 2s infinite ease-in-out;
}

@keyframes point {
    0%, 100% {
        border-color: #4D8BFF;
        color: #4D8BFF;
        background-color: #F3F4F6;
    }
    50% {
        border-color: #e5e7eb;
        color: #9ca3af;
        background-color: #fff;
    }
}

.moneyStory .house-floor.door {
    background-color: rgba(0, 61, 153, 0.5);
    color: #fff;
    font-weight: 600;
    border: 2px dotted #5d688a;
}

.moneyStory .floor-rooms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 10px;
}

.moneyStory .house-foundation {
    background: #361200;
    color: white;
    padding: 16px;
    border-radius: 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    margin-top: 5px;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 창문 추가 (선택사항) */
.moneyStory .house-windows {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 8px;
}

.moneyStory .window {
    width: 30px;
    height: 30px;
    background: #87CEEB;
    border: 3px solid #5d688a;
    border-radius: 4px;
    position: relative;
}

.moneyStory .window::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    background: #5d688a;
    left: 50%;
    transform: translateX(-50%);
}

.moneyStory .window::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: #5d688a;
    top: 50%;
    transform: translateY(-50%);
}
.moneyStory .submit-btn{
     width: 100%;
     height: 52px;
     background: #5d688a;
     color: white;
     border: none;
     border-radius: 8px;
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s;
     margin-top: 16px;
 }

@keyframes badgePop {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.moneyFloorInput button#roomAdd{
    background-color: rgba(255, 225, 194, 0.5);
    border: 1px solid #ffe1c2;
    color: #816344;
}
.moneyFloorInput button#roomRemove{
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.moneyFloorInput .btnWrap button.btnStyle{
    border-radius: 5px;
    padding: 5px 15px;
    font-size: .9rem;
    font-weight: 700;
    transition: all .3s ease-in-out;
}
.moneyFloorInput .btnWrap button.btnStyle:hover{
    transform: translateY(-2px);
}
/* money 문패 끝 *************/

/* money 1층 시작 *************/
.moneyFloorInput .topic-section {
    margin-bottom: 40px;
    padding: 20px;
    background: #f9fafb;
    border-radius: 12px;
    border-left: 4px solid #5d688a;
    animation: fadeInUp 0.8s ease-out;
}

.moneyFloorInput .topic-title {
    font-size: 16px;
    font-weight: 700;
    color: #DC9076;
    margin-bottom: 20px;
}
.moneyFloorInput .topic-title .small{
    font-size: .85rem;
    display: inline-block;
    margin-left: 5px;
}
.moneyFloorInput .sub-title {
    font-size: .9rem;
    color: #666;
    font-weight: 500;
    margin-bottom: 20px;
    display: block;
}
.moneyFloorInput .topic-section.hidden {
    display: none;
}
.moneyFloorInput .select-field {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 15px;
    color: #1a1a1a;
    transition: all 0.3s;
    outline: none;
    cursor: pointer;
    background: white;
}

.moneyFloorInput .select-field:focus {
    border-color: #065F46;
    box-shadow: 0 0 0 3px rgba(6, 95, 70, 0.1);
}
.moneyFloorInput .child-inputs {
    display: flex;
    gap: 16px;
    margin-top: 12px;
}

.moneyFloorInput .child-input-item {
    flex: 1;
}

.moneyFloorInput .child-label {
    font-size: .9rem;
    color: #6b7280;
    margin-bottom: 8px;
    display: block;
}


.moneyFloorInput .floor-rooms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    background: #fff;
    border-radius: 8px;
    border: 2px solid #5d688a;
    min-height: 60px;
}
.moneyFloorInput .floor-rooms.past{
    border: 1px solid transparent;
    background-color: transparent;
}

.moneyStory .room-box {
    flex: 1;
    min-width: 80px;
    padding: 10px 12px;
    border-radius: 6px;
    text-align: center;
    font-size: .85rem;
    font-weight: 700;
    animation: roomAppear 0.5s ease-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
}

.moneyStory #floorRooms1 .room-box {
    background: linear-gradient(135deg, #ffe1c2 0%, #dcaa76 100%);
    color: #816344;
}

.moneyStory #floorRooms2 .room-box {
    background: linear-gradient(135deg, #fdc2ff 0%, #dc76c9 100%);
    color: #6c3562;
}

.moneyStory #floorRooms3 .room-box {
    background: linear-gradient(135deg, #dbffc2 0%, #b5dc76 100%);
    color: #526534;
}

.moneyStory #floorRooms4 .room-box {
    background: linear-gradient(135deg, #ffd4c2 0%, #dc9076 100%);
    color: #835646;
}


/* money 1층 끝 *************/






/* money 스토리 끝 *************/
/*===============================================================================머니하우징  끝*/

/*===============================================================================테라피 효과 시작*/

#therapyEffect {
    overflow-y: auto;
    height: 100vh;
}

#therapyEffect .banner {
    height: 70vh;
    max-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(6, 95, 70, 0.3) 0%, transparent 70%);
    color: #333;
    position: relative;
    overflow: hidden;
    margin-bottom: 200px;
}


#therapyEffect .banner-content {
    text-align: center;
    padding: 40px;
    max-width: 900px;
    opacity: 0;
    transform: translateY(40px);
    animation: fadeInUp 1s ease forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#therapyEffect .banner h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 24px;
    line-height: 1.3;
}

#therapyEffect .banner .subtitle {
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 32px;
    opacity: 0.95;
}

#therapyEffect .banner .description {
    font-size: 1.125rem;
    font-weight: 400;
    opacity: 0.9;
    line-height: 1.8;
}

#therapyEffect .section-inner {
    max-width: 1200px;
    margin: 0 auto 200px;
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 200px;
}

#therapyEffect .content1,
#therapyEffect .content2,
#therapyEffect .content3,
#therapyEffect .content4,
#therapyEffect .content5 {
    display: flex;
    align-items: center;
}

#therapyEffect .con-inner {
    width: 100%;
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

#therapyEffect .con-inner.visible {
    opacity: 1;
    transform: translateY(0);
}

#therapyEffect .section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: #191f28;
}

#therapyEffect .section-subtitle {
    font-size: 1.5rem;
    color: var(--primary-light);
    margin-bottom: 48px;
    font-weight: 600;
}

#therapyEffect .quote {
    font-size: 1.25rem;
    color: #2d3748;
    margin: 48px 0;
    padding: 40px 48px;
    background: linear-gradient(135deg, #fbfffe 0%, #e7fff6 100%);
    border-radius: 20px;
    border: 2px solid rgba(5, 150, 105, 0.1);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.08);
    position: relative;
    line-height: 1.8;
}

#therapyEffect .quote::before {
    content: '"';
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 4rem;
    color: var(--primary-light);
    opacity: 0.2;
    font-family: Georgia, serif;
    line-height: 1;
}
#therapyEffect .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 32px;
    margin: 48px 0;
}

#therapyEffect .stat-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    padding: 2rem 1rem;
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

#therapyEffect .stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #065F46, #0cab7e);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

#therapyEffect .stat-card:hover::before {
    transform: scaleX(1);
}

#therapyEffect .stat-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 60px rgba(6, 95, 70, 0.2);
}

#therapyEffect .stat-label {
    font-size: 1.4rem;
    font-weight: 800;
    color: #065F46;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e2e8f0;
    position: relative;
}

#therapyEffect .stat-label::after {
    content: '✨';
    position: absolute;
    right: 0;
    font-size: 1.2rem;
}

#therapyEffect .transformation-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

#therapyEffect .transformation-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #f7fafc;
    border-radius: 12px;
    transition: all 0.3s ease;
}

#therapyEffect .transformation-item:hover {
    background: #edf2f7;
    transform: translateX(4px);
}

#therapyEffect .before {
    flex: 1;
    font-size: .95rem;
    font-weight: 600;
    color: #e53e3e;
    text-align: left;
    position: relative;
    padding-left: 20px;
}

#therapyEffect .before::before {
    content: '❌';
    position: absolute;
    left: 0;
    font-size: 0.9rem;
}

#therapyEffect .arrow {
    font-size: 1.5rem;
    color: #065F46;
    font-weight: bold;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.2); opacity: 1; }
}

#therapyEffect .after {
    flex: 1;
    font-size: 1rem;
    font-weight: 700;
    color: #065F46;
    text-align: right;
    position: relative;
    padding-right: 20px;
}

#therapyEffect .after::after {
    content: '✅';
    position: absolute;
    right: 0;
    font-size: 0.9rem;
}

#therapyEffect .content1 .result {
    background: linear-gradient(135deg, #065F46 0%, #0cab7e 100%);
    color: white;
    padding: 16px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    min-height: 95px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
    box-shadow: 0 4px 16px rgba(6, 95, 70, 0.3);
    position: relative;
    overflow: hidden;
}

#therapyEffect  .content1 .result::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

#therapyEffect .content1 .result-icon {
    font-size: 1.5rem;
    margin-right: 8px;
}

/* 카드별 색상 구분 */
#therapyEffect .stat-card:nth-child(1) .stat-label { color: rgb(150, 5, 109); }
#therapyEffect .stat-card:nth-child(1) .result { background: linear-gradient(135deg, #D50EA1FF 0%, #96056DFF 100%); }
#therapyEffect .stat-card:nth-child(1)::before { background: linear-gradient(90deg, #D50EA1FF, #96056DFF); }

#therapyEffect .stat-card:nth-child(2) .stat-label { color: #3B82F6; }
#therapyEffect .stat-card:nth-child(2) .result { background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); }
#therapyEffect .stat-card:nth-child(2)::before { background: linear-gradient(90deg, #3B82F6, #2563EB); }

#therapyEffect .stat-card:nth-child(3) .stat-label { color: #d5750e; }
#therapyEffect .stat-card:nth-child(3) .result { background: linear-gradient(135deg, #D5750EFF 0%, #985102 100%); }
#therapyEffect .stat-card:nth-child(3)::before { background: linear-gradient(90deg, #D5750EFF, #985102FF); }

#therapyEffect .stat-card:nth-child(4) .stat-label { color: var(--primary-light); }
#therapyEffect .stat-card:nth-child(4) .result { background: linear-gradient(135deg, var(--primary-light) 0%, #059669 100%); }
#therapyEffect .stat-card:nth-child(4)::before { background: linear-gradient(90deg, var(--primary-light), #059669); }

/* 반응형 */
@media (max-width: 768px) {
    #therapyEffect .section-title {
        font-size: 2rem;
    }

    #therapyEffect .section-subtitle {
        font-size: 1.2rem;
    }

    #therapyEffect .stats-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    #therapyEffect .stat-card {
        padding: 30px 20px;
    }

    #therapyEffect .transformation-item {
        flex-direction: column;
        text-align: center;
    }

    #therapyEffect .before, #therapyEffect .after {
        text-align: center;
    }

    #therapyEffect .arrow {
        transform: rotate(90deg);
    }
}

/* 스크롤 애니메이션 */
#therapyEffect .stat-card {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease forwards;
}

#therapyEffect .stat-card:nth-child(1) { animation-delay: 0.1s; }
#therapyEffect .stat-card:nth-child(2) { animation-delay: 0.2s; }
#therapyEffect .stat-card:nth-child(3) { animation-delay: 0.3s; }
#therapyEffect .stat-card:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
#therapyEffect .comparison-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin: 48px 0;
    align-items: center;
}

#therapyEffect .comparison-side {
    padding: 40px;
    border-radius: 16px;
    min-height: 400px;
}

#therapyEffect .before-side {
    background: linear-gradient(135deg, #f5f7fa 0%, #e8edf3 100%);
}

#therapyEffect .after-side {
    background: linear-gradient(135deg, #f2fffb 0%, rgba(6, 95, 70, 0.2) 100%);
}

#therapyEffect .comparison-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 32px;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 12px;
}

#therapyEffect .comparison-list {
    list-style: none;
}

#therapyEffect .comparison-list li {
    padding: 16px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    line-height: 1.7;
    font-size: 1.125rem;
    font-weight: 600;
    color: #2d3748;
}

#therapyEffect .comparison-list li:last-child {
    border-bottom: none;
}

#therapyEffect .highlight-box {
    background: linear-gradient(135deg, #059669 0%, #11d391 100%);
    color: white;
    padding: 48px;
    border-radius: 20px;
    margin: 48px 0;
    text-align: center;
}

#therapyEffect .highlight-box h3 {
    font-size: 1.75rem;
    font-weight: 700;
}

#therapyEffect .highlight-box p {
    font-size: 1.125rem;
    line-height: 1.8;
    opacity: 0.95;
}

#therapyEffect .metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    margin: 16px 0;
    background: #f7fafc;
    border-radius: 12px;
    transition: all 0.3s ease;
}

#therapyEffect .metric-row:hover {
    background: #edf2f7;
    transform: translateX(8px);
}

#therapyEffect .metric-label {
    font-size: 1.125rem;
    font-weight: 600;
    color: #2d3748;
}

#therapyEffect .metric-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
}

#therapyEffect .split-content {
    display: flex;
    gap: 60px;
    align-items: center;
    margin: 48px 0;
}

#therapyEffect .split-text {
    flex: 1;
}

#therapyEffect .split-visual {
    flex: 1;
    background: linear-gradient(135deg, #059669 0%, #11d391 100%);
    padding: 48px;
    border-radius: 20px;
    color: #fff;
}

#therapyEffect .arrow {
    font-size: 2rem;
    color: var(--primary);
    font-weight: 700;
}
/*===============================================================================테라피효과  끝*/

/*==============================================================================사이트맵 시작*/


#siteMap {
    width: 100%;
    padding: 80px 20px;
    background-color: #f5f5f5;
}
#siteMap .small{
    font-size: .7rem;
    display: inline-block;
    margin-left: 5px;
}

#siteMap .siteMap-inner {
    max-width: 1200px;
    margin: 0 auto;
}

#siteMap h2 {
    text-align: center;
    margin-bottom: 50px;
    font-size: 1.5rem;
    line-height: 1.6;
    color: #333;
    font-weight: 600;
}

#siteMap .infoSubTit {
    display: block;
    font-size: 1rem;
    color: #059669;
    font-weight: 400;
    margin: 20px 0 10px;
    letter-spacing: 1px;
}

#siteMap .content {
    background: #fff;
    padding: 0;
}

#siteMap .content-inner > ol {
    display: flex;
    flex-direction: column;
    list-style: none;
    border-top: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
}

#siteMap .content-inner > ol > li {
    display: flex;
    flex-wrap: wrap;
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    min-height: 200px;
}

#siteMap .wrap{
    width: 15%;
    display: flex;
    flex-direction: column;
    padding: 30px 0 30px 1.2rem;
    justify-content: center;
    background-color: #f1f1f1;
}
#siteMap .menu-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    display: block;
}

#siteMap .sub-category {
    padding: 30px 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 80%;
}

#siteMap .sub-title {
    font-size: .75rem;
    line-height: 1.6;
    font-weight: 400;
    color: #b7b7b7;
    margin-top: 12px;
}

#siteMap .link-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #f1f1f1;
}

#siteMap .link-list:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: unset;
}


#siteMap .link-list a {
    color: #666;
    text-decoration: none;
    font-size: 1rem;
    display: inline-block;
    font-weight: 600;
    border-radius: 0;
    transition: color 0.1s ease-in-out;
    position: relative;
}

#siteMap .link-list a::before {
    display: none;
}

#siteMap .link-list a:hover {
    background-color: transparent;
    color: #059669;
    font-weight: 700;
    padding-left: 0;
}

#siteMap .small-category {
    display: none;
    font-size: .8rem;
    color: #999;
    font-weight: 400;
    margin: 0 0 5px 0;
}
/*===============================================================================사이트맵  끝*/



/*==============================================================================브랜드 시작*/
#finxBrand {
    position: relative;
    width: 100%;
    background: #000;
}

#finxBrand .brand-inner {
    width: 100%;
}

/* Animated Background Shapes */
#finxBrand .bg-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

#finxBrand .shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    animation: float 20s infinite ease-in-out;
}

#finxBrand .shape-1 {
    width: 400px;
    height: 400px;
    background: #065F46;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

#finxBrand .shape-2 {
    width: 300px;
    height: 300px;
    background: #10b981;
    top: 60%;
    right: 15%;
    animation-delay: 5s;
}

#finxBrand .shape-3 {
    width: 250px;
    height: 250px;
    background: #065F46;
    bottom: 20%;
    left: 20%;
    animation-delay: 10s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(50px, -50px) scale(1.1); }
    50% { transform: translate(-30px, 30px) scale(0.9); }
    75% { transform: translate(30px, 50px) scale(1.05); }
}

/* Hero Section */
#finxBrand .hero-section {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#finxBrand .hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #000 0%, #065F46 100%);
    opacity: 0;
    transition: opacity 1s ease;
}

#finxBrand .hero-bg.active {
    opacity: 1;
}

#finxBrand .hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 20px;
}

#finxBrand .hero-title {
    font-size: clamp(80px, 12vw, 180px);
    font-weight: 900;
    letter-spacing: -0.03em;
    margin-bottom: 30px;
    color: #fff;
    opacity: 0;
    transform: translateY(50px);
    animation: fadeUpIn 1s ease forwards 0.3s;
    text-shadow: 0 0 100px rgba(16, 185, 129, 0.5);
}

#finxBrand .hero-subtitle {
    font-size: clamp(20px, 3vw, 40px);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUpIn 1s ease forwards 0.6s;
    letter-spacing: 0.05em;
}

#finxBrand .scroll-indicator {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    animation: fadeUpIn 1s ease forwards 1s, bounce 2s infinite 2s;
}

#finxBrand .scroll-indicator::after {
    content: '↓';
    font-size: 32px;
    color: #10b981;
}

@keyframes fadeUpIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

/* Definition Section */
#finxBrand .definition-section {
    position: relative;
    padding: 120px 20px;
    background: #000;
    overflow: hidden;
}

#finxBrand .definition-section::before {
    content: '';
    position: absolute;
    width: 150%;
    height: 150%;
    top: -25%;
    left: -25%;
    background: radial-gradient(circle, rgba(6, 95, 70, 0.5) 0%, transparent 70%);
    animation: rotate 30s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#finxBrand .definition-grid {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 80px;
    position: relative;
    z-index: 1;
}

#finxBrand .definition-item {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding: 40px;
    border-radius: 30px;
    background: linear-gradient(135deg, rgba(6, 95, 70, 0.05) 0%, transparent 100%);
    border: 1px solid rgba(6, 95, 70, 0.1);
    backdrop-filter: blur(10px);
}

#finxBrand .definition-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 30px;
    padding: 2px;
    background: linear-gradient(135deg, #065F46, transparent);
    /*-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);*/
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s;
}

#finxBrand .definition-item:hover::before {
    opacity: 1;
}

#finxBrand .definition-item.visible {
    opacity: 1;
    transform: translateY(0);
}

#finxBrand .definition-item:hover {
    color: #fff;
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(6, 95, 70, 0.2);
}

#finxBrand .def-label {
    font-size: 90px;
    font-weight: 900;
    background: linear-gradient(135deg, #065F46 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
    line-height: 1;
    filter: drop-shadow(0 0 20px rgba(16, 185, 129, 0.3));
}

#finxBrand .def-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #fff;
}

#finxBrand .def-desc {
    font-size: 17px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
}

/* Philosophy Section with Sticky Text */
#finxBrand .philosophy-section {
    position: relative;
    height: 200vh;
    background: #fff;
}

#finxBrand .philosophy-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#finxBrand .philosophy-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, #065F46 0%, #10b981 100%);
    transform: scale(0.8);
    opacity: 0;
    transition: all 3s ease;
}

#finxBrand .philosophy-bg.active {
    transform: scale(1);
    opacity: 0.08;
}


#finxBrand .philosophy-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    padding: 0 40px;
    text-align: center;
}

#finxBrand .philosophy-quote {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: 50px;
    color: #1a1a1a;
    position: relative;
}

#finxBrand .philosophy-quote::before {
    content: '"';
    position: absolute;
    top: -40px;
    left: -20px;
    font-size: 120px;
    color: rgba(6, 95, 70, 0.1);
    font-family: Georgia, serif;
}

#finxBrand .philosophy-desc {
    font-size: clamp(18px, 2vw, 26px);
    line-height: 2;
    color: #4a4a4a;
}

#finxBrand .highlight {
    color: #065F46;
    font-weight: 900;
    position: relative;
    display: inline-block;
}

#finxBrand .highlight::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: rgba(6, 95, 70, 0.2);
    z-index: -1;
}

/* X Symbolism Section */
#finxBrand .symbolism-section {
    position: relative;
    padding: 180px 20px;
    background: #fff;
    overflow: hidden;
}

#finxBrand .symbolism-section::before {
    content: 'X';
    position: absolute;
    font-size: 800px;
    font-weight: 900;
    color: rgba(6, 95, 70, 0.02);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    z-index: 0;
}

#finxBrand .symbolism-header {
    max-width: 1200px;
    margin: 0 auto 120px;
    text-align: center;
    position: relative;
    z-index: 1;
}

#finxBrand .symbolism-title {
    font-size: clamp(56px, 8vw, 100px);
    font-weight: 900;
    margin-bottom: 30px;
    background: linear-gradient(135deg, #1a1a1a 0%, #065F46 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#finxBrand .symbolism-subtitle {
    font-size: clamp(18px, 2vw, 24px);
    color: #666;
    font-weight: 300;
}

#finxBrand .symbolism-grid {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    position: relative;
    z-index: 1;
}

#finxBrand .symbol-card {
    position: relative;
    padding: 60px 40px;
    background: #fff;
    border: 2px solid rgba(6, 95, 70, 0.1);
    border-radius: 30px;
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

#finxBrand .symbol-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #065F46 0%, #10b981 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s ease;
}

#finxBrand .symbol-card:hover::before {
    transform: scaleX(1);
}

#finxBrand .symbol-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#finxBrand .symbol-card:hover {
    background: linear-gradient(135deg, rgba(6, 95, 70, 0.03) 0%, #fff 100%);
    border-color: #065F46;
    transform: translateY(-15px) scale(1.03);
    box-shadow: 0 30px 60px rgba(6, 95, 70, 0.15);
}

#finxBrand .symbol-icon {
    font-size: 80px;
    margin-bottom: 25px;
    display: inline-block;
    transition: transform 0.6s ease;
}

#finxBrand .symbol-card:hover .symbol-icon {
    transform: scale(1.2) rotate(10deg);
}

#finxBrand .symbol-name {
    font-size: 28px;
    font-weight: 700;
    color: #065F46;
    margin-bottom: 15px;
}

#finxBrand .symbol-text {
    font-size: 17px;
    line-height: 1.8;
    color: #4a4a4a;
}

/* Closing Section */
#finxBrand .closing-section {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #fff 0%, #f0fdf4 50%, #e0f2ea 100%);
    overflow: hidden;
}

#finxBrand .closing-section::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(6, 95, 70, 0.1) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
}

#finxBrand .closing-content {
    text-align: center;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

#finxBrand .closing-text {
    font-size: clamp(32px, 5vw, 64px);
    font-weight: 300;
    line-height: 1.6;
    color: #1a1a1a;
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease;
}

#finxBrand .closing-text.visible {
    opacity: 1;
    transform: translateY(0);
}

#finxBrand .closing-bold {
    font-weight: 900;
    background: linear-gradient(135deg, #065F46 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

#finxBrand .closing-content p.small{
    font-size: .9rem;
    font-weight: 300;
    color: var(--primary);
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    #finxBrand .definition-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    #finxBrand .symbolism-grid {
        grid-template-columns: 1fr;
    }

    #finxBrand .philosophy-section {
        height: 150vh;
    }

    #finxBrand .shape {
        filter: blur(60px);
    }
}
/*==============================================================================브랜드 끝*/


/*==============================================================================mtt 센터 시작*/

#mttPage {
    width: 100%;
    overflow-x: hidden;
}

#mttPage .container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

#mttPage section {
    padding: 120px 0;
    opacity: 0;
    animation: fadeIn 0.6s ease-out forwards;
}

#mttPage section:nth-child(1) { animation-delay: 0s; }
#mttPage section:nth-child(2) { animation-delay: 0.1s; }
#mttPage section:nth-child(3) { animation-delay: 0.2s; }
#mttPage section:nth-child(4) { animation-delay: 0.3s; }
#mttPage section:nth-child(5) { animation-delay: 0.4s; }
#mttPage section:nth-child(6) { animation-delay: 0.5s; }

@keyframes fadeIn {
    to { opacity: 1; }
}

/* 히어로 섹션 */
#mttPage .hero-section {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    padding: 140px 0 100px;
    text-align: center;
}

#mttPage .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(6, 95, 70, 0.1);
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    color: #065F46;
    margin-bottom: 32px;
}

#mttPage .hero-title {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.3;
    color: #191f28;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

#mttPage .hero-subtitle {
    font-size: 20px;
    font-weight: 500;
    color: #4e5968;
    margin-bottom: 16px;
    line-height: 1.6;
}

#mttPage .hero-description {
    font-size: 17px;
    color: #6c757d;
    line-height: 1.7;
    max-width: 780px;
    margin: 0 auto;
}

/* 지원 내용 섹션 */
#mttPage .support-section {
    background: #ffffff;
    padding: 100px 0;
}

#mttPage .section-title {
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 60px;
    color: #191f28;
    letter-spacing: -0.02em;
}

#mttPage .support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

#mttPage .support-card {
    background: #ffffff;
    padding: 36px 32px;
    border-radius: 16px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

#mttPage .support-card:hover {
    border-color: #065F46;
    box-shadow: 0 8px 24px rgba(6, 95, 70, 0.12);
    transform: translateY(-2px);
}

#mttPage .support-card-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #065F46;
    color: white;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
}

#mttPage .support-card-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #191f28;
    line-height: 1.4;
}

#mttPage .support-card-list {
    list-style: none;
}

#mttPage .support-card-list li {
    padding: 10px 0;
    color: #4e5968;
    font-size: 15px;
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

#mttPage .support-card-list li::before {
    content: '•';
    color: #adb5bd;
    font-weight: 700;
    margin-top: 2px;
}

/* 자격 조건 섹션 */
#mttPage .qualification-section {
    background: #f8f9fa;
}

#mttPage .qualification-box {
    background: #ffffff;
    border-radius: 20px;
    padding: 60px;
    max-width: 720px;
    margin: 0 auto;
    border: 1px solid #e9ecef;
}

#mttPage .qualification-title {
    font-size: 28px;
    font-weight: 700;
    color: #191f28;
    margin-bottom: 16px;
    text-align: center;
    line-height: 1.4;
}

#mttPage .qualification-answer {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 12px;
    color: #191f28;
}

#mttPage .qualification-subtitle {
    text-align: center;
    color: #6c757d;
    margin-bottom: 32px;
    font-size: 15px;
}

#mttPage .qualification-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 40px;
}

#mttPage .qualification-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #f8f9fa;
    padding: 24px;
    border-radius: 12px;
}

#mttPage .qualification-number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    background: #065F46;
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 18px;
}

#mttPage .qualification-text {
    font-size: 18px;
    color: #191f28;
    font-weight: 600;
}

#mttPage .qualification-note {
    text-align: center;
    margin-top: 40px;
    padding: 28px;
    background: #f8f9fa;
    border-radius: 12px;
    color: #4e5968;
    line-height: 1.7;
    font-size: 15px;
}

/* 핵심 가치 섹션 */
#mttPage .value-section {
    background: #ffffff;
}

#mttPage .value-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

#mttPage .value-card {
    background: #f8f9fa;
    padding: 48px 36px;
    border-radius: 16px;
    text-align: center;
    transition: all 0.2s ease;
    border: 1px solid #e9ecef;
}

#mttPage .value-card:hover {
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(6, 95, 70, 0.12);
    transform: translateY(-2px);
}

#mttPage .value-icon {
    font-size: 48px;
    margin-bottom: 24px;
    font-weight: 700;
    color: #065F46;
}

#mttPage .value-title {
    font-size: 22px;
    font-weight: 700;
    color: #191f28;
    margin-bottom: 16px;
    line-height: 1.4;
}

#mttPage .value-description {
    color: #4e5968;
    line-height: 1.7;
    font-size: 15px;
}

/* CTA 섹션 */
#mttPage .cta-section {
    background: #191f28;
    color: white;
    text-align: center;
    padding: 100px 0;
}

#mttPage .cta-title {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 32px;
    letter-spacing: -0.02em;
}

#mttPage .cta-benefits {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 48px;
}

#mttPage .cta-benefit {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: #e9ecef;
}

#mttPage .cta-benefit::before {
    content: '✓';
    font-weight: 700;
    font-size: 18px;
}

#mttPage .cta-button {
    display: inline-block;
    background: #065F46;
    color: white;
    padding: 18px 48px;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}

#mttPage .cta-button:hover {
    transform: translateY(-2px);
    background: #047857;
    box-shadow: 0 8px 24px rgba(6, 95, 70, 0.3);
}


/* 모달 오버레이 */
#modalOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease-out;
}

#modalOverlay.active {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* 모달 */
#modalOverlay .modal {
    background: white;
    border-radius: 20px;
    padding: 48px;
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(40px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

#modalOverlay .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #f8f9fa;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #4e5968;
    transition: all 0.2s ease;
}

#modalOverlay .modal-close:hover {
    background: #e9ecef;
    transform: rotate(90deg);
}

#modalOverlay .modal-header {
    margin-bottom: 32px;
}

#modalOverlay .modal-title {
    font-size: 28px;
    font-weight: 700;
    color: #191f28;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

#modalOverlay .modal-subtitle {
    font-size: 15px;
    color: #6c757d;
    line-height: 1.6;
}

#modalOverlay .form-group {
    margin-bottom: 24px;
}

#modalOverlay .form-label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #191f28;
    margin-bottom: 8px;
}

#modalOverlay .form-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    font-size: 15px;
    color: #191f28;
    transition: all 0.2s ease;
    font-family: inherit;
}

#modalOverlay .form-input:focus {
    outline: none;
    border-color: #065F46;
    box-shadow: 0 0 0 3px rgba(6, 95, 70, 0.1);
}

#modalOverlay .form-input::placeholder {
    color: #adb5bd;
}

#modalOverlay .form-submit {
    width: 100%;
    padding: 16px;
    background: #065F46;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
}

#modalOverlay .form-submit:hover {
    background: #047857;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(6, 95, 70, 0.3);
}

#modalOverlay .form-submit:active {
    transform: translateY(0);
}
/*==============================================================================mtt 센터  끝*/

/* 결제페이지 시작==============================================================================*/
#paymentContainer{
    width: 100%;
    min-height: 100vh;
    padding: 50px 0;
    background-color: #f1f4f6;
}
#paymentContainer button{
    cursor: pointer;
}
#paymentContainer .payment-inner {
    width: 90%;
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
#paymentContainer .payProcess,
#paymentContainer .payPreview{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
#paymentContainer .payProcess{
    width: 55%;
}
#paymentContainer .processBox.top{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    align-items: center;
}
#paymentContainer .processBox.top h3{
    font-size: 1.2rem;
    font-weight: 700;
}
#paymentContainer .processBox.top .progressCircle {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
}
#paymentContainer .processBox.top .progressCircle span{
    background-color: transparent;
    color: var(--primary-light);
    font-weight: 800;
    width: 25px; height: 25px;
    border-radius: 50%;
    font-size: .95rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--primary-light);
}
#paymentContainer .processBox.top .progressCircle span.on{
    background-color: var(--primary-light);
    color: #fff;
}


#paymentContainer .payProcess > *,
#paymentContainer .payPreview >*{
    border-radius: 10px;
    background-color: #fff;
    padding: 1.5rem 1rem;
}
#paymentContainer .processTit,
#paymentContainer .previewTit{
    font-size: 1.2rem;
    font-weight: 700;
}
#paymentContainer .processTit,
#paymentContainer .previewTit{
    border-bottom: 1px solid #eee;
    display: block;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
#paymentContainer .previewTit.listTap,
#paymentContainer.paymentResult .payListBox strong{
    display: flex;
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
}
#paymentContainer .previewTit.listTap .arrow,
#paymentContainer.paymentResult .payListBox strong .arrow{
    color: #666;
    font-size: .95rem
}

#paymentContainer .payProcess .labelWrap{
    display: flex;
    margin-bottom: 10px;
    align-items: center;
}
#paymentContainer .payProcess .pointInfo {
    text-align: right;
    font-size: .9rem;
    font-weight: 400;
    color: #666;
    display: block;
}
#paymentContainer .labelWrap:not(:last-of-type) {
    margin-bottom: 20px;
}
#paymentContainer .labelWrap label{
    font-weight: 700;
    font-size: .95rem;
    color: #666;
}
#paymentContainer .labelWrap label + input ,
#paymentContainer.paymentResult .labelWrap label + span input{
    border: 1px solid transparent;
    padding: 5px;
    font-size: .95rem;
}
#paymentContainer .labelWrap.couponArea{
    flex-wrap: wrap;
}
#paymentContainer .labelWrap.couponArea ,
#paymentContainer .pointInline {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
#paymentContainer .pointInline{
    width: 100%;
}
#paymentContainer .labelWrap.couponArea > *,
#paymentContainer .pointInline > .lt{
    display: flex;
    align-items: center;
    gap: 10px;
}
#paymentContainer .labelWrap.couponArea #couponListBtn,
#paymentContainer .pointInline button.allPointUse,
#paymentContainer .copyBtn,
#paymentContainer.paymentResult .payDetailBox .resultWrap .moveResult,
#paymentContainer button.addAddressBtn ,
.addressPopup button.btn-search{
    padding: 5px;
    font-size: .9rem;
    border-radius: 5px;
    font-weight: 600;
    background-color: #eee;
    border: 1px solid #666;
    color: #666;
}
#paymentContainer button.addAddressBtn{
    width: 100%;
    border: unset;
}

#paymentContainer .labelWrap.couponArea #couponListBtn:hover,#paymentContainer .labelWrap.couponArea #couponListBtn:active,
#paymentContainer .pointInline button.allPointUse:hover,#paymentContainer .pointInline button.allPointUse:active,
#paymentContainer .copyBtn:hover,#paymentContainer .copyBtn:active,
#paymentContainer.paymentResult .payDetailBox .resultWrap .moveResult:hover,#paymentContainer.paymentResult .payDetailBox .resultWrap .moveResult:active,
#paymentContainer button.addAddressBtn:hover, #paymentContainer button.addAddressBtn:active,
.addressPopup button.btn-search:hover, .addressPopup button.btn-search:active{
    opacity: .8;
}
#paymentContainer .labelWrap.couponArea .couponTit{
    font-size: .9rem;
    font-weight: 400;
    color: var(--primary);
    line-height: 1.4;
}
#paymentContainer .labelWrap.couponArea .point {
    font-weight: 800;
}
#paymentContainer .pointInline .pointWrap{
    display: flex;
    gap: 5px;
    align-items: center;
}
#paymentContainer .pointInline input,
#paymentContainer #buyBankName,
.addressPopup input{
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 10px;
    max-width: 200px;
    width: 100%;
}
#paymentContainer .pointInline input +span{
    font-weight: 800;
}
#paymentContainer .pointInline .rt .pointInfo{
    font-size: .9rem;
    font-weight: 500;
    color: #666;
    display: block;
    text-align: right;
    margin-top: 5px;
}


#paymentContainer .payStatus .labelWrap {
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    flex-direction: column;
    align-items: flex-start;
}
#paymentContainer .payStatus input[type=radio],
#paymentContainer .payWay ul input,
#couponPopup input[type=radio],
#paymentContainer .addressArea input[type=radio]{ display: none;}
#paymentContainer .payStatus input[name=buyPay]+label ,
#couponPopup input[type=radio]+label,
#paymentContainer .addressArea input[type=radio] + label{
    position: relative;
    padding-left: 25px;
}
#paymentContainer .payStatus input[name=buyPay]+label:before,
#couponPopup input[type=radio]+label:before,
#paymentContainer .addressArea input[type=radio] + label:before{
    content: ''; width: 18px; height: 18px; border: 2px solid #ddd; top: 50%; left: 0;
    transform: translateY(-50%); position: absolute; border-radius: 50%;
}
#paymentContainer .payStatus input[name=buyPay]+label:after,
#couponPopup input[type=radio]+label:after,
#paymentContainer .addressArea input[type=radio] + label:after{
    content: ''; width: 10px; height: 10px; background-color: var(--primary); top: 50%; left: 6px;
    transform: translateY(-50%); position: absolute; border-radius: 50%; display: none;
}
#paymentContainer .payStatus input[name=buyPay]:checked+label:after ,
#couponPopup input[type=radio]:checked+label:after,
#paymentContainer .addressArea input[type=radio]:checked + label:after{
    display: block;
}

#paymentContainer .payStatus input[name=buyPay]:checked+label ,
#couponPopup input[type=radio]:checked+label,
#paymentContainer .addressArea input[type=radio]:checked + label{
    font-weight: 800;
    color: var(--primary);
}
#paymentContainer .processBox .buyPayContBox{
    display: none;
    width: 100%;
    margin-top: 15px;
}
#paymentContainer .payWay ul{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
}
#paymentContainer .payWay ul li{
    width: 100%;
}
#paymentContainer .payWay ul input:checked + label{
    background-color: var(--primary);
    color: #fff;
}
#paymentContainer .payWay ul label{
    width: 100%;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .95rem;
    color: #666;
    border: 1px solid transparent;
    background-color: #f1f1f1;
}
#paymentContainer .payStatus .bookInfo >div{
    display: flex; gap: 10px; align-items: center;
    font-size: .95rem;
    margin-bottom: 10px;
}
/*ㅊ회종 결제 금액 ----------*/
#paymentContainer .payPreview{
    position: sticky;
    top: 50px;
    width: 40%;
    height: 100%;
}
#paymentContainer .payPreview ul{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
#paymentContainer .payPreview dl{
    display: flex;
    justify-content: space-between;
}
#paymentContainer .payPreview dt {
    font-weight: 700;
    font-size: 1rem;
    color: #666;
}
#paymentContainer .payPreview dd{
    font-weight: 700;
    font-size: 1rem;
}

#paymentContainer .payPreview li.point dt,#paymentContainer .payPreview li.point dd {
    color: var(--primary-light);
}
#paymentContainer .payPreview li.total{
    border-top: 1px solid #eee;
    padding-top: 20px;
}

#paymentContainer .payPreview li.total dt {
    font-size: 1.2rem;
    color: #333;
    font-weight: 800;
}
#paymentContainer .payPreview li.total dd{
    font-size: 1.2rem;
    color: var(--primary);
    font-weight: 800;
}
#paymentContainer .payPreview li.total .getPoint {
    display: block;
    text-align: right;
    margin-top: 10px;
    font-size: .95rem;
    font-weight: 300;
    color: #666;
}
#paymentContainer .payPreview button.payBtn ,
#paymentContainer.paymentResult .confirm,
.addressPopup button.addressSubmit{
    width: 100%;
    border-radius: 5px;
    background-color: var(--primary);
    color: #fff;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    font-size: 1rem;
    border: 1px solid transparent;
}
#paymentContainer .payPreview button.payBtn:hover,
#paymentContainer .payPreview button.payBtn:active,
#paymentContainer.paymentResult .confirm:hover,
#paymentContainer.paymentResult .confirm:active,
.addressPopup button.addressSubmit:hover,.addressPopup button.addressSubmit:active{
    opacity: .8;
}
#paymentContainer .payPreview .cartList li{
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
#paymentContainer .payPreview .cartList .imgWrap,
#couponPopup .imgWrap{
    width: 30%;
    min-width: 120px;
    max-width: 120px;
}
#paymentContainer .payPreview .cartList .imgWrap img,
#couponPopup .imgWrap img{
    width: 100%; height: 100%;
    object-fit: contain;
}
#paymentContainer .payPreview .cartList .contWrap {
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
#paymentContainer .payPreview .cartList .contWrap .listDelBtn,
#paymentContainer .payPreview .cartList .contWrap .countBtn ,
#couponPopup #popupClose,
#paymentContainer .addressArea .listDelBtn,
.addressPopup .addressPopupClose,
.addressPopup .popup .btn-close{
    border: 1px solid transparent;
    width: 24px; height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    background-color: transparent;
}
#paymentContainer .payPreview .cartList .contWrap .listDelBtn i,
#paymentContainer .payPreview .cartList .contWrap .countBtn i,
#couponPopup #popupClose i,
.addressPopup .addressPopupClose i,
.addressPopup .popup .btn-close i{
    font-size: 24px;
    color: #666;
}
#paymentContainer .payPreview .cartList .contWrap b{
    font-size: .95rem;
    line-height: 1.4;
    color: #333;
    font-weight: 500;
}
#paymentContainer .payPreview .cartList .btnWrap{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
#paymentContainer .payPreview .cartList .contWrap .countBtn{
    margin: 0;
}
#paymentContainer .payPreview .cartList .contWrap .countBtn:hover,
#paymentContainer .payPreview .cartList .contWrap .countBtn:active{
    background-color: #eee;
    border-radius: 50%;
}
#paymentContainer .payPreview .cartList .btnWrap .count {
    font-weight: 700;
    font-size: 1rem;
}
#paymentContainer span.back{
    margin: 30px auto;
}

/*주소 검색 시작 ----------------------*/
.addressPopup {
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    right: 0;
    bottom: 0;
    display: none;
}
.addressPopup .address-inner{
    border-radius: 10px;
    background-color: #fff;
    padding: 30px 20px;
    position: fixed;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    min-height: 400px;
    z-index: 1500;
}
.addressPopup .popup-header{
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee  ;
    display: flex;
}
.addressPopup .inputAddress .form-group{
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
    gap: 15px;
}
.addressPopup .address-field{
    display: flex;
    gap: 15px; align-items: center;
}

.addressPopup #detailAddress, .addressPopup #address {
    max-width: unset;
}
/*주소 검색 끝 ----------------------*/


#content .finxFinCounsel .engines-section{
    padding: 3rem 1rem;
}
#content .finxFinCounsel .engine-title-group h3{
    font-size: 1.2rem;
}
#content .finxFinCounsel .engine-card{
    padding: 15px !important;
}
#content .finxFinCounsel .engine-content{
    display: flex !important;
    flex-direction: column !important;
}
#content .finxFinCounsel .engine-highlight{
    font-size: .95rem;
    line-height: 1.6;
}

/*결제 완료 페이지 시작 ------------------*/

#paymentContainer.paymentResult .payment-inner{
    min-height: unset;
    flex-direction: column;
    justify-content: center;
    max-width: 500px;
}
#paymentContainer.paymentResult .dotlottie-wc{
    margin: 0 auto;
}
#paymentContainer.paymentResult:before{
    width: 100%;
    height: 30vh;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    background-color: var(--primary-dark);
}
#paymentContainer.paymentResult .payProcess ,
#paymentContainer.paymentResult #buyCharge,
#paymentContainer.paymentResult .payDetailBox .resultWrap {
    width: 100%;
}
#paymentContainer.paymentResult .payDetailBox .resultWrap{
    flex-direction: column; display: flex;
}
#paymentContainer.paymentResult .payDetailBox .resultWrap dl{
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
}
#paymentContainer.paymentResult .payDetailBox .resultWrap dl:not(:last-of-type) {
    margin-bottom: 30px;
}
#paymentContainer.paymentResult .payDetailBox .resultWrap dt{
    max-width: 50%;
    line-height: 1.4;
    font-size: .95rem;
    font-weight: 600;
    color: #666;
}
#paymentContainer.paymentResult .payProcess .labelWrap{
    justify-content: space-between;
}

#paymentContainer.paymentResult .labelWrap label {
    width: 130px;
}
#paymentContainer.paymentResult ul{
    display: flex; flex-direction: column; gap: 15px;
}
#paymentContainer.paymentResult .payListBox .processTit{
    margin-bottom: 0;
    padding-bottom: 0;
    border-color: transparent;
}
#paymentContainer.paymentResult .payListBox .processTit.on{
    margin-bottom: 20px; padding-bottom: 20px; border-color: #eee; display: flex;
}
#paymentContainer.paymentResult .payListBox .resultWrap{
    display: none;
}
#paymentContainer.paymentResult .payListBox .resultWrap.on{
    display: block;
}
#paymentContainer.paymentResult a {
    color: #666;
}
#paymentContainer.paymentResult a:hover{
    color: #333;
    font-weight: 600;
}
#paymentContainer.paymentResult .labelWrap input,
#paymentContainer.paymentResult .labelWrap label + div{
    text-align: right;
    width: 75%;
}
#paymentContainer.paymentResult .labelWrap label + div{
    display: flex; align-items: center; justify-content: right; gap: 2px;
}
#paymentContainer.paymentResult #buyCharge{
    color : var(--primary);
    padding: 0;
    display: block;
    font-weight: 700;
    font-size: 1rem;
}

#paymentContainer.paymentResult #buyCard{
    color: #666;
}
#paymentContainer.paymentResult .caution {
    font-size: .95rem;
    color: #666;
    line-height: 1.5;
}
/* 결제페이지 끝==============================================================================*/






/*==============================================================================로그인 타입 시작*/
#loginTypeChk {
    width: 100%;
    min-height: 100vh;
    padding: 60px 20px;
}

#loginTypeChk .loginTypeChk-inner {
    width: 90%;
    margin: 0 auto;
    max-width: 1200px;
}

#loginTypeChk h2 {
    font-size: 2rem;
    line-height: 1.4;
    text-align: center;
    font-weight: 700;
    margin-bottom: 12px;
    color: #333;
    letter-spacing: -0.02em;
}

#loginTypeChk h2 + p {
    font-size: 1.05rem;
    font-weight: 500;
    color: #666;
    margin-bottom: 48px;
    text-align: center;
}

#loginTypeChk ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px , 1fr));
    gap: 30px;
    list-style: none;
}

#loginTypeChk li {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 16px;
    padding: 28px 24px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

#loginTypeChk li:hover {
    border-color: var(--primary);
    background-color: rgba(67, 82, 78, 0.01);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(38, 47, 44, 0.1);
}

#loginTypeChk li input {
    display: none;
}

#loginTypeChk li input:checked + label:before {
    background-color: var(--primary-light);
    border-color: var(--primary-light);
    color: white;
}

#loginTypeChk li input:checked ~ .listTop {
    color: var(--primary);
}

#loginTypeChk li:has(input:checked) {
    border-color: var(--primary-light);
    background-color: rgba(67, 82, 78, 0.025);
    box-shadow: 0 4px 12px rgba(38, 47, 44, 0.15);
}

#loginTypeChk .listTop {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

#loginTypeChk li input + label {
    font-size: 1.2rem;
    font-weight: 700;
    display: block;
    padding-top: 56px;
    position: relative;
    text-align: center;
    cursor: pointer;
    color: #333;
    letter-spacing: -0.02em;
}

#loginTypeChk li input + label:before {
    content: '✓';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: transparent;
    transition: all 0.2s ease;
}

#loginTypeChk .typeInfo {
    text-align: center;
    box-shadow: 0 4px 12px rgba(38, 47, 44, 0.05);
    background-color: rgba(93, 104, 138, 0.05);
    padding: 15px 10px;
    border-radius: 10px;
}

#loginTypeChk .typeInfo p {
    font-size: 0.88rem;
    color: #666;
    line-height: 1.6;
    font-weight: 400;
}

#loginTypeChk .btnNext {
    width: 100%;
    max-width: 400px;
    height: 56px;
    margin: 40px auto 0;
    display: none;
    background-color: var(--primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: -0.02em;
    animation: slideUp 0.3s ease;
}

#loginTypeChk .btnNext.show {
    display: block;
}

#loginTypeChk .btnNext:hover {
    background-color: rgba(67, 82, 78, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(38, 47, 44, 0.3);
}

#loginTypeChk .btnNext:active {
    transform: translateY(0);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* 반응형 디자인 */
@media (max-width: 1024px) {
    #loginTypeChk ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    #loginTypeChk {
        padding: 40px 16px;
    }

    #loginTypeChk h2 {
        font-size: 1.5rem;
    }

    #loginTypeChk h2 + p {
        font-size: 0.95rem;
        margin-bottom: 32px;
    }

    #loginTypeChk ul {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    #loginTypeChk li {
        min-height: 160px;
        padding: 24px 20px;
    }

    #loginTypeChk li input + label {
        font-size: 1.1rem;
        padding-top: 48px;
    }

    #loginTypeChk li input + label:before {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }


    #loginTypeChk .btnNext {
        height: 52px;
        font-size: 1rem;
        margin-top: 32px;
    }
}
/*==============================================================================로그인 타입  끝*/

































/* 태블릿 시작-------------------------------------------------------------------------*/
@media all and (max-width: 1023px){


    header ul.only-pc { display: none;}
    .only-mo{display: block;}
    header{
        position: relative;
        z-index: 9999;
    }
    header.scrolled{
        display: block;
    }
    header a{display: block}
    header .header-inner{
        height: 100%; width: 100%;margin: 0 auto;
        padding: 0 1%;
        position: relative;
    }
    header .menuBtn{
        background-image: url("../images/icon/ico-menu.png");
        z-index: 600;
        background-size: 90%;
        background-repeat: no-repeat;
        background-position: center;
        text-indent: -9999px;
        width: 45px; height: 40px;
        background-color: transparent;
        border: 1px solid transparent;
    }
    header .menuBtn.white{
        background-image: url("../images/icon/ico-menuWhite.png");
    }
    header #closeBtn{
        color: transparent;
        background-image: url("../images/icon/ico-close.png");
        background-size: 80%;
        background-position: center;
        background-repeat: no-repeat;
        font-weight: 500;
        font-size: 14px;
        padding: unset;
        background-color: transparent;
        border: 1px solid transparent;
        margin: 0 10px 20px auto;
    }
    header .only-pc{
        display: none!important;
    }
    header button.only-mo{
        display: block!important;
    }
    header .header-inner ul{
        display: none;
        opacity: 0;
        height: 100vh;
        flex-direction: column;
        background-color: #fff;
        top: 0; bottom: 0; right: 0;
        width: 90%;
        position: absolute;
        z-index: 9999;
        transform: translateX(-100%);
        padding: 30px 10px;
        transition: opacity .3s ease-in-out, transform .3s ease-in-out;
    }
    header .header-inner ul.userSet{
        position: absolute;
        bottom: 0;
    }
    header .header-inner ul.active{
        display: flex!important;
        transform: translateX(0);
        opacity: 1;
    }
    header .header-inner ul li:hover{
        background-color: unset;
    }
    header .header-inner ul> li:not(:first-of-type):hover{
        background-color: rgb(139, 149, 161,.2)!important;
    }
    header .header-inner ul >li:not(:first-of-type):focus,
    header .header-inner ul >li:not(:first-of-type):active{
        background-color: rgb(139, 149, 161,.2)!important;
    }
    header .header-inner ul li{position: relative;height: auto!important;display: block;text-align: left;width: 100%}
    header .header-inner ul li:first-of-type{z-index: 3000;}
    header .header-inner ul li a{
        color: #8b95a1 !important;
    }
    header .header-inner ul:before{
        content: ''; display: block;
        background-color: rgba(1,1,1,.1);
        width: 13%;
        height: 110vh;
        position: absolute;
        top: 0; bottom: 0; left: -13%;
        z-index: 200;
    }

    header .header-inner ul li .subMenu ol li dl dd.lector:after{
        display: none;
    }
    header .header-inner ul li .subMenu ol li button[id^="subMenuFold"]{display: block;}
    header .header-inner ul li .subMenu{
        display: none;
        opacity: 0;
        height: 100vh;
        width: 100%;
        left:0;
        bottom: 0;
        transform: translateX(500px);
        border: unset;
        transition: .4s ease-in-out;
        z-index: 5000;
    }
    header .header-inner ul li .subMenu.active{
        display: flex;
        opacity: 1;
        transform: translateX(0);
    }
    header .header-inner ul li .subMenu ol{
        padding: 0 0 50px;
        display: flex;
        flex-direction: column;
    }
    header .header-inner ul li .subMenu ol li{
        border-left: unset;
        border-bottom: 1px solid #f1f1f1;
    }
    header .header-inner ul li .subMenu ol li:first-of-type{
        display: block;
        position: sticky;
        z-index: 500;
        background-color: #fff;
        padding-bottom: 10px;
        top: 0;
        padding-top: 10px;
    }

    header .header-inner ul li .subMenu ol li #subMenuFold{
        border: unset;
        display: block;
        text-align: left;
        width: 50%;
        position: relative;
        background-color: transparent;
        color: transparent;
    }
    header .header-inner ul li .subMenu ol li:last-of-type{
        padding-bottom: 80px;
    }

    header .header-inner ul li .subMenu ol li.helpZone dd.tit{
        color: #666;
    }
    header .header-inner ul li .subMenu ol li.helpZone dd.tit:after{
        display: none;
    }
    header .header-inner ul li .subMenu ol li.helpZone dd:not(.tit):not(.display){
        display: block!important;
    }

    /*header 끝 -----------------------------------------------------------------*/


    .contentDetail,
    #contactList{
        width: 90%;
        margin: 0 auto;
    }

    .member_details_wrap{
        width: 80%;
    }
    .twoGrapArea{
        overflow-x: auto;
    }
    #myHome .myHomeArea{padding:0}


    #content .c-top .title,
    .contentInner,
    .section-inner,
    #lectureContent, #introContent, #suggestContent,
    #myHome .account-inner, #myHome .setting-inner,
    .myPageWrap .page-inner{
        width: 90%;
        margin: 0 auto;
    }
    #dbContent, #lectureContent, #introContent, #suggestContent, #CAList{min-width: unset}

    #CAList #adjustment{ width: 100%; align-items:flex-start}
    #CAList .flexBox .adjustInfo{
        transform: translateY(150px);
    }
    /*메인시작 +++++*/

    #index1 .swiper-slide .textWrap h2, #index1 .swiper-slide.first h2{
        font-size: 2.2rem;
        line-height: 1.8;
    }

    #index1 .swiper-slide.theraBot .textWrap {
        top: 15% !important;
        transform: unset !important;
        width: 90% !important;
        right: 2% !important;
        left: 0 !important;
        align-items: center;
        text-align: center;
    }


    div[id*=index] div[class*=-inner] h3{font-size: 1.2rem}
    div[id*=index] div[class*=-inner] strong{font-size: 3rem}
    #index2 .abouts-inner,
    #index3 .layout{
        flex-direction: column;
    }

    #index1 #guideBtn{
        bottom: unset; top: 1000px; left: 5%;
        width: 75%;
    }

    #index3 .left-area{ width: 100%}
    #index3 .layout{margin-top: unset}
    #index3 .right-area{width: 60%; margin: 0 auto}
    #index4 .questFlex{gap: 1.5rem; flex-direction: column; flex-wrap: nowrap; height: auto}
    #index4 .list-inn .number{width: 30px; height: 30px;}
    #index4 .listBox{width: 100%; height: auto;padding: 1rem;}
    #index4 .listBox .imgWrap{width: 12%;}
    #index4 .listBox p{display: inline-block; width: auto; margin-left: 2rem}

    #index7 .consult-inner{ justify-content: flex-start}
    #index7 .textDummy{font-size: 2.2rem; gap: 20px}
    #index7 .textDummy span:nth-of-type(3),#index7 .textDummy span:nth-of-type(4){justify-content: center}
    #index7 .textDummy span.inline{width: 100%;}
    /*메인 끝++++++*/
    /*회사소개 시작 ****/
    #contentInfo .content3 ul{ gap: 1rem; }
    #contentInfo .content3 ul li{ width: 40%}
    /*회사소개 끝 *****/

    /*마이페이지 시작 ******/
    #myHome{
        padding: 0;
    }
    #myHome .myHomeArea, #myHome .myListArea, #myHome .reviewContain{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    #aside + .menuFold{
        display: block;
        position: fixed;
    }
    #aside.on + .menuFold{
        left: 75%;
    }
    #aside{
        transition: all .3s ease-in-out;
        width: 75%; max-width: unset; position: fixed; left: -80%; top: 0;
        bottom: 0; height: 100%; overflow: unset;
        z-index: 1000;
        max-height: unset;
        min-height: 100vh;
        opacity: 0;
    }
    #aside.on{
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        opacity: 1;
        width: 78vw;
        left: 0;
        visibility: visible;
        transform: translateX(0);
    }
    #index6.myPageFooter{
        width: 100%;
        margin-left: 0;
    }








    #aside ul li:not(:last-of-type){margin-bottom: unset}
    #aside ol.profile .profileBtn li.only-mo{ display: block}
    #aside ol.profile li:last-of-type{
        flex-direction: column !important;
    }
    #aside ol.profile li:last-of-type .profileBtn,
    #aside ol.profile .profileBtn li{
        align-items: flex-start;
        justify-content: left;
    }
    #aside ol + ul{
        flex-direction: column !important;
        display: flex !important;
    }

    #myHome .myListArea ul:not(#page):not(ul[class*=review]):not(ul[class*=listBox]):not(.profileBtn) {
        display: grid; gap: 20px; grid-auto-columns: minmax(200px, auto);  grid-auto-flow: column;overflow-x: auto
    }
    #myHome .listArea .listBox{
        display: flex;
        flex-direction: column;
    }
    #aside ul li a{font-size: .9rem}

    #myHome .myHomeArea, #myHome .myListArea, #myHome .reviewContain{margin: 0}
    #myHome .home-inner{width: 90%; margin: 70px auto;}
    .myPageWrap .page-inner{flex-direction: column}
    .dbListArea table th, .listContain table th, .userResultArea table th{font-size: .9rem}
    .dbListArea table td, .listContain table td, .userResultArea table td{font-size: .85rem}


    #myHome .unUserSideMenu{
        display: none;
    }

    #myHome .filter{
        display: block;
    }
    /*마이페이지 끝 ********/
    #contentInfo .content3{height: auto}
    #contentInfo .content4 ul{flex-direction: column; gap: 50px}

    #expertInput{width: 90%; margin: 50px auto; max-width: 1000px }
    #expertInput .left{ display: flex;flex-wrap: wrap; margin-bottom: 40px;}
    #expertInput .left .infoImg{margin-left: 50px; font-size: 1rem}
    #expertInput .left em{width: 100%}
    #expertInput .right{width: 100%;}

/*    테라피 페이지 리뉴얼 시작 *********/
    #therapyP #s5 .container.move, #therapyP #s5 .container.move >* {
        max-height: 250px;
    }

/*    콘텐츠 소개 시작 **********************/
    #contentInfo2 .content1 .con-inner{
        padding: 100px 0;
    }

/*    머니라이프 상세페이지 버튼 시작 *********************/
    #content .container.moneyLife a{
        bottom: 60px;
        height: 70px;
    }

/*    시뮬레이션 관련 시작 ~~~~~~~~~~~~~~~~~~~~~~*/
    #simulation .imtArea .positionInfo{
        height: 240px;
    }
    #simulation .imtArea .positionInfo .makeArea{
        width: 66.3%;
    }



    #hubPage .listArea .gridTemp{
        grid-template-columns: repeat(2,1fr);
    }
}
/* 태블릿 끝 --------------------------------------------------------------------------*/





/* 모바일 시작-------------------------------------------------------------------------*/
@media all and (max-width: 768px){

    .character div[class*=step]{
        width: 90%;
        padding: 1rem;
    }
    .character .mainWrap{
        flex-direction: column;
    }
    .character .step3{
        left: 50%; transform:  translateX(-50%);
        top: 10%;
    }
    .character .step4{
        top: -240px;
        left: 50%; transform:  translateX(-50%);
        min-height: 200px;
    }
    .character .step5, .character .step6{
        top: unset;
        display: none;
        left: 50%; transform:  translateX(-50%);
        height: 300px;
    }
    .character .step3 p:first-of-type,
    .character .step4 p:first-of-type,
    .character .step5 p:first-of-type,
    .character .step4 .nextBtn{display: none}

    .character .step3 p.only-mo,
    .character .step4 p.only-mo,
    .character .step5 p.only-mo{display: block}




    #touch-icon{display: block;}
    #callPopup,
    #payPopup{
        width: 80%;
    }
    #payPopup{top: 2%}
    #payPopup .inputWrap{ width: 90%;gap: 10px; flex-direction: column}
    #payPopup .inputWrap input[type=radio]+label{font-size: .95rem; text-align: center}
    #payPopup .inputWrap table th,#payPopup .inputWrap table td{ height: 50px}
    #payPopup .inputWrap table {display: flex}
    #payPopup .inputWrap table thead{width: 45%; min-width: 70px; border-right: 1px solid #ddd;}
    #payPopup .inputWrap table tr {display: flex; flex-direction: column; width: 100%}
    #payPopup .inputWrap table thead th, #payPopup .inputWrap table tbody td { display: flex; justify-content: center; align-items: center}
    #payPopup .inputWrap table td{ border-bottom: 1px solid #ddd}
    #payPopup .inputWrap table tbody{display: flex; gap: 10px; overflow:  auto;}
    #payPopup button, #finPopup button {width: 90%}
    .btnStyle{font-size: .8rem; padding: .5rem 1rem}
    #search{width: 100%}
    #search .search-inner{flex-wrap: wrap}

    #setting table, .myPointList,
    .baseLinePopup table{
        width: 600px;
    }
    .myPointList table {
        min-width: 600px;
    }
    .myPointList table td,.myPointList table th {
        font-size: .9rem;
    }
    #myHome .finxPaging ul {
        gap: 12px !important;
    }

    .myHomeArea.index .payStatus ul li{
        margin: 0 auto;
        width: 100%;
    }
    .finxPaging ul{
        gap: 20px!important;
    }
    #myHome.unUser .home-inner{
        width: 90%;
    }

    .myPointList .titleOl{
        gap: 15px;
        margin: 30px auto 30px;
    }
    .myPointList .titleOl li{
        font-size: .9rem;
    }
    .pointList form ul li[class^=Cont]{
        overflow: auto;
    }

    .only-mo{display: block;}
    .only-pc{display: none;}
    #myHome .unUser .only-mo {display: flex!important;}
    header{
        position: relative;
        z-index: 9999;
    }
    header.scrolled{
        display: block;
    }
    header a{display: block}
    header .header-inner{
        height: 100%; width: 100%;margin: 0 auto;
        padding: 0 1%;
        position: relative;
    }
    header .menuBtn{
        background-image: url("../images/icon/ico-menu.png");
        z-index: 600;
        background-size: 90%;
        background-repeat: no-repeat;
        background-position: center;
        text-indent: -9999px;
        width: 45px; height: 40px;
        background-color: transparent;
        border: 1px solid transparent;
    }
    header #closeBtn{
        color: transparent;
        background-image: url("../images/icon/ico-close.png");
        background-size: 80%;
        background-position: center;
        background-repeat: no-repeat;
        font-weight: 500;
        font-size: 14px;
        padding: unset;
        background-color: transparent;
        border: 1px solid transparent;
        margin: 0 10px 20px auto;
    }
    header .only-pc{
        display: none!important;
    }
    header button.only-mo{
        display: block!important;
    }
    header .header-inner ul{
        display: none;
        opacity: 0;
        height: 100vh;
        flex-direction: column;
        background-color: #fff;
        top: 0; bottom: 0; right: 0;
        width: 90%;
        position: absolute;
        z-index: 9999;
        transform: translateX(-100%);
        padding: 30px 10px;
        transition: opacity .3s ease-in-out, transform .3s ease-in-out;
    }
    header .header-inner ul.userSet{
        position: absolute;
        bottom: 0;
    }
    header .header-inner ul.active{
        display: flex!important;
        transform: translateX(0);
        opacity: 1;
    }
    header .header-inner ul li:hover{
        background-color: unset;
    }
    header .header-inner ul> li:not(:first-of-type):hover{
        background-color: rgb(139, 149, 161,.2)!important;
    }
    header .header-inner ul >li:not(:first-of-type):focus,
    header .header-inner ul >li:not(:first-of-type):active{
        background-color: rgb(139, 149, 161,.2)!important;
    }
    header .header-inner ul li{position: relative;height: auto!important;display: block;text-align: left;width: 100%}
    header .header-inner ul li:first-of-type{z-index: 3000;}
    header .header-inner ul li a{
        color: #8b95a1 !important;
    }
    header .header-inner ul:before{
        content: ''; display: block;
        background-color: rgba(1,1,1,.1);
        width: 13%;
        height: 110vh;
        position: absolute;
        top: 0; bottom: 0; left: -13%;
        z-index: 200;
    }

    header .header-inner ul li .subMenu ol li dl dd.lector:after{
        display: none;
    }
    header .header-inner ul li .subMenu ol li button[id^="subMenuFold"]{display: block;}
    header .header-inner ul li .subMenu{
        display: none;
        opacity: 0;
        height: 100vh;
        width: 100%;
        left:0;
        bottom: 0;
        transform: translateX(500px);
        border: unset;
        transition: .4s ease-in-out;
        z-index: 5000;
    }
    header .header-inner ul li .subMenu.active{
        display: flex;
        opacity: 1;
        transform: translateX(0);
    }
    header .header-inner ul li .subMenu ol{
        padding: 0 0 50px;
        display: flex;
        flex-direction: column;
    }
    header .header-inner ul li .subMenu ol li{
        border-left: unset;
        border-bottom: 1px solid #f1f1f1;
    }
    header .header-inner ul li .subMenu ol li:first-of-type{
        display: block;
        position: sticky;
        z-index: 500;
        background-color: #fff;
        padding-bottom: 10px;
        top: 0;
        padding-top: 10px;
    }

    header .header-inner ul li .subMenu ol li #subMenuFold{
        border: unset;
        display: block;
        text-align: left;
        width: 50%;
        position: relative;
        background-color: transparent;
        color: transparent;
    }
    header .header-inner ul li .subMenu ol li:last-of-type{
        padding-bottom: 80px;
    }

    header .header-inner ul li .subMenu ol li.helpZone dd.tit{
        color: #666;
    }
    header .header-inner ul li .subMenu ol li.helpZone dd.tit:after{
        display: none;
    }
    header .header-inner ul li .subMenu ol li.helpZone dd:not(.tit):not(.display){
        display: block!important;
    }


/* 메인페이지 시작 ******/
    #index1 .swiper-slide.theraBot .textWrap strong b, #index1 .swiper-slide.theraBot .textWrap strong b+span{
        font-size: 1.5rem;
    }
    #index1 .swiper-slide.theraBot .textWrap strong span.sm{
        font-size: 1rem;
    }
    #index1 .swiper-slide.theraBot .textWrap{
        top: 30% !important;
    }



    div[id*=index]:not(#index1) div[class*=-inner] h3{
        font-size: 1.5rem; text-align: center;
    }
    #index1 .swiper-slide .textWrap{gap: 15px; height: auto;margin-top: unset;top: 40%}
    #index2 .abouts-inner,
    #index3 .layout{
        display: block;
    }

    #index1 .swiper-slide .textWrap h2{
        font-size: 1.4rem!important;
        line-height: 2.2rem;
        margin-top: unset;
    }

    #index1 .swiper-slide .textWrap h2 b{
        font-size: 1rem;
    }
    #index1 .swiper-slide div h3, #index1 .swiper-slide.first h2,
    #index1 .swiper-slide h2 + div{
        font-size: 1rem;
        line-height: 1.8rem;
    }
    #index1 ul{
        padding: 1rem;
        display: flex; flex-direction: column;
        gap: 10px;
    }
    #index1 ul li{
        text-align: left;
    }
    #index1 .info,
    #index1 ul li{
        font-size: 1rem;
        line-height: 1.8rem;
    }
    #index1 button{
        font-size: .9rem;
        padding: 1rem;
    }
    div[id*=index]:not(#index1) div[class*=-inner] strong{
        font-size: 1.2rem;
        line-height: 2rem;
    }
    #index2 .swiper-wrapper{
        display: flex; flex-direction:  column; width: 100%;
    }
    #index2 .index2Swiper,#index2 .fp-tableCell,div[id*=index]:not(#index1) div[class*=-inner]{
        height: auto;
    }
    #index2 .indexCard{
        width: 98%;
    }
    #index2 .indexCard p{
        font-size: .95rem;
    }
    #index2 .imgWrap{
        width: 70%;
    }
    div#index1{
        position: relative;
    }
    #index2 .rgt{
        bottom: 60px;
        transform: scale(1.3);
    }


    #index2 .half.active{
        transform: translateY(-10px) !important;
    }
    #index2 button, #index3 button, #index4 button{
        width: 80%;
        margin: 50px auto;
        font-size: 1rem;
    }

    div[id*=index]:not(#index1) div[class*=-inner]{
        max-width: 768px;
        overflow: hidden;
        width: 90%;
        padding-top: unset;
    }

    #index2 .rgt{
        margin-top: -150px;
    }
    #index2 .rgt .imgWrap{
        width: 100%;
    }
    #index2 .imgWrap.active{ z-index: 100}


    #index3 p,
    #index4 h3+p{
        font-size: 1rem; line-height: 1.1; text-align: center;
    }
    #index3 .left-area,#index3 .right-area{
        width: 100%;
    }
    #index3 .imgBox{
        width: 90%;
        left: 50%; transform: translateX(-50%);
        top: -30px;
    }
    #index3 .right-area .dreamPng {
        width: 75%;
        overflow: hidden;
        position: absolute;
        top: 40px;
        left: 40px;
        height: 440px;
        border-radius: 40px;
    }
    #index3 .right-area .dreamPng img {
        border-radius: 40px;
    }

    #index3 .right-area .dreamPng .point {
        right: 50px;
        top: 145px;
    }
    #index3 .point {
        display: none;
    }
    #index3 .right-area .dreamPng img:last-of-type.active {
        animation: showDreamPng 1s ease-in-out forwards, movePhone2 50s linear infinite;
    }
    div[id*=index] div[class*=-inner] strong{
        font-size: 1.5rem;
    }

    #index7{
        margin-bottom: 100px;
    }

    #index7 p{
        font-size: 1.5rem;
    }
    #index7 .textDummy {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        font-size: 1.1rem;
        line-height: 1.5;
    }

    #index7 .textDummy span{
        justify-content: flex-start;
        text-align: left;
    }
    #index7 .textDummy span.inline{
        width: 100%;
    }
    #index7 .textDummy span:nth-of-type(3){justify-content: flex-start}

    @keyframes movePhone2{
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3000px);
    }

    100% {
        transform: translateY(0);
    }
}

    #index4 .questFlex{
        flex-direction: column !important;
        height: auto!important;
    }
    #index4 .listBox{
        width: 100%;
        padding: 1rem;
    }
    #index4 .listBox strong{
        font-size: 1.5rem;
    }
    #index4 .listBox p{
        font-size: .9rem;
        margin-left: unset;
    }
    #index4 .listBox .imgWrap{
        width: 20%;
        margin-right: 1rem;
    }
    #index5 .fp-tableCell{padding: 50px 0;}
    #index5 h3{
        line-height: 2rem;
        position: unset;
        transform: unset;
    }
    #index5 .five-inn{
        height: auto;
    }
    #index5 h3,#contentInfo .content1 .lft h2{
        font-size: 1.1rem;
    }

    #index8 .helpSwiper .helpSlide .userName strong{
        font-size: 1rem; margin-top: 10px;
    }
    #index8 .helpSwiper .helpSlide p{padding: 0 1rem 1rem; font-size: .9rem}
    #index9 div[class*=-inner]{
        height: 80vh!important;
    }
    #index9 .swiper:first-of-type{top: 10px;}
    #index9 .swiper:last-of-type{bottom: 10px}
    #index9 .subTitle{top: 54%}
    #index9 h3,#index9 .subTitle{font-size: 1.8rem!important; line-height: 1.3}
    #index9 h3 span.point{font-size: 2rem!important; display: block}
    #index9 .reviewSlide p.txt{font-size: .9rem}






    #contentInfo .content1 .cont-flex{
        display: block;
    }
    #contentInfo .content1 .rgt,
    #contentInfo .content1 .lft .imgContain .box{
        width: 100%;
        height: 100%;
    }

    #contentInfo .banner{
        height: 40vh;
    }

    #contentInfo .content1 .con-inner{margin: 0 auto;}
    #contentInfo .history span{
        font-size: 1rem;
    }
    #contentInfo .history strong{
        font-size: .8rem;
    }


/* 메인페이지 끝  ******/

    /*로그인 관련 -----*/
    #findAccount h2, #accountResult h2{
        font-size: 1.2rem;
        line-height: 2rem;
        width: 90%;
        margin: 20px auto;
    }
    #findAccount .findIdLink{
        line-height: 28px;
    }


    #login .radioBox{
        width: 90%;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 15px;
    }

    #login .inputBox, #join .inputBox,#login .idRemem,
    #login .login-inner button.submit, #join button.submit,#login .aBox,
    #findAccount form, #accountResult form,#login .unUser,#login .btnWrap{
        width: 90%;
    }
    #login .btnWrap{gap: 4%}
    #login .login-inner button.submit {width: 48%;}
    #login .login-inner button.expertSubmit{ width: 48%}
    #login .unUser strong:before, #login .unUser strong:after{width: 20%}
    /*로그인 관련 끝 ----*/

    #contentInfo .banner .title{
        width: 100%;
        top: 50%;
        left: 5%;
        transform: translateY(-50%);

    }
    #contentInfo .banner{height: 100vh;}
    #contentInfo .banner img{height: 100%; object-fit: cover}
    #contentInfo .banner strong{font-size: 30px;}
    div .content3 .con-inner{
        margin: 0 auto;
    }
    #contentInfo .content2,
    #contentInfo .content3,
    #contentInfo .bigPicWrap,
    #contentInfo .content5,
    #contentInfo .content4{
        min-width: 344px;
        width: 100%;
        transform: translateX(-17px);
    }
    #contentInfo .content2 h2, #contentInfo .content3 h2{
        font-size: 24px;
        line-height: 2rem;
    }
    #contentInfo .content3 ul li{
        width: 100%;
        display: block;
        height: 250px;
    }

    #contentInfo .content2 .company-overview{
        flex-direction: column;
        display: flex;
        margin: 0 auto;
        width: 90%;
    }
    #contentInfo .content3 .mission-vision-wrapper{
        flex-direction: column;
        display: flex;
        width: 100%;
    }
    #contentInfo .content2 .vision-box,
    #contentInfo .content5 .yearArea .yearBox{
        padding: 20px;
    }
    #contentInfo .content3 .mv-title,
    #contentInfo .content3 .mv-section{
        font-size: 1.5rem;
    }

    #contentInfo .content2 .history{
    width: 90%;; margin: 0 auto;
         }
    #contentInfo .content2,#contentInfo .content3{
        height: auto;
    }
    #contentInfo .content3 .mv-right,
    #contentInfo .content3{
        padding: 0;
    }
    #contentInfo .content3{
        padding-bottom: 100px;
    }
    #contentInfo .content4{
        height: auto;
    }
    #contentInfo .content4 .cont-flex{
        display: block;
    }
    #contentInfo .content4 ul,.myPageWrap .page-inner{
        flex-direction: column;
    }
    #contentInfo .content4 ul li{
        margin-bottom: 100px;
    }
    #contentInfo .content4 h2{
        width: 100%;
        font-size: 1.8rem;
    }
    #contentInfo .content4 .lft{
        width: 90%; margin: 0 auto;
    }
    #contentInfo .content4 .rft .imgWrap{
        width: 60%;
    }

    #contentInfo .bigPicText{
        font-size: 1.5rem;
        line-height: 1.5;
    }
    #contentInfo .content5 .con-inner{
        flex-direction: column;
        margin: 0 auto;
        width: 90%;
    }
    #contentInfo .content5 .yearList{
        width: 100%;
        max-width: unset;
        overflow-x: auto;
    }
    #contentInfo .content5 .yearList ol{
        width: 100%;
        border-top: unset;
        flex-direction: row;
        border-top: 1px solid #eee;
        justify-content: space-evenly;
        border-bottom: 1px solid #eee;
    }
    #contentInfo .content5 .yearList ol li{
        padding: 20px 5px;
        font-size: 1.2rem;
    }
    #contentInfo .content5 .yearList ol li:before{
        display: none;
    }
/*    컨텐츠 소개 2 -----------------------------*/
    #contentInfo2 .content1 .con-inner{
        padding: 0;
    }
    #contentInfo2 .content1 .section-title h2, #contentInfo2 .content1 .wellness-definition h3{
        font-size: 2rem; line-height: 1.9;
    }
    #contentInfo2 .content1 .core-elements ul{
        grid-template-columns: repeat(1, 1fr);
    }
    #contentInfo2 .content2,
    #contentInfo3 .content2{
        padding: 60px 0 ;
    }
    #contentInfo2 .content2 .wellness-box{
        flex-direction: column;
    }
    #contentInfo2 .content2 .wellbeing-box,
    #contentInfo2 .content2 .stage-box,
    #contentInfo3 .content1 .closing-message{
        padding: 25px 10px;
    }
    #contentInfo2 .content2 .stages-container{
        overflow-x: auto;
    }
    #contentInfo2 .content2 .stage-box{
        width: 40%;
        min-width: 120px;
    }
/*    컨텐츠 소개 3 -----------------------------*/
    #contentInfo3 .content1 .journey-title .highlight{
        display: block; margin-top: 10px;
    }
    #contentInfo3 .content1 .journey-number{
        width: 30px; height: 30px;
    }
    #contentInfo3 .content1 .journey-flow{
        gap: 10px;
    }
    #contentInfo3 .content1 .journey-details,
    #contentInfo3 .content2 .final-message{
        padding: 40px 20px;
    }
    #contentInfo3 .content1 .detail-row{
        grid-template-columns: 95px 1fr;
    }
    #contentInfo3 .content2 .option-title{
        font-size: 1.2rem;
        line-height: 1.5;
    }

    #content .contentDetail .lft .top .wrap >*{
        width: 100% !important;

    }
/* 컨텐츠 소개 ******/


/* 마이페이지 시작 ******/


    #myHome .myListArea ul:not(#page):not(ul[class*=review]):not(ul[class*=listBox]):not(.profileBtn)
    {display: grid; gap: 20px; grid-auto-columns: minmax(115px, auto);  grid-auto-flow: column;overflow-x: auto}
    span.back{
        font-size: 12px;
        text-decoration: underline;
    }
    #myHome{padding: 0}
    #myHome .myHomeArea{
        height: auto !important;
    }
    #myHome .myHomeArea, #myHome .myListArea,
    .reviewContain .home-inner{
        padding-top: 70px;
    }
    #myHome .myHomeArea,
    #myHome .myListArea{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .myHomeArea.index .contentArea{
        overflow-y: auto;
        width: 100%;
    }

    #aside{
        transition: all .3s ease-in-out;
        margin-right: unset;
        width: 75vw !important;
        height: 100%;
        position: fixed;
        top : 0; bottom: 0;
        left: -80vw;
        max-width: unset;
        margin-bottom: 0;
        overflow-x: auto;
        min-height: 100vh;
        max-height: unset;
    }
    #aside.on{
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        opacity: 1;
        left: 0;
        visibility: visible;
        transform: translateX(0);
        width: 75vw!important;
    }
    #aside + .menuFold{
        display: block;
        top: 0;
    }
    #aside .aside-inner{
        padding: 30px 0;
        width: 90%; margin: 0 auto;
    }

    #aside ol.profile{
        width: 100%;
    }
    #aside ol.profile li:last-of-type{
        flex-direction: column;
        gap: 20px;
    }
    #myHome .myListArea ul:not(#page,.cartList,.payBox ul,.payment .info, ul[class*=review], ul[class*=listBox])
    {flex-direction: row}
    #aside ul{
        display: flex;
        gap: 15px;
    }
    #aside ul li:not(:last-of-type){margin-bottom: unset}
    #aside ul li a{
        font-size: .8rem;
        align-items: center;
    }
    #aside ul li{
        display: flex;
        align-items: center;
        padding: 5px 10px;
        border-radius: 5px;
    }
    #aside ul li img{
        width: 20px; height: 20px;
    }

    #myHome .home-inner,
    #index6.myPageFooter{
        margin : 0 auto;
        width: 90%;
    }
    #aside ol li .money + ul {
        display: flex !important;
        flex-direction: column !important;
    }
    #aside ol + ul{
        flex-direction: column !important;
        display: flex !important;
    }
    #myHome .profile ul{
        gap: 20px;
        display: flex;
        flex-direction: column !important;
    }
    #myHome .profile ul li{
        width: 100% !important;
    }
    #aside ol.profile .profileBtn li{
        justify-content: left;
        align-items: flex-start;
    }

    #aside ol.profile .profileBtn li.only-mo{
        display: block;
    }
    #aside ol.profile .pointWrap{
        flex-direction: row;
    }
    #aside .wrap ol.show li:not(:last-of-type) {
        margin-bottom: 10px;
    }

    #myHome .profile ul li:first-of-type{
        border: unset;
    }

    #myHome .profile .pdf{
        padding: 0 0 1rem;
        width: 100%;
        margin-bottom: 1rem;
        border-bottom: 1px solid #eee;
    }

    #myHome .profile ul li strong{
        font-size: 16px;
    }
    #myHome .profile a.link,
    #myHome .contentArea .user ul li a, #myHome .contentArea .manager ul li a,
    #myHome .account-inner li a{
        font-size: 14px;
    }
    #myHome .contentArea .user ul li:not(:first-of-type), #myHome .contentArea .manager ul li:not(:first-of-type){
        margin: unset;
    }
    #myHome .payBox ul li em, #myHome .payBox ol li em{
        width: 90%;
    }
    #myHome .listArea.payChk li #bank_name{
        width: 100%;
    }

    .introArea h2, .editAccount h2, #login h2, #join h2{
        font-size: 1.4rem;
    }
    #myHome .listArea.payChk li .copy{
        display: block;
        margin: 10px 0;
    }
    .editAccount #zipCode{
        width: 40% !important;
    }
    .editAccount .addressArea button{
        padding: .8rem;
    }

    #myHome .account-inner, #myHome .setting-inner{
        width: 100%;
        padding: 1rem;
    }
    .editAccount .inputBox,
    .widthdraw .cuzArea .chkBox .box{
        width: 100%;
    }
    .widthdraw .cuzArea .chkBox label{
        padding-left: 50px;
    }
    .widthdraw .cuzArea .chkBox label:before{
        left: 10px;
    }

    #myHome .myListArea .listArea ul:not(#page,.info) li{
        width: 100%;
        padding: 20px 10px;
    }
    #myHome .myListArea .listArea ul li .textArea .textWrap strong,
    #myHome .myListArea .listArea ul li .textArea .textWrap b{
        font-size: 16px;
        line-height: 1.4;
    }
    #myHome .listArea h3 .consult-cuz{
        margin: 10px 0 0;
    }
    #dbContent .list-box, #lectureContent .list-box, #introContent .list-box, #suggestContent .list-box{
        flex-direction: column;
    }
    #dbContent .list-box input, #lectureContent .list-box input, #lectureContent .list-box textarea, #suggestContent .list-box input, #suggestContent .list-box textarea{
        width: 100%;
    }
    #dbContent .adjustTop .caution{
        font-size: .9rem;
        line-height: 1.6;
    }
    .baseLinePopup th, .baseLinePopup td{
        font-size: .9rem;
    }


    /*링크 검사 별 유료 리포트 수수료 금액 팝업*/
    .baseLinePopup h3{ font-size: .95rem}










    /*결제 리스트------*/
    #setting table th {
        font-size: 14px;
        vertical-align: middle;
    }
    #setting table td{
        vertical-align: middle;
        font-size: .85rem;
    }
    #setting input[type="checkbox"] + label:after{
        left: -3px;
        width: 15px; height: 15px;
        top: 50%;
        transform: translateY(-50%);
    }

    #myHome .myListArea .search input{
        width: 80%;
    }
    #myHome .myListArea .search button{
        width: 12%;
    }

    #myHome .filter{
        height: 50px;
        padding: unset;
    }
    #myHome .filter ul{
        display: flex!important;
        gap: 20px;
        height: 100%;
    }
    #myHome .filter li{
        min-width: 70px;
        font-size: 12px;
        overflow-x: auto;
        line-height: 1.2rem;
    }
    #myHome .payChk .warning-area input#ma-payCaution + span{line-height: 2rem}
    #myHome .payChk .warning-area input#ma-payCaution + span:before{
        top: 10px; transform: translate(0,-50%);
    }

    #myHome .payChk .warning-area .war li{
        line-height: 2rem;
    }



    /* aside list 시작---------*/
    #linkCopyPopup h2{
        margin: 20px 0 15px;
    }
    #linkCopyPopup .popup-inner{
        flex-direction: column;
    }


    #search input[type=date]{font-size: 10px; padding: 2px; width: 35%;}
    #dbContent .listContain .top h2, #dbContent .dbListArea .top h2{
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }
    #dbContent .listContain .top button, #dbContent .dbListArea .top button{
        width: 50%;
        font-size: .8rem;
        margin: unset;
    }

    #dbContent .listContain .top, #dbContent .dbListArea .top{
        flex-wrap: wrap;
        justify-content: center;
    }

    #dbContent .listContain .top .btnWrap, #dbContent .dbListArea .top .btnWrap{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    #dbContent, #lectureContent, #introContent, #suggestContent{
        width: 100%;
        padding:  50px 0;
        min-width: unset;
        max-width: 768px;
        margin: 0 auto;
    }
    #dbContent .db-inner, .lect-inner, #introContent .intro-inner, #suggestContent .suggestArea{
        width: 100%;
        margin: 50px auto;
    }
    #dbContent >div:not(#search), .lectureArea, #introContent .introArea, #suggestContent .suggestArea{
        width: 90%;
        margin: 0 auto;
    }
    .dbListArea .dbList-inner{
        overflow-x: auto;
    }
    .dbListArea table, .listContain table, .userResultArea table{
        font-size: 14px;
        width: 1000px;
    }
    .dbListArea table tbody td, .listContain table tbody td, .userResultArea table tbody td{
        padding: 15px 5px;
    }


    .myPageWrap .page-inner{
        gap: 20px;
    }

    .myPageWrap .list-inn{
        position: relative;
        width: 100%;
        overflow-x: auto;
    }
    .search-inner .dbSeaDesign{
        width: 100%;
    }
    .search-inner .dbSeaDesign .inputSearchWrap{
        flex-wrap: wrap;;
    }
    #search input{
        width: 65%;
    }
    #search input, #search select, #search button:not(#filter){
        font-size: 10px;
        padding: 10px;
        height: 50px;
    }
    .dbSeaDesign .seaDesign .dateWrap span{
        width: 20%;
    }
    /*리뷰페이지 시작 -------------------*/
    #myHome .reviewArea li{
        flex-wrap: wrap;
    }
    #myHome .written-review textarea, #myHome .reviewShow textarea{
        min-height: 30px;
    }
    /*리뷰페이지 끝 ---------------------*/



    /*충전 페이지 ----------------------------*/
    #myHome .cautionBox ul{
        display: flex !important;
        flex-direction: column !important;
    }

    /* 마이페이지 끝 ******/

/*    content list 시작 -----*/
    #filter .f-top{
        border-bottom: 1px solid #b7b7b7;
        padding-bottom: 20px;
        margin-bottom: 30px;
    }
    #filter .filter-list{
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: all 0.5s ease-in-out;
    }
    #filter .filter-list.show{
        opacity: 1;
        max-height: 1000px;
    }
    #content .c-top .title{
        width: 90%;
    }
    #filter .f-top h3{
        position: relative;

        padding-left: 30px;
    }
    #filter .f-top h3:before{
        content: '';
        display: block;
        position: absolute;
        top: 50%; left: 0; transform: translateY(-50%);
        width: 20px; height: 20px;
        background-position: center;
        background-size: 100%;
        background-image: url("../images/ico-filter.png");
        background-repeat: no-repeat;
        /*border: 1px solid #3333;*/
        border-radius: 5px;
    }
    #content .contentDetail .lft .btnBox button{
        padding: 1rem .5rem!important;
        width: 100%;
    }

    #content .c-top .title ,
    #content2 .c-top .title{ width: 90%;}
    #content .c-top .title strong,
    #content2 .c-top .title strong{
        top: 28%;
        font-size: 1.2rem;
        z-index: 3;
    }
    #content .c-top .title span, #content2 .c-top .title span,
    #content .c-top .title p, #content2 .c-top .title p,
    #content .c-top .title .pop, #content2 .c-top .title .pop{ font-size: .7rem}
    #content .c-top .title span, #content2 .c-top .title span,#content .c-top .title .pop, #content2 .c-top .title .pop{ top: 42%}
    #content .c-top .title p, #content2 .c-top .title p{top: 60%; font-size: .7rem}
    #content .con-inner,
    #content2 .con-inner {
        flex-direction: column;
    }
    #filter{
        width: 100%; margin: 0 auto 50px;
    }
    #content .section-inner .cont-flex,
    #content2 .section-inner .cont-flex{
        width: 100%; margin: 0 auto;
    }

    .contentDetail{
        width: 90%; margin: 0 auto;
    }
    #content .contentDetail .lft .top{
        gap: 20px;
    }
    #content .contentDetail .lft .top,
    #content2 .contentDetail .lft .top{
        flex-direction: column;
    }
    #content .contentDetail .lft .top >*,
    #content2 .contentDetail .lft .top >*{
        width: 100% !important;
    }
    #content .section-inner .cont-flex li strong.title,
    #content .section-inner .cont-flex .cost b,
    #content2 .section-inner .cont-flex li strong.title,
    #content2 .section-inner .cont-flex .cost b{
        font-size: 1.2rem;
    }
    #content2 .section-inner .cont-flex li a{
        gap: 20px
    }
    #content2 .con-inner{
        width: 100%!important;
    }

    #content2 .listArea .profileImg{
        width: 150px; height: 250px;
    }
    #content2 .listArea .profileImg{
        width: 150px; height: 250px;
    }
    #content2 .bigTop{
        margin-bottom: unset;
    }
    #content2 .title-wrap b{
        font-size: .8rem;
    }
    #content2 .title-wrap .bigTop strong{
        font-size: 1rem;
        margin-right: unset;
    }
    #content2 .elementBox{
        flex-direction: column;
        gap: 5px;
    }
    #filter .f-top button{
        width: 25%;
    }
    #content .expertDetail table td.expertName{
        flex-direction: column-reverse;
    }



/*    컨텐츠2 시작*/

    #content2 .listArea li button{
        display: none;
    }
    #content .section-inner .cont-flex2{
        width: 100%;
    }


        /*    재무계산기 */

/*    컨텐츠 디테일 시작****/
    #content .productDetail .lft .lft-inner{}
    #content .contentDetail .lft .top span:after{
        width: 35%;
    }
    #content .contentDetail .lft .top #allDataCont.show{
        max-height: 100px;
        line-height: 1.6;
    }
    #content .productDetail .lft .top span:after{display: none!important;}

    #content .productDetail .contain{
        flex-direction: column;
    }
    #content .cont-flex2 ul{
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }
    #content .cont-flex2 ul li{
        width: 100%;
    }
    #content .cont-flex2 ul li b,#content .cont-flex2 ul li span{
        font-size: 14px;
    }

    #content .expertDetail .infoWrap{
        overflow-x: auto; position: relative;
    }
    #content .expertDetail .top{position: relative}
    #content .expertDetail .top:after{
        content: '좌우로 슬라이드 하여 정보를 확인해보세요';
        font-size: 10px; font-weight: 500;
        color: #059669;
        position: absolute; bottom: -20px; left: 0;
        animation: opacity 3s linear infinite;
        opacity: 1;
    }
    @keyframes opacity {
        0%{opacity: 1;}
        100%{opacity: 0.2}
    }

    #content .expertDetail table {
        width: 140%;
    }


    #content .expertDetail table .th{
        font-size: .95rem;
    }

    #content .expertDetail .lft .bottom{
        display: none;
    }

    #content2 .gridTemp{
        display: block;
    }
    #content2 .gridTemp li a{
        flex-direction: row;
    }

    .container.nptiArea ul.tabMenu{
        margin-bottom: 80px;
    }
    #content .container #review-container strong.quest{
        flex-direction: column;
    }
    #content .container .mobileTableStyle{
        overflow-x: scroll;
        overflow-y: unset;
    }
    #content .container .mobileTableStyle table{
        width: 550px;
    }
    #content .container table th{font-size: 1rem; line-height: 1.8}
    #content .container th span.small{display: block}


    /*pace 시작====*/

    #content .container.pace .imgBtnWrap .btnWrap{
        bottom: 26px; width: 80%; height: 30px; justify-content: space-between;
    }
    #content .container.pace .imgBtnWrap .btnWrap a{
        width: 70px;
    }

    /*컨텐츠 상세 페이지 -------------------------------*/
    #dbContent .listContain .top, #dbContent .dbListArea .top, #CAList .lectureListTop{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #dbContent .listContain .top h2, #dbContent .dbListArea .top h2, #CAList .lectureListTop h2{
        width: 100%;
    }
    #dbContent .listContain .top h2, #dbContent .dbListArea .top h2, #CAList .lectureListTop h2{
        font-size: 1.2rem;
        line-height: 1.8;
        text-align: center;
    }
    #dbContent .listContain .top button, #dbContent .dbListArea .top button, #CAList .lectureListTop button{
        margin: 20px 0 ;
    }

    #msigInfo-content .msigChapter .gifWrap{
        width: 100%;
    }
    #msigInfo-content .peopleBox:nth-child(2), #msigInfo-content .peopleBox:nth-child(3){margin-top: unset}
    #msigInfo-content .peoplePicArea{
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }
    #msigInfo-content .mo-overflowStyle{
        overflow-x: scroll;
        position: relative;
    }
    #msigInfo-content .msig-background{
        margin-left: 150px;
        width: 400px;
        height: 400px;
    }
    #msigInfo-content .msig-background .process-item {
        font-size: 14px;
        width: 120px;
        height: 60px;
    }
    #msigInfo-content .msig-background .process-item.action{
        right: -32%;
        top: 68%;
    }
    #msigInfo-content .msig-background .process-item.result{
        top: 68%;
        left: 8%;
    }
        #msigInfo-content .formula{
        font-size: 14px;
        overflow-x: scroll;
    }
        #touchStart:after{
            content: '좌우로 스크롤 하여 내용을 확인해보세요!';
            color: #059669;
            font-size: 10px;
            font-weight: 400;
            position: absolute;
            top: 10px;
            left: 1px;
            opacity: .6;
            animation: showTxt 1.7s ease-in-out infinite;
        }
        @keyframes showTxt {
            0%{opacity: .6}
            50%{opacity: .3}
            100%{opacity: .6}
        }
    #simulation .btnWrap:after{
        font-size: .9rem;
        top: 50px;
    }
    #simulation .inputWrap,
    #simulation .inputWrap >div,
    #simulation #submitBtn {
        width: 100%;
    }
    #simulation .userType, #simulation #userName, #simulation .infoInput input,
    #simulation .footnote{
        font-size: .8rem;
    }
    #simulation label{
        max-width: 90px;
        min-width: 90px;
    }
    #simulation .infoInput input{
        width: 50%;
    }

    #myHome .unUserSideMenu{
      display: none !important;
    }

/*    --------------------------전문가 입력 폼*/

    #expertInput,
    #contactList{width: 90%; margin: 50px auto; max-width: 750px }
    #expertInput .left .infoImg{ font-size: .8rem; margin-left: unset}
    #expertInput .left em{width: 100%}
    #expertInput .right{width: 100%;}
    #expertInput .right .inputWrap:nth-of-type(2){
        display: flex; flex-wrap: wrap; gap: 20px;
        justify-content: space-between;
    }
    #expertInput .right .inputWrap:nth-of-type(2) strong,
    #expertInput .right .inputWrap:nth-of-type(3) strong{
        width: 100%;
        margin-bottom: unset;
    }

    #expertInput .right .inputWrap:nth-of-type(2) label{
        width: 42%;
    }
    #expertInput .selBoxHere button{
        width: 70%;
        max-width: 300px;
        min-width: 190px;
    }
    #expertInput .canInfoBox input[type=number]{
        width: 80%;
    }
    #expertInput .canInfoBox .btnWrap{
        display: grid;
        gap: 20px;
        align-items: center;
        grid-auto-columns: minmax(100px, 160px);
    }
    #expertInput .canInfoBox .btnWrap button{
        font-size: .8rem;
    }
    #expertInput .canInfoBox .coun{
        flex-direction: column;
        display: flex; flex-wrap: wrap; gap: 20px;
    }
    #expertInput .portfolio li:not(.btn){
        display: block;
    }
    #expertInput .portfolio li select{
        width: 60%;
        padding: 10px;
    }
    #expertInput .warning-area input#payCaution +span{
        font-size: .8rem;
    }
    #expertInput .right .inputWrap:nth-of-type(3) strong{
        margin-bottom: 10px;
    }
    #expertInput .right .inputWrap:nth-of-type(4),
    #expertInput .choseTagWrap{
        display: flex; flex-direction: column; gap: 20px;
    }
    #expertInput .right .inputWrap:nth-of-type(4) strong,
    #expertInput .choseTagWrap strong{
        margin-bottom: -5px;
    }
    #filePopup, #urlPopup{
        width: 85%;
    }
    .expertInput .file-inner .btnWrap{
        width: 80%;
    }
    #expertInput .canInfoBox button.reset{
        display: inline-block;
    }
    #expertInput .choseTagWrap button:not(.reset){
        width: 160px;
    }
    #expertInput .selBoxHere .selContain{
        grid-template-rows: repeat(5,1fr);
        gap: 30px;
        grid-template-columns: unset;
    }
/*    입력폼 끝 -----------------------------------------------*/

    #consultPopup .canInfoBox .btnWrap,
    #consultPopup .choseTagWrap{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    #consultPopup textarea{
        font-size: .8rem;
    }
    #consultPopup input[type=checkbox]+span{
        font-size: .65rem;
    }




    /*    테라피 시작 -----------------------------------------------*/
    .therapyPage .c-top img, .therapyPage .c-top .back{object-fit: cover}
    .therapyPage .c-top{height: 50vh}
    .therapyPage .c-top .title strong{ font-size: 22px; line-height: 35px;top: 30%;}
    .therapyPage .c-top .title p{font-size: 12px; line-height: 24px;top: 65%; width: 90%}
    .therapyPage .listBtn ul{padding-top: 10px}
    .therapyPage .listBtn ul li a{padding-bottom: 10px}
    .therapyPage .listBtn ul,.therapyPage .listBtn ul li a{ line-height: 20px; font-size: .8rem;gap: 10px}
    #npti.therapyPage h3, #finMind.therapyPage h3, #courple.therapyPage h3{line-height: 1.6rem;}
    #npti.therapyPage .box1, #finMind.therapyPage .box1, #courple.therapyPage .box1{gap: 30px;}
    #npti.therapyPage .box1 .contWrap, #finMind.therapyPage .box1 .contWrap, #courple.therapyPage .box1 .contWrap{width: 100%}
    #npti.therapyPage .box1 .contWrap strong, #finMind.therapyPage .box1 .contWrap strong, #courple.therapyPage .box1 .contWrap strong{font-size: .85rem}
    #npti.therapyPage .box2 ul li, #finMind.therapyPage .box2 ul li, #courple.therapyPage .box2 ul li{font-size: .9rem;flex-direction: column;width: 100%;gap: 15px;}
    #npti.therapyPage .box2 p, #finMind.therapyPage .box2 p, #courple.therapyPage .box2 p,
    #npti.therapyPage .box2 strong, #finMind.therapyPage .box2 strong, #courple.therapyPage .box2 strong{width: 100%;}
    #npti.therapyPage .box1 .divWrap div, #finMind.therapyPage .box1 .divWrap div, #courple.therapyPage .box1 .divWrap div{font-size: .8rem; line-height: 1.3rem}
    #npti.therapyPage .box3 ul, #courple.therapyPage .box8 ul{grid-template-columns: repeat(2,1fr)}
    #npti.therapyPage .box3, #courple.therapyPage .box8{height: unset;padding: 50px 0}
    #npti.therapyPage .box3 ul li, #courple.therapyPage .box8 ul li{height: 20vh; align-items: center;gap: 10px;}
    #npti.therapyPage .box3 li img, #courple.therapyPage .box8 li img{width: 60px;height: 60px;}
    #npti.therapyPage .box3 li p, #courple.therapyPage .box8 li p{font-size: .9rem;margin-top: unset;text-align: center}
    #npti.therapyPage .box4 .cost, #finMind.therapyPage .box4 .cost, #courple.therapyPage .box4 .cost{font-size: .9rem}
    #npti.therapyPage .box4 .cost .bold, #finMind.therapyPage .box4 .cost .bold, #courple.therapyPage .box4 .cost .bold{width: 17%;display: block;margin-bottom: 10px;text-align: left}


    #finMind .box3 .contWrap, #courple .box3 .contWrap{flex-wrap: wrap;}
    #finMind .box3 .flexBox, #courple .box3 .flexBox{gap: 20px;}
    #finMind .box3 p, #courple .box3 p{font-size: 1rem; text-align: center}
    #finMind .box3 img, #courple .box3 img{width: 100%; height: auto; object-fit: contain}
    #finMind .box3 .flexBox:nth-of-type(2) .left, #courple .box3 .flexBox:nth-of-type(2) .left,
    #finMind .box3 .flexBox:nth-of-type(4) .left, #courple .box3 .flexBox:nth-of-type(4) .left{order: 2}
    #finMind .box3 .flexBox:nth-of-type(2) .right, #courple .box3 .flexBox:nth-of-type(2) .right,
    #finMind .box3 .flexBox:nth-of-type(4) .right, #courple .box3 .flexBox:nth-of-type(4) .right{order: 1}

    #finMind .box5 .contWrap{gap: 5px; width: 100%; flex-wrap: wrap; max-height: unset!important;}
    #finMind .box6 li, #courple .box6 li,#finMind .box5 div strong{font-size: .8rem; line-height: 1.2rem}
    #finMind .box6 li, #courple .box6 li{width: 100%;}
    #finMind .box6 ul, #courple .box6 ul{margin-top: unset;flex-wrap: wrap;gap: 20px;}
    .therapyPage button {width: 90%;font-size: .9rem; left: 50%; transform: translateX(-50%); bottom: 20px; top: unset}
    .card-face >div{font-size: .95rem!important;line-height: 1.2rem}
    #finMind .box7 h3:after{width: 100%; font-size: .8rem}


    /*    테라피 끝 -----------------------------------------------*/

    /*    제휴문의 시작 -----------------------------------------------*/
    #contactList{
        padding: 0 0 100px;
    }

    #contactList .tableP{overflow-x: auto}
    #contactList table{width: 800px;}
    #contactList table th, #contactList table td{font-size: 1rem}
    /*    제휴문의 끝 -----------------------------------------------*/

    #myHome .myListArea .listArea ul li .btnArea .buy{
        padding: 10px 5px;
    }
    #consultContentPopup{
        width: 90%;

    }

    #expertInput .warning-area li, #consultPopup .warning-area li, #consultContentPopup .warning-area li{font-size: .8rem;}
    #myHome .payChk .warning-area input#ma-payCaution + span, #expertInput .warning-area input#payCaution +span, #consultContentPopup .warning-area input#consultCaution + span{
        font-size: 10px;
    }
    #consultContentPopup .consultDelBox{
        padding: 1rem;
    }

    #consultContentPopup h3{
        margin: 50px auto 0;
    }
    #consultPopup .checking, #consultContentPopup .checking{
        flex-direction: column;
        gap: 10px;
        align-items: center;
        justify-content: center;
    }
    #consultPopup .checking p, #consultContentPopup .checking p{
        margin-top: 0;
        font-size: .95rem;
    }
    #consultPopup .checking p:not(:last-of-type), #consultContentPopup .checking p:not(:last-of-type){
        padding-right: unset;
        border: unset;
    }
    #content .container #finMind-content .qBox:last-of-type button,#content .container #nptiInfo-content .qBox:last-of-type button, #content .container #msigInfo-content .qBox:last-of-type button{
        width: 100%;
        font-size: 1rem;
    }

    #expertInput .canInfoBox button, #consultPopup .canInfoBox .choice button, #consultPopup .timeArea button{
        padding: .8rem 0;
        width: 30%;
    }


    #simulation .imtArea ul{
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    #simulation .imtArea strong{
        min-width: unset;
        width: 100%;
    }
    #simulationBoard .inputArea{padding: 1rem;}
    #simulationBoard ul .imgWrap{
        min-height: 600px!important;
    }
    #simulation .imtArea li{
        min-height: 222px;
        padding: 1rem .5rem;
    }
    #simulation .imtArea li:not(:last-of-type){
        width: 45%;
    }
    #simulation .imtArea .positionInfo{
        flex-wrap: wrap;
        height: 485px;
    }
    #simulation .imtArea .positionInfo .makeArea,
    #simulation .imtArea .positionInfo .dangerArea{
        width: 100%;
        height: 240px;
    }
    #simulation #submitBtn:after{
        font-size: .8rem;
    }


    #myHome .listArea .listBox{
        display: flex;
        flex-direction: column;
    }
/*    테라피존 리뉴얼 시작=========================================================*/
    #therapyP #s1:after{ display: none;}
    #therapyP #s1 .bi-arrow-down-short{
        font-size: 40px;
    }
    #therapyP #s1 h2,
    #therapyP #s2 .top h2,
    #therapyP #s2 ul li span.big,
    #therapyP #s3 h2.move,
    #therapyP #s4 h2,
    #therapyP #s5 h2{
        font-size: 2.2rem;
    }
    #therapyP #s2 ul li span.small,
    #therapyP #s3 .swiper-slide .wrap h3,
    #therapyP #s5 .experts .muted:first-of-type{
        font-size: 1.2rem;
    }
    #therapyP #s2 .top{
        flex-direction: column;
    }
    #therapyP #s2 .top h2{
        position: unset; display: inline-block;
    }
    #therapyP #s2 ul{
        gap: 25px;
        grid-template-columns: repeat(1,1fr);
    }
    #therapyP #s3 .swiper-slide .wrap{
        top: 0; right: 0; left: 0; bottom: unset; padding: .5rem 0 ; width: 100%;;
    }
    #therapyP #s3 .swiper-slide .wrap >*{
        width: 90%; margin: 0 auto;
    }
    #therapyP #s4 .sticky{
        overflow: unset;
    }
    #therapyP #s4 .ipbox{
        padding: 15px;
    }
    #therapyP #s4 .ipbox strong{
        display: block;
    }
    #therapyP #s5 .container {
        /*height: 50vh;*/
    }
    #therapyP #s5 .container.move, #therapyP #s5 .container.move >*{
        max-height: 45%;
    }

    /*    머니라이프 상세페이지 버튼 시작 *********************/
    #content .container.moneyLife a{
        width: 150px;
        height: 60px;
        bottom: 20px;
    }

    /*테라피 효과 ~~~~~~~~~~~~₩*/
    #therapyEffect .banner h1 {
        font-size: 2rem;
    }

    #therapyEffect .banner .subtitle {
        font-size: 1.25rem;
    }

    #therapyEffect .section-title {
        font-size: 1.875rem;
    }

    #therapyEffect .comparison-container {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    #therapyEffect .split-content {
        flex-direction: column;
        gap: 32px;
    }

    #therapyEffect .content1,
    #therapyEffect .content2,
    #therapyEffect .content3,
    #therapyEffect .content4,
    #therapyEffect .content5 {
        padding: 80px 0;
    }
    /*    테라피존 리뉴얼 끝=========================================================*/


/*    허브 페이지 시작 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    #hubPage .c-top{
        height: 0 !important;
    }
    #hubPage .c-top .title{
        width: 90%;
        margin: 0 auto;
        padding: 1rem 0
    }

    #hubPage .about .main-desc .main-title{
        font-size: 1.8rem;
    }
    #hubPage .about .main-desc .main-text{
        font-size: 1.1rem;
    }

    #hubPage .about .process .container{
        padding: 0 15px;
    }
    #hubPage .about .process-steps{
        display: flex;
    }

    #hubPage .about .process{
        width: 100%;
    }
    #hubPage .about .step{
        width: 100%;
        padding: 30px 20px;
    }
    #hubPage .about .step .step-content {
        padding: 10px 0;
    }

    #hubPage .about .main-desc .main-text,
    #hubPage .about .main-desc .container{
        padding : 0
    }

    #hubPage .category ul{
        overflow-x: auto;
    }
    #hubPage .productImg{
        width: 100%;
        max-width: unset;
    }
    #hubPage .infoCardArea h2{
        font-size: 32px;
    }
    #hubPage .listArea .gridTemp,
    #hubPage .infoCardArea .info-card {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    #hubPage .infoCardArea .info-card li a {
        min-height: 180px;
        padding: 24px;
    }

    #hubPage .infoCardArea .info-card .title {
        font-size: 20px;
    }

    #hubPage .c-top .title p,
    #hubPage .c-top .pop,
    #hubPage .infoCardArea .info-card .sub {
        font-size: 14px;
    }


/*    본인 인증 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    #identityPage.verification .ver-inner {
        padding: 32px 24px;
    }

    #identityPage.verification .ver-title {
        font-size: 22px;
    }

/*    mtt 센터 시작 ------------------------------------*/
    #mttPage section {
        padding: 80px 0;
    }

    #mttPage .hero-section {
        padding: 100px 0 80px;
    }

    #mttPage .hero-title {
        font-size: 36px;
    }

    #mttPage .hero-subtitle {
        font-size: 18px;
    }

    #mttPage .hero-description {
        font-size: 16px;
    }

    #mttPage .section-title {
        font-size: 32px;
    }

    #mttPage .support-grid,
    #mttPage .value-cards {
        grid-template-columns: 1fr;
    }

    #mttPage .qualification-box {
        padding: 40px 28px;
    }

    #mttPage .qualification-title {
        font-size: 24px;
    }

    #mttPage .cta-title {
        font-size: 32px;
    }

    #mttPage .cta-benefits {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    #modalOverlay .modal {
        padding: 36px 28px;
        margin: 20px;
    }

    #modalOverlay .modal-title {
        font-size: 24px;
    }

/*    뉴플러스 통장 시작*/

    #moneyPrediction .bankBook .hero-title {
        font-size: 26px;
    }

    #moneyPrediction .bankBook .hero-description {
        font-size: 16px;
    }

    #moneyPrediction .bankBook .method-section {
        padding: 32px 24px;
    }

    #moneyPrediction .bankBook .method-title {
        font-size: 20px;
    }

    #moneyPrediction .bankBook .card {
        padding: 24px;
    }

    #moneyPrediction .bankBook .card-title {
        font-size: 19px;
    }

    #moneyPrediction .bankBook .section-title {
        font-size: 22px;
    }

/*    머니 하우징 상세페이지 시작*/
    .moneyStory .house-contain{
        width: 100%;
    }

    .moneyStory .comparison-box{
        padding: .8rem;
    }
    .moneyStory .highlight-box{
        padding: 1.5rem;
    }
    .moneyStory.moneyStory .content-wrapper {
        display: block !important;
    }
    .moneyStory.moneyStory .house-roof {
        border-left: 110px solid transparent !important;
        border-right: 110px solid transparent !important;
    }
    .moneyStory .section-title{
        font-size: 1.6rem;
    }
    .moneyStory .form-title,
    .moneyStory .section-content p{
        font-size: .95rem;
    }
    .moneyStory .highlight-box p{
        font-size: 1rem;
    }

/*    결제 페이지 ------------------------------------------------*/
    #paymentContainer .payment-inner,
    #paymentContainer .labelWrap.couponArea, #paymentContainer .pointInline,
    #paymentContainer .payStatus .labelWrap{
        flex-direction: column;
        align-items: flex-start;
    }
    #paymentContainer .payProcess, #paymentContainer .payPreview,
    #paymentContainer .labelWrap.couponArea > *, #paymentContainer .pointInline > .lt{
        width: 100%;
    }
    #paymentContainer .labelWrap.couponArea > *, #paymentContainer .pointInline > .lt{
        justify-content: space-between;
    }
    #paymentContainer .payWay ul{
        grid-template-columns: repeat(2,1fr);
    }
    #paymentContainer .payStatus .bookInfo >div{
        font-size: .9rem;
    }
/*    걀제 페이지 쿠폰 팝업 ---*/
    #couponPopup li{
        flex-direction: column;
    }
    #paymentContainer.paymentResult .payProcess .labelWrap{
        flex-wrap: wrap;
    }
    #paymentContainer.paymentResult .labelWrap label{
        width: 23%;
    }
    #paymentContainer.paymentResult #buyCharge,
    #paymentContainer.paymentResult .labelWrap input, #paymentContainer.paymentResult .labelWrap label + span{
        width: 75%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
    }
/*    FInmx malll*/
    #hubPage .finxMall .filter{
        display: grid;
        grid-template-columns: repeat(4,1fr);
    }
    #content #consultModal .close-modal{
        top : 10px
    }
    #hubPage .finxMall .filter .mallFilterBtn{
        height: 60px;
        font-size: .85rem;
    }
    #content #consultModal .form-group .finxTestBox{
        display: flex !important;
        flex-wrap: wrap;
    }
    #content #consultModal .form-group .finxTestBox label{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #content #consultModal .modal-content{
        max-height: 1300px;
    }
    #content #consultModal #consultForm > div{
        grid-template-columns: repeat(1,1fr) !important;

    }

}