@import "./../font/pretendardvariable.css";

@import url("https://webfontworld.github.io/SCoreDream/SCoreDream.css");

@font-face {
  font-family: "HGGGothicssiP60g";
  src: url("./../font/HGGGothicssi_60g.ttf") format("opentype");
}
@font-face {
  font-family: "HGGGothicssiP20g";
  src: url("./../font/HGGGothicssi_20g.ttf") format("opentype");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "HGGGothicssiP60g", "SCoreDream", Arial, Helvetica, sans-serif;
}

a {
  text-decoration-line: none;
}

html {
  width: 100%;
}
body {
  width: 100%;
  position: relative;
}
button {
  cursor: pointer;
  font-size: 0;
}
img {
  width: 100%;
  /* firefox */
  /* image-rendering: -moz-crisp-edges; */
  /* opera */
  /* image-rendering: -o-crisp-edges; */
  /* chrome(비표준) */
  /* image-rendering: -webkit-optimize-contrast; */
  /* image-rendering: crisp-edges; */
}

.scroll-header {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 10;
  display: none;
}
.scroll-header_inner {
  position: relative;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
}

.warp {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
}
.header {
  position: relative;
  width: 100%;
  max-width: 1024px;
}
.notice {
  position: absolute;
  bottom: 12%;
  left: 8%;
  width: 19%;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.2));
}

.notice.app {
  left: 16.5%;
}

.section {
  position: relative;
  width: 100%;
  max-width: 1024px;
  overflow: hidden;
}
.tab-nav {
  position: absolute;
  display: flex;
  bottom: 0px;
  width: 100%;
}
/* .tab-img:nth-of-type(2),
.tab-img:nth-of-type(3) {
  position: absolute;
} */
.nav-btn-warp {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
}
.btn-tab {
  width: 33.3%;
  opacity: 0;
}
.btn-tab-app {
  width: 50%;
  opacity: 0;
}

/* =====공유 버튼===== */
.share-warp {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 15%;
  /* padding-top: 10%; */
}
.share-warp button {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  font-size: 0;
}
.share-warp .btn-kakao {
  left: 0;
}
.share-warp .btn-link {
  right: 0;
}
/* =====페이지 별 공유버튼 위치===== */
.tab-1 .share-warp {
  bottom: 27.3%;
  opacity: 0;
  height: 4.5%;
}
.tab-2 .share-warp {
  bottom: 2.4%;
  opacity: 0;
  height: 8.1%;
}
.tab-3 .share-warp {
  bottom: 2%;
  height: 3.1%;
  opacity: 0;
}

/* ============TAB1============ */
.tab-1 .find-warp {
  position: absolute;
  width: 100%;
  padding-top: 56.14%;
  bottom: 44.9%;
}
.tab-1 .find-popup {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tab-1 .btn-find-start {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 27.8%;
  width: 24%;
  opacity: 0;
  /* padding-top: 4.8%; */
  height: 10%;
}

.tab-1 .find-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.tab-1 .btn-clover-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.tab-1 .clover-bg-warp {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.tab-1 .btn-clover {
  position: absolute;
  width: 20%;
  background: none;
  border: none;
}
.tab-1 .btn-clover.position1 {
  top: 32%;
  left: 43%;
  transform: rotate(-20deg);
}
.tab-1 .btn-clover.position2 {
  top: 0%;
  left: 65%;
  transform: rotate(41deg);
}
.tab-1 .btn-clover.position3 {
  top: 34%;
  left: 83%;
  transform: rotate(160deg);
}
.tab-1 .btn-clover.position4 {
  top: 66%;
  left: 12.5%;
  transform: rotate(330deg);
}

.tab-1 .popup {
  display: none;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.tab-1 .popup .img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.tab-1 .popup .btn-close {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
}

.tab-1 .popup-apply .img,
.tab-1 .popup-disapply .img {
  width: 38%;
}
.tab-1 .popup-try .img,
.tab-1 .popup-login .img {
  width: 50%;
}
.tab-1 .popup-event-end .img,
.tab-1 .popup-error .img {
  width: 70%;
}

.tab-1 .popup-apply .btn-close,
.tab-1 .popup-disapply .btn-close {
  width: 20%;
  height: 10%;
  bottom: 10%;
}
.tab-1 .popup-try .btn-close,
.tab-1 .popup-login .btn-close {
  width: 21%;
  height: 11%;
  bottom: 34.7%;
}
.tab-1 .popup-event-end .btn-close,
.tab-1 .popup-error .btn-close {
  width: 25%;
  height: 11%;
  bottom: 33%;
}
.tab-1 .btn-login {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  width: 20%;
  height: 10%;
  bottom: 36%;
}
.event-over-dimd {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
}
.event-over-dimd img {
  width: 50%;
}
/* ============TAB2============ */
.tab-2 .video-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  bottom: 49%;
}
.tab-2 .video-wrap .video {
  width: 100%;
  border-radius: 10px;
}
.tab-2 .swiper-content {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
}
.tab-2 .swiper {
  width: 100%;
}
.tab-2 .swiper-slide .img {
  border-radius: 10px;
}
.tab-2 .swiper-slide p {
  color: #383838;
  margin-bottom: 12px;
  font-family: "Pretendard";
  font-weight: 700;
  font-size: 18px;
}
.tab-2 .slide-label {
  position: absolute;
  bottom: -5.3%;
  left: 50%;
  transform: translateX(-50%);
  width: 82%;
}

.swiper-button-prev,
.swiper-button-next {
  background: none;
  border: none;
}
.swiper-button-prev:after,
.swiper-button-next:after {
  color: #c2cfc1;
  font-size: 36px;
}

.swiper-button-prev {
  left: -8%;
}
.swiper-button-next {
  right: -8%;
}

/* ============TAB3============ */
.tab-3 .section3-img {
  position: relative;
}
.tab-3 .section3-text {
  width: 100%;
  padding: 70px 200px;
  background: #f2f2f2;
  font-family: "Pretendard";
}
.tab-3 .section3-text h4 {
  display: block;
  font-weight: 700;
  font-size: 100%;
  margin-bottom: 20px;
}
.tab-3 .section3-text p {
  font-weight: 400;
  display: block;
  margin-bottom: 20px;
  line-height: 24px;
}
.tab-3 .section3-text b {
  font-weight: 700;
}
.tab-3 .section3-text p span {
  padding-left: 10px;
}

.tab3btn1,
.tab3btn2,
.tab3btn3,
.tab3btn4,
.tab3btn5 {
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  width: 40%;
  /* padding-top: 6%; */
  height: 2%;
  opacity: 0;
}
.tab3btn1 {
  bottom: 52.5%;
}
.tab3btn2 {
  bottom: 55.2%;
}
.tab3btn3 {
  bottom: 38%;
}
.tab3btn4 {
  bottom: 33.6%;
}
.tab3btn5 {
  bottom: 7.9%;
}

@media screen and (max-width: 1320px) {
  /* ============TAB3============ */
  .tab-3 .section3-text {
    padding: 70px 70px;
  }
}

/* PC */
@media screen and (min-width: 751px) {
  .mo {
    display: none !important;
  }
}

/* MO */
@media screen and (max-width: 750px) {
  .pc {
    display: none !important;
  }

  .notice {
    bottom: 15.7%;
    left: 4%;
    width: 28%;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.15));
  }
  .notice.app {
    left: 12%;
  }

  .share-warp {
    width: 34%;
    padding-top: 20%;
  }

  /* =====페이지 별 공유버튼 위치===== */
  .tab-1 .share-warp {
    bottom: 32.6%;
  }
  .tab-2 .share-warp {
    bottom: 25.6%;
  }
  .tab-3 .share-warp {
    bottom: 1.6%;
  }

  /* ============TAB1============ */
  .tab-1 .find-warp {
    bottom: 53%;
  }
  .tab-1 .popup-apply .img,
  .tab-1 .popup-disapply .img {
    width: 80%;
  }
  .tab-1 .popup-apply .btn-close,
  .tab-1 .popup-disapply .btn-close {
    width: 40%;
    height: 19%;
    bottom: -33%;
  }
  .tab-1 .popup-try .img,
  .tab-1 .popup-login .img {
    width: 64%;
  }
  .tab-1 .popup-try .btn-close,
  .tab-1 .popup-login .btn-close {
    width: 24%;
    height: 16%;
    bottom: 26%;
  }
  .tab-1 .btn-login {
    opacity: 0;
    width: 23%;
    height: 16%;
    bottom: 26%;
  }
  .tab-1 .popup-event-end .img {
    width: 80%;
  }
  .tab-1 .popup-event-end .btn-close,
  .tab-1 .popup-error .btn-close {
    width: 25%;
    height: 17%;
    bottom: 23%;
  }
  /* ============TAB2============ */
  .tab-2 .video-wrap {
    width: 90%;
    bottom: 60.8%;
  }
  .tab-2 .video-wrap .video {
    border-radius: 1.5vw;
  }
  .tab-2 .swiper-content {
    width: 95%;
    left: 52.4%;
    bottom: 38.4%;
  }
  .tab-2 .swiper-slide p {
    font-size: 2.8vw;
  }
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
  /* ============TAB3============ */
  .tab-3 .section3-text {
    padding: 50px 50px;
    font-size: 2.8vw;
  }
  .tab-3 .section3-text h4 {
    margin-bottom: 16px;
  }
  .tab-3 .section3-text p {
    margin-bottom: 16px;
    line-height: 4.2vw;
  }

  .tab3btn1,
  .tab3btn2,
  .tab3btn3,
  .tab3btn4,
  .tab3btn5 {
    width: 61%;
    /* padding-top: 9%; */
    height: 1.7%;
  }
  .tab3btn1 {
    bottom: 46.8%;
  }
  .tab3btn2 {
    bottom: 49%;
  }
  .tab3btn3 {
    bottom: 34.4%;
  }
  .tab3btn4 {
    bottom: 31.4%;
  }
  .tab3btn5 {
    bottom: 7.8%;
  }
}