.educationWarp {
    display: flex;
    background-color: #FFF;
}

.tabs {
    margin: 50px 0 25px 0;
    display: flex;
    justify-content: center;
}

.tab {
    width: 300px;
    padding: 15px 30px;
    cursor: pointer;
    border: 2px solid transparent;
    border-bottom: none;
    font-size: 16px;
    font-weight: bold;
    background-color: #F8F8F8;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.tab.active {
    background-color: #FFA700;
    border-color: #FFA700;
    color: #fff;
}

.content {
    max-width: 1200px;
    margin: 20px auto;
    background-color: #fff;
    border-radius: 8px;
    display: none;

}

.content.active {
    display: block;
}

.content h2 {
    margin-top: 0;
    text-align: center;
    font-weight: 600;
    font-size: 18px;
    color: #707070;
}

.content p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}

#content1 {}

.tabHeader {
    display: flex;
    margin: 35px 0 50px;
    justify-content: flex-end;

}

.searchArea {
    display:flex;
    margin: 35px 0 50px;
    justify-content: flex-end;
}

.searchOption {
    width: 115px;
    height: 45px;
    padding: 12px;
    border: 1px solid #FFA700;
    font-size: 16px;
    border-radius: 50px;
}

.searchOption option {
    width: 115px;
    height: 25px;
    font-size: 16px;
    border: 1px solid #ddd;
}
.search-container {
    margin-left: 10px ;
    position: relative;
    display: inline-block;
  }
  
  .searchInput {
    width: 345px;
    height: 45px;
    padding: 15px 40px 15px 20px; /* 오른쪽 여백 추가 */
    border: 1px solid #FFA700;
    border-radius: 50px;
    font-size: 16px;
  }

  #serachInputs1{
    width: 345px;
    height: 45px;
    padding: 15px 40px 15px 20px; /* 오른쪽 여백 추가 */
    background-color: #FFF;
    border: 1px solid #FFA700;
    border-radius: 50px;
    font-size: 16px;
  }

  #serachInputs2{
    width: 345px;
    height: 45px;
    padding: 15px 40px 15px 20px; /* 오른쪽 여백 추가 */
    background-color: #FFF;
    border: 1px solid #FFA700;
    border-radius: 50px;
    font-size: 16px;
  }

  .search-icon {
    position: absolute;
    right: 15px; /* 아이콘 위치 조정 */
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px; /* 아이콘 크기 */
    color: #FFA700;
    cursor: pointer;
  }
.gallery {
    display: flex;
    flex-wrap: wrap;
    /* 한 줄에 공간이 부족하면 다음 줄로 넘김 */
    gap: 150px;
    /* 아이템 간격 */
    justify-content: center;
    /* 중앙 정렬 */
}

.gallery-item {
    width: 300px;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
}

.gallery-item .info {
    padding-top: 15px;
}

.gallery-item .info p {
    margin: 5px 0;
    font-size: 14px;
    color: #555;
    text-align: left;
}

.gallery-item .info .title {
    font-weight: bold;
    font-size: 16px;
    color: #333;
}

.pagination {
    display: flex;
    justify-content: center;
    margin: 100px 0;
}

.pagination button {
    background-color: #F8F8F8;
    border: 1px solid #ddd;
    margin: 0 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    width: 40px;
    height: 40px;
}

#galleryNextPage{
}

#galleryNextPage img ,#galleryPrevPage img {
    width: 38px;
}
#boardPrevPage img ,#boardNextPage img {
    width: 38px;
}
.pagination span.active {
    background-color: #222;
    color: #fff;
}


.pagination button:disabled {
    background-color: #f1f1f1;
    color: #ccc;
    cursor: not-allowed;
}
#content2 > div.board-container > table > thead > tr > th:nth-child(1){
    width: 55px;
}
#content2 > div.board-container > table > thead > tr > th:nth-child(2){
    width: 725px;
}
#content2 > div.board-container > table > thead > tr > th:nth-child(3){
    width: 100px;
}

#nextPage,
#prevPage {
    border: none;
}

.board-container {
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
}

.board-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.board-table thead {
    color:#6F7785;
    border-top: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
    height: 75px;
}

.board-table th,
.board-table td {
    padding: 12px;
    height: 75px;
    text-align: center;
    font-size: 14px;
    
}

.board-table tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

.board-table tbody tr:hover {
    background-color: #f1f1f1;
}

.write-button {
    margin-top: 20px;
    text-align: right;
}

.write-button button {
    background-color: #ffa700;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.write-button button:hover {
    background-color: #cc8400;
} 


#content3 h2{
    color:#222;
}

.form-container {
    margin: 50px auto;
    background-color: #fff;
    padding: 20px 30px;
    border-radius: 8px;
  }
  
  h2 {
    margin-bottom: 20px;
    font-size: 18px;
    color: #333;
  }
  #content3 > section > h2
  {
    color:#222;
    font-size: 24px;
    text-align: left;
  }
  .required {
    color: #EB7A1E;
  }
  
  .input-form .form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
  }
  
  .form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  label {
    font-size: 14px;
    margin-bottom: 8px;
    color: #222222;
  }
  
  input[type="text"],
  input[type="email"] {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fff;
    height: 54px;
  }
  
  input[type="text"]:focus,
  input[type="email"]:focus {
    outline: none;
    border-color: #ffa700;
  }
  
  .checkbox-group {
    margin: 20px 0;
    display: flex;
  }
  
  .checkbox-group input[type="checkbox"] {
    margin-right: 10px;
  }
  
  .submit-btn {
    background-color: #ffa700;
    color: #fff;
    border: none;
    padding: 15px 20px;
    border-radius: 4px;
    cursor: pointer;
    width:  250px;
    height: 60px;
    border-radius: 50px;
    font-size: 16px;
    text-align: center;
  }
  
  .submit-btn:hover {
    background-color: #cc8400;
  }
  
  .submit-btn:active {
    background-color: #b36d00;
  }

  .linearea
  {
    border : 1px solid #FFA700;
    height: 1px;
    width:100%;
    margin:25px 0;
}

.bottomBtnarea
{
    display:flex;
    justify-content: center;
}


#step1 {
    max-width: 1900px;
    margin: 0 auto;
    padding: 20px;
  }

  /* Progress Bar 스타일 */
  .progress-bar {
    display: flex;
    justify-content: space-between;
    margin: 20px auto;
    max-width: 1600px;
  }

  .step {
    width: 18%;
    padding: 10px;
    border-radius: 20px;
    background-color: #f1f1f1;
    color: #999;
    text-align: center;
    font-size: 14px;
  }

  .step.active {
    background-color: #ffb74d;
    color: #fff;
  }

  /* Content 스타일 */
  .step1-content {
    margin: 60px auto;
    max-width: 1600px;
    box-shadow: 0px 5px 20px #00000029;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 0;
    
  }

  .checkbox-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .checkbox-item {
    display: flex;
    align-items: center;
  }

  .checkbox-item input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.4);
  }

  .checkbox-item label {
    font-size: 18px;
    margin:0px;
    color:#707070;
    font-weight: bold;
  }

  .tip {
    text-align: left;
    margin-top: 30px;
    font-size: 16px;
    color: #C7C7C7;
    line-height: 1.6;
  }

  .tip p {
    font-weight: bold;
    
    color:#C7C7C7;
    margin-bottom: 10px;
  }

  .tip ul {
    margin: 0;
    padding-left: 20px;
  }

  .tip ul li {
    margin-bottom: 10px;
  }

  /* 버튼 스타일 */
  .bottomBtnarea {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
  }

  .back-btn,
  .next-btn {
    padding: 15px 30px;
    font-size: 18px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
  }

  .back-btn {
    background-color: #e0e0e0;
    color: #999;
  }

  .next-btn {
    background-color: #ffb74d;
    color: #fff;
  }

  .back-btn:hover {
    background-color: #d6d6d6;
  }

  .next-btn:hover {
    background-color: #ff9800;
  }

  .step2Inner{
    margin: 60px auto;
    max-width: 1600px;
    box-shadow: 0px 5px 20px #00000029;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 0;
  }
    .content-area {
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    text-align: left;
  }

  .calculation-container {
    width: 975px;
    margin-top: 20px;
  }

  .section {
    margin-bottom: 30px;
  }

  .section h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .input-row {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }

  .input-row label {
    flex: 1;
    font-size: 16px;
    color: #333;
    margin-left: 3%;
  }

  .input-row input[type="text"] {
    width: 270px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: right;
  }

  .input-row input[type="text"]::placeholder {
    color: #aaa;
  }

  .bottomBtnarea {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
  }

  .back-btn {
      width: 250px;
      height: 59px;
      border: 1px solid #E5E8EA;
      border-radius: 50px;
      background-color: #E5E8EA;
      color:#777784;
      font-size:16px;
  }
  .next-btn {
      width: 250px;
      height: 59px;
      border: 1px solid #FFA700;
      border-radius: 50px;
      background-color: #FFA700;
      color:#FFF;
      font-size:16px;
  }

  .back-btn {
    background-color: #e0e0e0;
    color: #999;
  }

  .next-btn {
    background-color: #ffa500;
    color: #fff;
  }

  .back-btn:hover {
    background-color: #d6d6d6;
  }

  .next-btn:hover {
    background-color: #ff8c00;
  }


  #nextbottomBtn{
    width: 250px;
    height: 59px;
    border: 1px solid #FFA700;
    border-radius: 50px;
    background-color: #FFA700;
    color:#FFF;
    font-size:16px;
  }
  #prevbottomBtn{
    width: 250px;
    height: 59px;
    border: 1px solid #E5E8EA;
    border-radius: 50px;
    background-color: #E5E8EA;
    color:#777784;
    font-size:16px;
  }
  .step3-content {
    text-align: left;
    margin: 20px auto;
    box-shadow: 0px 5px 20px #00000029;
  }

  .step3Inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 35px;
  }

  .checkbox-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .checkbox-list li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
   
  }

  .checkbox-list input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2); /* 체크박스 크기 조정 */
  }

  .checkbox-list label {
    font-size: 20px;
    color: #707070;
    font-weight: 600;
  }
  .exampleImageView
  {
    margin-left: auto;
    color:#FFA700;
    cursor: pointer;
    font-size: 20px;
    text-decoration: underline;
  }

  .step4-content {
    text-align: left;
    margin: 20px auto;
    box-shadow: 0px 5px 20px #00000029;
  }

  .step4Inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 35px;
  }

  .step4Inner p{
    display: flex;
    font-size: 22px !important;
    justify-content: center;
    color:#707070;
    line-height: 2.5;
  }

  .step4Inner strong{
    color : #FFA700;
  }

  #content4{
  }
  .contentInner{
        display: flex;
        padding: 100px 0;
        align-items: center;
        justify-content: center;
        margin: 50px auto;
        box-shadow: 0px 5px 20px #00000029;
        flex-direction: column;
  }
  .contentInner h1{
    margin-top: 35px;
    font-size: 36px;
    color:#555454
}

/* ========== Radio 스타일 ========== */
/* 기존 라디오 디자인 제거하고, #ffa700 경계선/체크 색상 적용 */
input[type="radio"] {
    /* 브라우저 기본 라디오 제거 */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* 크기, 모양, 테두리 설정 */
    width: 18px;
    height: 18px;
    border: 2px solid #ffa700;  /* 메인 컬러 테두리 */
    border-radius: 50%;         /* 원형 */
    background-color: #fff;     /* 내부 흰색 */
    cursor: pointer;
    outline: none;
    vertical-align: middle;     /* 텍스트와 수직 정렬 */
    margin-right: 6px;          /* 라벨과 약간 간격 */
}

/* 라디오가 체크됐을 때 내부를 메인 컬러로 채움 */
input[type="radio"]:checked {
    background-color: #ffa700;
    border-color: #ffa700;
}

/* 라디오에 포커스 갔을 때 outline 제거(선택사항) */
input[type="radio"]:focus {
    outline: 0;
}

/* 라벨 텍스트 등도 필요하다면 추가 스타일 가능 */
.radio-list label {
    font-size: 14px;
    cursor: pointer; /* 라벨을 눌러도 클릭되도록 */
}

/* ========== Step4 영역(테이블) ========== */
.step4Inner {
    /* Step4 컨테이너 배경 흰색, 테두리 #ffa700 */
    background-color: #fff;
    border: 1px solid #ffa700;
    border-radius: 4px;
    padding: 20px;
    margin: 10px 0;
}

.step4Inner table {
    width: 100%;
    border-collapse: collapse; /* 테두리 겹침 제거 */
    margin-top: 10px;
}

/* 테이블 헤더에 메인 컬러 배경, 흰색 글자 */
.step4Inner table thead th {
    background-color: #ffa700;
    color: #fff;
}

/* 테이블 셀 테두리는 메인 컬러, 가운데 정렬 */
.step4Inner table th,
.step4Inner table td {
    border: 1px solid #ffa700;
    padding: 10px;
    text-align: center;
    font-size: 14px;
}

/* ========== STEP5 (결과 스타일) ========== */

.step5-div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#result {
    /* 결과 영역 스타일 (예시) */
    margin-top: 10px;
    /* padding: 10px; */
}

/* 결과 영역 내 제목, 문단 등 글자 스타일 */
#result h3 {
    font-size: 18px;
    margin-bottom: 8px;
}
#result p {
    font-size: 14px;
    margin: 5px 0;
}

/* 파란색 강조 텍스트 */
.highlight-blue {
    color: blue;
    font-weight: bold;
}

/* 체크박스 스타일링 */
input[type="checkbox"] {
    appearance: none; /* 기본 체크박스 숨기기 */
    width: 18px;
    height: 18px;
    border: 2px solid #FFA700; /* 메인 컬러 테두리 */
    border-radius: 4px; /* 약간 둥근 모서리 */
    background-color: #fff; /* 기본 배경색 */
    cursor: pointer;
    margin-right: 10px;
    position: relative;
}

/* 체크박스 선택 상태 */
input[type="checkbox"]:checked {
    background-color: #FFA700; /* 체크박스 선택 시 메인 컬러 */
    border-color: #FFA700; /* 테두리와 배경색 일치 */
}

/* 체크 표시 */
input[type="checkbox"]:checked::before {
    content: '✔'; /* 체크 표시 */
    color: #fff; /* 체크 표시 색상 */
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.writebtn{
    margin:25px 0;
    display: flex;
    justify-content: flex-end;
}
.writebtn a{
    gap: 5px;
    text-decoration: none;
    font-weight: 600;
    color:#FFA700;
    width: 125px;
    height: 47px;
    border-radius: 8px;
    border:1px solid #FFA700;
    display: flex;
    align-items: center;
    justify-content: center
}