/* @font-face {
  font-family: "Jost";
  font-style: italic;
  font-weight: 500;
  src: url(/assets/fonts/Jost-BoldItalic.ttf) format("ttf"),
    url(/assets/fonts/jostboldItalic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
} */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  text-align: center;
}

header {
  /* background: #333;
    color: #fff; */
  padding: 5rem;
}

header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header h1 {
  font-size: 3rem;
  font-family: "Jost", sans-serif;
  display: inline-block;
  /* border-bottom: 10px solid #e70e67; */
  line-height: 2.2rem;
}

header nav ul {
  list-style-type: none;
  display: flex;
}

header nav ul li {
  margin-left: 1rem;
}

header nav ul li a {
  color: #fff;
  text-decoration: none;
}

header nav ul li a:hover {
  text-decoration: underline;
}

main {
  padding: 2rem;
  padding-bottom: 14rem; /* 하단 공간 추가 */
  max-width: 1200px;
  margin: 0 auto;
}

#hero {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 100px;
}

.hero-content {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 2rem;
  border-radius: 5px;
  display: flex;
  flex-direction: column; /* 추가 */
  align-items: center; /* 추가 */
  text-align: center;
}

.hero-content h2 {
  font-size: 2.5rem;
  margin: 1rem;
  font-family: "Jost", sans-serif;
}

.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.cta-button {
  display: inline-block;
  background: #333;
  color: #fff;
  text-decoration: none;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  border-radius: 5px;
  font-weight: bold;
}

.cta-button:hover {
  background: #5bd5ef;
}

main h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-family: "Jost", sans-serif;
  display: inline-block;
  border-bottom: 6px solid #f9e08f;
  line-height: 1.2rem;
}

main ul {
  list-style-type: none;
  margin-bottom: 2rem;
}

main ul li {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

main p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.cta-button {
  display: inline-block;
  background: #d86960;
  color: rgb(24, 24, 24);
  text-decoration: none;
  padding: 0.5rem 2rem;
  margin-bottom: 1rem;
  border-radius: 30px;
  border: 2px solid #333;
  box-shadow: 4px 4px 0px rgb(58, 58, 58);
  font-size: 1.2rem;
  font-family: "Jost", sans-serif;
  margin-right: 1rem;
  /* width: 2rem; */

  /* height: 300px; */
}

.download-button {
  display: inline-block;
  margin-right: 1rem;
}

.button-image {
  height: 50px;
  object-fit: cover;
  margin: 0;
  padding: 0;
  color: rgb(24, 24, 24);
  border-radius: 10px;
  border: 2px solid #333;
  box-shadow: 4px 4px 0px rgb(58, 58, 58);
}

footer {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 1rem;
  position: fixed;
  bottom: 0;
  width: 100%;
}

footer ul {
  list-style-type: none;
}

footer ul li {
  display: inline;
  margin: 0 1rem;
}

footer ul li a {
  color: #fff;
  text-decoration: none;
}

footer ul li a:hover {
  text-decoration: underline;
}

footer .contact-info .company {
  font-weight: 800;
  font-size: 1.5rem;
}

.contact-info a {
  color: #fff;
}

.logo-container {
  position: relative;
  display: flex; /* 혹은 display: grid; */
  justify-content: center;
  align-items: center;
  height: 280px; /* 이미지가 중앙에 오도록 컨테이너의 높이를 설정하세요 */
}

.logo_s {
  height: 240px;
  position: relative; /* 이 이미지를 상위 요소 기준으로 위치시키기 위해 relative로 설정 */
  z-index: 2; /* logo_s가 star-animation 위에 오도록 z-index 설정 */
}

.star-animation {
  --star-size: 280px;
  width: var(--star-size);
  height: var(--star-size);
  position: absolute;
}

.star {
  animation: rotate 4s linear infinite;
  width: 200px;
  height: 200px;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}