/*
Theme Name: Twenty Twenty-one Child
Version: 1.6
Template: twentytwentyone
*/
:root {
  --viewport-width: min(100vw, 2000px);
  --b: calc(var(--viewport-width) / 160);
}

html,
body,
main {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer and Edge */
  background: #3a9447;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
main::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.header {
  pointer-events: none;
}
.header::after {
  border-radius: 0 !important;
}
.header__logo {
  pointer-events: auto;
}
.header__logo img {
  -webkit-filter: invert(10) brightness(5) drop-shadow(0 0 10px #3a9447);
          filter: invert(10) brightness(5) drop-shadow(0 0 10px #3a9447);
}
.header__menu--list.sp {
  display: none !important;
}
.header__nav {
  display: none !important;
}
.header__toggle {
  display: none !important;
}

.opening {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}
.opening .imageBox {
  position: absolute;
  width: 125%;
  height: auto;
  -webkit-transition: opacity 2s ease, -webkit-transform 2s cubic-bezier(0.15, 0.49, 0.26, 0.82);
  transition: opacity 2s ease, -webkit-transform 2s cubic-bezier(0.15, 0.49, 0.26, 0.82);
  transition: transform 2s cubic-bezier(0.15, 0.49, 0.26, 0.82), opacity 2s ease;
  transition: transform 2s cubic-bezier(0.15, 0.49, 0.26, 0.82), opacity 2s ease, -webkit-transform 2s cubic-bezier(0.15, 0.49, 0.26, 0.82);
}
.opening .imageBox.first {
  top: 0;
  left: 0;
  -webkit-transform: translate(-25%, -25%);
          transform: translate(-25%, -25%);
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.opening .imageBox.second {
  bottom: 0;
  left: 0;
  -webkit-transform: translate(-20%, 30%);
          transform: translate(-20%, 30%);
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
.opening .imageBox.third {
  width: 150%;
  bottom: 0;
  right: 0;
  -webkit-transform: translate(40%, 10%);
          transform: translate(40%, 10%);
  -webkit-transition-delay: 0.55s;
          transition-delay: 0.55s;
}
.opening .imageBox.fourth {
  top: 0;
  right: 0;
  -webkit-transform: translate(25%, -50%);
          transform: translate(25%, -50%);
  -webkit-transition-delay: 0.52s;
          transition-delay: 0.52s;
}
.opening .imageBox.fifth {
  width: 200%;
  top: 5%;
  left: 0;
  -webkit-transform: translateX(-45%);
          transform: translateX(-45%);
  -webkit-transition-delay: 0.57s;
          transition-delay: 0.57s;
}
.opening .imageBox.sixth {
  width: 250%;
  top: 0%;
  right: 0;
  -webkit-transform: translateX(45%);
          transform: translateX(45%);
  -webkit-transition-delay: 0.51s;
          transition-delay: 0.51s;
}
.opening .imageBox img {
  width: 100%;
  height: 100%;
}
@media screen and (max-aspect-ratio: 1/1) {
  .opening .imageBox {
    width: 500%;
  }
}
.opening.active .imageBox {
  opacity: 0;
}
.opening.active .imageBox.first {
  -webkit-transform: translate(-100%, -100%);
          transform: translate(-100%, -100%);
}
.opening.active .imageBox.second {
  -webkit-transform: translate(-100%, 100%);
          transform: translate(-100%, 100%);
}
.opening.active .imageBox.third {
  -webkit-transform: translate(100%, 100%);
          transform: translate(100%, 100%);
}
.opening.active .imageBox.fourth {
  -webkit-transform: translate(-100%, -100%);
          transform: translate(-100%, -100%);
}
.opening.active .imageBox.fifth {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.opening.active .imageBox.sixth {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

#life .preface {
  position: fixed;
  display: grid;
  place-items: center;
  inset: 0;
  padding-top: max(8rem, 60px);
  -webkit-transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  visibility: visible;
  opacity: 1;
  z-index: 9999;
}
#life .preface--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
#life .preface--hidden .preface__content {
  -webkit-transform: scale(0.95) translateX(-50%);
          transform: scale(0.95) translateX(-50%);
}
#life .preface__overlay {
  position: absolute;
  inset: 0;
  background: rgba(58, 148, 71, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 10;
}
#life .preface__content {
  position: absolute;
  left: 50%;
  width: clamp(475px, 60%, 100rem);
  margin: 0 auto;
  padding: max(8rem, 50px) 5%;
  text-align: center;
  background: #fff;
  border-radius: max(1.5rem, 15px);
  -webkit-box-shadow: 0 0 max(7rem, 50px) rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 max(7rem, 50px) rgba(0, 0, 0, 0.15);
  z-index: 1000;
  -webkit-transform: scale(1) translateX(-50%);
          transform: scale(1) translateX(-50%);
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
@media screen and (max-width: 550px) {
  #life .preface__content {
    width: 90%;
  }
}
#life .preface__content h2 {
  margin-bottom: max(2rem, 20px);
  color: #3a9447;
  font-size: max(3.4rem, 28px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}
@media screen and (max-width: 550px) {
  #life .preface__content h2 {
    font-size: 6vw;
  }
}
#life .preface__content p {
  font-size: max(1.6rem, 13px);
  font-weight: 500;
  line-height: 2.5;
  letter-spacing: 0;
}
#life .preface__content__btnBox {
  margin-top: max(3rem, 20px);
}
#life .preface__content__btnBox .btn {
  text-align: center;
  min-width: 400px;
  margin: 0 auto;
  padding-left: max(10rem, 40px);
  padding-right: max(10rem, 40px);
  background: #3a9447;
  border-radius: max(4rem, 30px);
  -webkit-box-shadow: 5px 5px #30853b;
          box-shadow: 5px 5px #30853b;
}
@media screen and (max-width: 550px) {
  #life .preface__content__btnBox .btn {
    width: 100%;
    min-width: 100%;
  }
}
#life .preface__content__btnBox .btn span {
  padding-top: max(2rem, 20px);
  padding-bottom: max(2rem, 20px);
  color: #fff;
  font-size: max(2rem, 18px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}
#life .map {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  cursor: -webkit-grab;
  cursor: grab;
  background-color: #cfdddb;
  -ms-touch-action: none;
      touch-action: none;
  z-index: 0;
}
#life .map.dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
#life .map__controls {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  grid-template-columns: 1fr auto 1fr;
  gap: max(2rem, 20px);
  bottom: clamp(10px, 3.125vw, 50px);
  left: clamp(10px, 3.125vw, 50px);
  background: #fff;
  border-radius: max(1rem, 10px);
  overflow: hidden;
}
#life .map__controls__button {
  display: grid;
  place-items: center;
  align-self: stretch;
  height: auto;
  min-width: max(3.125vw, 50px);
  background: #3a9447;
  color: #fff;
}
#life .map__controls__button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
#life .map__controls__button .button__icon {
  width: 40%;
  height: auto;
  aspect-ratio: 1;
  position: relative;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
#life .map__controls__button .button__icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: max(0.125vw, 2px);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: #fff;
  z-index: 1;
}
#life .map__controls__button--in .button__icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: max(0.125vw, 2px);
  height: 100%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: #fff;
  z-index: 1;
}
#life .map__controls__button:active:not(:disabled) .button__icon {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}
@media (hover: hover) and (pointer: fine) {
  #life .map__controls__button:hover:not(:disabled) .button__icon {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
#life .map__controls__indicator {
  display: grid;
  text-align: center;
  gap: 2px;
  padding-top: max(0.625vw, 10px);
  padding-bottom: max(0.625vw, 10px);
}
#life .map__controls__indicator span {
  display: block;
  font-size: max(0.75vw, 16px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}
#life .map__area {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transition: -webkit-transform 0.28s cubic-bezier(0.18, 0.55, 0.24, 1);
  transition: -webkit-transform 0.28s cubic-bezier(0.18, 0.55, 0.24, 1);
  transition: transform 0.28s cubic-bezier(0.18, 0.55, 0.24, 1);
  transition: transform 0.28s cubic-bezier(0.18, 0.55, 0.24, 1), -webkit-transform 0.28s cubic-bezier(0.18, 0.55, 0.24, 1);
  will-change: transform;
  z-index: 0;
}
#life .map__area__image {
  display: block;
  max-width: none;
  max-height: none;
  min-width: 100vw;
  min-height: 100vh;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
}
#life .map__area__pin {
  position: absolute;
  inset: 0;
  z-index: 1;
}
#life .map__area__pin__item button {
  position: absolute;
  width: 2%;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  z-index: 10;
}
#life .map__area__pin__item button .cls-2 {
  -webkit-transition: fill 0.3s ease;
  transition: fill 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  #life .map__area__pin__item button:hover {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  #life .map__area__pin__item button:hover .cls-2 {
    fill: #F2EC4C;
  }
}
#life .map__area__pin__item .pin-range {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  -webkit-transition: background 0.5s ease;
  transition: background 0.5s ease;
}
#life .map__area__pin__item .pin-range--hover {
  background: rgba(242, 236, 76, 0.4);
}
#life .map__area__pin__item#artmuseum .pin-range {
  top: 46%;
  left: 30.7%;
  width: 16.1%;
  height: 26%;
  -webkit-clip-path: polygon(32% 0%, 51% 11%, 66% 8%, 81% 31%, 100% 42%, 100% 80%, 69% 100%, 47% 86%, 35% 94%, 8% 77%, 8% 61%, 0% 56%, 0% 20%);
          clip-path: polygon(32% 0%, 51% 11%, 66% 8%, 81% 31%, 100% 42%, 100% 80%, 69% 100%, 47% 86%, 35% 94%, 8% 77%, 8% 61%, 0% 56%, 0% 20%);
}
#life .map__area__pin__item#artmuseum button {
  top: 48%;
  left: 37%;
}
#life .map__area__pin__item#supermarket .pin-range {
  top: 62%;
  left: 54.3%;
  width: 17.4%;
  height: 22.8%;
  -webkit-clip-path: polygon(46% 0%, 100% 43%, 100% 62%, 54% 100%, 0% 58%, -16% 49%);
          clip-path: polygon(46% 0%, 100% 43%, 100% 62%, 54% 100%, 0% 58%, -16% 49%);
}
#life .map__area__pin__item#supermarket button {
  top: 67%;
  left: 58%;
}
#life .map__area__pin__item#hospital .pin-range {
  top: 57%;
  left: 8.8%;
  width: 16.8%;
  height: 31%;
  -webkit-clip-path: polygon(35% 0%, 52% 9%, 52% 15%, 100% 42%, 100% 80%, 65% 100%, 0% 64%, 0% 25%, 20% 14%, 20% 8%);
          clip-path: polygon(35% 0%, 52% 9%, 52% 15%, 100% 42%, 100% 80%, 65% 100%, 0% 64%, 0% 25%, 20% 14%, 20% 8%);
}
#life .map__area__pin__item#hospital button {
  top: 65%;
  left: 18%;
}
#life .map__area__pin__item#office1 .pin-range {
  top: 8.7%;
  left: 42.4%;
  width: 7.1%;
  height: 18.5%;
  -webkit-clip-path: polygon(61% 0%, 100% 16%, 100% 15%, 100% 68%, 77% 78%, 77% 84%, 58% 91%, 51% 88%, 19% 100%, 0% 93%, 0% 24%);
          clip-path: polygon(61% 0%, 100% 16%, 100% 15%, 100% 68%, 77% 78%, 77% 84%, 58% 91%, 51% 88%, 19% 100%, 0% 93%, 0% 24%);
}
#life .map__area__pin__item#office1 button {
  top: 9%;
  left: 45.5%;
}
#life .map__area__pin__item#office2 .pin-range {
  top: 0.8%;
  left: 32.9%;
  width: 9.5%;
  height: 32%;
  -webkit-clip-path: polygon(38% 0%, 100% 19%, 100% 89%, 61% 100%, 0% 81%, 0% 11%);
          clip-path: polygon(38% 0%, 100% 19%, 100% 89%, 61% 100%, 0% 81%, 0% 11%);
}
#life .map__area__pin__item#office2 button {
  top: 9%;
  left: 35%;
}
#life .map__area__pin__item#school .pin-range {
  top: 24.8%;
  left: 11.5%;
  width: 15.5%;
  height: 28.5%;
  -webkit-clip-path: polygon(67.5% 0%, 100% 18.5%, 100% 63%, 32.5% 100%, 0% 82%, 0% 38%, 33.2% 19%, 33.2% 10%, 48.8% 1.4%, 56.6% 6%);
          clip-path: polygon(67.5% 0%, 100% 18.5%, 100% 63%, 32.5% 100%, 0% 82%, 0% 38%, 33.2% 19%, 33.2% 10%, 48.8% 1.4%, 56.6% 6%);
}
#life .map__area__pin__item#school button {
  top: 23%;
  left: 18%;
}
#life .map__area__pin__item#sport .pin-range {
  top: 23.5%;
  left: 22.4%;
  width: 10%;
  height: 18.6%;
  -webkit-clip-path: polygon(19.5% 0%, 100% 44.5%, 100% 73%, 53% 100%, 48% 97%, 48% 34%, 0% 7.5%);
          clip-path: polygon(19.5% 0%, 100% 44.5%, 100% 73%, 53% 100%, 48% 97%, 48% 34%, 0% 7.5%);
}
#life .map__area__pin__item#sport button {
  top: 29%;
  left: 29%;
}
#life .map__area__pin__item#pool1 .pin-range {
  top: 38.6%;
  left: 29.2%;
  width: 9.5%;
  height: 9.3%;
  -webkit-clip-path: polygon(43.5% 0%, 100% 59.5%, 100% 66%, 80% 86%, 69% 76%, 46% 100%, 0% 50.5%, 0% 44%);
          clip-path: polygon(43.5% 0%, 100% 59.5%, 100% 66%, 80% 86%, 69% 76%, 46% 100%, 0% 50.5%, 0% 44%);
}
#life .map__area__pin__item#pool1 button {
  top: 38%;
  left: 33%;
}
#life .map__area__pin__item#pool2 .pin-range {
  top: 11.6%;
  left: 16.8%;
  width: 14.64%;
  height: 14.5%;
  -webkit-clip-path: polygon(34.8% 0%, 100% 67.5%, 94% 78%, 86.5% 70%, 70% 100%, 51.5% 81.5%, 34% 91%, 24% 100%, 0% 79%, 0% 42%);
          clip-path: polygon(34.8% 0%, 100% 67.5%, 94% 78%, 86.5% 70%, 70% 100%, 51.5% 81.5%, 34% 91%, 24% 100%, 0% 79%, 0% 42%);
}
#life .map__area__pin__item#pool2 button {
  top: 15%;
  left: 27%;
}
#life .map__area__pin__item#park .pin-range {
  top: 44.4%;
  left: 41.3%;
  width: 6.9%;
  height: 12.5%;
  -webkit-clip-path: polygon(37.5% 0%, 107% 36.5%, 100% 78%, 80% 100%, 36% 76%, 0% 27%);
          clip-path: polygon(37.5% 0%, 107% 36.5%, 100% 78%, 80% 100%, 36% 76%, 0% 27%);
}
#life .map__area__pin__item#park button {
  top: 41%;
  left: 43.5%;
}
#life .map__area__pin__item#stadium .pin-range {
  top: 18.4%;
  left: 49.2%;
  width: 20.4%;
  height: 28.5%;
  -webkit-clip-path: polygon(32% 1.3%, 57.4% 1.4%, 99.7% 32.5%, 99.7% 60.5%, 98.7% 61.5%, 98.8% 76.8%, 98.3% 77%, 98.3% 88%, 96.8% 89.1%, 96.8% 78.6%, 83.3% 88.6%, 83.3% 99.2%, 81.5% 100%, 74.5% 95%, 43.5% 99.1%, 29.5% 89.1%, 22.3% 94.5%, 21% 93.4%, 21% 82.8%, 7.5% 72.9%, 7.5% 83.5%, 6% 82.4%, 6% 71.6%, 3.8% 70%, 0.8% 60%, 1% 24%);
          clip-path: polygon(32% 1.3%, 57.4% 1.4%, 99.7% 32.5%, 99.7% 60.5%, 98.7% 61.5%, 98.8% 76.8%, 98.3% 77%, 98.3% 88%, 96.8% 89.1%, 96.8% 78.6%, 83.3% 88.6%, 83.3% 99.2%, 81.5% 100%, 74.5% 95%, 43.5% 99.1%, 29.5% 89.1%, 22.3% 94.5%, 21% 93.4%, 21% 82.8%, 7.5% 72.9%, 7.5% 83.5%, 6% 82.4%, 6% 71.6%, 3.8% 70%, 0.8% 60%, 1% 24%);
}
#life .map__area__pin__item#stadium button {
  top: 29.7%;
  left: 58.3%;
}
#life .map__area__pin__item#airport .pin-range {
  top: 3.4%;
  left: 69.2%;
  width: 18.2%;
  height: 35.5%;
  -webkit-clip-path: polygon(45.7% 23.8%, 70.3% 36.8%, 70.3% 18.4%, 79.2% 13.7%, 79.3% 12.9%, 84.2% 10.3%, 84.3% 1%, 85.6% 1%, 85.6% 10.2%, 90.6% 12.8%, 90.6% 13.3%, 99.6% 18%, 99.7% 20.5%, 98.8% 21%, 99.7% 21.7%, 99.7% 37.1%, 96.6% 38.7%, 96.6% 50.7%, 98.3% 51.7%, 98.3% 83.5%, 96.6% 84.5%, 96.6% 90.5%, 82.8% 98.1%, 76.9% 95%, 71.6% 97.7%, 67.6% 98.7%, 59% 94.5%, 48.4% 99.8%, 41% 98.8%, 36% 97.7%, 2.3% 80%, 2.3% 68%, 1% 67.2%, 1% 47%);
          clip-path: polygon(45.7% 23.8%, 70.3% 36.8%, 70.3% 18.4%, 79.2% 13.7%, 79.3% 12.9%, 84.2% 10.3%, 84.3% 1%, 85.6% 1%, 85.6% 10.2%, 90.6% 12.8%, 90.6% 13.3%, 99.6% 18%, 99.7% 20.5%, 98.8% 21%, 99.7% 21.7%, 99.7% 37.1%, 96.6% 38.7%, 96.6% 50.7%, 98.3% 51.7%, 98.3% 83.5%, 96.6% 84.5%, 96.6% 90.5%, 82.8% 98.1%, 76.9% 95%, 71.6% 97.7%, 67.6% 98.7%, 59% 94.5%, 48.4% 99.8%, 41% 98.8%, 36% 97.7%, 2.3% 80%, 2.3% 68%, 1% 67.2%, 1% 47%);
}
#life .map__area__pin__item#airport button {
  top: 15%;
  left: 77%;
}
#life .map__area__pin__item#apartment .pin-range {
  top: 36.9%;
  left: 77.3%;
  width: 6.1%;
  height: 15.5%;
  -webkit-clip-path: polygon(44% 0%, 100% 23%, 100% 87%, 67% 100%, 0% 74%, 0% 17%);
          clip-path: polygon(44% 0%, 100% 23%, 100% 87%, 67% 100%, 0% 74%, 0% 17%);
}
#life .map__area__pin__item#apartment button {
  top: 35%;
  left: 79.5%;
}
#life .map__area__pin__item#housing1 .pin-range {
  top: 52.4%;
  left: 48.1%;
  width: 6.4%;
  height: 10.9%;
  -webkit-clip-path: polygon(28% 0%, 54% 1%, 100% 30%, 100% 73%, 49% 100%, 2% 71%, 2% 16%);
          clip-path: polygon(28% 0%, 54% 1%, 100% 30%, 100% 73%, 49% 100%, 2% 71%, 2% 16%);
}
#life .map__area__pin__item#housing1 button {
  top: 48%;
  left: 49%;
}
#life .map__area__pin__item#housing2 .pin-range {
  top: 51.1%;
  left: 67.1%;
  width: 5.5%;
  height: 10.6%;
  -webkit-clip-path: polygon(17% 0%, 30% 2%, 100% 39%, 100% 81%, 73% 95%, 64% 90%, 44% 100%, 7.5% 81%, 15% 77%, 15% 64%, 0% 56%, 0% 17%);
          clip-path: polygon(17% 0%, 30% 2%, 100% 39%, 100% 81%, 73% 95%, 64% 90%, 44% 100%, 7.5% 81%, 15% 77%, 15% 64%, 0% 56%, 0% 17%);
}
#life .map__area__pin__item#housing2 button {
  top: 49%;
  left: 68.5%;
}
#life .map__area__pin__item#housing3 .pin-range {
  top: 58.7%;
  left: 75%;
  width: 7.5%;
  height: 9.9%;
  -webkit-clip-path: polygon(72.5% 0%, 100% 22%, 100% 75%, 64% 100%, 39% 82%, 16% 99%, 2% 88%, 0% 58%, 0% 58%);
          clip-path: polygon(72.5% 0%, 100% 22%, 100% 75%, 64% 100%, 39% 82%, 16% 99%, 2% 88%, 0% 58%, 0% 58%);
}
#life .map__area__pin__item#housing3 button {
  top: 56.5%;
  left: 79%;
}
#life .map__area__pin__item#housing4 .pin-range {
  top: 77.9%;
  left: 30.5%;
  width: 6.3%;
  height: 11.7%;
  -webkit-clip-path: polygon(72% 1%, 93% 29%, 93% 70%, 100% 74%, 100% 81%, 65% 100%, 46% 90%, 40% 93.2%, 30.5% 87.5%, 18.5% 94.5%, 0% 84.5%, 0% 35%, 53% 6%);
          clip-path: polygon(72% 1%, 93% 29%, 93% 70%, 100% 74%, 100% 81%, 65% 100%, 46% 90%, 40% 93.2%, 30.5% 87.5%, 18.5% 94.5%, 0% 84.5%, 0% 35%, 53% 6%);
}
#life .map__area__pin__item#housing4 button {
  top: 75.5%;
  left: 32.5%;
}
#life .map__area__pin__item#paddy .pin-range {
  top: 48.7%;
  left: 70.5%;
  width: 11.6%;
  height: 12.6%;
  -webkit-clip-path: polygon(35.4% 0%, 100% 62%, 59% 100%, 18.5% 61%, 18.5% 51%, 0% 34%);
          clip-path: polygon(35.4% 0%, 100% 62%, 59% 100%, 18.5% 61%, 18.5% 51%, 0% 34%);
}
#life .map__area__pin__item#paddy button {
  top: 50%;
  left: 75.2%;
}
#life .map__area__pin__item#plumbing .pin-range {
  top: 60.5%;
  left: 65.1%;
  width: 5.8%;
  height: 7.5%;
  -webkit-clip-path: polygon(53% 0%, 64% 9%, 31% 36%, 100% 91%, 89% 100%, 0% 29%, 11% 20%, 19% 27%);
          clip-path: polygon(53% 0%, 64% 9%, 31% 36%, 100% 91%, 89% 100%, 0% 29%, 11% 20%, 19% 27%);
}
#life .map__area__pin__item#plumbing button {
  top: 58%;
  left: 65.2%;
}
#life .map__area__pin__item#car1 .pin-range {
  top: 69.2%;
  left: 26.75%;
  width: 3.25%;
  height: 5.6%;
  -webkit-clip-path: polygon(24% 1%, 88% 41%, 88% 54%, 100% 63%, 100% 90%, 83% 100%, 0% 48.5%, 0% 15%);
          clip-path: polygon(24% 1%, 88% 41%, 88% 54%, 100% 63%, 100% 90%, 83% 100%, 0% 48.5%, 0% 15%);
}
#life .map__area__pin__item#car1 button {
  top: 65.5%;
  left: 27%;
}
#life .map__area__pin__item#car2 .pin-range {
  top: 30.85%;
  left: 45.67%;
  width: 2.3%;
  height: 2.9%;
  -webkit-clip-path: polygon(71% 0%, 100% 25%, 100% 54%, 89% 65%, 45% 97%, 27% 100%, 0% 78.5%, 0% 55%, 12% 43%, 16% 23%, 45% 0%);
          clip-path: polygon(71% 0%, 100% 25%, 100% 54%, 89% 65%, 45% 97%, 27% 100%, 0% 78.5%, 0% 55%, 12% 43%, 16% 23%, 45% 0%);
}
#life .map__area__pin__item#car2 button {
  top: 26.2%;
  left: 45.9%;
}
#life .map__area__pin__item#highway .pin-range {
  top: 51.5%;
  left: 51%;
  width: 43.9%;
  height: 48.5%;
  -webkit-clip-path: polygon(88.8% 0%, 100% 10.4%, 92.2% 40%, 28% 100%, 0% 100%, 81% 26%, 81% 7%);
          clip-path: polygon(88.8% 0%, 100% 10.4%, 92.2% 40%, 28% 100%, 0% 100%, 81% 26%, 81% 7%);
}
#life .map__area__pin__item#highway button {
  top: 73.5%;
  left: 77%;
}

.itemModal {
  position: fixed;
  inset: 0;
  padding-top: max(8rem, 60px);
  -webkit-transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1000;
}
.itemModal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  z-index: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.itemModal__box {
  --modal-translate: translateY(-50%);
  position: absolute;
  top: 50%;
  right: 10%;
  left: auto;
  max-height: 80%;
  min-height: 70rem;
  padding: max(5rem, 30px) max(5rem, 30px);
  padding-bottom: max(8rem, 80px);
  background: #fff;
  border-radius: max(1.5rem, 15px);
  -webkit-transform: var(--modal-translate) scale(0.96);
          transform: var(--modal-translate) scale(0.96);
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  z-index: 1;
}
@media screen and (max-width: 550px) {
  .itemModal__box {
    --modal-translate: translate(50%, -50%);
    width: 90%;
    right: 50%;
    -webkit-transform: var(--modal-translate) scale(0.96);
            transform: var(--modal-translate) scale(0.96);
  }
}
.itemModal__box__content {
  width: max(55rem, 440px);
  overflow: hidden;
}
@media screen and (max-width: 550px) {
  .itemModal__box__content {
    width: 100%;
  }
}
.itemModal__box__content .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: max(1rem, 10px);
}
.itemModal__box__content .title__icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: max(2.8rem, 25px);
}
.itemModal__box__content .title__text {
  font-size: max(2.9rem, 24px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
}
.itemModal__box__content .imageBox {
  position: relative;
  width: 100%;
  aspect-ratio: 80/49;
  margin-top: max(2rem, 20px);
  margin-bottom: max(4rem, 30px);
  background: #cae2ce;
  border-radius: 3px;
  overflow: hidden;
  z-index: 0;
}
.itemModal__box__content .imageBox::before {
  content: "";
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-box-shadow: inset 0 0 16px #c9ebce;
          box-shadow: inset 0 0 16px #c9ebce;
  z-index: 10;
  mix-blend-mode: multiply;
}
.itemModal__box__content .textBox h4 {
  font-size: max(2rem, 16px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  margin-bottom: max(1rem, 10px);
}
.itemModal__box__content .textBox p {
  font-size: max(1.4rem, 13px);
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05em;
}
.itemModal__slider {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.itemModal__slides {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  border-radius: max(1rem, 10px);
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}
.itemModal__slide {
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.itemModal__slide.is-active {
  opacity: 1;
}
.itemModal__sliderControls {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  top: 50%;
  left: 0;
  gap: max(2rem, 16px);
  width: 100%;
  height: 100%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 10;
}
.itemModal__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: max(4.5rem, 30px);
  height: 40%;
  background: #183b5a;
  -webkit-transition: background 0.5s ease, border-color 0.5s ease, -webkit-transform 0.5s ease;
  transition: background 0.5s ease, border-color 0.5s ease, -webkit-transform 0.5s ease;
  transition: background 0.5s ease, transform 0.5s ease, border-color 0.5s ease;
  transition: background 0.5s ease, transform 0.5s ease, border-color 0.5s ease, -webkit-transform 0.5s ease;
}
.itemModal__nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
@media (hover: hover) and (pointer: fine) {
  .itemModal__nav:not(:disabled):hover {
    background: rgba(24, 59, 90, 0.5);
  }
}
.itemModal__nav--prev {
  left: 0;
  border-radius: max(1.5rem, 10px) 0 0 max(1.5rem, 10px);
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
@media screen and (max-width: 550px) {
  .itemModal__nav--prev {
    border-radius: 5px;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.itemModal__nav--next {
  right: 0;
  border-radius: 0 max(1.5rem, 10px) max(1.5rem, 10px) 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
@media screen and (max-width: 550px) {
  .itemModal__nav--next {
    border-radius: 5px;
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
  }
}
.itemModal__navIcon {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.itemModal__navIcon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-top: max(0.7rem, 6px) solid transparent;
  border-bottom: max(0.7rem, 6px) solid transparent;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.itemModal__navIcon--prev::before {
  border-right: max(1rem, 9px) solid #fff;
}
.itemModal__navIcon--next::before {
  border-left: max(1rem, 9px) solid #fff;
}
.itemModal__sliderDots {
  position: absolute;
  bottom: max(1.5rem, 15px);
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: max(1rem, 10px);
  z-index: 10;
}
.itemModal__sliderDot {
  width: max(1rem, 10px);
  height: max(1rem, 10px);
  border-radius: 50%;
  background: rgba(24, 59, 90, 0.3);
  border: none;
  cursor: pointer;
  -webkit-transition: background 0.5s ease, -webkit-transform 0.5s ease;
  transition: background 0.5s ease, -webkit-transform 0.5s ease;
  transition: background 0.5s ease, transform 0.5s ease;
  transition: background 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
}
.itemModal__sliderDot.is-active {
  background: #183b5a;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
@media (hover: hover) and (pointer: fine) {
  .itemModal__sliderDot:hover:not(.is-active) {
    background: rgba(24, 59, 90, 0.5);
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
.itemModal__sliderDot:active {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
.itemModal--align-right .itemModal__box {
  right: 10%;
  left: auto;
  --modal-translate: translateY(-50%);
}
.itemModal--align-left .itemModal__box {
  left: 10%;
  right: auto;
  --modal-translate: translateY(-50%);
}
.itemModal--align-center .itemModal__box {
  left: 50%;
  right: auto;
  --modal-translate: translate(-50%, -50%);
}
@media screen and (max-width: 550px) {
  .itemModal--align-right .itemModal__box {
    right: 50%;
    left: auto;
    --modal-translate: translate(50%, -50%);
  }
  .itemModal--align-left .itemModal__box {
    right: auto;
    left: 50%;
    --modal-translate: translate(-50%, -50%);
  }
  .itemModal--align-center .itemModal__box {
    right: auto;
    left: 50%;
    --modal-translate: translate(-50%, -50%);
  }
}
.itemModal__close {
  position: absolute;
  top: 0;
  right: 0;
  -webkit-transform: translate(50%, -50%) rotate(45deg);
          transform: translate(50%, -50%) rotate(45deg);
  width: max(7.5rem, 60px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 4px solid #fff;
  background: #dbdbdb;
}
@media screen and (max-width: 550px) {
  .itemModal__close {
    width: 45px;
  }
}
.itemModal__close__line {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #183b5a;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  pointer-events: none;
}
.itemModal__close__line--vertical {
  width: 3px;
  height: 50%;
}
.itemModal__close__line--horizontal {
  width: 50%;
  height: 3px;
}
.itemModal--active {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.itemModal--active .itemModal__overlay {
  opacity: 1;
  pointer-events: auto;
}
.itemModal--active .itemModal__box {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  -webkit-transform: var(--modal-translate) scale(1);
          transform: var(--modal-translate) scale(1);
}
.itemModal--active .itemModal__slide.is-active {
  pointer-events: auto;
}
.itemModal--hover {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
.itemModal--hover .itemModal__overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.itemModal--hover .itemModal__box {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  -webkit-transform: var(--modal-translate) scale(1);
          transform: var(--modal-translate) scale(1);
}/*# sourceMappingURL=life.css.map */