:root {
  --viewport-width: 100vw;
  --b: calc(var(--viewport-width) / 160);
}

@media screen and (max-width: 550px) {
  :root {
    --viewport-width: max(100vw, 550px);
    --b: calc(var(--viewport-width) / 55);
  }
}
.footer {
  border-top: 1px solid #007440;
}

.info {
  padding-top: 11rem;
}
@media screen and (max-width: 550px) {
  .info {
    padding-top: 80px;
  }
}
.info__title {
  margin-bottom: max(3.5rem, 30px);
}
.info__detail .slider__mainImages {
  width: max(73rem, 500px);
  margin: auto;
}
@media screen and (max-width: 550px) {
  .info__detail .slider__mainImages {
    width: 90%;
  }
}
.info__detail .slider__mainImages .imageBox {
  position: relative;
  aspect-ratio: 7/5;
  margin-bottom: 15px;
}
.info__detail .slider__mainImages .imageBox::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  background-color: #fff;
  transition: opacity 0.3s ease;
  z-index: 1;
}
.info__detail .slider__mainImages .imageBox.fade::before {
  opacity: 1;
}
.info__detail .slider__mainImages .imageBox img {
  width: 100%;
  transition: opacity 0.3s ease;
}
.info__detail .slider__mainImages p {
  line-height: 1.5;
}
.info__detail .slider__subImages {
  gap: 20px;
  display: flex;
  margin-top: 5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.info__detail .slider__subImages::-webkit-scrollbar {
  display: none;
}
@media screen and (max-width: 550px) {
  .info__detail .slider__subImages {
    gap: 15px;
  }
}
.info__detail .slider__subImages img {
  flex: 1;
  display: block;
  min-width: max(30rem, 250px);
  aspect-ratio: 7/5;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  transition: filter 0.5s cubic-bezier(0.03, 0.29, 0.24, 0.72);
  cursor: pointer;
}
@media screen and (max-width: 550px) {
  .info__detail .slider__subImages img {
    min-width: 55%;
    scroll-snap-align: center;
  }
}
.info__detail .slider__subImages img.active-subImage {
  filter: brightness(0.5);
  pointer-events: none;
}
.info__detail .slider__subImages.dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.info__detail .slider__subImages.dragging > * {
  cursor: -webkit-grabbing;
  cursor: grabbing;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.info__detail .slider__dots {
  gap: 15px;
  display: flex;
  justify-content: center;
  margin-top: max(5rem, 50px);
}
@media screen and (max-width: 550px) {
  .info__detail .slider__dots {
    margin-top: 50px;
  }
}
.info__detail .slider__dots .dot {
  width: max(1rem, 10px);
  aspect-ratio: 1/1;
  background: #def0ea;
  cursor: pointer;
}
@media screen and (max-width: 550px) {
  .info__detail .slider__dots .dot {
    width: 10px;
  }
}
.info__detail .slider__dots .dot.active {
  background: #007440;
}/*# sourceMappingURL=shop.css.map */