body{
  margin: 0;
}

.container{
  max-width: 1280px;
  width:100%;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 로고와 검색창을 왼쪽 정렬 */
    width: 100%;
}

.logo {
    margin-right: 0; /* 로고와 검색창 사이의 간격을 없앰 */
}


.search-form {
    display: flex;
    align-items: center;
    flex-grow: 1;
    margin-left: 10px;
}

.search-form input[type="text"] {
    padding: 10px 15px;
    border: 2px solid #ddd;
    border-radius: 25px 0 0 25px; /* 왼쪽 모서리 둥글게 */
    font-size: 16px;
    width: 750px;
    max-width: 100%;
    outline: none;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.search-form input[type="text"]:focus {
    border-color: #4286f4; /* 포커스 시 색상 변경 */
}

.search-form .btn {
    padding: 10px 18px;
    background-color: #4286f4;
    border: 2px solid #4286f4;
    border-radius: 0 25px 25px 0; /* 오른쪽 모서리 둥글게 */
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    margin-left: -2px; /* 입력창과 버튼 사이의 경계를 없앰 */
}

.search-form .btn:hover {
    background-color: #55aacc;
    border-color: #55aacc;
}

.content-title {
    display: block; /* 블록 요소로 변경 */
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
    padding: 10px;
    border-bottom: 2px solid #e0e0e0;
    letter-spacing: 1px;
    font-family: 'Helvetica', 'Arial', sans-serif;
}

/* 전체 느낌을 주는 메뉴바 구조 */
.wrap {
  width: 100%; /* 전체 화면 너비 */
  background: #4286f4;
  padding: 10px 0;
  border-bottom: 1px solid #4286f4; /* 구분선 */

}

.scroll__wrap {
    display: flex;
 justify-content: center;
 align-items: center; /* 세로로 가운데 정렬 */
  overflow-x: auto; /* 가로 스크롤 가능 */
  white-space: nowrap;
  font-size: 0;
  cursor: grab; /* 드래그 커서 */
  padding-bottom: 10px;
  padding-left: 15px; /* 좌측 여백 */
}


/* 큰 화면에서는 container에 맞춰 중앙 정렬 */
.container {
  max-width: 1170px;
  /*padding: 0px 5%;*/
  margin: 0 auto; /* 가운데 정렬 */
}




/* 유연하게 가로로 나열 */
.scroll__wrap ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.scroll--element {
  display: inline-block;
}

.scroll--element a {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 500;
  color: #fff; /* 기본 텍스트 색상 흰색 */
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.scroll--element a:hover {
  background-color: #376bbf; /* hover시 더 짙은 파란색 */
  color: #fff;
  text-decoration: none;
}

.scroll--element.active a {
  background-color: #376bbf; /* 활성화된 요소 배경색 */
  color: #fff; /* 활성화된 요소 텍스트 색상 */
  outline: none;
}

.scroll--element:focus {
  outline: none;
  box-shadow: 0 0 2px 2px rgba(255, 204, 0, 0.6); /* 포커스 효과 */
}

.scroll--element + .scroll--element {
  margin-left: 15px; /* 항목 간 여백 */
}

/* 스크롤바 숨기기 */
.scroll__wrap::-webkit-scrollbar {
  display: none;
}

/* 작은 화면에서는 메뉴 항목 크기 축소 */
/* 작은 화면에서는 메뉴 항목 크기 축소 및 왼쪽 정렬 */
@media (max-width: 600px) {
  .scroll__wrap {
    justify-content: flex-start; /* 왼쪽 정렬 */
    overflow-x: auto; /* 가로 스크롤 허용 */
  }

  .scroll--element a {
    padding: 8px 15px;
    font-size: 14px;
  }

    .header-content {
        flex-direction: column; /* 작은 화면에서는 로고와 검색창이 위아래로 배치 */
        align-items: flex-start;
    }

    .search-form {
        width: 95%;
        margin-top: 10px;
    }

.search-form input[type="text"] {
    width: 95%;
    max-width: 95%;
    box-sizing: border-box; /* 패딩과 테두리를 포함하여 100% 적용 */
}

    .logo {
        text-align: center;
        width: 100%; /* 로고가 중앙에 위치하도록 전체 너비 사용 */
        margin-bottom: 10px; /* 검색창과 로고 사이의 간격 */
    }

}