
/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.box_step_CA {width: 100%; float: left;  }
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.box_step_CA {width: 100%; float: left;  padding: 0px 15px}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/





/* 구분 start -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
/*  --> css 우선선언 된 css, 그리드 사이즈는 위젯에서 선언  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));*/	
.box_step_CA .wg_box{width: 100%; float: left; display: grid; grid-gap: clamp(30px, 3.906vw, 50px);  }
/*  --> css 우선선언 된 css*/

.box_step_CA .step_inbox {
      display: flex;
      align-items: flex-start; flex-direction: column;
      gap: 20px; width: 100%; float: left; position: relative; padding-bottom: clamp(0px, 2.344vw, 30px) 
    }
.box_step_CA   .step_inbox:before {
    content: "";  width: calc(100% - 70px); position: absolute; top: 25px; right: 0px; border-top: 1px solid #ccc
    }
.box_step_CA .step_inbox .step_um {
      width: 50px;
      height: 50px;
      background: #5e514d;
      color: #fff;
      font-weight: bold;
      font-size: 18px;
      text-align: center;
      line-height: 50px;
      transform: rotate(45deg);
      flex-shrink: 0;
       position: relative;border-radius: 6px ; margin-bottom: clamp(5px, 1.563vw, 20px)
    }
.box_step_CA  .step_inbox .step_um span {
      display: block;
      transform: rotate(-45deg);
    }
.box_step_CA  .step_inbox .step_incont {
     width: 100%;
    }
.box_step_CA  .step_inbox .step_incont  h2 {
      font-size: 20px;
      color: #333;
      margin-bottom: 15px;
    }
.box_step_CA  .step_inbox .step_incont  ul {
      list-style: disc;
      padding-left: 0px;
      color: #555;
      line-height: 1.8;
    }
.box_step_CA   .step_inbox .step_incont  ul li{
    position: relative; padding-left: 10px; font-size: 16px; color: #333; list-style: none
    }
.box_step_CA	 .step_inbox .step_incont  ul li:before{width: 4px; height: 4px; background-color: #333; border-radius: 100%; position: absolute; left: 0px; top: 13px; content: "";   
    }
.box_step_CA  .step_inbox   .step_incont  a {
      color: #5e514d;
      text-decoration: underline;
    }

.box_step_CA  .step_inbox .widget-text-1 {  width: 100% ; display: flex;
justify-content:flex-end;  align-items: center; flex-direction:row; box-sizing: border-box; margin-top: 20px; padding-right: 20px}
.box_step_CA  .step_inbox .widget-text-1 a{ width: auto; font-size: 14px; padding: 5px 10px; background-color:#5e514d!important; color: #fff ; border-radius: 5px; }

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
/*  --> css 우선선언 된 css, 그리드 사이즈는 위젯에서 선언  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));*/	
.box_step_CA .wg_box{width: 100%; float: left; display: grid; grid-gap: clamp(30px, 3.906vw, 50px);  grid-template-columns:  100%;}
/*  --> css 우선선언 된 css*/

.box_step_CA .step_inbox {
      display: flex;
      align-items: flex-start; flex-direction: column;
      gap: 20px; width: 100%; float: left; position: relative; padding-bottom: clamp(0px, 2.344vw, 30px) 
    }
.box_step_CA   .step_inbox:before {
    content: "";  width: calc(100% - 70px); position: absolute; top: 25px; right: 0px; border-top: 1px solid #ccc
    }
.box_step_CA .step_inbox .step_um {
      width: 50px;
      height: 50px;
      background: #5e514d;
      color: #fff;
      font-weight: bold;
      font-size: 18px;
      text-align: center;
      line-height: 50px;
      transform: rotate(45deg);
      flex-shrink: 0;
       position: relative;border-radius: 6px ; margin-bottom: clamp(5px, 1.563vw, 20px)
    }
.box_step_CA  .step_inbox .step_um span {
      display: block;
      transform: rotate(-45deg);
    }
.box_step_CA  .step_inbox .step_incont {
     width: 100%;
    }
.box_step_CA  .step_inbox .step_incont  h2 {
      font-size: 20px;
      color: #333;
      margin-bottom: 15px;
    }
.box_step_CA  .step_inbox .step_incont  ul {
      list-style: disc;
      padding-left: 0px;
      color: #555;
      line-height: 1.8;
    }
.box_step_CA   .step_inbox .step_incont  ul li{
    position: relative; padding-left: 10px; font-size: 16px; color: #333; list-style: none
    }
.box_step_CA	 .step_inbox .step_incont  ul li:before{width: 4px; height: 4px; background-color: #333; border-radius: 100%; position: absolute; left: 0px; top: 13px; content: "";   
    }
.box_step_CA  .step_inbox   .step_incont  a {
      color: #5e514d;
      text-decoration: underline;
    }

.box_step_CA  .step_inbox .widget-text-1 {  width: 100% ; display: flex;
justify-content:flex-end;  align-items: center; flex-direction:row; box-sizing: border-box; margin-top: 20px; padding-right: 20px}
.box_step_CA  .step_inbox .widget-text-1 a{ width: auto; font-size: 14px; padding: 5px 10px; background-color:#5e514d!important; color: #fff ; border-radius: 5px; }

}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/