/* @import "../fonts/pretendard-subset.css";
@import "https://stgaccountbrazil.blob.core.windows.net/fonts/pretendard-subset.css";  */
/* @import "https://omnyx-css-h9gtfhdsgxfeasgc.z02.azurefd.net/fonts/pretendard-subset.css;" */
/* 1. CSS 변수 */
:root {

  /* --primary-color: #FF5001; */
  --primary-color: #FF6E41;
  --primary-80-color: #FF925B;
  --primary-50-color: #fff1ed;
  --secondary-color: #0090D9;
  --secondary-50-color: #97DCFF;
  --secondary-10-color: #F5F9FF;
  --font-size-base: 1.4rem;
  --text-30-color: #f9f9f9;
  --text-50-color: #f3f3f3;
  --text-100-color: #ECECED;
  --text-200-color: #E4E7EC;
  --text-300-color: #CED2DA;
  --text-400-color: #AAABAD;
  --text-500-color: #75777B;
  --text-600-color: #45494D;
  --text-900-color: #2C2D2E;
  --placeholder-color: #b5b5b5;
  --disabled-bg-color: #f2f2f2;
  --disabled-border-color: #d4d4d4;
  --disabled-text-color: #616161;
  --error-color: #D96068;
  --border-box-radius: 1rem;
  --box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
  --admin-primary-color: #242D58;
  --admin-secondary-color: #F6F6FA;
  --admin-point-color: #5B6EDC;
  --landing-text-color: #333333;
}


html,
body {
  /* height: 100%; */
  overflow: visible;
  min-height: 100dvh;
}

a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  pointer-events: none;
  cursor: default;
}

/* Reset 스타일 */
ul,
ol,
li {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

fieldset,
hr {
  border: 0;
}

a {
  color: #000;
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

/* 타이포그래피 */
html {
  font-size: 16px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 300;
  margin-bottom: 1rem;
}

h1 {
  font-size: 2.4rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.8rem;
}

h4 {
  font-size: 1.6rem;
}

h5 {
  font-size: 1.4rem;
}

label {
  font-size: 1.4rem;
}

address,
cite,
code,
em {
  font-style: normal;
  font-weight: normal;
}

/* 버튼 스타일 */
button {
  border: 0.1rem solid var(--text-300-color);
  background: #fff;
  font-weight: 400;
  border-radius: var(--border-box-radius, 0.6rem);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

.btn-fill {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

.btn-line {
  background: #fff;
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-disable {
  color: var(--disabled-text-color);
  background: var(--disabled-bg-color);
  border: none;
}

.btn-dark {
  color: #fff;
  background: var(--text-600-color);
  border: none;
}

.btn-large {
  height: 4rem;
  font-size: 1.6rem;
  font-weight: 500;
}

.btn-medium {
  height: 4rem;
  font-size: 1.5rem;
  padding: 0 2rem;
  width: auto;
}

.btn-small {
  min-height: 2.8rem;
  height: auto;
  font-size: 1.3rem;
  padding: 0 1rem;
  width: auto;
  border-radius: 0.4rem;
  line-height: 1.3rem;
}

.btn-xsmall {
  height: 2rem;
  font-size: 1.4rem;
}

/* 링크버튼 */
.button-link {
  width: calc(100% - 20px);
  display: inline-block;
  text-align: center;
  padding: 1.4rem 1rem;
  color: #fff;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0.6rem;
  font-size: 1.6rem;
  background-color: var(--primary-color);
}

/* 폼 스타일 */
input {
  font-size: 16px !important;
  line-height: 1.5;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input::placeholder {
  font-size: 16px;
  color: #aaa;
}

input:focus {
  font-size: 16px;
  border-color: #6200ea;
}

input:-webkit-autofill {
  background-color: transparent !important;
  box-shadow: 0 0 0px 1000px transparent inset !important;
  transition: background-color 5000s ease-in-out 0s;
  font-size: 16px !important;
}

input[disabled],
input[readonly] {
  background-color: transparent;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

input[type="search"]::placeholder {
  background-color: transparent !important;
  color: var(--text-400-color);
}

.retil-app-search input[type="search"] {
  background-color: transparent !important;
  /* 배경 제거 */
  -webkit-appearance: none;
  /* iOS 기본 스타일 제거 */
  -moz-appearance: none;
  appearance: none;
}

/* 플레이스홀더 배경 없애기 */
.retil-app-search input[type="search"]::placeholder {
  background-color: transparent !important;
  color: gray;
  /* 플레이스홀더 텍스트 색상 */
}

input[type="checkbox"] {
  appearance: none;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid #ccc;
  cursor: pointer;
  outline: none;
}

/* input[type="radio"]:checked, */
input[type="checkbox"]:checked {
  background-color: var(--primary-color);
}

.input-container {
  display: flex;
  /* border: 1px solid var(--text-300-color);
  border-radius: 0.6rem; */
  border-bottom: 1px solid var(--text-300-color);
  border-radius: 0rem;
  padding: 0.8rem 0;
}

/* 비활성화/읽기 전용 스타일 */
input[readonly],
input[disabled],
textarea[readonly],
textarea[disabled] {
  opacity: 0.5;
}

.form-group.disable .input-container {
  background-color: var(--disabled-bg-color);
}

.text-area.disabled {
  background-color: var(--disabled-bg-color);
  cursor: not-allowed;
  border-color: var(--disabled-border-color);
}

/* 입력 폼 스타일 */
input,
select,
textarea,
button {
  vertical-align: middle;
  color: var(--text-600-color);
  width: 100%;
  border-radius: 0.6rem;
  line-height: 1.6rem;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--text-300-color) !important;
  border: 1px solid;
}

input::-webkit-input-placeholder {
  color: var(--placeholder-color);
}

.input-prefix {
  margin-right: 1rem;
  font-size: 1.4rem;
  color: var(--text-500-color);
  display: block;
  line-height: 2.3rem
}

.disable input::-webkit-input-placeholder {
  color: var(--text-500-color) !important;
}

.text-area.disabled {
  color: #999;
  /* 원하는 폰트 색상 */
  background-color: #f0f0f0;
  /* 배경색 */
  border-color: #ddd;
  /* 테두리 색상 */
  cursor: not-allowed;
  /* 커서 스타일 */
  opacity: 1;
  /* 투명도 설정 */
}

.text-area {
  padding: 1rem;
  border-color: var(--text-200-color);
  font-size: 16px;
  width: calc(100% - 2rem);
  height: 100px
}

.text-area:focus,
.text-area.focused {
  border-color: var(--primary-color) !important;
  outline: none;
}

.error-message {
  color: #d9363e;
  font-size: 1.3rem;
  display: block;
  margin-top: 1rem;
}

/* Form Styles */
.form-group {
  margin: 1rem 0;
  position: relative;
  box-sizing: border-box;
}

input[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  background-color: var(--text-300-color);
  border: 0.5rem solid #fff !important;
  box-shadow: 0 0 0 1px var(--text-300-color);
}

input[type='radio']:checked {
  background-color: var(--primary-color);
  border: 0.5rem solid #fff !important;
  box-shadow: 0 0 0 1px var(--primary-color);
}

input:focus {
  background-color: transparent;
  /* 배경색 제거 */
  outline: none;
  /* 기본 테두리 제거 */
  box-shadow: none;
  /* 브라우저의 기본 그림자 제거 */
}

.input-container input {
  border: none;
  height: 2.4rem;
  background: none;
  font-size: 16px;
}

.input-container .btn-small {
  min-width: 6rem;
  width: auto;
}

.input-container.focused {
  border-color: var(--primary-color);
}

.input-container.retail {
  border-color: var(--primary-color);
  /* 소매 배경색 */
}

.input-container label {
  display: block;
}

.input-container.disable {
  background-color: var(--disabled-bg-color);
  cursor: not-allowed;
}

/* Radio Styles */
.btn-clear,
.btn-eye,
.btn-eye-off,
.btn-search {
  background: url('../images/btn-clear.svg') no-repeat center;
  background-size: contain;
  border: 0;
  overflow: hidden;
  height: 2.4rem;
  width: 2.4rem;
  text-indent: -100rem;
  margin-left: 0.5rem
}

.input-container.focused .btn-search {
  background: url('../images/ico-search-on.svg') no-repeat center
}

.btn-eye-on {
  background: url('../images/btn-eye.svg') no-repeat center;
  right: 1rem;
  border: 0;
  overflow: hidden;
  height: 2.4rem;
  width: 2.9rem;
  text-indent: -100rem;
  margin-left: 0.5rem
}

.btn-search {
  background: url('../images/ico-search-off.svg') no-repeat center;
}

.btn-eye-off {
  background: url('../images/btn-eye-off.svg') no-repeat center;
  right: 1rem;
}

/* Radio Group Styles */
.radio-group {
  display: flex;
  padding: 1rem 0;
  gap: 2rem;
}

.radio-group label,
.check-group label {
  /* display: flex; 
  align-items: center;
  justify-content: center; */
  display: inline-block;
  padding-left: 0.8rem;
  padding-top: 0.2rem
}


.radio-group div {
  flex: 1;
  /* display: flex; */
  justify-content: center;
  align-items: center;
}

.radio-item {
  display: flex;
}

.radio-item input:disabled+label {
  color: #aaa;
  cursor: not-allowed;
}

/* Checkbox Styles */
.check-group {
  padding: 0.6rem 0;
  display: block;
}

.check-item {
  display: flex;
  padding-bottom: 20px;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  background-color: #fff;
  position: relative;
  cursor: pointer;
  /* accent-color: transparent; */
}

/* input[type="checkbox"]:checked:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.2rem;
  height: 1.4rem;
  background-color: #fff;
  -webkit-mask-image: url('../images/ico-checked.svg');
  background-image: url('../images/ico-checked.svg');
  -webkit-mask-size: contain;
  background-size: 60%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
} */


.increment-decrement-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 5px;
}

.increment-decrement-buttons button {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 2px 5px;
  cursor: pointer;
}

.increment-decrement-buttons button:hover {
  background-color: #ddd;
}

/* 모든 브라우저에서 스핀 버튼 숨기기 */
input[type="number"] {
  -moz-appearance: textfield;
  /* Firefox */
  -webkit-appearance: none;
  /* Chrome, Safari, Edge */
  appearance: none;
  /* 최신 브라우저 */
}

/* Chrome, Safari 등 Webkit 기반 브라우저의 숫자 스핀 버튼 숨기기 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"]:focus {
  background-color: #fff;
  /* 연한 하늘색 */
  outline: none;
  /* 기본 아웃라인 제거 (선택사항) */
}


/* Round Style */
.tabs-round .tab-button {
  background-color: #fff;
  border: 1px solid var(--text-300-color);
  border-radius: 1.5rem;
  height: 3rem;
  font-size: 1.4rem;
  font-weight: 400;
}

.tabs-round .tab-button.active {
  border-color: var(--primary-color);
  color: var(--primary-color);
}


label.form-title {
  padding: 1rem 0 0.5rem;
  display: flex;
  font-size: 1.4rem;
  color: var(--text-600-color)
}

.input-container {
  position: relative;
  /* 반드시 설정 */
}

.input-container select {
  border: none;
  border-radius: 4px;
  background-color: #ffffff;
  height: 2.4rem;
  font-size: 15px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url('../images/ico-arrow-down.svg') no-repeat right;
}

.input-container select::after {
  /* content: "▼"; */
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 14px;
  color: #000;
  /* 가시적인 색상 설정 */
  visibility: visible;
  /* 확실히 보이도록 설정 */
  opacity: 1;
  /* 투명도가 낮지 않도록 설정 */
  z-index: 10;
  /* 다른 요소 위로 표시 */
  display: block;
  width: 1rem;
  height: 1rem;
  border: 1px solid #000;
}

.input-container select:focus {
  outline: none;
}

/* 앱바, 푸터메뉴 */
.appbar {
  height: 5rem;
  width: 100%;
  background: var(--secondary-color);
  position: relative;
  text-align: center;
  display: flex;
}

.common-full-popup {
  background-color: #fff;
}

.common-full-popup h2.left-title {
  color: var(--text-600-color);
}

.appbar.retail {
  background-color: var(--primary-color);
}

.retail .appbar.main {
  background-color: var(--primary-color);
}

.appbar .fl,
.appbar .fr {
  margin-top: 1rem;
  display: flex;
}

.appbar .fl {
  float: left;
  display: flex;
  padding-left: 1rem;
  width: calc(100% - 6rem);
}

.appbar .fr {
  float: right;
  padding-right: 1rem;
}

.appbar .center {
  width: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.appbar button {
  background-size: contain;
  border: 0;
  overflow: hidden;
  height: 3rem;
  width: 3rem;
  text-indent: -100rem;
  border-radius: 0;
  position: relative;
}

.appbar button.appbar-close {
  background: url('../images/appbar-close.svg') no-repeat center;
}

.appbar button.appbar-logo {
  background: url('../images/appbar-logo.svg') no-repeat center;
  width: 8rem;
  background-size: 100%;
}

.appbar .appbar-logo-center {
  background: url('../images/appbar-logo.svg') no-repeat center;
  width: 7rem;
  background-size: 100%;
  border: 0px solid #000;
}

.appbar .appbar-logo-center-detail {
  background: url('../images/appbar-logo-g.svg') no-repeat center;
  width: 7rem;
  background-size: 100%;
  border: 0px solid #000;
}

.appbar-menu {
  background: url('../images/appbar-category-c.svg') no-repeat center;
}

.appbar-my-store {
  background: url('../images/appbar-my-store.svg') no-repeat center;
}

.appbar-home {
  background: url('../images/appbar-home.svg') no-repeat center;
}

.appbar-wholesale-home {
  background: url('../images/appbar-dashboard.svg') no-repeat center;
}

.retail-store-main .appbar-home {
  background: url('../images/appbar-wholesale-me.svg') no-repeat center;
}

.appbar-search {
  background: url('../images/appbar-search-o.svg') no-repeat center;
}

.appbar-alarm {
  background: url('../images/appbar-alarm.svg') no-repeat center;
}

.appbar-alarm.deactive {
  background: url('../images/appbar-alarm-deactive.svg') no-repeat center;
}

.appbar-lens {
  margin-left: 5px;
  background: url('../images/appbar-lens.svg') no-repeat center;
}

.appbar-qrcode {
  background: url('../images/appbar-qrcode.svg') no-repeat center;
  margin-left: 5px;
}

.appbar-cart {
  background: url('../images/appbar-cart.svg') no-repeat center;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: #000;
}

.appbar a {
  display: inline-block;
  background-size: contain;
  border: 0;
  overflow: hidden;
  height: 3rem;
  width: 3rem;
  text-indent: -100rem;
  border-radius: 0;
  position: relative;
  padding-left: 1rem;
}

.appbar a.appbar-login {
  color: #fff;
  text-indent: 0;
  width: auto;
  border: 1px solid #fff;
  font-size: 1.4rem;
  padding: 0.3rem 1rem;
  border-radius: 4px;
  height: 20px;
  line-height: 20px;
}

.appbar button.appbar-login {
  color: #fff;
  text-indent: 0;
  width: auto;
  border: 1px solid #fff;
  font-size: 1.4rem;
  padding: 0.3rem 1rem;
  border-radius: 4px;
  line-height: 20px;
  background: none;
}


.appbar-pre {
  background: url('../images/appbar-pre.svg') no-repeat center;
  padding-left: 0rem !important;
  margin-left: -0.5rem
}

a.appbar-pre {
  background: url('../images/appbar-pre.svg') no-repeat center;
}

.appbar .title,
.appbar .left-title {
  color: #fff;
  font-weight: 500;
  font-size: 1.6rem;
  /* display: flex; */
  align-items: center;
  justify-items: center;
  height: 2rem;
  margin-top: 0.5rem;
  max-width: calc(100% - 8rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-num {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #fff;
  color: var(--primary-color);
  font-size: 0.9rem;
  font-weight: 800;
  border-radius: 50%;
  min-width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-indent: 0%;
}

.badge-dot {
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  background-color: #fff;
  border-radius: 50%;
  min-width: 0.5rem;
  height: 0.5rem;
}

.navigation-bar {
  position: fixed;
  width: 100%;
  z-index: 10;
  top: 0px;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.navigation-bar-custom {
  /* max-width: 800px; */
  display: flex;
  align-items: center;
  width: 100%;
  background: #fff;
  position: relative;
}

.btn-cart-order {
  margin-right: 2rem;
  background: var(--primary-50-color);
  border: 0;
}

.tab-bar {
  display: flex;
  width: 100%;
  position: fixed;
  bottom: 0;
  /* 화면 하단에 배치 */
  left: 0;
  z-index: 1;
  /* 다른 요소 위에 표시 */
  align-items: center;
  justify-content: center;
}

.footer-bar {
  width: 100%;
}

.footer {
  max-width: 1200px;
  position: relative;
  display: flex;
  width: 100%;
  background: #fff;
  border: 1px solid var(--text-200-color);
  box-shadow: var(--box-shadow);
  margin: 0 auto;
  border-radius: 10px 10px 0 0;
}

.index-footer {
  overflow-x: hidden;
  position: relative;
  display: flex;
  margin: 0 auto;
  border-radius: 0;
  padding: 0px;
  justify-content: center;
  align-items: center;
  padding: 0;
  background: var(--text-30-color);
  border: 0;
  box-shadow: none;
}

.footer .copyright {
  display: flex;
  gap: 30px;
  justify-items: center;
  justify-items: center;
  padding: 20px;
}

.footer .copyright .logo {
  background: url(../images/appbar-logo-g.svg) no-repeat center;
  width: 60px;
  height: 28px;
  background-size: 100%;
  text-indent: -1000px;
  overflow: hidden;
  opacity: 0.8;
}

.footer .copyright ul {
  display: flex;
  justify-items: center;
  align-items: center;
  flex-direction: column;
}

.footer .copyright li {
  font-size: 14px;
  padding-bottom: 10px;
  color: var(--text-400-color);
  display: flex;
  justify-items: center;
  /* align-items: center; */
  justify-content: space-between;
}

.footer .copyright li a {
  text-decoration: underline;
}

.footer .copyright li.omnyx-intro {
  font-weight: 500;
  display: flex;
  justify-items: center;
  align-items: center;
  flex-direction: column;
}

.footer .copyright li.omnyx-intro p {
  text-align: center;
  font-size: 14px;
  color: var(--text400-color);
  font-weight: 300;
}

.footer .copyright li.contact-us {
  display: flex;
  gap: 10px;
  justify-items: center;
  /* align-items: center; */
  color: var(--text-600-color);
}

.footer .copyright li.copyright-txt {
  padding-top: 10px;
}

.footer-link {
  display: flex;
  gap: 20px;
  padding-top: 10px;
}

.no-myinfo-bar .appbar-util {
  display: none;
}

.cart-total-amount {
  position: relative;
  margin: 0 auto;
  align-items: center;
  /* justify-items: center; */
  padding: 2rem 8rem;
  width: 100%;
  z-index: 600;
}

.bottom-sheet .cart-total-amount {
  width: auto;
  border-top: 1px solid var(--text-200-color);
  padding: 2rem 0 0 0;
}

.bottom-sheet-content .cart-total-amount button.btn-bill-detail.open {
  right: 0;
}

.cart-total-amount button {
  width: 100%;
}

.bottom-sheet-content .bottom-sheet-footer {
  border-top: 1px solid var(--text-200-color);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
}

.bottom-sheet-content .bottom-sheet-footer .selected-total-product {
  border: 0;
  margin-top: 0;
  padding: 1.6rem 4rem;
}

.bottom-sheet-content .bottom-sheet-footer .btnlist {
  padding: 0rem 2rem 2rem 2rem;
}

.bottom-sheet-body {
  margin-bottom: 120px;
  overflow-y: auto;
  max-height: calc(100vh - 290px);
}

.bottom-sheet-body .size-list.detail-size {
  margin: 0 0 3rem 0;
}

.bottom-sheet-option-select .bottom-sheet-content {
  max-height: calc(100vh - 90px);
  overflow-y: hidden;
}

.bottom-sheet-quck-order .bottom-sheet-content {
  height: calc(100vh - 90px);
}

.bottom-sheet-quck-order .btnlist,
.bottom-sheet-quck-order .selected-total-product {
  padding-bottom: 0 !important;
}

.bottom-sheet-option-select .size-list.detail-size {
  margin: 0rem 0 1rem 0;
}

.bottom-sheet-quck-order .bottom-sheet-body {
  overflow-y: auto;
  max-height: calc(100vh - 190px);
}

.bottom-sheet-quck-order .option-edit-table input {
  text-align: center;
}

/* 이미지 업로드 */
.img-uploader-wrap h4,
.standard-Category label.form-title,
.video-upload-wrap h4 {
  font-weight: 500;
  font-size: 1.5rem;
  padding: 10px 0;
}

.img-uploader-wrap h5 {
  color: var(--primary-color);
}

.image-grid {
  margin-top: 10px;
}

.image-item {
  position: relative;
  border-radius: 4px;
  float: left;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem
}

.image-item button.image-preview-button {
  border: 0;
}

.image-preview-wrap {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.image-preview {
  width: 100%;
  object-fit: cover;
}

.remove-button {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #202B37;
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.upload-container-wrap {
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-image-label {
  position: absolute;
  bottom: 5px;
  left: 5px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 4px;
}

.upload-container {
  float: left;
  margin-right: 0.5rem;
}

.upload-label {
  display: inline-block;
  padding: 0px;
  color: var(--text-500-color);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  width: 100px;
  height: 100px;
  border: 1px solid var(--text-300-color);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.upload-label:hover {
  background-color: var(--text-50-color);
}

.upload-img {
  text-align: center;
  background: url('../images/upload-img.svg') no-repeat;
  background-size: 100%;
  width: 4rem;
  height: 4rem;
}

.upload-img .count {
  margin-top: 4rem
}

.upload-img img {
  padding-bottom: 1rem
}

.upload-input {
  display: none;
}

.highlight {
  color: var(--primary-color);
  font-weight: 600;
}

/* 동영상 업로드 */
.video-upload-wrap h5 {
  color: var(--primary-color)
}

.video-upload-wrap .upload-label {
  width: 100px;
  height: 130px;
}

/* .video-upload-wrap h4 {
  padding-top: 5px;
  padding-bottom: 5px;
} */

.video-upload-wrap h5 {
  padding-bottom: 5px;
}

.video-preview-button {
  width: 100px;
  height: 130px
}

.video-upload-wrap .modal-content {
  width: auto !important;
  max-width: max-content;
  min-height: fit-content;
}

.video-item {
  width: 100px;
  position: relative;
}

.video-grid {
  display: flex;
}

.video-grid .upload-container {
  float: none;
  width: auto;
  height: 130px;
  width: 150px;
  padding-top: 10px;
}

.btn-video-upload-confirm {
  width: auto;
  padding: 5px
}

.video-upload-message p {
  padding-left: 10px;
  font-size: 14px;
  color: #dc3545;
}

/* Miscellaneous Styles */
.component {
  padding: 2rem 0;
}

.btnlist {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}

.btnlist div {
  flex: 0.6;
  padding: 0.2rem;
}

/* 상품이미지 */
.product-list-section .tip {
  color: var(--secondary-color);
  padding: 10px 10px 5px 5px;
}

.product-list {
  display: flex;
  gap: 1rem;
}

.thumbnail {
  width: 15rem;
}

.thumbnail-content {
  width: 15rem;
  height: 18rem;
  overflow: hidden;
  border-radius: var(--border-box-radius);
  border: 1px solid var(--text-100-color);
  position: relative;
}

.thumbnail-content .promotion-bedge {
  position: absolute;
  top: 0
}

.thumbnail-content .promotion-bedge span {
  display: block;
  background-color: var(--primary-color);
  font-size: 1.1rem;
  color: #fff;
  border-radius: var(--border-box-radius);
  padding: 0.4rem;
  margin-bottom: 0.2rem;
  text-align: center;
}

.thumbnail-content .promotion-bedge span.hotdeal {
  background-color: var(--secondary-color);
}

.thumbnail img {
  width: 100%;
  display: block;
  max-width: 100%;
  height: auto;
}

.thumbnail .seller-logo {
  height: 3rem;
  width: 3rem;
  position: absolute;
  bottom: 0.6rem;
  left: 0.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 50%;
}

.thumbnail .seller-logo img {
  border-radius: 50%;
  border: 1px solid var(--text-300-color);
  object-fit: contain;
}

.thumbnail-content .btn-like,
.thumbnail-content .btn-like-on {
  background: url('../images/ico-like.svg') no-repeat center;
  width: 4rem;
  height: 4rem;
  position: absolute;
  top: 0;
  right: 0;
}

.thumbnail-content .btn-like-on {
  background: url('../images/ico-like-on.svg') no-repeat center;
}

.product-info {
  width: 16rem;
  margin-top: 1rem;
  font-size: 1.4rem;
  top: 22rem;
  text-align: left;
}

.product-price {
  font-weight: 600;
  /* text-align: right; */
  font-size: 16px;
}

.product-info .product-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-info .seller-name {
  color: var(--text-400-color);
  font-size: 1.3rem;
}

/* 탭 */
.tabs-group {
  padding: 0rem 2rem 0rem 2rem;
}

.tabs-group .tabs {
  display: flex;
  border: 0;
  gap: 6px;
}

/* Line 스타일 */
.main-tab {
  background: #fff;
}

.tabs-line .tab-button {
  border: none;
  border-bottom: 2px solid var(--text-100-color);
  border-radius: 0;
  height: 4.4rem;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--text-500-color);
}

.main-tab .tabs-line .tab-button {
  /* border-bottom: 2px solid #fff; */
}

.tabs-line .tabs-button .tab-button.active {
  border-bottom: 2px solid var(--primary-color);
  color: var(--primary-color);
}

.tabs-line .tab-button.active {
  border-bottom: 2px solid var(--primary-color);
  font-weight: bold;
  background-color: transparent;
  color: var(--primary-color);
}

/* Button 스타일 */
.tabs-button .tab-button {
  border-radius: 4px;
  height: 3.6rem;
  font-size: 1.5rem;
  border: 1px solid var(--text-300-color);
}

.tabs-button .tab-button.active {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.btn-icon {
  background-size: contain;
  border: 0;
  overflow: hidden;
  text-indent: -100rem;
}

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

hr.divider {
  height: 0.4rem;
  background-color: var(--text-50-color);
  width: 100%;
}

hr.divider-thin {
  height: 0.1rem;
  background-color: var(--text-100-color);
  width: 100%;
}

/* 아코디언  */
.accordion-header {
  position: relative;
  background: #fff;
  padding: 0.5rem 1rem 1.5rem 0.5rem;
  font-size: 1.6rem;
  margin-top: 1px;
}

.accordion .accordion-item {
  border: 1px solid var(--text-100-color);
  box-shadow: var(--box-shadow);
  padding: 10px;
  margin-bottom: 20px;
  border-radius: var(--border-box-radius);
}

ㅏ .accordion-header h3 span.case,
.accordion-header h3 span.correspondent {
  margin-right: 4rem;
}

.accordion-arrow {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
  position: absolute;
  right: 1rem;
  top: 0.5rem;
  display: inline-block;
  transform-origin: center;
}

.accordion-arrow img {
  margin: 0;
}

.accordion-arrow.open {
  transform: rotate(-180deg);
  transition: transform 0.3s ease;
}

.accordion-arrow.closed {
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-content.open {
  max-height: 100%;
}

.accordion-content {
  opacity: 0;
  transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
}

.accordion-content.open {
  opacity: 1;
}

.accordion-header h3 {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  font-size: 1.6rem;
}

.case {
  color: #666;
  font-size: 0.9em;
}

.correspondent {
  color: #333;
  font-weight: bold;
  font-size: 0.9em;
}


/* 옵션테이블 */
.color-size-option-wrap {
  position: relative;
}

.option-table .btnlist {
  display: block;
}

.option-table .delete-select {
  padding: 1.5rem 0 1rem;
}

.option-table th,
.option-table td {
  border: 0.1rem solid;
  border-color: var(--text-300-color);
  height: 2rem;
}

.option-table th {
  background-color: var(--text-50-color);
  font-size: 1.4rem;
}

.option-table td {
  text-align: center;
  font-size: 1.4rem;
}

.option-table td.category-dep {
  text-align: left;
  padding: 0.5rem;
  font-size: 1.4rem;
}

.select-option .color-circle-name {
  display: none;
}

.select-option table {
  margin-top: 1rem;
}

.select-option th {
  background: var(--text-50-color);
  border-color: var(--text-100-color);
  font-size: 1.5rem;
  padding: 0.5rem
}

.select-option td {
  font-size: 1.5rem;
  border: 1px solid var(--text-200-color);
  padding: 0.5rem;
  text-align: right;
}

.select-option td.center {
  text-align: center;
  width: 3rem;
  padding-left: 1rem
}

.select-option-edit td {
  text-align: center;
}

.select-option-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 20px;
}

.select-option-head .select-option-title p {
  font-size: 15px;
  padding-top: 10px;
  color: var(--admin-primary-color)
}

.select-option-head .select-option-title h2 {
  font-size: 1.8rem;
}

.select-option-head .btnlist div {
  flex: 1;
}

.option-select-wrap .section {
  padding: 1rem 0 2rem 0;
}

.option-select-wrap .section h4 {
  padding-bottom: 1rem;
  font-size: 1.6rem;
  margin-top: -0.5rem
}

/* 일반 상태 */
.option-table input[type="number"] {
  width: calc(100% - 10px);
  height: 2rem;
  border: 1px solid #ccc;
  padding: 0.5rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  border: 0;
  text-align: right;
}

/* 포커스 시 */
.option-table input[type="number"]:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  outline: none;
  background: #F1F6FF;
  border: 0 !important;
  color: #007bff;
  border-radius: 0;
}

/* 오류 상태 */
.option-table input[type="number"].error {
  border-color: #dc3545;
  /* 빨간 테두리 */
  background-color: #f8d7da;
  /* 연한 빨간 배경 */
}

.option-table td {
  text-align: center;
}

.option-table th {
  padding: 0.5rem;
}

.option-table th.chk {
  width: 5rem;
}

.option-table th.color,
.option-table th.size {
  width: 5rem;
}

.option-table th.color,
.option-table th.size {
  width: 6rem;
}

/* 컬러옵션선택 */
.color-option-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.color-option-list .color-item {
  flex: 0 0 auto;
  padding: 0.2rem 1.6rem 0.2rem 0.2rem;
  border: 1px solid var(--text-100-color);
  border-radius: 2rem;
  position: relative;
}

.color-option-list .color-item .btn-color-detele {
  position: absolute;
  width: 20px;
  height: 20px;
  right: 3px;
  top: 3px;
  z-index: 10;
  border: 0;
  text-indent: -1000px;
  overflow: hidden;
  background: url('../images/btn-delete.svg') no-repeat center;
}

.color-option-list .color-item .btn-color-detele:hover {
  background: #fff url('../images/btn-delete.svg') no-repeat center;
}

.color-item.selected .color-circle {
  border: 1px solid var(--text-300-color);
}

.color-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.color-list.detail-list {
  /* flex-wrap: nowrap; */
  margin: 2rem 0.3rem;
}

.color-list.detail-list .color-item {
  flex: 0;
}

.retail .color-list.detail-list .color-item .color-circle {
  width: 3.2rem;
  height: 3.2rem;
}

.retail .color-list.detail-list .color-item .color-circle::after {
  border: 3px solid var(--primary-color);
  width: 3.2rem;
  height: 3.2rem;
  margin-top: 6px;
  background: url('../images/ico-checked.svg') no-repeat center;
  background-size: 40%;
}

.color-list.detail-list.disabled,
.color-list.detail-list .disabled,
.size-list.detail-size.disabled,
.size-list.detail-size .disabled {
  opacity: 1;
  color: var(--text-600-color);
  padding: 0;
  margin: 0
}

.color-list.detail-list.disabled {
  gap: 0;
  margin-bottom: 0rem;
}

.color-list.detail-list.disabled .color-circle::after {
  display: none;
}

.color-list.detail-list.disabled .color-circle {
  /* border-radius: 0;
  border: 1px solid var(--text-300-color); */
  margin-left: 5px;
  width: 3.2rem;
  height: 3.2rem;
}

.size-list.detail-size.disabled {
  margin-bottom: 1rem;
}

.size-list.detail-size.disabled .size-item {
  border: 0;
  background: none;
  text-align: left;
  padding: 0;
  margin-left: 0.4rem
}

.detail-size p {
  font-size: 15px;
  color: var(--primary-color);
}

.color-item {
  display: flex;
  align-items: center;
  flex: 1 1 100%;
  box-sizing: border-box;
  font-size: 1.4rem;
}

.bottom-sheet .color-item span {
  display: none;
}

.option-select-wrap .color-item span {
  display: block;
}

.color-circle {
  position: relative;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--text-300-color);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  background-size: contain;

}

.color-item .color-circle {
  margin-right: 3px;
}

.color-option-list .color-item.selected {
  background: var(--secondary-10-color);
  border-color: var(--secondary-color);
  color: var(--secondary-color);
}

.color-option-list .color-item.selected .color-circle::after {
  border: 0;
}

.selected .color-circle::after {
  content: "";
  width: 2.6rem;
  height: 2.6rem;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  background: none;
  border-radius: 50%;
  z-index: 0;
  border: 1px solid var(--secondary-color)
}

.retail .selected .color-circle::after {
  border: 1px solid var(--primary-color);
}

.color-option-list .color-item.selected::after {
  border: 1px solid var(--secondary-color)
}

.color-name {
  padding: 0 2rem 0 0.5rem;
  font-size: 1.4rem;
}

.color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.color-name {
  font-size: 14px;
  font-weight: normal;
}

.selected .color-name {
  font-weight: bold;
  color: #000;
}

/***************  슬라이더 시작 ***************/

.swiper {
  position: relative;
  overflow: hidden;
}

/* .swiper-wrapper {
  aspect-ratio: 4 / 5;
} */

.swiper-slide {
  align-items: center;
  justify-content: center;
}

.swiper-slide img {
  height: 100%;
  object-fit: cover;
}

/* 옴니추천 배너 슬라이더 */

.banner-slider {
  position: relative;
  width: 100%;
  height: auto;
  /* aspect-ratio: 2 / 1; */
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.video-container-video {
  width: 115%;
  margin-left: -10px;
}

.video-container-video video::-webkit-media-controls {
  display: none !important;
}

.video-container-video video {
  -webkit-appearance: none;
}

.video_text_container {
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.video_text_container h2 {
  font-size: 20px;
  width: auto;
  color: #fff;
  padding-bottom: 10px;
}

.video_text_container button {
  width: auto;
  color: #fff;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #fff;
  background: none;
  border-radius: 0;
}

.banner-slider-wrap {
  padding-top: 46px;
}

.banner-slider-inner {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* justify-content: space-evenly; */
}

.banner-slider-inner p {
  font-size: 26px;
  font-weight: 600;
  color: #753B01;
  text-align: center;
}

.banner-slider-inner button {
  width: auto;
  background: #AA5500;
  color: #fff;
  padding: 16px 36px;
  border: 0;
  border-radius: 50px;
  font-size: 16px;
  margin-top: 20px;
}

.slider-counter {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 14px;
  z-index: 10;
}

.swiper-button-prev,
.swiper-button-next {
  color: #fff !important;
}

.swiper-pagination-bullet-active {
  background: #fff !important;
}

.swiper-button-prev,
.swiper-button-next {
  display: none !important;
}

.main-product .swiper-wrapper {
  height: 240px;
  width: 100%;
  display: flex;
}


.main-product .swiper-slide {
  flex-shrink: initial;
  flex-shrink: 0;
  width: 144px !important;
  text-align: center;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
}

.main-product .swiper-wrapper {
  margin-left: 2rem;
}

.detail-slider {
  position: relative;
  width: calc(100% - 0rem);
  justify-content: flex-start;
  margin: 0 2rem;
}

.detail-slider .swiper-slide {
  width: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
}

.detail-slider .swiper-slide,
.detail-slider .swiper-zoom-container,
.detail-video,
.detail-video-inner {
  height: 760px;
}

.detail-slider .swiper-slide img {
  height: 100%;
  width: auto !important;
  object-fit: cover;
  object-position: center;
}

.detail-slider {
  display: flex;
  gap: 8px;
}

.thumb-bar {
  display: flex;
  gap: 8px;
  width: 66px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-x: hidden;
  margin-left: -61px;
  position: relative;
  height: 720px;
  margin-top: 100px;
  position: absolute;
  z-index: 1;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  top: 72px
}

button.thumb {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border: 1px solid var(--text-100-color);
  border-radius: 0;
}

.thumb img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  opacity: .4;
  transition: opacity .2s;
}

.thumb.active {
  border: 1px solid var(--primary-color);
}

.thumb.active img {
  opacity: 1;
  outline: 2px solid #333;
}

.btn-play-wrap {
  border: 1px solid var(--text-400-color);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  width: 64px;
  position: absolute;
  top: 81px;
  overflow: hidden;
  left: 20px;
  z-index: 1;
  background-color: var(--text-300-color);
}

.btn-play-wrap video {
  width: 110% !important;
  object-fit: cover;
  /* opacity: .4;
    transition: opacity .2s; */
}

.btn-play-wrap.disable {
  opacity: 0.3;
}

.btn-play {
  position: absolute;
  z-index: 1;
  background: none;
  font-size: 20px;
  border-radius: 0;
  width: auto;
  border: 0
}

/* 상품 상세 슬라이더 */
.detail-slider-wrap {
  /* display: flex; */
  padding-right: 0px;
  padding-left: 80px;
}

.detail-slider-wrap .detail-video {
  width: calc(100% - 0px);
  margin-left: 20px;
}

/* 버튼이 가려질 때 예시 해결 */
.swiper-button-prev,
.swiper-button-next {
  z-index: 10;
  /* 위로 */
}

.btn-prev,
.btn-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2;
  user-select: none;
  width: 60px;
  height: 60px;
  text-indent: -9999px;
  overflow: hidden;
  line-height: 100;
}

.btn-prev {
  left: 12px;
  text-align: left;
  background: url("../images/icon-pre.svg") left/contain no-repeat;
  background-size: 30%;
}

.btn-next {
  right: 12px;
  text-align: right;
  background: url("../images/icon-next.svg") right/contain no-repeat;
  background-size: 30%;
}

/* 줌 버튼 아이콘 (예: 오른쪽 위) */
.btn-zoom {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  background: url("../images/btn-zoom.svg") center/contain no-repeat;
  border: none;
  cursor: none;
  z-index: 30;
  transition: transform 0.3s ease;
  /* 0.15s → 속도 지정 */
}

/* 커서 숨기기 */
.slider-wrap.hide-cursor {
  cursor: none;
}

/* 슬라이더 영역 */
.slider-wrap.hide-cursor .btn-zoom {
  cursor: none;
}

/* 버튼 위에서도 숨김 */


/* 상품 상세 동영상 */
.detail-video-inner {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 4 / 5;
}

.btn-play {
  position: absolute;
  z-index: 1;
  background: none;
  font-size: 20px;
  border-radius: 0;
  width: auto;
  width: 42px;
  height: 42px;
  background: url("../images/play.svg") center / contain no-repeat;
}

.btn-play.playing {
  /* isPlaying === true */
  background-image: url("../images/pause.svg");
}

/* 소매 스토어 메인 슬라이더 */
.store-main-slider {
  width: 100%;
  overflow: hidden;
  display: flex;
  /* margin-top: 60px; */
  height: 340px;
  position: relative;
}

.store-main-slider,
.store-main-slider .swiper {
  width: 100%;
  box-sizing: border-box;
}

.store-main-slider .store-info {
  position: absolute;
  z-index: 110;
  color: #fff;
  font-size: 26px;
  left: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  z-index: 3;
}

.store-info p {
  font-size: 12px;
  padding-top: 6px;
}

.store-main-slider .store-info h4 {
  font-size: 24px;
  padding-bottom: 5px;
  font-weight: 500;
}

.store-main-slider .store-info h5 {
  display: inline-block;
  font-size: 13px;
  font-weight: 200;
}

.store-main-slider .swiper-wrapper {
  display: flex;
  height: 390px;
}

.store-main-slider .slide-image-container img {
  width: 100%;
}

.image-wrapper {
  position: relative;
}

.image-wrapper img {
  display: block;
}

.image-wrapper .overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 50%);
  z-index: 2;
}

.product-modify {
  border-top: 1px solid var(--text-300-color);
  padding-bottom: 40px !important;
}


/* 슬라이드 컨테이너에 원하는 종횡비를 설정 */
.slide-image-container {
  width: 100%;
  /* 부모 너비 100% */
  aspect-ratio: 4 / 3;
  /* 가로:세로 = 4:3 예시, 필요에 따라 변경 */
  overflow: hidden;
}

/* 이미지가 공간 전체를 채우도록 절대 위치 & object-fit */
.slide-image-container img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-image {
  width: 100%;
  object-fit: contain;
}


/* 카테고리슬라이더 */
.category-slider {
  width: 100%;
}

.category-slider .swiper {
  height: 4rem
}

.category-slider .swiper-wrapper {
  height: 40px;
  margin-top: 1rem;
  height: 4rem
}

.category-slider .swiper-slide {
  flex-shrink: 0;
  width: auto;
  text-align: center;
  aspect-ratio: unset;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: none;
  height: 4rem;
  margin-right: 0 !important;
  margin-left: 1rem;
}

.category-slide button {
  background: var(--text-30-color);
  border: 1px solid var(--text-300-color);
  border-radius: 3rem;
  padding: 8px 20px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

.product-search-swiper {
  display: flex;
  justify-content: flex-start;
  height: 6rem;
  margin-bottom: 3rem
}

.product-search-swiper .swiper-wrapper {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.product-search-swiper .swiper-slide {
  width: auto;
  margin-right: 0.5rem;
  margin-top: 1.6rem;
}

.product-search-swiper .swiper-slide button {
  padding: 0.8rem 1.2rem;
  font-size: 1.6rem;
  border-radius: 2rem;
}

/***************  슬라이더 끝 ***************/

.size-list,
.time-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.option-title {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

.option-item {
  position: relative;
  margin-right: 2rem;
  color: var(--text-500-color);
  font-size: 1.4rem;
}

.option-item .option-item-list {
  margin-right: 2rem;
  padding: 0 0.5rem;
}

.option-item .btn-delete {
  position: absolute;
  right: 0;
  top: 10px;
}

.option-bottom-seet .section.option-table-wrap {
  padding-top: 0;
  margin-top: -3rem;
  padding-bottom: 0
}

.option-bottom-seet h4 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 400;
}

.section.dropdown-section {
  padding: 2rem 2rem 0rem 2rem;
}

.option-table-scroll {
  overflow-y: auto;
  max-height: 200px;
  margin-bottom: 1rem;
  border: 1px solid var(--text-200-color);
}

.option-table th.blank {
  width: 30px;
}

.option-table-scroll input {
  border: 0;
  text-align: center;
}

.btn-add-option {
  padding: 1rem 0 1rem;
  text-align: right;
  border-bottom: 1px solid var(--text-200-color);
}

.btn-add-option button {
  width: 100%;
}

.size-list.detail-size {
  margin: 3rem 0;
}

.set-result {
  padding: 2rem 0 0rem 0;
}

.size-item,
.time-item {
  cursor: pointer;
  padding: 0.5rem 1.4rem;
  border: 1px solid var(--text-300-color);
  border-radius: 2rem;
  background-color: #f5f5f5;
  color: #000;
  text-align: center;
  transition: all 0.3s;
  font-size: 1.4rem;
}

.size-item.selected,
.time-item.selected {
  border: 1px solid var(--primary-color);
  background: #fff;
  color: var(--primary-color);
}

.product-num {
  display: flex;
}

.product-num input {
  width: 10rem;
  padding: 0.5rem;
  border: 1px solid var(--text-300-color);
  text-align: center;
  border-radius: 0.4rem 0 0 0.4rem;
}

.product-num input:focus {
  border: 1px solid var(--text-300-color) !important;
}

.product-num button {
  padding: 0.5rem 1rem;
  border: 1px solid var(--text-300-color);
  border-left: 0;
  text-align: center;
  border-radius: 0rem 0.4rem 0.4rem 0;
  cursor: pointer;
}

.product-details-card {
  display: flex;
  /* align-items: center; */
  justify-content: center;
  gap: 0.8rem;
  border-bottom: 1px solid var(--text-200-color);
  position: relative;
}

/* .product-details-card input {
  margin-top: 1rem
} */

.product-details-card .product-info {
  width: 100%;
  margin-top: -0.2rem;
  padding: 1rem 0.2rem;
}

.product-info span {
  text-align: left;
}

.product-info .wholesale-name {
  color: var(--text-400-color);
  font-size: 1.3rem;
}

.product-details-card .category {
  font-size: 1.2rem;
  display: block;
  color: var(--text-400-color);
}

.product-details-card .id {
  font-size: 1.2rem;
  color: var(--text-400-color);
  display: block;
  padding-top: 0.3rem
}

.product-details-card .name {
  font-size: 1.5rem;
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.6rem;
}

.product-details-card .price {
  font-weight: 500;
  font-size: 1.4rem;
  display: block;

}

.product-details-card .stock {
  font-weight: 500;
  font-size: 1.4rem;
  display: block;
}

.product-details-card .thum .thum-mask {
  width: 7rem;
  height: 7rem;
  overflow: hidden;
  border-radius: var(--border-box-radius);
  border-color: var(--text-200-color);
  aspect-ratio: 9 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--text-200-color)
}

.product-details-card .thum {
  padding: 1rem 0.2rem;
}

.product-details-card .thum img {
  border-radius: var(--border-box-radius);
  object-fit: cover;
  height: 100%;
}

.product-details-card button.btn-detail {
  background: url('../images/arrow-right.svg') no-repeat right;
  right: -0.5rem;
  top: 0;
  border: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
  text-indent: -1000rem;
  position: absolute;
}

.product-details-card .checkbox-center-align {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-help {
  background: url('../images/ico-question.svg') no-repeat center;
  border: 0;
  overflow: hidden;
  height: 3rem;
  width: 3rem;
  text-indent: -100rem;
  margin-left: 0.5rem
}

.btn-share,
.btn-save {
  background: url('../images/btn-share.svg') no-repeat center;
  background-size: contain;
  border: 0;
  overflow: hidden;
  height: 3.6rem;
  width: 3.6rem;
  text-indent: -100rem;
  margin-left: 0.5rem;
}

.btn-save {
  background: url('../images/btn-save.svg') no-repeat center;
}

.btn-save.active {
  background: url('../images/btn-save-on.svg') no-repeat center;
}

/* 바텀시트 */
.bottom-sheet-wrap {
  background-color: white;
  margin: 0 auto;
  position: relative;
  border-radius: 1rem 1rem 0 0;
  box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.2);
  z-index: 30;
}

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  transition: bottom 0.3s ease-in-out;
  animation: slide-up 0.1s ease-in-out;
}


.bottom-sheet.open {
  bottom: 0;
}

/* 바텀시트 배경 오버레이 */
.bottom-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 12;
}


.appbar-bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(100%);
  z-index: 1000;
  transition: bottom 0.3s ease-in-out;
  animation: slide-up 0.1s ease-in-out;
}

.appbar-bottom-sheet.open {
  transform: translateY(0);
}

.appbar-bottom-sheet.close {
  transform: translateY(100%);
}

.search-input-container input {
  padding: 1rem;
  width: calc(100% - 2rem);
}

.bottom-sheet-content h4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 14px;
}

.bottom-sheet-content {
  overflow-y: auto;
  padding: 4rem;
  max-height: 80vh;
}

.scrolled {
  max-height: 600px;
}

.bottom-sheet-content h3 {
  margin-bottom: 12px;
}

.bottom-sheet-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bottom-sheet-content .option {
  padding: 12px 16px;
  cursor: pointer;
}

.bottom-sheet-content .option.selected {
  background-color: #f0f0f0;
  font-weight: bold;
}

.close-button {
  top: 0.5rem;
  right: 0;
  background: url(../images/btn-close-modal.svg) no-repeat center;
  background-size: contain;
  border: 0;
  overflow: hidden;
  height: 2.4rem;
  width: 2.4rem;
  text-indent: -1000rem;
  position: absolute;
  right: 1rem;
  cursor: pointer;
  padding: 10px 20px;
  margin-top: 10px;
}

.filter-bottom-sheet {
  padding: 2rem
}

.filter-buttons {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0rem 2rem 0.4rem 2rem;
}

.filter-buttons .reset-button {
  position: absolute;
  right: 2rem;
  top: 0
}

.filter-buttons button {
  width: auto;
  min-width: 4rem;
}

.filter-buttons button.chip {
  margin-left: 0.4rem;
  padding: 0.6rem 1rem 0.6rem 1rem;
  font-size: 1.6rem;
}

.filter-result {
  margin: 0rem 1rem 0rem 2rem;
}

.filter-result span {
  border-radius: 0.6rem;
  display: inline-block;
  font-size: 1.4rem;
  padding: 0.5rem;
  border: 1px solid var(--primary-color);
  background: var(--primary-50-color);
  color: var(--primary-color);
  margin-right: 0.4rem;
  margin-top: 0.5rem
}

.filter-result span.blank {
  display: none;
}

.filter-result span.category.on {
  background: var(--primary-color);
}

.filter-result span.brand.on {
  background: var(--secondary-color)
}

/* seller-card */

.seller-card {
  border: 1px solid var(--text-100-color);
  border-radius: 1rem;
  padding: 1.2rem;
  display: flex;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 1.6rem;
  align-items: center;
  justify-content: flex-start;
  margin-top: 2rem;
  position: relative;
  background: #fff;
  height: 66px;
  box-shadow: var(--box-shadow)
}

.promotion-card.end {
  border: 1px solid var(--text-200-color);
}

.promotion-card.end .dimed {
  background: #000;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  opacity: 0.2;
  border-radius: 1rem;
}

.promotion-card.end .promotion-end {
  background: var(--text-500-color);
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  font-size: 1.5rem;
  padding: 0.6rem 1rem;
  border-radius: 1rem 0rem 1rem 0rem;
  z-index: 10;
}

.promotion-title {
  font-size: 1.7rem;
  font-weight: 600;
  margin: 0.5rem 0;
}

.promotion-seller-name {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.promotion-seller-name h4 {
  font-size: 1.6rem;
  font-weight: 400;
}

.promotion-bedge-hotdeal {
  background: var(--primary-color);
  font-size: 1.2rem;
  padding: 0.2rem 0.66rem;
  color: #fff;
  margin-left: 0.2rem;
  border-radius: 0.2rem;
  font-weight: 400;
}

.promotion-bedge-discount {
  background: #4b0082;
  font-size: 1.2rem;
  padding: 0.2rem 0.66rem;
  color: #fff;
  margin-left: 0.2rem;
  border-radius: 0.2rem;
  font-weight: 400;
}

.promption-period {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--text-400-color);
  margin-top: 0.5rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.seller-card .seller-card-logo .ranking {
  color: #fff;
  font-weight: 600;
  font-size: 1.4rem;
  position: absolute;
  top: -1rem;
  left: 0;
  background: #fff;
  width: 2.6rem;
  height: 2.6rem;
  line-height: 2.6rem;
  border-radius: 50%;
  text-align: center;
  background: var(--text-600-color);
  border: 2px solid #fff
}

.seller-card .seller-card-logo {
  flex: 0 0 auto;
  position: relative;
  width: 5rem;
  height: 5rem;
  border-radius: 5rem;
  background: #fff;
  border: 1px solid var(--text-200-color);
  background: #fff;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.seller-card .seller-card-logo img {
  width: 100%;
}

.seller-card .seller-card-list {
  width: calc(100% - 50%);
  font-size: 1.4rem;
}

.seller-card .seller-card-list h4 {
  margin-bottom: 1rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seller-card .seller-card-list .seller-intro {
  font-size: 1.4rem;
  color: var(--text-500-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seller-card .seller-card-list .seller-estilos,
.seller-card .seller-card-list .seller-address {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seller-card button.btn-detail {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
  background: none;
  text-indent: -2000px;
  overflow: hidden;
  border: 0;
}

.seller-card .seller-save {
  background: url('../images/ico-save.svg') no-repeat left 6px;
  padding-left: 2rem;
  font-size: 1.4rem;
  color: var(--text-500-color);
  padding-top: 0.5rem;
}

.seller-card .btn-follow {
  position: absolute;
  z-index: 9;
  right: 2rem;
  top: 3rem;
  width: auto;
  padding: 0.6rem 0.6rem;
  background-color: #fff;
  border: 1px solid var(--text-400-color);
  color: var(--text-400-color);
  font-size: 1.4rem;
  min-width: 70px;
}

.seller-card .btn-follow.active {
  background-color: var(--text-600-color);
  border: 0;
  color: #fff;
}

.promotion {
  font-size: 1.6rem;
}

.promotion-type {
  border: 1px solid #000;
  top: 0;
  left: 0;
  background: var(--primary-color);
}

/* 상품선택 - 바텀시트 */
.selected-product-box {
  background-color: var(--text-50-color);
  border: 1px solid var(--text-100-color);
  border-radius: var(--border-box-radius);
  padding: 1rem;
  margin: 0rem 0rem 0.6rem 0em;
  position: relative;
}

.selected-option {
  display: flex;
  margin-bottom: 1rem;
  gap: 0.4rem;
  font-size: 1.6rem;
}

.selected-option .size {
  font-size: 1.4rem;
}

.selected-product-box .color-circle {
  width: 1.6rem;
  height: 1.6rem;
}

.selected-product-box .product-price {
  position: absolute;
  top: 4.8rem;
  right: 1.6rem;
  font-size: 1.5rem;
  font-weight: 500;
}

.selected-product-box .color-name {
  padding: 0 0rem 0 0.5rem;
}

.selected-product-box .btn-delete {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.btn-delete {
  background: url('../images/btn-clear.svg') no-repeat center;
  background-size: contain;
  border: 0;
  overflow: hidden;
  height: 2.4rem;
  width: 2.4rem;
  text-indent: -100rem;
  margin-left: 0.5rem
}

.counter {
  display: flex;
  align-items: center;
  border: 1px solid var(--text-300-color);
  border-radius: 0.2rem;
  width: auto;
  justify-content: space-between;
  background-color: #fff;
  font-size: 1.6rem;
}

.counter .btn-plus,
.counter .btn-minus {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  border-radius: 0;
  height: 2.6rem;
  width: 2.6rem;
  text-indent: -100px;
  overflow: hidden;
}

.counter .btn-plus {
  background: url('../images/ico-counter-plus.svg') no-repeat center;
  background-size: contain;
}

.counter .btn-minus {
  background: url('../images/ico-counter-minus.svg') no-repeat center;
  background-size: contain;
}

.counter .btn-plus:disabled,
.counter .btn-minus:disabled {
  cursor: not-allowed;
  opacity: 0.1;
}

.count-num {
  display: inline-block;
  width: 4rem;
  height: 2.6rem;
  text-align: center;
  font-size: 1.3rem;
  border-right: 1px solid var(--text-300-color);
  border-left: 1px solid var(--text-300-color);
  line-height: 2.6rem;
}

.selected-product-box .counter {
  width: 10rem;
}

.selected-total-product {
  border-top: 1px solid var(--text-300-color);
  padding: 2rem;
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
}

.selected-total-product .total-quantity {
  font-weight: 600;
  font-size: 1.6rem;
}

.selected-total-product .total-amount {
  font-weight: 600;
  font-size: 1.6rem;
  padding: 0;
  text-align: right;
}

.option-setting {
  margin-bottom: -2rem;
}

.dropdown {
  position: relative;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.combo-button-caption-wrap {
  width: 300px;
  display: flex;
  justify-content: end;
  align-items: center;
}

.dropdown .input-container {
  width: 180px;
}

.combo-button-caption {
  font-size: 14px;
  padding-right: 10px;
}

.dropdown-toggle {
  padding: 0.6rem;
  border: 1px solid var(--text-300-color);
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}

.dropdown-toggle .selected-container {
  display: flex;
}

.no-ootion {
  font-size: 1.4rem;
  text-align: center;
  background: var(--text-50-color);
  padding: 2rem;
  border-radius: var(--border-box-radius);
}

.dropdown-arrow {
  margin-left: 10px;
  transition: transform 0.2s ease-in-out;
}

.dropdown-arrow.open {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow-y: scroll;
  height: 200px;
}

.dropdown-arrow {
  width: 3rem;
  height: 3rem;
  transition: transform 0.3s ease;
}

.dropdown-arrow.open {
  transform: rotate(180deg);
  /* 180도 회전 */
}

.dropdown-item {
  padding: 10px 5px 10px 5px;
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: #f5f5f5;
}

.dropdown-item button {
  border: 0;
}

/* 칩 컴포넌트 */
.chips-category-wrap {
  padding-top: 1rem
}

.chips-category {
  margin: 1rem 0 1rem 0;
  font-size: 1.5rem;
  gap: 0.6rem;
}

.chips-category button {
  width: auto;
  padding: 0.6rem 0.8rem;
  background: var(--text-30-color);
  border: 1px solid var(--text-300-color);
  border-radius: 0.6rem;
  font-size: 1.5rem;
  cursor: pointer;
  white-space: nowrap;
  margin-right: 0.6rem;
  margin-bottom: 0.6rem;
}

.chips-category button.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

.agreement button {
  border: 0;
  text-align: left;
  width: auto;
  padding-left: 1rem;
  position: absolute;
  right: 3rem;
  text-decoration: underline;
  line-height: 20px;
}

button.btn-confirm:disabled {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
  border: 1px solid #bbb;
}

.disabled {
  pointer-events: none;
  opacity: 0.5;
  color: #ccc;
  text-decoration: none;
}

/*steps*/
.step-container {
  padding: 1rem 6rem 1rem 6rem;
  position: relative;
  background: #fff;
  z-index: 0;
}

.steps {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.step {
  width: 100px;
  cursor: pointer;
  transition: 0.3s;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}

.step-number {
  position: absolute;
  z-index: 10;
  font-size: 1px;
  width: 1.8rem;
  height: 1.8rem;
  background: #fff;
  border-radius: 50%;
  border: 2px solid var(--text-200-color);
}

.step-number::after {
  content: "";
  border-top: 1px solid var(--text-200-color);
  position: absolute;
  top: 0.8rem;
  left: 2rem;
  width: 600rem;
  padding: 2rem;
  display: flex;
  justify-content: center;
  z-index: 1;
}

.step.completed .step-number::before {
  content: "";
  position: absolute;
  top: 0;
  left: 4px;
  width: 2rem;
  height: 2rem;
  z-index: 100;
  font-size: 1.4rem;
  background: url('../images/ico-checked.svg') no-repeat left;
}

.steps .step:nth-last-child(1) .step-number::after {
  border-top: 1px solid #fff !important;
}

.step.active .step-number {
  border-color: var(--secondary-50-color);
  background: var(--secondary-color);
  color: #fff;
  z-index: 10;
}

.step.active .step-number::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: 1.8rem;
  height: 1.8rem;
  z-index: 10;
  background: var(--primary-color);
  border: 4px solid #ffc56f;
  border-radius: 50%;
}

.wholesale .step.active .step-number::before {
  background: var(--secondary-color);
  border: 4px solid var(--secondary-50-color);
}


.step.completed .step-number {
  border-color: var(--text-600-color);
  background: var(--text-600-color);
  color: #fff;
}


.step-label {
  font-size: 12px;
  margin-top: 5px;
  color: var(--text-300-color);
  white-space: nowrap;
  display: block;
  position: relative;
  z-index: 10;
  padding-top: 5rem
}

.step.completed .step-label {
  color: var(--text-600-color);
}

.step.active .step-label {
  color: var(--secondary-color);
}

.step-content {
  margin-top: 20px;
}

.step-buttons {
  margin-top: 20px;
}

.outlet-sort {
  display: flex;
  margin: 0px 0px 0px 10px;
  justify-content: space-between;
}

/* 검색 필터/ 필터버텀시트 */
.filter-container .dropdown {
  display: flex;
  gap: 0.6rem;
  padding: 0 2rem;
  justify-content: space-between;
  width: auto;
}

.filter-container .combo-button-caption-wrap {
  width: auto;
  padding-right: 20px;
  padding-left: 10px
}

.filter-container .dropdown .combo-button-caption {
  width: auto;
  white-space: normal;
  word-break: break-all;
  overflow-wrap: anywhere;
}

.filter-container-result {
  padding: 1rem 0rem 0rem 2rem;
  display: flex;
}

button.reset-button {
  background: url('../images/ico-reset.svg') no-repeat left;
  padding: 0.6rem 1rem 0.6rem 3rem;
  font-size: 1.5rem;
  background-size: 22%;
  background-position: 5px;
  width: auto;
}

button.filter-button {
  background: url('../images/ico-filter.svg') no-repeat left;
  padding: 0.6rem 1rem 0.6rem 3rem;
  font-size: 1.4rem;
  background-size: 30%;
  background-position: 5px;
  width: auto;
}

.remove-filter {
  background: url('../images/btn-delete.svg') no-repeat center;
  background-size: 50%;
  border: 0;
  overflow: hidden;
  height: 2.4rem;
  width: 2.4rem;
  text-indent: -100rem;
  border-radius: 2rem;
}

.filter-group .filter-item,
.filter-options .filter-option {
  padding: 0.6rem 1rem;
  border-radius: 2rem;
  width: auto;
  font-size: 1.5rem;
}

.filter-group .filter-item {
  border: 1px solid var(--primary-color);
  background: var(--primary-50-color);
  display: inline-block;
  margin-top: 0.4rem;
  margin-right: 0.4rem;
  color: var(--primary-color);
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.filter-options .filter-option {
  margin-top: 0.4rem;
}

.filter-options .filter-option.selected {
  border: 1px solid var(--primary-color);
  background: var(--primary-50-color);
  color: var(--primary-color);
}

.empty-message {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 4rem
}

.empty-message span.message-txt {
  display: block;
  padding: 1rem;
  position: relative;
  margin-top: 2rem;
  color: var(--text-500-color);
  padding-top: 4rem;
  font-size: 1.6rem;
}

.empty-message span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 4rem;
  height: 4rem;
  background: url('../images/icon-alert.svg') no-repeat;
  background-size: cover;
}

.filter-bottomseet {
  display: flex;
  gap: 0.6rem;
  flex-wrap: nowrap;
  font-size: 1.5rem;
  align-content: center;
  width: 100%;
  padding: 1rem 2rem 0 1rem;
  position: relative;
}

.filter-bottomseet .bottom-sheet-content {
  background: none;
}

.filter-bottomseet-wrap {
  max-width: 800px;
}

.filter-bottomseet button.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
  white-space: nowrap
}

.filter-bottomseet .bottom-sheet {
  border-radius: 1rem 1rem 0 0;
  overflow-y: scroll;
}

.btn-filter {
  width: auto;
  padding: 1rem 2.6rem 1rem 1rem;
  background: url('../images/ico-arrow-down.svg') no-repeat right;
  font-size: 1.6rem;
}

.btn-filter.active {
  padding: 1rem 1rem 1rem 1rem;
}

.recent-searches {
  margin-top: 2rem;
}

.recent-searches .search-term {
  background: url('../images/ico-clock.svg') no-repeat left;
  border: 0;
  font-size: 1.6rem;
  padding: 1rem 1rem 1rem 3rem;
}

.recent-searches li {
  display: flex;
  align-items: center;
}

/* 슬라이더 컨테이너 */
.btn-filter-wrap {
  width: auto;
  overflow: hidden;
  margin-left: 2rem;
  margin-right: 2rem;
}

/* Swiper 컨테이너 */
.btn-filter-swiper {
  display: flex;
  width: auto;
  height: 4rem;
}

/* Swiper Wrapper */
.btn-filter-wrap .swiper-wrapper {
  display: flex;
  width: auto;
}

/* 슬라이드 */
.btn-filter-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  white-space: nowrap;
  width: auto;
  background: none;
}

/* Swiper 컨테이너 추가 스타일 */
.btn-filter-swiper .swiper-container {
  width: 100%;
  overflow: hidden;
}

.chips-category .chips-swiper {
  height: 4rem;
  display: flex;
  justify-content: flex-start;
}

.chips-category .swiper-wrapper {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.chips-category .chips-swiper .swiper-slide {
  width: auto;
}

.btn-reset-wrap {
  position: absolute;
  left: 0;
  width: 3rem;
  height: 3rem;
  background: #fff;
  top: 1.5rem;
}

.btn-reset {
  background: url('../images/btn-clear.svg') no-repeat center;
  border: 0;
  overflow: hidden;
  height: 2.4rem;
  width: 4rem;
  text-indent: -100rem;
}

.btn-filter.ico-serch {
  padding-left: 2rem
}

.btn-filter.ico-serch::before {
  content: "";
  width: 1.4rem;
  height: 1.2rem;
  background: url('../images/ico-search-filter.svg') no-repeat left;
  display: block;
  position: absolute;
  top: 0.8em;
  left: 0.5rem;
}

.btn-filter.ico-serch.active:before {
  background: url('../images/ico-search-filter-on.svg') no-repeat left;
}

.category-search-result .chips-category {
  width: 100%;
  flex-wrap: nowrap;
  display: flex;
  overflow-x: scroll;
}

.category-search-result h4,
.category-search-title {
  padding: 1rem 0;
}

.category-search-result button {
  width: auto;
  border-radius: 3rem;
  padding: 0.8rem 1rem;
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.category-search-result .swiper-slide {
  width: auto;
}

.category-search-result .swiper {
  width: 100%;
}

.category-search-result .swiper {
  height: 4rem;
}

.category-search-wrap .chips-category button {
  background: var(--primary-50-color);
  border-color: var(--primary-color);
  color: var(--primary-color);
  font-size: 1.6rem;
}

/* 전시 카테고리 */

.exhibition-category h3 {
  text-align: center;
}

.exhibition-category .level-edit,
.exhibition-category .btn-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.exhibition-category .level-edit {
  padding-bottom: 1rem
}

.btn-add-item,
.btn-delete-item {
  background: url('../images/btn-level-edit.svg') no-repeat center;
  right: 1rem;
  border: 0;
  overflow: hidden;
  height: 2.4rem;
  width: 2.9rem;
  text-indent: -100rem;
  margin-left: 0.5rem
}

.btn-delete-item {
  background: url('../images/btn-level-trash.svg') no-repeat center;
}

.exhibition-category .add-item {
  display: flex;
  margin-bottom: 2rem
}

.exhibition-category .add-item input {
  padding: 1rem;
}

.exhibition-category .add-item button {
  width: auto;
  padding: 1rem;
  margin-left: 0.4rem;
}

.sort-select button {
  padding: 1rem;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--text-200-color)
}

.sort-select button.selected {
  background: url('../images/ico-sort-chk.svg') no-repeat right;
  background-size: 6%;
  font-size: 1.6rem;
}

.crop-buttons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  justify-content: center;
}

.crop-buttons button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.crop-buttons button:hover {
  background-color: #0056b3;
}

/* 스피너 오버레이 */
.spinner-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 컨텐츠 */
.spinner-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: none;
  padding: 20px;
  border-radius: 8px;
}

/* 스피너 */
.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top: 4px solid var(--primary-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

/* 메시지 스타일 */
.spinner-message {
  margin-top: 10px;
  font-size: 14px;
  color: #fff;
  font-weight: 400;
}

/******************************************/

/* Wholesale 스타일 */
.wholesale.button-link {
  background-color: var(--secondary-color);
  /* Wholesale 색상 */
}

.button-link:hover {
  /* background-color: #5a54d6;  */
  text-decoration: none;
}

.btn-group {
  display: flex;
}

/* 기본(모바일) 스타일 */
.appbar {
  margin: 0 auto;
  position: relative;
}

.retail {
  position: relative;
  width: 100%;
}

input {
  appearance: none;
  -webkit-appearance: none;
  /* iOS Safari */
}

/* 2. Reset 스타일 */
* {
  outline: 0 !important;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
p,
blockquote,
pre,
code,
address,
ul,
ol,
li,
menu,
nav,
section,
article,
aside,
dl,
dt,
dd,
table,
thead,
tbody,
tfoot,
caption,
th,
td,
label,
form,
fieldset,
legend,
hr,
input,
button,
textarea,
object,
figure,
figcaption {
  margin: 0;
  padding: 0;
  font-family: 'Sora', 'Pretendard', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  word-wrap: break-word;
  word-break: keep-all;
  white-space: normal;
}


button::first-letter,
label::first-letter {
  text-transform: uppercase;
}

.lowercase::first-letter {
  text-transform: lowercase;
}

ul,
ol,
li {
  list-style: none;
}

img,
fieldset {
  border: 0;
}

img {
  width: 100%;
}

/* 3. 공통 스타일 */
a {
  color: #000;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

/* 4. 타이포그래피 */
h1 {
  font-size: 2.4rem;
  font-weight: 700;
}

h2 {
  font-size: 2rem;
  font-weight: 600;
}

h3 {
  font-size: 1.8rem;
  font-weight: 500;
}

h4 {
  font-size: 1.6rem;
  font-weight: 400;
}

h5 {
  font-size: 14px;
  font-weight: 400;
}


label {
  font-size: 1.4rem;
}

address,
cite,
code,
em {
  font-style: normal;
  font-weight: normal;
}

html,
body {
  margin: 0;
  padding: 0;
  /* height: 100vh; */
  min-height: 100dvh;
  /* 동적 뷰포트 높이 */
  /* height: calc(var(--vh, 1vh) * 100); */
  font-size: 10px;
  overscroll-behavior: contain;
  /* 스크롤 바운스 효과 제거 */
  /* background: var(--text-50-color); */
}

/* 5. 레이아웃 */
.body-fix {
  position: fixed;
  width: 100%;
}

.container,
.message-wrap,
.corp_area,
.bottom-sheet-wrap,
.fix-btn,
.top-bar .vender {
  max-width: 1200px;
  overflow-x: hidden;
}

.retail-main-tab-fix .main-tab,
.appbar,
.navigation-bar-custom {
  max-width: 1200px;
}

.blind {
  display: none;
}

[lang="ko"] {
  .ko {
    display: block;
  }

  .pt-BR {
    display: none;
  }
}

/* lang 속성이 "en"인 요소 스타일 */
[lang="pt-BR"] {
  .ko {
    display: none;
  }

  .pt-BR {
    display: block;
  }
}

.container {
  margin: 0 auto;
  min-height: 100vh;
  background: #fff;
  position: relative;
}

.container.full-popup {
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  background: #fff;
}

.container.full-popup .content-wrap {
  padding-bottom: 2rem;
}

.message-wrap {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.message-wrap .icon.complete {
  width: 5rem;
  height: 5rem;
  background: url('../images/ico-complete.svg') no-repeat;
  background-size: cover;
  margin: 2rem;
}

z .message-wrap h4 {
  padding: 1rem;
  font-size: 2rem;
  font-weight: 500;
  display: block;
}

.message-wrap h4 span {
  display: block;
  color: var(--primary-color);
}

.message-wrap .text-m {
  padding: 1rem;
  font-size: 1.4rem;
}

.content-wrap {
  margin: 0;
  z-index: 0;
  padding-bottom: 5rem;
  padding-top: 6rem;
}

.main-list-wrap {
  background: #fff;
}

.align-center {
  align-items: center;
  justify-items: center;
}

.sign-up-set {
  margin: 2rem 4rem 1rem 4rem;
}

.btn-area-relative {
  padding-top: 2rem;
  position: relative;
}

/* 8. 유틸리티 클래스 */
.al-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.btn-center button {
  text-align: center;
  margin: 0.5rem;
  min-width: 120px;
}

.clear {
  clear: both;
}

.clear:after {
  content: "";
  display: block;
  clear: both;
}

.hide,
caption,
legend {
  line-height: 0;
  font-size: 1px;
  overflow: hidden;
}

.required {
  /* color: red;*/
  margin-left: 4px;
  margin-top: 0.4rem;
  width: 0.6rem !important;
  height: 0.6rem !important;
  border-radius: 50%;
  background: var(--primary-color);
  overflow: hidden !important;
  text-indent: -100px !important;
  display: block;
}

/* 6. table */
table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

th,
td {
  border: 1px solid var(--text-300-color);
  font-weight: 400;
  font-size: 1.4rem;
  padding: 0.5rem;
}

th {
  background: var(--text-50-color);
}

.fl {
  float: left;
}

.fr {
  float: right;
}

/* 소매 체크박스 스타일 */
.retail-checkbox input[type="checkbox"] {
  border: 1px solid #ccc !important;
}

.retail-checkbox input[type="checkbox"]:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

input[type="checkbox"] {
  border: 1px solid #ccc !important;
}

input[type="checkbox"]:checked {
  border-color: var(--primary-color) !important;
  background: var(--primary-color) url(../images/ico-checked.svg) no-repeat 2px 2px;
  background-size: 14px;

}

/*로그인 & 회원가입*/
.btn-email-inquiry {
  padding: 0 1rem;
}

.input-container.active {
  border-bottom: 1px solid var(--primary-color);
}

.input-container.active+.btn-email-inquiry {
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
}

.get-temporary-pw .disabled {
  border: 1px solid var(--text-300-color)
}

.login-container input[type="text"] {
  height: 5rem;
  padding: 0 1rem
}

.login .title {
  text-align: center;
  padding-bottom: 1rem;
}

.login .btnlist div {
  flex: 1;
}

.main-wrap {
  margin-top: 4.8rem;
  padding-bottom: 5rem;
}

.login-toast {
  background-color: #fff;
}

.main-wrap .register-prompt {
  padding: 2rem 0 1rem 0;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 600;
}

.content-wrap .register-prompt {
  padding: 0rem 0 1rem 0;
  font-size: 1.8rem;
  font-weight: 600;
}

.register-prompt-info {
  font-size: 1.4rem;
  padding: 0;
  text-align: center;
}

.content-wrap .register-prompt-info {
  text-align: center;
  font-size: 1.4rem;
  color: var(--text-500-color);
}

.help-links {
  display: flex;
  padding: 2rem 0 2rem 0;
  border-bottom: 1px solid;
  border-color: var(--text-100-color);
}

.help-links button {
  border: 0;
  text-decoration: underline;
  margin: 0 1rem;
  background: none;
  font-size: 1.4rem;
}

.login-prompt {
  font-size: 1.6rem;
  text-align: center;
  padding: 1.6rem 0;
}

.btn-saech-id {
  text-align: right;
}

.btn-saech-pw {
  text-align: left;
}

.login .check-group {
  padding: 0.5rem 0 1.5rem 0;
}

.stay-login label {
  padding: 0 0 0 0.6rem;
}

.agreement {
  padding: 1rem 0;
}

/* 기본 상태 */
.join-retail,
.join-wholesale {
  display: none;
}

/* show 클래스 활성화 */
.join-retail.show,
.join-wholesale.show {
  display: block;
}


/* 메뉴 */
.seller-menu-head {
  align-items: center;
  position: relative;
  background: var(--text-30-color);
  margin: 1rem;
  border-radius: var(--border-box-radius);
}

.seller-logo {
  width: 60px;
}

.seller-basic {
  display: flex;
  align-items: center;
  justify-content: center;
}

.seller-etc {
  display: flex;
  margin-left: 6rem;
}

.seller-etc li {
  flex: 1;
  font-size: 1.2rem;
}

.seller-info {
  width: 100%;
}

.seller-info h3 {
  font-size: 1.4rem;
  padding: 1rem 0
}

.seller-info h4 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.seller-info h5 {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--text-400-color);
}

.seller-info .txt {
  font-size: 1.3rem;
  padding: 0;
  color: var(--text-500-color);
  font-weight: 300;
  padding-top: 10px;
}

.seller-info .close {
  background: url('../images/btn-delete.svg') no-repeat center;
  background-size: 50%;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: 0px;
  border: 0;
  text-indent: -1000px;
  overflow: hidden;
}


.seller-menu-head .seller-logo img {
  width: 4.4rem;
  height: 4.4rem;
  border: 1px solid;
  border-color: var(--text-300-color);
  border-radius: 50%;
}

.btn-more-arrow {
  width: auto;
  background: url('../images/arrow-right.svg') no-repeat right;
  background-size: 30%;
  padding: 0rem 2rem 0rem 1rem;
  margin-right: 0rem;
  border: 0;
  font-size: 1.4rem;
  font-weight: 200;
}

.btn-arrow {
  width: auto;
  background: url('../images/arrow-right.svg') no-repeat right;
  background-size: 22%;
  padding: 0rem 2.2rem 0rem 1rem;
  margin-right: 1rem;
  border: 0;
  font-size: 1.6rem;
  font-weight: 500;
}

.seller-menu-head .btn-logout {
  position: absolute;
  right: 2rem;
  width: auto;
  padding: 0.8rem 2rem;
  border: 1px solid;
  border-color: var(--text-100-color);
  border-radius: 2rem;
}

.seller-menu-head .btn-logout {
  font-size: 1.4rem;
}

.seller-menu h4 {
  font-size: 1.4rem;
  color: var(--text-400-color);
  padding: 0.5rem;
  font-weight: 400;
  padding-left: 0rem
}

.seller-menu li {
  padding: 1rem 2.4rem;
}

.seller-menu li a {
  border: 0;
  text-align: left;
  padding: 1.4rem 0rem;
  border-bottom: 1px solid;
  border-color: var(--text-100-color);
  border-radius: 0;
  font-size: 1.6rem;
  font-weight: 400;
  background: url('../images/arrow-right.svg') no-repeat right;
  display: block;
}

.category-view {
  color: var(--primary-color);
  padding-top: 1rem;
  font-size: 1.4rem;
}

.category-view span.category-view-title {
  background: var(--primary-50-color);
  display: inline-block;
  padding: 0.3rem 0.6rem;
  border-radius: 0.2rem;
}

/*카테고리생성*/
.category-list {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--text-100-color);
  padding: 0.8rem 0;
}

.category-list-item {
  width: calc(1000% - 20px);
  font-size: 1.4rem;
}

.category-list-select li {
  border-bottom: 1px solid var(--text-100-color);
  padding: 1rem 0;
}

.category-list-select li label {
  padding-left: 0.5rem;
}

/* 상품등록 */
.video-wrap {
  position: relative;
}

.overlay-disabled {
  position: absolute;
  top: 0;
  cursor: not-allowed;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  background: #fff;
  border: 1px solid #fff;
}

.top-category-component h3 {
  font-size: 1.4rem;
  margin: 2rem 0 0.5rem 0;
  font-weight: 600;
}

.section.select-category {
  padding: 2rem 2rem 2rem 2rem;
  border-bottom: 4px solid var(--text-50-color)
}

.section .input-product {
  padding: 0rem 2rem 2rem 2rem;
  border: 1px solid var(--text-100-color);
  border-radius: var(--border-box-radius);
}

.ai-btn-wrap {
  margin-top: 20px;
  padding: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  background: var(--secondary-10-color);
  border-radius: var(--border-box-radius);
}

.ai-btn-wrap p {
  font-size: 15px;
}

.ai-btn-wrap .btn-ai {
  background: #fff url('../images/icon-ai.svg') no-repeat 10px center;
  background-size: 22px;
  padding: 10px 10px 10px 40px;
  border: 1px solid var(--text-500-color);
  height: auto;
  border-radius: 4px;
}

.btn-flex button {
  height: auto;
  padding: 8px;
}

.used-code {
  text-align: right;
  position: relative;
  height: 20px;
}

.btn-underkine {
  border-radius: 0;
  text-decoration: underline;
  border: 0;
  position: absolute;
  right: 0;
  width: auto;
  color: var(--secondary-color)
}

.bottomseet-drop-down {
  height: 200px;
  overflow-y: scroll;
  border: 1px solid var(--text-200-color)
}

.recommended-category .chips-category {
  margin-bottom: 0;
}

/* 상품조회 */
.section.inquiry-conditions {
  padding: 0rem 2rem 0rem 2rem;
  margin-bottom: -2rem;
}

.stock-modify {
  display: flex;
  justify-content: center;
  align-items: center;
}

.stock-modify .btnlist {
  width: auto;
}

.stock-modify button {
  min-width: 15rem;
}

.inquiry-conditions .form-group .item {
  text-align: left;
}

.inquiry-conditions .form-group .item label {
  text-align: left;
}

.inquiry-conditions .form-group .item-input {
  float: left;

}

.inquiry-conditions .form-group.inquiry-conditions-name div {
  flex: 1;
}

.option-edit-table td {
  padding: 0;
}

.option-edit-table input {
  border: 0px solid #000 !important;
  height: 3rem;
  border-radius: 0;
}

.ok-permission input {
  height: 16px;
  width: calc(100% - 10px);
  color: var(--secondary-color) !important;
  background: var(--secondary-10-color);
  text-align: center;
}

.ok-permission input::placeholder {
  color: var(--secondary-color) !important;
  text-align: center;
}



/* 컬러 피커*/
.disply-none {
  display: none;
}

.sketch-picker {
  width: calc(100% - 2rem) !important;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 0px, rgba(0, 0, 0, 0.15) 0px 4px 8px !important;
  padding: 10px !important;
  border: 1px solid var(--text-100-color)
}

.sketch-picker>div:first-child {
  padding-bottom: 46% !important;
}

.sketch-picker input {
  font-size: 1.2rem !important;
}

.color-picker-preview {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  position: relative;
}

.disable-dim {
  background: #000;
  opacity: 0.2;
  position: absolute;
}

.colorcode-select,
.select-color {
  display: flex;
}

.colorcode-select h5,
.thumb-list h5,
.select-color h5 {
  flex: 140px 0 0;
}


/* .color-picker-preview h5 {
  font-size: 1.3rem;
  font-weight: 400;
} */

.select-color {
  padding-bottom: 20px;
}

.select-color .select-color li {
  padding: 1rem 0;
}

.color-picker-preview h5 {
  margin: 1rem 0rem 0.5rem 0rem;
}

.color-picker-content {
  padding-top: 1rem;
  padding-right: 2px
}

.color-picker-content .btn-center,
.image-picker-content .btn-center {
  border-top: 1px solid var(--text-300-color);
  padding-top: 15px;
  margin-top: 15px;
  padding-bottom: 20px;
}

.color-picker-content h5 {
  font-size: 15px;
}

.current-color {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.select-color input {
  padding: 0.6rem;
  width: calc(100% - 2rem);
}

.color-flex {
  display: flex;
}

.color-flex .color-view {
  flex: 25px 0 0;
}

.color-hex {
  flex: 100px 0 0;
  font-size: 1.4rem;
  font-weight: 600;
  margin-left: 6px;
  line-height: 30px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 0.6rem;
  width: 100%;
  padding-left: 5px
}

.similar-colors {
  flex: 1;
}

.sketch-picker .flexbox-fix {
  border: 0;
}

.sketch-picker .flexbox-fix:nth-of-type(4) {
  border: 1px solid #000;
  border: 0 !important;
  padding-top: 20px !important;
}

.sketch-picker .flexbox-fix:nth-of-type(2) div {
  height: 25px;
  touch-action: none;
  will-change: transform;
}

.sketch-picker .flexbox-fix .hue-horizontal {
  height: 25px;
}

.sketch-picker .flexbox-fix div>div:first-child {
  height: 25px !important;
}

.sketch-picker>div:nth-of-type(4) div {
  margin-top: 10px;
}

.sketch-picker .flexbox-fix .hue-horizontal div div {
  width: 20px !important;
  height: 20px !important;
  margin-left: 2px !important;
  margin-top: 1px !important;
  border-radius: 50% !important;
  background: rgb(255, 255, 255);
  transform: translate3d(-2px, 0, 0);
  -webkit-transform: translate3d(-2px, 0, 0);
  transition: transform 0.1s ease;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  touch-action: none;
  -webkit-overflow-scrolling: touch;
}

.btn-new-size {
  margin-top: 2rem;
}

.btn-color-set {
  display: flex;
  gap: 5px;
}

.btn-color-set button {
  padding: 10px;
  font-size: 15px;
}

.color-edit-list {
  margin: 20px 0;
}

.color-edit-list button.color-item.chip,
.color-delete-list button.color-item.chip {
  width: auto;
}

.modal-content .modal-edit-scroll {
  overflow-y: auto;
  max-height: calc(100vh - 30vh);
  margin-bottom: 10px;
  border-bottom: 1px solid var(--text-300-color);
}

.modal-content .modal-edit-scroll .color-option-list {
  gap: 0.5;
}

.bottom-sheet-content h4 p.read {
  font-size: 1.4rem;
  font-weight: 400;
  width: calc(100% - 50px);
  margin-top: -20px;
}

.color-edit-list .color-item {
  border: 0;
  padding: 0;
}

.color-edit-list .color-item .color-item {
  padding: 0.2rem 1.6rem 0.2rem 0.2rem;
  border: 1px solid var(--text-100-color);
  border-radius: 2rem;
}

.color-edit-list .color-item.active .color-item {
  padding: 0.2rem 1.6rem 0.2rem 0.2rem;
  border: 1px solid var(--secondary-color);
  background: var(--secondary-10-color);
  border-radius: 2rem;
}


.inquiry-conditions .btn-area-relative {
  display: flex;
  align-items: center;
  justify-content: center;
}

.inquiry-conditions .btn-area-relative button {
  min-width: 16rem;
}

/* 상품 상세 */
.product-detail-wrap {
  display: flex;
}

.product-detail-wrap .detail-slider-wrap {
  width: 50%;
  padding-top: 20px;
}

.product-detail-wrap .detail-info-wrap {
  padding: 20px 0px 0 0px;
  width: 40%;
  margin-left: 40px;
  margin-right: 20px;
}


.product-detail-wrap .color-name {
  display: none;
}

.detail-basic-info {
  border-bottom: 1px solid var(--text-200-color);
  padding-bottom: 1.2rem;
}

.detail-basic-info .seller-logo {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border: 1px solid var(--text-200-color);
  margin-right: 0.6rem;
  overflow: hidden;
}

.detail-basic-info .seller-logo img {
  width: 100%;
}

.detail-basic-info .store-name {
  font-size: 1.6rem;
  font-weight: 500;
}

.detail-basic-info .fl,
.detail-basic-info .fr {
  display: flex;
  align-items: center;
}

.detail-category {
  font-size: 1.4rem;
  color: var(--text-500-color);
  padding: 2rem 0 0rem 0;
}

.detail-name {
  font-size: 1.8rem;
  color: var(--text-900-color);
  padding: 1rem 0 1rem 0;
  font-weight: 600;
}

.detail-color {
  display: flex;
}

.detail-color .color-circle {
  width: 2.6rem;
  height: 2.6rem;
  margin-right: 0.5rem;
}

.detail-price {
  padding: 0rem 0 0rem 0;
}

.discount {
  text-decoration-line: line-through;
  font-size: 1.4rem;
  color: var(--text-500-color);
  display: block;
}

.cost {
  font-size: 1.8rem;
  color: var(--text-900-color);
  padding: 0.2rem 0 2rem 0;
  font-weight: 600;
  display: block;
}

.detail-price .cost em {
  color: var(--error-color);
  padding-right: 0.5rem;
  font-size: 1.5rem;
}

.detail-product-basic-info {
  padding: 0rem 0rem 2rem 0rem;
  font-size: 1.5rem;
}

.detail-product-basic-info li {
  padding: 0.5rem 0;
}

.detail-product-basic-info .item {
  display: block;
  padding-bottom: 1rem;
  color: var(--text-400-color);
  font-size: 1.4rem;
}

.detail-product-basic-info .detail-btn-buy {
  border-top: 1px solid var(--text-200-color);
  margin-top: 2rem;
  padding: 2rem 0 3rem 0;
}

.detail-product-basic-info .detail-btn-buy .btnlist div {
  flex: 1;
}

.detail-product-info {
  /* padding: 2em 0; */
  font-size: 1.5rem;
}

.stock-permission {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.stock-permission span {
  font-size: 16px;
  color: var(--secondary-color);
  font-weight: 500;
}

.wholesale .product-detail-wrap .option-table-scroll {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  /* 부모 요소의 크기에 맞게 */
}

.wholesale .product-detail-wrap .ok-permission td {
  padding: 3px !important;
}

.wholesale .product-detail-wrap .no-permission input::placeholder {
  color: #000;
}

.wholesale .product-detail-wrap .ok-permission input::placeholder {
  color: var(--secondary-color)
}

.wholesale .product-detail-wrap .ok-permission input {
  border: 1px solid var(--text-200-color) !important;
  border-radius: 3px;
  width: calc(100% - 10px);
}

/* 소매 매인 */
.login-branch {
  display: flex;
  padding: 0rem 10rem 2rem 10rem;
  border-bottom: 3px solid var(--text-50-color);
}

.login-branch div {
  width: 100%;
  text-align: center;
}

.login-branch div button {
  padding: 0.5rem;
  height: 2.6em;
  background-color: #2C2D2E;
  color: #fff;
  font-size: 1.4rem;
  line-height: 140%;
  width: auto;
  padding: 0 2rem 0 2rem;
}

.login-branch h2 {
  padding: 0rem 0rem 0.5rem 0rem;
  font-size: 1.4rem;
}

/* 도매메인-대시보드-레포트*/

.wholesale-main-wrap {
  padding-top: 5rem;
  font-size: 15px;
}

.wholesale-main-title-btn {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* border-bottom: 1px solid var(--text-100-color); */
}

.wholesale-main-title {
  display: flex;
  align-items: center;
}

.wholesale-main-title-btn button.btn-more {
  border: 0;
  text-indent: -2000px;
  background: url('../images/arrow-right-500.svg') no-repeat right;
  width: 30px;
  height: 30px;
  background-size: 20px;
  overflow: hidden;
}

.wholesale-main-order {
  padding: 2rem;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);

}

.wholesale-main-order .date-picker-component input[type="date"] {
  border: 0px solid #000;
  width: 110px;
  background: var(--secondary-10-color);
}

.wholesale-main-order-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.wholesale-main-order {
  background: var(--text-30-color);
}

.wholesale-main-order-status {
  display: flex;
  gap: 10px;
  flex-direction: column;
}

.wholesale-main-order-status .ftr {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.wholesale-main-order-status .wholesale-main-box-in {
  width: 100%;
  background: var(--secondary-10-color);
  border-radius: var(--border-box-radius);
  padding: 10px;
}

.wholesale-main-box {
  border: 1px solid var(--text-200-color);
  padding: 20px;
  border-radius: var(--border-box-radius);
  background: #fff;
}

.wholesale-main-order-status .wholesale-main-box-in p {
  font-weight: 600;
  font-size: 30px;
  color: var(--secondary-color)
}

.wholesale-main-order-status .wholesale-main-box-in span {
  color: var(--secondary-color);
  font-size: 13px;
  font-weight: 500;
  line-height: 14px;
}

.wholesale-main-order-period {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  margin-left: 10px;
}

.wholesale-main-order-period .period-set {
  margin-top: 0;
  gap: 5px;
}

.wholesale-main-order-period .date-picker-component input[type="date"] {
  border: 1px solid var(--text-300-color);
  width: 120px;
  background: #fff;
  border-radius: 4px;
}

.wholesale-main-order-period .btn-search-conditions {
  margin-left: 5px;
}

.wholesale-main-list {
  width: 100%;
  border-left: 0px solid var(--text-200-color);
  margin-top: 30px;
  padding: 0px 20px 0px 20px;
}

.wholesale-main-list:first-child {
  border-left: 0px solid var(--text-200-color);
  flex: 0 1 25%;
}

.wholesale-main-list:last-child {
  flex: 0 1 30%;
}

.wholesale-main-list:nth-child(2) {
  flex: 0 1 40%;
}

.wholesale-main-list:last-child {
  flex: 0 1 30%;
}

.user-list-section h2 {
  padding-bottom: 10px;
}

.wholesale-main-list .item {
  width: 30%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  padding-left: 8px;
}

.wholesale-main-list .item::before,
.dashboard-product-list .item::before {
  position: absolute;
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 5px;
  background-color: var(--text-600-color);
  top: 8px;
  left: 0;
}

.dashboard-product-list .item {
  overflow: auto;
  text-overflow: inherit;
  width: auto;
}

.wholesale-main-list .content {
  width: 70%;
  font-size: 14px;
  font-weight: 500;
  text-align: right;
}


.wholesale-main-list .num {
  border-radius: 10px;
  min-width: 28px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  background-color: var(--text-50-color);
  justify-content: center;
  align-items: center;
  display: flex;
  height: 22px;
  padding: 0 8px;
}

.wholesale-main-list ul,
.wholesale-main-list-store {
  margin-top: 20px;
}

.wholesale-main-list li {
  display: flex;
  justify-content: space-between;
  padding: 5px 0px;
  align-items: center;
}

.wholesale-main-product-status {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.product-out-stock-card {
  border-bottom: 1px solid var(--text-200-color);
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: flex-start;
  padding-bottom: 20px;
  margin-top: 20px;
}

.product-out-stock-card .thum {
  width: 70px;
  flex: 0 0 70px;
}

.product-out-stock-card .thum .thum-mask {
  width: 7rem;
  height: 7rem;
  overflow: hidden;
  border-radius: var(--border-box-radius);
  border-color: var(--text-200-color);
  aspect-ratio: 9 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-out-stock-card .product-info {
  flex: 1;
  margin-top: 0;
}

.product-out-stock-card .product-info span.name {
  font-weight: 500;
}

.product-out-stock-card .product-info span {
  display: block;
}

.product-out-stock-card .product-info span.id {
  font-size: 1.2rem;
  color: var(--text-500-color);
  display: block;
  padding-bottom: 0.3rem;
}


.product-out-stock-card td,
.product-out-stock-card th,
.product-out-stock-card td input {
  text-align: center;
}

.product-details-card-button {
  margin-top: 10px;
  ;
}

.wholesale-main-list-store {
  position: relative;
}

.wholesale-main-list-store .no-message-wrap {
  position: relative;
}

.wholesale-main-list-store .no-message-wrap .no-message {
  padding-bottom: 0;
}

.wholesale-main-list-store .no-message-wrap .no-message img {
  padding-top: 0px;
}

.wholesale-main-list-store .store-list {
  display: flex;
  justify-content: space-between;
}

.wholesale-main-plans {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
}

.wholesale-main-plans span.d-day {
  color: var(--primary-color)
}

.wholesale-main-plans .upgrade-area {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wholesale-main-plans .upgrade-area button {
  margin-left: 10px;
  background: #fff;
}

.main-product {
  position: relative;
  margin-top: 0rem;
}

.main-promotion {
  position: relative;
  margin-top: 2rem;
}

.main-product .swiper {
  padding-right: 4rem;
}

.main-product h4,
.main-promotion h4 {
  padding: 2rem 4rem 1rem 4rem;
}

.main-product .product-list {
  padding-left: 2rem;
}

.main-product-all {
  position: absolute;
  top: 2rem;
  right: 1.6rem
}

/* 상품리스트 */
.product-list-recommand {
  display: flex;
  flex-wrap: wrap;
  gap: 1%;
  justify-content: start;
  padding: 2rem;
}

.product-list-recommand .roduct-list-item {
  width: 32%;
}

.store-product-list-item {
  display: inline-block;
  width: 24.2%;
}

.store-product-list .store-product-list-item .thumbnail {
  width: 100%;
}

.store-product-sort {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.store-product-sort+.store-product-list {
  margin-top: 1rem;
}

.omnyx-new-product {
  padding-top: 2rem;
}

.omnyx-new-product h4 {
  padding: 1rem 0 1.6rem 0;
  font-weight: 600;
}

/* 공통 스타일 */
.combo-button {
  border: 0px solid #ccc;
  border-radius: 0px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.5rem;
  background: url('../images/ico-arrow-down.svg') no-repeat right;
  border-bottom: 1px solid var(--text-300-color);
  width: auto;
  padding: 1rem 2.4rem 1rem 1rem;
}


.store-product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1%;
  justify-content: start;
}

.product-total {
  font-size: 1.5rem;
}

.store-product-list .thumbnail {
  /* width: 32%; */
  width: 24.2%;
}

.store-product-list .thumbnail .thumbnail-content {
  width: 100%;
  border: 1px solid #ccc;
  position: relative;
  height: min-content;
  border: 0;
  border-radius: 0;
}

.store-product-list .thumbnail .thumbnail-content .responsive-box {
  position: relative;
  width: 100%;
  background: var(--text-50-color);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--border-box-radius);
}

.store-product-list .thumbnail .product-info {
  width: auto;
  padding-bottom: 3rem;
}

.responsive-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scroll to Top 버튼 스타일 */
.scroll-to-top-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background-color: #fff;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 19;
  transition: opacity 0.3s ease, background-color 0.3s ease;
  opacity: 1;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

.scroll-to-top-btn.hidden {
  opacity: 0;
  pointer-events: none;
}

.wholesale-menu {
  display: none;
}

/* DatePickerComponent 스타일 */
input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
  height: 3rem;
  opacity: 0;
  pointer-events: auto;
}

.custom-date-picker {
  background: url('../images/ico-calendar.svg') no-repeat right 8px;
}

.period-set {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  align-items: center;
  font-size: 1.5rem;
}

.btn-search-conditions {
  width: 3.6rem !important;
  height: 3.6rem;
  padding: 0.8rem;
  background: #fff url('../images/ico-search-filter.svg') no-repeat center;
  text-indent: -1000px;
  overflow: hidden;
  background-size: 50%;
}

.date-picker-component {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.date-picker-component label {
  position: relative;
  padding-right: 01rem;
  display: none;
}

.date-picker-component span {
  position: absolute;
  top: 0;
  right: 0;
}

.date-picker-component input[type="date"] {
  width: 100%;
  font-size: 16px;
  border: 0;
  border-bottom: 1px solid #ccc;
  border-radius: 0px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  height: 3.6rem;
  text-align: left;
  padding-left: 0.5rem
}

.date-picker-component input[type="date"]:focus {
  /* box-shadow: 0 0 6px rgba(0, 123, 255, 1); */
  outline: none;
  border: 0;
  border-bottom: 1px solid var(--primary-color) !important;
}

.date-picker-component input[type="date"]::placeholder {
  color: #aaa;
  font-size: 14px;
}

.mobile {
  font-size: 16px;
}

.tablet {
  font-size: 18px;
}

body {
  min-width: 32rem;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  word-wrap: break-word;
  word-break: break-all;
  font-size: 100%;
  font-weight: 400;
}

/*구독재요청*/
.request-box {
  border: 1px solid var(--text-200-color);
  border-radius: var(--border-box-radius);
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--box-shadow);
}

.request-box .request-item {
  font-size: 1.3rem;
  color: var(--secondary-color);
  font-weight: 500;
}

.request-box .request-content {
  font-size: 1.6rem;
  padding: 0.4rem;
  padding-left: 5px;
  border-radius: 6px;
  margin-top: 10px;
  min-height: 28px;
  display: flex;
  align-items: center;
  background-color: var(--text-30-color);
}

.request-box li {
  padding: 1rem 0;
}

.request-box .btn-area-relative {
  padding-top: 0;
}

.request-box-title {
  padding-bottom: 10px;
}

.request.register-prompt {
  padding: 0rem 0 2rem 0;
}

.request-list {
  padding-top: 20px;
}

.request-list td {
  text-align: center;
}

.request-list-scroll {
  border: 1px solid var(--text-200-color)
}

.plan-option {
  padding-bottom: 20px;
}

/* 도매 메인 */
.main-title {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  font-weight: 600;
  padding-left: 1rem;
}

.main-title-welcome {
  font-size: 2rem;
}

.wholesale-menu-wrap {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  margin: 1rem auto;
  background: #fff;
  border-radius: 1rem;
  margin-bottom: 2rem;
  justify-content: center;
  gap: 17px;
}

.wholesale-menu-wrap li {
  width: 12%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  border-radius: 1rem;
  border: 1px solid var(--text-200-color);
  padding: 1rem;
  background: #fff;
}

.wholesaler-head {
  padding: 20px 20px 18px 20px;
  display: flex;
  align-items: center;
  justify-items: center;
  justify-content: center;
}

.wholesaler-head button {
  width: 180px;
  margin-left: 10px;
}

.wholesaler-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-top: 1px solid var(--text-100-color);
}

.wholesaler-list .wholesaler-item {
  display: flex;
  justify-items: center;
  align-items: center;
  padding: 0px 0 20px 0;
  gap: 16px;
  border-bottom: 1px solid var(--text-100-color);

}

.wholesaler-list .wholesaler-item .seller-card-logo {
  width: 60px;
  height: 60px;
  border: 1px solid var(--text-300-color);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  flex: 60px 0 0;
}

.wholesaler-item {
  font-size: 1.5rem;
}

.wholesale-item .seller-card-logo {
  width: 4.8rem;
  border-radius: 50%;
  height: 4.8rem;
  border: 1px solid var(--text-300-color);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
}

.wholesale-item h3 {
  font-size: 1.7rem;
  margin-bottom: 0.5rem;
  padding-left: 0.6rem;
}

.wholesale-item p {
  padding-top: 0.2rem;
  color: var(--text-500-color);
  padding-left: 0.6rem;
  font-size: 1.4rem;
}

.retail-menubox-wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 2.6rem auto;
  padding: 0;
}

.wholesale .retail-menubox-wrap {
  margin: 2rem auto 0rem auto;
}

.wholesale .category-select-view {
  padding: 0;
}

.retail-menubox-wrap button {
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.retail-menubox-wrap li {
  width: calc(20% - 6px);
  height: 6rem;
  display: flex;
  font-size: 1.3rem;
  margin-bottom: 18px;
  border-radius: 1rem;
  height: 100px;
}

.retail-menubox-wrap .icon {
  width: 6rem;
  height: 6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--text-50-color);
  border-radius: 3rem;
}

.retail-menubox-wrap img {
  width: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.retail-menubox-wrap .title {
  font-size: 1.4rem;
  display: block;
  text-align: center;
  display: flex;
  justify-content: center;
  width: 100%;
  color: var(--text-600-color);
  line-height: 1.4rem;
  margin-top: 0.8rem;
}

.retail-menubox-wrap li.no-select {
  border: 0;
  padding: 0;
  background: none;
}

.retail-menubox-wrap li.no-select button {
  border: 1px solid var(--text-100-color);
  border-radius: 1rem;
  height: 6rem;
  font-size: 1.2rem;
  line-height: 1.4rem;
  width: 100%;
  background: #fff;
}

.retail-menubox-wrap li.no-select .active {
  border: 1px solid var(--secondary-color);
  background: var(--secondary-10-color);
}

.retail-menubox-wrap li.active .icon {
  background-color: var(--secondary-10-color);
  border: 1px solid var(--secondary-color);
}

.retail-menubox-wrap li.active .title {
  color: var(--secondary-color);
  font-weight: 600;
}

.retail-menubox-wrap.new-category li {
  width: calc(33% - 6px);
  border: 0;
  height: 10rem;
  display: flex;
  justify-content: center;
}

.retail-menubox-wrap.new-category li .retail-menu-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.retail-menubox-wrap.new-category .icon {
  width: 6rem;
  height: 6rem;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  border-radius: 50%;
  background: #F5F6F8;
  overflow: hidden;
}

.retail-menubox-wrap.new-category img {
  width: 6em;
  display: flex;
  margin: 0;
}

.retail-menubox-wrap.new-category .title {
  padding-top: 1rem;
}

.retail-menulist-wrap li {
  border-bottom: 1px solid var(--text-100-color);
  background: #fff;
  padding-right: 1rem;
}

.retail-menulist-wrap button {
  padding: 1.6rem 0rem 1.6rem 2rem;
  text-align: left;
  border: 0;
  font-size: 1.6rem;
  background: url('../images/arrow-right.svg') no-repeat right;
}

.retail .step.active .step-label {
  color: var(--primary-color);
}

.wholesale-menu-head {
  display: flex;
  position: relative;
  justify-content: space-between;
}

.wholesale-menu-head .my-name {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-items: center;
  background: url('../images/arrow-right-500.svg') no-repeat right;
  padding: 1rem 2.2rem 1rem 0rem;
  border: 0;
  background-size: 18%;
  gap: 6px;
  background-size: 16%;
}

.wholesale-menu-head .my-name .seller-logo {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--text-100-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

.wholesale-menu-head .fr {
  display: flex;
}

.wholesale-menu-head .fr button {
  width: auto;
  background: none;
  text-decoration: underline;
  padding: 1.6rem 0rem 1rem 2rem;
  border: 0;
}

.btn-admin {
  padding: 0;
  margin: 0;
  height: 4rem;
}

.wholesale-menu-box {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.snb-slider-wrap .wholesale-menu-box {
  gap: 6px;
}

.wholesale-menu-box .icon {
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wholesale-menu-box .icon.ico-wholesale-main-01 {
  background: url(../images/ico-wholesale-main-01.svg) no-repeat center;
  background-size: 90%;
}

.wholesale-menu-box .icon.ico-wholesale-main-02 {
  background: url(../images/ico-wholesale-main-02.svg) no-repeat center;
  background-size: 90%;
}

.wholesale-menu-box .icon.ico-wholesale-main-03 {
  background: url(../images/ico-wholesale-main-03.svg) no-repeat center;
  background-size: 90%;
}

.wholesale-menu-box .icon.ico-wholesale-main-04 {
  background: url(../images/ico-wholesale-main-12.svg) no-repeat center;
  background-size: 90%;
}

.wholesale-menu-box .icon.ico-wholesale-main-05 {
  background: url(../images/ico-wholesale-main-05.svg) no-repeat center;
  background-size: 90%;
}

.wholesale-menu-box .icon.ico-wholesale-main-06 {
  background: url(../images/ico-wholesale-main-06.svg) no-repeat center;
  background-size: 90%;
}

.wholesale-menu-box .icon.ico-wholesale-main-07 {
  background: url(../images/ico-wholesale-main-07.svg) no-repeat center;
  background-size: 90%;
}

.wholesale-menu-box .icon.ico-wholesale-main-08 {
  background: url(../images/ico-wholesale-main-08.svg) no-repeat center;
  background-size: 90%;
}

.wholesale-menu-box .icon.ico-wholesale-main-09 {
  background: url(../images/ico-wholesale-main-09.svg) no-repeat center;
  background-size: 90%;
}

.wholesale-menu-box .icon.ico-wholesale-main-10 {
  background: url(../images/ico-wholesale-main-10.svg) no-repeat center;
  background-size: 90%;
}

.wholesale-menu-box .icon.ico-wholesale-main-11 {
  background: url(../images/ico-wholesale-main-11.svg) no-repeat center;
  background-size: 90%;
}

.wholesale-menu-box .icon.ico-wholesale-main-13 {
  background: url(../images/ico-wholesale-main-13.svg) no-repeat center;
  background-size: 90%;
}

.wholesale-menu-box .icon.ico-wholesale-main-14 {
  background: url(../images/ico-wholesale-main-14.svg) no-repeat center;
  background-size: 90%;
}

.wholesale-menu-box .icon.ico-wholesale-main-15 {
  background: url(../images/ico-wholesale-main-15.svg) no-repeat center;
  background-size: 90%;
}

.wholesale-menu-box .icon.ico-wholesale-main-16 {
  background: url(../images/ico-wholesale-main-16.svg) no-repeat center;
  background-size: 90%;
}

.etc-btn button {
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0;
  border-top: 1px solid var(--text-50-color);
}

.etc-btn button:hover {
  background-color: var(--text-30-color);
}

.etc-btn button .wholesale-menu-box {
  gap: 6px;
}

.wholesale-menu-box .title {
  font-size: 1.4rem;
  display: block;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: var(--text-600-color);
  /* height: 3rem; */
  font-weight: 500;
}

.no-message-wrap {
  position: absolute;
  width: 100%;
}

.retail-cart-wrap .no-message-wrap {
  position: relative;
}

.retail-cart-wrap .order-detail-wrap .check-item {
  padding-bottom: 0;
}

.no-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 3rem;
}

.no-message img {
  width: 4.6rem;
  height: 4.6rem;
  padding: 8rem 2rem 0rem 2rem;
}

.no-message span {
  display: block;
  font-size: 1.4rem;
  padding: 1.6rem 2rem 0rem 2rem;
  color: var(--text-400-color);
  text-align: center;
}

/* 조회조건 탑시트 */
.top-sheet {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  transition: top 0.3s;
  animation: slide-down 0.1s;
}

.top-sheet .bottom-sheet-wrap {
  border-radius: 0rem 0rem 1rem 1rem;
}

.top-sheet .divider-thin {
  margin: 15px 0 15px 0;
}

/* 스위치 */
.switch-container {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.switch-container.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.switch-label {
  font-size: 14px;
  color: #333;
}

.switch {
  width: 50px;
  height: 25px;
  border-radius: 25px;
  background-color: #ccc;
  position: relative;
  transition: background-color 0.3s ease;
}

.switch.on {
  background-color: var(--primary-color)
}

.switch.off {
  background-color: #ccc;
}

.switch.disabled {
  background-color: #e0e0e0;
}

.switch-thumb {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left 0.3s ease;
}

.switch.on .switch-thumb {
  left: 27px;
}

.switch.off .switch-thumb {
  left: 2px;
}

.order-status {
  /* display: flex; */
  margin-bottom: 1rem;
  justify-content: space-between;
}

.order-status button {
  width: auto;
  padding: 0.5rem 1rem;
  font-size: 1.4rem;
}

.order-status-detail-wrap {
  padding-top: 5rem !important;
}

/* .order-status-detail-wrap .order-status-detail-head {
  padding:0 10px 10px 10px
} */

.order-status-detail-wrap .order-status-detail-head h4,
.order-status-detail-wrap .order-status-detail-head span {
  font-size: 1.4rem;
  display: block;
  padding-top: 0.5rem;
  color: var(--text-500-color);
  color: var(--text-600-color);
  font-weight: 600;
}

.order-status-detail-wrap .order-status-detail-head h4 strong,
.order-status-detail-wrap .order-status-detail-head span strong {
  display: inline-block;
  font-weight: 700;
}


/* .order-status-detail-wrap .order-payment-bill {
  padding: 1rem;
}  */

.order-detail-wrap .order-payment-bill {
  margin-top: 20px
}

.order-detail-wrap hr.divider {
  background-color: var(--text-300-color);
  margin: 10px -20px;
  height: 1px;
  width: calc(100% + 40px);

}

.order-status-detail-wrap .fix-btn {
  display: block;
  /* padding: 0.5rem 2rem 2rem 2rem; */
  border-radius: 1rem 1rem 0 0;
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1);
}

.order-status-detail-wrap .fix-btn .radio-group {
  padding-bottom: 2rem;
  margin-top: -1rem;
}

.order-status-detail-wrap .fix-btn .form-group {
  margin-top: -2rem
}

.order-status-detail-wrap .order-status-detai-list {
  padding-top: 0;
}

.order-status-detail-wrap .order-payment-product .cart-select-option {
  /* margin-top: -10rem; */
  padding-bottom: 2rem;
}

.reason {
  color: #ff0000;
  font-size: 1.5rem;
}

.retail-cart-wrap .cart-card .cart-card-total,
.retail-cart-wrap .cart-card .btnlist {
  margin-left: 2rem;
  /* border:1px solid #000; */
}

.cart-card .product-details-card .product-info .price-info {
  position: absolute;
  bottom: 3rem;
}

.cart-card .product-details-card .product-info .name {
  padding-top: 0rem;
}

.order-payment-product-wrap .option-item {
  margin-top: 0.8rem;
  font-size: 1.3rem;
  margin-left: 0.5rem;
}

.order-status-detail-wrap .order-payment-product .cart-select-option {
  margin-left: 8.6rem;
}

.order-status-detail-wrap .order-payment-info h3 {
  font-size: 1.6rem;
}

.order-status-detail-head span {
  font-size: 1.3rem;
}

.order-status-detail-head h3 {
  padding-bottom: 0
}

.order-status-detai-list {
  padding-top: 2rem;
}

.transaction-complete {
  background: url(../images/icon-colplete.svg) no-repeat top;
  background-size: 40px;
  text-align: center;
  padding-top: 5rem;
  font-size: 1.4rem;
}

.order-detail-wrap {
  padding: 1rem 0 2rem 0;
  background: #fff;
}

.approve-wrap .radio-group {
  padding: 0;
}

.approve-wrap .radio-group {
  display: flex;
  justify-content: flex-start;
}

.approve-wrap .radio-group div {
  justify-content: flex-start;
}

.approve-wrap .form-group {
  margin: 0
}

.read-step {
  font-size: 1.3rem;
  color: var(--secondary-color);
  text-align: center;
  padding: 1rem 1rem 2rem 1rem;
}

.order-cart-card .cart-card {
  margin: 2rem 2rem;
}

.status-filter {
  display: flex;
  gap: 0.6rem;
  padding-bottom: 1rem;
  flex-wrap: wrap;
}

.status-filter button {
  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
  width: auto;
  border-radius: 1.8rem;
  background-size: 50%;
}

.status-filter button.active {
  border-color: var(--secondary-color);
  color: var(--secondary-color);
  background: var(--secondary-10-color);
}

.top-sheet h5 {
  padding: 2rem 0;
  font-size: 1.5rem;
}

.top-sheet .btn-center {
  margin-top: 1rem
}

.corp-wrap {
  width: 100%;
  z-index: 20;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--text-200-color);
  margin-top: 4rem;

}

.corp_area {
  width: 100%;
  /* background-color: var(--text-30-color); */
  color: var(--text-500-color);
  /* position: relative; */
  text-align: center;
  font-size: 1.2rem;
  line-height: 2rem;
  text-align: left;
}

.corp_area ul {
  padding: 2rem;
}

/* 소매 전체카테고리*/
.retail-category.content-wrap {
  /*background-color: var(--text-50-color);*/
  padding-top: 4rem;
  padding-bottom: 0rem;
}

.retail-category h2 {
  font-size: 1.8rem;
  padding-bottom: 1rem;
  font-weight: 500;
}

.retail-category .retail-menubox-wrap {
  padding: 1rem 2rem 0rem 2rem;
}

.retail-category-in {
  padding: 2rem 4rem 0 4rem;
  display: flex;
  justify-content: space-between;
}

.retail-category-in .my-area {
  display: flex;
  position: relative;
}

.retail-category-in .cashbag {
  font-size: 1.3rem;
  color: var(--text-400-color);
}

.cashbag .amount {
  padding-left: 1rem;
  color: var(--primary-color);
}

.help-links.my-page {
  position: absolute;
  top: -4rem;
  right: 0;
  padding: 0;
  border: 0
}


.my-page-util {
  display: flex;
}

.my-page-util button {
  border: 0px solid #000;
  border-radius: 0;
  height: 20px;
  line-height: 20px;
  margin-left: 20px;
  padding-left: 24px;
  text-align: left;
}

.my-page-util button.btn-logout {
  background: url(../images/ico-wholesale-main-08.svg) no-repeat left center;
  background-size: 20px;
}

.my-page-util button.btn-my-info {
  background: url(../images/ico-wholesale-main-04.svg) no-repeat left center;
  background-size: 20px;
}


.help-links.my-page button {
  color: var(--primary-color);
  padding: 1rem;
}

.retail-category .btnlist {
  display: flex;
  justify-content: flex-start;
  align-items: center;

}

.retail-category .btnlist div {
  flex: 0 0 auto;
}

.one-depth {
  display: flex;
  justify-content: flex-start;
  /* 기본 정렬 */
  align-items: center;
  /* 세로 중앙 정렬 */
  padding-left: 1rem;
  border-bottom: 1px solid var(--text-200-color);
  padding-bottom: 0.8rem
}

.one-depth button {
  border: 0;
  background: none;
  font-size: 1.6rem;
  position: relative;
  height: 3.6rem;
  flex: 0 0 auto;
  width: auto;
  padding: 1rem;
  font-weight: 400;
}

.one-depth button.active {
  border: 0;
  background: none;
  font-weight: 600;
  color: var(--primary-color);
  font-size: 1.7rem;
}

.one-depth button.active::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  background: var(--primary-color);
  border-radius: 50%;
}

.submenu-container {
  display: flex;
}

.submenu-container button {
  border: 0;
  background: none;
  text-align: left;
  font-size: 1.5rem;
}

.two-depth {
  width: 15rem;
  flex: 0.8;
}

.two-depth li {
  padding: 1.2rem;
  font-size: 1.6rem;
  border-bottom: 1px solid var(--text-100-color);
  border-right: 1px solid var(--text-100-color);
}

.two-depth li.active button {
  font-weight: 600;
  color: var(--primary-color);
}

.two-depth li.active {
  font-weight: 600;
  color: var(--primary-color);
  background: #fff;
  border-right: 1px solid #fff
}

.three-depth {
  background: #fff;
  height: 100vh;
  flex: 1;
  padding: 1rem 1rem 1rem 1rem;
}

.three-depth li {
  padding: 1rem;
  font-size: 1.6rem;
}

/*장바구니*/
.retail-cart-wrap {
  padding-bottom: 12rem;
}

.retail-cart-wrap .group-block {
  border-radius: var(--border-box-radius);
  background: #fff;
  border: 1px solid var(--text-100-color);
  box-shadow: var(--box-shadow);
  padding: 10px;
  margin: 20px 0px;
}

.retail-cart-wrap .group-block h3 {
  font-size: 1.7rem;
  padding: 1rem
}

.retail-cart-wrap .group-block .cart-card {
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--text-200-color);
}

.product-wrap .dimed {
  display: none;
}

.product-wrap.disabled {
  position: relative;
  pointer-events: all;
  opacity: 0.6;
}

.product-wrap.disabled .dimed {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.7;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-wrap .dimed-btn-area {
  display: none;
}

.product-wrap.disabled .dimed-alert {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-wrap.disabled .dimed-btn-area {
  position: absolute;
  z-index: 10;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--text-400-color);
  padding: 1.2rem;
  width: auto;
  position: absolute;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
}

.product-wrap.disabled .dimed-btn-area p {
  padding-bottom: 1rem;
  color: #fff;
  font-size: 1.5rem;
}

.product-wrap .dimed button {
  font-size: 1.4rem;
  font-weight: 500;
  padding: 1rem;
  border-radius: 6px;
  width: auto;
  z-index: 3;
}

.retail-cart-wrap .group-block .cart-card-total {
  /* border-top: 1px solid var(--text-200-color); */
  margin-top: 1rem
}

.retail-cart-wrap .group-header {
  padding: 0.5rem 0.5rem 1rem 0rem;
}

.retail-cart-wrap .group-header .title {
  font-weight: 600;
  font-size: 1.6rem;
}

.group-header {
  display: flex;
  /* justify-content: space-between; */
}

.group-header-fl,
.group-header-fr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.group-block:first-of-type {
  border: 1px solid #000;
}

.select-delete {
  padding: 0 0 5px 0;
  margin-bottom: 1rem;
  position: relative;
  font-weight: 400;
  /* border-bottom: 1px solid var(--text-300-color); */
}

.select-delete .btnlist {
  position: absolute;
  right: 0rem;
  top: -2rem;
  width: auto;
}

.select-delete .btnlist div {
  flex: 1;
}

.wholesale .order-detail-wrap .select-delete {
  margin-top: -10px;
  padding-bottom:0;
}

.wholesale .order-detail-wrap .select-delete .btnlist {
 top: 0rem;
}

.filter-search-result {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-right:20px;
}

.cart-card {
  border: 1px solid var(--text-200-color);
  border-radius: var(--border-box-radius);
  margin-bottom: 1rem;
  background: #fff;
}

.cart-card-title {
  margin: 1rem 1rem 0rem 1rem;
  padding: 1rem 0 1rem 0;
  border-bottom: 1px solid var(--text-500-color)
}

.cart-card-title h3 {
  font-size: 1.6rem;
}

.cart-card-bill-box {
  background: var(--text-50-color);
  padding: 1rem;
  border-radius: var(--border-box-radius);
}

.cart-card-bill-box li {
  padding: 0.5rem;
  font-size: 1.4rem;
  display: flex;
}

.cart-card-bill-box li span {
  flex: 1;
}

.cart-card-bill-box li .amount {
  text-align: right;
}

.cart-card-bill .cart-card-total {
  padding: 2rem 0.5rem;
}

.cart-order .discount-price {
  margin-left: 0.5rem;
  text-decoration: line-through;
  color: var(--text-400-color);
  font-weight: 400;
  font-size: 1.3rem;
}

.bottom-sheet-bill .bottom-sheet {
  z-index: 20;
  /* max-height: 90%;
  overflow-y: scroll; */
}

.bottom-sheet-bill .close-button {
  width: 99%;
  background: #fff url(../images/ico-bottom-open.svg) no-repeat center;
  top: 0;
  margin-top: 0px;
  border-radius: 1rem;
}

.cart-card .product-details-card {
  border: 0
}

.cart-select-option {
  background: var(--text-30-color);
  padding: 0.5rem 0.5rem 1.5rem 0.5rem;
  font-size: 1.4rem;
  position: relative;
  margin: 0 0.5rem;
  border-radius: 4px;
}

.cart-select-option .cart-color-circle {
  display: flex;
  align-items: center;
  margin-right: 16px;
}

.cart-select-option .cart-color-circle .color-circle {
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 26px;
}

.cart-select-option .option-price {
  font-weight: 500;
  margin-top: 0.6rem;
  font-size: 1.5rem;
}

.order-block .cart-select-option .option-price {
  margin-left: 0.5rem;
}

.cart-select-option .btn-delete {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  /* background: url('../images/btn-delete.svg') no-repeat center;
  background-size: 50%; */
}


.out-of-stock {
  color: var(--error-color);
  font-size: 14px;
}

.cart-select-option .counter {
  position: absolute;
  top: 3rem;
  right: 1rem
}

.cart-card .btnlist button {
  width: 100%;
}

.cart-card-total {
  padding: 1.4rem 0.5rem;
  display: flex;
}

.cart-card-total span {
  display: inline-block;
  flex: 1;
  font-size: 1.5rem;
  font-weight: 500;
}

.cart-card-total .amount {
  text-align: right;
}

.cart-order {
  border-top: 1px solid var(--text-100-color)
}

.cart-order-box .cart-order {
  padding: 1rem 0;
}

.cart-order-box .cart-order:first-child {
  border-top: 0;
}

.cart-order-box .cart-select-option {
  margin-left: 2.4rem;
  padding-top: 1rem;
  margin-bottom: 6px;
}

.cart-overlay {
  position: absolute;
  width: calc(100% - 2rem);
  height: calc(100% - 3rem);
  background: #fff;
  z-index: 100;
  opacity: 0.6;
}

.cart-total-amount-bill {
  display: flex;
  padding-bottom: 1.6rem;
  font-size: 1.6rem;
}

.cart-total-amount-bill span {
  flex: 1;
  font-weight: 600;
}

.cart-total-amount-bill .last-amount {
  text-align: right;
  padding-right: 3.6rem
}

.cart-total-amount button.btn-bill-detail.close,
.cart-total-amount button.btn-bill-detail.open {
  background-size: contain;
  border: 0;
  overflow: hidden;
  height: 3rem;
  width: 3rem;
  text-indent: -100rem;
  background: url('../images/ico-bill-up.svg') no-repeat center;
  position: absolute;
  top: 1.4rem;
  right: 2rem;
}

.cart-total-amount button.btn-bill-detail.open {
  background: url('../images/ico-bill-down.svg') no-repeat center;
}

.cart-total-amount .btnlist div {
  flex: auto;
}

.total-amount {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  font-size: 1.6rem;
  font-weight: 500;
}

.total-amount .amount {
  display: block;
  min-width: 100px;
  text-align: right;
}

.order-payment-product {
  border-radius: var(--border-box-radius);
  background: #fff;
  position: relative;
}

.order-payment-product-wrap {
  padding: 0rem;
  background: var(--text-30-color);
}

/* .order-payment-product-wrap .order-block,
.retail-cart-wrap .group-block,
.order-payment-info,
.order-payment-bill,
.order-payment-product .cart-card,
.main-list-wrap .section {
  padding: 2rem 8rem;
} */

.payment-method-tabs {
  margin-top: 10px;
  padding-bottom: 16px;
  border-radius: var(--border-box-radius);
  background: var(--text-30-color);

}

.payment-method-tabs .tabs-group .tabs {
  gap: 6px;
}

.payment-method-tabs .tab-content {
  padding: 0rem 0 0rem 0;
  display: flex;
  justify-content: center;
  align-items: center;

}

/* .order-payment-product-wrap .order-block:first-child {
  margin-top: -1rem
} */

.order-payment-product .cart-card {
  border: 0;
}

.order-payment-product-wrap h3.order-case {
  font-size: 1.7rem;
  padding: 1rem 0.5rem 0.5rem 1rem;
  font-weight: 600;
}

.order-payment-product .cart-card .cart-order {
  padding: 0rem 0.5rem 0rem 0.5rem;
}

.order-payment-product .cart-select-option {
  background: none;
  padding: 0;
  margin-left: 9rem;
  margin-top: -6.2rem;
  font-size: 1.3rem;
}

.order-payment-product .order-date {
  padding: 0.5rem 0rem;
  display: inline-block;
  font-size: 1.4rem;
}

.order-payment-product .order-list-info {
  position: relative;
  /* display: flex;
  flex-direction: column; */
  gap: 0.3rem;
  padding: 1rem;
  margin-right: 9rem;
}

h4.status {
  background: var(--primary-50-color);
  border-color: var(--primary-color);
  color: var(--primary-color);
  font-size: 1.3rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--border-box-radius);
  text-align: center;
  font-weight: 500;
  min-width: 8rem;
  display: inline-block;
}

h4.status.refusal {
  background: var(--text-100-color);
  color: var(--text-500-color);
}

h4.status.complete {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

h4.status.hold {
  background: var(--secondary-10-color);
  color: var(--secondary-color);
}

h4.status.cancel {
  background: #FFE9E9;
  color: #E41A1D;
}

h4.status.offline {
  background: #D5FCD1;
  color: #0EAA00;
}

h4.status.ship {
  background: #DFF3FF;
  color: #005285;
}

.order-search-conditions {
  display: flex;
  justify-content: space-between;
  padding: 20px 20px 0 20px;
}

.order-payment-product .order-list-info .order-number,
.order-payment-product .order-list-info .order-date {
  font-size: 1.4rem;
  color: var(--text-400-color);
}

.order-payment-product .order-list-info .order-name {
  font-size: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  padding-bottom: 0.3rem;
  padding-right: 30px;
}

.order-payment-product .order-list-info .order-amount {
  font-weight: 500;
  font-size: 1.8rem;
  position: absolute;
  right: -7rem;
  bottom: 1rem;
}

.order-payment-product .btn-detail {
  position: absolute;
  width: 100%;
  height: 100%;
  right: 1rem;
  top: 1rem;
  padding: 1.6rem 2rem 1.6rem 2rem;
  border: 0;
  background: url('../images/arrow-right.svg') no-repeat top right;
  background-size: 24px;
  text-indent: -10000px;
  overflow: hidden;
  z-index: 0;
}

.order-payment-product .status-completed {
  padding: 1rem 0 0rem 1rem;
  color: var(--primary-color);
}

.order-payment-product h4 span {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text-600-color);
}

.order-payment-product .cart-order {
  border: 0;
  padding: 0;
}

.order-staus-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 10rem !important;
}

.order-staus-section .order-payment-info,
.order-staus-section .order-payment-bill,
.order-staus-section .order-payment-product {
  padding: 20px;
  background: #fff;
  border-radius: var(--border-box-radius);
  border: 1px solid var(--text-100-color);
}



.order-payment-info li {
  display: flex;
  align-items: flex-start;
  padding: 0.5rem 1rem;
  font-size: 1.5rem;
  font-weight: 400;
}

.order-payment-info li span.item {
  flex: 0 0 30%;
}

.order-payment-info li span {
  flex: 0 0 70%;
}

.order-payment-method {
  padding: 2rem 0rem 1rem 0rem;
}

/* .order-coupon-wrap {
  position: relative;
} */

.order-payment-method h3,
.order-payment-bill h3,
.accordion-header h3,
.order-payment-product-wrap h3 {
  font-size: 1.7rem;
  font-weight: 600;
}

.order-payment-method .tabs-line {
  padding-bottom: 2rem;
}

.btn-order-complete {
  display: flex;
  gap: 10px;
  padding: 1rem;
  margin-top: 1rem;
}

.btn-order-complete button {
  border-radius: 3rem;
  padding: 0 2rem;
  height: 5rem;
  font-size: 1.6rem;
}

.coupon-select {
  padding: 1rem;
  text-align: left;
  font-size: 1.5rem;
  margin: 1rem 00.8rem 1rem 0.8rem;
  border: 1px solid var(--text-300-color);
  border-radius: 4px;
  background-color: #ffffff;
  height: 3.6rem;
  font-size: 15px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url('../images/ico-arrow-down.svg') no-repeat right;
  width: calc(100% - 20px);
}

.line-coupon-list {
  padding-bottom: 4rem
}

.order-payment-method .tabs-group {
  padding: 0;
}


.line-coupon-list li {
  display: flex;
  padding: 1rem;
  position: relative;
}

.line-coupon-list li .btn-delete {
  position: absolute;
  right: 0
}

.line-coupon .discount-option .input-container {
  border-bottom: 0 !important;
}

.line-coupon .btn-center {
  padding-top: 2rem;
  padding-bottom: 2rem
}



.orderer-bill-amount {
  padding: 1rem 0rem
}



.orderer-bill-amount li {
  font-size: 1.6rem;
  padding: 0.5rem
}

.orderer-bill-amount li.payment-detail {
  color: var(--text-500-color);
  font-size: 1.5rem;
  background: url('../images/ico-bl.svg') no-repeat left;
  padding-left: 1rem;
  margin-left: 1rem;
}


.orderer-bill-amount li span {
  font-weight: 600;
}


.order-payment-method h3,
.order-payment-info h3 {
  padding-bottom: 1rem;
  font-size: 1.7rem;
  font-weight: 600;
}

.re-amount.total-amount {
  margin-top: 20px;
}

.order-payment-method .btnlist {
  padding-top: 2rem;
}

.order-payment-method .time-list {
  padding-top: 1rem;
}

.order-sataus {
  margin: 1.6rem 0;
  display: flex;
  justify-content: flex-end;
}

.order-sataus .combo-button {
  width: 20rem;
  padding: 1rem 3rem 1rem 1rem;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--text-300-color)
}

.order-sataus .dropdown {
  width: 20rem;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  border-bottom: 0px solid var(--text-300-color)
}

.order-sataus select {
  width: 20rem;
}

.order-sataus .input-container {
  display: inline-block;
}

.section-bank,
.section-cash,
.section-card {
  padding: 1rem 0;
}

.section-bank h5 {
  padding: 2rem 0 1rem 0;
  font-size: 1.5rem;
}

.section-bank {
  padding: 0rem 0 1rem 0;
  font-size: 1.5rem;
  line-height: 2rem
}

.visit-time {
  margin-top: 2rem
}

.section-bank p.deposit-period {
  color: var(--primary-color);
}

.preparing {
  text-align: center;
  background: var(--text-30-color);
  padding: 1rem;
  margin-top: 2rem;
  font-size: 1.4rem;
  border-radius: var(--border-box-radius);
}

/*소매-전체메뉴*/
.standard-category .retail-menubox-wrap {
  padding: 0
}

.standard-category .btn-center button {
  font-size: 1.4rem;
  line-height: 1.4rem;
  padding: 0 1rem;
  width: auto;
}

.retail-menu-wrap {
  display: flex;
  background: #fff;
  margin: 2rem;
  border-radius: 1rem;
}

.retail-menu-wrap li {
  width: 33%;
  padding: 1rem;
}

.retail-menu-wrap li img {
  width: 4rem;
}

.order-payment-method .btnlist {
  padding-top: 2rem;
}

/* 프로모션 */
.promotion-card {
  margin-top: 3rem;
  position: relative;
}

.promotion-card .seller-card-list {
  margin-top: 1rem;
}

.promotion-card button {
  position: absolute;
  width: 100%;
  height: 100%;
  text-indent: -1000px;
  overflow: hidden;
  top: 0;
  left: 0;
  border: 0;
  background: none;
}

.promotion-card .banner {
  overflow: hidden;
}

.promotion-card .banner img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 6;
  object-fit: cover;
}

/* 프로필 수정  */
.profile-set-wrap {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.profile-set-wrap .image-item {
  border-radius: 50%;
  position: relative;
}

.profile-set-wrap .remove-button {
  top: 80px;
  right: 10px;
  pointer-events: auto;
  position: absolute;
  z-index: 9;
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  /* 클릭 보장 */
}

.profile-set-wrap .image-preview-wrap {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-set-wrap .clear {
  display: flex;
  justify-content: center;
  min-width: 200px;
}

.profile-set-wrap .wholesale-item p {
  padding-top: 0.5rem
}

.profile-set-wrap .wholesale-item {
  padding-top: 2rem;
  text-align: center;
}

.profile-set-wrap h4,
.profile-set-wrap .upload-img,
.profile-set-wrap .main-image-label {
  display: none;
}

.profile-set-wrap .upload-label {
  background: url('../images/seller-logo.png') no-repeat center;
  background-size: 100%;
  border-radius: 50%;
}

.profile-set-wrap .upload-label {
  background: url('../images/upload-img.svg') no-repeat center;
}

.profile-set-wrap h5 {
  display: none;
}

.btn-profile-save {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.btn-profile-save button {
  min-width: 100px;
}

.upload-logo-tip {
  font-size: 15px;
  color: var(--secondary-color);
  margin-bottom: 20px;
}

.order-payment-method .tabs-button .tabs button {
  font-weight: 500;
  position: relative;
  display: inline-flex;
  /* align-items: flex-end; */
  /* justify-content: center; */
  cursor: pointer;
  color: var(--text-600-color);
  font-size: 1.4rem;
  overflow: hidden;
  /* border-radius: var(--border-box-radius);
  border-color: var(--text-500-color); */
  height: 40px;
  border: 0;
  /* background: url('../images/radio-off.svg') no-repeat; */
  padding-left: 30px;
  line-height: 2rem;
}

/* .order-payment-method .tabs-button .tabs button.active {
  background: url('../images/radio-on.svg') no-repeat;
} */

.order-payment-method .tabs-button .tabs button::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--primary-color);
  left: 6px;
  top: 6px;
  border-radius: 50%;
  z-index: 9;
}

.order-payment-method .tabs-button .tabs button::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 1px solid var(--primary-color);
  left: 0px;
  top: 0px;
  border-radius: 50%;
  z-index: 8;
}

/* .order-payment-method .tabs-button .tabs button span {
  width: 28px;
  height:24px;
  background: url('../images/radio-off.svg') no-repeat;
  display: inline-block;
  flex: 0.4;
}
.order-payment-method .tabs-button .tabs button.active span {
  background: url('../images/radio-on.svg') no-repeat;
} */


.order-payment-method .tabs-button .tabs button.active {
  font-weight: 500;
}

/* 버튼별 배경 이미지 */
/* .order-payment-method .tabs-button .tabs button:nth-child(1) span {
  background-image: url('../images/ico-payment-bank.svg');
}

.order-payment-method .tabs-button .tabs button:nth-child(2) span {
  background-image: url('../images/ico-payment-card.svg');
}

.order-payment-method .tabs-button .tabs button:nth-child(3) span {
  background-image: url('../images/ico-payment-cash.svg');
} */

/* 활성화된 버튼별 배경 이미지 */
/* .order-payment-method .tabs-button .tabs button.active:nth-child(1) span {
  background-image: url('../images/ico-payment-bank-on.svg');
}

.order-payment-method .tabs-button .tabs button.active:nth-child(2) span {
  background-image: url('../images/ico-payment-card-on.svg');
}

.order-payment-method .tabs-button .tabs button.active:nth-child(3) span {
  background-image: url('../images/ico-payment-cash-on.svg');
} */


/*retial-sub에 적용되는 클래스 **********/
.appbar.retail-sub {
  background: #fff;
  position: relative;
}

.appbar a,
.appbar button {
  background-size: contain !important;
}

.appbar.retail-sub .appbar-pre {
  background: url('../images/appbar-sub-pre.svg') no-repeat center;
}

.appbar.retail-sub .left-title {
  color: var(--text-600-color);
  text-align: left;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  margin-top: 0.5rem;
}

.appbar-brandhome {
  background: url('../images/appbar-brandhome.svg') no-repeat center;
}

.appbar.retail-sub .appbar-cart {
  background: url('../images/appbar-sub-cart.svg') no-repeat center;
}

.appbar.retail-sub .appbar-cart .badge-num {
  background-color: var(--text-600-color);
  color: #fff;
}

.appbar.retail-sub .appbar-menu {
  background: url('../images/appbar-sub-menu-c.svg') no-repeat;
}

.retil-app-search-wrap {
  height: 4rem;
  margin: 0 auto;
  padding: 2rem 4rem;
}

.retil-app-search-wrap .retil-app-search {
  width: calc(100% - 1rem);
}

.inquiry-conditions-name .retil-app-search {
  width: 100%;
  margin-right: 0;
}


.retil-app-search {
  display: flex;
  width: calc(100% - 9rem);
  margin-right: 2rem;
  justify-content: space-between;
  position: relative;
}

.retil-app-search input[type="search"] {
  border: none;
  outline: none;
  border-radius: 0;
  width: 100%;
  display: flex;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  border-bottom: 1px solid var(--text-600-color);
  outline: none;
  border-radius: 0;
  height: 4rem;
  appearance: none;
  font-size: 1.6rem;
}

.retil-app-search .btn-search {
  position: absolute;
  right: 0rem;
  flex-shrink: 0;
  height: 4rem;
  width: 4rem;
  background: #fff url('../images/ico-search.svg') no-repeat center;
  background-size: 60%;
  bottom: 1px
}

.retil-app-search .btn-search.active {
  background: url('../images/ico-search-on-o.svg') no-repeat center;
  background-size: 60%;
}

.retil-app-search input[type="search"]:focus {
  border-bottom: 1px solid var(--primary-color) !important;
}

/* 마이페이지 */
.main-quck-menu-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-quck-menu-wrap li {
  flex: 1;
  padding-top: 1rem;
}

.main-quck-menu-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.main-quck-menu-box span.icon {
  width: 50px;
  height: 50px;
}

.main-quck-menu-box.mypage-order span.icon {
  background: url(../images/ico-mypage-order-o.svg) no-repeat center;
}

.main-quck-menu-box.mypage-favorite-store span.icon {
  background: url(../images/ico-mypage-store-o.svg) no-repeat center;
}

.main-quck-menu-box.mypage-favorite-product span.icon {
  background: url(../images/ico-mypage-product-o.svg) no-repeat center;
}

.main-quck-menu-box.mypage-recent-product span.icon {
  background: url(../images/ico-mypage-recent-product-o.svg) no-repeat center;
}

.main-quck-menu-wrap img {
  width: 5rem;
}

.main-quck-menu-wrap span {
  font-size: 1.4rem;
  text-align: center;
}


.wholesale .main-tab .tabs-line .tab-button {
  border-bottom: 3px solid var(--text-200-color);
  color: var(--text-400-color);
}

.wholesale .text-area:focus,
.wholesale .text-area.focused {
  border-color: var(--secondary-color) !important;
  outline: none;
}

.wholesale .switch.on {
  background-color: var(--secondary-color);
}

.wholesale .size-item.selected {
  border: 1px solid var(--secondary-color);
  background: var(--secondary-color);
}

.wholesale .appbar {
  background-color: var(--secondary-color);
}

.wholesale .appbar.retail-sub {
  background: #fff;
}

.wholesale .appbar.retail-sub .appbar-wholesale-home {
  background: url(../images/footer-mystore-active.svg) no-repeat center;
}

.wholesale .appbar.common-full-popup {
  background: var(--text-50-color);
}

.wholesale .badge-num {
  color: var(--secondary-color)
}

.wholesale .btn-fill {
  background: var(--secondary-color) !important;
  border-color: var(--secondary-color);
  color: #fff;
}

.wholesale .btn-line {
  border-color: var(--secondary-color);
  color: var(--secondary-color);
}

.wholesale input[type="checkbox"]:checked {
  border-color: var(--secondary-color) !important;
}

.wholesale input[type="checkbox"]:checked {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.wholesale-checkbox input[type="checkbox"] {
  border: 1px solid #ccc;
}

.wholesale-checkbox input[type="checkbox"]:checked {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.wholesale .tabs-line .tab-button.active {
  border-bottom: 3px solid var(--secondary-color);
  color: var(--secondary-color);
}

.wholesale .input-container.focused .btn-search {
  background: url('../images/ico-search-on-wholesale.svg') no-repeat center
}

.wholesale input[type='radio']:checked {
  background-color: var(--secondary-color);
  box-shadow: 0 0 0 1px var(--secondary-color);
}

.input-container.wholesale {
  border-color: var(--secondary-color);
}

.wholesale .input-container.focused {
  border-color: var(--secondary-color) !important;
  /* 도매 배경색 */
}

.wholesale .chips-category button.active {
  background: var(--secondary-10-color);
  border-color: var(--secondary-color);
  color: var(--secondary-color);
}

.wholesale .tabs-button .tab-button.active {
  border-color: var(--secondary-color);
  color: var(--secondary-color);
}

.register-search {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.register-search .form-group {
  width: 100%;
}

.register-search-list {
  margin-bottom: 2rem;
}

.register-search-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--text-100-color);
  padding: 1rem 0;
}

.register-search-list .btn-delete {
  background: url('../images/btn-clear.svg') no-repeat center;
  background-size: contain;
  border: 0;
  overflow: hidden;
  height: 2.4rem;
  width: 2.4rem;
  text-indent: -100rem;
  margin-left: 0.5rem
}

.thumbs-swiper {
  margin-top: 8px;
  height: 100px;
}

.thumbs-swiper .swiper-slide {
  opacity: .4;
  cursor: pointer;
}

.thumbs-swiper .swiper-slide-thumb-active {
  opacity: 1;
  border: 2px solid #333;
}

.subscribe-list-card {
  position: relative;
  border-bottom: 1px solid var(--text-200-color);
  padding: 1rem 0rem;
}

.subscribe-list-card .seller-card {
  border: 0;
  padding: 0;
  margin-top: -20px;
  margin-bottom: -10px;
}

.subscribe-list-card .btn-area {
  display: flex;
  gap: 1rem;
}

.subscribe-list-card .btn-area button {
  padding: 1rem;
}

.subscribe-list-head {
  display: flex;
  justify-content: space-between;
}

.subscribe-item .btn-detail {
  background: url('../images/arrow-right.svg') no-repeat right;
  right: -0.5rem;
  /* top: 1rem; */
  border: 0;
  overflow: hidden;
  height: 4rem;
  width: 4rem;
  text-indent: -100rem;
  position: absolute;
}

.subscribe-item .join-staus span {
  border-radius: 0.2rem;
  border: 1px solid var(--text-100-color);
  background: var(--text-100-color);
  color: var(--text-600-color);
  display: inline-block;
  padding: 0.3rem
}

.subscribe-item {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
  align-items: center;
  margin-top: 1rem;
}

.subscribe-list h5 {
  padding: 0rem 0rem 1rem 1rem;
  display: block;
  font-size: 1.4rem;
  color: var(--text-400-color)
}

.subscribe-item ul {
  flex: 2;
  cursor: pointer;
}

.subscribe-item li {
  font-size: 1.6rem;
  padding: 0.3rem 0.3rem 0.3rem 0rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 120px);
  margin-left: 1rem;
}

.subscribe-item li .whatsapp {
  background: url('../images/icon-whatsapp.svg') no-repeat center;
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  background-size: contain;
  overflow: hidden;
  text-indent: -100px;
  padding-right: 1rem;
}

.subscribe-item li h4 {
  position: relative;
  padding-left: 1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  font-size: 1.8rem;
}

.subscribe-item li h4::before {
  content: "";
  position: absolute;
  top: 1rem;
  left: 0rem;
  background-color: var(--text-600-color);
  border-radius: 50%;
  width: 0.5rem;
  height: 0.5rem;
}

.subscribe-item li a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.subscribe-item .join-date {
  color: var(--text-500-color);
  font-size: 1.5rem;
}

.subscribe-item .btn-copy {
  background: #f4f4f4 url('../images/btn-copy.svg') no-repeat center;
  background-size: contain;
  border: 0;
  overflow: hidden;
  height: 4.6rem;
  width: 4.6rem;
  text-indent: -100rem;
  position: absolute;
  top: 80px;
  right: 2rem;
  z-index: 9;
  border-radius: 50%;
  background-size: 26px;
}

.subscribe-item .seller-name {
  display: flex;
  justify-items: center;
  align-items: center;
  margin-left: 1.6rem;
}

.follow-brand-modal .seller-card-logo {
  flex: 0 0 auto;
  position: relative;
  width: 5rem;
  height: 5rem;
  border-radius: 5rem;
  background: #fff;
  border: 1px solid var(--text-200-color);
  background: #fff;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.follow-brand-modal .seller-card-logo img {
  height: auto;
}

.follow-brand-modal h4 {
  padding-bottom: 2rem;
}

.brand-list {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;

  &:after {
    content: "";
    display: block;
    clear: both;
  }
}

/* 각 브랜드 카드 */
.brand-list li {
  float: left;
  width: 90px;
  margin: 0 10px 10px 0;
  background: #fff;
  border-radius: 8px;
  text-align: center;
}

.seller-card-name {
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 80px;
}

.brand-logo {
  width: 100%;
  height: 80px;
  object-fit: contain;
  display: block;
}

.follow-brand-thum {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.clickable-row {
  cursor: pointer;
}

.clickable-row:hover {
  background: #f7f7f7;
}

.national-tax-modal {
  width: 100%;
}

.national-tax-modal h4 {
  padding-bottom: 1.6rem;
}

.national-tax-modal table {
  table-layout: auto;
}

.national-tax-modal th,
.national-tax-modal td {
  padding: 0.8rem
}

.national-tax-modal th {
  min-width: 80px;
}

.subscribe-item .discountrate-edit {
  border: 1px solid var(--text-200-color);
  padding: 16px;
  border-radius: 6px;
  width: calc(100% - 40px);
  margin: 10px 0;
}

.subscribe-item .discountrate-edit p {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 16px;
}

.subscribe-item .discountrate-box {
  display: flex;
}

.discountrate-curreunt,
.discountrate-edited {
  display: flex;
  align-items: center;
  gap: 6px;
}

.discountrate-curreunt span,
.discountrate-edited input {
  border: 1px solid var(--text-300-color);
  width: 90px;
  height: 30px;
  line-height: 30px;
  display: inline-block;
  border-radius: 6px;
  text-align: center;
}

.discountrate-edit .btn-small {
  height: 34px;
  margin-left: 6px;
  font-size: 15px;
  min-width: 100px;
}

.discountrate-edited input {
  border: 1px solid var(--secondary-color);
  background: var(--secondary-10-color);
}

.discountrate-edited input:focus {
  border-color: var(--secondary-color) !important;
  background: var(--secondary-10-color) !important;
  color: var(--secondary-color) !important;
  outline: none;
}

.discountrate-edit .btn-list {
  margin-left: 10px;
}

.payment-table {
  width: 100%;
  border-collapse: collapse;
  th,
  td {
    white-space: normal;
    word-break: break-all;
    overflow-wrap: anywhere;
    padding: 0.3rem;
    text-align: center;
  }
}

.fix-btn-wrap {
  position: fixed;
  width: 100%;
  right: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  display: flex;
}

.fix-btn {
  display: flex;
  gap: 1rem;
  width: 100%;
  padding: 2rem 0;
  background: #fff;
  border-top: 1px solid var(--text-200-color);
}

.fix-btn form {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fix-btn form button {
  flex: 0.5;
}

.fix-btn button {
  padding: 1rem;
  font-size: 1.6rem;
  font-weight: 500;
  border: 1px solid var(--text-600-color);
  height: 4.6rem;
}

.fix-btn .btn-action {
  background: var(--text-600-color);
  color: #fff;
}


/* modal */
.modal-container {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  top: 0;
  z-index: 30;
}

.modal {
  background: #fff;
  padding: 2.4rem;
  border-radius: 1rem;
  box-shadow: 0 0.6rem 0.6rem rgba(0, 0, 0, 0.1);
  z-index: 2;
  max-width: 34rem;
  width: calc(100% - 10rem);
  position: relative;
}

.btn-close-modal {
  background: url('../images/btn-close-modal.svg') no-repeat center;
  background-size: contain;
  border: 0;
  overflow: hidden;
  height: 2.4rem;
  width: 2.4rem;
  text-indent: -100rem;
  position: absolute;
  right: 2rem;
  z-index: 100;
}

.modal-overlay {
  position: fixed;
  top: 0rem;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/********/
.login-overlay {
  position: fixed;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: rgba(0, 0, 0, 0.5); */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  background: none;
  border-radius: 0;
}

.login-overlay .modal {
  max-width: 100%;
  overflow-x: hidden;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  border-radius: 0;
}

.login-wide {
  position: relative;
  width: 1200px;
}

.login-wide-appbar {
  width: 100%;
  position: relative;
  height: 50px;
  display: flex;
  justify-content: center;
}

.login-wide-contents {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.login-wide-appbar .btn-close-modal {
  left: 10px;
  top: 10px;
  background: url(../images/appbar-sub-pre.svg) no-repeat center;
  position: absolute;
}

.login-wide-appbar .appbar-logo-center-detail {
  text-align: center;
  background: url(../images/appbar-logo-g.svg) no-repeat center;
  width: 8rem;
  background-size: 100%;
  text-indent: -1000px;
  overflow: hidden;
}

.top-bar {
  z-index: 1000;
  height: 50px;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
  padding: 0 10px;
  width: 100%;
}

.top-bar button {
  width: auto;
  margin-left: 10px;
  height: auto;
  min-height: auto;
  padding: 0.5rem
}

.top-bar .vender {
  width: 100%;
  font-size: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px
}

.retail-main-tab-fix {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.retail-main-tab-fix .main-tab {
  width: 100%;
}

.retail-main-tab-fix .tabs-group {
  padding: 0;
}

.retail-main-tab-fix .main-tab .tabs {
  margin-bottom: 0;
  gap: 0;
}

.modal-content {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  max-width: 400px;
  width: calc(100% - 8rem);
  position: relative;
  text-align: left;
  max-height: calc(100vh - 8rem);
  min-height: 46vh;
  position: relative;
  outline: none;
}

.modal-content h3 {
  font-size: 2.0rem;
  display: block;
  padding: 1rem 0
}

.modal-image {
  max-width: 90vw;
  max-height: 80vh;
}

.modal-image {
  max-width: 90vw;
  max-height: 80vh;
}

.modal-close {
  background: url('../images/btn-close-modal.svg') no-repeat center;
  background-size: contain;
  border: 0;
  overflow: hidden;
  height: 2.4rem;
  width: 2.4rem;
  text-indent: -100rem;
  position: absolute;
  right: 2rem;
  z-index: 100;
}

.modal-close-button {
  margin-top: 10px;
  padding: 5px 10px;
  background-color: var(--text-500-color);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.modal-close-button:hover {
  background-color: var(--text-600-color);
}

.color-select {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  display: inline-block;
  border: 1px solid var(--text-200-color)
}

.company-information h4 {
  padding: 1rem 0;
  border-bottom: 1px solid var(--text-500-color);
  margin-bottom: 0.5rem;
}

.company-information li {
  padding-top: 0.5rem;
  font-size: 1.4rem;
}

/* 이벤트, 쿠폰등등록*/
.coupon-wrap {
  padding-top: 2rem;
}

.coupon-wrap .section {
  padding: 3rem 3rem 4rem 3rem;
}

.coupon-list-wrap .tabs-group {
  padding-bottom: 0rem;
}

.coupon-list-wrap .tabs-group .tabs {
  gap: 0;
}

.coupon-list-wrap .section.btn-center {
  padding: 2rem 0rem 2rem 0rem;
}

.coupon-wrap label.form-title {
  font-weight: 600;
  font-size: 1.5rem;
  margin-top: 2rem
}

.coupon-list li {
  padding: 1rem 0;
  font-size: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border-bottom: 1px solid var(--text-200-color);
}

.coupon-list li h4 {
  padding-bottom: 0.5rem
}

.coupon-list button {
  width: 100%;
  margin-top: 1rem
}

.coupon-list span {
  position: relative;
  padding-left: 0.8rem;
}

.coupon-list span::before {
  content: "";
  position: absolute;
  top: 1rem;
  left: 0.1rem;
  background-color: var(--text-600-color);
  border-radius: 50%;
  min-width: 0.3rem;
  height: 0.3rem;
}

.coupon-list {
  margin-top: -2rem;
}

.coupon-item {
  font-size: 1.6rem;
  padding: 1rem 1rem 1rem 2.2rem;
  background: url('../images/ico-chk.svg') no-repeat left;
  background-size: 3%;
}

.coupon-item.selected {
  background: var(--primary-50-color) url('../images/ico-chk-on.svg') no-repeat left;
  background-size: 3%;
  color: var(--primary-color);
}

.discount-option {
  display: flex;
  flex-direction: column;
  position: relative;
}

.discount-option .radio-group {
  display: flex;
  flex-direction: column;
  padding: 1rem 0;

}

.discount-option .radio-group .radio-item {
  padding: 0.4rem 0;
  justify-content: flex-start;
  align-items: center;
}

.discount-option .switch-container {
  margin-top: 1rem;
}

.discount-option-select {
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 1.6rem;
  justify-items: center;
  align-items: center;
  align-items: flex-end;
}

.discount-option-select .error-message {
  position: absolute;
  bottom: -2.2rem;
  left: 0
}

.discount-option .form-group input {
  padding-left: 0.5rem;
  text-align: center;
  border: 0;
  height: 3.6rem;
  border-radius: 0;
}

.discount-option .input-container {
  width: 100%;
  border-bottom: 1px solid vaR(--text-300-color);
}

.discount-option-select input {
  border: 0;
}

.discount-option-select .discount-option-wrap {
  flex: 0.8;
  border-bottom: 1px solid var(--text-300-color);
}

.discount-option-select .discount-option-wrap .form-group {
  margin: 0;
}

.discount-option-select .discount-amount,
.discount-option-select .discount-rate {
  display: flex;
}

.discount-option-select .or {
  flex: 0 0 auto;
  /* 고정폭으로 처리하거나 원하는 폭 지정 */
  padding: 1rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
}

.coupon-custom-limit .form-group {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.coupon-custom-limit label.form-title {
  font-weight: 400;
  flex: 0 0 auto;
  margin-top: 1rem;

}

.coupon-custom-limit .error-message {
  display: none;
}

.discount-option .form-group .unit {
  padding: 0.8rem 0 0 0;
  font-size: 1.4rem;
  font-weight: 400;
}


.event-fl {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.event-fl label {
  flex: 1;
  display: block;
  max-width: 100px;
}

.product-list-select {
  max-height: 500px;
  overflow-y: scroll;
  margin-top: 3rem;
  height: 490px;
}

.product-list-select .product-details-card .thum .thum-mask {
  width: 6rem;
}

.product-list-select .product-details-card .name,
.discount-option-list span.name {
  font-size: 1.5rem;
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  font-size: 1.4rem;
}

/* 공통얼랏 */
.alert-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  /* align-items: flex-end; */
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.alert-overlay .alert-box {
  background: #F6F6F6;
  padding: 2rem;
  border-radius: var(--border-box-radius);
  max-width: 60rem;
  font-size: 1.6rem;
  margin: 1rem;
  /* width: calc(100% - 2rem); */
  width: 100%;
}

.alert-overlay .alert-box button {
  border: 1px solid var(--text-200-color)
}

.alert-overlay .alert-box .alert-icon {
  height: 4rem;
}

.alert-icon-error {
  background: url('../images/alert-error-icon.svg') no-repeat center;
}

.alert-icon-success {
  background: url('../images/alert-success-icon.svg') no-repeat center;
}

.alert-icon-info {
  background: url('../images/alert-info-icon.svg') no-repeat center;
}

.alert-icon-confirm {
  background: url('../images/alert-confirm-icon.svg') no-repeat center;
}


.alert-overlay .alert-box h2 {
  font-size: 1.6rem;
  padding-bottom: 1rem;
  text-align: center;
}

.alert-message {
  padding-bottom: 1rem;
  text-align: center;
  color: var(--text-600-color);
}

.alert-overlay .no-message {
  font-size: 1.6rem;
  margin: 1rem 0;
}

.alert-overlay .alert-btn {
  display: flex;
  gap: 0.6rem;
  padding-top: 1rem;
  justify-content: center;
  align-items: center;
}

.alert-overlay .alert-btn button {
  width: 100%;
  flex: 0.5;
}

button.appbar-language {
  text-indent: 0%;
  background: none;
  color: #fff;
  width: 32px;
  border-radius: 50%;
  margin-top: 1rem;
  margin-right: 0.8rem;
  background-color: rgba(18, 52, 86, 0.2);
}

.language-change h2 {
  padding: 1rem;
  font-size: 1.6rem;
}

.language-change button {
  text-align: left;
  font-size: 1.6rem;
  padding-left: 2rem
}

.language-change ul {
  padding-bottom: 2rem;
}

.appbar-language {
  font-size: 1.5rem;
  padding: 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
}

.language-change button {
  width: 100%;
  text-indent: 0%;
  overflow: auto;
}

.language-change button.bottom-sheet-close {
  top: 0.5rem;
  right: 0;
  background: #fff url('../images/btn-close-modal.svg') no-repeat center;
  background-size: contain;
  border: 0;
  overflow: hidden;
  height: 2.4rem;
  width: 2.4rem;
  text-indent: -100rem;
  position: absolute;
  right: 1rem;
  cursor: pointer;
  padding: 10px 20px;
  margin-top: 10px;
}

.language-li {
  padding: 1rem;
}

.language-li img {
  border: 1px solid var(--text-300-color);
  height: auto !important;
}

.share-sheet {
  padding: 0px;
}

.sheet-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
}

.share-options {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding-top: 2rem;
}

.share-options button {
  display: block;
  width: 70px;
  height: 70px;
  padding: 12px;
  margin-bottom: 10px;
  border: none;
  border-radius: 8px;
  background-color: #f5f5f5;
  cursor: pointer;
  border-radius: 50%;
  font-weight: 500;
  font-size: 1.4rem;
}

.share-options .whatsapp {
  background: url('../images/btn_share_whatsapp.svg') no-repeat center;
  text-indent: -1000px;
  overflow: hidden;
  background-size: 100%;
}

.share-options .instagram {
  background: url('../images/btn_share_instagram.svg') no-repeat center;
  text-indent: -1000px;
  overflow: hidden;
  background-size: 100%;
}

.share-options .facebook-share {
  background: url('../images/btn_share_facebook.svg') no-repeat center;
  text-indent: -1000px;
  overflow: hidden;
  background-size: 100%;
}

.share-options .x-share {
  background: url('../images/btn_share_x.svg') no-repeat center;
  text-indent: -1000px;
  overflow: hidden;
  background-size: 100%;
}

.selected-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  /* 원하는 간격 */
}

.filter-group {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-item {
  padding: 0.5rem;
  background-color: #f0f0f0;
  border-radius: 4px;
}

.filter-section h4 {
  font-size: 1.4rem;
  font-weight: 500;
}


.size-modal {
  max-width: 600px;
}

.size-modal .category {
  font-size: 1.6rem;
}

.size-modal-buttons {
  display: flex;
  gap: 5px;
  margin-bottom: 2rem;
}

.size-modal-buttons button {
  padding: 1rem;
  font-size: 1.5rem;
}

.chips-category button.selected {
  background-color: var(--secondary-10-color);
  color: var(--secondary-color);
  border: 1px solid var(--secondary-color);
}

.category-select-view {
  padding: 0rem 1rem 1rem 1rem;
}

.btn-no-category-select {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.btn-no-category-select .active {
  border-color: var(--secondary-color);
  color: var(--secondary-color);
  background-color: var(--secondary-10-color);
}

.btn-no-category-select img {
  width: 3.2rem;
}

.btn-fixed-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% - 4rem);
  padding: 2rem;
  background: #fff;
  border-radius: 8px;
}

.btn-recommended-category button {
  height: auto;
  padding: 0.6rem
}

.size-option-value.none {
  opacity: 0.3;
}

/* 탭 네비게이션 스타일 */
.tabs {
  display: flex;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}


.tab-label {
  cursor: pointer;
  padding: 25px 5px 10px 5px;
  margin-right: 5px;
  color: #555;
  font-size: 1.4rem;
  text-align: center;
  flex: 1;
}

.tab-label.active {
  border-bottom: 2px solid var(--secondary-color);
  color: var(--secondary-color);
}

.chips-category-scroll {
  overflow-y: auto;
  height: 50vh;
}

/* 탭 콘텐츠 영역 스타일 */
.tab-content {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0rem 0 6rem 0;
}


/* 사이즈 버튼(칩) 기본 스타일 */
.tab-content button {
  padding: 2px 12px;
  border: 1px solid #ccc;
  background: #f9f9f9;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
  height: 30px;
}

/* 선택된 사이즈 버튼 스타일 */
.tab-content button.selected {
  background: var(--secondary-10-color);
  border-color: var(--secondary-color);
}

.btn-add-size {
  padding-top: 2rem
}

/* 소매스토어매인 */
.store-logo-area {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.2rem;
}

.store-logo-area .seller-logo {
  width: auto;
  height: 28px;
}

.store-logo-area .seller-name {
  margin-left: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.store-logo-area .seller-name h2 {
  font-size: 2rem;
  font-weight: 600;
  float: left;
  display: flex;
}

.store-logo-area .seller-logo img {
  width: auto;
  height: 100%;
}

.store-main-area {
  display: flex;
  align-items: center;
  padding: 1rem 2rem 2rem 2rem;
}

.store-main-share {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 1000;
  border-radius: 50%;
}

.store-main-share button {
  padding: 0.5rem;
}

.store-main-share .btn-whatsqpp {
  width: 60px;
  height: 60px;
  background: url('../images/btn_share_whatsapp.svg') no-repeat center;
  background-size: 60px;
  border: 0;
  text-indent: -1000px;
  overflow: hidden;
  transition: transform 0.3s ease, background-color 0.3s ease;
  animation: float 3s ease-in-out infinite, pulse-2 2s infinite;
}

.btn-whatsqpp:hover {
  background-color: hsl(0, 0%, 0%);
}


/* 살짝 위아래 움직임 */
@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.store-main-search-wrap {
  padding-top: 20px;
  display: flex;
  padding-right: 20px;
}

.store-main-search-wrap .main-product h4 {
  padding-bottom: 10px;
}

.store-main-search-wrap .retil-app-search {
  width: calc(100% - 4rem);
}

.detail-category-chips {
  padding: 1rem 0rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.preparing-service {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 4rem;
  color: var(--secondary-color);
  font-size: 1.6rem;
}

.detail-category-chips .category-chip {
  border: 1px solid var(--text-100-color);
  padding: 0.3rem 0.5rem;
  font-size: 1.4rem;
  border-radius: 6px;
  color: var(--text-500-color);
  display: inline-block;
}

/* 반투명 배경 */
.print-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: first baseline;
  justify-content: center;
  z-index: 9999;
}

/* 모달 박스 */
.print-popup {
  /* max-height: 90vh; */
  overflow: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  position: relative;
  /* height: 80vh; */
  width: 100%;
  height: calc(100vh - 100px);
  padding-top: 50px;
  padding-bottom: 50px;
  max-width: 800px;
}

.print-popup-wrap {
  padding: 20px;
  height: calc(100vh + 200px);
}

/* 닫기 버튼 */
.close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

.print-popup .close-btn {
  width: 50px;
}

.print-popup-wrap .print-title {
  text-align: center;
  font-weight: 500;
  font-size: 16px;
  padding-bottom: 10px;
}

.print-popup-wrap .cart-order-box {
  border-top: 1px solid var(--text-400-color);
  position: relative;
  height: 90px
}

.print-popup-wrap .option-price {
  position: absolute;
  top: 0;
  right: 0
}

/* .print-popup-wrap .price-info {
 position: absolute;
 top:35px;
 right:80px;
} */

.print-popup-wrap .price-info .price {
  font-weight: 400;
  font-size: 12px;
}

/* .print-popup-wrap .price-info em {
  display: none;
} */

/* .print-popup-wrap .cart-card .product-details-card .product-info .name {
 width: calc(100% - 30%);
} */


.print-popup-wrap .order-payment-bill h3 {
  display: none;
}

.print-popup-wrap .cart-select-option .option-price {
  font-size: 12px;
}

.orderlist-header {
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  border-top: 2px solid #000;
  border-bottom: 1px solid #000;
  padding: 10px;
}


.print-popup-wrap .order-payment-product {
  border: 0 !important
}

.print-popup-wrap .order-payment-product {
  margin-top: 0;
}

.print-popup-wrap .order-status-detail-head {
  font-size: 12px;
}

.btn-to-print {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.btn-to-print .btn-small {
  font-size: 15px;
  height: 36px;
}

.print-popup-wrap .order-payment-bill {
  padding: 0
}

.print-popop-aglign {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.print-popup-head {
  background: #fff;
  max-width: 800px;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 100;
}

.print-popup-head .btn-print {
  padding: 10px
}

.print-head {
  border-bottom: 0.5px solid #000;
  font-size: 10px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
}

.print-head .print-wholesale {
  flex: 1;
}

.print-head .print-oder-date {
  flex: 1;
  text-align: right;
}

.print-head h3 {
  font-size: 14px;
}

.print-orderer-info {
  display: flex;
}

.print-orderer-info .fl {
  flex: 1;
}

.print-orderer-info .fr {
  flex: 1;
  text-align: right;
}

.print-orderer {
  font-size: 12px;
  padding-top: 10px;
  padding-bottom: 20px
}

.print-orderer .order-status-detai-list {
  padding-top: 5px;
  font-size: 11px;
}

.print-orderer .title {
  font-weight: 600;
}

/* .print-order-product {
  display: flex;
  justify-content: center;
  align-items: center;
} */



.product-name-code {
  padding: 3px
}

.product-name-code .product-code {
  font-size: 11px;
}

.print-order-list-scroll {
  overflow-x: auto;
}

.print-order-list {
  overflow-x: auto;
  margin: 20px 0;
}

.print-order-product {
  width: 80px;
  flex: 0 0 80px;
}

.print-order-list-items li {
  display: flex;
  justify-content: space-between;
}

.print-order-list-h2 {
  font-size: 11px;
  border-bottom: 1px solid #000;
  padding: 10px 0;
}

.print-order-list th {
  font-size: 11px;
  background: #fff;
  font-weight: 500;
  text-align: center;
  padding: 6px 3px;
  border: 0;
  border: 1px solid var(--text-200-color)
}

.print-order-list td {
  padding: 3px;
  text-align: center;
  font-size: 12px;
  border: 1px solid var(--text-200-color)
}

.print-order-list td.price {
  text-align: right;
}

.print-order-list .product-img {
  padding: 6px 0;
}

.print-order-list h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 이하 선택 사항 */
  line-height: 1.2em;
  max-height: calc(1.4em * 2);
  font-size: 1.1rem;
  font-weight: 400;
}

.print-order-result {
  display: flex;
  justify-content: end;
  padding: 20px 0;
}

.print-order-result table {
  width: auto;
}

.print-order-result th,
.print-order-result td {
  border: 0;
  background: none;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 500;
}

.print-order-result th {
  text-align: left;
}

.product-option {
  display: flex;
  align-items: flex-start;
  justify-content: end;
  padding: 6px 0px 6px 6px;
}

.print-subtotal {
  font-size: 12px;
  padding: 5px;
  text-align: right;
  font-weight: 600;
  background: var(--text-30-color);
}

.hide {
  display: none;
}

.show {
  display: block;
}

@media print {
  .no-print {
    display: none !important;
  }

  body,
  .print-popup,
  .print-popup-wrap {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow: visible !important;
  }

  /* 이미지만 페이지 중간에서 안 잘리게 */
  img {
    max-width: 300px !important;
    height: auto !important;
    page-break-inside: avoid;
  }

  /* 나머지는 자연스럽게 흐르도록 */
  table,
  .print-order-list,
  .print-order-result {
    width: 100%;
  }

  .color-select {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    width: 20px;
    height: 20px;
    display: inline-block;
  }
}


.btn-approval {
  position: absolute;
  z-index: 9;
  right: 1rem;
  top: 1rem;
  width: auto;
  padding: 0.6rem 0.6rem;
  background-color: #fff;
  border: 1px solid var(--secondary-color);
  color: var(--secondary-color);
  font-size: 1.4rem;
}

.btn-approval.active {
  background-color: var(--secondary-color);
  border: 0;
  color: #fff;
}

.payment-pagabank {
  display: flex;
}

.payment-pagabank .btn-pagabank,
.payment-pagabank .btn-technopay,
.payment-pagabank .btn-whatsapp {
  background: var(--text-30-color) url('../images/logo-pagbank.svg') no-repeat center center;
  height: 60px;
  text-indent: -1000px;
  overflow: hidden;
  background-size: 100px;
  flex: 0.5;
  width: auto;
  background-color: #fff;
  border-radius: var(--border-box-radius);
  border: 1px solid var(--text-400-color);
  width: 100px;
}

.tab-content button.btn-pay-pagarbank {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  height: 40px;
  border-radius: 6px;
  border: 1px solid var(--text-500-color);
}

.tab-content button.btn-pay-pagarbank em {
  font-weight: 600;
  font-size: 15px;
  padding-left: 5px;
}

.icon-pagar {
  background: url('../images/icon-pagar.png') no-repeat center center;
  background-size: 100%;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.payment-pagabank .btn-technopay {
  background: #18a3e0 url('../images/tecnospeed-white.svg') no-repeat center center;
  background-size: 100px;
}

.payment-pagabank .btn-whatsapp {
  background: #fff url('../images/whatsapp.svg') no-repeat center center;
  background-size: 100px;
}

.tab-color-select {
  display: flex;
}

.tab-color-select button {
  border-radius: 0;
  padding: 1rem;
  background: var(--text-50-color);
}

.tab-color-select button:first-child {
  border-right: 0;
}

.tab-color-select .active {
  border-bottom: 0;
  color: var(--secondary-color);
  font-weight: 600;
  background: #fff;
}

.image-picker-content {
  margin-top: 1rem
}

.thumb-list,
.colorcode-select,
.select-color {
  display: flex;
  position: relative;
  align-items: center;
}

/* .thumb-list h5 {
  flex: 40px 0 0;
} */

.thumb-list-view {
  /* border:1px solid var(--text-300-color); */
  height: 50px;
  width: 50px;
  background: url(../images/upload-img.svg) no-repeat center;
  background-size: 60%;
  /* overflow: hidden; */
}

.thumb-item {
  display: flex;
  align-items: center;
  gap: 15px;
  position: relative;
  /* border:1px solid var(--text-200-color); */
}

.thumb-item-img {
  height: 50px;
  width: 50px;
  overflow: hidden;
  /* border:1px solid var(--text-200-color); */
  flex: 50px 0 0;
}

.thumb-item-img {
  border-radius: 4px;
}

.thumb-item .remove-button {
  position: relative;
  height: 24px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  pointer-events: auto;
  flex: 0 0 80px;
}

.btn-image-picker-upload {
  position: absolute;
  left: 140px;
  top: 0px;
  width: 50px;
  height: 50px;
  background: none;
}

.thumb-item-inp {
  flex: 1 1 auto;
  padding: 0 1rem;
}

.thumb-item-inp input {
  padding: 0.5rem
}

.thumb-item-inp .btn-small {
  flex: 0 0 52px;
}

.color-tip-list {
  display: flex;
  gap: 6px;
  margin: 16px 0;
  flex-wrap: wrap;
}

.color-tip {
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 0.4rem;
}

.store-category {
  display: flex;
  align-items: center;
  justify-content: center;
}

.store-category .retail-menubox-wrap {
  margin: 16px 0 0px 0;
  flex-wrap: nowrap;
  display: flex;
}

.store-category .retail-menubox-wrap li {
  width: 100px;
  height: 90px;
  margin-bottom: 6px;
}

.store-category .retail-menubox-wrap li.btn-no-category-select {
  justify-content: flex-start;
}

.store-category .retail-menubox-wrap .icon {
  width: 5rem;
  height: 5rem;
  font-size: 12px;
}

.store-category .retail-menubox-wrap .icon img {
  width: 2.8rem;
}

.store-category .retail-menubox-wrap button {
  padding: 0;
  width: 70px;
  border-radius: 0;
}

.store-category .retail-menubox-wrap button .btn-center div {
  font-size: 11px;
  width: 75px;
  padding-top: 6px;
  line-height: 11px;
}


.store-main-snb .store-category .retail-menubox-wrap li.active button .btn-center div {
  font-weight: 500;
}

.store-category .retail-menubox-wrap li.active .icon {
  background: var(--text-300-color);
  border: 0;
}

.login-wrap-box {
  width: 100%;
  max-width: 400px;
}

.login-overlay .login.wholesale,
.login-overlay .login.retail {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding-top: 80px;
}

.section {
  padding: 2rem 4rem;
  position: relative;
}

.product-discount {
  color: #ff3b30;
  font-weight: bold;
  font-size: 1.4rem;
  margin-top: 4px;
}

/***** 도매 좌측메뉴  *****/

.responsive-wrap {
  display: flex;
}

.responsive-wrap .responsive-snb {
  padding: 46px 0 0 0;
  width: 120px;
  border-right: 1px solid var(--text-200-color);
  height: 100vh;
  position: fixed;
}

.responsive-wrap .content-wrap {
  flex: 1 1 100px;
  border-left: 1px solid var(--text-200-color);
  margin-left: 120px;
}

.responsive-wrap .wholesale-menu-wrap {
  flex-direction: column;
}

.responsive-wrap .wholesale-menu-wrap li {
  border: 0;
}

.responsive-wrap .wholesale-menu-box .title {
  font-size: 1.3rem;
  color: var(--text-500-color);
  width: 65px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

.snb-slider-wrap {
  margin-top: 60px;
}

.snb-slider-wrap .swiper-wrapper {
  aspect-ratio: unset;
  flex-direction: column;
}

.snb-slider-wrap .swiper-slide {
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid var(--text-50-color);
}

.snb-slider-wrap .swiper-slide .btn-admin {
  border: 0;
  height: auto;
}

.responsive-snb .my-name {
  border: 0;
  display: flex;
  flex-direction: column;
  width: 60px;
  position: absolute;
  left: 20px;
  top: 63px;
}

.responsive-snb .my-name .seller-logo {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.responsive-snb .my-name .seller-logo::after {
  content: "";
  /* 필수 */
  background: url(../images/arrow-right-500.svg) no-repeat center center;
  background-size: contain;
  /* 또는 10px */
  width: 20px;
  height: 20px;
  display: block;
  position: absolute;
  right: 5px;
}

.responsive-snb .my-name .main-title-welcome {
  font-size: 1.2rem;
  font-weight: 400;
  text-align: left;
  margin-top: 5px
    /* background: url(../images/arrow-right-500.svg) no-repeat right bottom; */
}

.responsive-wrap .btn-next,
.responsive-wrap .btn-prev {
  display: none;
}

.seller-basic .seller-info {
  position: absolute;
  z-index: 100;
  background: #fff;
  width: calc(100% - 80px);
  left: 20px;
  border: 1px solid var(--text-300-color);
  top: 80px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: var(--box-shadow);
}

.store-info-wrap .seller-basic .seller-info {
  position: relative;
  width: 100%;
  left: 0;
  top: 0px;
  border: 0;
  z-index: 0;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}


.seller-basic .btn-toggle.closed {
  background: #fff url(../images/ico-down.svg) no-repeat center;
  width: 20px;
  height: 30px;
  background-size: 50%;
}

.seller-basic .btn-toggle.open {
  background: #fff url(../images/ico-up.svg) no-repeat center;
  width: 20px;
  height: 30px;
  background-size: 50%;
}

.store-main-content {
  margin-left: 200px;
}

.store-main-responsive {
  position: relative;
}

.store-main-responsive::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.1) 0%,
      rgba(0, 0, 0, 0) 100%);
}

.store-main-content h4 {
  padding-left: 0px;
}

.store-main-snb {
  width: 170px;
  position: absolute;
  left: 40px;
  padding-top: 10px;
}

.store-main-snb .store-category .retail-menubox-wrap {
  flex-wrap: wrap;
}

.store-main-snb .retail-menubox-wrap button {
  flex-direction: row;
  width: auto;
}

.store-main-snb .store-category .retail-menubox-wrap li {
  height: 50px;
}

.store-main-snb .store-category .retail-menubox-wrap .icon {
  width: 3.8rem;
  height: 3.8rem;
}

.store-main-snb .store-category .retail-menubox-wrap button .btn-center div {
  font-size: 14px;
  line-height: 14px;
  text-align: left;
  padding-left: 10px;
  width: 100px;
  padding-top: 0;
  letter-spacing: -0.5px;
  line-height: 15px;
}

.store-main-snb .store-category .retail-menubox-wrap .icon img {
  width: 2.4rem;
}

.store-info-wrap {
  border: 1px solid var(--text-200-color);
  margin-left: -20px;
  padding: 10px;
  border-radius: 10px;
  width: 140px;
  margin-top: 10px;
}

.store-info-wrap .seller-basic {
  flex-direction: column;
}

.store-info-wrap button {
  width: 60px;
  height: 24px;
  border: 0;
  text-indent: -1000px;
  overflow: hidden
}

.store-info-wrap h4 {
  font-size: 1.4rem;
}

button.btn-toggle {
  border: 0;
  text-indent: -1000px;
  overflow: hidden;
}

.store-product-list-wrap .store-product-list {
  padding-right: 20px;
}

.only-mobile {
  display: none;
}

.only-pc {
  display: block;
}

.sticky {
  position: sticky;
  top: 50px;
  z-index: 9;
  background-color: #fff;

}

/*error-page*/

.error-page {
  display: flex;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}

.error-page .error-page-box {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  padding: 90px 40px 0px 40px;
}

.error-page .error-page-box p {
  font-size: 15px;
  text-align: center;
}

.terms-wrap h1 {
  padding-bottom: 10px;
}

.terms-wrap li,
.terms-wrap p {
  font-size: 15px;
}

.terms-head {
  padding-bottom: 20px;
}

.terms-head p {
  padding-top: 10px;
  font-size: 1.4rem;
}

.terms-wrap-scroll {
  overflow-y: scroll;
  max-height: calc(90vh - 10rem);
  min-height: 46vh;

}

.terms-wrap-scroll p {
  padding-top: 10px;
  font-size: 1.4rem;
}

.terms-wrap h2 {
  font-size: 18px;
}

.terms-wrap section {
  padding: 20px 0;
  border-bottom: 1px solid var(--text-300-color)
}

.terms-wrap section p {
  line-height: 150%;
  font-size: 14px;
  color: var(--text-500-color);
  padding: 10px 0;
}

.terms-wrap footer p {
  font-size: 1.4rem;
  padding-top: 20px;
}

.terms-check {
  border: 0;
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
}

.terms-check label {
  font-size: 1.5rem;
  font-weight: 500;
}

/* admin 어드민 */

.log-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.log-modal-box {
  background: #fff;
  width: 60%;
  padding: 20px;
  z-index: 100;
  position: relative;
  max-height: 600px;
  overflow-y: auto;
}

.log-modal-box .modal-close {
  top: 20px;
}

.log-modal-box .lob-detail-error {
  font-size: 16px;
  line-height: 120%;
  padding: 10px;
}

.log-modal-box .blob-detail {
  padding: 10px;
  font-size: 16px;
  line-height: 120%;
}

.admin-contents-serch-row {
  display: flex;
  padding: 10px 0;
}

.admin-log-result {
  margin-top: 20px;
}

.admin-contents-serch-col {
  width: 33.333%;
  display: flex;
  align-items: center;
  padding-right: 30px;
}

.admin-contents-serch-col input,
.admin-contents-serch-col select,
.admin-contents-serch-col button {
  height: 30px;
}

.admin-contents-serch-col span {
  padding-right: 10px;
  float: left;
  white-space: nowrap;

}

.container.admin {
  max-width: 100%;
  width: 100%;
  background: var(--admin-secondary-color);
  min-height: 100vh;
}

.admin-navigation-bar {
  width: 100%;
  background: #fff;
  position: fixed;
  height: 50px;
  z-index: 100;
}

.admin-logo {
  width: 200px;
  background: var(--admin-primary-color) url(../images/appbar-logo.svg) no-repeat center;
  background-size: 70px;
  height: 60px;
  position: absolute;
  top: 0;
  left: 0;
}

.admin-top {
  position: absolute;
  right: 20px;
  top: 10px;
  display: none;
}

.admin-top button {
  padding: 5px 10px;
}

.admin-appbar {
  width: 100%;
  display: flex;
}

.admin-appbar .appbar {
  justify-content: space-between;
  display: flex;
  min-width: calc(100% - 200px);
  margin-left: 200px;
}

.admin-appbar .appbar .appbar-wholesale-home {
  background: url(../images/ico-mystore-06.png) no-repeat center;
}

.admin-appbar .appbar .appbar-pre {
  background: url(../images/appbar-sub-pre.svg) no-repeat center;
}

.admin-appbar .appbar-qrcode {
  display: none;
}

.admin-content-wrap {
  padding-top: 40px;
}

.admin-side-wrap {
  position: fixed;
}

.admin-side {
  width: 200px;
  height: 100vh;
  background-color: var(--admin-primary-color);
  padding-top: 26px;
}

.admin-side button {
  text-align: left;
  border: 0;
  padding: 10px 10px 10px 30px;
  border-radius: 0;
  background: transparent;
  color: #919EAB;
  font-size: 15px;
}

.admin-side button.active {
  background-color: var(--admin-point-color);
  color: #fff;
}


.admin-contents {
  width: calc(100% - 240px);
  /* height: 100vh; */
  background-color: var(--admin-secondary-color);
  margin-left: 200px;
  padding: 20px;
  /* max-width: 1400px; */
}

.admin-contents .section {
  padding: 10px 0px;
}

.admin-contents .title {
  padding-bottom: 20px;
  font-size: 22px;
}

.admin-contents .coupon-select {
  margin: 0;
  width: 200px;
}

.admin-contents .section.info p {
  font-size: 15px;
}

.admin-contents .sub-title {
  padding-bottom: 10px;
  font-size: 18px;
}

.admin-contents .tabs {
  border: 0;
  padding-bottom: 0;
}

.admin-contents .tabs button {
  width: auto;
  padding: 10px 20px 10px 20px;
  border-radius: 6px 6px 0 0;
  font-size: 16px;
}

.admin-contents .tabs button.active {
  background-color: var(--admin-point-color);
  border: var(--admin-point-color);
  color: #fff
}

.admin-contents .search-input {
  padding: 5px;
  width: calc(100% - 12px);
}

.dashboard-box,
.admin-contents-box {
  border: 1px solid var(--text-200-color);
  border-radius: var(--border-box-radius);
  padding: 20px;
  background: #fff;
  box-shadow: var(--box-shadow);
}

.dashboard-box {
  /* height: 250px; */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dashboard-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.dashboard-select-year h3 {
  width: 200px;
}

.dashboard-select-year {
  display: flex;
}

.dashboard-select-year select,
.admin-log-row select {
  height: 30px;
  padding: 5px;
}


.chart-hight {
  height: 200px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.col-4 {
  width: calc(25% - 50px);
}

.col-2 {
  width: calc(50% - 48px);
}

.col-1 {
  width: 100%;
}


.dashboard-box-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.dashboard-box {
  margin-bottom: 10px;
}

.dashboard-box h2 {
  font-size: 17px;
  display: block;
  padding-bottom: 20px;
  text-align: center;
}


.admin.wholesale .appbar {
  background-color: var(--admin-secondary-color)
}

.admin.wholesale .tabs-line .tab-button.active {
  border-color: var(--text-900-color);
  color: var(--text-900-color);
}

.admin.wholesale .register-search-list {
  padding-top: 20px;
  font-size: 1.4rem;
}

.admin.wholesale .register-search-list li {
  padding: 0.5rem 0;
}

.admin.wholesale .btn-fill {
  background: var(--text-500-color);
  border-color: var(--text-500-color);
}

.tip {
  font-size: 1.4rem;
  color: var(--primary-color)
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.admin-tab-button {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem
}

.admin-tab-button button {
  padding: 0.5rem;
  height: 3rem;
  border: 1px solid var(--text-600-color);
}

.admin-tab-button button.active {
  color: #fff;
  background: var(--text-600-color);
}

.admin .main-tab .tabs-line .tab-button {
  border-bottom: 2px solid var(--text-100-color);
}

.admin input[type="checkbox"]:checked {
  border: 1px solid var(--text-600-color) !important;
  background: var(--text-600-color) !important;
}

.admin td {
  background: #fff;
  padding: 5px;
  font-size: 15px;
}

.admin th {
  background: var(--text-30-color);
  padding: 5px
}

.admin .inner-td {
  display: flex;
  justify-content: space-between;
}

.admin .text-red {
  color: var(--primary-color)
}

.admin .inner-td .btn-history {
  border: 1px solid var(--text-400-color);
  padding: 5px;
  border-radius: 5px;
}

.admin .inner-select {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.admin .inner-select select {
  height: 28px;
  border: 1px solid var(--text-300-color);
}

.inner-buttons {
  display: flex;
  gap: 10px;
  padding-top: 5px;
}

.inner-buttons button {
  min-width: 60px;
  height: 34px;
  line-height: 34px;
  font-size: 15px;
  border: 0;
  padding: 0px 10px 0px 10px;
}

.inner-buttons .inner-btn-approval {
  position: relative;
  background: #0d9600;
  color: #fff;
}

.inner-buttons .completed {
  background: var(--text-300-color);
}

.inner-buttons .inner-btn-reject {
  background: #000;
  ;
  color: #fff;
}

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

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

.admin-pagenation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.admin-pagenation button {
  width: 50px;
  height: 30px;
}

.revenue-list {
  border-radius: var(--border-box-radius);
  background-color: #f4f6ff;
  border: 1px solid var(--admin-point-color);
  padding: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.revenue-list li {
  font-size: 15px;
  padding: 5px 5px 5px 10px;
  position: relative;
  line-height: 120%;
}

.revenue-total {
  display: flex;
  justify-content: space-between;
}

.revenue-list li::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--text-600-color);
  border-radius: 50%;
  top: 10px;
  left: 0;
}

.revenue-month {
  margin-top: 10px;
}

.revenue-month .revenue-total {
  border-bottom: 1px solid var(--text-200-color);
  align-items: center;
  padding-bottom: 15px;
}

.revenue-input {
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: center;
}

.revenue-input input {
  height: 32px;
  text-align: center;
}


.current-balance {
  display: flex;
  justify-content: space-between;
  color: var(--admin-point-color)
}

.current-balance span {
  font-size: 13px;
  color: var(--admin-point-color)
}

.revenue-total .period {
  display: flex;
  justify-content: center;
  align-items: center;
}

.revenue-total .period h3 {
  flex: 0 0 100px;
}

.revenue-total .period select {
  height: 32px;
  width: 150px;
  font-size: 15px;
}

.revenue-total-price {
  display: flex;
  flex-direction: column;
  align-items: end;
}

.revenue-status-box {
  padding: 20px !important;
  border: 1px solid var(--text-200-color);
  border-radius: var(--border-box-radius);
  font-size: 14px;
}

.revenue-month h4 {
  font-weight: 500;
  padding-bottom: 10px;
  padding-top: 30px;

}

.container.admin .btnlist div {
  flex: none
}

.user-search-results {
  margin-top: 10px;
  font-size: 15px;
}

.user-search-message-box {
  text-align: center;
  padding: 14px;
  background: var(--secondary-10-color);
  color: var(--secondary-color);
  border-radius: var(--border-box-radius);
  margin: 20px 0;
  font-size: 15px;
}

.admin-contents-box .title-sub {
  margin-top: 20px;
}

.user-search-results .border-b {
  display: flex;
  padding: 6px;
}

.user-search-results .border-b span {
  padding-right: 20px;
  min-width: 130px;
}

.user-search-results .border-b:nth-child(odd) {
  background-color: #f9f9f9;
}

.preparing-dashboard {
  font-size: 2rem;
  color: var(--admin-point-color);
  font-weight: 500;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.retail-store-main {
  position: relative;
}

.fixed-category {
  position: fixed;
  top: 50px;
  left: 0;
  width: 100%;
  z-index: 3;
  /* 다른 요소 위에 표시되도록 z-index 설정 */
  background-color: white;
  /* 고정되었을 때 배경색을 지정하면 더 자연스럽습니다. */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  /* 그림자 효과 추가 */
}

.lite-seller-info {
  border: 1px solid var(--secondary-color);
  border-radius: var(--border-box-radius);
  padding: 20px;
  background: var(--secondary-10-color);
  margin: 20px;
}

.lite-seller-info li {
  font-size: 14px;
  padding-bottom: 5px;
}

.lens-search-list {
  gap: 1rem;
  min-height: 200px;
}

.lens-search-list .no-message-wrap {
  left: 0px
}

.lens-search-list .no-message img {
  padding-top: 4rem
}

.lens-search-list .thumbnail {
  width: auto;
}

.edit-user-information {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0rem 2rem;
}

.edit-user-information-box {
  width: 100%;
  max-width: 600px;
  padding: 20px 20px 30px 20px;
  border-bottom: 1px solid var(--text-100-color);
}

.edit-user-information-box h3 {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 600;
}

.edit-user-information-box .wholesale-item li {
  padding: 0.3rem;
  font-size: 16px;
  display: flex;
}

.edit-user-information-box .wholesale-item.no-flex li {
  display: block;
}

.edit-user-information-box .wholesale-item li span {
  padding: 0.5rem
}

.edit-user-information-box .wholesale-item li span.item {
  background: url('../images/dot.svg') no-repeat left 16px;
  padding-left: 10px;
}

.wholesale-item label {
  background: url('../images/dot.svg') no-repeat left 16px;
  padding-left: 10px;
  font-weight: 500;
}

.wholesale-item .error-message {
  display: none;
}

.find-pw-wrap {
  margin-top: 80px;
  /* padding:20px 16px; */
}

.find-pw-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  opacity: 0;
}

.find-pw-wrapper.open {
  max-height: 600px;
  /* 내부 콘텐츠보다 충분히 크게 */
  opacity: 1;
}

.find-pw-title {
  display: flex;
  justify-content: center;
  align-items: center;
}

.find-pw-title-open {
  margin-top: 30px;
  font-size: 18px;
  text-align: center;
  font-weight: 600;
  line-height: 140%;
}

.find-pw-title-open h1 {
  line-height: 120%;
}

.find-pw-title h5 {
  text-align: center;
  font-size: 15px;
  line-height: 140%;
}

.btn-find-pw {
  margin-top: 30px;
}

.find-pw-read {
  padding: 20px 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;

}


.find-pw-read li {
  font-size: 14px;
  padding: 4px 0;
  color: var(--primary-color);
}

.email-inquiry {
  display: flex;
  justify-content: space-between;
  padding: 20px 0 10px 0;
}

.email-inquiry .input-container {
  width: 100%;
}

.get-temporary-pw {
  padding: 20px 0 80px 0;
}


.appbar-util {
  display: inline-block;
}

.util-btn {
  padding: 6px 12px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  background: url(../images/appbar-utility.svg) no-repeat center;
}

.util-btn.status-login::before,
.retail-sub .util-btn.status-login::before {
  content: "";
  width: 5px;
  height: 5px;
  background: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 50%;
}

.retail-sub .util-btn {
  background: url(../images/appbar-utility-2.svg) no-repeat center;
}

.retail-sub .util-btn.status-login::before {
  background: var(--text-600-color);
}


.util-dropdown {
  position: absolute;
  right: 0;
  margin-top: 0px;
  width: auto;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
  padding: 10px;
}

.util-dropdown .util-item {
  display: flex;
  align-items: flex-start;
  padding: 3px;
}

.util-dropdown .util-item .appbar-login {
  color: var(--text-600-color);
  padding-left: 0;
}

.util-item {
  width: 140px;
}

.util-item a {
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-600-color);
  text-indent: 0%;
  font-size: 14px;
  padding-left: 0;
  line-height: 30px;
}

.util-item button.appbar-login {
  color: var(--text-600-color);
  text-align: left;
  font-size: 14px
}

.util-item button.appbar-language {
  padding-left: 0px;
  color: var(--text-600-color);
  display: flex;
  overflow: inherit;
  margin-top: 0;
  width: auto;
  background: none;
  justify-content: center;
  align-items: center;
}

.util-item button.appbar-language img {
  border: 1px solid var(--text-300-color);
  height: auto !important;
}

.util-item button.appbar-language div {
  font-size: 14px;
  color: var(--text-600-color);
  padding-right: 5px;
}

.color-preview {
  position: absolute;
  transform: translate(40px, -50%);
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  min-width: 150px;
  display: flex;
  flex-direction: column;
}

.color-preview .close {
  background: url('../images/btn-close-modal.svg') no-repeat center;
  background-size: 40%;
  width: 40px;
  height: 40px;
  text-indent: -1000px;
  overflow: hidden;
  right: 0;
  top: 0;
  border: 0;
  position: absolute;
}

.color-preview .img-view {
  width: 200px;
  height: auto
}

.color-preview .circle-view {
  width: 100px;
  height: 100px;
  margin: auto;
  border-radius: 50%;
  border: 1px solid var(--text-300-color);
}

.color-preview h4 {
  padding-bottom: 10px;
  font-weight: 500;
}

.color-preview img {
  border-radius: 10px;
}

.option-edit-table button {
  border-radius: 50%;
  margin: 2px;
  border: 1px solid var(--text-300-color) !important
}

.retail-info-wrap .option-table-scroll {
  max-height: fit-content;
}

.user-list {
  font-size: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.user-list-content {
  display: flex;
  border: 1px solid var(--text-200-color);
  padding: 16px;
  border-radius: 10px;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.user-list .btn-user-delete {
  position: absolute;
  width: 100px;
  top: 40px;
  right: 20px;
  width: auto;
  min-width: 50px;
  padding: 10px;
}

.user-list-content .manager,
.user-list-content .employee {
  background: var(--admin-point-color);
  display: inline-block;
  padding: 4px 6px;
  font-size: 13px;
  border-radius: 5px;
  color: #fff;
}

.user-list-content .employee {
  color: var(--admin-point-color);
  background: var(--text-50-color);
}

.user-list-content .name {
  display: flex;
  align-items: center;
}

.user-list-content .name h3 {
  padding-left: 5px;
}

.user-list-content .info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* .chatbot-component {
  position: fixed;
  z-index: 1000;
  padding: 40px;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  top: 0;
  width: 600px;
  right: 0;
} */

.chatbot-component-wrap {
  position: fixed;
  bottom: 40px;
  left: 0;
  width: calc(100% - 40px);
  height: calc(100% - 20%);
  height: 560px;
  /* background: rgba(0, 0, 0, 0.5); */
  z-index: 14;
  display: flex;
  justify-content: center;
  pointer-events: none;
  /*  클릭 이벤트를 통과시킴  */
  margin: 20px;
}

.chatbot-component .bottom-sheet-overlay {
  pointer-events: auto;
}

.chatbot-wrap {
  box-shadow: var(--box-shadow);
  border-radius: 16px;
  max-width: 1200px;
  /* height: calc(100vh - 180px);
  overflow-y: auto; */
  width: 100%;
  z-index: 20;
  max-width: 600px;
  height: 550px;
  background: #fff;
  overflow: hidden;
}

.chatbot-header {
  text-align: center;
  background: #fff;
  padding: 12px;
  border-radius: 10px 10px 0 0;
}

.chatbot-header h2 {
  font-weight: 500;
  font-size: 16px;
}

.btn-chatbot {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--primary-color) url('../images/ico-chatbot-ai.gif') no-repeat center center;
  background-size: 56%;
  /* 아이콘 크기 조정 */
  /* 아이콘 크기 조정 */
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  /* 버튼 그림자 */
  transition: background-color 0.3s ease;
  text-indent: -1000px;
  overflow: hidden;
  position: absolute;
  bottom: -24px;
  right: 20px;
  z-index: 30;
  pointer-events: auto;
  overflow-y: auto;
}

.btn-chatbot.close-chat {
  background: #000 url('../images/ico-chat-close.svg') no-repeat center center;
  background-size: 16px;
  right: auto;
  bottom: -24px;
  width: 50px;
  height: 50px;
}

.chatbot-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chatbot-content-box {
  overflow-y: auto;
  padding: 20px;
  height: 400px;
  /* max-height: 500px;       */
  overflow-y: auto;
  /* 세로 스크롤 활성화 */
  -webkit-overflow-scrolling: touch;
  /* 모바일에서 부드럽게 */
  background: var(--text-50-color);
}

.chatbot-content-box h3 {
  font-size: 16px;
  font-weight: 500;
}

.chatbot-menu {
  padding-top: 10px;
}

.chatbot-menu button {
  width: auto;
  padding: 8px;
  margin-right: 4px;
  border-radius: 20px;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  margin-bottom: 4px;

}

.chat-content-section {
  display: flex;
  align-items: last baseline;
  gap: 5px;
}

.customer .chat-content-section {
  justify-content: flex-end;
}

.chat-content-section .time {
  font-size: 13px;
  color: var(--text-500-color);
}

.chat-content {
  background: #fff;
  padding: 16px;
  font-size: 15px;
  border-radius: 10px;
  box-shadow: var(--box-shadow);
}

.chat-date {
  background: #e5e5e5;
  text-align: center;
  font-size: 13px;
  padding: 2px;
  margin-top: 20px;
  border-radius: 10px;
}

.omnyx h4 {
  padding-bottom: 5px;
  font-size: 15px;
  font-weight: 600;
}

.omnyx .chat-content {
  max-width: calc(100% - 100px);
  border-radius: 2px 20px 20px 20px;
  line-height: 150%;
}

.customer .chat-content {
  max-width: calc(100% - 100px);
  background: var(--text-600-color);
  color: #fff;
  border-radius: 20px 2px 20px 20px;
  line-height: 150%;
}

.chatbot-input-area .chatbot-input {
  border-top: 1px solid var(--text-300-color);
  display: flex;
  padding: 10px;
  gap: 6px;
  background: #fff;
}

.chatbot-input-area .chatbot-input input {
  height: 36px;
  padding-left: 5px;
}

.chat-link-btn {
  text-decoration: underline;
  margin-left: 10px;

}

.container-bg {
  background: var(--text-50-color)
}

.main-payment-options {
  display: flex;
  gap: 10px;
  padding: 16px;
}

.main-payment-options label {
  flex: 1;
}

.main-payment-options label input {
  margin-right: 5px;
}

.payment-option-label .radio-label,
.sub-payment-options label span {
  color: var(--text-500-color);
}

.payment-option-label.selected .radio-label,
.sub-payment-options label.selected span {
  color: var(--text-600-color);
  font-weight: 600;
}

.sub-payment-options label.selected {
  border: 1px solid var(--text-600-color);
}

.sub-payment-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.sub-payment-options label {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  height: 40px;
  border-radius: 6px;
  border: 1px solid var(--text-400-color);
  color: var(--text-400-color);
  padding: 0px 16px;
}

.sub-payment-options label input {
  display: none;
}

.sub-payment-options label em {
  font-size: 15px;
  margin-left: 5px;
}

.sub-payment-options label.selected em {
  font-weight: 600;
  color: var(--text-600-color);
}

.sub-payment-options label span.icon-cash,
.sub-payment-options label span.icon-card {
  width: 24px;
  height: 24px;
  display: inline-block;
  background: url(../images/ico-payment-cash.svg) no-repeat center center;
  background-size: 100%;
}



.sub-payment-options label span.icon-card {
  background: url(../images/ico-payment-card.svg) no-repeat center center;
  background-size: 100%;
}

.payment-option-label.selected input[disabled] {
  opacity: 1;
}

/* .sub-payment-options label span.icon-pagar { 
  background: url(../images/icon-pagar.png) no-repeat center center;
    background-size: 100%;
    width: 20px;
    height: 20px;
    display: inline-block;
} */

.sub-payment-options label.selected span {
  opacity: 1;
  position: relative;
}

.sub-payment-options label.selected span {
  background: url(../images/ico-bill-down.svg) no-repeat center center;
  background-size: 22px;
}

.store-order-tip {
  font-size: 15px;
  padding: 0px 0 10px 0;
  color: var(--primary-color);
}

.btn-print .btn-share.btn-whatsapp {
  background: url(../images/btn_share_whatsapp.svg) no-repeat center / contain;
  width: 30px;
}

.quick-order-product {
  display: flex;
  flex-wrap: wrap;
  gap: 1%;
  justify-content: start;
}

.quick-order-product .product-details-card {
  display: block;
  width: 24.2%;
  border: 0;
  margin-bottom: 20px;
}

.quick-order-product .product-details-card .thum .thum-mask {
  width: auto;
  height: auto;
}

.quick-order-identity-info {
  padding: 0px 20px;
  margin: 0px 20px 20px 20px;

}

.quick-order-identity-info form {
  display: flex;
  gap: 20px;
  width: 100%;
}

.quick-order-identity-info .form-group {
  width: 100%;
}

.quick-order-product button.open-button {
  padding: 10px;
  font-size: 15px;
}

/* 도매주문상태/주문하기 제품아이디포함*/
/* .order-satatus-detail {
  border:1px solid #ff6600;
} */
.order-satatus-detail .product-details-card {
  padding-left: 20px;
}

.order-satatus-detail .product-details-card .thum .thum-mask {
  width: 60px;
  height: 60px;
}

.order-satatus-detail .cart-order-box .cart-select-option {
  margin-right: 20px;
}

.order-satatus-detail .cart-card {
  border: 0;
}

.order-satatus-detail .cart-card .product-details-card .product-info .price-info {
  bottom: 20px
}

.order-payment-product-list .cart-card {
  border: 0;
}

.order-payment-product-list .cart-order-box .cart-select-option {
  margin-left: 0;
  margin-top: 0;
}

.order-payment-product-list .order-block {
  padding: 0 10px;
}

.btn-printer,
.btn-printer-bt,
.btn-printer-share,
.btn-printer-whatsapp {
  background: url(../images/btn-printer.svg) no-repeat center;
  background-size: contain;
  border: 0;
  overflow: hidden;
  height: 3.6rem;
  width: 3.6rem;
  text-indent: -100rem;
  margin: 0 0.5rem;
  border: 1px solid var(--text-400-color)
}

.btn-printer-share {
  background: url(../images/btn-share.svg) no-repeat center;
  background-size: contain;
}

.btn-printer-bt {
  background: url(../images/btn-printer-bt.svg) no-repeat center;
  background-size: contain;
}

.btn-printer-whatsapp {
  background: url(../images/btn-printer-whatsapp.svg) no-repeat center;
  background-size: contain;
}

.responsive-wrap .inquiry-conditions {
  padding: 0 40px;
  margin-top: -10px;
}


.qr-order-wrap .quick-order-product {
  border: 1px solid #000;
}

.qr-order-wrap .quick-order-identity-info {
  margin-bottom: 0;
}

.qr-order-wrap .combo-button-caption-wrap {
  width: auto;
}

.qr-footer {
  position: fixed;
  width: 100%;
  z-index: 10;
  bottom: 0px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-footer .quick-order-footer {
  max-width: 1200px;
  width: 100%;
}

.qr-footer-wrap {
  margin-left: 121px;
  background: #fff;
}

.quick-order-details-section {
  padding: 2rem 4rem;
}

.qr-code-view {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: 20px;
  position: relative;
  gap: 0px;
}

.qr-code-view img {
  width: 140px;
}

.qr-code-view .btn-printer,
.qr-code-view .btn-printer-bt {
  margin-bottom: 10px;
}

.client-select {
  display: flex;
  justify-content: flex-start;
}

.client-select .dropdown {
  width: auto;
}

.client-select .dropdown .input-container {
  width: auto;
}

.client-select .input-container select {
  padding-right: 30px;
}

.qr-order-product .product-details-card .thum .thum-mask {
  width: 90px;
  height: 90px;
}

.qr-order-product .product-details-card .name,
.qr-order-product .product-details-card .price {
  font-size: 16px;
  font-weight: 600;
}

.subscription-status-info li {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 0;
}

.subscription-status-info li p.request-item {
  flex: 0 0 140px;
  display: flex;
  align-items: center;
}

.subscription-status-info li p.request-content {
  flex: 1;
  display: flex;
  align-items: center;
  margin-top: 0;
}

.wholesale .btn-large.btn-fill.btn-changeplan {
  background: var(--admin-primary-color) !important;
  border: 1px solid var(--admin-primary-color) !important;
}


.renew-modal .plan-option {
  padding-bottom: 0px;
  padding-top: 30px;
}

.renew-modal h4 {
  font-weight: 600;
}

.renew-modal .radio-group {
  flex-direction: column;
  align-items: flex-start;
}

.renew-modal .plan-option label.request-item {
  font-size: 1.3rem;
  color: var(--secondary-color);
  font-weight: 500;
}


.read-box {
  border: 1px solid var(--text-100-color);
  margin-top: 20px;
  padding: 10px;
  border-radius: 6px;
  background: var(--text-30-color);
}

.read-box li {
  font-size: 15px;
  padding: 5px 5px 5px 10px;
  position: relative;
  line-height: 150%;
}

.read-box li::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--text-600-color);
  border-radius: 50%;
  top: 10px;
  left: 0;
}

.chaneplan-box {
  border: 1px solid var(--secondary-50-color);
  background: var(--secondary-10-color);
  padding: 10px;
  border-radius: 10px;
}

.chaneplan-box p {
  font-size: 16px;
  position: relative;
  padding-left: 10px;
  padding-top: 5px;
  line-height: 140%;
}

.chaneplan-box p strong {
  font-weight: 600;
}

.chaneplan-box p strong.price {
  color: #E41A1D;
  white-space: nowrap;
}

.chaneplan-box p::before {
  content: '*';
  position: absolute;
  top: 6px;
  left: 0;
}

.btn-area-changeplan .btn-fill {
  background: var(--admin-primary-color) !important;
  border: var(--admin-primary-color) !important;
}

.auth-footer {
  padding-top: 20px !important
}

.auth-sign-up .bottom-sheet-content {
  min-height: 90vh;
}

.auth-sign-up .section.terms-wrap {
  margin-bottom: 100px;
}

.auth-sign-up h1 {
  font-size: 18px;
}

.regular-wholesale-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5%;
}

.regular-wholesale-list .seller-card {
  width: 29%;
}

.enterprise-slider .swiper-slide {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-box-radius);
  border: 1px solid var(--text-100-color);
  box-shadow: var(--box-shadow);
  margin-bottom: 30px;
}

.enterprise-slider .swiper-pagination-bullet {
  background: #000 !important;
  width: 6px !important;
  height: 6px !important;
}

.enterprise-seller-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}

.enterprise-seller-logo {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--text-200-color)
}

.enterprise-seller-logo img {
  width: 100%;
  height: auto;
}

.enterprise-slider .swiper-pagination {
  bottom: 0px;
}

.index-title {
  text-align: center;
  padding: 20px 20px 20px 20px;
}

.index-title h3 {
  font-size: 24px;
  font-weight: 600;
}

.index-title p {
  font-size: 14px;
  margin-top: 10px;
}



/**** 자사몰 ****/


.slug-container,
.slug-container .slug-appbar {
  max-width: 1400px;
  z-index: 1;
}

.slug-container .slug-appbar {
  height: 40px;
}

.slug-container .content-wrap {
  padding-top: 5rem;
}

.slug-container .store-main-responsive::after {
  display: none;
}

.slug-container .fixed-category {
  z-index: 10;
}

.slug-container .store-main-snb {
  width: auto;
  position: relative;
}

.slug-container .store-main-content {
  margin-left: 0;
}

.slug-container .store-info-wrap {
  width: auto;
}

.slug-container .store-logo-area {
  padding: 0 0 16px 20px;
  z-index: 100;
  width: 100%;
  /* pointer-events: none; */
  margin-top: -10px;
}

.slug-container .store-logo-area .seller-logo {
  height: 36px;
}

.slug-container .store-logo-area .seller-name h2 {
  font-size: 26px;
}

.slug-container .store-category.only-pc {
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 100;
  background: #fff;
  /* overflow-x: auto; */
}

.slug-container {
  position: relative;
}

.slug-container .store-category .retail-menubox-wrap button .btn-center div,
.slug-container .store-category .retail-menubox-wrap button,
.slug-container .store-category .retail-menubox-wrap li {
  width: 120px;
  font-size: 13px;
  line-height: 14px;
}

.slug-appbar a {
  padding: 0 3px 0 3px;
}

.slug-appbar .util-item {
  width: 30px;
}

.slug-appbar .util-item button.appbar-language {
  width: 100%;
}

.slug-container .store-product-list-wrap .store-product-list {
  margin-right: 0px;
  padding: 20px 0;
}

.slug-container .fixed-category {
  top: 40px;
}

.sectiton-main-out-stock .no-message-wrap {
  position: relative;
}

/* 매출 현황 섹션 */
.wholesale-main-sales {
  padding: 2rem 0;
}

.wholesale-main-sales-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}

.sales-card {
  background: #fff;
  border: 1px solid var(--text-200-color);
  border-radius: 0.8rem;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.sales-card-content {
  text-align: center;
}

.sales-label {
  font-size: 1.3rem;
  color: var(--text-500-color);
  margin-bottom: 0.5rem;
}

.sales-value {
  font-size: 2rem;
  font-weight: 600;
  color: var(--secondary-color);
}

.sales-value.count {
  color: var(--text-600-color);
}

.sales-value.canceled {
  color: var(--error-color);
}

.sales-period-info {
  background: var(--text-50-color);
  padding: 1rem;
  border-radius: 0.6rem;
  text-align: center;
  margin: 1.5rem 0;
}

.sales-period-info p {
  font-size: 1.3rem;
  color: var(--text-500-color);
  margin: 0;
}

/* TOP 고객 순위 */
.customer-sales-ranking ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
}

.rank-item {
  display: flex;
  align-items: center;
  padding: 1rem !important;
  background: #fff;
  border: 1px solid var(--text-200-color);
  border-radius: 0.6rem;
  margin-bottom: 0.8rem;
}

.rank-item .rank {
  width: 2.4rem;
  height: 2.4rem;
  background: var(--secondary-color);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.3rem;
  margin-right: 1rem;
  flex-shrink: 0;
}

.rank-item .customer-info {
  flex: 1;
  /* display: flex; */
  align-items: baseline;
  gap: 0.5rem;
}

.rank-item .name {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--text-600-color);
}

.rank-item .count {
  font-size: 1.2rem;
  color: var(--text-400-color);
}

.rank-item .amount {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-600-color);
  margin-left: auto;
}

.wholesale-sales-list-container {
  padding: 2rem;
  background: var(--background-color);
  min-height: 100vh;
}

.wholesale-sales-search {
  border: 1px solid var(--text-200-color);
  padding: 10px;
  border-radius: 6px;
}

.wholesale-sales-list-container .status-filter {
  padding: 2rem 0;
}

.sales-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--text-200-color);
}

.sales-list-header h1 {
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--text-700-color);
  margin: 0;
}

.sales-list-header .back-button {
  padding: 0.8rem 1.6rem;
  background: var(--text-100-color);
  border: 1px solid var(--text-300-color);
  border-radius: 0.6rem;
  font-size: 1.4rem;
  color: var(--text-600-color);
  cursor: pointer;
  transition: all 0.2s;
}

.sales-list-header .back-button:hover {
  background: var(--text-200-color);
  border-color: var(--text-400-color);
}

/* Period Filter */
.period-filter {
  display: flex;
  gap: 1rem;
}

.period-filter button {
  padding: 0.5rem 1rem;
  background: #fff;
  border: 1px solid var(--text-300-color);
  border-radius: 6px;
  font-size: 1.3rem;
  color: var(--text-600-color);
  cursor: pointer;
  transition: all 0.2s;
}

.date-range-form {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.date-inputs {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.date-inputs input[type="date"] {
  padding: 0.8rem 1.2rem;
  border: 1px solid var(--text-300-color);
  border-radius: 0.6rem;
  font-size: 1.4rem;
  color: var(--text-700-color);
  width: 100px;
}

.date-inputs span {
  font-size: 1.6rem;
  color: var(--text-500-color);
}

.date-range-form .apply-button {
  padding: 0.8rem 2rem;
  background: var(--secondary-color);
  color: #fff;
  border: none;
  border-radius: 0.6rem;
  font-size: 1.4rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 10px;
  width: auto;

}

/* Sales Summary Bar */
.sales-summary-bar {
  display: flex;
  gap: 2rem;
  border-radius: 0.8rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--text-200-color);
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  justify-content: space-between;
}

.summary-item {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.summary-label {
  font-size: 1.3rem;
}

.summary-value {
  font-size: 1.8rem;
  font-weight: 700;
}

.sales-list-table tbody tr.canceled {
  background: rgba(239, 68, 68, 0.05);
}

.sales-list-table tbody tr.canceled:hover {
  background: rgba(239, 68, 68, 0.1);
}

.sales-list-table .no-data {
  text-align: center;
  padding: 3rem;
  color: var(--text-400-color);
  font-size: 1.4rem;
}

/* Status Badges */
.status-active {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
  border-radius: 1rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.status-canceled {
  display: block;
  padding: 0.4rem 1rem;
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border-radius: 1rem;
  font-size: 1.2rem;
  font-weight: 600;
  width: auto;
  text-align: center;
}

/* Load More */
.load-more-container {
  text-align: center;
  padding: 2rem 0;
}

.load-more-button {
  padding: 1rem 3rem;
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 0.6rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.load-more-button:hover {
  background: var(--primary-hover-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.inner-approval {
  display: flex;
  gap: 5px;
}

.read-subscription span {
  font-size: 15px;
  color: var(--text-500-color);
  position: relative;
  padding-left: 10px;
  display: block;
}

.read-subscription span::before {
  content: "*";
  width: 15px;
  height: 15px;
  position: absolute;
  top: 2px;
  left: 0px;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rotate-slow {
  animation: rotateClockwise 10s linear infinite;
}

.connection-line {
  stroke-dasharray: 5, 5;
  animation: dash 1s linear infinite;
}

.chatbot-input-area button.voice-btn {
  width: 46px;
  text-indent: -1000px;
  overflow: hidden;
  border-radius: 50%;
}

.chatbot-input-area button.voice-btn.listening {
  animation: pulse 1.5s infinite;
  /* 음성 인식 중 애니메이션 */
}

.chatbot-input-area .chatbot-input button {
  border: 0;
  padding: 0;
}

.chatbot-input-area .chatbot-input .mic-on,
.chatbot-input-area .chatbot-input .mic-off {
  background: #f44336 url(../images/ico-microphone-on.svg) no-repeat center center;
  background-size: 22px;
  height: 36px;
  width: 36px;
  display: block;
  border-radius: 50%;
}


.chatbot-input-area .chatbot-input .mic-off {
  background: #000 url(../images/ico-microphone-off.svg) no-repeat center center;
  background-size: 22px;
}

.chatbot-input-area .chatbot-input .send-btn {
  background-size: 30px;
  height: 36px;
  width: 46px;
  background: url(../images/ico-send.svg) no-repeat center center;
  text-indent: -1000px;
  overflow: hidden;
  border: 1px solid #000;
  border: 0;
}

.chatbot-input-area .chatbot-input .send-btn:disabled {
  opacity: 0.2;
}

.whatsapp-float-button {
    position: fixed;
    bottom: 30px;
    left: 50%; /* 왼쪽 끝에서 50% 위치로 이동 */
    transform: translateX(-50%); /* 버튼 너비의 50%만큼 왼쪽으로 이동하여 중앙 정렬 */
    z-index: 9; 
    padding: 14px 18px;
    background-color: var(--secondary-10-color); 
    border: 1px solid var(--secondary-color); 
    color: var(--secondary-color); 
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    width: calc(100% - 40px);
    max-width: 600px;
    line-height: 120%;
}

.update-section {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10;
  padding: 30px 20px 20px 20px;
}

.update-section h1 {
   font-size: 20px;
   padding: 10px;
   color: var(--text-500-color);
}

.update-section .text {
  font-size: 15px;
  text-align: center;
  color: var(--text-500-color);
}

.update-ani {
  animation: spin-rotation 2s linear infinite; 
   color: var(--text-400-color);
}

@keyframes spin-rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.modal-btnlist .btnlist {
  flex: auto;
} 

.modal-btnlist .btn-medium {
  width: 100%;
}

/* body:has(.appbar.retail) {
    background-color: var(--primary-color)
}
body:has(.appbar.wholesale) {
    background-color: var(--secondary-color)
}
body:has(.appbar.retail-sub) {
    background-color: #ffffff; 
} */

/********* //// 미디어 쿼리 *********/

@media (max-width: 1148px) {
  .regular-wholesale-list .seller-card {
    width: 45%;
  }

  .slug-container .store-category .retail-menubox-wrap button .btn-center div,
  .slug-container .store-category .retail-menubox-wrap button,
  .slug-container .store-category .retail-menubox-wrap li {
    width: 90px;
    font-size: 12px;
    line-height: 13px;
  }
}

.detail-slider .swiper-slide,
.detail-slider .swiper-zoom-container,
.detail-video,
.detail-video-inner {
  height: auto;
}

@media (max-width: 820px) {

  .detail-slider .swiper-slide,
  .detail-slider .swiper-zoom-container,
  .detail-video,
  .detail-video-inner {
    height: 580px;
  }

  .detail-video-inner {
    width: 100%;
  }

  .slug-container .store-category .retail-menubox-wrap button .btn-center div,
  .slug-container .store-category .retail-menubox-wrap button,
  .slug-container .store-category .retail-menubox-wrap li {
    width: 80px;
  }
}

@media (max-width: 768px) {

  .btn-chatbot {
    right:0
  }

  .wholesale-main-plans h3 {
    font-size: 16px;
    line-height: 22px;
  }

  .sales-card {
    padding: 1.2rem;
  }

  .sales-value {
    font-size: 1.8rem;
  }

  .summary-item {
    flex-direction: column;
    font-size: 11px;
    text-align: left;
    align-items: flex-start !important;
  }

  .slug-container .store-category .retail-menubox-wrap button .btn-center div,
  .slug-container .store-category .retail-menubox-wrap button,
  .slug-container .store-category .retail-menubox-wrap li {
    width: 90px;
    font-size: 11px;
    line-height: 12px;
  }

  .slug-container .store-logo-area .seller-logo {
    height: 28px;
  }

  .slug-container .store-logo-area .seller-name h2 {
    font-size: 20px;
  }


  .regular-wholesale-list .seller-card {
    width: 100%;
  }

  .detail-slider .swiper-slide,
  .detail-slider .swiper-zoom-container,
  .detail-video,
  .detail-video-inner {
    height: 680px;
  }

  .qr-footer-wrap {
    margin-left: 0px;
  }

  .responsive-wrap .inquiry-conditions {
    padding: 0 20px;
  }

  .wholesale-menu-box .icon {
    width: 2.6rem;
    height: 2.6rem;
  }

  .responsive-wrap .wholesale-menu-box .title {
    font-size: 1.2rem;
    text-align: center;
    min-height: 24px;
  }

  .etc-btn .btn-admin .title {
    min-height: auto;
  }


  .responsive-wrap .etc-btn {
    position: absolute;
    top: 50px;
    right: 20px;
    display: flex;
  }


  .wholesale-menu-box {
    flex-direction: column;
  }

  .snb-slider-wrap .swiper-slide {
    height: 70px;
  }

  .bottom-sheet-content .bottom-sheet-footer .selected-total-product {
    padding: 1.6rem 2rem;
  }

  .footer .copyright ul {
    align-items: flex-start;
  }

  .footer .copyright li.contact-us {
    flex-direction: column;
    gap: 3px;
  }

  .request-box .radio-group {
    flex-direction: column;
    align-items: flex-start;
  }

  .color-preview {
    transform: translate(40px, -50%);
  }

  .wholesale-main-order-period .date-picker-component input[type="date"] {
    width: 98px;
    font-size: 14px !important;
  }

  .wholesale-main-order-status .wholesale-main-box-in p {
    font-size: 24px;
  }

  .wholesale-main-list {
    padding: 0px 0px 0px 0px;
  }

  .wholesale-main-title {
    flex-direction: column;
    align-items: flex-start;
  }

  .wholesale-main-order-period {
    margin: 10px 0 0 0;
  }

  .wholesale-main-list {
    border-left: 0;

  }

  .wholesale-main-product-status {
    flex-direction: column;
  }

  .wholesale-main-list {
    width: auto;
    border-top: 1px solid var(--text-200-color);
    margin-top: 16px;
    padding-top: 16px;
  }

  .wholesale-main-list:first-child {
    border-top: 0px solid var(--text-200-color);
    margin-top: 0px;
  }

  .wholesale-main-plans {
    display: block;
    text-align: center;
  }

  .wholesale-main-plans .upgrade-area {
    padding-top: 5px
  }

  .wholesale-main-order-status {
    padding-top: 20px;
  }

  .responsive-wrap .content-wrap {
    margin-top: 170px;
    margin-left: 0px;
  }

  .responsive-wrap .content-wrap {
    border: 0;
  }

  .retail-cart-wrap .cart-card .btnlist {
    margin-left: 0rem;
  }

  .banner-slider-inner p {
    font-size: 14px;
  }

  .banner-slider-inner button {
    font-size: 12px;
    padding: 5px 8px;
  }

  .payment-pagabank .btn-pagabank,
  .payment-pagabank .btn-technopay,
  .payment-pagabank .btn-whatsapp {
    height: 46px;
  }

  .login-wide-appbar {
    margin-left: -20px;
    width: calc(100% + 40px);
  }

  .btn-large {
    font-size: 1.5rem;
    height: 4.6rem;
  }

  .alert-overlay {
    align-items: flex-end;
  }

  .store-product-list-wrap .store-product-list {
    padding-left: 20px;
  }

  .store-category .retail-menubox-wrap li:last-child .btn-center div {
    width: 80px !important;
  }

  .store-logo-area {
    justify-content: flex-start;
  }

  .store-main-content {
    width: 100%;
    margin-left: 0;
  }

  .only-mobile {
    display: block;
  }

  .only-pc {
    display: none !important;
  }

  .responsive-wrap .content-wrap {
    padding-top: 0rem;
  }

  .responsive-wrap {
    display: flex;
    flex-direction: column;
    margin-top: 0;
  }

  .responsive-wrap .responsive-snb {
    padding: 54px 0 5px 0;
    width: 100%;
    border-bottom: 1px solid var(--text-200-color);
    border-right: 0;
    height: auto;
    background-color: #fff;
    z-index: 1;
  }

  .responsive-wrap .wholesale-menu-wrap {
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
  }

  .responsive-wrap .btn-next,
  .responsive-wrap .btn-prev {
    top: 140px;
    background-size: 20%;
    display: block;
  }


  .snb-slider-wrap {
    margin-top: 40px;
    margin-left: 40px;
    width: calc(100% - 80px);
  }

  .snb-slider-wrap .swiper-wrapper {
    flex-direction: row;
    position: relative;
  }

  .snb-slider-wrap .swiper-slide {
    width: 70px;
    border: 0;
  }

  .responsive-wrap .wholesale-menu-box .title {
    width: auto;
  }

  .wholesale-menu-box .icon.ico-wholesale-main-07,
  .wholesale-menu-box .icon.ico-wholesale-main-08 {
    background-size: 60%;
  }

  .etc-btn button .wholesale-menu-box {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
  }

  .etc-btn button {
    margin-left: 10px;
  }

  .etc-btn button:hover {
    background-color: #fff;
  }

  .etc-btn .wholesale-menu-box .icon {
    margin-bottom: 0rem;
  }

  .bottom-sheet-content {
    padding: 2rem
  }

  .retail-category-in {
    padding: 2rem 2rem 0 2rem;
  }

  .product-detail-wrap {
    display: block;
  }

  .product-detail-wrap .detail-slider-wrap {
    width: calc(100% - 0px);
    padding: 0;
  }

  .product-detail-wrap .detail-info-wrap {
    width: calc(100% - 40px);
    margin-left: 20px;
  }

  .store-category {
    overflow-x: scroll;
    align-items: flex-start;
    justify-content: flex-start;
    /* margin-top:50px; */
  }

  .store-category .retail-menubox-wrap li {
    width: 90px;
  }

  .store-category .retail-menubox-wrap button .btn-center div {
    width: 68px;
  }

  .main-product h4,
  .main-promotion h4 {
    padding: 2rem 2rem 0rem 2rem;
  }

  .store-main-content .main-product h4 {
    padding-bottom: 10px;
  }

  .cart-total-amount {
    padding: 2rem;
  }

  .store-main-search-wrap {
    padding: 1rem 2rem 1rem 2rem;
  }

  .step-container {
    padding: 1rem 1rem 1rem 1rem;
  }

  .section.input-product {
    padding: 0 2rem 2rem 2rem;
  }

  .sign-up-set {
    margin: 2rem 3rem 1rem 3rem;
  }

  .wholesale-menu-wrap {
    gap: 20px;
  }

  .wholesale-menu-wrap li {
    width: 20%;
  }

  .section {
    padding: 2rem 2rem;
  }

  .retil-app-search-wrap {
    padding: 2rem 2rem;
  }

  .product-detail-wrap .section {
    padding: 2rem;
  }

  .date-picker-component {
    max-width: 100%;
    /* 모바일에서 너비 조정 */
  }

  .store-product-list .thumbnail,
  .store-product-list-item {
    width: 32.6%
  }

  .detail-slider-wrap {
    padding-left: 0;
  }

  .retail-cart-wrap .group-block,
  .main-list-wrap .section {
    padding: 2rem 2rem;
  }

  .main-slider,
  .detail-slider {
    /* height: 680px; */
    margin: 0;
    width: 100%;
  }

  .mobile body {
    overflow-x: hidden;
  }

  .sketch-picker .flexbox-fix:nth-of-type(4) {
    padding-top: 10px !important;
  }

  .detail-slider-wrap {
    display: block;
    padding-right: 0;
  }

  .detail-slider-wrap .detail-video {
    width: 100%;
  }

  .detail-video-inner {
    margin-left: -20px;
  }

  .detail-slider-wrap .detail-slider {
    width: 100%;
  }

  .detail-slider-wrap .thumb-bar {
    margin-top: -52px;
    margin-left: 70px;
    margin-right: auto;
    height: 60px;
    display: flex;
    gap: 8px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    position: absolute;
    width: calc(100% - 80px);
    right: auto;
    position: relative;
    top: 0px;
  }

  .thumb-bar button {
    flex: 0 0 48px;
    width: 48px;
    height: 62px;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
  }

  .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .4;
    transition: opacity .2s;
  }

  .btn-play-wrap {
    height: 60px;
    width: 48px;
    position: relative;
    top: 10px;
    left: 10px;
  }

  .btn-play {
    position: absolute;
    z-index: 1;
  }

  .video-upload-wrap .modal-content {
    width: calc(100% - 8rem) !important;
  }

  .retail-menubox-wrap li {
    width: calc(33.3% - 6px);
  }

  .quick-order-product .product-details-card {
    width: 32.6%;
  }
}


/* 화면이 460px 이하일 때 */
@media (max-width: 460px) {

  .wholesale-main-sales-summary {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .date-range-form {
    flex-direction: column;
    margin-top: 10px;
  }

  .date-range-form .apply-button {
    margin-top: 10px;
  }

  .slug-container .store-category .retail-menubox-wrap button .btn-center div,
  .slug-container .store-category .retail-menubox-wrap button,
  .slug-container .store-category .retail-menubox-wrap li {
    width: 70px;
    font-size: 11px;
    line-height: 12px;
  }


  .detail-slider .swiper-slide,
  .detail-slider .swiper-zoom-container,
  .detail-video,
  .detail-video-inner {
    height: 540px;
  }

  .quick-order-identity-info form {
    display: block;
  }

  .quick-order-product .product-details-card {
    width: 49.5%;
  }

  .filter-container .combo-button-caption-wrap {
    display: block;
  }

  .filter-container .combo-button-caption {
    font-size: 13px;
  }

  .filter-container .combo-button {
    padding-left: 0px;
    width: 100%;
  }

  .wholesale-main-product-status {
    gap: 10px;
  }

  .store-product-list .thumbnail,
  .store-product-list-item {
    width: 49.5%
  }

  .store-main-slider {
    height: 260px;
  }

  .store-main-slider .swiper-wrapper {
    margin-top: -5px;
  }

  .slide-image-container {
    height: 70%
  }

  .section {
    padding: 1rem;
  }

  .select-delete {
    padding: 0 2rem 1rem 0;
  }

  .print-order-product {
    flex-direction: column;
  }

  .detail-basic-info {
    padding-top: 10px;
  }

  .btnlist div {
    flex: 1;
  }

  .alert-overlay .alert-btn button {
    flex: 1;
  }

  .fix-btn form button {
    flex: 0.9;
  }

  .payment-pagabank .btn-pagabank {
    flex: 1;
  }

  .cart-select-option .option-price span {
    display: block;
  }

  .cart-order .discount-price {
    margin-left: 0
  }

  .btnlist {
    display: flex;
    flex-direction: column;
    align-items: normal;
  }

}

/* 화면이 375px 이하일 때 */
@media (max-width: 375px) {

  .discountrate-box {
    flex-wrap: wrap;
  }

  .btn-list-edit {
    margin-top: 10px;
    margin-left: -5px !important;
  }


  .detail-slider .swiper-slide,
  .detail-slider .swiper-zoom-container,
  .detail-video,
  .detail-video-inner {
    height: 440px;
  }

  .quick-order-details-section {
    padding: 2rem 2rem;
  }

  .wholesale-main-order-status .ftr {
    gap: 4px;
  }

  .wholesale-main-order-status .wholesale-main-box-in span {
    font-size: 12px;
  }

  .store-main-share {
    right: 1rem;
  }

  .store-main-search-wrap {
    padding: 1rem;
  }

  .sign-up-set {
    margin: 2rem 2rem 1rem 2rem;
  }

  .store-product-list-wrap .store-product-list {
    padding-left: 10px;
    padding-right: 10px;
  }

  .order-status-detail-wrap .order-status-detail-head,
  .section.input-product {
    padding: 0 1rem 2rem 1rem;
  }

  .report-wrap .report-item p {
    font-size: 1.8rem;
  }

  .date-picker-component input[type="date"] {
    font-size: 14px;
  }

  .custom-date-picker {
    background: none;
  }

  .share-options button {
    width: 60px;
    height: 60px;
    font-size: 1.3rem;
  }

}

@media (pointer: coarse) {
  .btn-zoom {
    display: none;
  }
}


/* 랜딩 시작 */

.floating-button {
  position: fixed;
  /* 뷰포트에 고정 */
  right: 30px;
  /* 오른쪽으로부터 20px */
  bottom: 30px;
  /* 아래쪽으로부터 20px */
  z-index: 1000;
  /* 다른 요소들 위에 표시 */
}

.floating-button button {
  /* 버튼 스타일링 */
  width: 60px;
  height: 60px;
  background-color: #007bff;
  color: white;
  border-radius: 50%;
  /* 원형 버튼 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  /* 그림자 효과 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  cursor: pointer;
  text-indent: -200px;
  overflow: hidden;
  background: url(../images/btn_share_whatsapp.svg) no-repeat center / contain;
  border: 0;
}

.top-bar-wrap {
  max-width: 1200px;
  width: 1200px;
}

.landing-about {
  position: relative;
}

.landing-hero {
  background: #F7EBD8;
}

.top-bar-wrap .appbar-language {
  margin-top: 0;
}

.container.landing {
  background: #fff;
  padding-bottom: 0rem;
}

.container.landing .language-change h2 {
  text-align: center;
}

.container.landing .navigation-bar {
  position: absolute;
}

.container.landing .top-bar {
  background: none;
  box-shadow: none;
}

.container.landing .bottom-sheet button {
  border: 0;
}

.landing-main {
  width: 100%;
}

.landing-about .hero-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.circle-ecossystem {
  width: 300px;
  height: 300px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle-ecossystem .circle-logo {
  position: absolute;
  width: 400px;
}

.circle-ecossystem .circle-item {
  position: absolute;
  width: 400px;
}

.landing-plans section,
.landing-about section,
.landing-qa section {
  flex-direction: column;
}

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.hero-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: rgba(0, 174, 255, 1);
  overflow: hidden;
  position: relative;
  height: 600px;
}

.hero-wrap::after {
  background: rgba(255, 81, 0, 1);
  content: "";
  width: 50%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0
}

.hero-video {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
  overflow: hidden;
  max-width: 1400px;
  overflow: hidden;
  height: 100%;
}

.hero-video .hero-video-center {
  position: absolute;
  z-index: 1;
  width: 100%;

}

.hero-video::after {
  content: "";
  width: 100%;
  height: 600px;
  position: absolute;
  background: linear-gradient(to right, rgba(255, 81, 0, 0.6), rgba(0, 174, 255, 0.6));
  z-index: 1;
  overflow: hidden;
}

.hero-video .full-size {
  width: 100%;
}

.hero-left {
  max-height: 500px;
  height: 100vh;
  flex: 0 0 0%;
  background: rgba(255, 81, 0, 1);
  left: 0;
}

.hero-left::after {
  content: "";
  width: 20%;
  height: 600px;
  position: absolute;
  background: linear-gradient(to right, rgba(0, 174, 255, 1.0), rgba(255, 81, 0, 0));
  z-index: 2;
  left: 0;
  top: 0
}

.hero-right {
  right: 0;
  max-height: 500px;
  height: 100vh;
  background: rgba(0, 174, 255, 1);
  flex: 0 0 0%;
  top: 0
}

.hero-right::after {
  right: 0;
  content: "";
  width: 20%;
  height: 600px;
  position: absolute;
  background: linear-gradient(to left, rgba(255, 81, 0, 1.0), rgba(0, 174, 255, 0));
  z-index: 2;
  right: 0;
  top: 0
}

.hero-center {
  height: 400px;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
}

.hero-image-bg {
  width: 100%;
  background: url('../images/landing-visual-01-1.png') no-repeat bottom right / contain;
  background-size: 80%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.hero-image-bg::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 400px;
  background: #f7ebd8;
  z-index: 0;
  opacity: 0.6;
}

.hero-content {
  position: absolute;
  width: 50%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  top: 100px;
  left: 20px;
}

.landing h1,
.landing h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.landing h1 {
  font-size: 36px;
  margin-bottom: 1rem;
  color: var(--landing-text-color);
}

.landing .hero-content h4 {
  line-height: 150%;
  font-weight: 400;
  font-size: 16px;
  padding-bottom: 30px;
  color: var(--landing-text-color);
  opacity: 0.8;
}

.hero-video-center-intro {
  z-index: 1000;
  display: flex;
  flex-direction: column;
  text-align: center;
  z-index: 2;
}

.hero-video-center-intro h1 {
  color: #fff;
  font-size: 48px;
}

.hero-video-center-intro h4 {
  color: #fff;
  font-size: 16px;
  line-height: 130%;
}


.hero-video-center-intro p {
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
  color: #fff;
}


.omnyx-emblem {
  width: 80px;
  animation: scaleIn 0.8s ease-out forwards;
  text-align: center;
}

.hero-video-center-intro-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.landing h2 {
  font-size: 23px;
}

.hero p {
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
}

.cta {
  display: inline-block;
  padding: 16px 24px;
  background-color: var(--primary-color);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  transition: background 0.3s ease;
  font-size: 1.6rem;
}

.cta:hover {
  background-color: #e46463;
}

.landing-wide {
  width: 100%;
  margin: 0 auto;
}

.landing-section {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  padding: 50px 0px;
}

.landing-hero .landing-section {
  padding: 0 0px;
}

.landing-wide-center {
  background: var(--text-50-color);
}

.landing-section-title {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 10px;
  text-align: center;
}

.landing-section-title h2 {
  color: var(--landing-text-color);
  padding-bottom: 30px;
  font-size: 34px;
}

.landing-section-title h3 {
  text-align: center;
  line-height: 150%;
  color: var(--landing-text-color);
  font-weight: 400;
  font-size: 16px;
}

.about-wrap {
  height: 420px;
  display: flex;
}

.about-wrap .about-wrap-box {
  flex: 1;
  margin-top: 140px;
  color: #fff;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  line-height: 150%;
  align-items: center;
  font-weight: 400;
  justify-content: space-evenly;
}

.about-wrap .about-wrap-box h3 {
  font-size: 24px;
  padding-bottom: 10px;
  text-align: center;
}

.about-wrap .about-wrap-box em {
  display: block;
  font-size: 14px;
}

.about-wrap .about-wrap-box p {
  font-size: 14px;
  text-align: center;
  line-height: 130%;
  padding-bottom: 10px;
  font-weight: 400;
}

.about-wrap .about-wrap-box.wholeslae p {
  color: #00315E;
}

.about-wrap .about-wrap-box.retail p {
  color: #680103;
}


.about-wrap .about-wrap-box.wholeslae {
  background: var(--secondary-color);
  padding: 20px 150px 20px 40px;
}

.about-wrap .about-wrap-box.retail {
  background: var(--primary-color);
  padding: 20px 40px 20px 150px;
}

.landing-about-phone {
  position: absolute;
  bottom: 50px;
  height: 400px;
  width: 100%;
  background: url('../images/landing-about-phone.png') no-repeat center / contain;
  left: 0;
  z-index: 2;
  pointer-events: none;
}


.landing-function-list {
  display: flex;
  width: 100%;
  background: #Fff;
  height: 445px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: var(--box-shadow);
}

.tab-accordion-content {
  padding: 20px;
  font-size: 16px;
}

/* 기본적으로 모든 콘텐츠와 뷰를 숨깁니다. */
.tab-accordion-content,
.tab-accordion-view-content {
  display: none;
}

/* 활성화된 탭 아이템에만 스타일 적용 */
.tab-accordion-item.active {
  background: #E6F7FF;
}

.tab-accordion-item.active .tab-accordion-content {
  display: block;
  /* 탭 콘텐츠 활성화 */
}

/* 활성화된 뷰 콘텐츠만 보이게 합니다. */
.tab-accordion-view-content.active {
  display: block;
}

.tab-accordion-view-img {
  border-radius: 12px;
  max-height: 100%;
  width: auto;
  display: block;
}

.tab-accordion-view-video {
  border-radius: 12px;
  /* max-height: 100%; */
  width: calc(100% - 40px);
  display: block;
}

/* 탭 헤더 스타일링 (선택 사항) */
.tab-accordion-header {
  cursor: pointer;
  padding: 15px;
  border-top: 1px solid var(--text-100-color);
  transition: all 0.3s ease;
  font-size: 17px;
  position: relative;
}

.tab-accordion-header::after {
  transform: rotate(0deg);
  background: url('../images/ico-arrow-down.svg') no-repeat right / contain;
  content: "";
  width: 28px;
  height: 28px;
  position: absolute;
  top: 10px;
  right: 10px;
  transition: transform 0.3s ease;
}

.tab-accordion-header.active {
  font-weight: 600;
}

.tab-accordion-header.active::after {
  transform: rotate(-180deg);
  background: url('../images/ico-arrow-down.svg') no-repeat right / contain;
  content: "";
  width: 28px;
  height: 28px;
  position: absolute;
  top: 10px;
  right: 10px;
}

.tab-accordion {
  flex: 0 0 50%;
}

.tab-accordion-view {
  width: 100%;
  padding: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tab-accordion-view div {
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.cta-buttons {
  display: flex;
  gap: 10px;
  padding-top: 10px;
  justify-content: center;
  align-items: center;

}

.cta-buttons a.btn {
  background: (--primary-color);
  padding: 14px 20px 14px 20px;
  font-size: 17px;
  border-radius: 30px;
  display: block;
  width: auto;
  text-align: center;
  box-shadow: var(--box-shadow);
  min-width: 150px;
  border: 1px solid var(--primary-color);
  color: #fff;
}

.cta-buttons button.btn {
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 30px;
  display: block;
  min-width: 200px;
  width: auto;
  text-align: center;
  background: none;
  color: #fff;
  border: 1px solid #fff;
  font-weight: 400;
}

.landing-hero .cta-buttons button.btn {
  background-color: var(--primary-color);
}


.landing-section ul {
  padding-top: 20px
}

.landing-section li {
  font-size: 16px;
}

.cta-footer {
  padding: 40px 20px;
  text-align: center;
}

.benefits div {
  margin: 20px 0;
}

.cta-footer {
  background-color: #181818;
  color: white;
}

.cta-footer .cta.dark {
  background-color: white;
  color: #181818;
}

.sticky-nav {
  position: sticky;
  top: 0;
  z-index: 999;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid #eee;
}

.sticky-nav .logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #111;
}

.sticky-nav .nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sticky-nav .nav-links a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
}

.subscription-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.subscription-column {
  flex: 1 1 100%;
  border: 1px solid #ddd;
}

.subscription-title {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 20px;
  font-weight: 600;
}

.subscription-box {
  padding: 12px;
}

.plan-title {
  font-weight: bold;
}

.plan-description {
  font-size: 12px;
  color: #666;
}

.row-title {
  background: #f9f9f9;
  font-weight: 600;
}

.subscription-table td {
  padding: 1rem;
}

.subscription-plan {
  display: flex;
  gap: 20px;
  padding: 2rem;
}

.subscription-plan .plan-box-title {
  padding: 2rem;
  text-align: left;
  position: relative;
}

.subscription-plan .plan-box-title .icon {
  width: 40px;
  height: 40px;
  background: url('../images/landing-icon01.svg') no-repeat center / contain;
}

.subscription-plan .plan-box-title .icon.basic {
  background: url('../images/landing-icon02.svg') no-repeat center / contain;
}

.subscription-plan .plan-box-title .icon.plus {
  background: url('../images/landing-icon03.svg') no-repeat center / contain;
}

.subscription-plan .plan-box-title .suggestion {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 14px;
  padding: 5px 10px;
  background: var(--primary-color);
  color: #fff;
  border-radius: 20px;
}

.subscription-plan .plan-box-title h5 {
  font-size: 20px;
  font-weight: 600;
  color: var(--primary-color);
  padding-bottom: 2px;
}

.subscription-plan .plan-box-title p {
  font-size: 14px;
  color: var(--admin-primary-color);
}

.subscription-plan .plan-box-title h4 {
  font-size: 4rem;
  color: var(--admin-point-color);
}

.subscription-plan .plan-box-btn {
  padding: 10px 30px 40px 30px;
}

.subscription-plan .plan-box-btn button {
  padding: 16px;
  border-radius: 30px;
  background: var(--primary-80-color);
  color: #fff;
  font-size: 16px;
  border: 0;
}

.subscription-plan .plan-price {
  padding: 20px 0 0 0;
}

.subscription-plan .plan-price em {
  font-size: 16px;
  padding-right: 6px;
  color: var(--primary-color);
  font-weight: 500;
}

.subscription-plan .plan-price span {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.subscription-plan .plan-box {
  flex: 1;
  border: 1px solid var(--text-200-color);
  border-radius: 20px;
  box-shadow: var(--box-shadow);
  padding-bottom: 2rem;
}

.subscription-plan .plan-box .custom {
  padding: 30px 10px 20px 10px;
  display: block;
  text-align: center;
}

.subscription-plan .plan-box .custom span {
  text-align: center;
}

.subscription-plan .plan-box .custom em {
  display: block;
  font-size: 14px;
  color: var(--primary-color);
  font-weight: 400;
}

.subscription-plan .plan-box .custom button {
  width: auto;
  padding: 5px 10px;
  margin-top: 10px;
  border-color: var(--primary-color);
  color: var(--primary-color);
}


.subscription-plan .plan-box.basic {
  border: 1px solid var(--primary-color);
  box-shadow: 0px 0px 10px rgba(255, 81, 0, 0.6);
}

.plan-box-list li {
  padding: 0.5rem 2rem;
  font-size: 1.4rem;
  display: flex;
  text-align: left;
}

.plan-box-list li span {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-indent: -1000px;
  overflow: hidden;
  padding-right: 10px;
}

.supported {
  background: url('../images/ico-support-1.svg') no-repeat;
}

.not-supported {
  background: url('../images/ico-not-support.svg') no-repeat;
}

.plan-box-list li:nth-child(odd) {
  background-color: #f9f9f9;
}

.landing-section p {
  font-size: 1.6rem;
  color: var(--text-600-color);
  line-height: 130%;
}

.cta-footer p {
  padding-bottom: 2rem;
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--text-400-color);
}


.ani-logo {
  border: 1px solid #000;
  width: 200px;
  height: 200px;
  background: #005285;
}


.landing-wide section,
footer.cta-footer {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeSlideUp 1s ease-out forwards;
  animation-fill-mode: both;
}

.landing-wide section:nth-of-type(1) {
  animation-delay: 0s;
}

.landing-wide section:nth-of-type(2) {
  animation-delay: 0.3s;
}

.landing-wide section:nth-of-type(3) {
  animation-delay: 0.6s;
}

.landing-wide section:nth-of-type(4) {
  animation-delay: 0.9s;
}

.landing-qa .qa-wrap {
  font-size: 16px;
}

.landing-qa .qa-wrap .answer {
  padding: 10px;
  font-size: 17px;
  line-height: 130%;
  width: calc(100% - 30px);
}

.landing-qa .accordion-header {
  padding: 10px;
  width: 100%;
  display: block;
}

.landing-qa .accordion-header h3 {
  display: block;
  width: calc(100% - 30px);
}

.landing-qa .accordion-header .open {
  color: var(--primary-color);
}

.landing-qa .accordion-item {
  border-radius: 0;
  border: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--text-100-color);
  margin-bottom: 10px;
}

.wholesale-menu-box.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: all;
}

.wholesale-menu-box.disabled {
  border: 0
}

.break {
  display: none;
}


/* 랜딩 Swiper 컨테이너의 기본 스타일 */
.custom-swiper {
  width: 100%;
  padding: 30px 0;
  position: relative;
}

.custom-swiper .swiper-slide {
  height: 370px;
  background-color: #fff;
  border-radius: 10px;
  opacity: 0.5;
  transition: all 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.custom-swiper .swiper-slide:last-child {
  margin-right: 0;
}

.custom-swiper .swiper-slide-active {
  opacity: 1;
  transform: scale(1.1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.custom-swiper .swiper-slide .swiper-slide-content {
  padding: 20px;
  text-align: center;
}

.custom-swiper .swiper-slide .swiper-slide-content h3 {
  padding-bottom: 10px;
  font-weight: 600;
  font-size: 20px;
}

.swiper-slid-video {
  width: 90%;
}

.custom-swiper .swiper-slide .support-01,
.custom-swiper .swiper-slide .support-02,
.custom-swiper .swiper-slide .support-03,
.custom-swiper .swiper-slide .support-04,
.custom-swiper .swiper-slide .support-05,
.custom-swiper .swiper-slide .support-06 {
  background: url('../images/landing-function02-1.png') no-repeat bottom;
  background-size: 70%;
  height: calc(100% - 80px);
}

.custom-swiper .swiper-slide .support-02 {
  background: url('../images/landing-function02-2.png') no-repeat bottom;
  background-size: 70%;
}

.custom-swiper .swiper-slide .support-03 {
  background: url('../images/landing-function02-3.png') no-repeat bottom;
  background-size: 70%;
}

.custom-swiper .swiper-slide .support-04 {
  background: url('../images/landing-function02-4.png') no-repeat bottom;
  background-size: 70%;
}

.custom-swiper .swiper-slide .support-05 {
  background: url('../images/landing-function02-5.png') no-repeat bottom;
  background-size: 70%;
}

.custom-swiper .swiper-slide .support-06 {
  background: url('../images/landing-function02-6.png') no-repeat bottom;
  background-size: 70%;
}

.custom-swiper::before,
.custom-swiper::after {
  content: "";
  position: absolute;
  top: 0;
  width: 80px;
  /* 그라데이션 넓이 */
  height: 100%;
  z-index: 10;
  pointer-events: none;
  /* 클릭 막지 않음 */
}

.custom-swiper::before {
  left: 0;
  background: linear-gradient(to right, #f3f3f3, rgba(255, 255, 255, 0));
}

.custom-swiper::after {
  right: 0;
  background: linear-gradient(to left, #f3f3f3, rgba(255, 255, 255, 0));
}

.landing-function .swiper-pagination {
  padding-top: 50px;
  position: relative;
}

.landing-function .landing-section {
  padding-bottom: 10px;
}



/* 랜딩 미디어쿼리 */
@media (max-width: 1040px) {

  .hero-wrap {
    height: 500px
  }

  .hero-video .hero-video-center {
    width: 140%;
  }

  .hero-video-center-intro h1 {
    font-size: 30px;
  }

  .landing-about-phone {
    display: none;
  }

  .about-wrap .about-wrap-box {
    padding: 10px !important;
    margin-top: 20px;
    height: 210px;
  }

  .about-wrap {
    height: auto;
  }

  .hero-center,
  .hero-image-bg::before {
    height: 300px;
  }

  .hero-content {
    top: 30px;
  }

  .hero-content {
    width: 80%;
  }
}

@media (max-width: 768px) {
  .landing-function-list .tab-accordion {
    flex: 0 0 100%;
  }

  .landing-function-list {
    height: auto;
  }

  .tab-accordion-view {
    padding: 20px 0 0 0;
  }

  .subscription-plan {
    display: block;
  }

  .subscription-plan .plan-box {
    margin-bottom: 20px;
  }
}

@media (max-width: 580px) {
  .hero-wrap {
    height: 450px
  }

  .hero-video .hero-video-center {
    width: 180%;
  }

  .about-wrap {
    display: block;
  }

  .about-wrap .about-wrap-box.retail {
    margin-top: 0px;
  }

}

@media (max-width: 490px) {
  .hero-wrap {
    height: 450px
  }

  .hero-video .hero-video-center {
    width: 200%;
  }

  .landing-section-title h2 {
    font-size: 28px;
  }

}


/* 애니메이션 */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes slide-up {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rotateClockwise {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(100deg);
  }
}

@keyframes dash {
  to {
    stroke-dashoffset: -10;
  }
}


@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.7);
  }

  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 10px rgba(244, 67, 54, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
  }
}


/* 크기가 살짝 커졌다 작아졌다 하는 효과 */
@keyframes pulse-2 {

  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 106, 72, 0.7);
  }

  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 10px rgba(244, 67, 54, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
  }
}