:root {
  --fz-48: clamp(1.6rem, calc(0.6139rem + 2.7723vw), 4.8rem);
}

.sec-prod-slide .prod-slide {
  padding-bottom: 0;
}

.sec-prod-packing .prod-packing {
  padding-bottom: calc(var(--wave));
}

.prod-packing-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem 2.4rem;
}
@media screen and (max-width: 768px) {
  .prod-packing-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .prod-packing-head .tags {
    margin: 0 auto;
  }
}
.prod-packing-head .tags {
  padding: 0.8rem 1.6rem;
  text-transform: uppercase;
  color: white;
  background-color: var(--color-pri);
  width: fit-content;
  border-radius: 100rem;
}
.prod-packing-head .mona-content {
  flex: 1;
  max-width: 49.7rem;
}
.prod-packing-head .mona-content * {
  color: #15191E;
}
.prod-packing-title {
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  .prod-packing-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
}
.prod-packing-block {
  position: relative;
}
@media screen and (max-width: 768px) {
  .prod-packing-block {
    padding: 2rem 1.5rem;
    background-color: #f2f7ff;
    border-radius: 1.6rem;
    padding-top: 0;
    overflow: hidden;
  }
  .prod-packing-block .prod-packing__title {
    padding: 0.5rem 1rem;
    background-color: var(--color-pri);
    color: white;
    margin: 0 -1.5rem;
  }
  .prod-packing-block:has(.prod-packing__pouch), .prod-packing-block:has(.prod-packing__bag) {
    background-color: transparent;
    padding: 0;
    overflow: visible;
  }
  .prod-packing-block:has(.prod-packing__pouch) {
    padding-top: 4rem;
  }
}
.prod-packing-box:not(:last-child) {
  margin-bottom: clamp(2rem, 1.0099rem + 1.9802vw, 4rem);
}
.prod-packing-box .flex {
  align-items: center;
}
.prod-packing__title {
  font-size: var(--fz-48);
  font-weight: 700;
  color: #00215E;
  margin-bottom: 1.6rem;
}
@media screen and (min-width: 1350px) {
  .prod-packing__title {
    position: absolute;
    left: calc(100% + 1.5rem);
    top: 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    height: 100%;
    display: flex;
    justify-content: start;
  }
  .prod-packing__title h4 {
    transform: scaleY(-1) scaleX(-1);
    width: fit-content;
    position: sticky;
    top: var(--size-hd);
  }
}
@media screen and (max-width: 768px) {
  .prod-packing__title {
    text-align: center;
  }
}
.prod-packing__left {
  width: 41.6666666667%;
}
.prod-packing__left .img-inner {
  width: 100%;
}
.prod-packing__left .img-inner img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
.prod-packing__right {
  width: 58.3333333333%;
}
.prod-packing__table {
  border-radius: 1.6rem;
  overflow: hidden;
  box-shadow: 0 0 0 0.1rem var(--cl-bd);
}
.prod-packing__table table {
  width: calc(100% + 0.2rem);
  border-collapse: collapse;
  border-spacing: 0;
  margin: -0.1rem;
  background-color: white;
}
.prod-packing__table table th,
.prod-packing__table table td {
  padding: 1.6rem;
  border: 1px solid var(--cl-bd);
  text-align: center;
  vertical-align: middle;
  font-weight: 600;
  color: #15191E;
}
.prod-packing__table table .bold {
  font-weight: 700;
  color: #094795;
}
@media screen and (max-width: 768px) {
  .prod-packing__left {
    width: 100%;
  }
  .prod-packing__left .img {
    max-width: 20rem;
    margin: 0 auto;
  }
  .prod-packing__right {
    width: 100%;
  }
  .prod-packing__table table th,
.prod-packing__table table td {
    padding: 0.5rem;
  }
}
@media screen and (max-width: 600px) {
  .prod-packing__table table th,
.prod-packing__table table td {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 430px) {
  .prod-packing__table {
    border-radius: 0.8rem;
  }
  .prod-packing__table table th,
.prod-packing__table table td {
    font-size: 1.2rem;
  }
}
.prod-packing__pouch {
  position: relative;
}
.prod-packing__pouch::after {
  content: "";
  height: 50%;
  width: 100vw;
  position: absolute;
  background-color: #D9D9D9;
  bottom: -2.1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: -2;
}
@media screen and (max-width: 1350px) {
  .prod-packing__pouch .prod-packing__title {
    color: white;
  }
}
@media screen and (max-width: 768px) {
  .prod-packing__pouch .prod-packing__title {
    background-color: transparent;
    margin: 0;
  }
}
.prod-packing__pouch .tops {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  margin-bottom: -8rem;
  position: relative;
  z-index: 2;
}
.prod-packing__pouch .tops-flex {
  justify-content: space-between;
}
.prod-packing__pouch .tops-flex .col {
  display: flex;
  align-items: end;
  width: fit-content;
  width: 33.3333333333%;
}
.prod-packing__pouch .tops-flex .col:nth-child(1) .img {
  width: 47%;
}
.prod-packing__pouch .tops-flex .col:nth-child(2) .img {
  width: 60%;
}
.prod-packing__pouch .tops-flex .col:nth-child(3) .img {
  width: 100%;
}
.prod-packing__pouch .tops-flex .img {
  aspect-ratio: 180/311;
  margin: 0 auto;
  max-width: 18rem;
}
.prod-packing__pouch .tops-flex .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.prod-packing__pouch .bottoms {
  position: relative;
}
.prod-packing__pouch .bottoms-wrapper {
  max-width: 101rem;
  margin: 0 auto;
  background-color: #094795;
  padding: 8rem 0 4rem 0;
  border-radius: clamp(2rem, 1.0099rem + 1.9802vw, 4rem);
  position: relative;
}
.prod-packing__pouch .bottoms-wrapper::after {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  left: 1.8rem;
  top: 1.8rem;
  border-radius: inherit;
  background-color: #d4e1ff;
  z-index: -1;
}
@media screen and (max-width: 1200px) {
  .prod-packing__pouch .bottoms-wrapper::after {
    display: none;
  }
}
.prod-packing__pouch .bottoms-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.prod-packing__pouch .bottoms-table .prod-packing__table {
  box-shadow: 0 0 0 0.1rem white;
}
.prod-packing__pouch .bottoms-table .prod-packing__table table {
  background-color: transparent;
}
.prod-packing__pouch .bottoms-table .prod-packing__table table th,
.prod-packing__pouch .bottoms-table .prod-packing__table table td {
  border-color: white;
  color: white;
}
.prod-packing__pouch .bottoms-content {
  color: white;
  text-align: center;
  margin-top: 2.4rem;
}
@media screen and (max-width: 1350px) {
  .prod-packing__pouch .bottoms > .prod-packing__title {
    display: none;
  }
}
@media screen and (min-width: 1351px) {
  .prod-packing__pouch .bottoms-inner > .prod-packing__title {
    display: none;
  }
}
.prod-packing__bag {
  position: relative;
  padding-top: var(--wave);
  padding-bottom: var(--pd-sc);
}
.prod-packing__bag::after {
  content: "";
  height: 40%;
  width: 100vw;
  position: absolute;
  background-color: #D9D9D9;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
.prod-packing__bag .flex {
  align-items: end;
}
.prod-packing__bag-wrapper {
  position: relative;
}
.prod-packing__bag-left {
  width: 37.5%;
}
.prod-packing__bag-left .img {
  margin-bottom: -1rem;
}
.prod-packing__bag-left .img-inner {
  display: block;
  padding-top: calc((1 / 1) * 100%);
  position: relative;
  overflow: hidden;
  background-color: #094795;
  border: 1rem solid white;
}
.prod-packing__bag-left .img-inner img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: contain;
  height: 70%;
  width: 70%;
}
.prod-packing__bag-right {
  width: 62.5%;
}
.prod-packing__bag .prod-packing__title {
  color: #094795;
}
@media screen and (max-width: 768px) {
  .prod-packing__bag .prod-packing__title {
    background-color: transparent;
    margin: 0;
    color: #094795;
  }
}
@media screen and (max-width: 768px) {
  .prod-packing__bag-left {
    width: 100%;
  }
  .prod-packing__bag-left .img {
    max-width: 40rem;
    margin: 0 auto;
  }
  .prod-packing__bag-right {
    width: 100%;
  }
}

.hd-lg .hd-lg-item img {
  border-radius: 0 !important;
}

/*# sourceMappingURL=page-bonus.css.map */