#content{width: 60%; margin: 300px auto 200px;}
.con h3{text-align: center; font-size: 2.5rem;}

.flex_box{display: flex;justify-content: space-between;align-items: center; margin-top: 100px;}
.flex_box .big_text{font-size: 2rem; font-weight: 500;}
.p_box {width: 47%; text-align: justify;}
.p_box p{margin: 5px 0;}

.boder_bottom{border-top: 1px solid#ccc; margin: 100px 0;}

/**/

  .procedure-title {
    font-size: 1.5rem;
    font-weight: 430;
    margin-bottom: 100px;
  }
  /* 리스트 스타일 */
  .procedure-list {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin: 0;
  }
  /* 각 절차 항목 스타일 */
  .procedure-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  /* 각 단계 항목 스타일 */
  .procedure-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* 중앙 정렬 */
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 50px;
    box-sizing: border-box;
    text-align: center;
    color: #333;
    width: 250px; /* 고정 너비 (조금 더 키움) */
    height: 100px; /* 고정 높이 (조금 더 키움) */
    transition: background-color 0.3s ease, transform 0.2s ease;
  }
  .procedure-item:hover {
    background-color: #eeeeee; /* 호버 시 배경색 변화 */
    transform: translateY(-5px); /* 마우스 오버 시 살짝 위로 이동 */
  }
  .procedure-text {
    font-size: 16px;
    color: #333;
    line-height: 1.5;
  }
  .procedure-item small {
    display: block;
    font-size: 14px;
    color: #888;
  }

  /* 전체 리스트에서 첫 번째 항목과 마지막 항목에 검정 배경 적용 */
  .procedure-list .block_01 {
    background-color: #333;  /* 검정 배경 */
    color: #fff;  /* 흰색 텍스트 */
  }

  .procedure-list .block_02{
    color: #fff; /* 흰색 텍스트 */
  }

  /* 화살표 아이콘 스타일 */
  .arrow {
    font-size: 24px;
    color: #333;
    margin: 0 20px; /* 화살표 간격 */
    opacity: 0.5; /* 화살표 흐리게 */
    transition: opacity 0.3s ease;
  }
  .arrow:hover {
    opacity: 1; /* 호버 시 화살표 밝게 */
  }
  /* 아래쪽 화살표 중앙 정렬 */
  .arrow-down {
    font-size: 24px;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0; /* 아래쪽에 배치 */
  }
  .arrow-down{color: #e7e7e7;}


/* 일반 pc */
@media screen and (max-width:1280px) {
	
}

/* 테블릿 */
@media screen and (max-width:1024px) {
  
}

/* 소형 테블릿 */
@media screen and (max-width:768px) {


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

/* 최소 사이즈 처리 */
@media screen and (max-width:480px) {

}