:root {
  --primary-kor-font: "Noto Sans Kr";
  --primary-mobile-font: -apple-system, BlinkMacSystemFont, "Noto Sans Kr";
  --primary-eng-font: "FF Good Pro", sans-serif;
  --primary-heading-font: "Play", sans-serif;

  --secondly-eng-font: "FF Good Pro XCond", sans-serif;

  --primary-color: #404040;
  --second-color: #9a9a9a;
}

*,
:after,
:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

body {
  position: relative;
  margin: 0;
  font-family: var(--primary-kor-font), sans-serif;
  font-weight: 200;
  font-size: 16px;
  line-height: 1.4;
  box-sizing: border-box;
  color: var(--primary-color);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.mobile {
  font-family: var(--primary-mobile-font), sans-serif;
}

/* 모바일 작업중 다이얼로그 */
body.desktop mobile-alert-default {
  display: none;
  visibility: hidden;
}

.app {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#errorCheck {
  position: fixed;
  top: 6rem;
  width: 28rem;
  padding: 2rem;
  background-color: black;
  font-size: 11px;
  color: white;
}

/* 소셜 미디어 링크 */
.social {
  position: absolute;
  display: flex;
  margin: 0;
  padding: 0;
  top: 30px;
  right: 52px;
}

.social:before {
  position: absolute;
  top: 13px;
  left: -70px;
  content: 'SOCIAL';
  font-family: var(--primary-eng-font);
  font-weight: normal;
  font-size: 14px;
  letter-spacing: 1px;
  color: white;
}

.social a {
  display: block;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background-position: center center;
  background-size: 20px;
  background-repeat: no-repeat;
}

.social__twitter {
  background-color: #18a0d0;
  background-image: url('/assets/img/icon-twitter.svg');
}

.social__facebook {
  background-color: #3b5999;
  background-image: url('/assets/img/icon-facebook.svg');
  background-size: 18px !important;
}

.social__tumblr {
  background-color: #3a5775;
  background-image: url('/assets/img/icon-tumblr.svg');
  background-size: 18px !important;
}

.social__youtube {
  background-color: #a91d20;
  background-image: url('/assets/img/icon-youtube.svg');
}

/* 아트북 구매 박스 */
.get-artbook {
  position: absolute;
  top: 490px;
  left: 57px;
  width: 271px;
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: scale(2, 2);
}

.get-artbook h1 {
  margin: 0;
  padding: 0 0 13px 3px;
  font-family: var(--primary-heading-font), sans-serif;
  font-size: 18px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  line-height: 1;
  ;
}

/* HUD Box 스타일 1 */
.hud-box-1 {
  width: 271px;
  height: 46px;
  display: flex;
  justify-content: space-between;
  background: center / contain no-repeat url('/assets/img/box-get-ticket.svg');
}

.hud-box-1 a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  font-size: 20px;
  color: #64728d;
  background-color: #fff;
  text-decoration: none;
}

.hud-box-1 a:hover span {
  animation: .5s ease-out 0s infinite normal forwards running HudBoxArrow;
}

@keyframes HudBoxArrow {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(10px);
  }
}

.hud-box-1 p {
  align-self: center;
  margin: 0;
  padding: 1px 0 0 25px;
  font-family: var(--primary-eng-font);
  font-size: 14px;
  letter-spacing: 1px;
  color: #fff;
  text-transform: uppercase;
}

/* 미디어 레이어 */
.media {
  display: none;
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}

.media video {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: circle(0% at 50% 50%);
}

.media audio {
  display: none;
}