@charset "utf-8";

html {
  background: #000;
}

@font-face {
  font-family: "GmarketSansMedium";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

/* 컨테이너 스타일 */
.container {
  position: relative;
  width: 100%;
  max-width: 100%;
  text-align: center;
}

/* 반응형 이미지 */
.responsive-image {
  height: auto;
  max-width: 100vw;
  object-fit: contain;
}

/* 링크 위치와 스타일 */
.link {
  font-size: 5vw;
  position: absolute;
  /* 원하는 위치로 조정 */
  transform: translate(-50%, -50%);
  /* 위치를 중앙 정렬 */
  font-size: 50px;
  /* 뷰포트 너비에 따라 반응형 */
  color: white;
  font-weight: 600;
  text-decoration: none;
  font-family: "GmarketSansMedium";
}

.link.l1 {
  /* top: 38.6%; */
  /* 원하는 위치로 조정 */
}

.link.l2 {
  top: 40.3%;
  /* 원하는 위치로 조정 */
}

/* 작은 화면일 때 폰트 크기 조정 */
@media (max-width: 768px) {
  .responsive-image {
    width: 100%;
  }
}

@media (max-width: 550px) {
  .link {
    font-size: 7vw;
    /* left: 95px; */
    /* transform: translate(0%, -50%); */
  }
}

@media (max-width: 375px) {
  .link {
    font-size: 7vw;
    /* left: 95px; */
    /* transform: translate(0%, -50%); */
  }
}

@media (max-width: 320px) {
  .link {
    font-size: 7vw;
    /* left: 78px; */
    /* transform: translate(0%, -50%); */
  }
}