/* COSS playground map — 7 concept pins on island art */

#main.main-wrap .map-slide.splide .page-box {
  width: min(560px, 48vw);
  height: min(520px, 44vw);
  top: 34%;
  left: 0;
}

#main.main-wrap .map-slide.splide .splide__pagination {
  background-image: url("../maps/kos_map_base.png") !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

#main.main-wrap .map-slide.splide .splide__pagination li {
  width: 56px;
  height: 56px;
}

/* 1 신체 — left slide tower */
#main.main-wrap .map-slide.splide .splide__pagination li:nth-child(1) {
  left: 14%;
  top: 34%;
}
/* 2 정서 — center climbing nets */
#main.main-wrap .map-slide.splide .splide__pagination li:nth-child(2) {
  left: 40%;
  top: 50%;
}
/* 3 공감 — green edge / trees */
#main.main-wrap .map-slide.splide .splide__pagination li:nth-child(3) {
  left: 24%;
  top: 64%;
}
/* 4 창의 — central bridge / maze */
#main.main-wrap .map-slide.splide .splide__pagination li:nth-child(4) {
  left: 52%;
  top: 36%;
}
/* 5 감각 — tunnel / low play */
#main.main-wrap .map-slide.splide .splide__pagination li:nth-child(5) {
  left: 36%;
  top: 62%;
}
/* 6 언어 — right path / open sand */
#main.main-wrap .map-slide.splide .splide__pagination li:nth-child(6) {
  left: 70%;
  top: 54%;
}
/* 7 숫자 — right playhouse */
#main.main-wrap .map-slide.splide .splide__pagination li:nth-child(7) {
  left: 76%;
  top: 30%;
}

#main.main-wrap .map-slide.splide .splide__pagination li:nth-child(1) button {
  background-image: url("../maps/kos_pin1.png") !important;
}
#main.main-wrap .map-slide.splide .splide__pagination li:nth-child(1) button.is-active {
  background-image: url("../maps/kos_pin1_ov.png") !important;
}
#main.main-wrap .map-slide.splide .splide__pagination li:nth-child(2) button {
  background-image: url("../maps/kos_pin2.png") !important;
}
#main.main-wrap .map-slide.splide .splide__pagination li:nth-child(2) button.is-active {
  background-image: url("../maps/kos_pin2_ov.png") !important;
}
#main.main-wrap .map-slide.splide .splide__pagination li:nth-child(3) button {
  background-image: url("../maps/kos_pin3.png") !important;
}
#main.main-wrap .map-slide.splide .splide__pagination li:nth-child(3) button.is-active {
  background-image: url("../maps/kos_pin3_ov.png") !important;
}
#main.main-wrap .map-slide.splide .splide__pagination li:nth-child(4) button {
  background-image: url("../maps/kos_pin4.png") !important;
}
#main.main-wrap .map-slide.splide .splide__pagination li:nth-child(4) button.is-active {
  background-image: url("../maps/kos_pin4_ov.png") !important;
}
#main.main-wrap .map-slide.splide .splide__pagination li:nth-child(5) button {
  background-image: url("../maps/kos_pin5.png") !important;
}
#main.main-wrap .map-slide.splide .splide__pagination li:nth-child(5) button.is-active {
  background-image: url("../maps/kos_pin5_ov.png") !important;
}
#main.main-wrap .map-slide.splide .splide__pagination li:nth-child(6) button {
  background-image: url("../maps/kos_pin6.png") !important;
}
#main.main-wrap .map-slide.splide .splide__pagination li:nth-child(6) button.is-active {
  background-image: url("../maps/kos_pin6_ov.png") !important;
}
#main.main-wrap .map-slide.splide .splide__pagination li:nth-child(7) button {
  background-image: url("../maps/kos_pin7.png") !important;
}
#main.main-wrap .map-slide.splide .splide__pagination li:nth-child(7) button.is-active {
  background-image: url("../maps/kos_pin7_ov.png") !important;
}

#main.main-wrap .map-slide.splide .splide__pagination li button {
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter: none !important;
  transition: transform 0.25s ease;
}
#main.main-wrap .map-slide.splide .splide__pagination li button.is-active {
  transform: scale(1.14);
  z-index: 12;
}
#main.main-wrap .map-slide.splide .splide__pagination li button:hover {
  transform: scale(1.08);
}

@media (max-width: 1400px) {
  #main.main-wrap .map-slide.splide .page-box {
    width: min(500px, 46vw);
    height: min(460px, 42vw);
    top: 36%;
  }
}

@media (max-width: 1280px) {
  #main.main-wrap .map-slide.splide .page-box {
    width: 420px;
    height: 390px;
    top: 38%;
  }
  #main.main-wrap .map-slide.splide .splide__pagination li {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 1024px) {
  #main.main-wrap .map-slide.splide .page-box {
    width: 360px;
    height: 340px;
    top: 40%;
  }
  #main.main-wrap .map-slide.splide .splide__pagination li {
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 768px) {
  #main.main-wrap .map-slide.splide .page-box {
    width: min(92vw, 420px);
    height: min(88vw, 400px);
    left: 50%;
    top: 18%;
    transform: translateX(-50%);
  }
  #main.main-wrap .map-slide.splide .splide__pagination li {
    width: 44px;
    height: 44px;
  }
}