@charset "UTF-8";

/* pages/detail.css — 상품상세 페이지 전용 (view-goods.css 포함) */

@charset "UTF-8";

/* 세탁 및 취급 시 주의 내용 */
.washing-help-wrap {
  border-top: 1.2px solid #000;
  padding-top: 22px;
}

.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.d-inline-block {
  display: inline-block !important;
}

.position-r {
  position: relative !important;
}

.position-f {
  position: fixed !important;
}

.top-0 {
  top: 0 !important;
}

.bottom-auto {
  bottom: auto !important;
}

.start-0 {
  left: 0 !important;
}

.border-b {
  border-bottom: 1px solid #eee !important;
}

.border-b.st-focus {
  border-color: #000 !important;
}

.w-auto {
  width: auto !important;
}

.min-w-100 {
  min-width: 100px !important;
}

.h-fix-40 {
  height: 40px !important;
}

.h-100 {
  height: 100% !important;
}

.justify-content-center {
  justify-content: center !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.ms-4 {
  margin-left: 4px !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.my-n8 {
  margin-top: -8px !important;
  margin-bottom: -8px !important;
}

.pt-16 {
  padding-top: 16px !important;
}

.pe-16 {
  padding-right: 16px !important;
}

.ps-16 {
  padding-left: 16px !important;
}

.mb-32 {
  margin-bottom: 32px !important;
}

.pb-40 {
  padding-bottom: 40px !important;
}

.py-40 {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.mt-n48 {
  margin-top: -48px !important;
}

.px-24 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.mt-16 {
  margin-top: 16px !important;
}

.ms-64 {
  margin-left: 64px !important;
}

.p-64 {
  padding: 64px !important;
}

.pt-24 {
  padding-top: 24px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

.mt-24 {
  margin-top: 24px !important;
}

.my-24 {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.pb-36 {
  padding-bottom: 36px !important;
}

.py-120 {
  padding-top: 120px !important;
  padding-bottom: 120px !important;
}

.mt-32 {
  margin-top: 32px !important;
}

.mt-152 {
  margin-top: 152px !important;
}

.mt-40 {
  margin-top: 40px !important;
}

.mt-120 {
  margin-top: 120px !important;
}

.mt-64 {
  margin-top: 64px !important;
}

.mt-80 {
  margin-top: 80px !important;
}

.fs-15 {
  font-size: 15px !important;
}

.fs-22 {
  font-size: 22px !important;
}

.fs-36 {
  font-size: 36px !important;
}

.fw-normal {
  font-weight: 400 !important;
}

.lh-22 {
  line-height: 22px !important;
}

.lh-26 {
  line-height: 26px !important;
}

.text-start {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-primary {
  --tt-text-opacity: 1;
  color: rgba(0, 107, 255, var(--tt-text-opacity)) !important;
}

.text-dark {
  --tt-text-opacity: 1;
  color: rgba(51, 51, 51, var(--tt-text-opacity)) !important;
}

.text-hide {
  font: 0/0 a !important;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.dimmed-mask-gradient {
  width: 100%;
}

.dimmed-mask-gradient.st-white {
  background: linear-gradient(to bottom, #fff0, #fff);
}

.helper {
  display: flex;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
}

.helper.st-dimmed {
  color: #999;
}

.helper.st-gray {
  color: #666;
}

.helper.st-lg {
  font-size: 13px;
  line-height: 19px;
}

.helper.st-sm {
  font-size: 10px;
  line-height: 14px;
}

.helper.st-dotted {
  display: flex;
  align-items: flex-start;
  position: relative;
}

.helper.st-dotted:before {
  content: "";
  display: block;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background-color: #000;
  margin-right: 8px;
  margin-top: 6px;
  flex-shrink: 0;
}

.helper.st-dotted.st-dimmed:before {
  background-color: #999;
}

.helper-empty {
  text-align: center;
}

.helper-empty .helper-text {
  font-size: 16px;
  line-height: 24px;
}

.helper-empty.st-sm .helper-text {
  font-size: 14px;
  line-height: 20px;
}

.img-fluid {
  width: 100%;
  height: auto;
  vertical-align: top;
}

.table-matrix {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  border-top: 1px solid #000;
  border-bottom: 1px solid #eee;
}

.table-matrix thead th {
  vertical-align: top;
  padding: 24px 8px;
  border-bottom: 1px solid #eee;
  font-weight: 400;
}

.table-matrix thead th:first-child {
  padding-left: 0;
}

.table-matrix thead th:last-child {
  padding-right: 0;
}

.table-matrix tbody tr:last-child th,
.table-matrix tbody tr:last-child td {
  border-bottom: none;
}

.table-matrix tbody th {
  vertical-align: top;
  padding: 16px 8px;
  border-bottom: 1px solid #eee;
  font-weight: 400;
}

.table-matrix tbody th:first-child {
  padding-left: 0;
}

.table-matrix tbody th:last-child {
  padding-right: 0;
}

.table-matrix tbody td {
  vertical-align: top;
  padding: 16px 8px;
  border-bottom: 1px solid #eee;
}

.table-matrix tbody td:first-child {
  padding-left: 0;
}

.table-matrix tbody td:last-child {
  padding-right: 0;
}

.table-matrix.st-lg tbody td {
  padding-top: 24px;
  padding-bottom: 24px;
}

.table-matrix.st-border {
  border-left: 1px solid #ececec;
}

.table-matrix.st-border thead th,
.table-matrix.st-border thead td,
.table-matrix.st-border tbody th,
.table-matrix.st-border tbody td {
  border-right: 1px solid #ececec;
}

.table-matrix.st-dimmed {
  border-color: #f3f3f3;
}

.table-matrix.st-dimmed th {
  padding: 16px;
  font-weight: 400;
  background-color: #f3f3f3;
  border-right: 1px solid #f3f3f3;
}

.table-matrix.st-dimmed tr th,
.table-matrix.st-dimmed tr td {
  border-left: 1px solid #f3f3f3;
}

.table-matrix.st-dimmed tbody td {
  padding: 16px;
  vertical-align: middle;
  border-right: 1px solid #f3f3f3;
}

.table-matrix.st-dimmed tbody td:first-child {
  padding-left: 0;
}

.table-matrix.st-dimmed tbody td:last-child {
  padding-right: 0;
}

.col-6-1 {
  flex: 0 0 auto;
  width: 16.6666666667%;
}

.offset-6-1 {
  margin-left: 16.6666666667%;
}

.col-6-2 {
  flex: 0 0 auto;
  width: 33.3333333333%;
}

.col-6-4 {
  flex: 0 0 auto;
  width: 66.6666666667%;
}

.col-6-5 {
  flex: 0 0 auto;
  width: 83.3333333333%;
}

.gx-4 {
  --tt-gutter-x: 4px;
}

.col-2 {
  flex: 0 0 auto;
  width: 25%;
}

.offset-2 {
  margin-left: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 50%;
}

.col-6 {
  flex: 0 0 auto;
  width: 75%;
}

.gx-24 {
  --tt-gutter-x: 24px;
}

.g-8,
.gy-8 {
  --tt-gutter-y: 8px;
}

.g-24,
.gx-24 {
  --tt-gutter-x: 24px;
}

.g-64,
.gx-64 {
  --tt-gutter-x: 64px;
}

.button-toggle-text {
  font-size: 13px;
  line-height: 19px;
  padding: 8px 0;
  color: #aaa;
  white-space: nowrap;
}

.button-toggle-text.active,
.button-toggle-text.st-selected {
  color: #000;
}

.selectbox.st-disabled {
  cursor: default;
  pointer-events: none;
}

.selectbox .selectbox-thumb {
  position: relative;
  display: block;
  width: 52px;
  margin-right: 16px;
  flex-shrink: 0;
}

.selectbox .selectbox-thumb:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: #00000005;
}

.selectbox .selectbox-img {
  width: 100%;
  vertical-align: top;
}

.selectbox.st-thumb .selectbox-button {
  align-items: center;
  padding: 8px 16px;
}

.icon.st-reduced {
  width: 26px;
  height: 26px;
}

.icon-download-wo-circle.st-black {
  background-image: url("../../img/icons/icon-download-wo-circle__black.png");
}

.icon-share-view.st-black {
  background-image: url("../../img/icons/icon-share.svg");
}

.icon-share-kakao {
  background-image: url("../../img/icons/icon-share-kakao-lg.png");
}

.icon-share-facebook {
  background-image: url("../../img/icons/icon-share-facebook-lg.png");
}

.icon-share-link {
  background-image: url("../../img/icons/icon-share-link-lg.png");
}

.icon-share-qr {
  background-image: url("../../img/icons/icon-share-qr-lg.png");
}

.icon-heart.st-graybbb {
  background-image: url("../../img/icons/icon-heart__graybbb.png");
}

.icon-heart.st-sm.st-graybbb {
  background-image: url("../../img/icons/icon-heart-sm__graybbb.png");
}

.icon-chevron-next.st-sm.st-black {
  background-image: url("../../img/icons/icon-chevron-next-sm__black.png");
}

.icon-chevron-next.st-white {
  background-image: url("../../img/icons/icon-chevron-next-sm__white.png");
}

.icon-chevron-carousel-next.st-white {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="18" viewBox="0 0 11 18" fill="none"><path d="M0.707153 16.7072L8.70715 8.70715L0.707153 0.707153" stroke="white" stroke-width="2"/></svg>');
  background-size: 11px 18px;
}

.icon-chevron-carousel-next.st-gray {
  background-image: url("../../img/icons/icon-chevron-carousel-next__gray.png");
}

.icon-chevron-carousel-next.st-black {
  background-image: url("../../img/icons/icon-chevron-carousel-next__black.png");
}

.icon-chevron-carousel-next.st-lg.st-black {
  background-image: url("../../img/icons/icon-chevron-carousel-next-lg__black.png");
}

.icon-chevron-carousel-next.st-lg.st-white {
  background-image: url("../../img/icons/icon-chevron-carousel-next-lg__white.png");
  background-size: contain;
}

.icon-chevron-carousel-prev.st-white {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="18" viewBox="0 0 11 18" fill="none"><path d="M9.41422 0.707153L1.41422 8.70715L9.41422 16.7072" stroke="white" stroke-width="2"/></svg>');
  background-size: 11px 18px;
}

.icon-chevron-carousel-prev.st-gray {
  background-image: url("../../img/icons/icon-chevron-carousel-prev__gray.png");
}

.icon-chevron-carousel-prev.st-black {
  background-image: url("../../img/icons/icon-chevron-carousel-prev__black.png");
}

.icon-chevron-carousel-prev.st-lg.st-white {
  background-image: url("../../img/icons/icon-chevron-carousel-prev-lg__white.png");
  background-size: contain;
}

.icon-chevron-carousel-prev.st-lg.st-black {
  background-image: url("../../img/icons/icon-chevron-carousel-prev-lg__black.png");
}

.icon-chevron-end-down.st-sm.st-white {
  background-image: url("../../img/icons/icon-chevron-end-down-sm__white.png");
}

.icon-x.st-xs.st-white {
  background-image: url("../../img/icons/icon-x-xs__white.png");
}

.icon-x-modal {
  background-image: url("../../img/icons/icon-x-modal.png");
}

.icon-chevron-next-button-cta-13.st-xs.st-black {
  background-image: url("../../img/icons/icon-chevron-next-button-cta-13__black.png");
}

.icon-chevron-next-button-cta-13.st-xs.st-gray {
  background-image: url("../../img/icons/icon-chevron-next-button-cta-13__gray.png");
}

.button {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  padding-left: 5px;
  padding-right: 5px;
  background-color: #000;
}

.button .icon {
  flex-shrink: 0;
}

.button .button-text {
  text-align: center;
  color: #fff;
}

.button.st-disabled,
.button:disabled {
  background-color: #eee;
}

.button.st-disabled .button-text,
.button:disabled .button-text {
  color: #ccc;
}

.button.st-pill {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  padding-left: 24px;
  padding-right: 24px;
}

.button.st-pill[data-tt-toggle="collapse"].active {
  background-color: #fff;
}

.button.st-pill[data-tt-toggle="collapse"].active .button-text {
  color: #000;
}

.button.st-pill[data-tt-toggle="collapse"].active .icon-chevron-end-down {
  background-image: url("../../img/icons/icon-chevron-end-up-sm__black.png");
}

.button.st-wish {
  padding-left: 8px;
  padding-right: 8px;
}

.button.st-wish .button-text {
  width: 100%;
}

.button.st-wish .button-wish {
  position: relative;
  text-align: center;
  color: #ccc;
  padding: 0 8px;
  margin-left: -8px;
  width: 63px;
  flex-shrink: 0;
}

.button.st-wish .button-wish .wish-text {
  display: block;
  font-size: 9px;
  line-height: 11px;
  margin-top: 1px;
}

.button.st-wish .button-wish:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -1px;
  margin: auto;
  background-color: #eee;
  z-index: 1;
  width: 1px;
  height: 22px;
  opacity: 0.2;
}

.row .button {
  width: 100%;
}

.button-ghost {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  padding-left: 5px;
  padding-right: 5px;
  background-color: #fff;
  border: 1px solid #000;
}

.button-ghost .button-text {
  text-align: center;
  display: block;
  color: #000;
  margin-top: -1px;
  margin-bottom: -1px;
}

.button-ghost.st-dimmed {
  border-color: #eee;
}

.button-ghost.st-gray {
  border-color: #ddd;
}

.button-ghost.st-black {
  border-color: #fff;
  background-color: #000;
}

.button-ghost.st-black .button-text {
  color: #fff;
}

.button-ghost.st-pill {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  padding-left: 23px;
  padding-right: 23px;
}

.button-ghost.st-pill .button-text.st-sm {
  margin: 0 -7px;
}

.button-ghost.st-disabled,
.button-ghost:disabled {
  border-color: #ddd;
  background-color: #eee;
}

.button-ghost.st-disabled .button-text,
.button-ghost:disabled .button-text {
  color: #ccc;
}

.row .button-ghost {
  width: 100%;
}

.button-text.st-xlg {
  padding-top: 13px;
  padding-bottom: 13px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.button-text.st-xxlg {
  padding-top: 18px;
  padding-bottom: 18px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.button-icon.st-reduced,
.catalog-item.st-tile .tile-thumb .st-reduced.tile-heart {
  padding: 4px;
}

.carousel {
  overflow: hidden;
}

.carousel .carousel-item {
  position: relative;
  overflow: hidden;
}

.carousel .carousel-item:first-child {
  margin-left: 0 !important;
}

.carousel .carousel-img {
  width: 100%;
  vertical-align: top;
}

.carousel .swiper-pagination-progressbar {
  position: relative;
}

.carousel .carousel-fraction.st-lg {
  font-size: 24px;
  line-height: 32px;
  font-weight: 300;
  color: #aaa;
}

.carousel .carousel-fraction.st-lg .swiper-pagination-current {
  color: #000;
}

.carousel .carousel-nav {
  position: absolute;
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
  z-index: 2;
  background-color: #0000001f;
  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.carousel .carousel-nav.carousel-next {
  right: 0;
}

.carousel .carousel-nav.carousel-prev {
  left: 0;
}

.carousel .carousel-nav.st-xlg {
  padding: 16px;
}

.carousel .carousel-nav.swiper-button-disabled {
  display: none;
}

.carousel .carousel-nav:hover {
  background-color: #0000003d;
}

.carousel-nav.swiper-button-disabled {
  display: none;
}

.catalog-item.st-tile .carousel-fraction.st-lg {
  font-size: 24px;
  line-height: 32px;
  font-weight: 300;
  color: #aaa;
}

.catalog-item.st-tile .carousel-fraction.st-lg .swiper-pagination-current {
  color: #000;
}

.catalog-item.st-tile .carousel-nav {
  position: absolute;
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
  z-index: 2;
  background-color: #0000001f;
  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.catalog-item.st-tile .carousel-nav.carousel-next {
  right: 0;
}

.catalog-item.st-tile .carousel-nav.carousel-prev {
  left: 0;
}

.catalog-item.st-tile .carousel-nav.st-xlg {
  padding: 16px;
}

.catalog-item.st-tile .carousel-nav.swiper-button-disabled {
  display: none;
}

.catalog-item.st-tile .carousel-nav:hover {
  background-color: #0000003d;
}

.catalog-item.st-tile .tile-goods-label .tile-goods-label-inner.text-ellipsis-2 {
  display: -webkit-box;
  max-height: 520px;
  font-size: 13px;
  line-height: 20px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.catalog-item.st-tile.st-simple .tile-body {
  padding-top: 16px;
  padding-left: 0;
  padding-right: 16px;
}

.catalog-item.st-tile.st-disabled .tile-link,
.catalog-item.st-tile.st-disabled .tile-body {
  pointer-events: none;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
}

.modal .modal-dialog {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
}

.modal .modal-content {
  overflow: hidden;
  background-color: #fff;
}

.modal .modal-default {
  width: 434px;
  margin: 0 auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  padding: 24px 0;
}

.modal .modal-default .modal-content {
  background-color: #fff;
  border-radius: 20px;
}

.modal .modal-default .modal-header {
  position: relative;
  min-height: 55px;
  padding: 16px 72px 8px 24px;
}

.modal .modal-default .modal-header .modal-title {
  font-size: 16px;
  line-height: 39px;
  font-weight: 600;
}

.modal .modal-default .modal-header .modal-close.button-icon,
.modal .modal-default .modal-header .catalog-item.st-tile .tile-thumb .modal-close.tile-heart,
.catalog-item.st-tile .tile-thumb .modal .modal-default .modal-header .modal-close.tile-heart {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 2;
}

.modal .modal-default .modal-header.st-sm {
  min-height: 50px;
}

.modal .modal-default .modal-header.st-sm .modal-close {
  top: 11px;
}

.modal .modal-default .modal-body {
  max-height: 75vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.modal .modal-default .modal-body .modal-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.modal .modal-default .modal-body .modal-title + .modal-text {
  margin-top: 10px;
}

.modal .modal-default .modal-body .modal-text {
  font-size: 14px;
  line-height: 20px;
}

.modal .modal-default .modal-button-group {
  display: flex;
  border-top: 1px solid #eee;
}

.modal .modal-default .modal-button-group .modal-button {
  width: 100%;
  padding: 16px 8px;
  font-size: 14px;
  line-height: 20px;
  color: #666;
  text-align: center;
}

.modal .modal-default .modal-button-group .modal-button + .modal-button {
  border-left: 1px solid #eee;
}

.modal .modal-default .modal-button-group .modal-button.st-black {
  color: #000;
}

.modal .modal-default .modal-button-group .modal-button.st-accent,
.modal .modal-default .modal-button-group .modal-button.st-primary {
  color: #006bff;
}

.modal .modal-default .modal-button-group .modal-button:disabled {
  color: #ccc;
}

.modal .modal-default.st-lg {
  width: 884px;
}

.modal .modal-full .modal-overlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0003;
  z-index: 1;
}

.modal .selectbox-layer {
  opacity: 0;
  visibility: hidden;
  width: 100%;
  position: absolute;
  right: 0;
  top: calc(100% - 1px);
  z-index: 4;
  border: 1px solid #000;
  border-top: 1px solid #eee;
  background-color: #fff;
  max-height: 400px;
  overflow-y: auto;
}

.modal .selectbox-thumb {
  position: relative;
  display: block;
  width: 52px;
  margin-right: 16px;
  flex-shrink: 0;
}

.modal .selectbox-thumb:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: #00000005;
}

.modal .selectbox-img {
  width: 100%;
  vertical-align: top;
}

.modal .selectbox-button {
  display: flex;
  text-align: left;
  width: 100%;
  font-size: 14px;
  line-height: 22px;
  padding: 12px 16px;
}

.modal .selectbox-button .text-inner {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.modal .selectbox-button .text-inner + .text-inner {
  margin-left: 8px;
}

.modal .selectbox-button .text-inner.st-sm {
  min-height: 50px;
}

.modal .selectbox-button .text-inner.st-sm .modal-close {
  top: 11px;
}

.modal .selectbox-button .modal-body {
  max-height: 75vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.modal .selectbox-button .modal-body .modal-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.modal .selectbox-button .modal-body .modal-title + .modal-text {
  margin-top: 10px;
}

.modal .selectbox-button .modal-body .modal-text {
  font-size: 14px;
  line-height: 20px;
}

.modal .selectbox-button .modal-button-group {
  display: flex;
  border-top: 1px solid #eee;
}

.modal .selectbox-button .modal-button-group .modal-button {
  width: 100%;
  padding: 16px 8px;
  font-size: 14px;
  line-height: 20px;
  color: #666;
  text-align: center;
}

.modal .selectbox-button .modal-button-group .modal-button + .modal-button {
  border-left: 1px solid #eee;
}

.modal .selectbox-button .modal-button-group .modal-button.st-black {
  color: #000;
}

.modal .selectbox-button .modal-button-group .modal-button.st-accent,
.modal .selectbox-button .modal-button-group .modal-button.st-primary {
  color: #006bff;
}

.modal .selectbox-button .modal-button-group .modal-button:disabled {
  color: #ccc;
}

.modal .selectbox-button.st-lg {
  width: 884px;
}

.modal .modal-full,
.modal .modal-full .modal-content {
  width: 100%;
  height: 100%;
}

.modal .modal-full .modal-close {
  position: absolute;
  top: 64px;
  right: 64px;
  z-index: 2;
}

.modal .modal-full .modal-body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.modal .modal-overlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0003;
  z-index: 1;
}

.navigator.st-tab .navigator-item {
  cursor: pointer;
  width: 100%;
}

.navigator.st-tab .navigator-list.justify-content-center .navigator-item {
  width: auto;
}

.navigator.st-tab .navigator-list.justify-content-center .navigator-button {
  padding-left: 24px;
  padding-right: 24px;
}

.navigator.st-tab.st-lg .navigator-list.justify-content-center .navigator-item {
  width: auto;
}

.navigator.st-tab.st-lg .navigator-list.justify-content-center .navigator-button {
  padding-left: 24px;
  padding-right: 24px;
}

.navigator.st-tab.st-lg .navigator-list .navigator-button {
  margin: 0;
  padding: 20px 0;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

.navigator.st-tab.st-lg .navigator-list .navigator-button.active {
  border-color: #000;
}

.navigator.st-tab.st-lg .navigator-list .navigator-text {
  line-height: 16px;
  font-size: 14px;
}

.navigator-list.carousel-list .carousel-item.swiper-slide-thumb-active .navigator-button .navigator-text {
  color: #000;
  font-weight: 600;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

.membership-special {
  display: flex;
  flex-flow: column;
  text-align: center;
  border: 1px solid #eee;
  height: 100%;
  min-height: 142px;
  padding: 12px 0 40px;
}

.membership-special .membership-img {
  vertical-align: top;
  margin: 0 auto;
}

.membership-special .membership-img + .membership-text {
  margin-top: 8px;
}

.membership-special .membership-text {
  font-size: 13px;
  line-height: 19px;
}

.nav-scrollspy {
  position: relative;
}

.nav-scrollspy.st-tab {
  height: 56px;
}

.nav-scrollspy.st-tab .navigator {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: #fff;
}

.nav-scrollspy.st-tab .navigator.st-pill {
  padding: 20px 0;
}

.select-brand {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 20px;
  width: 408px;
  margin: 24px auto 0;
}

.select-brand__name {
  line-height: 1;
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.select-brand.st-goods {
  width: 100%;
  margin: 0 auto;
  padding: 20px 30px 20px 20px;
  border: none;
  border-radius: 0;
  background-color: #f8f8f8;
  gap: 20px;
}

.select-brand.st-goods .select-brand__link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.select-brand.st-goods .select-brand__thumbnail {
  flex: 0 0 auto;
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 4px;
  border: 1px solid #ccc;
  overflow: hidden;
}

.select-brand.st-goods .select-brand__thumbnail .img-fluid {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.select-brand.st-goods .select-brand__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.select-brand.st-goods .select-brand__title .helper {
  flex: 0 0 auto;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.select-brand.st-goods .select-brand__name {
  max-width: 420px;
}

.select-brand.st-goods .select-brand__name .brand-name {
  display: block;
  font-size: 16px;
  line-height: 1.2;
  white-space: wrap;
}

.select-brand.st-goods .select-brand__name .brand-name--eng {
  margin-top: 4px;
  color: #666;
  font-weight: 400;
}

#top-banner {
  max-height: 0;
  overflow: hidden;
}

#top-banner .button-del {
  position: absolute;
  top: 50%;
  right: 8px;
  z-index: 2;
  transform: translateY(-50%);
}

.summary-list {
  display: flex;
  align-items: center;
  margin: 0;
}

.summary-list:not(:first-child) {
  margin-top: 20px;
}

.summary-list__item {
  display: flex;
  color: #999;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
}

.summary-list__item + .summary-list__item:before {
  content: "";
  display: block;
  width: 1px;
  height: 10px;
  background-color: #999;
  margin-top: 1px;
  margin-inline: 10px 10px;
}

.summary-list dd {
  margin-left: 4px;
}

#modalSizeGuideTabCont1 img.align-top {
  width: 512px;
}

#modal-brand-pick .brand,
#modal-brand-pick-all .brand {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 24px;
}

#modal-brand-pick .brand__img-box,
#modal-brand-pick-all .brand__img-box {
  margin-bottom: 16px;
  display: flex;
  gap: 4px;
}

#modal-brand-pick .brand__img-box .brand__image,
#modal-brand-pick-all .brand__img-box .brand__image {
  position: relative;
  width: 96px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  background-color: #0000000d;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
}

#modal-brand-pick .brand__img-box .brand__image img,
#modal-brand-pick-all .brand__img-box .brand__image img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#modal-brand-pick .brand__text,
#modal-brand-pick-all .brand__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

#modal-brand-pick .brand__text-info,
#modal-brand-pick-all .brand__text-info {
  font-size: 13px;
  color: #666;
}

#modal-brand-pick .brand__text-name,
#modal-brand-pick-all .brand__text-name {
  display: -webkit-box;
  max-height: 504px;
  font-size: 14px;
  line-height: 18px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  font-weight: 600;
  color: #006bff;
}

.view-goods-top {
  display: flex;
  justify-content: space-between;
}

.view-goods-start {
  width: 776px;
  word-break: break-all;
}

.view-goods-hero {
  position: relative;
}

.view-goods-hero .view-goods-violators {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
}

.view-goods-hero .carousel .carousel-item {
  margin: 0 4px;
  width: 384px;
  cursor: pointer;
}

.view-goods-hero .carousel .carousel-item:before {
  display: block;
  padding-top: 132%;
  content: "";
}

.view-goods-hero .carousel .st-video.st-video-view,
.view-goods-hero .carousel .carousel-img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
}

.view-goods-hero-thumb {
  margin-top: 24px;
}

.view-goods-hero-thumb .thumb-button {
  position: relative;
  display: flex;
  width: auto;
  height: 85px;
}

.view-goods-hero-thumb .thumb-button .img-fluid {
  height: 100%;
  width: auto;
}

.view-goods-hero-thumb .thumb-button .img-fluid:first-child {
  margin-right: 1px;
}

.view-goods-hero-thumb .thumb-button:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: #0000001a;
}

.view-goods-hero-thumb .thumb-button.active:before {
  display: none;
}

.view-goods-hero-thumb .thumb-button.active:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  border: 1px solid #000;
}

.view-goods-end {
  position: relative;
  width: 376px;
}

.view-goods-benefit {
  position: relative;
  background-color: #fafbff;
  border: solid 1px #144fff;
  height: 52px;
  border-radius: 4px;
}

.view-goods-benefit:before {
  content: "";
  position: absolute;
  width: 14px;
  height: 7px;
  background: url("../../img/view-goods-get-coupon-mask.png");
  background-size: 14px 7px;
  top: -1px;
  right: 45px;
}

.view-goods-benefit:after {
  content: "";
  position: absolute;
  width: 14px;
  height: 7px;
  background: url("../../img/view-goods-get-coupon-mask.png");
  background-size: 14px 7px;
  bottom: -1px;
  right: 45px;
  rotate: 180deg;
}

.view-goods-get-coupon {
  flex: none;
  width: 54px;
}

.view-goods-share {
  position: absolute;
  top: 4px;
  right: 0;
  z-index: 1;
}

.view-goods-share .share-list {
  opacity: 0;
  visibility: hidden;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  background-color: #fff;
}

.view-goods-share .share-list .icon {
  margin-left: 16px;
}

.view-goods-info {
  position: relative;
  height: 2080px;
  overflow: hidden;
}

.view-goods-info img {
  max-width: 100%;
}

.view-goods-info figure {
  margin: 0;
  max-width: 100%;
}

.view-goods-info .speedycat-container img {
  display: block;
}

.view-goods-info.active {
  height: auto;
  overflow: visible;
}

.view-goods-info .col-6-4.offset-6-1 img {
  width: 100% !important;
  height: auto !important;
  vertical-align: top;
}

.view-goods-info .col-6-4.offset-6-1.mt-0 img,
.view-goods-info .col-6-4.offset-6-1 .speedycat-container img {
  margin-top: 0;
}

.view-goods-info .view-goods-more {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
}

.view-goods-info .view-goods-more .dimmed-mask-gradient {
  height: 300px;
}

.view-goods-info .view-goods-more .button-more {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 137px;
  margin: 0 auto;
}

.view-goods-sticky__wrap .view-goods-sticky {
  background-color: #fff;
}

.view-goods-group {
  margin-top: 96px;
}

.view-goods-group .catalog-item.st-tile .tile-brand {
  font-size: 12px;
  line-height: normal;
}

.view-goods-group .catalog-item.st-tile.st-simple .tile-body {
  padding-right: 0;
}

.view-goods-summary + .view-goods-group,
.brand-select-container + .view-goods-group,
.summary-list + .view-goods-group,
.summary-content + .view-goods-group {
  margin-top: 23px;
  padding-top: 64px;
  border-top: 1px solid #eee;
}

[data-component-pin="spc-mgz-evt-view"] img.img-fluid {
  display: block !important;
}

.mt-64 {
  margin-top: 3.5874439462% !important;
}

.mt-32 {
  margin-top: 1.7937219731% !important;
}

.view-goods-container .mt-32 {
  margin-top: 32px !important;
}

.view-goods-container .mt-64 {
  margin-top: 64px !important;
}

.tab-pane .gx-8 {
  --tt-gutter-x: 0.4484304933%;
}

.tab-pane .gx-8 > * {
  --tt-gutter-x: 0.4444444444%;
}

.tab-pane .gx-8 .gx-8 {
  --tt-gutter-x: 0.5997001499%;
}

.tab-pane .gx-8 .gx-8 > * {
  --tt-gutter-x: 0.5925925926%;
}

@layer components;@layer utilities {
  .start-0 {
    inset-inline-start:calc(var(--spacing)*0);
  }

  .top-0 {
    top:calc(var(--spacing)*0);
  }

  .col-2 {
    grid-column:2;
  }

  .col-4 {
    grid-column:4;
  }

  .col-6 {
    grid-column:6;
  }

  .ms-4 {
    margin-inline-start:calc(var(--spacing)*4);
  }

  .me-2 {
    margin-inline-end:calc(var(--spacing)*2);
  }

  .mt-16 {
    margin-top:calc(var(--spacing)*16);
  }

  .mt-20 {
    margin-top:calc(var(--spacing)*20);
  }

  .mt-24 {
    margin-top:calc(var(--spacing)*24);
  }

  .mt-32 {
    margin-top:calc(var(--spacing)*32);
  }

  .mt-40 {
    margin-top:calc(var(--spacing)*40);
  }

  .mt-64 {
    margin-top:calc(var(--spacing)*64);
  }

  .mt-120 {
    margin-top:calc(var(--spacing)*120);
  }

  .mb-32 {
    margin-bottom:calc(var(--spacing)*32);
  }

  .w-auto {
    width:auto;
  }

  .px-24 {
    padding-inline:calc(var(--spacing)*24);
  }

  .py-40 {
    padding-block:calc(var(--spacing)*40);
  }

  .py-120 {
    padding-block:calc(var(--spacing)*120);
  }

  .pt-16 {
    padding-top:calc(var(--spacing)*16);
  }

  .pt-24 {
    padding-top:calc(var(--spacing)*24);
  }

  .pb-0 {
    padding-bottom:calc(var(--spacing)*0);
  }

  .pb-40 {
    padding-bottom:calc(var(--spacing)*40);
  }

  .text-center {
    text-align:center;
  }

  .align-middle {
    vertical-align:middle;
  }
}


/* 로컬 보정: 히어로 캐러셀 슬라이드가 플렉스 교차축 늘어남으로 인해
   컨테이너 전체 높이로 늘어나는 것을 방지 (원본 렌더 결과와 동일하게 132% 비율 유지) */
.view-goods-hero .carousel .swiper-wrapper {
  height: auto;
  align-items: flex-start;
}

.view-goods-hero .carousel .swiper-slide {
  height: auto;
}