/* icon */
.icon {
  background-size: cover;
  background-position: center;
  display: inline-block;
  font-size: 0;
}
.icon-letter {
  width: 20px;
  height: 20px;
  background-image: url("../images/icon_message.svg");
}
.icon-letter.on {
  background: url("../images/icon_message_on.svg");
}
.icon-camera {
  width: 20px;
  height: 20px;
  background: url("../images/icon_camera.svg") no-repeat center / 18px;
}
.icon-search {
  width: 20px;
  height: 20px;
  background-image: url("../images/icon_search.svg");
}
.icon-back {
  width: 36px;
  height: 36px;
  margin: 0 15px 0 0;
  background-image: url("../images/icon_back.svg");
}
.icon-password {
  width: 20px;
  height: 20px;
  background: url("../images/icon_eye_off.svg");
}
.icon-success {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-active2);
}
.icon-success:before {
  display: inline-block;
  content: "";
  width: 14px;
  height: 14px;
  margin: 0 2px 0 0;
  background: url("../images/icon_success.svg") no-repeat center / cover;
}
.icon-fail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-active);
}
.icon-fail:before {
  display: inline-block;
  content: "";
  width: 14px;
  height: 14px;
  margin: 0 2px 0 0;
  background: url("../images/icon_fail.svg") no-repeat center / cover;
}
.icon-file-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-active) !important;
  text-decoration: underline !important;
}
.icon-file-download:before {
  display: inline-block;
  content: "";
  width: 16px;
  height: 16px;
  margin: 0 5px 0 0;
  background: url("../images/icon_file_download.svg") no-repeat center / cover;
}
.icon-copy {
  width: 18px;
  height: 18px;
  background: url("../images/icon_copy.svg") no-repeat center / cover;
}
.icon-item-toggle {
  width: 20px;
  height: 20px;
  background: url("../images/icon_item_toggle.svg") no-repeat center / cover;
}
.icon-item-toggle.active {
  transform: rotate(180deg);
}
.icon-item-toggle.small {
  width: 14px;
  height: 14px;
  background: url("../images/icon_item_toggle_sm.svg") no-repeat center / cover;
}
.icon-x {
  width: 20px;
  height: 20px;
  background: url("../images/icon_x.svg") no-repeat center / cover;
  margin: 0 6px;
}
.icon-minus {
  width: 10px;
  height: 1px;
  background: url("../images/icon_minus.svg") no-repeat center / cover;
  margin: 0 7px;
}
.icon-point {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
}
.icon-point:before {
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  margin: 0 5px 0 0;
  background: url("../images/icon_point.svg") no-repeat center / cover;
}
.icon-lock {
  width: 20px;
  height: 20px;
  background: url("../images/icon_lock.png") no-repeat center / cover;
}
.icon-new {
  width: 14px;
  height: 14px;
  background: url("../images/icon_new.png") no-repeat center / cover;
}
.icon-bank-active {
  width: 24px;
  height: 24px;
  background: url("../images/icon_bank_active.png") no-repeat center / cover;
}
.icon-notice {
  width: 20px;
  height: 20px;
  background: url("../images/icon_notice.svg") no-repeat center / cover;
}
.icon-truck {
  width: 24px;
  height: 24px;
  background: url("../images/icon_truck.png") no-repeat center / cover;
}
.icon-post {
  width: 24px;
  height: 24px;
  background: url("../images/icon_post.png") no-repeat center / cover;
}
.icon-house {
  width: 24px;
  height: 24px;
  background: url("../images/icon_house.png") no-repeat center / cover;
}
.icon-arrow-right {
  width: 14px;
  height: 14px;
  background: url("../images/icon_arrow_right.svg") no-repeat center / cover;
}
.icon-list-01 {
  width: 30px;
  height: 30px;
  font-size: 0;
  background: url("../images/icon_list_gallery.png") no-repeat center / cover;
}
.icon-list-01.active {
  background-image: url("../images/icon_list_gallery_on.png");
}
.icon-list-02 {
  width: 30px;
  height: 30px;
  font-size: 0;
  background: url("../images/icon_list_list.png") no-repeat center / cover;
}
.icon-list-02.active {
  background-image: url("../images/icon_list_list_on.png");
}
.icon-cart {
  width: 16px;
  height: 16px;
  margin: 0 2px 0 0;
  background: url("../images/icon_cart.svg") no-repeat center / cover;
}

/* inner-box */
.inner-box {
  background: #fff;
  border: 1px solid var(--color-gray-300);
  border-radius: 15px;
  padding: 40px 30px;
}
.inner-box.small {
  padding: 30px 30px 50px;
}
.inner-box.xsmall {
  padding: 15px;
  border-radius: 10px;
}

/* member-inner-box */
.member-inner-box {
  max-width: 540px;
  margin: 0 auto;
}
.member-inner-box.sm {
  max-width: 350px;
}

/* member-title-box */
.member-title-box {
  margin: 0 0 40px;
}
.member-title-box h2 {
  text-align: center;
  font-size: 30px;
  font-weight: 600;
}
.member-title-box h2:before {
  display: block;
  content: "";
  width: 98px;
  height: 98px;
  margin: 0 auto 20px;
  background: url("../images/icon_logo_round.png") no-repeat center / cover;
}
.member-title-box h2 b {
  font-size: 30px;
  font-weight: 600;
  color: var(--color-active);
}
.member-title-box p {
  text-align: center;
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-gray-600);
}

/* line-box */
.line-box {
  width: 100%;
  height: 1px;
  background: var(--color-gray-300);
}
.line-box.large {
  height: 5px;
  background: var(--color-gray-100);
}
.line-box.full {
  margin: 0 -30px;
  width: calc(100% + 60px);
}

/* title-box */
.title-box {
  margin: 0 0 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.title-box h2 {
  font-size: 30px;
  font-weight: bold;
}
.title-box h3 {
  font-size: 26px;
  font-weight: 600;
}
.title-box h4 {
  font-size: 20px;
  font-weight: bold;
}
.title-box p {
  width: 100%;
  margin: 15px 0 0;
  font-size: 20px;
  font-weight: 500;
}
.title-box p b {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-active);
}
.title-box small {
  width: 100%;
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-gray-700);
}

/* text-box */
.text-box ul {
  padding: 0 0 0 20px;
}
.text-box ul li {
  list-style: disc;
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 500;
}
.text-box ul li:last-of-type {
  margin: 0;
}

/* text-result-box */
.text-result-box {
  padding: 100px 0;
}
.text-result-box h2 {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}
.text-result-box h2.check:before {
  display: block;
  content: "";
  width: 80px;
  height: 80px;
  margin: 0 auto 15px;
  background: url("../images/icon_logo_round.png") no-repeat center / cover;
}
.text-result-box p {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-gray-700);
  word-break: keep-all;
}

/* text-set-box */
.text-set-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.text-set-box ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--color-gray-300);
  background: var(--color-gray-100);
  padding: 10px 15px;
}
.text-set-box ul li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.text-set-box ul li:after {
  display: inline-block;
  content: "";
  width: 1px;
  height: 10px;
  margin: 0 10px;
  background: var(--color-gray-500);
}
.text-set-box ul li:last-of-type:after {
  display: none;
}
.text-set-box ul li > * {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-active);
}

/* text-check-box */
.text-check-box ul li {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 5px;
}
.text-check-box ul li:last-of-type {
  margin: 0;
}
.text-check-box ul li:before {
  display: inline-block;
  content: "";
  width: 20px;
  height: 20px;
  margin: 0 10px 0 0;
  background: url("../images/icon_text_check.svg") no-repeat center / cover;
  position: relative;
  top: 2px;
}
.text-check-box ul li p {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-gray-700);
}
.text-check-box ul li p b {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-active);
}

/* text-method-box */
.text-method-box {
  padding: 15px;
  border-radius: 10px;
  background: rgba(253, 33, 62, 0.05);
}
.text-method-box strong {
  display: block;
  margin: 0 0 10px;
  line-height: 1.3;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-active);
}
.text-method-box ul li {
  margin: 0 0 8px;
  position: relative;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-700);
  padding: 0 0 0 10px;
  word-break: keep-all;
}
.text-method-box ul li:last-of-type {
  margin: 0;
}
.text-method-box ul li:before {
  position: absolute;
  left: 0;
  top: 8px;
  width: 2px;
  height: 2px;
  content: "";
  background: var(--color-gray-500);
  border-radius: 50%;
}

/* text-info-box */
.text-info-box ul {
  display: flex;
  flex-wrap: wrap;
}
.text-info-box ul li {
  flex: 1;
  min-width: 0;
  margin: 0 30px 0 0;
  border: 1px solid var(--color-gray-300);
  border-radius: 15px;
}
.text-info-box ul li:last-of-type {
  margin: 0;
}
.text-info-box ul li .list-head {
  display: flex;
  flex-wrap: wrap;
  border-radius: 15px 15px 0 0;
  padding: 20px;
}
.text-info-box ul li .list-head:after {
  display: block;
  content: "";
  width: 70px;
  height: 70px;
  margin: 0 0 0 20px;
  background-size: cover;
  background-position: center;
}
.text-info-box ul li .list-head > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
}
.text-info-box ul li .list-head > div b {
  width: 37px;
  height: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 8px;
  background: #fff;
  border-radius: 50px;
}
.text-info-box ul li .list-head > div strong {
  width: 100%;
  font-size: 18px;
  font-weight: bold;
}
.text-info-box ul li .list-head > div p {
  font-weight: 500;
}
.text-info-box ul li .list-body {
  border-top: 1px solid var(--color-gray-300);
  border-top: 0;
  border-radius: 0 0 15px 15px;
  padding: 15px 20px;
}
.text-info-box ul li .list-body dl {
  padding: 0 0 0 20px;
}
.text-info-box ul li .list-body dl dd {
  margin: 0 0 5px;
  display: list-item;
  list-style: disc;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-gray-700);
}
.text-info-box ul li .list-body dl dd:last-of-type {
  margin: 0;
}
.text-info-box ul li.red .list-head {
  background: #ffe9ed;
}
.text-info-box ul li.red .list-head:after {
  background-image: url("../images/img_text_info_red.png");
}
.text-info-box ul li.red .list-head > div strong {
  color: var(--color-active);
}
.text-info-box ul li.blue .list-head {
  background: #e8edff;
}
.text-info-box ul li.blue .list-head:after {
  background-image: url("../images/img_text_info_blue.png");
}
.text-info-box ul li.blue .list-head > div strong {
  color: var(--color-active2);
}

/* text-red-box */
.text-red-box {
  background: #fff6f8;
  border: 1px solid #ffc4ca;
  border-radius: 10px;
  padding: 20px;
  margin: 0 0 20px;
}
.text-red-box ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.text-red-box ul li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-weight: 600;
}
.text-red-box ul li:after {
  display: inline-block;
  content: "";
  width: 1px;
  height: 8px;
  margin: 0 10px;
  background: #ffc4ca;
}
.text-red-box ul li:last-of-type:after {
  display: none;
}
.text-red-box dl dt {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-active);
  margin: 0 0 10px;
}
.text-red-box dl dd {
  margin: 0 0 8px;
  position: relative;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-700);
  padding: 0 0 0 7px;
}
.text-red-box dl dd:last-of-type {
  margin: 0;
}
.text-red-box dl dd:before {
  position: absolute;
  left: 0;
  top: 8px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--color-gray-500);
  content: "";
}
.text-red-box dl dd b {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-active);
}

/* text-gray-box */
.text-gray-box {
  padding: 15px;
  border-radius: 10px;
  background: var(--color-gray-100);
}
.text-gray-box ul li {
  position: relative;
  margin: 0 0 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-700);
  padding: 0 0 0 7px;
}
.text-gray-box ul li:before {
  position: absolute;
  left: 0;
  top: 8px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--color-gray-500);
  content: "";
}
.text-gray-box ul li b {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-blue);
}

/* item-view-swiper-box */
.item-swiper-pagination {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 30px;
  transform: translateX(-50%);
  bottom: auto;
}
.item-swiper-pagination span {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}
.item-view-swiper-box .swiper-slide {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.item-view-swiper-box .swiper-slide img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

/* item-view-box */
.item-view-box {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.item-view-box .view-left {
  flex: 1;
  min-width: 0;
}
.item-view-box .view-right {
  width: 500px;
  margin: 0 0 0 20px;
  position: sticky;
  top: 232px;
  z-index: 500;
}

/* item-box */
.item-box .inner .list-image {
  position: relative;
  border-radius: 10px;
}
.item-box .inner .list-image:after {
  display: block;
  content: "";
  padding-bottom: 100%;
}
.item-box .inner .list-image .list-image-date {
  position: absolute;
  left: 10px;
  top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  z-index: 15;
}
.item-box .inner .list-image .list-image-date time {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 20px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.5);
  padding: 0 5px;
  font-size: 10px;
  font-weight: 500;
  color: #fff;
}
.item-box .inner .list-image .list-image-only {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 24px;
  z-index: 15;
  background: #000;
  border-radius: 5px;
  padding: 0 5px;
}
.item-box .inner .list-image .list-image-only span {
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  line-height: 1;
}
.item-box .inner .list-image .list-image-only:after {
  display: inline-block;
  content: "";
  width: 12px;
  height: 12px;
  margin: 0 0 0 4px;
  background: url("../images/icon_only.png") no-repeat center / cover;
}
.item-box .inner .list-image .list-image-swiper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.item-box .inner .list-image .list-image-swiper .swiper-container {
  height: 100%;
}
.item-box .inner .list-image .list-image-swiper .swiper-wrapper {
  height: 100%;
}
.item-box .inner .list-image .list-image-swiper .swiper-slide {
  border-radius: 10px;
  width: 100% !important;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.item-box .inner .list-image .list-image-hover {
  pointer-events: none;
  opacity: 0;
  transition: all ease 0.5s;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  z-index: 20;
  border-radius: 10px;
  overflow: hidden;
}
.item-box .inner .list-image .list-image-hover > div {
  width: 100%;
}
.item-box .inner .list-image .list-image-hover > div.hover-button {
  padding: 10px;
}
.item-box .inner .list-image .list-image-hover > div.hover-button .btn {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  width: 73px;
  height: 28px;
  padding: 0 5px 0 4px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  margin: 0 0 5px auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.item-box
  .inner
  .list-image
  .list-image-hover
  > div.hover-button
  .btn:last-of-type {
  margin-bottom: 0;
}
.item-box .inner .list-image .list-image-hover > div.hover-button .btn:before {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  margin: 0 2px 0 0;
  background-size: cover;
  background-position: center;
}
.item-box
  .inner
  .list-image
  .list-image-hover
  > div.hover-button
  .btn.cart:before {
  background-image: url("../images/icon_hover_cart.svg");
}
.item-box
  .inner
  .list-image
  .list-image-hover
  > div.hover-button
  .btn.search:before {
  background-image: url("../images/icon_hover_search.svg");
}
.item-box
  .inner
  .list-image
  .list-image-hover
  > div.hover-button
  .btn.write:before {
  background-image: url("../images/icon_hover_write.svg");
}
.item-box .inner .list-image .list-image-hover > div.hover-control {
  position: relative;
  width: 100%;
  height: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
}
.item-box .inner .list-image .list-image-hover > div.hover-control:before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  content: "";
}
.item-box .inner .list-image .list-image-hover > div.hover-control > div {
  position: static;
  width: 50%;
  height: 40px;
  background-size: 100% auto;
  background-position: center;
  box-shadow: none;
  border-radius: 0;
}
.item-box
  .inner
  .list-image
  .list-image-hover
  > div.hover-control
  > div.swiper-button-prev {
  background-image: url("../images/icon_hover_swiper_prev.svg");
  margin: 0;
}
.item-box
  .inner
  .list-image
  .list-image-hover
  > div.hover-control
  > div.swiper-button-next {
  background-image: url("../images/icon_hover_swiper_next.svg");
  margin: 0;
}
.item-box .inner .list-image .list-image-check {
  position: absolute;
  left: 0;
  top: 0;
  padding: 10px;
  z-index: 25;
}
.item-box .inner .list-image .list-image-check .check-box label:before {
  margin: 0;
}
.item-box .inner .list-image .list-image-sticker {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 10px;
  z-index: 15;
}
.item-box .inner .list-content {
  margin: 10px 0 0;
}
.item-box .inner .list-content > a {
  display: block;
}
.item-box .inner .list-content .item-price-box {
  margin: 10px 0 0;
}
.item-box .inner:hover .list-image .list-image-date {
  display: none;
}
.item-box .inner:hover .list-image .list-image-only {
  display: none;
}
.item-box .inner:hover .list-image .list-image-sticker {
  display: none;
}
.item-box .inner:hover .list-image .list-image-hover {
  opacity: 1;
  pointer-events: inherit;
  opacity: 1;
}
.item-box .inner:hover .list-content .item-subject-box p {
  color: var(--color-active);
}
.item-box.item-01 .inner {
  display: block;
}
.item-box.item-02 .inner {
  display: flex;
  flex-wrap: wrap;
}
.item-box.item-02 .inner .list-image {
  width: 153px;
  border-radius: 10px 0 0 10px;
}
.item-box.item-02 .inner .list-content {
  flex: 1;
  min-width: 0;
  border-radius: 0 10px 10px 0;
  background: var(--color-gray-200);
  padding: 15px;
  margin: 0;
}
.item-box.item-03 .inner {
  display: flex;
  flex-wrap: wrap;
}
.item-box.item-03 .inner .list-image {
  width: 86px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
}
.item-box.item-03 .inner .list-image:after {
  display: block;
  content: "";
  padding-bottom: 100%;
}
.item-box.item-03 .inner .list-content {
  flex: 1;
  min-width: 0;
  padding: 0 0 0 20px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  margin: 0;
}
.item-box.item-03 .inner .list-content > * {
  width: 100%;
}
.item-box.item-04 .inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.item-box.item-04 .inner .list-image {
  width: 50px;
  border-radius: 5px;
  background-size: cover;
  background-position: center;
}
.item-box.item-04 .inner .list-image:after {
  display: block;
  content: "";
  padding-bottom: 100%;
}
.item-box.item-04 .inner .list-content {
  flex: 1;
  min-width: 0;
  padding: 0 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  margin: 0;
}
.item-box.item-04 .inner .list-content > * {
  width: 100%;
}
.item-box.item-05 .inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.item-box.item-05 .inner .list-image {
  width: 40px;
  border-radius: 5px;
  background-size: cover;
  background-position: center;
}
.item-box.item-05 .inner .list-image:after {
  display: block;
  content: "";
  padding-bottom: 100%;
}
.item-box.item-05 .inner .list-content {
  flex: 1;
  min-width: 0;
  padding: 0 0 0 5px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  margin: 0;
}
.item-box.item-05 .inner .list-content > * {
  width: 100%;
}
.item-box.item-06 .inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.item-box.item-06 .inner .list-image {
  width: 56px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
}
.item-box.item-06 .inner .list-image:after {
  display: block;
  content: "";
  padding-bottom: 100%;
}
.item-box.item-06 .inner .list-content {
  flex: 1;
  min-width: 0;
  padding: 0 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  margin: 0;
}
.item-box.item-06 .inner .list-content > * {
  width: 100%;
}
.item-box.active .inner .list-image:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  content: "";
  z-index: 14;
  border-radius: 10px;
}

/* item-subject-box */
.item-subject-box p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 16px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* item-detail-box */
.item-detail-box {
  text-align: left;
}
.item-detail-box b {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-active);
}
.item-detail-box p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
}
.item-detail-box .copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-600);
}
.item-detail-box .copy:after {
  display: inline-block;
  content: "";
  width: 14px;
  height: 14px;
  margin: 0 0 0 2px;
  background: url("../images/icon_copy.svg") no-repeat center / cover;
}

/* item-option-box */
.item-option-box ul {
  display: flex;
  align-items: center;
}
.item-option-box ul li {
  display: flex;
  align-items: center;
}
.item-option-box ul li:after {
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  margin: 0 8px;
  background: var(--color-gray-500);
  border-radius: 50%;
  flex: 0 0 2px;
}
.item-option-box ul li:last-of-type:after {
  display: none;
}
.item-option-box ul li p {
  font-weight: 500;
  word-break: auto-phrase;
  font-size: 14px;
  text-align: left;
}
.item-option-box ul li p.t-clamp {
  word-break: normal;
}

/* item-order-text-box */
.item-order-text-box dl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.item-order-text-box dl dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-700);
}
.item-order-text-box dl dd:after {
  display: inline-block;
  content: "";
  width: 2px;
  height: 2px;
  margin: 0 5px;
  background: var(--color-gray-500);
  border-radius: 50%;
}
.item-order-text-box dl dd:last-of-type:after {
  display: none;
}
.item-order-text-box p {
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.item-order-text-box small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-600);
}

/* item-info-box */
.item-info-box dl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.item-info-box dl dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
}
.item-info-box dl dd:after {
  display: inline-block;
  content: "";
  width: 1px;
  height: 8px;
  background: #d9d9d9;
  margin: 0 10px;
}
.item-info-box dl dd:last-of-type:after {
  display: none;
}
.item-info-box small {
  display: block;
  font-weight: 500;
  color: var(--color-gray-600);
  text-align: left;
}
.item-info-box.small dl dd {
  font-size: 14px;
}
.item-info-box.small small {
  font-size: 12px;
}

/* item-price-box */
.item-price-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.item-price-box strong {
  font-size: 18px;
  font-weight: bold;
  color: var(--color-active);
}
.item-price-box b {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}
.item-price-box p {
  width: 100%;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-600);
  margin: 5px 0 0;
}

/* item-list-box */
.item-list-box > ul {
  display: flex;
  flex-wrap: wrap;
  row-gap: 80px;
  column-gap: 16px;
}
.item-list-box > ul > li {
  width: calc((100% - 80px) / 6);
}

/* filter-box */
.filter-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 20px;
}
.filter-box .filter-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.filter-box .filter-after {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.filter-box .filter-after:after {
  display: inline-block;
  content: "";
  width: 1px;
  height: 16px;
  margin: 0 15px;
  background: var(--color-gray-300);
}

/* filter-sca-box */
.filter-sca-box ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.filter-sca-box ul li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.filter-sca-box ul li:after {
  display: inline-block;
  content: "";
  width: 1px;
  height: 10px;
  margin: 0 15px;
  background: var(--color-gray-300);
}
.filter-sca-box ul li:last-of-type:after {
  display: none;
}
.filter-sca-box ul li a {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-gray-600);
}
.filter-sca-box ul li a:hover {
  color: var(--color-black);
}
.filter-sca-box ul li.active a {
  color: var(--color-black);
}

/* filter-button-box */
.filter-button-box {
  margin: 0 0 25px;
}
.filter-button-box .filter-button-inner .container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px -10px;
}
.filter-button-box .filter-button {
  margin: 0 5px 10px;
  position: relative;
  z-index: 500;
  background: #fff;
}
.filter-button-box .filter-button button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 44px;
  border: 1px solid var(--color-gray-300);
  border-radius: 50px;
  padding: 0 14px;
}
.filter-button-box .filter-button button:after {
  display: inline-block;
  content: "";
  width: 14px;
  height: 14px;
  background: url("../images/icon_arrow_bottom.svg") no-repeat center / cover;
}
.filter-button-box .filter-button button p {
  font-size: 15px;
  font-weight: 500;
  margin: 0 5px 0 0;
}
.filter-button-box .filter-button .inner {
  pointer-events: none;
  opacity: 0;
  position: absolute;
  transition: all ease 0.5s;
  top: 44px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--color-gray-300);
  box-shadow: 0 3px 20px rgba(40, 39, 47, 0.1);
}
.filter-button-box .filter-button .inner .inner-top {
  border-bottom: 1px solid var(--color-gray-300);
  padding: 15px;
}
.filter-button-box .filter-button .inner .inner-top p {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-800);
}
.filter-button-box .filter-button .inner .inner-bottom {
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
.filter-button-box .filter-button .inner .inner-bottom > * {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 28px;
  margin: 0 5px 0 0;
  line-height: 1.5;
  border-radius: 5px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
}
.filter-button-box .filter-button .inner .inner-bottom > *:last-of-type {
  margin: 0;
}
.filter-button-box .filter-button .inner .inner-bottom .reset {
  background: var(--color-gray-200);
}
.filter-button-box .filter-button .inner .inner-bottom .apply {
  background: var(--color-active);
  color: #fff;
}
.filter-button-box .filter-button.active button {
  border-color: var(--color-active);
  box-shadow: 0 3px 20px rgba(40, 39, 47, 0.1);
}
.filter-button-box .filter-button.active button:after {
  transform: rotate(180deg);
}
.filter-button-box .filter-button.active .inner {
  pointer-events: inherit;
  opacity: 1;
  top: 54px;
}
.filter-button-box .filter-button.on button {
  border-color: var(--color-active);
  box-shadow: 0 3px 20px rgba(40, 39, 47, 0.1);
}
.filter-button-box.fixed .filter-button-inner {
  position: fixed;
  left: 0;
  top: 212px;
  width: 100%;
  z-index: 300;
  background: #fff;
  box-shadow: 0 3px 20px rgba(40, 39, 47, 0.1);
}
.filter-button-box.fixed .filter-button-inner .container {
  margin: 0 auto -10px;
  padding: 13px 25px;
}

/* filter-sort-box */
.filter-sort-box ul {
  display: flex;
  flex-wrap: wrap;
}
.filter-sort-box ul li {
  margin: 0 5px 0 0;
}
.filter-sort-box ul li:last-of-type {
  margin: 0;
}
.filter-sort-box ul li .btn {
  height: 28px;
  border-radius: 4px;
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-100);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.filter-sort-box ul li .btn:after {
  display: inline-block;
  content: "";
  width: 14px;
  height: 14px;
  margin: 0 0 0 5px;
  background: url("../images/icon_sort.png") no-repeat center / cover;
}
.filter-sort-box ul li.active .btn {
  border-color: var(--color-active);
  background: rgba(253, 33, 62, 0.1);
}
.filter-sort-box ul li.active .btn:after {
  background-image: url("../images/icon_sort_on.png");
}

/* filter-input-box */
.filter-input-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: var(--color-gray-200);
  border-radius: 8px;
  padding: 0 15px;
}
.filter-input-box input {
  flex: 1;
  min-width: 0;
  height: 50px;
  font-weight: 500;
  background: none;
}
.filter-input-box input::placeholder {
  color: var(--color-gray-600);
}
.filter-input-box em {
  font-weight: 500;
  margin: 0 0 0 15px;
}

/* range-box */
.range-box {
  width: calc(100% - 12px);
  margin: 30px 6px 0;
  position: relative;
}
.range-box .slider-track {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background: #e6eaed;
  border-radius: 8px;
}
.range-box .slider-range {
  position: absolute;
  top: 0;
  height: 4px;
  background: var(--color-active);
  border-radius: 8px;
}
.range-box .slider-handle {
  position: absolute;
  width: 17px;
  height: 17px;
  top: -6.5px;
  background: var(--color-active);
  border-radius: 50%;
  border: 4px solid var(--color-active);
  margin: 0 0 0 -6px;
}
.range-box .slider-handle.red {
  border-color: #ff3d00;
}
.range-box .slider-start-number {
  position: absolute;
  left: 0;
  top: 20px;
  font-size: 14px;
  font-weight: 500;
  color: #323232;
}
.range-box .slider-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 0;
  margin: 0 -6px;
}
.range-box .slider-label .label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-600);
}
.range-box.disabled .slider-range {
  background: #0096fe;
}
.range-box.disabled .slider-handle {
  border-color: #0096fe;
}

/* check-item-box */
.check-item-box ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px -10px;
}
.check-item-box ul li {
  position: relative;
  overflow: hidden;
}
.check-item-box ul li input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.check-item-box ul li label {
  cursor: pointer;
  padding: 4px 15px 4px 4px;
  margin: 0 5px 10px;
  border: 1px solid var(--color-gray-300);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.check-item-box ul li label img {
  width: 24px;
  height: 24px;
  margin: 0 5px 0 0;
  border-radius: 5px;
  object-fit: cover;
}
.check-item-box ul li label p {
  font-size: 13px;
  font-weight: 500;
}
.check-item-box ul li input:checked ~ label {
  border-color: var(--color-active);
}

/* check-label-box */
.check-label-box > ul > li {
  margin: 0 0 80px;
}
.check-label-box > ul > li:last-of-type {
  margin: 0;
}
.check-label-box > ul > li dl {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -20px -20px;
}
.check-label-box > ul > li dl dt {
  width: 100%;
  margin: 0 0 15px;
  font-size: 18px;
  font-weight: 600;
  padding: 0 10px;
}
.check-label-box > ul > li dl dd {
  position: relative;
  width: calc(25% - 20px);
  margin: 0 10px 20px;
}
.check-label-box > ul > li dl dd input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
}
.check-label-box > ul > li dl dd label {
  display: block;
  position: relative;
  cursor: pointer;
  border: 1px solid var(--color-gray-300);
  border-radius: 10px;
  overflow: hidden;
}
.check-label-box > ul > li dl dd label:after {
  display: block;
  content: "";
  padding-bottom: 100%;
}
.check-label-box > ul > li dl dd label img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 30px);
  max-height: calc(100% - 30px);
  object-fit: cover;
}
.check-label-box > ul > li dl dd input:checked ~ label {
  border-color: var(--color-active) !important;
}
.check-label-box > ul > li dl dd input:checked ~ label:before {
  position: absolute;
  content: "";
  right: 10px;
  top: 10px;
  width: 30px;
  height: 30px;
  background: url("../images/icon_check_round_on.svg") no-repeat center / cover;
  z-index: 5;
}
.check-label-box > ul > li dl dd p {
  text-align: center;
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 500;
}

/* check-box */
.check-box {
  position: relative;
}
.check-box input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.check-box label {
  display: flex;
  flex-wrap: wrap;
}
.check-box label:before {
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  margin: 0 10px 0 0;
  background: url("../images/icon_check.svg") no-repeat center / cover;
  cursor: pointer;
}
.check-box label p {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
.check-box input:checked ~ label p {
  color: #000 !important;
}
.check-box input:checked ~ label:before {
  background-image: url("../images/icon_check_on.svg");
}
.check-box p {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
.check-box.round label:before {
  background-image: url("../images/icon_check_round.svg");
}
.check-box.round input:checked ~ label:before {
  background-image: url("../images/icon_check_round_on.svg");
}
.check-box.small label {
  align-items: center;
}
.check-box.small label:before {
  width: 16px;
  height: 16px;
  margin: 0 5px 0 0;
  position: relative;
}
.check-box.small label p {
  font-size: 13px;
}
.check-box.single label:before {
  margin: 0 auto;
}
.check-box.single label p {
  display: none;
}
.check-group-box {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -7px -12px;
}
.check-group-box .check-box {
  margin: 0 7px 12px;
}
.check-group-box .check-box label {
  align-items: center;
}
.check-group-box .check-box label:before {
  width: 16px;
  height: 16px;
  margin: 0 5px 0 0;
}
.check-group-box .check-box label p {
  flex: none;
  font-size: 14px;
}
.check-group-box .check-box label b {
  margin: 0 0 0 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-active);
}
.check-group-box .check-box label small {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-600);
}
.check-group-box .check-box label small:before {
  display: inline-block;
  content: "";
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--color-gray-300);
  margin: 0 3px;
}

/* radio-box */
.radio-box {
  position: relative;
}
.radio-box input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.radio-box label {
  display: flex;
  flex-wrap: wrap;
}
.radio-box label:before {
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  margin: 0 10px 0 0;
  background: url("../images/icon_check_round.svg") no-repeat center / cover;
}
.radio-box label p {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
.radio-box input:checked ~ label p {
  color: #000 !important;
}
.radio-box input:checked ~ label:before {
  background-image: url("../images/icon_check_round_on.svg");
}
.radio-box.small label {
  align-items: center;
}
.radio-box.small label:before {
  width: 20px;
  height: 20px;
  margin: 0 10px 0 0;
  position: relative;
}
.radio-box.small label p {
  font-size: 13px;
}

/* sticker-box */
.sticker-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 -2px -4px;
}
.sticker-box > * {
  margin: 0 2px 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 32px;
  border-radius: 5px;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 500;
}
.sticker-box > *.bg-redlight {
  color: var(--color-active);
  background: rgba(253, 33, 62, 0.05) !important;
}
.sticker-box > *.bg-gray-200 {
  color: var(--color-gray-600);
}
.sticker-box > *.bg-blue {
  background: rgba(74, 115, 255, 0.1) !important;
  color: var(--color-blue);
}
.sticker-box > *.bg-active {
  color: var(--color-white) !important;
}

/* button-box */
.button-box {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.button-box input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.button-box .btn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  height: 50px;
  border-radius: 8px;
  font-weight: 500;
  padding: 0 10px;
}
.button-box .btn-round {
  border-radius: 50px !important;
}
.button-box .btn-plus:before {
  display: inline-block;
  content: "";
  width: 16px;
  height: 16px;
  margin: 0 2px 0 0;
  background: url("../images/icon_btn_plus.png") no-repeat center / cover;
}
.button-box .btn-plus-black:before {
  display: inline-block;
  content: "";
  width: 16px;
  height: 16px;
  margin: 0 2px 0 0;
  background: url("../images/icon_btn_plus_b.png") no-repeat center / cover;
}
.button-box .btn-modal:after {
  display: inline-block;
  content: "";
  width: 14px;
  height: 14px;
  margin: 0 0 0 10px;
  background: url("../images/icon_btn_modal.png") no-repeat center / cover;
}
.button-box .btn-more:after {
  display: inline-block;
  content: "";
  width: 14px;
  height: 14px;
  margin: 0 0 0 4px;
  background: url("../images/icon_btn_more.png") no-repeat center / cover;
}
.button-box .btn-bottom:after {
  display: inline-block;
  content: "";
  width: 14px;
  height: 14px;
  margin: 0 0 0 4px;
  background: url("../images/icon_btn_bottom.svg") no-repeat center / cover;
}
.button-box .btn-bottom.disabled:after {
  background-image: url("../images/icon_btn_bottom_off.svg");
}
.button-box .btn-write:after {
  display: inline-block;
  content: "";
  width: 14px;
  height: 14px;
  margin: 0 0 0 4px;
  background: url("../images/icon_btn_write.png") no-repeat center / cover;
}
.button-box .btn-link:before {
  display: inline-block;
  content: "";
  width: 16px;
  height: 16px;
  margin: 0 2px 0 0;
  background: url("../images/icon_btn_link.png") no-repeat center / cover;
}
.button-box .btn-lg {
  height: 60px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 600;
}
.button-box .btn-md {
  height: 56px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
}
.button-box .btn-sm {
  height: 28px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
}
.button-box .btn-search {
  height: 34px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  flex: none;
}
.button-box .btn.disabled {
  background: var(--color-gray-300) !important;
  color: var(--color-gray-600) !important;
}
.button-box .btn-white-outline {
  background: #fff;
  border: 1px solid var(--color-gray-300);
}
.button-box .btn-white-outline.disabled {
  background: #fff !important;
  color: var(--color-gray-500) !important;
}
.button-box .btn-active-outline {
  background: #fff;
  border: 1px solid var(--color-active);
}
.button-box .btn-black-outline {
  background: #fff;
  border: 1px solid #000;
}
.button-box .btn-gray-200-outline {
  background: var(--color-gray-200);
  border: 1px solid var(--color-gray-400);
}
.button-box .btn-gray-300-outline {
  background: #fff;
  border: 1px solid var(--color-gray-300);
}
.button-box .btn-gray-300-outline.disabled {
  background: #fff !important;
  color: var(--color-gray-500) !important;
}
.button-box .btn-gray-500-outline {
  border: 1px solid var(--color-gray-500);
  background: #fff;
}
.button-box .btn-gray-600-outline {
  border: 1px solid var(--color-gray-600);
}
.button-box .btn-excel {
  height: 46px;
  border-radius: 5px;
  padding: 0 15px;
  border: 1px solid #4caf50;
  font-size: 18px;
  font-weight: 500;
  background: #fff;
}
.button-box .btn-excel:before {
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  margin: 0 10px 0 0;
  background: url("../images/icon_excel.svg") no-repeat center / cover;
}
.button-box .btn-excel.btn-search {
  height: 34px;
  border-radius: 5px;
  font-size: 12px;
  padding: 0 8px;
}
.button-box .btn-excel.btn-search:before {
  width: 18px;
  height: 18px;
  margin: 0 5px 0 0;
}
.button-box .btn-search.btn-plus:before {
  width: 13px;
  height: 13px;
}
.button-box .btn-search.btn-plus-black:before {
  width: 13px;
  height: 13px;
}
.button-box .btn-naver {
  background: #03cf5d;
  color: #fff;
  position: relative;
}
.button-box .btn-naver:before {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  content: "";
  background: url("../images/icon_btn_naver.png") no-repeat center / cover;
}
.button-box .btn-kakao {
  background: #fee500;
  color: #555555;
  position: relative;
}
.button-box .btn-kakao:before {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  content: "";
  background: url("../images/icon_btn_kakao.jpg") no-repeat center / cover;
}

/* quantity-box */
.quantity-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 130px;
  border-radius: 4px;
  border: 1px solid var(--color-gray-300);
  overflow: hidden;
}
.quantity-box a {
  display: block;
  font-size: 0;
  width: 40px;
  height: 40px;
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}
.quantity-box a.minus {
  background-image: url("../images/icon_minus.svg");
}
.quantity-box a.plus {
  background-image: url("../images/icon_plus.svg");
}
.quantity-box input {
  flex: 1;
  min-width: 0;
  height: 40px;
  text-align: center;
  border: 1px solid var(--color-gray-300);
  border-width: 0 1px;
  font-size: 15px;
  font-weight: 500;
}
.quantity-box.small {
  width: 102px;
  border-radius: 0;
  border: 0;
}
.quantity-box.small a {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background-color: var(--color-gray-200);
}
.quantity-box.small input {
  height: 26px;
  border: 0;
  font-size: 13px;
}

/* calendar-box */
.calendar-box {
  display: flex;
  flex-wrap: wrap;
}
.calendar-box .cal-inner {
  flex: 1;
  min-width: 0;
  margin: 0 20px 0 0;
}
.calendar-box .cal-inner .cal-head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0 0 5px;
}
.calendar-box .cal-inner .cal-head strong {
  font-size: 12px;
  font-weight: 500;
}
.calendar-box .cal-inner .cal-head .control {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.calendar-box .cal-inner .cal-head .control .btn {
  width: 16px;
  height: 16px;
  font-size: 0;
  margin: 0 2px 0 0;
  background-size: cover;
  background-position: center;
}
.calendar-box .cal-inner .cal-head .control .btn:last-of-type {
  margin: 0;
}
.calendar-box .cal-inner .cal-head .control .btn.first {
  background-image: url("../images/icon_paging_first_on.svg");
}
.calendar-box .cal-inner .cal-head .control .btn.prev {
  background-image: url("../images/icon_paging_prev_on.svg");
}
.calendar-box .cal-inner .cal-head .control .btn.next {
  background-image: url("../images/icon_paging_next_on.svg");
}
.calendar-box .cal-inner .cal-head .control .btn.last {
  background-image: url("../images/icon_paging_last_on.svg");
}
.calendar-box .cal-inner .cal-body {
  padding: 0 20px 0 0;
  border-right: 1px solid var(--color-gray-300);
}
.calendar-box .cal-inner .cal-body table {
  border-spacing: 0 8px;
  table-layout: fixed;
}
.calendar-box .cal-inner .cal-body table thead tr th {
  font-size: 10px;
}
.calendar-box .cal-inner .cal-body table tbody tr td a,
.calendar-box .cal-inner .cal-body table tbody tr td button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  width: 22px;
  height: 22px;
  margin: 0 auto;
}
.calendar-box .cal-inner .cal-body table tbody tr td.active {
  background: rgba(253, 33, 62, 0.05);
  border-radius: 50px 0 0 50px;
}
.calendar-box .cal-inner .cal-body table tbody tr td.active a,
.calendar-box .cal-inner .cal-body table tbody tr td.active button {
  border-radius: 50%;
  color: #fff;
  background: var(--color-active);
}
.calendar-box .cal-inner .cal-body table tbody tr td.active.end ~ td {
  background: none;
}
.calendar-box .cal-inner .cal-body table tbody tr td.active.end {
  border-radius: 0 50px 50px 0;
}
.calendar-box .cal-inner .cal-body table tbody tr td:first-of-type a,
.calendar-box .cal-inner .cal-body table tbody tr td:first-of-type button {
  color: var(--color-active);
}
.calendar-box .cal-inner .cal-body table tbody tr td.on {
  background: rgba(253, 33, 62, 0.05);
}
.calendar-box .cal-inner:last-of-type {
  margin: 0;
}
.calendar-box .cal-inner:last-of-type .cal-head .control {
  left: auto;
  right: 0;
}
.calendar-box .cal-inner:last-of-type .cal-body {
  padding: 0;
  border: 0;
}

/* date-select-box */
.date-select-box {
  position: relative;
  z-index: 300;
}
.date-select-box button {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: #fff;
  border-radius: 5px;
  border: 1px solid var(--color-gray-300);
  padding: 0 10px;
  height: 34px;
}
.date-select-box button:before {
  display: inline-block;
  content: "";
  width: 14px;
  height: 14px;
  margin: 0 5px 0 0;
  background: url("../images/icon_calendar.svg") no-repeat center / cover;
}
.date-select-box button p {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-600);
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.date-select-box .inner {
  pointer-events: none;
  opacity: 0;
  top: 28px;
  transition: all ease 0.5s;
  width: 500px;
  position: absolute;
  background: #fff;
  box-shadow: 0 3px 20px rgba(40, 39, 47, 0.01);
  border-radius: 10px;
  border: 1px solid var(--color-gray-300);
}
.date-select-box .inner .inner-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid var(--color-gray-300);
}
.date-select-box .inner .inner-head .close {
  display: block;
  font-size: 0;
  width: 30px;
  height: 30px;
  background: url("../images/icon_close.svg") no-repeat center / cover;
}
.date-select-box .inner .inner-body {
  border-bottom: 1px solid var(--color-gray-300);
}
.date-select-box .inner .inner-body .body-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid var(--color-gray-300);
}
.date-select-box .inner .inner-body .body-calendar {
  padding: 15px;
}
.date-select-box .inner .inner-foot {
  padding: 15px;
}
.date-select-box.active .inner {
  pointer-events: inherit;
  opacity: 1;
  top: 36px;
}

/* input-box */
.input-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: var(--color-gray-200);
  border-radius: 8px;
  position: relative;
}
.input-box input {
  font-weight: 500;
  flex: 1;
  min-width: 0;
  background: none;
  height: 50px;
  padding: 0 15px;
}
.input-box input::placeholder {
  color: var(--color-gray-600);
}
.input-box input ~ * {
  margin: 0 10px 0 0;
}
.input-box input[type="date"],
.input-box input[type="time"],
.input-box input[type="datetime-local"] {
  padding: 0 15px 0 30px;
}
.input-box input[type="date"]::-webkit-calendar-picker-indicator,
.input-box input[type="time"]::-webkit-calendar-picker-indicator,
.input-box input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}
.input-box input[type="time"]:before,
.input-box input[type="date"]:before,
.input-box input[type="datetime-local"]:before {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 5px;
  content: attr(placeholder);
  background: var(--color-white);
  width: 100%;
  height: 100%;
  padding: 0 10px 0 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-gray-700);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
}
.input-box input[type="time"]:after {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  width: 18px;
  height: 18px;
  background: url("../images/icon_time.svg") no-repeat center / cover;
}
.input-box input[type="date"]:after,
.input-box input[type="datetime-local"]:after {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  width: 18px;
  height: 18px;
  background: url("../images/icon_calendar.svg") no-repeat center / cover;
}
.input-box time {
  font-size: 13px;
  font-weight: 500;
}
.input-box .delete {
  display: none;
  font-size: 0;
  width: 18px;
  height: 18px;
  background: url("../images/icon_input_delete.png") no-repeat center / cover;
}
.input-box .icon-password {
  display: none;
}
.input-box.password .icon-password {
  background-image: url("../images/icon_eye.svg");
}
.input-box.error:before {
  display: inline-block;
  content: "";
  width: 14px;
  height: 14px;
  margin: 0 -10px 0 15px;
  background: url("../images/icon_error.svg") no-repeat center / cover;
}
.input-box.small {
  background: #fff;
  border: 1px solid var(--color-gray-300);
  border-radius: 5px;
}
.input-box.small input {
  height: 34px;
  font-size: 12px;
  padding: 0 10px;
}
.input-box.small input[type="date"],
.input-box.small input[type="time"],
.input-box.small input[type="datetime-local"] {
  padding: 0 10px 0 30px;
}
.input-box.small.search:before {
  display: inline-block;
  content: "";
  width: 16px;
  height: 16px;
  margin: 0 -5px 0 10px;
  background: url("../images/icon_search.svg") no-repeat center / cover;
}
.input-box.small input[type="date"]:after,
.input-box.small input[type="datetime-local"]:after {
  width: 14px;
  height: 14px;
}
.input-box.border {
  border-radius: 5px;
  border: 1px solid var(--color-gray-300);
}
.input-box.border input {
  height: 40px;
  font-size: 15px;
}
.input-box.border .has-value {
  background: #fff;
  border: 0;
  border-radius: 0;
}
.input-box.small .has-value {
  background: #fff;
  border: 0;
  border-radius: 0;
}
.input-box .has-value ~ .icon-password {
  display: block;
}
.input-box .has-value ~ .delete {
  display: block;
}
.input-box input[type="date"].has-value:before,
.input-box input[type="time"].has-value:before,
.input-box input[type="datetime-local"].has-value:before {
  display: none;
}
.input-box.active input[type="date"]:before,
.input-box.active input[type="time"]:before,
.input-box.active input[type="datetime-local"]:before {
  display: none;
}
/*.input-box.active {background:#fff;}*/

/* file-upload-box */
.file-upload-box .file-drag {
  border-radius: 10px;
  border: 1px solid var(--color-gray-300);
  padding: 60px 20px;
}
.file-upload-box .file-drag label {
  width: 95px;
  height: 34px;
  border-radius: 5px;
  background: var(--color-active);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0 auto;
}
.file-upload-box .file-drag label input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.file-upload-box .file-drag label:before {
  display: inline-block;
  content: "";
  width: 16px;
  height: 16px;
  margin: 0 5px 0 0;
  background: url("../images/icon_file_upload.svg") no-repeat center / cover;
}
.file-upload-box .file-drag p {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray-600);
  text-align: center;
}
.file-upload-box .file-drag small {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-500);
}
.file-upload-box .file-list {
  margin: 10px 0 0;
}
.file-upload-box .file-list > ul > li {
  margin: 0 0 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.file-upload-box .file-list > ul > li:last-of-type {
  margin: 0;
}
.file-upload-box .file-list > ul > li .name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 500;
}
.file-upload-box .file-list > ul > li .delete {
  width: 15px;
  height: 15px;
  margin: 0 0 0 10px;
  font-size: 0;
  background: url("../images/icon_btn_delete.svg") no-repeat center / cover;
}

/* file-input-box */
.file-input-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: var(--color-gray-200);
  border-radius: 8px;
}
.file-input-box p {
  flex: 1;
  min-width: 0;
  padding: 0 15px;
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
  color: var(--color-gray-600);
}
.file-input-box label {
  cursor: pointer;
  width: 63px;
  height: 28px;
  border-radius: 5px;
  background: var(--color-black);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  margin: 0 10px 0 0;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.file-input-box label input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.file-input-box.active p {
  color: #000;
}
.file-input-box.border {
  border-radius: 5px;
  border: 1px solid var(--color-gray-300);
}
.file-input-box.border p {
  height: 40px;
  line-height: 40px;
  font-size: 15px;
}

/* label-box */
.label-box {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0 114px;
}
.label-box > .inner {
  width: 330px;
  margin: 0 auto;
  border: 1px solid var(--color-gray-300);
  border-radius: 20px;
  padding: 15px;
}
.label-box > .inner strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 10px;
}
.label-box > .inner ul li {
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
}
.label-box > .inner ul li:last-of-type {
  margin: 0;
}
.label-box > .inner ul li b {
  width: 95px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-700);
}
.label-box > .inner ul li p {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
}
.label-box > .inner img {
  margin: 20px 0 0;
  display: block;
  max-width: 100%;
}

/* select-box */
.select-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: var(--color-gray-200);
  border: 1px solid transparent;
  border-radius: 8px;
}
.select-box select {
  font-weight: 500;
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 0 35px 0 15px;
  background: url("../images/icon_select.svg") no-repeat calc(100% - 15px)
    center / 16px;
  color: var(--color-gray-600);
}
.select-box select option {
  color: #000;
}
.select-box.small {
  background: #fff;
  border-radius: 5px;
  border: 1px solid var(--color-gray-300);
}
.select-box.small select {
  height: 34px;
  padding: 0 30px 0 10px;
  background-position: calc(100% - 10px) center;
  background-size: 14px;
  font-size: 12px;
}
.select-box.small select option {
  font-size: 12px;
}
.select-box.has-value select {
  color: #000;
}
.select-box.border {
  border-radius: 5px;
  border: 1px solid var(--color-gray-300);
}
.select-box.border select {
  height: 40px;
  font-size: 15px;
}
.select-box.has-value {
  background: #fff;
  border: 1px solid var(--color-gray-300);
  border-radius: 8px;
}
.select-box.small .has-value {
  border: 0;
  border-radius: 0;
}

/* file-box */
.file-box {
  position: relative;
}
.file-box input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.file-box label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid var(--color-gray-300);
  border-radius: 8px;
  background: #fff;
  height: 80px;
  cursor: pointer;
  overflow: hidden;
}
.file-box label p {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  z-index: 5;
}
.file-box label p:before {
  display: inline-block;
  content: "";
  width: 14px;
  height: 14px;
  margin: 0 5px 0 0;
  background: url("../images/icon_file_add.svg") no-repeat center / cover;
}
.file-box label img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.file-box .file-name {
  margin: 5px 0 0;
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.file-box.image label:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: rgba(0, 0, 0, 0.5);
  z-index: 3;
}
.file-box.image label p {
  color: #fff;
}
.file-box.image label p:before {
  display: none;
}

/* file-thumb-box */
.file-thumb-box {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.file-thumb-box label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  left: 0;
  top: 0;
  position: relative;
  overflow: hidden;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-gray-600);
  text-align: center;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: var(--color-white);
  cursor: pointer;
}
.file-thumb-box label:before {
  display: block;
  content: "";
  width: 100%;
  height: 30px;
  background: url("../images/icon_file_plus.svg") no-repeat center / 30px auto;
  cursor: pointer;
}
.file-thumb-box input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.file-thumb-box input:focus-visible ~ label {
  outline: 2px solid var(--color-black);
}
.file-thumb-box .file-list {
  display: flex;
  flex-wrap: wrap;
  font-size: 0;
  width: 100%;
}
.file-thumb-box .file-list li {
  padding: 0;
  width: 80px;
  height: 80px;
  margin: 0 10px 0 0;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid var(--color-gray-400);
  background-size: cover;
  background-position: center;
  position: relative;
  display: inline-block;
  font-size: 0;
}
.file-thumb-box .file-list li:last-of-type {
  margin: 0;
}
.file-thumb-box .file-list li .delete {
  cursor: pointer;
  position: absolute;
  right: 5px;
  top: 5px;
  width: 16px;
  height: 16px;
  font-size: 0;
  border-radius: 50%;
  background: var(--color-gray-500) url("../images/icon_thumb_delete.png")
    no-repeat center / 16px;
}

/* file-image-box */
.file-image-box .file-image {
  width: 120px;
  height: 142px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--color-gray-300);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.file-image-box .file-image p {
  width: 100%;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-600);
}
.file-image-box .file-image img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.file-image-box label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 10px 0 0;
}
.file-image-box label input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.file-image-box label p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 34px;
  padding: 0 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  background: #fff;
  border: 1px solid var(--color-active);
}

/* textarea-box */
.textarea-box textarea {
  display: block;
  width: 100%;
  border: 1px solid var(--color-gray-300);
  border-radius: 10px;
  height: 600px;
  padding: 20px;
  font-size: 16px;
  font-weight: 500;
}
.textarea-box textarea::placeholder {
  color: var(--color-gray-600);
}
.textarea-box.link textarea {
  padding: 15px;
  font-size: 14px;
  background: var(--color-gray-200);
  border: 0;
  height: 200px;
}
.textarea-box.link.large textarea {
  height: 375px;
}
.textarea-box.gray textarea {
  height: 100px;
  background: var(--color-gray-200);
  border: 0;
  padding: 15px;
  font-size: 14px;
}

/* message-box */
.message-box p {
  font-size: 12px;
  font-weight: 500;
}
.message-box p.error {
  position: relative;
  padding: 0 0 0 20px;
}
.message-box p.error:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  background: url("../images/icon_error_red.png") no-repeat center / cover;
  top: 3px;
}

/* paging-box */
.paging-box {
  margin: 60px 0 0;
}
.paging-box ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.paging-box ul li {
  margin: 0 15px 0 0;
}
.paging-box ul li:last-of-type {
  margin: 0;
}
.paging-box ul li a {
  width: 30px;
  height: 30px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.paging-box ul li.active a {
  background: #000;
  color: #fff;
}
.paging-box ul li:not(.pg) a:hover {
  border: 1px solid #000;
}
.paging-box ul li.pg a {
  border: 1px solid var(--color-gray-300);
  font-size: 0;
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
}
.paging-box ul li.pg.disabled.first a {
  background-image: url("../images/icon_paging_first.svg");
}
.paging-box ul li.pg.disabled.prev a {
  background-image: url("../images/icon_paging_prev.svg");
}
.paging-box ul li.pg.disabled.next a {
  background-image: url("../images/icon_paging_next.svg");
}
.paging-box ul li.pg.disabled.last a {
  background-image: url("../images/icon_paging_last.svg");
}
.paging-box ul li.pg.first a {
  background-image: url("../images/icon_paging_first_on.svg");
}
.paging-box ul li.pg.prev a {
  background-image: url("../images/icon_paging_prev_on.svg");
}
.paging-box ul li.pg.next a {
  background-image: url("../images/icon_paging_next_on.svg");
}
.paging-box ul li.pg.last a {
  background-image: url("../images/icon_paging_last_on.svg");
}
.paging-box ul li.pg a:hover {
  border-color: #000;
}

/* agree-box */
.agree-box .agree-total {
  height: 66px;
  background: #fff;
  border: 1px solid var(--color-active);
  border-radius: 10px;
  padding: 20px;
  margin: 0 0 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.agree-box .agree-total .check-box label:before {
  top: 1.5px;
  position: relative;
}
.agree-box .agree-total .check-box label p {
  font-size: 18px;
  font-weight: 600;
}
.agree-box .agree-list > ul > li {
  margin: 0 0 40px;
}
.agree-box .agree-list > ul > li:last-of-type {
  margin: 0;
}
.agree-box .agree-list > ul > li > h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
}
.agree-box .agree-list > ul > li > .inner {
  margin: 0 0 15px;
  overflow: hidden;
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-300);
  border-radius: 10px;
  padding: 20px 10px 20px 20px;
  position: relative;
}
.agree-box .agree-list > ul > li > .inner:after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  width: 100%;
  height: 40px;
  background: url("../images/bg_agree_shadow.png") no-repeat center / cover;
}

/* agree-text-box */
.agree-text-box {
  height: 210px;
  overflow-y: auto;
  padding: 0 10px 0 0;
}
.agree-text-box::-webkit-scrollbar {
  width: 8px;
  background: var(--color-gray-300);
  border-radius: 50px;
  padding: 1px;
}
.agree-text-box::-webkit-scrollbar-thumb {
  width: 8px;
  background: var(--color-gray-600);
  border-radius: 50px;
}
.agree-text-box .agree-text {
  margin: 0 0 20px;
}
.agree-text-box .agree-text:last-of-type {
  margin: 0;
}
.agree-text-box .agree-text strong {
  display: block;
  margin: 0 0 5px;
  font-weight: 600;
}
.agree-text-box .agree-text p {
  font-size: 12px;
  color: var(--color-gray-700);
}
.agree-box .agree-text-box {
  padding-bottom: 12px;
}

/* agree-list-box */
.agree-list-box .agree {
  margin: 0 0 40px;
}
.agree-list-box .agree:last-of-type {
  margin: 0;
}
.agree-list-box .agree h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
}
.agree-list-box .agree p {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 20px;
}
.agree-list-box .agree p:last-of-type {
  margin: 0;
}

/* member-write-box */
.member-write-box > ul > li {
  margin: 0 0 40px;
}
.member-write-box > ul > li:last-of-type {
  margin: 0;
}
.member-write-box > ul > li .tit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
}
.member-write-box > ul > li .cont {
  width: 100%;
}
.member-write-box > ul > li.flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 10px;
}
.member-write-box > ul > li.flex:last-of-type {
  margin: 0;
}
.member-write-box > ul > li.flex .tit {
  width: 90px;
  margin: 0;
}
.member-write-box > ul > li.flex .cont {
  flex: 1;
  min-width: 0;
}
.member-write-box > ul > li.border {
  margin: 0 0 30px;
  padding: 0 0 30px;
  border-bottom: 1px solid var(--color-gray-300);
}
.member-write-box > ul > li.border:last-of-type {
  margin: 0;
  padding: 0;
  border: 0;
}
.member-write-box > ul.flex {
  margin: 0 -10px -20px;
}
.member-write-box > ul.flex > li {
  margin: 0 10px 20px;
}
.member-write-box.small > ul > li {
  margin: 0 0 20px;
}
.member-write-box.small > ul > li:last-of-type {
  margin: 0;
}

/* tab-box */
.tab-box.tab-01 {
  margin: 0 0 30px;
}
.tab-box.tab-01 ul {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-gray-300);
}
.tab-box.tab-01 ul li {
  flex: 1;
  min-width: 0;
}
.tab-box.tab-01 ul li a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 0 10px 14px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-gray-600);
}
.tab-box.tab-01 ul li.active a {
  color: #000;
  position: relative;
}
.tab-box.tab-01 ul li.active a:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 4px;
  left: 0;
  bottom: 0;
  background: var(--color-active);
}
.tab-box.tab-02 {
  margin: 0 0 30px;
}
.tab-box.tab-02 ul {
  border-bottom: 1px solid var(--color-gray-300);
  display: flex;
  flex-wrap: wrap;
}
.tab-box.tab-02 ul li {
  margin: 0 40px 0 0;
}
.tab-box.tab-02 ul li:last-of-type {
  margin: 0;
}
.tab-box.tab-02 ul li a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 0 14px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-gray-600);
}
.tab-box.tab-02 ul li a:hover {
  color: #000;
}
.tab-box.tab-02 ul li.active a {
  color: #000;
  position: relative;
}
.tab-box.tab-02 ul li.active a:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: var(--color-active);
}
.tab-box.tab-03 {
  margin: 0 0 30px;
}
.tab-box.tab-03 ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -4px -8px;
}
.tab-box.tab-03 ul li {
  margin: 0 4px 8px;
}
.tab-box.tab-03 ul li a {
  height: 44px;
  background: var(--color-gray-200);
  padding: 0 14px;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 50px;
}
.tab-box.tab-03 ul li a span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  margin: 0 0 0 5px;
  background: var(--color-gray-500);
  color: #fff;
  padding: 0 6px;
  font-size: 13px;
  font-weight: 500;
  height: 22px;
}
.tab-box.tab-03 ul li.active a {
  background: var(--color-active);
  color: #fff;
}
.tab-box.tab-03.white ul li a {
  background: #fff;
  border: 1px solid var(--color-gray-500);
}
.tab-box.tab-03.white ul li.active a {
  background: var(--color-active);
  color: #fff;
  border-color: var(--color-active);
}
.tab-box.tab-03.white ul li.active a span {
  background: #fff;
  color: var(--color-active);
}
.tab-box.tab-04 {
  margin: 0 0 30px;
}
.tab-box.tab-04 ul {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--color-gray-300);
  border-width: 1px 0;
  margin: 0 -7.5px 30px;
  padding: 20px 0 5px;
}
.tab-box.tab-04 ul li {
  margin: 0 7.5px 15px;
}
.tab-box.tab-04 ul li a {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-gray-600);
}
.tab-box.tab-04 ul li a:hover {
  color: #000;
}
.tab-box.tab-04 ul li.active a {
  color: #000;
}
.tab-box.tab-05 ul {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #000;
}
.tab-box.tab-05 ul li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 40px 0 0;
}
.tab-box.tab-05 ul li:last-of-type {
  margin: 0;
}
.tab-box.tab-05 ul li a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 0 0 14px;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-gray-600);
}
.tab-box.tab-05 ul li.active a {
  color: #000;
  position: relative;
}
.tab-box.tab-05 ul li.active a:after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  content: "";
  background: #000;
}

/* tab-content-box */
.tab-content-box > .content {
  display: none;
}
.tab-content-box > .content.active {
  display: block;
}

/* explan-box */
.explan-box {
  margin: 0 0 15px;
  padding: 30px;
  border-radius: 10px;
  background: var(--color-gray-200);
}
.explan-box h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  line-height: 1;
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 8px;
}
.explan-box h3.smart:before {
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  margin: 0 10px 0 0;
  background: url("../images/icon_explan_smart.png") no-repeat center / cover;
}
.explan-box h3.airplain:before {
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  margin: 0 10px 0 0;
  background: url("../images/icon_explan_airplain.png") no-repeat center / cover;
}
.explan-box h3.price:before {
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  margin: 0 10px 0 0;
  background: url("../images/icon_explan_price.png") no-repeat center / cover;
}
.explan-box h3.service:before {
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  margin: 0 10px 0 0;
  background: url("../images/icon_explan_service.png") no-repeat center / cover;
}
.explan-box h3.roket:before {
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  margin: 0 10px 0 0;
  background: url("../images/icon_explan_roket.png") no-repeat center / cover;
}
.explan-box h3.order:before {
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  margin: 0 10px 0 0;
  background: url("../images/icon_explan_order.png") no-repeat center / cover;
}
.explan-box h3.excel:before {
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  margin: 0 10px 0 0;
  background: url("../images/icon_explan_excel.png") no-repeat center / cover;
}
.explan-box h3.label:before {
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  margin: 0 10px 0 0;
  background: url("../images/icon_explan_label.png") no-repeat center / cover;
}
.explan-box p {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-gray-700);
}

/* logo-box */
.logo-box {
  margin: 0 0 25px;
}
.logo-box > * {
  display: block;
  margin: 0 auto;
  font-size: 0;
  width: 194px;
  height: 33px;
  background: url("../images/logo_title.png") no-repeat center / cover;
}

/* bring-box */
.bring-box .bring-state {
  width: 100%;
  height: 10px;
  border-radius: 50px;
  background: var(--color-gray-200);
  position: relative;
}
.bring-box .bring-state > div {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 50px;
  background: var(--color-active);
}
.bring-box .bring-text {
  margin: 20px 0 0;
  background: var(--color-gray-100);
  border-radius: 10px;
  padding: 15px;
}
.bring-box .bring-text strong {
  display: block;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-gray-700);
}
.bring-box .bring-text ul {
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.bring-box .bring-text ul li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-gray-700);
}
.bring-box .bring-text ul li:after {
  display: inline-block;
  content: "";
  width: 1px;
  height: 8px;
  margin: 0 10px;
  background: var(--color-gray-300);
}
.bring-box .bring-text ul li:last-of-type:after {
  display: none;
}

/* modal-box */
.modal-box {
  pointer-events: none;
  opacity: 0;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  transition: all ease 0.5s;
  background: rgba(0, 0, 0, 0.8);
}
.modal-box .box {
  pointer-events: none;
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 20px;
  transition: all ease 0.5s;
  padding: 20px 20px 30px;
  width: 390px;
  display: flex;
  flex-direction: column;
  max-height: 90%;
}
.modal-box .box.sm {
  width: 510px;
}
.modal-box .box.md {
  width: 850px;
}
.modal-box .box.o-hidden {
  overflow: hidden;
}
.modal-box .box.image {
  width: 900px;
  max-height: 800px;
  background: none;
  border-radius: 0;
  padding: 0;
}
.modal-box .modal-close {
  position: absolute;
  right: 30px;
  top: 30px;
  width: 36px;
  height: 36px;
  font-size: 0;
  background: url("../images/icon_close_w.svg") no-repeat center / cover;
}
.modal-box .modal-head {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
.modal-box .modal-head h2 {
  flex: 1;
  min-width: 0;
  font-size: 20px;
  font-weight: bold;
}
.modal-box .modal-head .close {
  display: block;
  font-size: 0;
  width: 30px;
  height: 30px;
  background: url("../images/icon_close.svg") no-repeat center / cover;
}
.modal-box .modal-head.border {
  justify-content: center;
  position: relative;
  border-bottom: 1px solid var(--color-gray-300);
  margin: -20px -20px 20px;
  padding: 16px 20px;
  width: calc(100% + 40px);
}
.modal-box .modal-head.border h2 {
  text-align: center;
  line-height: 1;
}
.modal-box .modal-head.border .close {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.modal-box .modal-body {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 0 5px;
}
.modal-box .modal-body.mxm20 {
  width: calc(100% + 40px);
  border-radius: 0 0 20px 20px;
}
.modal-box .modal-body .modal-text {
  padding: 20px 0 0;
}
.modal-box .modal-body .modal-text h2 {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}
.modal-box .modal-body .modal-text h2.check:before {
  display: block;
  content: "";
  width: 50px;
  height: 50px;
  margin: 0 auto 15px;
  background: url("../images/icon_check_round_on.svg") no-repeat center / cover;
}
.modal-box .modal-body .modal-text p {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-gray-700);
  word-break: keep-all;
}
.modal-box .modal-body .modal-image {
  padding: 20px;
  background: var(--color-gray-100);
}
.modal-box .modal-body .modal-image img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
.modal-box .modal-foot {
  margin: 30px 0 0;
}
.modal-box.fixed {
  pointer-events: inherit;
  opacity: 1;
}
.modal-box.fixed .box {
  pointer-events: inherit;
  opacity: 1;
  top: 50%;
}

/* result-box */
.result-box {
  margin: 0 0 50px;
}
.result-box h2 {
  text-align: center;
  font-size: 35px;
  font-weight: bold;
}
.result-box h2:before {
  display: block;
  content: "";
  margin: 0 auto 20px;
  width: 50px;
  height: 50px;
  background-size: cover;
  background-position: center;
}
.result-box h2.success:before {
  background-image: url("../images/icon_check_round_on.svg");
}
.result-box h2.fail:before {
  background-image: url("../images/icon_check_fail.svg");
}
.result-box p {
  text-align: center;
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: 500;
}
.result-box small {
  display: block;
  text-align: center;
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-600);
}

/* register-button-box */
.register-button-box {
  border-radius: 10px;
  border: 1px solid var(--color-gray-300);
  padding: 15px 20px;
}
.register-button-box p {
  text-align: center;
  font-weight: 500;
  color: var(--color-gray-700);
  margin: 0 0 15px;
}
.register-button-box p a {
  display: inline-block;
  margin: 0 0 0 5px;
  font-weight: 600;
  color: #000;
}
.register-button-box ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.register-button-box ul li {
  margin: 0 15px 0 0;
}
.register-button-box ul li:last-of-type {
  margin: 0;
}
.register-button-box ul li a {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-600);
}
.register-button-box ul li a:before {
  display: block;
  content: "";
  width: 50px;
  height: 50px;
  margin: 0 auto 5px;
  background-size: cover;
  background-position: center;
}
.register-button-box ul li.naver a:before {
  background-image: url("../images/icon_button_naver.png");
}
.register-button-box ul li.email a:before {
  background-image: url("../images/icon_button_email.png");
}

/* find-result-box */
.find-result-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-300);
  border-radius: 10px;
  padding: 15px;
}
.find-result-box p {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-active2);
  margin: 0 5px 0 0;
}

/* cart-detail-box */
.cart-detail-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 500px;
  height: 750px;
  box-shadow: 0 3px 20px rgba(40, 39, 47, 0.01);
  border-radius: 15px;
  border: 1px solid var(--color-gray-300);
  background: #fff;
  z-index: 500;
  display: none;
  flex-direction: column;
}
.cart-detail-box .cart-head {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-gray-300);
  width: 100%;
}
.cart-detail-box .cart-head .list-left {
  flex: 1;
  min-width: 0;
  padding: 0 20px 0 0;
}
.cart-detail-box .cart-head .list-left strike {
  display: block;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-gray-600);
}
.cart-detail-box .cart-head .list-left strong {
  margin: 0 5px 0 0;
  font-size: 28px;
  font-weight: bold;
  color: var(--color-active);
  line-height: 1;
}
.cart-detail-box .cart-head .list-left b {
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
}
.cart-detail-box .cart-head .list-left p {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-700);
  text-align: left;
}
.cart-detail-box .cart-body {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 20px;
}
.cart-detail-box .cart-body h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
}
.cart-detail-box .cart-body h3 b {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-active);
}
.cart-detail-box .cart-foot {
  padding: 20px;
  border-top: 1px solid var(--color-gray-300);
}
.cart-detail-box .cart-foot .foot-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  background: #fef3f5;
  padding: 12px 15px;
}
.cart-detail-box .cart-foot .foot-price p {
  font-size: 13px;
  font-weight: 500;
}
.cart-detail-box .cart-foot .foot-price strong {
  font-size: 18px;
  font-weight: bold;
  color: var(--color-active);
}
.cart-detail-box.active {
  display: flex;
  top: 38px;
}
.cart-detail-box.top.active {
  top: auto;
  bottom: 38px;
}
.item-view-box .view-right .cart-detail-box {
  position: static;
  width: 100%;
  display: flex !important;
}

/* cart-list-box */
.cart-list-box > ul > li {
  margin: 0 0 20px;
  border: 1px solid var(--color-gray-300);
  border-radius: 10px;
  overflow: visible;
}
.cart-list-box > ul > li .list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: var(--color-gray-200);
  padding: 17px 20px;
}
.cart-list-box > ul > li .list-head strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}
.cart-list-box > ul > li .list-head strong:before {
  display: inline-block;
  content: "";
  width: 22px;
  height: 22px;
  margin: 0 10px 0 0;
  background: url("../images/icon_store.png") no-repeat center / cover;
}
.cart-list-box > ul > li .list-head .more {
  display: block;
  font-size: 0;
  width: 20px;
  height: 20px;
  background: url("../images/icon_cart_more.svg") no-repeat center / cover;
}
.cart-list-box > ul > li .list-body {
  border-top: 1px solid var(--color-gray-300);
  padding: 25px 20px;
  overflow: visible;
}
.cart-list-box > ul > li .list-body > ul.one {
  margin: 30px 0 0;
}
.cart-list-box > ul > li .list-body > ul {
  margin: 30px 0 0;
}
.cart-list-box > ul > li .list-body > ul > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 30px;
  padding: 0 0 30px;
  border-bottom: 1px solid var(--color-gray-300);
  overflow: visible;
}
.cart-list-box > ul > li .list-body > ul > li:last-of-type {
  margin: 0;
  padding: 0;
  border: 0;
}
.cart-list-box > ul > li .list-body > ul > li .cart-thumb {
  flex: 1;
  min-width: 0;
}
.cart-list-box > ul > li .list-body > ul > li .cart-quantity {
  margin: 0 0 0 30px;
  width: 120px;
}
.cart-list-box > ul > li .list-body > ul > li .cart-price {
  flex: 1;
  min-width: 0;
}
.cart-list-box > ul > li .list-body > ul > li .cart-button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.cart-list-box > ul > li .list-body > ul > li .cart-button > * {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 5px 0 0;
  height: 36px;
  border-radius: 5px;
  border: 1px solid var(--color-gray-300);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-gray-700);
  padding: 0 15px;
}
.cart-list-box > ul > li .list-body > ul > li .cart-button > *:last-of-type {
  margin: 0;
}
.cart-list-box .order-info {
  position: relative;
}
.cart-list-box .order-info:before {
  display: inline-block;
  content: "";
  width: 1px;
  height: 14px;
  margin: 0 15px;
  background: #cbcdd3;
}
/*新增表格*/
.cart-list-box > ul > li .list-head.check:before {
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  margin: 0 10px 0 0;
  background: url("../images/icon_check.svg") no-repeat center / cover;
  cursor: pointer;
}

.cart-list-box > ul > li .list-body tr:first-child td {
  padding-top: 0;
  padding-bottom: 30px;
}
.cart-list-box > ul > li .list-body tr:last-child td {
  padding-top: 30px;
  padding-bottom: 0;
  border-bottom: 0;
}
/*.cart-list-box > ul > li .list-body td{padding-bottom: 30px}*/
.cart-list-box > ul > li .list-body td.cart-thumb {
  width: 450px;
  border-bottom: 1px solid var(--color-gray-300);
}
.cart-list-box > ul > li .list-body td.cart-quantity {
  width: 120px;
  border-bottom: 1px solid var(--color-gray-300);
}
.cart-list-box > ul > li .list-body td.cart-price {
  width: 210px;
}
.cart-list-box > ul > li .list-body td.cart-status {
  width: 120px;
}
.cart-list-box > ul > li .list-body td.cart-cancel {
  width: 110px;
}

/* total-price-box */
.total-price-box {
  margin: 50px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  background: #fff6f8;
  border: 1px solid #ffc4ca;
  padding: 20px 30px;
}
.total-price-box .list-left h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 5px;
}
.total-price-box .list-left ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.total-price-box .list-left ul li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.total-price-box .list-left ul li:after {
  display: inline-block;
  content: "";
  width: 1px;
  height: 12px;
  background: rgba(248, 31, 60, 0.1);
  margin: 0 10px;
}
.total-price-box .list-left ul li:last-of-type:after {
  display: none;
}
.total-price-box .list-left ul li b {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-gray-700);
}
.total-price-box .list-left ul li p {
  margin: 0 0 0 5px;
  font-size: 16px;
  font-weight: 600;
  color: #ff0000;
}
.total-price-box .list-right strong {
  font-size: 30px;
  font-weight: 600;
}

/* price-info-box */
.price-info-box {
  padding: 30px;
  background: var(--color-gray-200);
  border: 1px solid var(--color-gray-300);
  border-radius: 10px;
}
.price-info-box ul li {
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.price-info-box ul li b {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-gray-700);
}
.price-info-box ul li p {
  font-size: 20px;
  font-weight: 600;
}
.price-info-box ul li:last-of-type {
  margin: 20px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--color-gray-300);
}
.price-info-box ul li:last-of-type b {
  font-size: 26px;
  font-weight: bold;
  color: #000;
}
.price-info-box ul li:last-of-type p {
  font-size: 26px;
  font-weight: bold;
  color: var(--color-red);
}

/* list-none-box */
.list-none-box {
  margin: 137px 0;
}
.list-none-box .list-none-button {
  margin: 0 0 65px;
}
.list-none-box .list-none-text strong {
  display: block;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 5px;
}
.list-none-box .list-none-text strong:before {
  display: block;
  content: "";
  width: 80px;
  height: 80px;
  margin: 0 auto 15px;
  background: url("../images/icon_logo_round.png") no-repeat center / cover;
}
.list-none-box .list-none-text p {
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: var(--color-red);
}

/* table-title-box */
.table-title-box {
  margin: 0 0 20px;
  background: #fff6f8;
  border: 1px solid #ffc4ca;
  border-radius: 10px;
}
.table-title-box table {
  table-layout: fixed;
}
.table-title-box table thead tr th {
  height: 46px;
  font-weight: 500;
  padding: 0 20px;
  text-align: left;
}

/* table-head-total-box */
.table-head-total-box {
  border: 1px solid #ffc4ca;
  border-radius: 10px 10px 0 0;
  background: #fff6f8;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.table-head-total-box p {
  font-size: 15px;
  font-weight: 600;
}
.table-head-total-box strong {
  margin: 0 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-active);
}

/* table-write-box */
.table-write-box {
  border-radius: 10px;
  border: 1px solid var(--color-gray-300);
}
.table-write-box table {
  table-layout: fixed;
  width: 100%;
}
.table-write-box table colgroup {
  width: 100%;
}
.table-write-box table tbody tr th {
  width: 200px;
  background: var(--color-gray-200);
  border: 1px solid var(--color-gray-300);
  border-width: 0 1px 1px 0;
  font-size: 15px;
  font-weight: 500;
}
.table-write-box table tbody tr td {
  padding: 15px;
  border: 1px solid var(--color-gray-300);
  border-width: 0 1px 1px 0;
  text-align: left;
}
.table-write-box table tbody tr td:last-of-type:not(.br) {
  border-right: 0;
}
.table-write-box table tbody tr td > .inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.table-write-box table tbody tr td.tit-cell {
  width: 130px;
  padding: 0 0 0 20px;
  font-size: 15px;
  font-weight: 500;
}
.table-write-box table tbody tr:last-of-type th {
  border-bottom: 0 !important;
}
.table-write-box table tbody tr:last-of-type td {
  border-bottom: 0 !important;
}
.table-write-box.small table tbody tr td {
  padding: 10px 15px;
}
.table-write-box.disabled {
  opacity: 0.3;
  pointer-events: none;
}
.table-write-box.item table tbody tr th {
  text-align: left;
  color: var(--color-gray-700);
  padding: 0 15px;
  word-break: keep-all;
  line-height: 1.3;
  font-size: 14px;
}
.table-write-box.item table tbody tr td {
  font-size: 14px;
  line-height: 1.3;
  background: #fff;
}

/* order-method-box */
.order-method-box ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -6px -12px;
}
.order-method-box ul li {
  width: calc(16.66% - 12px);
  margin: 0 6px 12px;
  position: relative;
}
.order-method-box ul li input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.order-method-box ul li label {
  height: 60px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 10px;
  border: 1px solid var(--color-gray-300);
  cursor: pointer;
}
.order-method-box ul li label p {
  width: 100%;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-gray-700);
}
.order-method-box ul li label:before {
  display: block;
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-size: cover;
  background-position: center;
}
.order-method-box ul li.worldfirst label:before {
  background-image: url("../images/icon_order_method_01.png");
}
.order-method-box ul li.alipay label:before {
  background-image: url("../images/icon_order_method_02.png");
}
.order-method-box ul li.card label:before {
  background-image: url("../images/icon_order_method_03.png");
}
.order-method-box ul li.kakaopay label:before {
  background-image: url("../images/icon_order_method_04.png");
}
.order-method-box ul li.method-01 label:before {
  background-image: url("../images/icon_order_method_05.png");
}
.order-method-box ul li.method-02 label:before {
  background-image: url("../images/icon_order_method_06.png");
}
.order-method-box ul li.method-03 label:before {
  background-image: url("../images/icon_order_method_07.png");
}
.order-method-box ul li.method-01 input:checked ~ label:before {
  background-image: url("../images/icon_order_method_05_on.png");
}
.order-method-box ul li.method-02 input:checked ~ label:before {
  background-image: url("../images/icon_order_method_06_on.png");
}
.order-method-box ul li.method-03 input:checked ~ label:before {
  background-image: url("../images/icon_order_method_07_on.png");
}
.order-method-box ul li input:checked ~ label {
  border-color: #000;
  background: var(--color-gray-100);
}
.order-method-box ul li input:checked ~ label p {
  color: #000;
}
.order-method-box.center ul li label:before {
  position: static;
  margin: 0 5px 0 0;
  transform: none;
}
.order-method-box.center ul li label p {
  width: auto;
}

/* mypage-top-box */
.mypage-top-box {
  margin: -40px -30px 30px;
  background: var(--color-gray-300);
  border-radius: 15px 15px 0 0;
  padding: 30px 30px 0;
  display: flex;
  flex-wrap: wrap;
}
.mypage-top-box .list-left {
  flex: 1;
  min-width: 0;
  padding: 0 30px 0 0;
}
.mypage-top-box .list-left h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  line-height: 1;
  font-size: 30px;
  font-weight: bold;
}
.mypage-top-box .list-left h2 .update {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: #fff;
  border-radius: 50px;
  height: 32px;
  margin: 0 0 0 5px;
  padding: 0 10px 0 8px;
  font-size: 12px;
  font-weight: 500;
}
.mypage-top-box .list-left h2 .update:before {
  display: inline-block;
  content: "";
  width: 20px;
  height: 20px;
  margin: 0 2px 0 0;
  background: url("../images/icon_pencil.svg") no-repeat center / cover;
}
.mypage-top-box .list-left p {
  margin: 5px 0 0;
  line-height: 1;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-active);
}
.mypage-top-box .list-left ul {
  margin: 20px 0 0;
  display: flex;
  flex-wrap: wrap;
}
.mypage-top-box .list-left ul li {
  margin: 0 5px 0 0;
}
.mypage-top-box .list-left ul li:last-of-type {
  margin: 0;
}
.mypage-top-box .list-left ul li a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 40px;
  border-radius: 5px;
  background: #fff;
  padding: 0 10px;
  font-weight: 500;
}
.mypage-top-box .list-left ul li a:before {
  display: inline-block;
  content: "";
  width: 18px;
  height: 18px;
  margin: 0 5px 0 0;
  background-size: cover;
  background-position: center;
}
.mypage-top-box .list-left ul li a:after {
  display: inline-block;
  content: "";
  width: 16px;
  height: 16px;
  margin: 0 0 0 2px;
  background: url("../images/icon_arrow_right.svg") no-repeat center / cover;
}
.mypage-top-box .list-left ul li.cate01 a:before {
  background-image: url("../images/icon_mypage_top_01.svg");
}
.mypage-top-box .list-left ul li.cate02 a:before {
  background-image: url("../images/icon_mypage_top_02.svg");
}
.mypage-top-box .list-left ul li.cate03 a:before {
  background-image: url("../images/icon_mypage_top_03.svg");
}
.mypage-top-box .list-right .logout {
  padding: 0 12px;
  font-weight: 500;
  color: var(--color-gray-700);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 40px;
  border-radius: 50px;
  border: 1px solid var(--color-gray-500);
}
.mypage-top-box .list-right .logout:before {
  display: inline-block;
  content: "";
  width: 18px;
  height: 18px;
  margin: 0 2px 0 0;
  background: url("../images/icon_logout.svg") no-repeat center / cover;
}
.mypage-top-box .list-cate {
  width: 100%;
  margin: 50px 0 0;
}
.mypage-top-box .list-cate ul {
  display: flex;
  flex-wrap: wrap;
}
.mypage-top-box .list-cate ul li {
  margin: 0 40px 0 0;
}
.mypage-top-box .list-cate ul li:last-of-type {
  margin: 0;
}
.mypage-top-box .list-cate ul li a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 0 14px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-gray-600);
}
.mypage-top-box .list-cate ul li a:hover {
  color: var(--color-black);
}
.mypage-top-box .list-cate ul li.active a {
  position: relative;
  color: var(--color-black);
  font-weight: bold;
}
.mypage-top-box .list-cate ul li.active a:after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  width: 100%;
  height: 4px;
  background: var(--color-active);
}

/* mypage-small-top-box */
.mypage-small-top-box {
  margin: -20px -20px 20px;
  width: calc(100% + 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: var(--color-gray-300);
  padding: 20px;
}
.mypage-small-top-box > div {
  flex: 1;
  min-width: 0;
}
.mypage-small-top-box > div p {
  font-size: 20px;
  font-weight: bold;
}
.mypage-small-top-box > div b {
  display: block;
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-active);
}
.mypage-small-top-box > small {
  text-align: right;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-700);
}

/* account-link-box */
.account-link-box > ul > li {
  margin: 0 0 10px;
  padding: 30px;
  border-radius: 15px;
  background: var(--color-gray-100);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.account-link-box > ul > li:last-of-type {
  margin: 0;
}
.account-link-box > ul > li:before {
  display: block;
  content: "";
  width: 240px;
  height: 85px;
  background-size: cover;
  background-position: center;
}
.account-link-box > ul > li .list-content {
  flex: 1;
  min-width: 0;
  margin: 0 0 0 30px;
}
.account-link-box > ul > li .list-content strong {
  display: block;
  line-height: 1;
  font-size: 20px;
  font-weight: bold;
}
.account-link-box > ul > li .list-content p {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-700);
  margin: 5px 0 0;
}
.account-link-box > ul > li .list-content ul {
  padding: 0 0 0 20px;
  margin: 10px 0 0;
}
.account-link-box > ul > li .list-content ul li {
  list-style: disc;
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 500;
}
.account-link-box > ul > li .list-content ul li:last-of-type {
  margin: 0;
}
.account-link-box > ul > li .list-content .button-box .btn {
  margin: 0 5px 0 0;
}
.account-link-box > ul > li .list-content .button-box .btn:last-child {
  margin: 0;
}
.account-link-box > ul > li.redpost:before {
  background-image: url("../images/img_account_link_01.png");
}
.account-link-box > ul > li.alipay:before {
  background-image: url("../images/img_account_link_02.png");
}
.account-link-box > ul > li.shop-1688:before {
  background-image: url("../images/img_account_link_03.png");
}
.account-link-box > ul > li.worldfirst:before {
  background-image: url("../images/img_account_link_04.png");
}
.account-link-box > ul > li.redpost .list-content strong {
  color: var(--color-active);
}
.account-link-box > ul > li.alipay .list-content strong {
  color: #1677ff;
}
.account-link-box > ul > li.shop-1688 .list-content strong {
  color: #fb4000;
}
.account-link-box > ul > li.worldfirst .list-content strong {
  color: #fe0051;
}

/* search-box */
.search-box {
  position: relative;
  margin: 0 0 30px;
  z-index: 200;
}
.search-box .search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 10px;
  border: 1px solid var(--color-active);
}
.search-box .search-form input {
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-black);
  background: none;
  border-radius: 50px;
}
.search-box .search-form input::placeholder {
  color: #6d717e;
}
.search-box .search-form .form-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 20px 0 0;
}
.search-box .search-form .form-inner ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.search-box .search-form .form-inner ul li {
  margin: 0 5px 0 0;
}
.search-box .search-form .form-inner ul li:last-of-type {
  margin: 0;
}
.search-box .search-form .form-inner ul li > * {
  padding: 0 8px;
  font-size: 10px;
  font-weight: 500;
  color: #6d717e;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 24px;
  border-radius: 50px;
  background: var(--color-gray-100);
}
.search-box .search-inner {
  pointer-events: none;
  position: absolute;
  opacity: 0;
  left: 0;
  top: 50px;
  width: 100%;
  background: #fff;
  transition: all ease 0.5s;
  box-shadow: 0 3px 20px rgba(40, 39, 47, 0.1);
  border-radius: 15px;
}
.search-box .search-inner .inner-top .top-focus {
  display: flex;
  flex-wrap: wrap;
}
.search-box .search-inner .inner-top .top-focus .inner {
  flex: 1;
  min-width: 0;
  border-right: 1px solid var(--color-gray-300);
  height: 284px;
  overflow-y: auto;
  padding: 20px;
}
.search-box .search-inner .inner-top .top-focus .inner:last-of-type {
  border-right: 0;
}
.search-box .search-inner .inner-top .top-focus .inner h2 {
  font-size: 14px;
  font-weight: bold;
  color: var(--color-active);
  margin: 0 0 15px;
}
.search-box .search-inner .inner-top .top-focus .inner p.list-none {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray-600);
}
.search-box .search-inner .inner-top .top-focus .inner ul.rank {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px -10px;
}
.search-box .search-inner .inner-top .top-focus .inner ul.rank li {
  width: calc(50% - 10px);
  margin: 0 5px 10px;
}
.search-box .search-inner .inner-top .top-focus .inner ul.rank li a {
  display: flex;
  align-items: center;
}
.search-box .search-inner .inner-top .top-focus .inner ul.rank li a b {
  width: 25px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray-600);
}
.search-box .search-inner .inner-top .top-focus .inner ul.rank li a p {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.search-box .search-inner .inner-top .top-focus .inner ul.rank li a span {
  margin: 0 0 0 2px;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-active);
}
.search-box .search-inner .inner-top .top-focus .inner ul.rank li a:hover p {
  text-decoration: underline;
}
.search-box .search-inner .inner-top .top-focus .inner ul.word li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 10px;
}
.search-box .search-inner .inner-top .top-focus .inner ul.word li .name {
  display: block;
  flex: 1;
  min-width: 0;
  padding: 0 15px 0 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
}
.search-box .search-inner .inner-top .top-focus .inner ul.word li .delete {
  display: block;
  font-size: 0;
  width: 18px;
  height: 18px;
  background: url("../images/icon_search_delete.svg") no-repeat center / cover;
}
.search-box .search-inner .inner-top .top-focus .inner ul.word li:hover .name {
  text-decoration: underline;
}
.search-box .search-inner .inner-top .top-press {
  padding: 20px;
  height: 284px;
  overflow-y: auto;
  display: none;
}
.search-box .search-inner .inner-top .top-press ul li {
  margin: 0 0 12px;
}
.search-box .search-inner .inner-top .top-press ul li:last-of-type {
  margin: 0;
}
.search-box .search-inner .inner-top .top-press ul li a {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
}
.search-box .search-inner .inner-top .top-press ul li a b {
  font-weight: 500;
  color: var(--color-active);
}
.search-box .search-inner .inner-top .top-press ul li a:hover {
  text-decoration: underline;
}
.search-box .search-inner .inner-bottom {
  border-top: 1px solid var(--color-gray-300);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
.search-box .search-inner .inner-bottom .close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 38px;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-600);
}
.search-box.focus:after {
  display: none;
}
.search-box.focus .search-inner {
  pointer-events: inherit;
  opacity: 1;
  top: 60px;
}
.search-box.focus .search-inner .inner-top .top-focus {
  display: flex;
}
.search-box.focus .search-inner .inner-top .top-press {
  display: none;
}
.search-box.press:after {
  display: none;
}
.search-box.press .search-inner .inner-top .top-focus {
  display: none;
}
.search-box.press .search-inner .inner-top .top-press {
  display: block;
}
.search-box.press .search-form .form-inner ul {
  display: none;
}
.search-box.press .search-form .form-inner .icon-camera {
  display: none;
}
.search-box.small {
  max-width: 800px;
  margin: 0 auto;
}
.search-box.small:after {
  position: absolute;
  content: "";
  left: 170px;
  top: 25px;
  width: 40px;
  height: 40px;
  background: url("../images/img_cursor.png") no-repeat center / cover;
}

/* step-box */
.step-box {
  background: #fff6f8;
  border: 1px solid #ffc4ca;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  margin: 0 0 10px;
}
.step-box .step-left {
  flex: 1;
  min-width: 0;
  padding: 0 30px 0 0;
}
.step-box .step-left b {
  display: block;
  line-height: 1;
  font-weight: 600;
  color: var(--color-active);
}
.step-box .step-left strong {
  margin: 2px 0 0;
  display: block;
  font-size: 20px;
  font-weight: bold;
}
.step-box .step-right .button-box .btn {
  margin: 0 5px 0 0;
}
.step-box .step-right .button-box .btn:last-child {
  margin: 0;
}

/* guide-title-box */
.guide-title-box {
  margin: -40px -30px 20px;
  padding: 45px 30px;
  background: url("../images/bg_guide_title.png") no-repeat center / cover;
  border-radius: 15px 15px 0 0;
}
.guide-title-box h2 {
  font-size: 30px;
  font-weight: bold;
}
.guide-title-box p {
  margin: 5px 0 0;
  font-size: 15px;
  font-weight: 500;
}

/* guide-check-box */
.guide-check-box {
  background: #fff;
  border: 1px solid var(--color-active);
  border-radius: 10px;
  box-shadow: 0 3px 20px rgba(40, 39, 47, 0.1);
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.guide-check-box > div {
  flex: 1;
  min-width: 0;
  padding: 0 30px 0 0;
}
.guide-check-box > div h3 {
  margin: 0 0 10px;
  line-height: 1;
  font-size: 26px;
  font-weight: 600;
}
.guide-check-box > .more {
  font-size: 15px;
  font-weight: 500;
}

/* address-list-box */
.address-list-box > ul > li {
  margin: 0 0 10px;
  padding: 15px;
  border: 1px solid var(--color-gray-300);
  border-radius: 15px;
}
.address-list-box > ul > li:last-of-type {
  margin: 0;
}
.address-list-box > ul > li .list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.address-list-box > ul > li .list-head strong {
  font-size: 18px;
  font-weight: bold;
}
.address-list-box > ul > li .list-head a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  height: 34px;
  border: 1px solid var(--color-gray-300);
  padding: 0 15px;
  font-size: 13px;
  font-weight: 500;
}
.address-list-box > ul > li .list-head a:hover {
  background: var(--color-gray-300);
}
.address-list-box > ul > li .list-body dl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.address-list-box > ul > li .list-body dl dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-600);
}
.address-list-box > ul > li .list-body dl dd:after {
  display: inline-block;
  content: "";
  width: 2px;
  height: 2px;
  background: var(--color-gray-300);
  border-radius: 50%;
  margin: 0 8px;
}
.address-list-box > ul > li .list-body dl dd:last-of-type:after {
  display: none;
}
.address-list-box > ul > li .list-body p {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-700);
}
.address-list-box > ul > li .list-foot {
  margin: 15px 0 0;
}
.address-list-box > ul > li .list-foot dl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.address-list-box > ul > li .list-foot dl dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.address-list-box > ul > li .list-foot dl dd:after {
  display: inline-block;
  content: "";
  width: 1px;
  height: 8px;
  margin: 0 8px;
  background: var(--color-gray-400);
}
.address-list-box > ul > li .list-foot dl dd:last-of-type:after {
  display: none;
}
.address-list-box > ul > li .list-foot dl dd a {
  font-weight: 500;
  color: var(--color-gray-600);
}

/* product-table-box */
.product-table-box table {
  table-layout: fixed;
}
.product-table-box table thead tr th {
  height: 46px;
  padding: 0 15px;
  font-weight: 500;
  color: var(--color-gray-700);
  background: var(--color-gray-100);
  text-align: left;
}
.product-table-box table tbody tr td {
  border-bottom: 1px solid var(--color-gray-300);
  padding: 8.5px 15px;
  font-weight: 500;
  text-align: left;
}
.product-table-box table tbody tr td.sm {
  font-size: 12px;
}
.product-table-box.scroll {
  overflow-x: auto;
  white-space: nowrap;
}

/* tooltip-box */
.tooltip-box {
  position: absolute;
  left: 50%;
  bottom: -45px;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: #000;
  padding: 8px;
}
.tooltip-box:before {
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  width: 16px;
  height: 14px;
  background: url("../images/icon_tooltip.svg") no-repeat center / cover;
  content: "";
}
.tooltip-box p {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  width: 100%;
  text-align: center;
}

/* order-list-box */
.order-list-box > ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px -60px;
}
.order-list-box > ul > li {
  width: calc(33.33% - 30px);
  margin: 0 15px 60px;
}
.order-list-box > ul > li .list-image img {
  width: 100%;
  border-radius: 10px;
}
.order-list-box > ul > li .list-content {
  margin: 20px 0 0;
}
.order-list-box > ul > li .list-content p {
  display: flex;
  flex-wrap: Wrap;
  align-items: center;
}
.order-list-box > ul > li .list-content p b {
  width: 33px;
  height: 30px;
  border: 1px solid #000;
  border-radius: 50%;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.order-list-box > ul > li .list-content p span {
  flex: 1;
  min-width: 0;
  margin: 0 0 0 10px;
  font-size: 20px;
  font-weight: 600;
}
.order-list-box > ul > li .list-content dl {
  margin: 10px 0 0;
  padding: 0 0 0 20px;
}
.order-list-box > ul > li .list-content dl dd {
  display: list-item;
  list-style: disc;
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-gray-700);
  word-break: keep-all;
  position: relative;
}
.order-list-box > ul > li .list-content dl dd:last-of-type {
  margin: 0;
}
.order-list-box > ul > li .list-content dl dd b {
  font-size: 15px;
  font-weight: 500;
  color: #000;
}

/* research-order-box */
.research-order-box ul {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  justify-content: space-between;
}
.research-order-box ul:after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 25px;
  width: 85%;
  height: 2px;
  border-top: 2px dashed var(--color-gray-200);
  content: "";
}
.research-order-box ul li {
  width: 94px;
  position: relative;
  z-index: 2;
}
.research-order-box ul li:after {
  position: absolute;
  right: 0;
  top: 0;
}
.research-order-box ul li b {
  position: absolute;
  left: 17px;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.research-order-box ul li p {
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-700);
}
.research-order-box ul li p:before {
  display: block;
  content: "";
  margin: 0 auto 5px;
  width: 50px;
  height: 50px;
  background-size: cover;
  background-position: center;
}
.research-order-box ul li:nth-of-type(1) p:before {
  background-image: url("../images/img_research_order_01.png");
}
.research-order-box ul li:nth-of-type(2) p:before {
  background-image: url("../images/img_research_order_02.png");
}
.research-order-box ul li:nth-of-type(3) p:before {
  background-image: url("../images/img_research_order_03.png");
}
.research-order-box ul li:nth-of-type(4) p:before {
  background-image: url("../images/img_research_order_04.png");
}

/* list-none-box */
.list-none-box {
  padding: 140px 0;
}
.list-none-box p {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-gray-700);
  text-align: center;
}

/* board-top-box */
.board-top-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 20px;
}
.board-top-box .top-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.board-top-box .top-inner h3 {
  font-size: 18px;
  font-weight: 600;
}

/* board-list-box */
.board-list-box table {
  table-layout: fixed;
}
.board-list-box table thead tr th {
  height: 46px;
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  font-size: 14px;
  font-weight: 500;
  padding: 0 15px;
}
.board-list-box table thead tr th:first-of-type {
  border-radius: 5px 0 0 5px;
}
.board-list-box table thead tr th:last-of-type {
  border-radius: 0 5px 5px 0;
}
.board-list-box table thead tr th .sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
}
.board-list-box table thead tr th .sort:after {
  display: inline-block;
  content: "";
  width: 14px;
  height: 14px;
  margin: 0 0 0 5px;
  background: url("../images/icon_sort.png") no-repeat center / cover;
}
.board-list-box table thead tr th .sort.active:after {
  background-image: url("../images/icon_sort_on.png");
}
.board-list-box table tbody tr td {
  border-bottom: 1px solid var(--color-gray-300);
  padding: 15px;
  font-weight: 500;
}
.board-list-box table tbody tr td .subject {
  display: flex;
  align-items: center;
}
.board-list-box table tbody tr td .subject p {
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.board-list-box table tbody tr td .subject span {
  font-weight: 500;
  color: var(--color-gray-600);
  margin: 0 0 0 5px;
}
.board-list-box table tbody tr td .subject .icon-lock {
  flex: 0 0 20px;
}
.board-list-box table tbody tr td .subject .icon-new {
  flex: 0 0 14px;
}
.board-list-box table tbody tr td .subject:hover p {
  text-decoration: underline;
}
.board-list-box table tbody tr td .subject.list-more:after {
  display: inline-block;
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 0 0 0 2px;
  background: url("../images/icon_arrow_bottom.svg") no-repeat center / cover;
}
.board-list-box table tbody tr td .subject.list-more.active:after {
  transform: rotate(180deg);
}
.board-list-box table tbody tr td .input-box.small input {
  height: 34px;
  font-size: 12px;
}
.board-list-box table tbody tr td.list-none {
  border-bottom: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-gray-700);
  padding: 140px 0;
  text-align: center;
}
.board-list-box table tbody tr[data-group] {
  display: none;
}
.board-list-box table tbody tr[data-group].active {
  display: table-row;
}
.board-list-box table tbody tr[data-group].active td {
  background: rgba(253, 33, 62, 0.05);
  border-bottom-color: #fff;
}
.board-list-box table tbody tr[data-group].active.last td {
  border-bottom-color: #ffcdd3;
}
.board-list-box table tbody tr.first td {
  border-bottom-color: #ffcdd3;
}
.board-list-box.red {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #ffcdd3;
}
.board-list-box.red table thead tr th {
  background: #fff6f8;
}
.board-list-box.red table tbody tr:last-of-type td {
  border-bottom: 0;
}

/* board-gallery-box */
.board-gallery-box ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px -40px;
}
.board-gallery-box ul li {
  width: calc(25% - 20px);
  margin: 0 10px 40px;
}
.board-gallery-box ul li a {
  display: block;
}
.board-gallery-box ul li a .list-image {
  position: relative;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
}
.board-gallery-box ul li a .list-image:after {
  display: block;
  content: "";
  padding-bottom: 52%;
}
.board-gallery-box ul li a .list-image .list-image-info {
  position: absolute;
  left: 10px;
  top: 10px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 -2.5px -5px;
}
.board-gallery-box ul li a .list-image .list-image-info p {
  margin: 0 2.5px 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.5);
  height: 24px;
  padding: 0 7px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.board-gallery-box ul li a .list-content {
  margin: 10px 0 0;
}
.board-gallery-box ul li a .list-content p {
  font-size: 15px;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.board-gallery-box ul li a .list-content dl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 2px 0 0;
}
.board-gallery-box ul li a .list-content dl dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-weight: 500;
  color: var(--color-gray-600);
}
.board-gallery-box ul li a .list-content dl dd:after {
  display: inline-block;
  content: "";
  width: 1px;
  height: 8px;
  margin: 0 5px;
  background: #d9d9d9;
}
.board-gallery-box ul li a .list-content dl dd:last-of-type:after {
  display: none;
}

/* board-view-box */
.board-view-box .view-head {
  border-bottom: 1px solid var(--color-gray-700);
  margin: 0 0 30px;
  padding: 0 0 30px;
  display: flex;
  flex-wrap: wrap;
}
.board-view-box .view-head > * {
  width: 100%;
}
.board-view-box .view-head .head-left {
  flex: 1;
  min-width: 0;
  margin: 0 0 14px;
}
.board-view-box .view-head .head-left .head-loca p {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-gray-600);
}
.board-view-box .view-head .head-right {
  margin: 0 0 0 30px;
}
.board-view-box .view-head .head-right .right-button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.board-view-box .view-head .head-right .right-button > * {
  margin: 0 10px 0 0;
  height: 32px;
  border-radius: 5px;
  background: var(--color-gray-200);
  padding: 0 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-gray-700);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.board-view-box .view-head .head-right .right-button > *.delete:before {
  display: inline-block;
  content: "";
  width: 20px;
  height: 20px;
  margin: 0 2px 0 0;
  background: url("../images/icon_btn_delete.svg") no-repeat center / cover;
}
.board-view-box .view-head .head-right .right-button > *.update:before {
  display: inline-block;
  content: "";
  width: 20px;
  height: 20px;
  margin: 0 2px 0 0;
  background: url("../images/icon_btn_update.svg") no-repeat center / cover;
}
.board-view-box .view-head .head-bottom {
  width: 100%;
}
.board-view-box .view-head .head-subject .sticker-box {
  margin: 0 0 5px;
}
.board-view-box .view-head .head-subject h2 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
}
.board-view-box .view-head .head-subject ul {
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.board-view-box .view-head .head-subject ul li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-weight: 500;
  color: var(--color-gray-700);
}
.board-view-box .view-head .head-subject ul li:after {
  display: inline-block;
  content: "";
  width: 2px;
  height: 2px;
  margin: 0 8px;
  background: var(--color-gray-600);
}
.board-view-box .view-head .head-subject ul li:last-of-type:after {
  display: none;
}
.board-view-box .view-body {
  padding: 30px 0 80px;
}
.board-view-box .view-body p {
  font-size: 16px;
  font-weight: 500;
}
.board-view-box .view-body img {
  display: block;
  max-width: 100%;
}

/* board-between-box */
.board-between-box > ul {
  border-top: 1px solid var(--color-gray-300);
}
.board-between-box > ul > li {
  border-bottom: 1px solid var(--color-gray-300);
}
.board-between-box > ul > li a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 20px 0;
}
.board-between-box > ul > li a b {
  width: 132px;
  font-size: 15px;
  font-weight: 600;
}
.board-between-box > ul > li a p {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 500;
}
.board-between-box > ul > li a p span {
  margin: 0 0 0 5px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-gray-600);
}
.board-between-box > ul > li a time {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-600);
}
.board-between-box > ul > li a:hover p {
  text-decoration: underline;
}
.comment-box ~ .board-between-box {
  margin: 80px 0 0;
}

/* comment-box */
.comment-box {
  margin: 0 -30px;
  padding: 30px;
  border-top: 5px solid var(--color-gray-100);
}
.comment-box .cmt-head {
  margin: 0 0 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.comment-box .cmt-head h3 {
  font-size: 18px;
  font-weight: bold;
}
.comment-box .cmt-body .comment-write-box {
  margin: 0 0 30px;
}

/* comment-write-box */
.comment-write-box {
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-300);
  border-radius: 10px;
  padding: 15px;
}
.comment-write-box textarea {
  display: block;
  width: 100%;
  height: 40px;
  font-size: 15px;
  font-weight: 500;
  background: none;
  margin: 0 0 10px;
}
.comment-write-box textarea::placeholder {
  color: var(--color-gray-600);
}
.comment-write-box .button-box .btn {
  margin: 0 5px 0 0;
}
.comment-write-box .button-box .btn:last-of-type {
  margin: 0;
}

/* comment-list-box */
.comment-list-box > ul > li {
  margin: 0 0 30px;
}
.comment-list-box > ul > li:last-of-type {
  margin: 0;
}
.comment-list-box > ul > li > .list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.comment-list-box > ul > li > .list-head .head-left {
  flex: 1;
  min-width: 0;
  padding: 0 30px 0 0;
}
.comment-list-box > ul > li > .list-head .head-left dl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.comment-list-box > ul > li > .list-head .head-left dl dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
}
.comment-list-box > ul > li > .list-head .head-left dl dd b {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 0 5px;
}
.comment-list-box > ul > li > .list-head .head-left dl dd time {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray-600);
}
.comment-list-box > ul > li > .list-head .head-left dl dd:after {
  display: inline-block;
  content: "";
  width: 2px;
  height: 2px;
  margin: 0 8px;
  background: var(--color-gray-600);
}
.comment-list-box > ul > li > .list-head .head-left dl dd:last-of-type:after {
  display: none;
}
.comment-list-box > ul > li > .list-body {
  margin: 5px 0 0;
}
.comment-list-box > ul > li > .list-body p {
  font-size: 15px;
  font-weight: 500;
}

/* point-show-box */
.point-show-box {
  margin: 0 0 50px;
}
.point-show-box ul {
  display: flex;
  flex-wrap: wrap;
}
.point-show-box ul li {
  flex: 1;
  min-width: 0;
  padding: 20px;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 10px 0 0;
}
.point-show-box ul li:last-of-type {
  margin: 0;
}
.point-show-box ul li:before {
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  margin: 0 5px 0 0;
  background-size: cover;
  background-position: center;
}
.point-show-box ul li p {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
}
.point-show-box ul li:nth-of-type(1) {
  background: #ffebee;
}
.point-show-box ul li:nth-of-type(1):before {
  background-image: url("../images/icon_point_01.png");
}
.point-show-box ul li:nth-of-type(2) {
  background: #fff8e9;
}
.point-show-box ul li:nth-of-type(2):before {
  background-image: url("../images/icon_point_02.png");
}

/* find-product-list-box */
.find-product-list-box > ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px -20px;
}
.find-product-list-box > ul > li {
  background: var(--color-gray-100);
  border-radius: 10px;
  width: calc(25% - 20px);
  margin: 0 10px 20px;
}
.find-product-list-box > ul > li .inner {
  display: block;
  padding: 20px;
}
.find-product-list-box > ul > li .inner .list-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.find-product-list-box > ul > li .inner .list-top .top-content {
  flex: 1;
  min-width: 0;
  padding: 0 10px 0 0;
}
.find-product-list-box > ul > li .inner .list-top .top-content small {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-700);
  line-height: 1.2;
}
.find-product-list-box > ul > li .inner .list-top .top-content p {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}
.find-product-list-box > ul > li .inner .list-top .top-image {
  width: 40px;
  border-radius: 5px;
  background-size: cover;
  background-position: center;
}
.find-product-list-box > ul > li .inner .list-top .top-image:after {
  display: block;
  content: "";
  padding-bottom: 100%;
}
.find-product-list-box > ul > li .inner .list-bottom {
  margin: 15px 0 0;
}
.find-product-list-box > ul > li .inner .list-bottom p {
  font-weight: 500;
  color: var(--color-gray-600);
}

/* file-list-box */
.file-list-box {
  margin: 30px 0 0;
}
.file-list-box ul li {
  margin: 0 0 5px;
}
.file-list-box ul li:last-of-type {
  margin: 0;
}
.file-list-box ul li a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: var(--color-gray-100);
  border-radius: 10px;
  padding: 15px 20px;
}
.file-list-box ul li a:before {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  margin: 0 5px 0 0;
  background: url("../images/icon_clip.svg") no-repeat center / cover;
}
.file-list-box ul li a p {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* search-list-box */
.search-list-box {
  background: var(--color-gray-100);
  border-radius: 15px;
  padding: 20px;
}
.search-list-box > ul > li {
  margin: 0 0 20px;
  display: flex;
  flex-wrap: wrap;
}
.search-list-box > ul > li:last-of-type {
  margin: 0;
}
.search-list-box > ul > li > .inner {
  margin: 0 20px 0 0;
}
.search-list-box > ul > li > .inner:last-of-type {
  margin: 0;
}
.search-list-box > ul > li > .inner .tit {
  display: block;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 500;
}
.search-list-box > ul > li > .inner .cont {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* more-toggle-box */
.more-toggle-box {
  position: relative;
}
.more-toggle-box button {
  display: block;
  font-size: 0;
  width: 20px;
  height: 20px;
  background: url("../images/icon_more_toggle.png") no-repeat center / cover;
}
.more-toggle-box .more-inner {
  pointer-events: none;
  opacity: 0;
  transition: all ease 0.5s;
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 5px;
  border: 1px solid var(--color-gray-300);
  box-shadow: 0 3px 20px rgba(40, 39, 47, 0.1);
  width: 100px;
  background: #fff;
}
.more-toggle-box .more-inner dl {
  padding: 5px 0;
}
.more-toggle-box .more-inner dl dd a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 15px;
  font-size: 12px;
  font-weight: 500;
  height: 34px;
}
.more-toggle-box .more-inner dl dd a:hover {
  background: var(--color-gray-100);
}
.more-toggle-box:hover {
  z-index: 300;
}
.more-toggle-box:hover button {
  background-image: url("../images/icon_more_toggle_on.png") !important;
}
.more-toggle-box:hover .more-inner {
  pointer-events: inherit;
  opacity: 1;
  top: 20px;
}
li.active .more-toggle-box button {
  background-image: url("../images/icon_more_toggle_w.png");
}

/* order-table-box */
.order-table-box > ul > li {
  margin: 0 0 10px;
  border: 1px solid transparent;
  border-radius: 10px;
}
.order-table-box > ul > li:last-of-type {
  margin: 0;
}
.order-table-box > ul > li .list-head {
  background: var(--color-gray-100);
  border-radius: 10px;
}
.order-table-box > ul > li .list-head table {
  table-layout: fixed;
}
.order-table-box > ul > li .list-head table thead tr th {
  padding: 34px 15px;
  font-weight: 500;
}
.order-table-box > ul > li .list-head table thead tr th:first-of-type {
  border-radius: 10px 0 0 0;
}
.order-table-box > ul > li .list-head table thead tr th:last-of-type {
  border-radius: 0 10px 0 0;
}
.order-table-box > ul > li .list-head table thead tr th .button-box {
  margin: 0 0 5px;
}
.order-table-box
  > ul
  > li
  .list-head
  table
  thead
  tr
  th
  .button-box:last-of-type {
  margin: 0;
}
.order-table-box > ul > li .list-body {
  display: none;
}
.order-table-box > ul > li .list-body table thead tr th {
  border-bottom: 1px solid var(--color-gray-300);
}
.order-table-box > ul > li .list-body table tbody tr td {
  border-right: 1px solid var(--color-gray-300);
}
.order-table-box > ul > li .list-body table tbody tr td:last-of-type {
  border-right: 0;
}
.order-table-box > ul > li .list-body table tbody tr:last-of-type td {
  border-bottom: 0;
}
.order-table-box > ul > li.active {
  border: 1px solid #ffcdd3;
}
.order-table-box > ul > li.active .list-head {
  border-bottom: 1px solid #ffcdd3;
  border-radius: 10px 10px 0 0;
}
.order-table-box > ul > li.active .list-head table thead tr th {
  background: rgba(248, 31, 60, 0.05);
}
.order-table-box > ul > li.active .list-body {
  display: block;
}

/* order-table-more-box */
.order-table-more-box .toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.order-table-more-box .toggle:after {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  background: url("../images/icon_order_table_more.svg") no-repeat center /
    cover;
}
.order-table-more-box .toggle > div {
  flex: 1;
  min-width: 0;
  padding: 0 10px 0 0;
}
.order-table-more-box .toggle > div p {
  text-align: left;
}
.order-table-more-box .toggle > div b {
  margin: 2px 0 0;
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-blue);
  text-align: left;
}
li.active .order-table-more-box .toggle:after {
  transform: rotate(180deg);
}
li.active .order-table-more-box .toggle > div b {
  color: var(--color-active);
}

/* order-table-price-box */
.order-table-price-box {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.order-table-price-box > strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-weight: 500;
}
.order-table-price-box > button {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  margin: 0 0 0 5px;
  font-size: 0;
  background: url("../images/icon_order_price_more.png") no-repeat center /
    cover;
}
.order-table-price-box > p {
  width: 100%;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-600);
  text-align: left;
}
.order-table-price-box > .price-inner {
  pointer-events: none;
  opacity: 0;
  top: 0;
  transition: all ease 0.5s;
  position: absolute;
  width: 170px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 20px rgba(40, 39, 47, 0.1);
  text-align: left;
}
.order-table-price-box > .price-inner dl dd {
  border-bottom: 1px solid var(--color-gray-300);
  padding: 10px;
}
.order-table-price-box > .price-inner dl dd:last-of-type {
  border: 0;
}
.order-table-price-box > .price-inner dl dd p {
  font-size: 13px;
  font-weight: 500;
  margin: 0 0 5px;
}
.order-table-price-box > .price-inner dl dd p:last-of-type {
  margin: 0;
}
.order-table-price-box > .price-inner dl dd p a {
  font-size: 13px;
  font-weight: 500;
}
.order-table-price-box:hover {
  z-index: 300;
}
.order-table-price-box:hover > .price-inner {
  pointer-events: inherit;
  opacity: 1;
  top: 22px;
}

/* size-list-box */
.size-list-box > ul > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 0;
  gap: 6px;
}
.size-list-box > ul > li:last-of-type {
  padding-bottom: 0;
}
.size-list-box > ul > li > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.size-list-box > ul > li .list-left {
  flex: 1;
  min-width: 0;
}
.size-list-box > ul > li .list-left p {
  font-size: 13px;
  font-weight: 500;
}
.size-list-box > ul > li .list-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.size-list-box > ul > li .list-right strong {
  min-width: 90px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}
.size-list-box > ul > li .list-right small {
  min-width: 70px;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  color: var(--color-gray-600);
}

/* main-swiper-box */
.main-swiper-box {
  position: relative;
}
.main-swiper-box > .swiper-container {
  overflow: hidden;
}
.main-swiper-box .swiper-button-prev {
  left: -20px;
  width: 40px;
  height: 40px;
  background: url("../images/icon_swiper_prev.png") no-repeat center / cover;
  box-shadow: 0 3px 20px rgba(40, 39, 47, 0.1);
  border-radius: 50%;
}
.main-swiper-box .swiper-button-prev:after {
  display: none;
}
.main-swiper-box .swiper-button-next {
  right: -20px;
  width: 40px;
  height: 40px;
  background: url("../images/icon_swiper_next.png") no-repeat center / cover;
  box-shadow: 0 3px 20px rgba(40, 39, 47, 0.1);
  border-radius: 50%;
}
.main-swiper-box .swiper-button-next:after {
  display: none;
}
.main-swiper-box .swiper-button-prev.thumb {
  top: 33%;
}
.main-swiper-box .swiper-button-next.thumb {
  top: 33%;
}
.main-swiper-box.swiper-2 {
  margin: 0 -10px -20px;
}
.main-swiper-box.swiper-2 > .swiper-container .swiper-slide {
  display: flex;
  flex-wrap: wrap;
}
.main-swiper-box.swiper-2 > .swiper-container .swiper-slide .item-box {
  width: calc(33.33% - 20px);
  margin: 0 10px 20px;
}
.main-swiper-box.swiper-2 .swiper-button-prev {
  left: -10px;
}
.main-swiper-box.swiper-2 .swiper-button-next {
  right: -10px;
}

/* item-detail-image-box */
.item-detail-image-box .inner {
  position: relative;
  height: 1200px;
  overflow: hidden;
}
.item-detail-image-box .inner:after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  width: 100%;
  height: 124px;
  background: url("../images/bg_item_detail_image.png") no-repeat center / cover;
}
.item-detail-image-box .inner img {
  width: 100%;
}
.item-detail-image-box button {
  position: relative;
  z-index: 10;
  margin: -54px 0 0;
  height: 64px;
  border: 1px solid var(--color-gray-300);
  border-radius: 10px;
  font-size: 18px;
  font-weight: 600;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.item-detail-image-box button:after {
  display: inline-block;
  content: "";
  width: 20px;
  height: 20px;
  margin: 0 0 0 5px;
  background: url("../images/icon_arrow_bottom.svg") no-repeat center / cover;
}
.item-detail-image-box.active .inner {
  height: auto;
}
.item-detail-image-box.active .inner:after {
  display: none;
}
.item-detail-image-box.active button {
  margin: 15px 0 0;
}
.item-detail-image-box.active button:after {
  transform: rotate(180deg);
}

/* item-company-more-box */
.item-company-more-box {
  margin: 0 0 30px;
}
.item-company-more-box a {
  border-radius: 10px;
  background: var(--color-gray-300);
  padding: 17px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.item-company-more-box a:after {
  display: inline-block;
  content: "";
  width: 20px;
  height: 20px;
  background: url("../images/icon_item_company_more.png") no-repeat center /
    cover;
}
.item-company-more-box a strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}
.item-company-more-box a strong:before {
  display: inline-block;
  content: "";
  width: 22px;
  height: 22px;
  margin: 0 10px 0 0;
  background: url("../images/icon_store.png") no-repeat center / cover;
}

/* item-view-text-box */
.item-view-text-box p {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-gray-600);
}
.item-view-text-box h2 {
  margin: 10px 0 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
}

/* item-score-box */
.item-score-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.item-score-box span {
  display: block;
  font-size: 0;
  width: 24px;
  height: 24px;
  background: url("../images/icon_score.png") no-repeat center / cover;
}
.item-score-box span.active {
  background-image: url("../images/icon_score_on.png");
}
.item-score-box span.active.half {
  position: relative;
}
.item-score-box span.active.half::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: url("../images/icon_score_on.png") no-repeat center / cover;
}
.item-score-box span.active.half::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  background: url("../images/icon_score.png") no-repeat center / cover;
}
.item-score-box p {
  margin: 0 0 0 10px;
  font-size: 15px;
  font-weight: 500;
}

/* item-view-banner */
.item-view-banner {
  padding: 16px 20px;
  border-radius: 10px;
  background: url("../images/bg_item_view_banner.png") no-repeat center / cover;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.item-view-banner p {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}
.item-view-banner small {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

/* item-view-slide-box */
.item-view-slide-box .thumb-swiper {
  position: relative;
}
.item-view-slide-box .thumb-swiper .swiper-slide {
  background-size: cover;
  background-position: center;
  border-radius: 10px;
}
.item-view-slide-box .thumb-swiper .swiper-slide:after {
  display: block;
  content: "";
  padding-bottom: 100%;
}
.item-view-slide-box .thumb-swiper .zoom {
  position: absolute;
  left: 15px;
  top: 15px;
  z-index: 20;
  width: 40px;
  height: 40px;
  font-size: 0;
  background: url("../images/icon_zoom.png") no-repeat center / cover;
}
.item-view-slide-box .thumb-swiper .swiper-pagination {
  background: rgba(255, 255, 255, 0.1);
  padding: 0 10px;
  height: 36px;
  font-size: 15px;
  left: auto;
  font-weight: 600;
  color: #fff;
  position: absolute;
  right: 15px;
  bottom: 15px;
  width: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
}
.item-view-slide-box .thumb-swiper .swiper-pagination span {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.item-view-slide-box .small-swiper {
  margin: 20px 0 0;
}
.item-view-slide-box .small-swiper .swiper-slide button {
  width: 120px;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  cursor: pointer;
}
.item-view-slide-box .small-swiper .swiper-slide button:after {
  display: block;
  content: "";
  padding-bottom: 100%;
}
.item-view-slide-box .small-swiper .swiper-slide.active button {
  border: 2px solid var(--color-active);
}

/* state-list-box */
.state-list-box {
  border-bottom: 1px solid #e6eaed;
  padding: 0 0 30px;
  margin: 0 0 30px;
}
.state-list-box > ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px -20px;
}
.state-list-box > ul > li {
  width: calc(20% - 10px);
  margin: 0 5px 20px;
  border-radius: 15px;
  overflow: hidden;
  background: #f9fafb;
}
.state-list-box > ul > li > h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: #f4f5f6;
  font-size: 18px;
  font-weight: bold;
}
.state-list-box > ul > li > ul {
  padding: 15px;
}
.state-list-box > ul > li > ul > li .more {
  padding: 0 10px;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 38px;
}
.state-list-box > ul > li > ul > li .more p {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 10px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: #6d717e;
}
.state-list-box > ul > li > ul > li .more span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  width: 35px;
  height: 22px;
  background: #e6eaed;
  font-size: 13px;
  font-weight: 500;
  color: #6d717e;
}
.state-list-box > ul > li > ul > li .more:hover p {
  color: #000;
  text-decoration: underline;
}
.state-list-box > ul > li > ul > li.active .more {
  background: var(--color-active);
}
.state-list-box > ul > li > ul > li.active .more p {
  color: #fff;
}
.state-list-box > ul > li > ul > li.active .more span {
  background: #fff;
  color: var(--color-active);
}
.state-list-box > ul > li.active {
  outline: 1px solid #fd213e;
  background: #fff6f8;
}
.state-list-box > ul > li.active > h4 {
  background: #ffc4ca;
}
.state-list-box > ul > li.active > ul > li .more span {
  background: #fff;
}