@charset "utf-8";

.process h3 {font-size: var(--fs80); color: #000; line-height: 1.2;}
.process h3 span {color: var(--base2);}

.process .serviceWrap .w1400 {width: auto;}
.process .serviceWrap p {font-size: var(--fs40); color: #000; font-weight: 700; line-height: 1.2;}
.process .serviceWrap .ruler {margin: 30px 0; height: 101px; overflow: hidden;}
.process .serviceWrap .bottomTxt span+span {display:block; margin-top: 20px;}

.process .serviceWrap {position:relative;display:flex;justify-content: flex-end; gap: 150px;}
.process .serviceWrap .processBg {position:relative;width:50%;min-width:600px;}
.process .serviceWrap .processBg .img {position:absolute;transition:.4s ease;}

.process .serviceWrap .processBg .img {width:14vw;max-width:600px;aspect-ratio:2/3;}
.process .serviceWrap .processBg .img img {width:100%;height:100%;object-fit:cover;display:block;}

.process .serviceWrap .processBg .img:nth-child(1) {top:0;right:24vw;z-index:1;}
.process .serviceWrap .processBg .img:nth-child(2) {top:4vw;right:0;z-index:2;}
.process .serviceWrap .processBg .img:nth-child(3) {top:9vw;right:13vw;z-index:3;box-shadow:2vw 2vw 2vw rgba(0,0,0,0.25);}



.process .line {width: 85%; height: 1px; background: #E0E0E0; margin-top: 100px;}

.process .processWrap {padding-top: 100px;}
.process .processWrap h3 {margin-bottom:50px;}
.process .processWrap .processIn+.processIn {margin-top: 40px;}
.process .processWrap .processIn h4 {color: var(--base2); font-size: var(--fs32); margin-bottom: 15px;}
.process .processWrap .processIn ul {display: grid; grid-template-columns: repeat(5,1fr); gap: 30px;}
.process .processWrap .processIn ul li {padding-top: 20px; border-top: 2px solid #000;}
.process .processWrap .processIn ul li span {display: block; color: #ddd; font-size: var(--fs24); font-weight: 700; background: url(/images/process/process-arrow.svg) no-repeat center right;}
.process .processWrap .processIn ul li:last-child span {background: none;}
.process .processWrap .processIn ul li p {font-weight: 400; font-size: var(--fs24); color: #000; font-weight: 600; margin-bottom: 5px;}
.process .processWrap .processIn ul li div {color: #666;}


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

    .process .serviceWrap {gap: 80px;}
    .process .line {margin-top: 100px;}
    .process .processWrap {padding-top: 100px}
    .process .serviceWrap .processBg {min-width:400px;}

}



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

    .process .serviceWrap {gap: 40px;}
    .process .serviceWrap .processBg {min-width:300px;}
    .process .serviceWrap .rulerWrap {/*display: flex; align-items: flex-start; margin-top: 30px; gap: 30px;*/}
    .process .serviceWrap .ruler {display: none;}
    .process .serviceWrap .bottomTxt {margin-top: 30px;}
    .process .serviceWrap .serviceIn {margin-right: 30px;}
    .process .line {display: none;}

    .process .processWrap .processIn ul {gap: 15px;}
    .process .processWrap h3 {margin-bottom: 60px;}
    .process .processWrap .processIn ul li{padding-top: 20px;}
    .process .processWrap .processIn+.processIn {margin-top: 30px;}


}


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


    .process .serviceWrap {flex-direction: column;}
    .process .serviceWrap .processBg {display: none;}
    .process .processWrap .processIn ul {grid-template-columns: repeat(2, 1fr);}

    .process .processWrap {padding-top: 50px;}

}




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


    .process .processWrap .processIn ul {grid-template-columns: repeat(1, 1fr);}

}