body {
  max-width: 1680px;
  min-width: 320px;
  margin: 0 auto;
}
body #container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  gap: 40px;
  padding: 50px 40px;
}
body #container .overview_img {
  background-color: aqua;
  display: flex;
  flex-flow: column nowrap;
  gap: 30px;
}
body #container .overview_img .overview_big {
  width: 860px;
  height: 860px;
  position: relative;
  overflow: hidden;
}
body #container .overview_img .overview_big img {
  display: inline-block;
  width: 100%;
  height: auto;
}
body #container .overview_img .overview_big img.active {
  border-radius: 15px;
}
body #container .overview_img .overview_big .btn_wraper {
  opacity: 1;
}
body #container .overview_img .overview_big .btn_wraper .back .back_scroll {
  position: absolute;
  top: 50%;
  left: 10px;
  z-index: 3;
  transform: translate(-70px, -50%);
  transition: transform 0.1s ease;
}
body #container .overview_img .overview_big .btn_wraper .back .back_scroll .back_short_btn {
  background-color: white;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
body #container .overview_img .overview_big .btn_wraper .back .back_scroll .back_short_btn svg {
  width: 20px;
  height: 20px;
  display: inline-block;
  transform: scaleX(-1);
}
body #container .overview_img .overview_big .btn_wraper .back .back_scroll .back_short_btn:hover {
  background-color: white;
  border-radius: 50%;
  width: 48px;
  height: 48px;
}
body #container .overview_img .overview_big .btn_wraper .next {
  background-color: aqua;
}
body #container .overview_img .overview_big .btn_wraper .next .next_scroll {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translate(70px, -50%);
  transition: transform 0.1s ease;
  z-index: 3;
}
body #container .overview_img .overview_big .btn_wraper .next .next_scroll .forth_short_btn {
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  width: 48px;
  height: 48px;
}
body #container .overview_img .overview_big .btn_wraper .next .next_scroll .forth_short_btn svg {
  width: 20px;
  height: 20px;
  display: inline-block;
}
body #container .overview_img:hover .overview_big .btn_wraper {
  opacity: 1;
}
body #container .overview_img:hover .overview_big .btn_wraper .back_scroll {
  transform: translate(0px, -50%);
  transition: transform 0.1s ease;
}
body #container .overview_img:hover .overview_big .btn_wraper .next_scroll {
  transform: translate(0px, -50%);
  transition: transform 0.1s ease;
}
body #container .overview_img .thumnail {
  width: 860px;
  display: flex;
  gap: 12px;
}
body #container .overview_img .thumnail a {
  height: 106px;
}
body #container .overview_img .thumnail a img {
  border-radius: 15px;
  width: 100px;
  height: 100px;
}
body #container .overview_img .thumnail::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease-in-out;
}
body #container .overview_img .thumnail.active::after {
  transform: scaleX(1);
}
body #container .contents .point_word {
  display: flex;
  flex-flow: row nowrap;
  gap: 12px;
}
body #container .contents .point_word h2 {
  margin: 0 0 12px;
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 0.75rem;
}
body #container .contents .point_word .new {
  color: white;
  background-color: #2E68BF;
}
body #container .contents .point_word .hydrate {
  color: white;
  background-color: #35a8f1;
}
body #container .contents .title h1 {
  font-weight: 700;
  margin: 0 0 6px;
  font-size: 1.875rem;
}
body #container .contents .title p {
  font-size: 1.063rem;
  color: #636363;
}
body #container .contents .price_size {
  display: flex;
  flex-flow: row nowrap;
  text-align: center;
  padding: 10px 0 10px;
  gap: 15px;
}
body #container .contents .price_size h2 {
  margin: 0;
}
body #container .contents .price_size .price_25 {
  color: #2a3f48;
  font-weight: 600;
  font-size: 1.438rem;
}
body #container .contents .price_size .bottle {
  color: #434343;
  padding-top: 8px;
  text-align: center;
  font-size: 0.875rem;
}
body #container .contents .quantity {
  margin-bottom: 32px;
}
body #container .contents .quantity p {
  font-weight: 600;
  font-size: 1rem;
  padding-bottom: 8px;
}
body #container .contents .quantity .quantity_num {
  width: 138px;
  height: 48px;
  display: inline-flex;
  background-color: #000;
  padding: 6px 10px;
  border-radius: 35px;
  justify-content: center;
  text-align: center;
}
body #container .contents .quantity .quantity_num .num {
  display: flex;
  flex-flow: row nowrap;
}
body #container .contents .quantity .quantity_num .num #order_num {
  background-color: #000;
  color: white;
  height: 30px;
  text-align: center;
  width: 44px;
}
body #container .contents .quantity .quantity_num .num #minus_btn svg {
  width: 18px;
  height: 18px;
  color: white;
}
body #container .contents .quantity .quantity_num .num #plus_btn svg {
  width: 18px;
  height: 18px;
  fill: white;
}
body #container .contents .purchase {
  font-size: 1rem;
  border-radius: 15px;
  border: 1px solid #6d7175;
}
body #container .contents .purchase .onetime_p {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #6d7175;
  padding: 22px 16px;
}
body #container .contents .purchase .onetime_p .one_purchase {
  color: #6d7175;
}
body #container .contents .purchase .month_box {
  display: flex;
  flex-flow: column nowrap;
  padding: 22px 16px;
}
body #container .contents .purchase .month_box .save_p {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
body #container .contents .purchase .month_box .save_p .subs {
  color: #636363;
}
body #container .contents .purchase .month_box .save_p .subs_purchase {
  color: #636363;
}
body #container .contents .purchase .month_box .months {
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
}
body #container .contents .policy {
  margin: 8px 0 36px;
}
body #container .contents .policy p a {
  text-decoration: underline;
  text-underline-position: under;
}
body #container .contents .cart {
  padding: 15px;
  text-align: center;
  background-color: #000;
  border-radius: 30px;
}
body #container .contents .cart .cart_btn {
  color: white;
}
body #container .contents .wishlist {
  text-align: center;
  padding: 10px 10px;
  margin: 15px 0;
}
body #container .contents .wishlist a {
  gap: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body #container .contents .wishlist a .heart {
  width: 18px;
  height: 18px;
  fill: white;
  stroke: #000;
  stroke-width: 1px;
}
body #container .contents .blank_box {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  gap: 14px;
  margin: 20px 0px;
}
body #container .contents .blank_box .box1 {
  border: 1px solid black;
  border-radius: 15px;
  background-color: white;
  width: 148px;
  height: 263px;
}
body #container .contents .blank_box .box2 {
  border: 1px solid black;
  border-radius: 15px;
  background-color: white;
  width: 148px;
  height: 263px;
}
body #container .contents .info {
  border-top: 1px solid #636363;
  border-bottom: 1px solid #636363;
  border-top: 1px solid #636363;
  padding-top: 20px;
}
body #container .contents .info a {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
body #container .contents .info a .summery {
  padding-bottom: 16px;
}
body #container .contents .info a .summery p {
  font-size: 1.188rem;
  font-weight: 600;
}
body #container .contents .info a .sum_img {
  width: 14px;
  height: 14px;
  display: inline-block;
}
body #container .contents .info .sum_info {
  font-size: 1rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.1s ease, padding 0.1s ease;
}
body #container .contents .info .sum_info.open {
  max-height: 500px;
  padding: 16px 0;
}
body #container .contents .info .benefits {
  border-top: 1px solid #636363;
  padding: 16px 0;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}
body #container .contents .info .benefits a {
  font-size: 1.188rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
body #container .contents .info .benefits a svg {
  width: 14px;
  height: 14px;
  display: inline-block;
}
body #container .contents .info .benefits .benefits_info {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.1s ease, padding 0.1s ease;
}
body #container .contents .info .benefits .benefits_info h2 {
  padding-bottom: 10px;
  font-size: 1rem;
  font-weight: 600;
}
body #container .contents .info .benefits .benefits_info .benefits_list {
  font-size: 1rem;
  text-align: left;
}
body #container .contents .info .benefits .benefits_info.open {
  max-height: 500px;
  padding: 16px 0;
}

/*# sourceMappingURL=main.css.map */