@keyframes float {
  from {
    transform: translateX(-30%) translateY(-50%) rotate(0deg);
    -webkit-transform: translateX(-30%) translateY(-50%) rotate(0deg);
    -moz-transform: translateX(-30%) translateY(-50%) rotate(0deg);
    -ms-transform: translateX(-30%) translateY(-50%) rotate(0deg);
    -o-transform: translateX(-30%) translateY(-50%) rotate(0deg);
  }
  to {
    transform: translateX(1100%) translateY(4500%) rotate(360deg);
    -webkit-transform: translateX(1100%) translateY(4500%) rotate(360deg);
    -moz-transform: translateX(1100%) translateY(4500%) rotate(360deg);
    -ms-transform: translateX(1100%) translateY(4500%) rotate(360deg);
    -o-transform: translateX(1100%) translateY(4500%) rotate(360deg);
  }
}

.visual img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 모바일 화면용 미디어 쿼리 */
@media (max-width: 768px) {

  .visual img {
    width: 100%;
    height: 23vh; /* 확대 비율 조정 */
    object-fit:cover; /* 이미지 비율 유지하면서 크기 조정 */
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
}



.ContWrap {
  max-width: 75rem;
  margin: 0 auto;
  padding: var(--size-60) 0 var(--size-100);
}

@media (max-width: 1199.98px) {
  .ContWrap {
    padding: var(--size-32) var(--size-20) var(--size-52);
  }
}
@media (max-width: 949.98px) {
  .ContWrap {
    max-width: 36.25rem;
  }
}
.ContWrap .container {
  margin-top: var(--size-20);
  grid-template-columns: 1fr 1fr;
  gap: var(--size-20);
  width: 100%;
  max-width: 100%;
}
@media (max-width: 949.98px) {
  .ContWrap .container {
    grid-template-columns: 1fr;
  }
}
.ContWrap .container .product {
  grid-template-columns: 12.5rem 1fr;
  gap: var(--size-20);
}
@media (max-width: 949.98px) {
  .ContWrap .container .product {
    grid-template-columns: 10rem 1fr;
    gap: var(--size-08);
  }
}
@media (max-width: 767.98px) {
  .ContWrap .container .product {
    grid-template-columns: 8.75rem 1fr;
    gap: var(--size-08);
  }
}
.ContWrap .container .product .thumbnail {
  max-width: 12.5rem;
  height: 12.5rem;
  width: 100%;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
}
@media (max-width: 949.98px) {
  .ContWrap .container .product .thumbnail {
    max-width: 10rem;
    height: 10rem;
  }
}
@media (max-width: 767.98px) {
  .ContWrap .container .product .thumbnail {
    max-width: 8.75rem;
    height: 8.75rem;
  }
}
.ContWrap .container .product .right {
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: end;
}
@media (max-width: 399.98px) {
  .ContWrap .container .product .right > div {
    gap: var(--size-04);
  }
  .ContWrap .container .product .right > div p {
    gap: var(--size-0);
  }
  .ContWrap .container .product .right > div img {
    transform: scale(0.7);
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    -o-transform: scale(0.7);
  }
}
.ContWrap .container .product .doc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem;
  align-items: end;
}
.ContWrap .container .product .doc button {
  font-size: var(--font-size-s);
  border: 0.0625rem solid var(--pointColor01);
  border-radius: var(--size-04);
  -webkit-border-radius: var(--size-04);
  -moz-border-radius: var(--size-04);
  -ms-border-radius: var(--size-04);
  -o-border-radius: var(--size-04);
  padding: 0.3125rem var(--size-04);
  height: 2.125rem;
}
@media (max-width: 949.98px) {
  .ContWrap .container .product .doc button {
    font-size: var(--font-size-ss);
    padding: 0 0.125rem;
    height: 1.6875rem;
  }
}
@media (max-width: 399.98px) {
  .ContWrap .container .product .doc button {
    height: 1.25rem;
  }
}
.ContWrap .container .product .title {
  font-size: var(--font-size-m);
  font-weight:bold;
}
@media (max-width: 949.98px) {
  .ContWrap .container .product .title {
    font-size: var(--font-size-base);
  }
}
.ContWrap .container .product span {
  display: block;
  font-size: var(--font-size-s);
  font-weight: 500;
  color: var(--gray01);
}
.ContWrap .container .product .price {
  flex: 1;
  font-size: var(--font-size-lg);
  font-weight: bold;
}
@media (max-width: 949.98px) {
  .ContWrap .container .product .price {
    font-size: var(--font-size-m);
  }
}
@media (max-width: 767.98px) {
  .ContWrap .search {
    display: flex;
    gap: var(--size-12);
    width: 100%;
    margin-bottom: var(--size-20);
  }
  .ContWrap .search input {
    width: 100%;
  }
}/*# sourceMappingURL=index.css.map */