@font-face {
  font-family: 'ONE-Mobile-Title';
  src: url("./font/ONE-Mobile-Title.woff") format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ONE-Mobile-Regular';
  src: url("./font/ONE-Mobile-Regular.woff") format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  margin: auto;
  background-color: black;
  font-family: 'ONE-Mobile-Regular';
  max-width: 1400px;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0px 5px 0px;
  background-color: black;
}

.navbar-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.navbar-menu ul li {
  margin-right: 20px;
  padding: 10px 20px;

}

.navbar-menu ul li:last-child {
  margin-right: 0;
}

.navbar-menu ul li a {
  text-decoration: none;
  color: white;
}

.navbar-event-button button {
  padding: 10px 20px;
  fill: #ffab00;
  color: #ffab00;
  background-color: rgba(255, 171, 0, 0);
  border-style: solid;
  border-width: 2px;
  border-color: #ffab00;
  border-radius: 0 0 0 0;
}

.main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.info-section {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
}

.info-item {
  margin: 30px 10px;
  display: flex;
  align-items: center; /* 이미지와 텍스트를 수직으로 정렬합니다. */
}

.info-item4 {
  margin: 30px 10px;
  display: flex;
  align-items: center; /* 이미지와 텍스트를 수직으로 정렬합니다. */
}

.info-item2 {
  max-width: 1000px;
  margin: 30px 10px;
  display: flex;
  align-items: center; /* 이미지와 텍스트를 수직으로 정렬합니다. */
}

.info-item img {
  width: 250px; /* 이미지의 고정된 너비 */
  height: 195px; /* 이미지의 높이를 부모 요소(텍스트 박스)의 높이에 맞게 설정합니다. */
}

.info-item3 img {
  width: 200px; /* 이미지의 고정된 너비 */
}

.info-item4 img {
  width: 250px; /* 이미지의 고정된 너비 */
}

.info-item p {
  flex: 1; /* 텍스트가 가능한 최대한의 너비를 가질 수 있도록 합니다. */
  color: white;
  font-size: 17px;
  line-height: 1.5;
  margin-left: 50px;
}

.info-item2 p {
  flex: 1; /* 텍스트가 가능한 최대한의 너비를 가질 수 있도록 합니다. */
  color: white;
  font-size: 17px;
  line-height: 1.5;
  margin-left: 50px;
}

.info-item4 p {
  flex: 1; /* 텍스트가 가능한 최대한의 너비를 가질 수 있도록 합니다. */
  color: white;
  font-size: 17px;
  line-height: 1.5;
  margin-left: 50px;
}

.navbar_text {
  color: #ffab00;
  text-decoration: none;
}

.navbar-event-button button {
  padding: 10px 20px;
  background-color: transparent; /* 배경색 투명으로 설정 */
  border: 2px solid #ffab00; /* 외곽선 스타일 변경 */
  border-radius: 5px;
  color: #ffab00;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s; /* 배경색, 글자색, 외곽선 색상의 변화에 트랜지션 적용 */
}

.navbar-event-button button:hover {
  background-color: #ffab00; /* 호버시 배경색 변경 */
  color: white; /* 호버시 글자색 변경 */
  border-color: transparent; /* 호버시 외곽선 숨김 */
}


.centered-button-container {
  position: relative; /* 상대 위치 설정 */
  text-align: center; /* 텍스트 가운데 정렬 */
  margin-top: 20px; /* 버튼과 다른 요소 사이에 여백 추가 */
}



.evolution-button {
  padding: 10px 20px;
    background-color: transparent;
    border: 5px solid #956f58;
    border-radius: 5px;
    color: #956f58;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    font-size: 20px;
    font-weight: 900;
}

.evolution-button:hover {
  background-color: #956f58; /* 버튼에 마우스를 올렸을 때 배경색 변경 */
  color: white;
}

.image-with-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-with-text span {
  color: white;
  margin-top: 10px;
  font-weight: 600;
  font-size: 17px;
}

.navbar_title {
  color: white;
  margin: 50px;
  font-size: 30px;
}
/* 모바일 반응형 CSS */
@media(max-width: 767px) {
  .navbar-menu ul {
      align-items: center; /* 가운데 정렬 */
  }
  
  .navbar-menu ul li {
      margin: 10px 0; /* 각 메뉴 아이템 간격 조정 */
  }

  .big-image img {
    width: 400px !important;  
  }
  .navbar-event-button {
    display: none !important;
  }

  .centered-button-container {
    margin-top: 10px; /* 버튼과 다른 요소 사이에 여백 추가 */
  }

  .evolution-button {
      padding: 12px 16px; /* 버튼의 내부 여백 조정 */
      font-size: 14px; /* 버튼 텍스트 크기 조정 */
  }

  .centered-button-container {
      margin-top: 10px; /* 버튼과 다른 요소 사이 간격 조정 */
  }

  .info-item {
      flex-direction: column; /* 이미지와 텍스트를 세로로 배치 */
  }

  .info-item4 {
      flex-direction: column; /* 이미지와 텍스트를 세로로 배치 */
  }

  .info-item img {
      width: 330px; /* 이미지 너비를 100%로 설정하여 가로 폭에 맞게 조정 */
      height: auto; /* 이미지 높이를 자동으로 조정하여 비율 유지 */
      margin-bottom: 15px; /* 이미지 아래 여백 추가 */
  }

  .info-item p {
    margin: 30px 0px; /* 텍스트의 margin 제거 */
  }

  .info-item2 p {
    margin-left: 10px;
  }

  .info-item4 p {
    margin: 30px 0px; /* 텍스트의 margin 제거 */
  }

  .main-content {
      padding: 20px 10px; /* 좌우 여백을 좁게 조정 */
  }

  .navbar {
    display: flex;
    flex-direction: column;
    align-items: center; /* 요소를 가운데 정렬 */
  }

  .navbar > * {
      margin-bottom: 10px; /* 하위 요소들 사이에 간격 추가 */
  }

  .navbar_title {
    font-size: 25px;
  }
  
  .col-md-auto2 img {
    width: 103px !important;
  }

  .col-md-auto img {
    width: 120% !important;
  }

  .navbar-menu ul li a {
    font-size: 15px;
  }
}

@media(max-width: 376px) {
  /* 376px 이하의 모바일 화면에 대한 CSS 추가 */
  .navbar-menu ul li {
      padding: 8px 16px; /* 메뉴 아이템의 padding 조정 */
  }

  .info-item p {
      font-size: 15px; /* 텍스트 크기를 조금 더 작게 조정 */
  }

  .col-md-auto2 img {
    width: 90px !important;
  }
}

/* 서브1 */
.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.col-md-auto {
  display: flex;
  flex-basis: 20%;
  box-sizing: border-box; /* 요소의 내부 패딩과 테두리를 포함한 크기를 지정 */
  padding: 10px; /* 선택적으로 내부 패딩을 추가할 수 있음 */
}

.col-md-auto img {
  width: 80%;
  margin: auto;
  filter: grayscale(1);
}

.col-md-auto2 {
  display: flex;
  flex-basis: 14%;
  box-sizing: border-box; /* 요소의 내부 패딩과 테두리를 포함한 크기를 지정 */
  padding: 10px; /* 선택적으로 내부 패딩을 추가할 수 있음 */
}

.col-md-auto2 img {
  width: 170px;
  margin: auto;
}

@keyframes glowing {
  0% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7),
                0 0 15px rgba(255, 255, 255, 0.5),
                0 0 20px rgba(255, 255, 255, 0.3),
                0 0 25px rgba(255, 255, 255, 0.1),
                0 0 35px rgba(255, 255, 255, 0.05);
  }
  50% {
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.7),
                0 0 30px rgba(255, 255, 255, 0.5),
                0 0 35px rgba(255, 255, 255, 0.3),
                0 0 40px rgba(255, 255, 255, 0.1),
                0 0 50px rgba(255, 255, 255, 0.05);
  }
  100% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7),
                0 0 15px rgba(255, 255, 255, 0.5),
                0 0 20px rgba(255, 255, 255, 0.3),
                0 0 25px rgba(255, 255, 255, 0.1),
                0 0 35px rgba(255, 255, 255, 0.05);
  }
}

.evolution-button {
  position: relative; /* 상대 위치 설정 */
  z-index: 1; /* 다른 요소 위에 올라오도록 설정 */
}

.evolution-button::after {
  content: '';
  position: absolute;
  top: -5px; /* 버튼 상단에서 5px 만큼 위에 위치 */
  left: -5px; /* 버튼 왼쪽에서 5px 만큼 왼쪽으로 위치 */
  right: -5px; /* 버튼 오른쪽에서 5px 만큼 오른쪽으로 위치 */
  bottom: -5px; /* 버튼 하단에서 5px 만큼 아래로 위치 */
  border-radius: 5px; /* 둥근 테두리 설정 */
  animation: glowing 1.5s infinite; /* 반짝이는 애니메이션 적용 */
}