@charset "utf-8";
/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.MAIN_step_AA{width: 100%; float: left ; padding: 0PX; position: relative; min-height:450px; margin-top: 50px}
	.MAIN_step_AA::before{width: 100%; float: left ;height: 5px; background-color: #f7f7f7; position: absolute; top:25px; left: 0px;content: "";    }
	.MAIN_step_AA .contents-container{position: relative ; margin-top: -8px}
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {.MAIN_step_AA{width: 100%; float: left ; padding: 0PX; position: relative; min-height:450px; 
	}
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.MAIN_step_AA{width: 100%; float: left ; padding: 0PX; position: relative;height:800px; margin-top: 0px;}
	.MAIN_step_AA::before{display: none    }
	.MAIN_step_AA .contents-container{position: relative ;height: 100%;  margin-top: -8px}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/



.MAIN_step_AA .contents-container video{width: 100%; float: left ;}


/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.MAIN_step_AA .contents-container .tit_box{width: 25%; float: left ; position: absolute; left: 0px; top: 0px;}
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {.MAIN_step_AA .contents-container .tit_box{width: 20%;}
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.MAIN_step_AA .contents-container .tit_box{width: 25%; float: left ; position: absolute; left: 0px; top: -220px;}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/



 
.MAIN_step_AA  .tit_box.apply-box {     width: 100%; float: left; padding-top: clamp(0px, 11.719vw, 130px); padding-left: 30px    }

.MAIN_step_AA   .tit_box div .tit {width: 100%; float: left;
      font-size: calc(var(--tit-lg-size) * 0.9); 
		font-family:var(--ff-ko6)!important;
      font-weight: normal;
      color: #0b1e1e;
      margin-bottom: clamp(10px, 1.563vw, 150px); 
    }
	.MAIN_step_AA div  .tx1{width: 100%; float: left;
      font-size: var(--tit-mds-size); 
      color: #666;
      margin: 0px 0 40px;line-height: 130%
    }
	
  .MAIN_step_AA  div .contact {width: 100%; float: left;
      font-size:calc(var(--tx-sm-size) * 1.2);
      font-weight: bold;
      display: flex;
      align-items: center;
      margin-bottom:20px;
      color: #222;;line-height: 130%
    }



 .MAIN_step_AA  div  .contact img{
      display: inline-block;
      width: 30px;
      height: 30px;
      background: #3d4855;
      border-radius: 50%;
      color: white;
      font-style: normal;
      font-size: 14px;
      line-height: 20px;
      text-align: center;
      margin-left: 5px;
    }

.MAIN_step_AA   div .phone {width: auto; float: left;
      font-size: calc(var(--tit-lg-size) * 0.9); 
      font-weight: bold;
      color:var(--primary);;
      margin-top: 0; letter-spacing: -0.5px; 
    }

/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	
.MAIN_step_AA  .tit_box>div {     width: 100%; float: left; position: relative; padding-left: 130px;  }
.MAIN_step_AA   .tit_box>div .tit {position: absolute; left: 0px; top: 10px    }
	
.MAIN_step_AA   .tit_box>div .contact {position: absolute; left: 0px; top: -5px    }
	

}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/



/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/






/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) { .MAIN_step_AA .process-container {
   display: grid;grid-template-columns:20px  clamp(100px, 35.156vw, 450px)  80px  auto  80px  auto  80px  auto  80px;
      gap: 0px;
     width: 100%; float: left;      margin: 0 auto; padding-right:80px
    }

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
	.MAIN_step_AA.process-container {
   display: grid;grid-template-columns:20px  clamp(200px, 35.156vw, 250px)  50px  auto  50px  auto  50px  auto  50px;
      gap: 0px;
     width: 100%; float: left;      margin: 0 auto; padding-right:80px
    }
}
/**** 모바일 ****/
@media only all and (max-width:767px) { .MAIN_step_AA .process-container {
   display: grid;grid-template-rows:0px  auto  0px  auto  0px  auto  0px  auto  0px; 
      gap: 0px;
     width: 100%; float: left;   height: 100%;   margin: 0 auto; 
    }

}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/


/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {   .MAIN_step_AA .step {
      text-align: center;
      color: #aaa;
      transition: all 0.5s ease;
      filter: grayscale(100%);  position: relative;  z-index: 9999; 	
    }

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
	.MAIN_step_AA  .step {
      text-align: center;
      color: #aaa;
      transition: all 0.5s ease;
      filter: grayscale(100%);  position: relative;  z-index: 9999; 	-webkit-transform: scale(0.8);
	transform: scale(0.7);
    }
}
/**** 모바일 ****/
@media only all and (max-width:767px) {  .MAIN_step_AA  .step { height: 300px!important; width: 100%; float: left;
      text-align: center;
      color: #aaa;
      transition: all 0.5s ease;
      filter: grayscale(100%);  position: relative;  z-index: 9999; 	-webkit-transform: scale(0.7);
	transform: scale(0.7);
    }

}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/

/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.MAIN_step_AA .step .step_in{width:300px; float: left; position: absolute; left: 50%; transform: translateX(-50%); z-index: 9999; 
    }
 
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	.MAIN_step_AA .step .step_in{width:300px;  height: 300px; float: left; z-index: 9999; 
    }
 
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/


/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	.MAIN_step_AA .step  .step_in .um{     width: 80px; height: 80px; border-radius: 100%; background-color: var(--primary); display: flex;  justify-content: center;  align-items: center;  flex-direction: column;color: #fff; font-size: 14px;font-weight: 700; position:absolute; 
left:50%;transform: translateX(-50%); top: 0PX;     }
.MAIN_step_AA  .step  .step_in .um:before{content: "";        width:10px; height: 10px; border-radius: 100%; background-color: var(--primary); opacity: 0.2; left: 50%;  top: 50%;  transform: translate(-50%, -50%); z-index: -1; position: absolute;  transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; 
  }
.MAIN_step_AA .step.active  .step_in .um:before{content: "";        width:110px; height: 110px; border-radius: 100%; background-color: var(--primary); opacity: 0.2; left: 50%;  top: 50%;  transform: translate(-50%, -50%); z-index: -1; position: absolute;    }
 .MAIN_step_AA .step  .step_in .um em{olor: #fff; font-size:24px;font-weight: 700; width: 100%; float: left ; text-align: center    }

 .MAIN_step_AA   .step  .step_in .imgbox{      width: 100%;   height: 250px; float: left;    transition: all 0.5s ease; display: flex;  justify-content: center;  align-items: center;  margin-top:80px  }

  .MAIN_step_AA .step  .step_in .imgbox img {  width: 100%;    }


.MAIN_step_AA .step  .step_in .txbox{    margin-top: 10px;
     font-size: var(--tx-sm-size); font-weight: 700 }

.MAIN_step_AA .step  .step_in .txbox em{   color: var(--primary);  }


}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.MAIN_step_AA .step  .step_in .um{     width: 80px; height: 80px; border-radius: 100%; background-color: var(--primary); display: flex;  justify-content: center;  align-items: center;  flex-direction: column;color: #fff; font-size: 14px;font-weight: 700; position:absolute; left:0px; top: 0PX;     }
.MAIN_step_AA  .step  .step_in .um:before{content: "";        width:10px; height: 10px; border-radius: 100%; background-color: var(--primary); opacity: 0.2; left: 50%;  top: 50%;  transform: translate(-50%, -50%); z-index: -1; position: absolute;  transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; 
  }
.MAIN_step_AA .step.active  .step_in .um:before{content: "";        width:110px; height: 110px; border-radius: 100%; background-color: var(--primary); opacity: 0.2; left: 50%;  top: 50%;  transform: translate(-50%, -50%); z-index: -1; position: absolute;    }
 .MAIN_step_AA .step  .step_in .um em{olor: #fff; font-size:24px;font-weight: 700; width: 100%; float: left ; text-align: center    }

 .MAIN_step_AA   .step  .step_in .imgbox{      width: 100%;   height: 250px; float: left;    transition: all 0.5s ease; display: flex;  justify-content: center;  align-items: center;    }

  .MAIN_step_AA .step  .step_in .imgbox img {  width: 100%;    }


.MAIN_step_AA .step  .step_in .txbox{    margin-top: 10px;
     font-size: var(--tx-sm-size); font-weight: 700 }

.MAIN_step_AA .step  .step_in .txbox em{   color: var(--primary);  }


}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/





    .step.active {
      color: #000;
      filter: grayscale(0%);
    }


/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
  .MAIN_step_AA  .bar {
      width: 0;
      height: 4px;
      background: #ff6859;
      transition: width 1s ease;; margin-top:35px; position: relative
    }
 .MAIN_step_AA  .bar:before{content: "\ebb5";    font-family: unicons-line;position: absolute; top: 200px; left: 50%;margin-left: -25px; width: 50px; font-size: 50px; color: #ccc; opacity: 0    }
 .MAIN_step_AA  .bar.full:before{content: "\ebb5";    font-family: unicons-line;position: absolute; top: 200px; left: 50%;margin-left: -25px; width: 50px; font-size: 50px; color: #ccc; opacity: 1   }
   
 .MAIN_step_AA  .bar.bar0:before{display: none   }
 .MAIN_step_AA  .bar.bar0.full:before{display: none }
   
.MAIN_step_AA .bar.full {
      width: 100%;
    }

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
  .MAIN_step_AA  .bar {
      width: 4px;
      height: 0;
      background: #ff6859;
      transition:height 1s ease;; margin-top:35px; position: relative
    }
 .MAIN_step_AA  .bar:before{content: "\ebb5";    font-family: unicons-line;position: absolute; top: 0px; right: 10px;margin-left: -25px; width: 50px; font-size: 50px; color: #ccc; opacity: 0    }
 .MAIN_step_AA  .bar.full:before{content: "\ebb5";    font-family: unicons-line;position: absolute; top:0px; right: 10%;margin-left: -25px; width: 50px; font-size: 50px; color: #ccc; opacity: 1   }
   
 .MAIN_step_AA  .bar.bar0:before{display: none   }
 .MAIN_step_AA  .bar.bar0.full:before{display: none }
   
.MAIN_step_AA .bar.full {
        height: 100%;
    }

}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/


 .MAIN_step_AA   .circle {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #ff6859;
      flex-shrink: 0;
    }
/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {   .MAIN_step_AA .intro {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0px;
      margin-right: 0px;margin-top: 27px
    }

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {   .MAIN_step_AA .intro {

      gap: 0px;
      margin-right: 0px;margin-top: 27px; width: 100%; float: left
    }

}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/



  .MAIN_step_AA  .intro-label {
      font-size: 12px;
      color: #444;
      margin-top: 5px;
    }