@import "./../font/pretendardvariable.css";
@import "./reset.css";
@import "./loader.css";
@import "./swiper-11.1.1.min.css";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration-line: none;
}
html,
body {
  width: 100%;
  height: 100%;
}
body {
  overflow-x: hidden;
}
button {
  cursor: pointer;
  border: none;
}
img {
  width: 100%;
}
:root {
  color-scheme: light only;
}

/* ---------- */
.warp {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: top center;
}

.container {
  position: relative;
  width: 1500px;
}
.container button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  background: gray;
  width: 752px;
  height: 104px;
  border-radius: 48px;
}

.btn-share {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 549px;
  height: 96px;
  font-size: 0;
  background: url(./../img/btn-share.svg) no-repeat center / cover;
  border-radius: 100px;
  filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.2));
}
@media screen and (max-width: 750px) {
  .btn-share {
    bottom: 36px;
  }
}

/* 참여완료 */
.container.content1 .btn1 {
  /* top: 2878px; */
  top: 1412px;
}
/* 구독하기 */
.container.content2 .btn1 {
  top: 1812px;
}
/* 연간 이용권 결제하러 가기 */
.container.content2 .btn2 {
  top: 2138px;
}

/* KBO 리그 시범경기 바로 보러가기 */
.container.video button {
  top: 912px;
}

/* 키비주얼 말풍선 */
.container.keyvisual .bubble {
  position: absolute;
  width: 158px;
  height: 86.36px;
  left: 46px;
  bottom: 9px;
  filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.2));
}

.video-wrap {
  overflow: hidden;
  position: absolute;
  top: -806px;
  left: 750px;
  transform: translateX(-50%);
  aspect-ratio: 920/518;
  width: 1246px;
  z-index: 99;
  border-radius: 10px;
}
.video-wrap video {
  width: 100%;
  height: 100%;
}

.play_btn {
  position: absolute;
  transform: translateX(-50%) translateY(-50%);
  left: 50%;
  top: 50%;
  width: 65px;
  height: 77px;
  background: url(./../img/play_btn.svg) no-repeat center / cover;
  z-index: 1;
  opacity: 1;
  cursor: pointer;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}
#avodannual {
  position: absolute;
  top: 0;
  width: 100%;
}
#toss {
  position: absolute;
  top: 1113px;
  width: 100%;
}
.mo {
  display: none;
}

.pc {
  display: block;
}
@media screen and (min-width: 751px) {
  .warp {
    transform: scale(60%);
  }
}
@media screen and (max-width: 750px) {
  .mo {
    display: block;
  }
  .pc {
    display: none;
  }
  .play_btn {
    opacity: 0;
    pointer-events: none;
  }
  .video-wrap {
    top: -427px;
    width: 583px;
    left: 50%;
  }

  .container {
    width: 720px;
  }

  .container.content1 .btn1 {
    top: 971px;
  }

  .container.content2 .btn1 {
    top: 1380px;
  }

  .container button {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    background: gray;
    width: 423px;
    height: 73px;
  }
}