@font-face {
  font-family: "Pretendard-Regular";
  src: url("/css/fonts/Pretendard-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Pretendard-Bold";
  src: url("/css/fonts/Pretendard-Bold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Pretendard Regular";
  src: url("/css/fonts/Pretendard-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Pretendard Bold";
  src: url("/css/fonts/Pretendard-Bold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Kallisto";
  src: url("/css/fonts/fonnts.com-Kallisto_Heavy.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard-Medium";
  src: url("/css/fonts/Pretendard-Medium.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard Medium";
  src: url("/css/fonts/Pretendard-Medium.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  font-family: "Kallisto", sans-serif;
  touch-action: manipulation;
}
a {
  text-decoration: none !important;
  outline: none;
  color: #fff !important;
  font-size: 13px;
}
 a:hover,
a:active {
  text-decoration: none;
  color: #fff;
}
.bg {
  position: fixed;
  background: url(/images/bg_pc.webp) center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -9;
  opacity: 1;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  transform: translateZ(0);
  will-change: transform;
}
/* main {
  background-image: url(/images/bg_mo.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100vh;
} */
video {
  max-width: 100%;
  height: 100vh;
}
.video-area {
  width: 100%;
  overflow: hidden;
  height: 100%;
  display: flex;
  justify-content: center;
}
.content .inner {
  display: flex;
  align-items: center;
  flex-direction: column;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  background-color: rgb(0 0 0 / 80%);
  width: 100%;
  padding: 10px 0;
}
.content .inner h1 {
  color: #fff;
}
button.btn-default {
  color: #fff;
}

button.btn-default:hover,
button.btn-default:active,
button.btn-default:focus {
  color: #fff;
}

button.btn-default.focus,
button.btn-default:focus {
  outline: 0;
  box-shadow: none;
}
.main-area {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 30px;
  overflow: hidden;
  max-width: 100%;
  margin-top: 45px;
}
.circle {
  position: absolute;
}
.circle1 {
  top: 21vw;
  right: -9vw;
  width: 130px;
  animation: slow-rotate 10s linear infinite;
}
.circle2 {
  top: 42vw;
  left: -16vw;
  width: 110px;
  animation: slow-rotate 15s linear infinite;
}
.circle3 {
  bottom: 20vw;
  right: -17vw;
  width: 121px;
  animation: slow-rotate 20s linear infinite;
}

.icon-moon {
  width: 190px;
}
.icon-moon:hover,
.icon-moon:active {
  animation: slow-rotate 15s linear;
}
.text-logo {
  width: 120px;
}
.icon-star {
  width: 24px;
}
.main-list {
  display: flex;
  padding: 0px 60px;
  gap: 15px;
  text-align: center;
}
.main-list img {
  width: 100%;
}

.text-tit {
  width: 180px;
  position: absolute;
  bottom: 30px;
}

.circles-group {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -9;
  opacity: 0;
}

/* 회전 애니메이션 정의 */
@keyframes slow-rotate {
  from {
    transform: rotate(0deg); /* 처음 상태 */
  }
  to {
    transform: rotate(360deg); /* 360도 회전 */
  }
}
@media screen and (max-width: 768px) {
  .circles-group {
    opacity: 1;
  }
}

/* 테블릿 CSS - 세로 */

@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .main-area {
    margin-top: 80px;
    gap: 45px;
  }
  .main-list a {
    font-size: 15px;
  }
  .icon-moon {
    width: 280px;
  }

  /* .circle1 {
    top: 14vw;
    right: -3vw;
    width: 150px;
  }
  .circle2 {
    top: 29vw;
    left: -10vw;
    width: 150px;
  }
  .circle3 {
    bottom: 28vw;
    right: -9vw;
    width: 144px;
  } */
}

/* 테블릿 CSS - 가로 */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .main-area {
    gap: 25px;
    margin-top: 35px;
  }
  .icon-moon {
    width: 190px;
  }
  /* .circle1 {
    top: 9vw;
    right: -4vw;
    width: 124px;
  }
  .circle2 {
    top: 22vw;
    left: -6vw;
    width: 120px;
  }
  .circle3 {
    bottom: 12vw;
    right: -6vw;
    width: 121px;
  } */
  .text-tit {
    position: initial;
  }
}

/* 아이패드 프로 */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) {
  .main-area {
    margin-top: 80px;
    gap: 45px;
  }
  .main-list a {
    font-size: 15px;
  }
  .icon-moon {
    width: 280px;
  }

  /* .circle1 {
    top: 14vw;
    right: -3vw;
    width: 150px;
  }
  .circle2 {
    top: 29vw;
    left: -10vw;
    width: 150px;
  }
  .circle3 {
    bottom: 28vw;
    right: -9vw;
    width: 144px;
  } */
}

/* PC */
@media screen and (min-width: 1280px) {
  /* Styles for screens smaller than or equal to 1180px */
  /* body {
    background-color: black;
  } */
  /* main {
    background-image: url(/images/bg_pc.webp);
  } */
  .main-area {
    gap: 35px;
  }

  .text-logo {
    width: 180px;
  }
  .icon-moon {
    width: 265px;
  }
  .icon-star {
    width: 30px;
  }

  .main-list {
    padding: 0px 90px;
    gap: 25px;
  }
  .main-list img {
    height: 15px;
  }
  .main-list a {
    font-size: 15px;
  }

  /* .circle1 {
    top: 50px;
    right: -20px;
  }

  .circle2 {
    top: 180px;
    left: -60px;
  }

  .circle3 {
    bottom: 140px;
    right: -60px;
  } */
}