@charset "utf-8";

.procedure .titWrap h2 { font-size: var(--fs40); margin-bottom: 50px; } 

.procedure .info { display: grid; grid-template-columns: 230px auto; gap: 10px; } 
.procedure .info .subTit { padding: 35px; border-radius: 30px; margin-right: 10px; background: var(--base1) url(/images/consulting/ico_procedure01.svg) no-repeat bottom right 20px; color: #fff; } 

.procedure .info .subTit h3 { position: relative; font-size: var(--fs26); padding-top: 20px; } 
.procedure .info .subTit h3::before { content: ""; position: absolute; width: 45px; height: 3px; background: #fff; top: 0; } 

.procedure .info ul { border: 1px solid #ddd; border-radius: 30px; } 
.procedure .info ul li { padding: 45px 70px; display: flex; gap: 50px; align-items: center; } 
.procedure .info ul li+li { border-top: 1px solid #ddd; } 
.procedure .info ul li p { font-size: var(--fs22); font-weight: 700; color: var(--base1); } 

.procedure h4 { font-size: var(--fs26); margin: 50px 0 20px 0; } 

.procedure .process ul { display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; box-sizing:border-box; } 
.procedure .process ul li { box-sizing:border-box; min-width:0; flex:0 0 calc((100% - (10px * 4)) / 5); } 
.procedure .process ul li .step svg { display:block; max-width:100%; height:auto; } 

.procedure .process ul li dl { height: 200px; border-radius: 30px; padding: 45px 35px; font-size: var(--fs16); } 
.procedure .process ul li dl { background: #F6F6F8 url(/images/consulting/step1.svg) no-repeat right 35px bottom 45px; transition: .3s; } 
.procedure .process ul li:nth-child(2) dl { background: #F6F6F8 url(/images/consulting/step2.svg) no-repeat right 35px bottom 45px; } 
.procedure .process ul li:nth-child(3) dl { background: #F6F6F8 url(/images/consulting/step3.svg) no-repeat right 35px bottom 45px; } 
.procedure .process ul li:nth-child(4) dl { background: #F6F6F8 url(/images/consulting/step4.svg) no-repeat right 35px bottom 45px; } 
.procedure .process ul li:nth-child(5) dl { background: #F6F6F8 url(/images/consulting/step5.svg) no-repeat right 35px bottom 45px; } 

.procedure .process ul li:hover dl { background: var(--base1) url(/images/consulting/step1.svg) no-repeat right 35px bottom 45px; color: #fff; } 
.procedure .process ul li:nth-child(2):hover dl { background: var(--base1) url(/images/consulting/step2.svg) no-repeat right 35px bottom 45px; color: #fff; } 
.procedure .process ul li:nth-child(3):hover dl { background: var(--base1) url(/images/consulting/step3.svg) no-repeat right 35px bottom 45px; color: #fff; } 
.procedure .process ul li:nth-child(4):hover dl { background: var(--base1) url(/images/consulting/step4.svg) no-repeat right 35px bottom 45px; color: #fff; } 
.procedure .process ul li:nth-child(5):hover dl { background: var(--base1) url(/images/consulting/step5.svg) no-repeat right 35px bottom 45px; color: #fff; } 


.procedure .process ul li dl dt { font-size: var(--fs20); font-weight: 700; line-height: 1.4; } 
.procedure .process ul li:first-child dl dt { margin-bottom: 10px; } 
.procedure .process ul li dl dd { position: relative; padding-left: 15px; } 
.procedure .process ul li dl dd:before { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 100px; left: 0; top: 10px; background: var(--black); transition: .3s; } 
.procedure .process ul li:hover dl dd:before { background: #fff; } 

.procedure .process ul li .step { padding: 20px 35px; } 
.procedure .process ul li .step p { font-size: var(--fs14); font-weight: 600; transition: .3s; } 
.procedure .process ul li .step i { width: 100%; fill: #3069B8; stroke-width: 2px; stroke: rgba(38, 41, 61, 0.20); } 
.procedure .process ul li:hover .step p { color: var(--base1); } 

.procedure .document p { position: relative; padding-left: 15px; } 
.procedure .document p::before { position: absolute; content: ""; top: 10px; left: 0; width: 6px; height: 6px; border-radius: 100px; background: #ddd; } 







/* ************************ 태블릿 (~991) ************************ */
@media screen and (max-width:991px) {

    .procedure .info {grid-template-columns: auto; }
    .procedure .info .subTit {margin-right: 0; background-size: 100px;}

    .procedure .process ul li{ flex-basis: calc((100% - (10px * 2)) / 3); }


}



/* ************************ 모바일 (~767) ************************ */
@media screen and (max-width:767px) {

    .procedure .info ul li {flex-direction: column; align-items: flex-start; gap: 5px; padding: 25px 35px;}

    .procedure .process ul li{ flex-basis: calc((100% - 10px) / 2); }

}


/* ************************ 모바일 (~500) ************************ */
@media screen and (max-width:500px) {

    .procedure .titWrap h2 {margin-bottom: 20px;}
    .procedure .process ul li .step {padding: 10px;}
    .procedure .process ul li .step svg {display: none;}
    .procedure .process ul li dl {padding: 25px; border-radius: 20px; background-position: right 25px bottom 25px !important;}
    

}