@charset "utf-8";

/***************************
** 메인
**************************/
.step-1, .step-wrapper { transition: all 1s ease-in-out;}
.step-1 { opacity: 0; transform: translateY(20px); }
.step-1.active { opacity: 1; transform: translateY(0);}
.step-wrapper { max-height: 0; opacity: 0; overflow: hidden; transform: translateY(20px);}
.step-wrapper.active { max-height: 500px; opacity: 1; transform: translateY(0);}


/***************************
** reason
**************************/
.tab-btn {    border: none;    background: transparent;    cursor: pointer;    transition: 0.3s;}
.tab-btn.active {    background-color: #134CEA;     color: white;}
.tab-content {    display: none;    animation: fadeEffect 0.5s; }
.tab-content.active {    display: flex;}

/* 애니메이션 효과 */
@keyframes fadeEffect {
    from {opacity: 0; transform: translateY(10px);}
    to {opacity: 1; transform: translateY(0);}
}


/***************************
** service
**************************/
.serviceItem{width: calc(33.333% - 20px);}
.serviceItem1{width: calc(33.333% - 20px);}

/***************************
** solution
**************************/
.solutionBox{display:grid; grid-template-columns: repeat(3 , 1fr);}


/***************************
** step
**************************/
.step_line { position: absolute; top: 30px; bottom: 30px; left: 29px; width: 2px; background-color: #91949F; z-index: 0;}
.step_btn { cursor: pointer; z-index: 1; transition: 0.3s;}
.step_circle_box { transition: 0.3s;}
.step_text { transition: 0.3s;}
.step_btn.active .step_text { color: #134CEA;}
.step_btn.active .step_circle { background-color: #134CEA; }
.step_btn.active .step_circle_box{border:1px solid #134CEA; border-radius: 99px; animation: pulse_glow 1.5s infinite; }

/* 그림자가 퍼지며 깜빡이는 효과 */
@keyframes pulse_glow {
    0% {
        box-shadow: 0 0 0 0 rgba(26, 92, 232, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(26, 92, 232, 0); /* 널리 퍼지면서 투명해짐 */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(26, 92, 232, 0);
    }
}

/* --- 오른쪽 콘텐츠 카드 스타일 --- */
.step_display_area {    flex: 1; }
.step_content { display: none; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); animation: slide_up 0.5s ease-out;}
.step_content.active { display: flex;}
/* 콘텐츠 나타나는 애니메이션 */
@keyframes slide_up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/********************
** qa
********************/
.online{background:url('../img/counselBg.jpg'); background-size:cover; background-position:center;}
.online input[type="radio"]{left:-9999px}
.online input[type="radio"] + label{border:1px solid #D9DADE; background:#fefefe; cursor: pointer; transition: ease-in 0.3s;}
.online input[type="radio"]:checked + label{background:#134CEA; border:1px solid #134CEA; color:#fefefe}

.inputBox{ padding: 24px; border: 1px solid #D9DADE ; border-radius: 8px;}
.inputBox:placeholder-shown{color: #91949f; line-height: 1em;}

.custom-checkbox{width: 20px; height: 20px; padding: 0; border: 1px solid #134CEA; border-radius: 4px; background-color: #fff; margin-right: 10px; transition: background-color 0.3s, border 0.3s; position: relative;}
.checkpolicy input[type="checkbox"] {display: none;}
.checkpolicy input[type="checkbox"]:checked + .custom-checkbox{background-color: #134CEA; border-color: #134CEA;}
.checkpolicy input[type="checkbox"]:checked + .custom-checkbox::after{content: ''; position: absolute; top: 2px; left: 5px; width: 5px; height: 8px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg);}

.moreBtn{text-decoration: underline;}   
.qaBox{border-radius: 24px 24px 0 0;}