@charset "utf-8";

:root {
  --color: #000;
}

.fca_cat-hero {
  overflow: visible;
}

.sr_page-shopping-result__free {
  overflow: visible;
}

.kraso2602_kr {
  box-sizing: content-box;
  font-feature-settings: "palt";
  font-variant-ligatures: no-common-ligatures;
  line-height: 1;
  margin-inline: auto;
  max-width: 690px;
  overflow: hidden;
  padding-bottom: 100px;
  padding-bottom: 14.492753623%;
  position: relative;
}

.kraso2602_kr * {
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
}

.kraso2602_kr a {
  text-decoration: none;
}

.kraso2602_kr img {
  height: auto;
  width: 100%;
}

/* kraso2602-header_kr */
.kraso2602-header__items_kr {
  margin-top: 5.217%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 88.116%;
}

.kraso2602-title_kr {
  position: absolute;
  top: 4.488%;
  right: 5.592%;
  width: 56.25%;
}

/* kraso2602-contents_kr */
.kraso2602-body_kr {
  align-items: center;
  justify-content: center;
  display: flex;
  min-height: 100vh;
}

.kraso2602-contents__frame_kr {
  aspect-ratio: 690 / 874;
  position: relative;
  max-height: calc(100vh - 53px);
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}

.kraso2602-contents__frame_kr::before,
.kraso2602-contents__frame_kr::after {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 9;
}

.kraso2602-contents__frame_kr::before {
  background-image: url(../images/subtitle.webp);
  top: 0.915%;
  left: 0;
  padding-top: 27.608%;
  width: 44.782%;
}

.kraso2602-contents__frame_kr::after {
  background-image: url(../images/deco_01.svg);
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 16.811%;
  width: 94.782%;
}

.kraso2602-contents__wrap_kr {
  aspect-ratio: 690 / 874;
  max-height: calc(100vh - 53px);
  overflow: hidden;
  position: relative;
}

.kraso2602-contents_kr {
  -ms-scroll-snap-type: none !important;
  scroll-snap-type: none !important;
  -webkit-overflow-scrolling: auto;
  touch-action: pan-y;
  -ms-scroll-chaining: chained;
  overscroll-behavior: auto;
}

.kraso2602-contents_kr {
  position: relative;
}

.kraso2602-content_kr {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.kraso2602-content__inner_kr {
  aspect-ratio: 690 / 874;
  position: relative;
  max-height: calc(100vh - 53px);
  max-width: 690px;
}

.kraso2602-content__inner_kr::before {
  -webkit-animation: popping 1.5s infinite ease-out;
  animation: popping 1.5s infinite ease-out;
  background-image: url(../images/scroll.svg);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  position: absolute;
  bottom: 2%;
  left: 1%;
  height: auto;
  padding-top: 42.608%;
  width: 3.188%;
  z-index: 9;
}

.kraso2602-content__head_kr {
  position: relative;
}

.kraso2602-content__title__wrap_kr,
.kraso2602-content__subtitle_kr {
  box-sizing: content-box;
  position: absolute;
}

.kraso2602-content__title_kr {
  position: relative;
}

.kraso2602-content__title_kr span {
  display: flex;
}

.kraso2602_kr .kraso2602-content__subtitle_kr {
  margin-top: 0;
}

.kraso2602-content__body_kr {
  position: relative;
  z-index: 0;
}

.kraso2602-content__body_kr::before {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  content: "";
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s ease 1.3s;
  z-index: 3;
}

.is-active .kraso2602-content__body_kr::before {
  opacity: 1;
}

.kraso2602_kr .kraso2602-content__comment_kr {
  margin-top: 0;
  position: absolute;
}

.kraso2602_kr .kraso2602-content__name_kr {
  margin-top: 0;
  width: 100%;
}

.plus_kr {
  aspect-ratio: 3 / 2;
  max-width: 72px;
  transition: all 0.2s ease;
  position: relative;
  width: 10.435%;
  z-index: 2;
}

.open-modal:hover .plus_kr {
  transform: scale(1.2);
}

.kraso2602-content__caption_kr:hover .plus_kr {
  transform: scale(1.2);
}

/* kraso2602__01_kr */
.kraso2602__01_kr .kraso2602-content__body_kr {
  padding-top: 21.449%;
}

.kraso2602__01_kr .title__01_kr {
  top: 6.064%;
  right: 16.232%;
  width: 33.623%;
}

.kraso2602__01_kr .kraso2602-content__body_kr::before {
  background-image: url(../images/cap_01.svg);
  top: 51.851%;
  right: 7.246%;
  padding-top: 34.347%;
  width: 15.217%;
}

.kraso2602__01_kr .kraso2602-images_kr {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 90.579%;
}

.kraso2602__01_kr .kraso2602__image__02_kr {
  margin-top: -7.36%;
  margin-left: 53.76%;
  width: 39.2%;
}

.kraso2602__01_kr .caption__01_kr {
  padding-top: 2.898%;
  position: absolute;
  bottom: 0;
  left: 30%;
  width: 19.13%;
}

.kraso2602__01_kr .plus__01_kr {
  position: absolute;
  top: 0;
  left: 0;
  width: 54.545%;
}

/* kraso2602__02_kr */
.kraso2602__02_kr .title__02_kr {
  top: 3.2%;
  right: 6.087%;
  width: 34.057%;
}

.kraso2602__02_kr .kraso2602_body__02_kr {
  margin-left: 23.768%;
  padding-top: 17.971%;
  width: 70.144%;
}

.kraso2602__02_kr .kraso2602_body__02_kr::before {
  content: none;
}

.kraso2602__02_kr .caption__02_kr {
  position: absolute;
  bottom: 5.194%;
  right: 4.132%;
  width: 26.239%;
}

.kraso2602__02_kr .plus__02_kr {
  margin-bottom: 3.906%;
  width: 56.692%;
}

.kraso2602__02_kr .kraso2602_body__03_kr {
  padding-bottom: 9.275%;
  position: absolute;
  bottom: 0;
  left: 1.014%;
  width: 42.318%;
}

.kraso2602__02_kr .kraso2602_body__03_kr::before {
  background-image: url(../images/cap_02.svg);
  top: 0;
  left: 16.494%;
  transform: translateY(-100%);
  padding-top: 12.371%;
  width: 50.515%;
}

.kraso2602__02_kr .caption__03_kr {
  position: absolute;
  bottom: 8.837%;
  right: -49.828%;
  width: 60.481%;
}

.kraso2602__02_kr .plus__03_kr {
  margin-bottom: 3.977%;
  width: 56.692%;
}

/* kraso2602__03_kr */
.kraso2602__03_kr .title__03_kr {
  top: 20.679%;
  left: 4.347%;
  width: 40.579%;
  z-index: 3;
}

.kraso2602__03_kr .kraso2602_body__04_kr {
  margin-left: auto;
  margin-right: 9%;
  padding-top: 6.086%;
  width: 48.405%;
  z-index: 2;
}

.kraso2602__03_kr .kraso2602_body__04_kr::before {
  content: none;
}

.kraso2602__03_kr .caption__04_kr {
  padding-top: 5.988%;
  position: absolute;
  bottom: -32.643%;
  right: 20.564%;
  width: 38.922%;
}

.kraso2602__03_kr .plus__04_kr {
  position: absolute;
  top: 0;
  left: 0;
  width: 55.384%;
}

.kraso2602__03_kr .kraso2602_body__05_kr {
  display: flex;
  justify-content: space-between;
  margin-top: -18.841%;
  margin-left: 10.434%;
  padding-bottom: 5.507%;
  width: 71.884%;
}

.kraso2602__03_kr .kraso2602_body__05_kr::before {
  background-image: url(../images/cap_03.svg);
  bottom: 0;
  left: 8.064%;
  padding-top: 14.516%;
  width: 51.313%;
}

.kraso2602__03_kr .kraso2602_body__05_kr .kraso2602-images_kr {
  width: 66.935%;
}

.kraso2602__03_kr .caption__05_kr {
  margin-top: 60.08%;
  padding-top: 4.04%;
  position: relative;
  width: 26.613%;
}

.kraso2602__03_kr .plus__05_kr {
  position: absolute;
  top: 0;
  left: 0;
  width: 55.384%;
}

/* kraso2602__04_kr */
.kraso2602__04_kr .title__04_kr {
  top: 3.089%;
  right: 9.855%;
  width: 42.028%;
  z-index: 3;
}

.kraso2602__04_kr .kraso2602_body__06_kr {
  margin-left: auto;
  margin-right: auto;
  padding-top: 12.753%;
  width: 77.101%;
}

.kraso2602__04_kr .kraso2602_body__06_kr::before {
  background-image: url(../images/cap_04.svg);
  top: 36.956%;
  right: 0;
  padding-top: 52.819%;
  width: 12.218%;
}

.kraso2602__04_kr .caption__06_kr {
  position: absolute;
  top: 30.13%;
  left: 7.142%;
  width: 24.436%;
}

.kraso2602__04_kr .plus__06_kr {
  margin-bottom: 7.692%;
  width: 55.384%;
}

.kraso2602__04_kr .caption__07_kr {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 24.06%;
  padding-bottom: 11.884%;
  position: absolute;
  width: 77.101%;
}

.kraso2602__04_kr .caption__07_kr .kraso2602-content__caption__inner_kr {
  margin-left: auto;
  margin-right: 6.203%;
  padding-top: 2.631%;
  position: relative;
  width: 24.436%;
}

.kraso2602__04_kr .plus__07_kr {
  position: absolute;
  top: 0;
  left: 0;
  width: 55.384%;
}

/* kraso2602__05_kr */
.kraso2602__05_kr .title__05_kr {
  top: 0;
  right: 15.072%;
  width: 36.231%;
}

.kraso2602__05_kr .kraso2602_body__07_kr {
  padding-top: 23.768%;
}

.kraso2602__05_kr .kraso2602_body__07_kr::before {
  background-image: url(../images/cap_05.svg);
  top: 38.834%;
  left: 10.144%;
  padding-top: 6.956%;
  width: 18.84%;
}

.kraso2602__05_kr .kraso2602_body__07_kr .kraso2602-images_kr {
  margin-left: auto;
  position: relative;
  width: 90.145%;
}

.kraso2602__05_kr .kraso2602__image__08_kr {
  margin-left: auto;
  width: 92.604%;
}

.kraso2602__05_kr .kraso2602__image__09_kr {
  margin-top: -15.755%;
  width: 41.8%;
}

.kraso2602__05_kr .caption__08_kr {
  display: flex;
  position: absolute;
  bottom: 5.454%;
  right: 22.173%;
  width: 29.71%;
}

.kraso2602__05_kr .plus__08_kr {
  margin-top: 13.592%;
  width: 34.951%;
}

.kraso2602__05_kr .caption__08_kr .kraso2602-content__name_kr {
  width: 62.135%;
}

/* kraso2602__06_kr */
.kraso2602__06_kr .kraso2602-content__inner_kr::before,
.kraso2602__06_kr .kraso2602-content__inner_kr::after {
  display: none;
}

.kraso2602__06_kr .kraso2602_body__08_kr {
  padding-top: 8.695%;
}

.kraso2602__06_kr .kraso2602_body__08_kr::before {
  background-image: url(../images/cap_06.svg);
  top: 27.709%;
  left: 23.478%;
  padding-top: 11.159%;
  width: 17.391%;
}

.kraso2602__06_kr .kraso2602_body__08_kr .kraso2602-images_kr {
  margin-left: 6.521%;
  position: relative;
  width: 84.637%;
}

.kraso2602__06_kr .kraso2602__image__10_kr {
  margin-left: auto;
  width: 72.773%;
}

.kraso2602__06_kr .kraso2602__image__11_kr {
  margin-top: -56.849%;
  width: 30.993%;
}

.kraso2602__06_kr .caption__09_kr {
  position: absolute;
  bottom: 1.063%;
  right: 29.71%;
  width: 31.159%;
}

.kraso2602__06_kr .plus__09_kr {
  width: 33.333%;
}

.kraso2602__06_kr .kraso2602-content__name_kr {
  margin-top: 5%;
}

/* kraso2602-more_kr */
.kraso2602-more_kr {
  margin-top: 15.072%;
  margin-left: auto;
  margin-right: auto;
  width: 39.42%;
}

/* animation */
[data-animation] .is-show {
  pointer-events: auto;
}

[data-animation] .is-hide {
  pointer-events: none;
  transition: none !important;
}

.show_kr {
  opacity: 0;
  -webkit-clip-path: inset(0 0 100% 0);
  clip-path: inset(0 0 100% 0);
  transition: -webkit-clip-path 600ms cubic-bezier(0.66, 0.09, 0.08, 0.94);
  transition: clip-path 600ms cubic-bezier(0.66, 0.09, 0.08, 0.94);
  transition: clip-path 600ms cubic-bezier(0.66, 0.09, 0.08, 0.94), -webkit-clip-path 600ms cubic-bezier(0.66, 0.09, 0.08, 0.94);
  transition-delay: 1.2s;
}

.show_kr.is-show {
  opacity: 1;
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}

.show-right_kr {
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  position: relative;
  transition-duration: 1.2s;
  transition-timing-function: ease-in-out;
  transition-property: -webkit-clip-path, -webkit-mask-size;
  transition-property: clip-path, mask-size;
  transition-property: clip-path, mask-size, -webkit-clip-path, -webkit-mask-size;
  z-index: 1;
}

.show-right_kr.is-show {
  -webkit-clip-path: inset(0% 0% 0% 0%);
  clip-path: inset(0% 0% 0% 0%);
  -webkit-mask-size: 110% 110%;
  mask-size: 110% 110%;
}

.fade-in_kr {
  opacity: 0;
  transition: opacity 0.5s ease 1.3s;
}

.fade-in_kr.is-show {
  opacity: 1;
}

.blur_kr {
  -webkit-filter: blur(10px);
  filter: blur(10px);
  opacity: 0;
}

.blur_kr.is-show {
  -webkit-animation: blur 1s ease forwards;
  animation: blur 1s ease-out forwards;
}

@-webkit-keyframes blur {
  0% {
    -webkit-filter: blur(8px);
    filter: blur(8px);
    opacity: 0;
    transform: scale(1.02);
  }
  100% {
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes blur {
  0% {
    -webkit-filter: blur(8px);
    filter: blur(8px);
    opacity: 0;
    transform: scale(1.02);
  }
  100% {
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
    transform: scale(1);
  }
}

@-webkit-keyframes popping {
  0% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(8%);
  }
  60% {
    transform: translateY(0);
  }
}

@keyframes popping {
  0% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(8%);
  }
  60% {
    transform: translateY(0);
  }
}

/* modal */
.open-modal {
  cursor: pointer;
}

.hidden {
  overflow: hidden;
}

.modal-container {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  z-index: 99;
  transition: all 0.5s 0s ease;
}

.modal-wrap {
  height: auto;
  max-height: 95vh;
  max-width: 660px;
  position: relative;
  width: 100%;
}

.modal-content {
  background-color: #fff;
  border: none;
  border-radius: 15px;
  max-width: 100%;
  max-height: 95vh;
  overflow-y: auto;
  height: 100%;
  width: 100%;
}

.modal-wrap.show .modal-item {
  border: 1px solid #000;
  border-radius: 15px;
  display: block;
}

.modal-item {
  display: none;
}

.modal-close {
  background-color: #000;
  border-radius: 50%;
  cursor: pointer;
  height: 40px;
  position: absolute;
  right: -10px;
  top: -10px;
  width: 40px;
  z-index: 99;
}

.modal-close::before,
.modal-close::after {
  background-color: #fff;
  content: "";
  height: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
}

.modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-item__link {
  display: block;
  height: 100%;
  padding: 20px;
  text-decoration: none !important;
  width: 100%;
}

.modal-item__link:not(:first-child) {
  padding-top: 0;
}

.modal-item__body {
  display: flex;
  gap: 20px;
  align-items: center;
}

.modal-item__image {
  height: auto;
  width: 50%;
}

.modal-item__more {
  background-color: #e25377;
  border-radius: 5px;
  color: #fff;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.modal-item__more::before,
.modal-item__more::after {
  background-color: #fff;
  border-radius: 9999px;
  content: "";
  height: 2px;
  position: absolute;
  top: calc(50% - 1px);
  right: 16px;
  transform-origin: calc(100% - 1px) 50%;
  width: 12px;
}

.modal-item__more::before {
  transform: rotate(45deg);
}

.modal-item__more::after {
  transform: rotate(-45deg);
}

.modal-item__cost__sale {
  color: #c73339;
}

/* others */
.fsc_gfooter__breadcrumb {
  margin-top: 0;
}

.sp {
  display: none;
}

/* PC */
@media (min-width: 768px) {
  .kraso2602_kr {
    overflow: visible;
    padding-bottom: 50px;
  }
}

/* SP */
@media not all and (min-width: 768px) {
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }

  .modal-item__body {
    flex-direction: column;
  }

  .modal-wrap {
    width: 90%;
  }

  .modal-item__image {
    width: 80%;
  }

  .kraso2602-more_kr {
    margin-top: 0;
  }

  .kraso2602-contents__frame_kr::before {
    top: 0.915%;
    top: calc((100vh - 100%) / -3);
    padding-top: 30.869%;
    width: 50.145%;
  }

  .kraso2602-contents__frame_kr::after {
    bottom: 0;
    bottom: calc((100vh - 100%) / -4);
  }
}