.casestory_v1K9p {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  margin: var(--margin_tb) 0;
  padding-top: 4rem;
  padding-bottom: 7rem;
  padding-left: var(--padding_lr);
  padding-right: var(--padding_lr);
  background: var(--bg_color, #f8f8f8);
}

.casestory_v1K9p * {
  box-sizing: border-box;
}

.casestory_v1K9p__inner {
  position: relative;
  width: 100%;
  max-width: var(--custom-content-max-width);
  min-height: 69.2rem;
  margin-left: auto;
  margin-right: auto;
}

.casestory_v1K9p__title-wrap {
  height: 7.2rem;
  text-align: center;
}

.casestory_v1K9p__title {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0 0 1.6rem;
  font-size: 4rem;
  font-weight: 400;
  line-height: 1.4;
  color: #333;
  letter-spacing: 0;
}

.casestory_v1K9p__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 8rem;
  height: .2rem;
  background: var(--theme_color);
  transform: translateX(-50%);
}

.casestory_v1K9p__stage {
  position: relative;
  height: 49rem;
  margin-top: 3rem;
  overflow: visible;
  perspective: 400rem;
}

.casestory_v1K9p__mask {
  position: absolute;
  left: 50%;
  top: 0;
  width: 40rem;
  height: 49rem;
  background: #fff;
  transform: translateX(-50%);
  pointer-events: none;
}

.casestory_v1K9p__rail {
  position: relative;
  height: 49rem;
  display: flex;
  align-items: flex-start;
  list-style: none;
  padding: 0;
  margin: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.casestory_v1K9p__item {
  position: relative;
  flex: 0 0 40rem;
  width: 40rem;
  height: 46.2rem;
  overflow: hidden;
  transform-origin: center center;
  backface-visibility: hidden;
  z-index: 1;
}

.casestory_v1K9p__item.swiper-slide-active {
  z-index: 3 !important;
  transform: translate3d(0, 0, 0) !important;
}

.casestory_v1K9p__card-link,
.casestory_v1K9p__card-static {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
  border-radius: 1rem;
  overflow: hidden;
  transition: transform .4s ease, box-shadow .4s ease;
}

.casestory_v1K9p__pic {
  position: relative;
  width: 40rem;
  height: 25rem;
  aspect-ratio: var(--image_ratio, 8 / 5);
  overflow: hidden;
  background: #ddd;
  border-radius: min(var(--image_shape, 0%), 1rem) min(var(--image_shape, 0%), 1rem) 0 0;
}

.casestory_v1K9p__item:not(.swiper-slide-active) .casestory_v1K9p__pic {
  border-radius: min(var(--image_shape, 0%), 1rem);
}

.casestory_v1K9p__image,
.casestory_v1K9p .custom_image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--image_fit, cover);
}

.casestory_v1K9p__text {
  width: 40rem;
  min-height: 21.2rem;
  padding: 4rem;
  background: #fff;
  color: #333;
}

.casestory_v1K9p__text h3,
.casestory_v1K9p__detail h3 {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.583;
  color: #333;
  letter-spacing: 0;
}

.casestory_v1K9p__text p,
.casestory_v1K9p__detail p {
  margin: 1.5rem 0 0;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.95;
  color: #666;
  overflow-wrap: anywhere;
}

.casestory_v1K9p__more {
  display: inline-block;
  position: relative;
  margin-top: 2rem;
  padding-right: 3.4rem;
  font-size: 1.6rem;
  line-height: 1.625;
  color: var(--theme_color);
  white-space: nowrap;
  text-decoration: none;
  transition: color .2s ease;
}

.casestory_v1K9p__more::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 2.5rem;
  height: .1rem;
  background: currentColor;
  transform: translateY(-50%);
  transition: right .24s ease, left .24s ease;
}

.casestory_v1K9p__more::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: .7rem;
  height: .7rem;
  border-top: .1rem solid currentColor;
  border-right: .1rem solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  transition: right .24s ease, left .24s ease;
}

.casestory_v1K9p__more:hover {
  color: #d84b4b;
}

.casestory_v1K9p .casestory_v1K9p__more:hover {
  color: #d84b4b;
}

.casestory_v1K9p__more:hover::after {
  right: -1rem;
}

.casestory_v1K9p__more:hover::before {
  right: -1rem;
}

.casestory_v1K9p__item .casestory_v1K9p__text {
  display: none;
}

.casestory_v1K9p__detail {
  position: absolute;
  left: 50%;
  top: 25rem;
  z-index: 4;
  width: 40rem;
  min-height: 21.2rem;
  padding: 4rem;
  color: #333;
  opacity: 1;
  transform: translateX(-50%);
  transition: opacity .22s ease, transform .22s ease;
}

.casestory_v1K9p__detail.is-changing {
  opacity: 0;
  transform: translateX(-50%);
}

.casestory_v1K9p__arrow {
  position: absolute;
  top: 30rem;
  z-index: 5;
  width: 5.8rem;
  height: 4.4rem;
  border: .1rem solid color-mix(in srgb, var(--theme_color) 76%, #fff);
  border-radius: 2.2rem;
  background: #fff;
  color: var(--theme_color);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

/* .casestory_v1K9p__arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.7rem;
  height: .1rem;
  background: currentColor;
  transform: translate(-50%, -50%);
} */

.casestory_v1K9p__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  width: .8rem;
  height: .8rem;
  border-top: .1rem solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.casestory_v1K9p__arrow--prev {
  left: calc(50% - 27rem);
}

.casestory_v1K9p__arrow--prev::before {
  left: 2.4rem;
  border-left: .1rem solid currentColor;
  border-right: 0;
  transform: translateY(-50%) rotate(-45deg);
}

.casestory_v1K9p__arrow--next {
  right: calc(50% - 27rem);
}

.casestory_v1K9p__arrow--next::before {
  right: 2.4rem;
  border-right: .1rem solid currentColor;
}

.casestory_v1K9p__arrow:hover {
  color: #fff;
  background: var(--theme_color);
  border-color: var(--theme_color);
}

.casestory_v1K9p__footer {
  position: relative;
  z-index: 6;
  margin-top: 2.4rem;
  text-align: center;
}

.casestory_v1K9p__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16rem;
  height: 4.8rem;
  padding: 0 3rem;
  border: .1rem solid var(--theme_color);
  border-radius: 2.4rem;
  color: var(--theme_color);
  background: #fff;
  font-size: 1.8rem;
  line-height: 1;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.casestory_v1K9p__button:hover {
  color: #fff;
  background: var(--theme_color);
}

.casestory_v1K9p__empty {
  min-height: 24rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 1.6rem;
}

.rtlAr .casestory_v1K9p__more {
  padding-right: 0;
  padding-left: 3.4rem;
}

.rtlAr .casestory_v1K9p__more::after {
  right: auto;
  left: 0;
}

.rtlAr .casestory_v1K9p__more::before {
  right: auto;
  left: 0;
  border-right: 0;
  border-left: .1rem solid currentColor;
  transform: translateY(-50%) rotate(-45deg);
}

.rtlAr .casestory_v1K9p__more:hover::after {
  left: -1rem;
}

.rtlAr .casestory_v1K9p__more:hover::before {
  left: -1rem;
}

.rtlAr .casestory_v1K9p__arrow--prev {
  left: auto;
  right: calc(50% - 27rem);
}

.rtlAr .casestory_v1K9p__arrow--next {
  right: auto;
  left: calc(50% - 27rem);
}

@media (max-width: 1024px) {
  .casestory_v1K9p {
    padding-top: 4.8rem;
    padding-bottom: 5.6rem;
  }

  .casestory_v1K9p__inner {
    min-height: 60rem;
  }

  .casestory_v1K9p__title {
    font-size: 3.4rem;
    line-height: 1.412;
  }

  .casestory_v1K9p__stage {
    height: 43rem;
  }

  .casestory_v1K9p__mask,
  .casestory_v1K9p__item,
  .casestory_v1K9p__pic,
  .casestory_v1K9p__text,
  .casestory_v1K9p__detail {
    width: 34rem;
  }

  .casestory_v1K9p__item {
    flex-basis: 34rem;
    height: 41.3rem;
  }

  .casestory_v1K9p__pic {
    height: 21.3rem;
  }

  .casestory_v1K9p__text,
  .casestory_v1K9p__detail {
    min-height: 20rem;
    padding: 3.2rem;
  }

  .casestory_v1K9p__detail {
    top: 21.3rem;
  }

  .casestory_v1K9p__arrow {
    top: 25.5rem;
  }

  .casestory_v1K9p__arrow--prev {
    left: calc(50% - 23.2rem);
  }

  .casestory_v1K9p__arrow--next {
    right: calc(50% - 23.2rem);
  }

  .rtlAr .casestory_v1K9p__arrow--prev {
    right: calc(50% - 23.2rem);
  }

  .rtlAr .casestory_v1K9p__arrow--next {
    left: calc(50% - 23.2rem);
  }
}

@media (max-width: 640px) {
  .casestory_v1K9p {
    padding-top: 3.6rem;
    padding-bottom: 4.4rem;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
  }

  .casestory_v1K9p__inner {
    min-height: 54.8rem;
  }

  .casestory_v1K9p__title-wrap {
    height: 5.8rem;
  }

  .casestory_v1K9p__title {
    padding-bottom: .4rem;
    font-size: 2.4rem;
    line-height: 1.95;
  }

  .casestory_v1K9p__title::after {
    width: 6.4rem;
  }

  .casestory_v1K9p__stage {
    height: 40.2rem;
    margin-top: 3rem;
  }

  .casestory_v1K9p__mask,
  .casestory_v1K9p__item,
  .casestory_v1K9p__pic,
  .casestory_v1K9p__text,
  .casestory_v1K9p__detail {
    width: 25.6rem;
  }

  .casestory_v1K9p__item {
    flex-basis: 25.6rem;
    height: 31.8rem;
  }

  .casestory_v1K9p__pic {
    height: 16rem;
  }

  .casestory_v1K9p__text,
  .casestory_v1K9p__detail {
    min-height: 15.8rem;
    padding: 2.5rem;
  }

  .casestory_v1K9p__text h3,
  .casestory_v1K9p__detail h3 {
    font-size: 1.8rem;
    line-height: 1.583;
  }

  .casestory_v1K9p__text p,
  .casestory_v1K9p__detail p {
    margin-top: 1rem;
  }

  .casestory_v1K9p__detail {
    top: 16rem;
  }

  .casestory_v1K9p__more {
    margin-top: 1rem;
    font-size: 1.4rem;
    line-height: 1.714;
  }

  .casestory_v1K9p__mask {
    display: block;
    height: 40.1rem;
    border-radius: 1rem;
  }

  .casestory_v1K9p__arrow {
    top: 18rem;
    width: 4rem;
    height: 3rem;
    padding: 0;
    border-radius: 1.5rem;
    background: transparent;
  }

  .casestory_v1K9p__arrow::after {
    width: 1.1rem;
    top: 1.5rem;
  }

  .casestory_v1K9p__arrow::before {
    width: .7rem;
    height: .7rem;
    top: 1.5rem;
  }

  .casestory_v1K9p__arrow--prev {
    left: -.3rem;
  }

  .casestory_v1K9p__arrow--next {
    right: -.3rem;
  }

  .casestory_v1K9p__arrow--prev::before {
    left: 1.6rem;
  }

  .casestory_v1K9p__arrow--next::before {
    right: 1.6rem;
  }

  .rtlAr .casestory_v1K9p__arrow--prev {
    right: -.3rem;
  }

  .rtlAr .casestory_v1K9p__arrow--next {
    left: -.3rem;
  }

  .casestory_v1K9p__footer {
    height: 4.1rem;
    margin-top: 3rem;
    padding-top: 0;
  }

  .casestory_v1K9p__button {
    height: 4.1rem;
    min-width: 13.4rem;
    padding: 0 2.3rem;
    border-width: .2rem;
    border-radius: 5rem;
    background: transparent;
    font-size: 1.4rem;
    line-height: 1.5;
  }
}