*,
*::before,
*::after {
  box-sizing: border-box;
}
@font-face {
  font-family: "Gotham";
  src: url("fonts/gotham_font/Gotham-Medium.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Gotham-light";
  src: url("fonts/gotham_font/Gotham-Light.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

html,
body {
  height: 100%;
  margin: 0;
  font-family: "Gotham", sans-serif;
}

/* CSS 변수 설정 */
:root {
  --bg-image: url("assets/mobile_BG.png");
}

/* 태블릿 이상 */
@media (min-width: 768px) {
  :root {
    --bg-image: url("assets/tablet_bg.png");
  }
  .slogan-wrap {
    gap: 2rem; /* 태블릿 이상에서 간격 확대 */
  }
}

/* PC 이상 */
@media (min-width: 1024px) {
  :root {
    --bg-image: url("assets/web_bg.png");
  }
}

/* hero 배경 영역 */
.hero {
  height: 100%;
  /* background: var(--bg-image) center/cover no-repeat; */
  background-image: var(--bg-image);
  background-position: top left;
  background-size: cover;
  background-color: black;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.logo {
  max-width: 70%;
  margin-bottom: 20px;
}

.slogan-wrap {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
p {
  margin: 0;
  color: white;
  font-size: 1rem;
  letter-spacing: 20%;
}

#slogan1 {
  font-family: "Gotham-light", sans-serif;
}