sake/src/main/resources/static/admin/css/style.css

@charset "UTF-8";
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: "Noto Sans KR", "Malgun Gothic", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color: #030507;
  letter-spacing: -0.02em;
  font-size: 14px;
}

canvas,
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
}

main {
  display: block;
}

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

pre {
  font-family: monospace, monospace;
  font-size: inherit;
}

address {
  font-style: inherit;
}

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: inherit;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit;
}

button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default;
}

:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

option {
  padding: 0;
}

fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

[type=number] {
  -moz-appearance: textfield;
}

label[for] {
  cursor: pointer;
}

details {
  display: block;
}

summary {
  display: list-item;
}

[contenteditable]:focus {
  outline: auto;
}

table {
  border-color: inherit;
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

@font-face {
  font-family: "Noto Sans KR";
  src: local("Noto Sans KR Thin"), url(../fonts/NotoSansKR-Thin.otf) format("opentype");
  font-weight: 100;
}
@font-face {
  font-family: "Noto Sans KR";
  src: local("Noto Sans KR Light"), url(../fonts/NotoSansKR-Light.otf) format("opentype");
  font-weight: 300;
}
@font-face {
  font-family: "Noto Sans KR";
  src: local("Noto Sans KR Regular"), url(../fonts/NotoSansKR-Regular.otf) format("opentype");
  font-weight: 400;
}
@font-face {
  font-family: "Noto Sans KR";
  src: local("Noto Sans KR Medium"), url(../fonts/NotoSansKR-Medium.otf) format("opentype");
  font-weight: 500;
}
@font-face {
  font-family: "Noto Sans KR";
  src: local("Noto Sans KR Bold"), url(../fonts/NotoSansKR-Bold.otf) format("opentype");
  font-weight: 700;
}
@font-face {
  font-family: "Noto Sans KR";
  src: local("Noto Sans KR Black"), url(../fonts/NotoSansKR-Black.otf) format("opentype");
  font-weight: 900;
}
.clearfix::after {
  clear: both;
  content: "";
  display: table;
}

.hide-text {
  overflow: hidden;
  padding: 0;
  text-indent: 101%;
  white-space: nowrap;
}

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

caption {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.w-full {
  width: 100% !important;
}

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

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

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

.break-all {
  word-break: break-all !important;
}

.keep-all {
  word-break: keep-all !important;
}

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

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

.v-align-bottom {
  vertical-align: bottom !important;
}

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

.d-flex {
  display: flex !important;
}

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

.d-grid {
  display: grid !important;
}

.flex-col {
  flex-direction: column !important;
}

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

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

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

.align-items-stretch {
  align-items: stretch !important;
}

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

.justify-between {
  justify-content: space-between !important;
}

.justify-start {
  justify-content: flex-start !important;
}

.justify-end {
  justify-content: flex-end !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

gap-0 {
  gap: 0 !important;
}

.gap-1 {
  gap: 1px !important;
}

.gap-2 {
  gap: 2px !important;
}

.gap-3 {
  gap: 3px !important;
}

.gap-4 {
  gap: 4px !important;
}

.gap-5 {
  gap: 5px !important;
}

.gap-10 {
  gap: 10px !important;
}

.gap-15 {
  gap: 15px !important;
}

.gap-20 {
  gap: 20px !important;
}

.gap-30 {
  gap: 30px !important;
}

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

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

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

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

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

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

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

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

.ml-2 {
  margin-left: 2px !important;
}

.ml-3 {
  margin-left: 3px !important;
}

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

.ml-5 {
  margin-left: 5px !important;
}

.ml-8 {
  margin-left: 8px !important;
}

.ml-10 {
  margin-left: 10px !important;
}

.ml-15 {
  margin-left: 15px !important;
}

.mr-0 {
  margin-right: 0 !important;
}

.mr-2 {
  margin-right: 2px !important;
}

.mr-3 {
  margin-right: 3px !important;
}

.mr-4 {
  margin-right: 4px !important;
}

.mr-5 {
  margin-right: 5px !important;
}

.mr-8 {
  margin-right: 8px !important;
}

.mr-10 {
  margin-right: 10px !important;
}

.mr-15 {
  margin-right: 15px !important;
}

.mr-20 {
  margin-right: 20px !important;
}

.mx-2 {
  margin-left: 2px !important;
  margin-right: 2px !important;
}

.mx-3 {
  margin-left: 3px !important;
  margin-right: 3px !important;
}

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

.mx-5 {
  margin-left: 5px !important;
  margin-right: 5px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

.mb-0 {
  margin-bottom: 0 !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.fs-0 {
  font-size: 0 !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

.fw-500 {
  font-weight: 500 !important;
}

.fw-700 {
  font-weight: 700 !important;
}

.overflow-y-auto {
  overflow-y: auto !important;
}

.min-h-100 {
  min-height: 100px !important;
}

.min-h-200 {
  min-height: 200px !important;
}

.gray-0 {
  color: #f8f9fa !important;
}

.gray-1 {
  color: #f1f3f5 !important;
}

.gray-2 {
  color: #e9ecef !important;
}

.gray-3 {
  color: #dee2e6 !important;
}

.gray-4 {
  color: #ced4da !important;
}

.gray-5 {
  color: #adb5bd !important;
}

.gray-6 {
  color: #868e96 !important;
}

.gray-7 {
  color: #495057 !important;
}

.gray-8 {
  color: #343a40 !important;
}

.gray-9 {
  color: #212529 !important;
}

.gray-10 {
  color: #16191d !important;
}

.gray-11 {
  color: #0d0f12 !important;
}

.gray-12 {
  color: #030507 !important;
}

.stone-0 {
  color: #f8fafb !important;
}

.stone-1 {
  color: #f2f4f6 !important;
}

.stone-2 {
  color: #ebedef !important;
}

.stone-3 {
  color: #e0e4e5 !important;
}

.stone-4 {
  color: #d1d6d8 !important;
}

.stone-5 {
  color: #b1b6b9 !important;
}

.stone-6 {
  color: #979b9d !important;
}

.stone-7 {
  color: #7e8282 !important;
}

.stone-8 {
  color: #666968 !important;
}

.stone-9 {
  color: #50514f !important;
}

.stone-10 {
  color: #3a3a37 !important;
}

.stone-11 {
  color: #252521 !important;
}

.stone-12 {
  color: #121210 !important;
}

.red-0 {
  color: #fff5f5 !important;
}

.red-1 {
  color: #ffe3e3 !important;
}

.red-2 {
  color: #ffc9c9 !important;
}

.red-3 {
  color: #ffa8a8 !important;
}

.red-4 {
  color: #ff8787 !important;
}

.red-5 {
  color: #ff6b6b !important;
}

.red-6 {
  color: #fa5252 !important;
}

.red-7 {
  color: #f03e3e !important;
}

.red-8 {
  color: #e03131 !important;
}

.red-9 {
  color: #c92a2a !important;
}

.red-10 {
  color: #b02525 !important;
}

.red-11 {
  color: #962020 !important;
}

.red-12 {
  color: #7d1a1a !important;
}

.pink-0 {
  color: #fff0f6 !important;
}

.pink-1 {
  color: #ffdeeb !important;
}

.pink-2 {
  color: #fcc2d7 !important;
}

.pink-3 {
  color: #faa2c1 !important;
}

.pink-4 {
  color: #f783ac !important;
}

.pink-5 {
  color: #f06595 !important;
}

.pink-6 {
  color: #e64980 !important;
}

.pink-7 {
  color: #d6336c !important;
}

.pink-8 {
  color: #c2255c !important;
}

.pink-9 {
  color: #a61e4d !important;
}

.pink-10 {
  color: #8c1941 !important;
}

.pink-11 {
  color: #731536 !important;
}

.pink-12 {
  color: #59102a !important;
}

.blue-0 {
  color: #e7f5ff !important;
}

.blue-1 {
  color: #d0ebff !important;
}

.blue-2 {
  color: #a5d8ff !important;
}

.blue-3 {
  color: #74c0fc !important;
}

.blue-4 {
  color: #4dabf7 !important;
}

.blue-5 {
  color: #339af0 !important;
}

.blue-6 {
  color: #228be6 !important;
}

.blue-7 {
  color: #1c7ed6 !important;
}

.blue-8 {
  color: #1971c2 !important;
}

.blue-9 {
  color: #1864ab !important;
}

.blue-10 {
  color: #145591 !important;
}

.blue-11 {
  color: #114678 !important;
}

.blue-12 {
  color: #0d375e !important;
}

.green-0 {
  color: #ebfbee !important;
}

.green-1 {
  color: #d3f9d8 !important;
}

.green-2 {
  color: #b2f2bb !important;
}

.green-3 {
  color: #8ce99a !important;
}

.green-4 {
  color: #69db7c !important;
}

.green-5 {
  color: #51cf66 !important;
}

.green-6 {
  color: #40c057 !important;
}

.green-7 {
  color: #37b24d !important;
}

.green-8 {
  color: #2f9e44 !important;
}

.green-9 {
  color: #2b8a3e !important;
}

.green-10 {
  color: #237032 !important;
}

.green-11 {
  color: #1b5727 !important;
}

.green-12 {
  color: #133d1b !important;
}

.purple-0 {
  color: #f8f0fc !important;
}

.purple-1 {
  color: #f3d9fa !important;
}

.purple-2 {
  color: #eebefa !important;
}

.purple-3 {
  color: #e599f7 !important;
}

.purple-4 {
  color: #da77f2 !important;
}

.purple-5 {
  color: #cc5de8 !important;
}

.purple-6 {
  color: #be4bdb !important;
}

.purple-7 {
  color: #ae3ec9 !important;
}

.purple-8 {
  color: #9c36b5 !important;
}

.purple-9 {
  color: #862e9c !important;
}

.purple-10 {
  color: #702682 !important;
}

.purple-11 {
  color: #5a1e69 !important;
}

.purple-12 {
  color: #44174f !important;
}

.orange-0 {
  color: #fff4e6 !important;
}

.orange-1 {
  color: #ffe8cc !important;
}

.orange-2 {
  color: #ffd8a8 !important;
}

.orange-3 {
  color: #ffc078 !important;
}

.orange-4 {
  color: #ffa94d !important;
}

.orange-5 {
  color: #ff922b !important;
}

.orange-6 {
  color: #fd7e14 !important;
}

.orange-7 {
  color: #f76707 !important;
}

.orange-8 {
  color: #e8590c !important;
}

.orange-9 {
  color: #d9480f !important;
}

.orange-10 {
  color: #bf400d !important;
}

.orange-11 {
  color: #99330b !important;
}

.orange-12 {
  color: #802b09 !important;
}

.yellow-0 {
  color: #fff9db !important;
}

.yellow-1 {
  color: #fff3bf !important;
}

.yellow-2 {
  color: #ffec99 !important;
}

.yellow-3 {
  color: #ffe066 !important;
}

.yellow-4 {
  color: #ffd43b !important;
}

.yellow-5 {
  color: #fcc419 !important;
}

.yellow-6 {
  color: #fab005 !important;
}

.yellow-7 {
  color: #f59f00 !important;
}

.yellow-8 {
  color: #f08c00 !important;
}

.yellow-9 {
  color: #e67700 !important;
}

.yellow-10 {
  color: #b35c00 !important;
}

.yellow-11 {
  color: #804200 !important;
}

.yellow-12 {
  color: #663500 !important;
}

.teal-0 {
  color: #e6fcf5 !important;
}

.teal-1 {
  color: #c3fae8 !important;
}

.teal-2 {
  color: #96f2d7 !important;
}

.teal-3 {
  color: #63e6be !important;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 22px;
  min-width: 110px;
  min-height: 40px;
  border-radius: 5px;
  font-size: 15px;
  text-align: center;
  border: 1px solid transparent;
  background-color: #ffffff;
  color: #16191d;
  font-weight: 500;
  letter-spacing: inherit;
  justify-content: center;
  word-break: keep-all;
  line-height: 1.2;
}
.btn:disabled {
  background-color: #d1d6d8 !important;
  color: #7e8282 !important;
  cursor: not-allowed !important;
}
.btn.outline {
  background-color: #ffffff;
  border-color: #ced4da;
}
.btn.outline:hover, .btn.outline.active {
  background-color: #f8f8f8;
}
.btn.outline:disabled {
  background-color: #f2f4f6 !important;
  color: #979b9d !important;
  cursor: not-allowed !important;
  border-color: #b1b6b9 !important;
}
.btn.xxsm {
  min-height: 24px;
  padding: 0 6px;
  min-width: 0;
  font-size: 12px;
  font-weight: 400;
  border-radius: 3px;
  gap: 3px;
  text-decoration: none;
}
.btn.xsm {
  min-height: 34px;
  padding: 0 14px;
  min-width: 0;
  font-size: 14px;
  font-weight: 400;
}
.btn.sm {
  min-height: 36px;
  padding: 0 18px;
  min-width: 80px;
  font-size: 14px;
  font-weight: 400;
}
.btn.lg {
  min-height: 48px;
  padding: 0 48px;
  min-width: 120px;
  font-size: 18px;
  font-weight: 500;
}
.btn.block {
  display: block;
}
.btn.full {
  width: 100%;
}
.btn.no-min {
  min-width: 0;
}
.btn.light-gray {
  background-color: #ebedef;
}
.btn.light-gray:hover {
  background-color: #e0e4e5;
}
.btn.dark {
  background-color: #666968;
  color: #ffffff;
  font-weight: 500;
}
.btn.dark:hover {
  background-color: #5e6160;
}
.btn.dark.outline {
  border-color: #666968;
  color: #666968;
  background-color: #ffffff;
}
.btn.dark.outline:hover, .btn.dark.outline.active {
  background-color: #f5f5f5;
}
.btn.primary {
  background-color: #228be6;
  color: #ffffff;
}
.btn.primary:hover {
  background-color: #1c7ed6;
}
.btn.primary.outline {
  border-color: #228be6;
  color: #228be6;
  background-color: #ffffff;
}
.btn.primary.outline:hover, .btn.primary.outline.active {
  background-color: #f5f5f5;
}
.btn.search-detail:after {
  position: relative;
  top: 3px;
  content: "";
  display: inline-block;
  color: #495057;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 5px solid;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid transparent;
}
.btn.search-detail.opened:after {
  transform: rotate(180deg);
  top: -3px;
}
.btn.order-open-all::after {
  position: relative;
  top: 2px;
  content: "";
  display: inline-block;
  color: #495057;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid transparent;
}
.btn.order-open-all.opened:after {
  transform: rotate(180deg);
  top: -2px;
}
.dateRange-btnContainer {
  display: flex;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}
.dateRange-btnContainer .dateRange-btn {
  position: relative;
  height: 36px;
  padding: 0 9px;
  text-align: center;
  border-right: 1px solid #dee2e6;
  background-color: #ffffff;
  color: #495057;
  font-size: 13px;
}
.dateRange-btnContainer .dateRange-btn:first-child {
  border-radius: 4px 0 0 4px;
}
.dateRange-btnContainer .dateRange-btn:last-child {
  border-color: transparent;
  border-radius: 0 4px 4px 0;
}
.dateRange-btnContainer .dateRange-btn.selected {
  color: #339af0;
  font-weight: 500;
}
.dateRange-btnContainer .dateRange-btn.selected::after {
  z-index: 1;
  position: absolute;
  content: "";
  display: block;
  border: 1px solid #339af0;
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  right: -1px;
}
.dateRange-btnContainer .dateRange-btn.selected:first-child::after {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  left: -1px;
}
.dateRange-btnContainer .dateRange-btn.selected:last-child::after {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  right: -2px;
}
.dateRange-btnContainer .dateRange-btn:disabled {
  color: #868e96;
  background-color: #f1f3f5;
  cursor: not-allowed;
}

.form-control-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.form-control-container .left,
.form-control-container .center,
.form-control-container .right {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.form-control-container .center {
  margin: 0 auto;
}
.form-control-container__top-right {
  position: absolute;
  top: 20px;
  right: 30px;
}

.circle-btn {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #7e8282;
}
.circle-btn.delete::before {
  position: absolute;
  content: "";
  display: block;
  width: 11px;
  height: 2px;
  background-color: #ffffff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.circle-btn.add::before {
  position: absolute;
  content: "";
  display: block;
  width: 11px;
  height: 2px;
  background-color: #ffffff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.circle-btn.add::after {
  position: absolute;
  content: "";
  display: block;
  width: 2px;
  height: 11px;
  background-color: #ffffff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.circle-btn:hover {
  background-color: #666968;
}

.text-btn {
  text-decoration: underline;
  padding: 4px 2px;
}

.icon {
  font-style: normal;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}
.icon_notification {
  background-image: url("../images/icon_notification.png");
  width: 24px;
  height: 24px;
}
.icon_user-info {
  background-image: url("../images/icon_user-info.png");
  width: 27px;
  height: 27px;
}
.icon_user-info-big {
  background-image: url(../images/icon_user-info.png);
  width: 46px;
  height: 46px;
}
.icon_logout {
  background-image: url("../images/icon_logout.png");
  width: 16px;
  height: 16px;
}
.icon_link {
  background-image: url("../images/icon_link.png");
  width: 13px;
  height: 13px;
}
.icon_headerSetting {
  background-image: url("../images/icon_headerSetting.png");
  width: 14px;
  height: 14px;
}
.icon_headerCart {
  background-image: url("../images/icon_headerCart.png");
  width: 14px;
  height: 14px;
}
.icon_headerLaptop {
  background-image: url("../images/icon_headerLaptop.png");
  width: 14px;
  height: 14px;
}
.icon_excel {
  background-image: url("../images/icon_excel.png");
  width: 16px;
  height: 16px;
}
.icon_important-order {
  background-image: url("../images/icon_important-order.png");
  width: 18px;
  height: 18px;
}
.icon_important-order.normal {
  background-position: -18px 0;
}
.icon_print {
  background-image: url("../images/icon_print.png");
  width: 16px;
  height: 16px;
}
.icon_window {
  background-image: url("../images/icon_window.png");
  width: 16px;
  height: 16px;
}
.icon_unfold {
  background-image: url("../images/icon_unfold.png");
  width: 16px;
  height: 16px;
}
.icon_word-badge01 {
  background-image: url("../images/icon_word-badge01.png");
  width: 14px;
  height: 14px;
}
.icon_word-badge02 {
  background-image: url("../images/icon_word-badge02.png");
  width: 14px;
  height: 14px;
}
.icon_word-badge03 {
  background-image: url("../images/icon_word-badge03.png");
  width: 13px;
  height: 13px;
}
.icon_word-badge04 {
  background-image: url("../images/icon_word-badge04.png");
  width: 13px;
  height: 13px;
}
.icon_word-badge05 {
  background-image: url("../images/icon_word-badge05.png");
  width: 13px;
  height: 13px;
}
.icon_word-badge06 {
  background-image: url("../images/icon_word-badge06.png");
  width: 13px;
  height: 13px;
}
.icon_word-badge07 {
  background-image: url("../images/icon_word-badge07.png");
  width: 13px;
  height: 13px;
}
.icon_word-badge08, .icon_word-badge_naver {
  background-image: url("../images/icon_word-badge08.png");
  width: 13px;
  height: 13px;
}
.icon_word-badge09 {
  background-image: url("../images/icon_word-badge09.png");
  width: 13px;
  height: 13px;
}
.icon_word-badge10 {
  background-image: url("../images/icon_word-badge10.png");
  width: 18px;
  height: 18px;
}
.icon_word-badge11 {
  background-image: url("../images/icon_word-badge11.png");
  width: 18px;
  height: 18px;
}
.icon_word-badge12 {
  background-image: url("../images/icon_word-badge12.png");
  width: 13px;
  height: 13px;
}
.icon_word-badge13 {
  background-image: url("../images/icon_word-badge13.png");
  width: 13px;
  height: 13px;
}
.icon_word-badge14 {
  background-image: url("../images/icon_word-badge14.png");
  width: 13px;
  height: 13px;
}
.icon_word-badge15 {
  background-image: url("../images/icon_word-badge15.png");
  width: 18px;
  height: 18px;
}
.icon_word-badge16 {
  background-image: url("../images/icon_word-badge16.png");
  width: 13px;
  height: 13px;
}
.icon_word-badge_kcp {
  background-image: url("../images/icon_word-badge_kcp.png");
  width: 14px;
  height: 14px;
}
.icon_word-badge_pos {
  background-image: url("../images/icon_word-badge_pos.png");
  width: 26px;
  height: 14px;
}
.icon_word-badge_payco {
  background-image: url("../images/icon_word-badge_payco.png");
  width: 14px;
  height: 14px;
}
.icon_word-badge_toss {
  background-image: url("../images/icon_word-badge_toss.png");
  width: 14px;
  height: 14px;
}
.icon_word-badge_gcpay {
  background-image: url("../images/icon_word-badge_gcpay.png");
  width: 14px;
  height: 14px;
}
.icon_word-badge_kakao {
  background-image: url("../images/icon_word-badge_kakao.png");
  width: 14px;
  height: 14px;
}
.icon_word-badge-mileage {
  background-image: url("../images/icon_word-badge-mileage.png");
  width: 14px;
  height: 14px;
}
.icon_word-badge-point {
  background-image: url("../images/icon_word-badge-point.png");
  width: 14px;
  height: 14px;
}
.icon_gift-badge {
  background-image: url("../images/icon_gift-badge.png");
  width: 14px;
  height: 14px;
}
.icon_stats {
  background-image: url("../images/icon_stats.png");
  width: 12px;
  height: 12px;
}
.icon_reset {
  background-image: url("../images/icon_reset.png");
  width: 16px;
  height: 16px;
}
.icon_question {
  background-image: url("../images/icon_question.png");
  width: 18px;
  height: 18px;
}
.icon_info {
  background-image: url("../images/icon_info.png");
  width: 15px;
  height: 15px;
}
.icon_draggable {
  background-image: url("../images/icon_draggable.png");
  width: 24px;
  height: 24px;
}
.icon_file-list {
  width: 20px;
  height: 20px;
  background-image: url("../images/icon_file-list.png");
}
.icon_comment-user {
  width: 14px;
  height: 14px;
  background-image: url("../images/icon_comment-user.png");
}
.icon_new-badge {
  width: 12px;
  height: 12px;
  background-image: url("../images/icon_new-badge.png");
}
.icon_setting {
  width: 17px;
  height: 17px;
  background-image: url("../images/icon_setting.png");
}

.opened > .icon_unfold {
  transform: rotate(180deg);
}

.blocker {
  z-index: 102 !important;
  background-color: rgba(0, 0, 0, 0.35) !important;
  overflow: visible !important;
}

.modal {
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.45) !important;
}

.jquery-modal .modal {
  padding: 0;
}
.jquery-modal .modal a.close-modal {
  top: 16px;
  right: 16px;
  background-image: url("../images/icon_modal-close.png");
  width: 24px;
  height: 24px;
}
.jquery-modal .modal.no-header a.close-modal {
  background-image: url("../images/icon_modal-close-black.png");
  right: 48px;
}
.jquery-modal .modal-header {
  display: flex;
  align-items: center;
  height: 54px;
  font-weight: 700;
  background-color: #343a40;
  border-radius: 8px 8px 0 0;
  font-size: 22px;
  padding: 0 16px;
  color: #ffffff;
}
.jquery-modal .modal-header__sub-text {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}
.jquery-modal .modal-content {
  padding: 16px;
  max-height: 680px;
  overflow-y: auto;
}
.jquery-modal .modal-content .table-wrapper {
  margin-bottom: 16px;
}
.jquery-modal .modal-content .content-section {
  box-shadow: none;
  padding: 0 0 20px;
}
.jquery-modal .modal-footer {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 16px 12px;
  gap: 4px;
  box-shadow: 0 -1px 7px 0 rgba(0, 0, 0, 0.1);
  border-top: 1px solid #e9ecef;
}
.jquery-modal .modal.alert {
  padding: 18px 30px 12px;
  max-width: 400px;
}
.jquery-modal .modal.alert .close-modal {
  display: none;
}
.jquery-modal .modal .alert-content {
  text-align: center;
  padding-top: 8px;
  min-height: 52px;
}
.jquery-modal .modal .alert-content > p + p {
  margin-top: 16px;
}
.jquery-modal .modal .alert-content__text {
  font-size: 18px;
  font-weight: 700;
}
.jquery-modal .modal .alert-content__text--sm {
  font-size: 16px;
}
.jquery-modal .modal .alert-btn-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
  padding: 16px 0;
}
.jquery-modal .modal .alert-btn-container > * + * {
  margin-left: 8px;
}
.jquery-modal .modal .alert-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  max-width: 160px;
  text-align: center;
  height: 52px;
  background-color: #f1f3f5;
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
}
.jquery-modal .modal .alert-btn--confirm {
  background-color: #343a40;
  color: #ffffff;
}
.jquery-modal .modal .alert-btn--cancel {
  background-color: #7e8282;
  color: #ffffff;
}
.jquery-modal .modal .alert-btn + .jquery-modal .modal .alert-btn {
  margin-left: 10px;
}
.jquery-modal .modal .alert-btn:hover {
  opacity: 0.92;
}
.jquery-modal .shipping-list__item {
  position: relative;
  border-radius: 4px;
}
.jquery-modal .shipping-list__item + .jquery-modal .shipping-list__item {
  margin-top: 20px;
}
.jquery-modal .shipping-list__item + .jquery-modal .shipping-list__item::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 1px;
  top: -6px;
  background-color: #e9ecef;
}
.jquery-modal .shipping-list__item-top {
  display: flex;
  align-items: center;
  padding: 8px 0;
}
.jquery-modal .shipping-list__item-top .custom-radio {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #16191d;
}
.jquery-modal .shipping-list__item-top .custom-radio-container {
  margin-right: auto;
}
.jquery-modal .shipping-list__item-inner {
  background-color: #fafafa;
  padding: 10px 6px 10px 10px;
}
.jquery-modal .shipping-list__item-inner .name {
  font-weight: 500;
}
.jquery-modal .shipping-list__item-inner .number {
  color: #666968;
}
.jquery-modal .shipping-list__item-inner > p + p {
  margin-top: 4px;
}
.jquery-modal .input-mobile-item .find-address {
  height: 36px;
  padding: 0 2px;
  font-size: 14px;
  margin-left: 4px;
}
.jquery-modal .input-mobile-item__title {
  font-size: 15px;
  font-weight: 500;
  color: #16191d;
  margin-bottom: 4px;
}
.jquery-modal .input-mobile-item + .input-mobile-item {
  margin-top: 18px;
}
.jquery-modal .default-address-check {
  font-size: 15px;
  margin-top: 12px;
}

.modal-search-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background-color: #f6f7f8;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.modal-searchBar__inner {
  display: flex;
  align-items: center;
  height: 52px;
  width: 480px;
  background-color: #ffffff;
  border: 2px solid #228be6;
  border-radius: 55px;
  padding: 0 14px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.modal-searchBar__inner .modal-searchBar__input {
  flex-grow: 1;
  outline: none;
}
.modal-searchBar__inner .modal-searchBar__btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background-image: url(../images/icon_search-blue.png);
  background-size: 24px 24px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

/* 체크박스 */
.b-checkbox-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 8px;
  -moz-column-gap: 12px;
       column-gap: 12px;
}
.b-checkbox-container.inner {
  color: #212529;
}
.b-checkbox-container.vertical {
  flex-direction: column;
  align-items: flex-start;
}
.b-checkbox-container.shoping-mall {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  row-gap: 16px;
  -moz-column-gap: 16px;
       column-gap: 16px;
  padding: 8px;
}

.b-checkbox.checkbox {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: pointer;
  word-break: keep-all;
}
.b-checkbox.checkbox.check-image > .control-label {
  font-size: 0;
  margin-left: 3px;
  margin-bottom: 1px;
}

.b-checkbox.checkbox {
  outline: none;
  display: inline-flex;
  align-items: center;
  vertical-align: top;
}

.b-checkbox.checkbox:not(.button) + .checkbox:last-child {
  margin-right: 0;
}

.b-checkbox.checkbox input[type=checkbox] {
  position: absolute;
  left: 0;
  opacity: 0;
  outline: none;
  z-index: -1;
}

.b-checkbox.checkbox:has(input[type=checkbox]:disabled) {
  cursor: default;
}

.b-checkbox.checkbox input[type=checkbox] + .check {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid #ced4da;
  background: #ffffff;
}

.b-checkbox.checkbox input[type=checkbox]:checked + .check {
  background: #228be6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;
  background-size: 85% 85%;
  border-color: #228be6;
}

.b-checkbox.checkbox .control-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding-left: calc(0.4em - 1px);
}

.b-checkbox.checkbox.button {
  display: flex;
}

.b-checkbox.checkbox[disabled] {
  opacity: 0.5;
}

.b-checkbox.checkbox.is-small {
  font-size: 13px;
}

.b-checkbox.checkbox.is-medium {
  font-size: 16px;
}

.b-checkbox.checkbox.is-large {
  font-size: 20px;
}

/* 라디오 버튼 */
.custom-radio-container {
  display: flex;
  align-items: center;
  row-gap: 8px;
  -moz-column-gap: 12px;
       column-gap: 12px;
}
.custom-radio-container.vertical {
  flex-direction: column;
  align-items: flex-start;
}
.custom-radio-container.storeCondition {
  background-color: #f8f9fa;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #f1f3f5;
  row-gap: 4px;
}

.custom-radio.inner-input {
  display: flex;
  align-items: center;
}
.custom-radio.no-text label {
  margin-bottom: 6px;
}

.custom-radio > input:checked,
.custom-radio > input:not(:checked) {
  position: absolute;
  left: -9999px;
}

.custom-radio > input:checked + label,
.custom-radio > input:not(:checked) + label {
  position: relative;
  padding-left: 24px;
  cursor: pointer;
  display: inline-block;
}

.custom-radio > input:checked + label:before,
.custom-radio > input:not(:checked) + label:before {
  content: "";
  box-sizing: content-box;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 1px solid #ced4da;
  border-radius: 100%;
  background: #fff;
}

.custom-radio > input:checked + label:after,
.custom-radio > input:not(:checked) + label:after {
  content: "";
  width: 10px;
  height: 10px;
  background: #228be6;
  position: absolute;
  top: 50%;
  left: 4px;
  border-radius: 100%;
}

.custom-radio > input:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}

.custom-radio > input:checked + label:after {
  opacity: 1;
  transform: scale(1) translateY(-50%);
}

.custom-radio > input:disabled + label:before {
  cursor: default;
}

.custom-radio.is-medium label {
  font-size: 16px;
}
.custom-radio.is-medium > input:checked + label,
.custom-radio.is-medium > input:not(:checked) + label {
  padding-left: 28px;
}
.custom-radio.is-medium > input:checked + label:before,
.custom-radio.is-medium > input:not(:checked) + label:before {
  width: 20px;
  height: 20px;
}
.custom-radio.is-medium > input:checked + label:after,
.custom-radio.is-medium > input:not(:checked) + label:after {
  width: 12px;
  height: 12px;
  left: 5px;
}

/* 셀렉트 */
.table .nice-select {
  min-width: 128px;
  height: 36px;
  line-height: 34px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding-left: 12px;
  max-width: 200px;
}
.table .nice-select .current {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.table .nice-select:focus {
  border-color: #868e96;
}
.table .nice-select:after {
  width: 7px;
  height: 7px;
  margin-top: -4.5px;
}
.table .nice-select.short {
  min-width: 60px;
}
.table .nice-select.short2 {
  min-width: 80px;
}
.table .nice-select.md {
  min-width: 200px;
  max-width: 320px;
}
.table .nice-select.lg {
  min-width: 320px;
  max-width: 420px;
}
.table .nice-select.full {
  width: 100%;
  max-width: none;
}
.table .nice-select.full .list {
  width: 100%;
}
.table .nice-select.above .list {
  top: auto;
  bottom: 100%;
  margin-bottom: 4px;
  transform-origin: 50% 100%;
}

.select-box .nice-select:after {
  width: 6px;
  height: 6px;
  margin-top: -3.5px;
}
.select-box .nice-select .list {
  max-height: 200px;
  overflow-y: auto;
  min-width: 100%;
}
.select-box .nice-select .list::-webkit-scrollbar {
  width: 8px;
}
.select-box .nice-select .list::-webkit-scrollbar-track {
  background: #f3f3f3;
}
.select-box .nice-select .list::-webkit-scrollbar-thumb {
  background: #909090;
  border-radius: 6px;
}
.select-box .nice-select .list::-webkit-scrollbar-thumb:hover {
  background: #707070;
}
.select-box .nice-select .list li.disabled {
  display: none;
}
.select-box .nice-select .option {
  padding-left: 12px;
  padding-right: 12px;
}

.form-control-container .nice-select {
  min-width: 100px;
  border: 1px solid #ced4da;
  padding-left: 12px;
}
.form-control-container .nice-select:after {
  width: 6px;
  height: 6px;
  margin-top: -3.5px;
}
.form-control-container .nice-select.md {
  min-width: 200px;
  max-width: 320px;
}
.form-control-container .nice-select.lg {
  min-width: 320px;
  max-width: 420px;
}

.page-title__btn-container .nice-select {
  height: 40px;
  border: 1px solid #ced4da;
  color: #16191d;
  font-weight: 500;
  font-size: 15px;
}
.page-title__btn-container .nice-select:after {
  width: 6px;
  height: 6px;
  margin-top: -3.5px;
}
.page-title__btn-container .nice-select .list {
  right: 0;
  left: auto;
}
.page-title__btn-container .nice-select .option {
  font-size: 14px;
  line-height: 34px;
  min-height: 34px;
}

.select-link li.disabled {
  display: none;
}

.category-select {
  width: 100%;
  height: 200px;
  text-align: left;
  outline: none;
  cursor: pointer;
}

/* 텍스트 인풋 */
.input-text {
  height: 36px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 0 8px;
  outline: none;
  transition: all 0.2s ease-in-out;
  width: 100%;
  max-width: 172px;
  background-color: #ffffff;
  min-width: 52px;
}
.input-text:focus {
  border-color: #868e96;
}
.input-text.sm {
  max-width: 128px;
}
.input-text.xsm {
  max-width: 80px;
}
.input-text.xxsm {
  max-width: 44px;
  min-width: none;
}
.input-text.md {
  max-width: 298px;
}
.input-text.lg {
  max-width: 420px;
}
.input-text.xl {
  max-width: 600px;
}
.input-text.right {
  text-align: right !important;
}
.input-text:-moz-read-only {
  background-color: #f1f3f5;
}
.input-text:disabled, .input-text:read-only {
  background-color: #f1f3f5;
}
.input-text.word-limit {
  max-width: none;
  width: auto;
  border-radius: 4px 0 0 4px;
}
.input-text.full {
  display: block;
  max-width: none;
}

.input-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
}

.input-item-add {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.input-item-add__input-list {
  flex-grow: 1;
}
.input-item-add__input-list .input-text {
  margin-bottom: 6px;
}
.input-item-add__add-btn {
  flex-shrink: 0;
  margin-top: 6px;
}

.word-limit-input {
  display: inline-flex;
  align-items: center;
}
.word-limit-input__data {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  gap: 2px;
  border: 1px solid #dee2e6;
  border-width: 1px 1px 1px 0;
  border-radius: 0 4px 4px 0;
  height: 36px;
  color: #495057;
}
.word-limit-input__data .current-words {
  color: #1c7ed6;
}
.table.vertical .input-text {
  text-align: left;
}

/* 데이트 피커 */
.datepicker {
  width: 128px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background-color: #ffffff;
  padding: 0 8px 0 12px;
  height: 36px;
  background-image: url(../images/icon_calendar.png);
  background-repeat: no-repeat;
  background-size: 17px;
  background-position: right 9px center;
  outline: none;
}
.datepicker:focus {
  border-color: #868e96;
}
.datepicker:-moz-read-only {
  background-color: #f1f3f5;
  color: #868e96;
}
.datepicker:disabled, .datepicker:read-only {
  background-color: #f1f3f5;
  color: #868e96;
}

#ui-datepicker-div {
  z-index: 104 !important;
}

.ui-widget.ui-widget-content {
  border: 1px solid #efefef !important;
  box-shadow: 2px 4px 8px -4px rgba(0, 0, 0, 0.172);
}

.ui-datepicker-title {
  margin: 0 20px 0 42px !important;
}

.ui-datepicker-title * {
  font-family: "Noto Sans KR", sans-serif !important;
}

.ui-datepicker-title select {
  text-align: center;
  font-weight: 500;
  background-color: transparent;
  margin-bottom: 4px !important;
}

.ui-state-default {
  background-color: transparent !important;
  border: none !important;
  text-align: center !important;
}

.ui-datepicker {
  width: 230px !important;
  padding: 5px !important;
  border-radius: none !important;
}

.ui-datepicker select.ui-datepicker-year {
  width: 25% !important;
}

.ui-datepicker-calendar th {
  font-weight: 400 !important;
}

.ui-datepicker th {
  padding: 0.2em 0.3em 0.7em !important;
}

.ui-datepicker-calendar th > span {
  font-family: "Noto Sans KR", sans-serif !important;
  color: #7b7e81;
}

.ui-datepicker-calendar td:nth-child(1) > a {
  color: #ff6464;
}

.ui-datepicker-calendar td:nth-child(7) > a {
  color: #5757ff;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  color: #444444 !important;
  font-weight: 700 !important;
  background-color: rgb(240, 240, 240) !important;
  border-radius: 5px !important;
  text-underline-position: under;
}

.ui-widget-header {
  border: none !important;
  background-color: transparent !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active {
  color: #454545 !important;
}

.ui-datepicker-prev span {
  background-image: url(../images/icon_chevron2.png) !important;
  background-position: center center !important;
}

.ui-datepicker-next span {
  background-image: url(../images/icon_chevron.png) !important;
  background-position: center center !important;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  top: 5px !important;
  cursor: pointer;
  border: 1px solid transparent !important;
}

.input-file {
  display: inline-block;
}
.input-file input[type=file] {
  height: 0;
  overflow: hidden;
  width: 0;
}
.input-file input[type=file] + label {
  position: relative;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  padding: 0 18px;
  background-color: #868e96;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  outline: none;
  vertical-align: middle;
}
.input-file input[type=file] + label:hover {
  background-color: #7e868f;
}

.file-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  border: 1px solid #e9ecef;
  padding: 6px;
  border-radius: 4px;
}
.file-preview__container {
  display: flex;
  align-items: center;
  gap: 5px;
}
.file-preview__image {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100px;
  aspect-ratio: 1;
}
.file-preview__delete {
  background-color: #b1b6b9;
  border-radius: 50%;
  position: relative;
  width: 18px;
  height: 18px;
}
.file-preview__delete:hover {
  background-color: #a9aeb2;
}
.file-preview__delete::before, .file-preview__delete::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 12px;
  background-color: #ffffff;
  top: 50%;
  left: 50%;
}
.file-preview__delete::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.file-preview__delete::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.file-preview__number {
  position: absolute;
  left: 9px;
  top: 3px;
  color: #666968;
}

.textarea {
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 8px;
  outline: none;
  width: 100%;
  background-color: #ffffff;
  resize: none;
}
.textarea:focus {
  border-color: #868e96;
}
.textarea:-moz-read-only {
  background-color: #f1f3f5;
}
.textarea:disabled, .textarea:read-only {
  background-color: #f1f3f5;
}

.bs-timepicker {
  height: 36px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 0 8px;
  transition: all 0.2s ease-in-out;
  background-color: #ffffff;
  background-image: url(../images/icon_clock.png);
  background-repeat: no-repeat;
  background-size: 17px;
  background-position: right 7px center;
  outline: none;
  max-width: 84px;
}
.bs-timepicker:focus {
  border-color: #868e96;
}
.bs-timepicker:-moz-read-only {
  background-color: #f1f3f5;
  color: #868e96;
}
.bs-timepicker:disabled, .bs-timepicker:read-only {
  background-color: #f1f3f5;
  color: #868e96;
}

.timepicker-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.timepicker {
  left: 0 !important;
  top: 24px !important;
  padding-top: 10px;
}
.timepicker .title {
  display: none;
}

.table-wrapper {
  margin-bottom: 32px;
  width: 100%;
}
.table-wrapper .table-wrapper {
  margin-bottom: 16px;
}

.table {
  width: 100%;
  border-top: 1px solid #dee2e6;
}
.table tr {
  border-bottom: 1px solid #f1f3f5;
}
.table tr.checked td {
  background-color: #f5fbff;
}
.table th {
  vertical-align: middle;
  padding: 6px 16px;
  font-weight: 500;
  color: #50514f;
  background-color: #f8f9fa;
  height: 50px;
  word-break: keep-all;
}
.table td {
  vertical-align: middle;
  padding: 6px 10px;
  height: 50px;
  background-color: #ffffff;
}
.table td .td-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  -moz-column-gap: 5px;
       column-gap: 5px;
  row-gap: 8px;
}
.table td .td-inner.vertical {
  flex-direction: column;
  align-items: flex-start;
}
.table td > img {
  display: inline-block;
}
.table td .table-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
}
.table.vertical th,
.table.vertical td {
  text-align: center;
  height: 46px;
}
.table.vertical th.left,
.table.vertical td.left {
  text-align: left;
}
.table.vertical th.right,
.table.vertical td.right {
  text-align: right;
}
.table.vertical th + th,
.table.vertical td + th {
  border-left: 1px solid #f1f3f5;
}
.table.vertical th + td,
.table.vertical td + td {
  border-left: 1px solid #f1f3f5;
}
.table.vertical td {
  padding: 6px 5px;
}
.table.vertical.tight th,
.table.vertical.tight td {
  height: 40px;
}
.table.transparent {
  border-top: none !important;
}
.table.transparent tr {
  border-bottom: none !important;
}
.table.transparent th {
  background-color: transparent !important;
  border: none !important;
}
.table.transparent td {
  background-color: transparent !important;
  border: none !important;
}
.table.draggable > tbody > tr {
  cursor: move !important;
}
.table.draggable > tbody > tr:hover {
  cursor: move !important;
}
.table.draggable > tbody > tr:active {
  cursor: move !important;
}
.table.draggable > tbody > tr.dragging {
  cursor: move !important;
}
.table.draggable > tbody > tr.dragging td {
  background-color: #f5fbff;
}
.table.td-nested td,
.table.td-nested th {
  padding: 0;
  height: auto;
}
.table.personal-payment {
  margin: 10px 0;
}
.table.personal-payment td,
.table.personal-payment th {
  padding: 0;
  height: 32px;
  padding: 6px 12px;
}
.table.personal-payment td {
  color: #343a40;
}
.table .manage-btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.table .under-line {
  cursor: pointer;
  text-decoration: underline;
}
.border-left {
  border-left: 1px solid #f1f3f5 !important;
}

.border-right {
  border-right: 1px solid #f1f3f5 !important;
}

.border-bottom-thick {
  border-bottom: 2px solid #e9ecef !important;
}

.product-search-box {
  display: flex;
  gap: 24px;
  margin-top: 20px;
  min-height: 400px;
}
.product-search-box > .table-wrapper {
  min-width: 480px;
}
.product-search-box > .table-wrapper.left tbody tr,
.product-search-box > .table-wrapper.left tbody td {
  cursor: pointer;
}
.product-search-box .product-search-box__product {
  pointer-events: none;
}
.product-search-box .product-search-box__product > * {
  pointer-events: auto;
}
.product-search-box__product {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
}
.product-search-box__detail-name {
  font-weight: 500;
  color: #16191d;
}
.product-search-box__detail-expose {
  color: #495057;
}
.product-search-box__detail-price {
  color: #343a40;
  font-weight: 500;
}
.product-search-box .pagination__container {
  margin-top: 20px;
}

.tilde {
  color: #495057;
  margin: 0 5px;
}

.parentheses {
  color: #868e96;
}

.input-unit-text {
  color: #50514f;
  margin-left: 3px;
  min-width: 13px;
  text-align: center;
}
.input-unit-text.left {
  margin-left: 0;
  margin-right: 5px;
}

.search-number__text {
  color: #343a40;
  margin-right: 5px;
}
.search-number__text strong {
  font-weight: 700;
  color: #228be6;
}
.search-number__text em {
  font-style: normal;
  font-weight: 500;
  color: #212529;
}

.horizontal-line {
  border-top: 1px solid #dee2e6;
  margin: 10px 0;
}

.spacing {
  margin: 4px 0;
  color: transparent;
}

.black-list {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  background-color: #343a40;
  margin-right: 3px;
  font-size: 13px;
  color: #ffffff;
}

.option-text {
  color: #50514f;
  font-size: 13px;
}

.option-badge {
  display: inline-block;
  padding: 0 5px;
  border-radius: 2px;
  font-size: 12px;
  background-color: #7e8282;
  color: #ffffff;
}

.white-list {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  margin-right: 3px;
  font-size: 13px;
  color: #16191d;
}

.multi-select {
  min-width: 160px;
  border-radius: 4px;
  border: 1px solid #dee2e6;
  overflow: hidden;
}
.multi-select__title {
  display: flex;
  align-items: center;
  height: 34px;
  font-weight: 500;
  color: #16191d;
  background-color: #f2f4f6;
}
.multi-select__title .b-checkbox-container {
  width: 100%;
}
.multi-select__title .b-checkbox.checkbox {
  padding: 0 6px;
  width: 100%;
  margin-right: 0;
}
.multi-select__inner {
  height: 88px;
  overflow-y: auto;
}
.multi-select__inner .b-checkbox-container {
  row-gap: 0;
}
.multi-select__inner .b-checkbox.checkbox {
  padding: 4px 6px;
  width: 100%;
}
.multi-select__inner .b-checkbox.checkbox + .b-checkbox.checkbox {
  border-top: 1px solid #f1f3f5;
}
.multi-select__inner::-webkit-scrollbar {
  width: 8px;
}
.multi-select__inner::-webkit-scrollbar-track {
  background-color: #f1f3f5;
}
.multi-select__inner::-webkit-scrollbar-thumb {
  background-color: #ced4da;
  border-radius: 4px;
}
.multi-select__inner::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}

.order-detail-text {
  font-size: 12px;
  color: #666968;
}
.order-detail-text .icon {
  position: relative;
  top: 1px;
}
.order-detail-text__rowList {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.star-checkbox {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.star-checkbox > input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.star-checkbox > input::after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url(../images/icon_important-order.png);
  background-position: -18px 0;
  background-size: cover;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.star-checkbox > input:checked::after {
  background-position: 0 0;
}

.fyi {
  position: relative;
  padding-left: 8px;
}
.fyi::before {
  content: "";
  position: absolute;
  top: 0.65em;
  left: 0;
  display: inline-block;
  width: 3px;
  height: 3px;
  background-color: currentColor;
  opacity: 0.9;
}

.tooltip {
  font-style: 14px;
  position: fixed;
  padding: 10px 16px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  text-align: left;
  color: #030507;
  background: #fff;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -7px;
  border-width: 7px;
  border-style: solid;
  border-color: #ced4da transparent transparent transparent;
}

.content-tab {
  display: flex;
  min-width: 1140px;
  margin-bottom: 20px;
  gap: 8px;
}
.content-tab__btn, .content-tab__scroll-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  height: 48px;
  background-color: #f1f3f5;
  color: #495057;
  font-weight: 500;
  border-radius: 4px;
  font-size: 15px;
  box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.07);
  word-break: keep-all;
  line-height: 1.2;
  padding: 0 6px;
  max-width: 533px;
}
.content-tab__btn:hover, .content-tab__scroll-btn:hover {
  background-color: #ebeef1;
  color: #343a40;
}
.content-tab__btn.active, .content-tab__scroll-btn.active {
  background-color: #ffffff;
  color: #16191d;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
}
.content-tab__btn.active:hover, .content-tab__scroll-btn.active:hover {
  background-color: #fafafa;
  color: #0d0f12;
}
.content-tab__content {
  display: none;
}
.content-tab__content.active {
  display: block;
}
.content-tab.fixed {
  position: fixed;
  background-color: #ffffff;
  top: 68px;
  left: 230px;
  right: 0;
  z-index: 99;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
  padding: 9px 24px 9px 32px;
  transition: all 0.3s ease-in-out;
}
.content-tab.fixed .content-tab__btn,
.content-tab.fixed .content-tab__scroll-btn {
  height: 34px;
  font-size: 14px;
}
.content-tab.fixed .content-tab__scroll-btn {
  font-size: 13px;
}
.content-tab.fixed + .content-section {
  margin-top: 120px;
}

.content-fold__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content-fold__header .content-section__title {
  margin-bottom: 0;
  font-size: 20px;
}
.content-fold__btn {
  position: relative;
  width: 32px;
  height: 32px;
  border: 1px solid #e0e4e5;
  border-radius: 2px;
}
.content-fold__btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid #50514f;
  border-top: none;
  border-right: none;
  transform: translate(-50%, calc(-50% - 3px)) rotate(-45deg);
}
.content-fold__btn.opened::before {
  transform: translate(-50%, calc(-50% + 2px)) rotate(135deg);
}
.content-fold__content {
  padding-top: 20px;
}

.address-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  align-items: flex-start;
  padding: 5px 0;
}

.address-line {
  width: 100%;
}
.address-line__title {
  display: inline-block;
  min-width: 54px;
  text-align: right;
  margin-right: 10px;
  font-weight: 500;
  color: #343a40;
}
.address-line__find-btn {
  height: 36px;
  padding: 0 6px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  color: #495057;
}
.address-line__find-btn:hover {
  background-color: #f1f3f5;
}

.phone-container {
  display: inline-flex;
  align-items: center;
}
.expect-mileage {
  cursor: pointer;
}

.discount-list {
  cursor: pointer;
}

.default-address {
  display: inline-block;
  color: #228be6;
  padding: 3px 4px;
  border-radius: 2px;
  font-weight: 500;
  font-size: 14px;
  border: 1px solid #228be6;
}

.draggable-icon-container {
  pointer-events: none;
  font-size: 0;
}

.scroll-to-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 101;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s opacity ease-in-out;
}
.scroll-to-top:hover {
  background-color: #f1f3f5;
}
.scroll-to-top.show {
  opacity: 1;
  pointer-events: auto;
}
.scroll-to-top::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border: 2px solid #495057;
  border-top: none;
  border-right: none;
  transform: rotate(135deg);
}

.change-log {
  padding: 10px 12px;
  background-color: #f7f7f7;
  border-radius: 5px;
  height: 180px;
  overflow-y: auto;
}
.change-log__list + .change-log__list {
  margin-top: 4px;
}
.change-log__date {
  color: #1971c2;
  font-weight: 500;
  margin-right: 2px;
}
.change-log__description {
  color: #16191d;
}

.product-group {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: 100%;
  gap: 14px;
}
.product-group__item {
  width: 140px;
}
.product-group__item-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 18px;
  height: 18px;
  font-size: 13px;
  border-radius: 50%;
  font-family: Tahoma;
  letter-spacing: -0.05em;
  background-color: #979b9d;
  color: #ffffff;
}
.product-group__image {
  display: flex;
  align-items: center;
  width: 100%;
  height: 140px;
  margin-top: 4px;
}
.product-group__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.product-group__description {
  font-size: 13px;
  line-height: 1.3;
  margin-top: 4px;
}
.product-group__description-price {
  color: #343a40;
  font-weight: 500;
  margin-top: 4px;
}

.product-badge {
  display: inline-block;
  font-size: 11px;
  height: 20px;
  padding: 0 8px;
  border-radius: 40px;
  background-color: #b1b6b9;
  font-weight: 500;
}
.product-badge.new {
  color: #40c057;
  background-color: #f8fef9;
  border: 1px solid #40c057;
}
.product-badge.best {
  color: #fab005;
  background-color: #fffdf5;
  border: 1px solid #fab005;
}
.product-badge.hot {
  color: #ff6b6b;
  background-color: snow;
  border: 1px solid #ff6b6b;
}
.product-badge.md-pick {
  color: #5c7cfa;
  background-color: #fcfdff;
  border: 1px solid #5c7cfa;
}
.product-badge.hot-deal {
  color: #f06595;
  background-color: #fffafc;
  border: 1px solid #f06595;
}

.sms-manage {
  padding: 16px;
  border: 1px solid #dee2e6;
  text-align: left;
  border-radius: 5px;
}
.sms-manage .textarea {
  height: 160px;
  background-color: #f7f7f7;
}
.sms-manage__byte {
  margin-top: 4px;
  padding: 0 2px;
  text-align: right;
}
.sms-manage__byte .number {
  color: #666968;
  font-weight: 500;
}
.sms-manage__byte .text {
  color: #979b9d;
  font-size: 13px;
}

.mini-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: 1px solid #d1d6d8;
  color: #666968;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.mini-info-content {
  position: absolute;
  background-color: #ffffff;
  border: 2px solid #dee2e6;
  border-radius: 4px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  padding: 12px;
}
.mini-info-content__header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.mini-info-content__title {
  font-size: 16px;
  font-weight: 500;
  color: #16191d;
  margin-right: auto;
}
.mini-info-content__close {
  width: 20px;
  height: 20px;
  background-image: url(../images/icon_modal-close-black.png);
  background-size: cover;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position: center center;
}
.mini-info-content__section {
  margin-bottom: 28px;
}
.mini-info-content__content {
  padding: 4px;
  max-height: 500px;
  overflow-y: auto;
}
.mini-info-content__content p {
  position: relative;
  font-size: 13px;
  color: #666968;
  margin-bottom: 8px;
  padding-left: 12px;
}
.mini-info-content__content p::before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 3px;
  height: 3px;
  background-color: #979b9d;
  border-radius: 50%;
  top: 9px;
  left: 2px;
}
.mini-info-content__content p.mini-info-content__subTitle {
  font-size: 14px;
  color: #16191d;
  font-weight: 500;
  padding-left: 0;
  margin-bottom: 10px;
}
.mini-info-content__content p.mini-info-content__subTitle::before {
  display: none;
}
.mini-info-content__writingSample-box {
  background-color: #f0f0f0;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 2px;
  margin-bottom: 20px;
}

.pagination__container {
  display: flex;
  justify-content: center;
}

.pagination {
  display: flex;
}

.pagination > * {
  margin-right: 3px;
}

.pagination__number-group {
  display: flex;
  flex-wrap: wrap;
}
.pagination__number-group > li + li {
  margin-left: 3px;
}

.pagination__item {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 3px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  border: 1px solid #ced4da;
  background-color: #ffffff;
  color: #495057;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.05);
}
.pagination__item:hover {
  background-color: #f1f3f5;
  color: #343a40;
}
.pagination__item.active {
  color: #ffffff;
  background-color: #16191d;
  border-color: transparent;
}
.pagination__item:disabled {
  background-color: #e3e3e3;
  pointer-events: none;
}

.pagination__item.prev::before {
  content: "";
  width: 13px;
  height: 13px;
  background-image: url(../images/icon_pagination-next.png);
  background-size: cover;
  transform: rotate(-180deg);
}

.pagination__item.prev:disabled::before {
  opacity: 0.6;
}

.pagination__item.first::before {
  content: "";
  width: 13px;
  height: 13px;
  background-image: url(../images/icon_pagination-last.png);
  background-size: cover;
  transform: rotate(-180deg);
}

.pagination__item.first:disabled::before {
  opacity: 0.6;
}

.pagination__item.next::before {
  content: "";
  width: 13px;
  height: 13px;
  background-image: url(../images/icon_pagination-next.png);
  background-size: cover;
}

.pagination__item.next:disabled::before {
  opacity: 0.6;
}

.pagination__item.last::before {
  content: "";
  width: 13px;
  height: 13px;
  background-image: url(../images/icon_pagination-last.png);
  background-size: cover;
}

.pagination__item.last:disabled::before {
  opacity: 0.6;
}

.dropzone-wrapper {
  padding: 12px;
  width: 100%;
}
.dropzone-wrapper .dropzone {
  display: inline-flex;
  align-items: center;
  border: 2px dashed #dee2e6;
  border-radius: 6px;
  min-width: 480px;
  min-height: 224px;
  gap: 10px;
  flex-wrap: wrap;
}
.dropzone-wrapper .dropzone .dz-message {
  width: 100%;
  font-size: 15px;
  font-weight: 500;
  color: #979b9d;
}
.dropzone-wrapper .dropzone .dz-message::before {
  content: "";
  display: block;
  margin: 0 auto 12px;
  width: 80px;
  height: 80px;
  background-image: url(../images/icon_dropzone-upload.png);
  background-size: cover;
}

.file-list li {
  display: flex;
  align-items: center;
}
.file-list li + li {
  margin-top: 8px;
}
.file-list__item {
  display: inline-flex;
  align-items: center;
}
.file-list__item-size {
  color: #868e96;
  letter-spacing: -0.035em;
}
.file-list__delete {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  background-image: url(../images/icon_file-delete.png);
  background-size: cover;
}

.comment-id {
  display: inline-flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 2px;
       column-gap: 2px;
}
.comment-id__id {
  color: #868e96;
}
.comment-id__ip {
  font-size: 13px;
  color: #868e96;
}

.comment-write {
  display: flex;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.comment-write-container {
  background-color: #f8f9fa;
  padding: 14px 12px;
  border-radius: 4px;
}
.comment-write-container .comment-id {
  margin-bottom: 4px;
  margin-left: 4px;
}
.comment-write__textarea-container {
  flex-grow: 1;
  padding: 4px 6px;
  background-color: #ffffff;
}
.comment-write__textarea {
  resize: none;
  outline: none;
  width: 100%;
}
.comment-write__button {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 120px;
  background-color: #7e8282;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
}
.comment-write__button:hover {
  background-color: #808080;
}

.board-setting {
  display: flex;
  justify-content: space-between;
}
.board-setting__left, .board-setting__right {
  flex: 1;
}
.board-setting__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  gap: 8px;
  margin-bottom: 68px;
}
.board-setting__title {
  font-size: 16px;
  font-weight: 500;
  color: #0d0f12;
  margin-bottom: 2px;
  padding-left: 4px;
}
.board-setting__select {
  width: 100%;
  height: 380px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  outline: none;
  padding: 2px 0;
  margin-bottom: 8px;
  background-color: #ffffff;
}
.board-setting__select option {
  padding: 2px 7px;
  color: #343a40;
}
.board-setting__move-btn {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background-color: #ffffff;
}
.board-setting__move-btn:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% - 2px), -50%) rotate(-135deg);
  width: 10px;
  height: 10px;
  border: 2px solid #868e96;
  border-width: 0 0 2px 2px;
  transition: transform 0.3s ease-in-out;
}
.board-setting__move-btn.left:after {
  transform: translate(calc(-50% + 2px), -50%) rotate(45deg);
}
.board-setting__move-btn:hover {
  background-color: #f8f9fa;
}
.board-setting__controls {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-bottom: 12px;
}

.prev-next {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  font-size: 15px;
  border-radius: 4px;
  padding: 2px 4px;
}
.prev-next__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 0;
}
.prev-next__item-title {
  position: relative;
  font-weight: 500;
  color: #666968;
  flex-shrink: 0;
  padding-right: 18px;
}
.prev-next__item-title::after {
  content: "";
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(calc(-50% - 2px)) rotate(45deg);
  width: 8px;
  height: 8px;
  border: 2px solid #b1b6b9;
  border-width: 0 2px 2px 0;
}
.prev-next__item-content {
  flex-grow: 1;
}
.prev-next__item-content a {
  position: relative;
  color: #16191d;
  padding: 3px 0 3px 14px;
  width: 100%;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.prev-next__item-content a:before {
  position: absolute;
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  background-color: #d1d6d8;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
}
.prev-next__item-content a:hover {
  text-decoration: underline;
}
.prev-next__item-info {
  display: flex;
  flex-shrink: 0;
  gap: 14px;
  font-size: 14px;
}
.prev-next__item-info__author {
  color: #7e8282;
}
.prev-next__item-info__date {
  font-weight: 500;
  color: #7e8282;
}
.prev-next__item.prev .prev-next__item-title::after {
  transform: translateY(calc(-50% + 2px)) rotate(-135deg);
}
.prev-next__item.next::before {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #e0e4e5;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  opacity: 0.8;
}

.hover-box-trigger {
  position: relative;
  text-decoration: underline;
  cursor: pointer;
}

.hover-box-content {
  position: absolute;
  background-color: #ffffff;
  border: 2px solid #dee2e6;
  border-radius: 4px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  padding: 12px;
}

.select-show-content {
  flex-grow: 1;
}

.message-send {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 24px;
  width: 100%;
  padding-top: 5px;
}
.message-send__left > .form-control-container, .message-send__right > .form-control-container {
  height: 34px;
  margin-bottom: 10px;
}
.message-send__left .textarea, .message-send__right .textarea {
  resize: auto;
}
.message-send__right .textarea {
  background-color: #f7f7f7;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 8px;
  outline: none;
  width: 100%;
}

.sms-list-content__title {
  padding: 4px 4px;
  border: 1px solid #dee2e6;
  border-radius: 4px 4px 0 0;
  overflow-y: auto;
  max-height: 50px;
}
.sms-list-content__content {
  background-color: #f7f7f7;
  border: 1px solid #dee2e6;
  border-radius: 0 0 4px 4px;
  padding: 4px 6px;
  overflow-y: auto;
  margin-top: -1px;
}

.tree-section {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 20px;
}
.tree-section__left .form-control-container, .tree-section__right .form-control-container {
  height: 34px;
  margin-bottom: 10px;
}
.tree-section .jstree-wrapper {
  min-height: 400px;
  max-height: 560px;
  overflow-y: auto;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  padding: 12px;
}

.tab-box {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #ced4da;
  margin-bottom: 20px;
}
.tab-box__btn {
  text-align: center;
  font-weight: 500;
  color: #868e96;
  padding: 10px 24px;
  border: 1px solid #dee2e6;
  border-width: 1px 1px 0 1px;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  background-color: #f8f9fa;
}
.tab-box__btn:first-child {
  margin-left: 0;
}
.tab-box__btn:hover {
  background-color: #f1f3f5;
}
.tab-box__btn.current {
  color: #16191d;
  border-color: #ced4da;
  border-bottom-color: #ffffff;
  background-color: #ffffff;
}

.send-content {
  background-color: #f7f7f7;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 4px 6px;
  overflow-y: auto;
}

.emoji-container {
  position: relative;
  display: flex;
  gap: 5px;
  width: 100%;
}
.emoji-container > .btn {
  flex-shrink: 0;
}

.pop-terms__box {
  position: relative;
  overflow: auto;
  height: 160px;
  margin-top: 8px;
  padding: 13px;
  border: 1px solid #dadada;
  background: #fff;
}
.pop-terms__box strong {
  font-weight: 600;
}
.pop-terms__box .article,
.pop-terms__box .policy_summary {
  font-size: 13px;
  line-height: 16px;
  color: #666;
}
.pop-terms__box .article {
  margin-top: 15px;
}
.pop-terms__box .article__title {
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  padding-bottom: 8px;
}
.pop-terms__box .article__text {
  margin-bottom: 8px;
}
.pop-terms__box .section {
  font-size: 13px;
  line-height: 16px;
  color: #666;
}
.pop-terms__box .section ol {
  margin-bottom: 4px;
  padding-left: 10px;
}
.pop-terms__box .section a {
  color: #0c49a5;
  text-decoration: underline;
}
.pop-terms__box ol > li {
  margin-bottom: 4px;
}
.pop-terms__box ol > li > p {
  margin-bottom: 4px;
}

.pop-terms__item {
  margin-top: 28px;
}

.template-message__container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.template-message {
  border: 1px solid #f1f3f5;
  border-top: 1px solid #dee2e6;
}
.template-message__header {
  background-color: #f8f9fa;
  border-bottom: 1px solid #f1f3f5;
  padding: 10px 8px;
  color: #50514f;
  font-weight: 500;
  text-align: center;
}
.template-message__body {
  border-bottom: 1px solid #f1f3f5;
  padding: 12px;
}
.template-message__footer {
  text-align: right;
  padding: 10px 8px;
}
.template-message__footer .manage-btn-container {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.talk-edit-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.talk-edit-row .circle-btn {
  flex-shrink: 0;
}

.message-edit__wrapper {
  display: flex;
}
.message-edit__wrapper > .table-wrapper {
  width: 65%;
}

.message-edit__right {
  width: 35%;
  padding: 0 20px 20px;
  margin-left: 20px;
}

.message-edit-preview {
  position: relative;
  width: 290px;
  border: 1px solid #dee2e6;
  border-radius: 32px;
  padding: 40px 12px 12px;
}
.message-edit-preview::before {
  content: "";
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  display: inline-block;
  width: 52px;
  height: 6px;
  background-color: #e9ecef;
  border-radius: 10px;
}
.message-edit-preview__image {
  border-radius: 8px;
  overflow: hidden;
}
.message-edit-preview__content {
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 50%;
  top: 95px;
  transform: translateX(-50%);
  width: 238px;
  height: 322px;
  background-color: #ffffff;
  border: 1px solid #dee2e6;
}
.message-edit-preview__header {
  background-color: #f1f3f5;
  padding: 10px 8px;
  color: #16191d;
}
.message-edit-preview__body {
  flex-grow: 1;
  padding: 6px 6px 0;
  height: 200px;
}
.message-edit-preview__body textarea {
  width: 100%;
  height: 100%;
  resize: none;
  border: 1px solid #dee2e6;
  border-radius: 2px;
  padding: 2px;
  font-size: 13px;
}
.message-edit-preview__footer {
  padding: 6px 6px 0;
}
.message-edit-preview__footer-item {
  display: block;
  border: 1px solid #dee2e6;
  text-align: center;
  padding: 2px;
  font-size: 13px;
  color: #1c7ed6;
  margin-bottom: 4px;
}

.info-oneline {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 5px;
  color: #495057;
}

.mileage-word {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.infoDescription-box {
  background-color: #f8f9fa;
  font-size: 13px;
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 20px;
  color: #495057;
}

.seoCode-desc {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: #495057;
}

.refundReasonSet-btnContainer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}
.refundReasonSet-btnContainer__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #343a40;
}

.uploadList {
  width: 100%;
  padding: 10px 0;
}
.uploadList__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 6px;
}
.uploadList__removeAll {
  padding: 4px 8px;
  cursor: pointer;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-size: 13px;
  color: #16191d;
}
.uploadList__removeAll:hover {
  background-color: #f8f8f8;
}
.uploadList__allSize {
  font-size: 13px;
  color: #666968;
}
.uploadList__body {
  display: grid;
  grid-template-columns: 120px 1fr;
  background-color: #fafafb;
  padding: 12px;
  border-radius: 5px;
  gap: 10px;
}
.uploadList__preview {
  flex-shrink: 0;
  border-radius: 2px;
  overflow: hidden;
}
.uploadList__preview img {
  width: 120px;
  height: 120px;
  -o-object-fit: cover;
     object-fit: cover;
}
.uploadList__list {
  flex-grow: 1;
  list-style: none;
  border: 1px solid #dee2e6;
  background-color: #ffffff;
  border-radius: 2px;
  max-height: 120px;
  overflow-y: auto;
}
.uploadList__item {
  position: relative;
  padding: 6px 0;
  cursor: pointer;
  border-radius: 2px;
  border-bottom: 1px solid #f7f7f7;
}
.uploadList__item:hover {
  background-color: #f8f8f9;
}
.uploadList__item:hover .uploadList__removeBtn::before, .uploadList__item:hover .uploadList__removeBtn::after {
  background-color: #7e8282;
}
.uploadList__item.active {
  background-color: #f0f8ff;
}
.uploadList__item:last-child {
  border-bottom: none;
}
.uploadList__item .uploadList__itemText {
  display: flex;
  font-size: 13px;
  padding-left: 28px;
}
.uploadList__item .uploadList__itemName {
  color: #16191d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 48px;
}
.uploadList__item .uploadList__itemSize {
  position: absolute;
  font-size: 12px;
  color: #979b9d;
  right: 8px;
  top: 8px;
}
.uploadList__item .uploadList__removeBtn {
  position: absolute;
  cursor: pointer;
  left: 12px;
  top: 11px;
}
.uploadList__item .uploadList__removeBtn::before, .uploadList__item .uploadList__removeBtn::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 12px;
  background-color: #979b9d;
}
.uploadList__item .uploadList__removeBtn::before {
  transform: rotate(45deg);
}
.uploadList__item .uploadList__removeBtn::after {
  transform: rotate(-45deg);
}

.number-badge {
  position: absolute;
  top: -4px;
  right: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  padding: 0 5px;
  height: 16px;
  border-radius: 100px;
  background-color: #228be6;
  color: #ffffff;
  font-family: Arial;
  font-weight: 700;
  font-size: 11px;
}

.header {
  min-width: 1200px;
  background-color: #ffffff;
}
.header__top {
  display: flex;
  height: 60px;
  padding: 0 20px;
}
.header__top .header-left {
  display: flex;
  align-items: center;
  margin-right: auto;
}
.header__top .header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.header__top .header-right__notification {
  position: relative;
  font-size: 0;
}
.header__top .header-right__user-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  color: #343a40;
  display: inline-flex;
  align-items: center;
  padding: 10px 12px 10px 0;
  cursor: pointer;
}
.header__top .header-right__user-info:hover .userInfo-float {
  opacity: 1;
  pointer-events: auto;
}
.header__top .header-right__user-info::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2px;
  transform: translateY(-50%);
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 4px solid #495057;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.header__top .header-right__logout {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  color: #343a40;
  font-weight: 500;
}
.header__top .header-right__linkContainer {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-searchBar {
  margin-left: 34px;
}
.header-searchBar__inner {
  display: flex;
  align-items: center;
  height: 40px;
  width: 312px;
  background-color: #edf0f3;
  border-radius: 55px;
  padding: 0 14px;
}
.header-searchBar__inner .header-searchBar__select {
  position: relative;
  flex-shrink: 0;
  color: #666968;
  font-weight: 500;
  width: 60px;
  padding: 0 4px;
  margin-right: 15px;
}
.header-searchBar__inner .header-searchBar__select > select {
  width: 100%;
}
.header-searchBar__inner .header-searchBar__select::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid #7e8282;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.header-searchBar__inner .header-searchBar__select:after {
  content: "";
  position: absolute;
  right: -7px;
  display: inline-block;
  background-color: #D2D2D2;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
}
.header-searchBar__inner .header-searchBar__input {
  flex-grow: 1;
  outline: none;
}
.header-searchBar__inner .header-searchBar__btn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-image: url(../images/icon_search.png);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.header__bottom {
  height: 50px;
  background-color: #34373C;
  background: linear-gradient(180deg, rgba(130, 140, 150, 0.94) 0%, #828C96 100%);
  box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.15) inset;
}
.header .header-nav {
  position: relative;
  display: flex;
}
.header .header-nav__fullMenu-trigger {
  position: absolute;
  left: 0;
  height: 100%;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  background-color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  width: 230px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 2px solid #e9ecef;
  transition: all 0.3s ease-in-out;
  z-index: 102;
}
.header .header-nav__fullMenu-trigger-btn,
.header .header-nav__fullMenu-trigger button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  transition: all 0.3s ease-in-out;
}
.header .header-nav__fullMenu-trigger-btn svg,
.header .header-nav__fullMenu-trigger button svg {
  flex-shrink: 0;
  fill: currentColor;
}
.header .header-nav__fullMenu-trigger-btn span,
.header .header-nav__fullMenu-trigger button span {
  transition: all 0.3s ease-in-out;
  opacity: 1;
}
.header .header-nav__fullMenu-trigger::before {
  pointer-events: none;
  content: "";
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.header .header-nav__fullMenu-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 7px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0, transparent 7px, transparent 100%);
  transition: all 0.3s ease-in-out;
}
.header .header-nav__right {
  padding: 0 20px 0 250px;
  transition: all 0.3s ease-in-out;
}
.header .header-nav__right ul {
  display: flex;
  gap: 20px;
}
.header .header-nav__right ul li {
  position: relative;
  color: #ffffff;
  opacity: 0.75;
  transition: all 0.2s;
}
.header .header-nav__right ul li::after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 4px;
  left: 0;
  bottom: 0px;
}
.header .header-nav__right ul li.current {
  opacity: 1;
  font-weight: 500;
}
.header .header-nav__right ul li.current::after {
  background-color: #ffffff;
}
.header .header-nav__right ul li:hover {
  opacity: 1;
}
.header .header-nav__right ul li:hover::after {
  background-color: #ffffff;
}
.header .header-nav__right ul li a {
  display: block;
  min-width: 68px;
  padding: 0 1.4vw;
  text-align: center;
  font-size: 16px;
  line-height: 50px;
  word-break: keep-all;
}
.header__logo > a {
  display: flex;
  align-items: center;
}
.header__logo > a > img {
  position: relative;
  top: -2px;
}
.header__logo-title {
  position: relative;
  font-size: 22px;
  font-weight: 700;
  color: #212529;
  letter-spacing: -0.04em;
  margin-bottom: 0px;
  margin-left: 10px;
  word-break: keep-all;
}
.header.closed .header-nav__fullMenu-trigger {
  left: -168px;
  background-color: transparent;
  border-top-color: rgba(130, 140, 150, 0.94);
}
.header.closed .header-nav__fullMenu-trigger::after {
  opacity: 0;
}
.header.closed .header-nav__fullMenu-trigger::before {
  opacity: 1;
  background: linear-gradient(180deg, rgba(130, 140, 150, 0.94) 0%, #828C96 100%);
}
.header.closed .header-nav__fullMenu-trigger-btn svg,
.header.closed .header-nav__fullMenu-trigger button svg {
  fill: #ffffff;
}
.header.closed .header-nav__right {
  padding: 0 20px 0 82px;
}
.header__quick-search-list {
  color: #50514f;
}
.header__quick-search-list > li {
  position: relative;
  padding-left: 6px;
}
.header__quick-search-list > li::before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 2px;
  height: 2px;
  background-color: #7e8282;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 4px;
}
.header__logo {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 0;
  cursor: pointer;
}
.header__logo:hover .siteSelect {
  display: block;
}
.header__siteSelectArrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid #dee2e6;
  border-radius: 50%;
  margin-left: 6px;
  margin-top: 4px;
}
.header__siteSelectArrow::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #495057;
}

.siteSelect {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
  display: none;
  background-color: #ffffff;
  width: 100%;
  z-index: 103;
  border-radius: 12px;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  max-height: 200px;
  overflow-y: auto;
}
.siteSelect::-webkit-scrollbar {
  width: 3px;
  background-color: transparent;
}
.siteSelect::-webkit-scrollbar-thumb {
  background-color: #b3b3b3;
}
.siteSelect__list > li {
  border-top: 1px solid #f1f3f5;
}
.siteSelect__btn {
  font-size: 14px;
  display: block;
  padding: 0 8px 0 20px;
  width: 100%;
  height: 40px;
  color: #212529;
  font-weight: 500;
}
.siteSelect__btn:hover {
  background-color: #f5f5f5;
  color: #0d0f12;
}

.full-menu-content {
  max-height: 810px;
  padding-right: 46px;
}
.full-menu-content .depth1 {
  display: flex;
  flex-wrap: wrap;
}
.full-menu-content .depth1__item {
  width: 20%;
  min-width: 220px;
  padding: 10px;
}
.full-menu-content .depth1__title {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #0d0f12;
  padding: 0 6px;
  border-bottom: 1px solid #495057;
  padding-bottom: 4px;
  margin-bottom: 12px;
}
.full-menu-content .depth2 {
  border-radius: 4px;
  padding: 8px 4px 12px;
}
.full-menu-content .depth2__item + .depth2__item {
  margin-top: 20px;
}
.full-menu-content .depth2__title {
  color: #212529;
  font-size: 16px;
  font-weight: 500;
  padding: 0 4px;
}
.full-menu-content .depth2__title:hover {
  text-decoration: underline;
}
.full-menu-content .depth3 {
  background-color: #f8f9fa;
  border-radius: 4px;
  margin-top: 6px;
  padding: 6px 4px;
}
.full-menu-content .depth3__item {
  padding: 4px 6px;
}
.full-menu-content .depth3__title {
  display: inline-block;
  position: relative;
  color: #495057;
  padding: 2px 0 2px 5px;
  font-size: 14px;
}
.full-menu-content .depth3__title:hover {
  text-decoration: underline;
  color: #343a40;
}
.full-menu-content .depth3__title::before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 3px;
  height: 3px;
  background-color: #868e96;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 4px;
}

.userInfo-float {
  cursor: auto;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  min-width: 280px;
  top: 44px;
  right: 0;
  padding: 20px 12px;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  color: #030507;
  z-index: 1;
}
.userInfo-float__top {
  text-align: center;
  margin-bottom: 12px;
}
.userInfo-float__top em {
  font-style: normal;
}
.userInfo-float__top .icon {
  flex-shrink: 0;
  margin-bottom: 6px;
}
.userInfo-float__info {
  white-space: nowrap;
}
.userInfo-float__info-row {
  font-size: 15px;
}
.userInfo-float__bottom {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.side-nav {
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #ffffff;
  width: 230px;
  transition: all 0.3s ease-in-out;
  min-height: 100%;
  z-index: 102;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.04), 0px 4px 4px 0px rgba(0, 0, 0, 0.04);
}
.side-nav.closed {
  left: -230px;
}
.side-nav.closed.fixed {
  left: -230px;
}
.side-nav.fixed {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}
.side-nav__fold {
  position: absolute;
  top: 12px;
  left: 0;
  width: 20px;
  height: 46px;
  background-color: #ffffff;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.07);
}
.side-nav__fold:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-28%, -50%) rotate(45deg);
  width: 8px;
  height: 8px;
  border: 2px solid #868e96;
  border-width: 0 0 2px 2px;
  transition: transform 0.3s ease-in-out;
}
.side-nav__fold.closed:before {
  transform: translate(-72%, -50%) rotate(225deg);
}
.side-nav__fold:hover {
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
}
.side-nav__fold:hover:before {
  border-color: #6c757d;
}
.side-nav .depth2 > li {
  position: relative;
}
.side-nav .depth2 > li .depth2-title {
  position: relative;
  display: block;
  height: 52px;
  line-height: 52px;
  padding: 0 40px 0 24px;
  font-size: 14px;
  font-weight: 500;
  color: #212529;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.side-nav .depth2 > li.has-sub .depth2-title:after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  width: 8px;
  height: 8px;
  border: 2px solid #868e96;
  border-width: 0 2px 2px 0;
  transition: transform 0.3s;
}
.side-nav .depth2 > li.has-sub.opened .depth2-title:after {
  transform: translateY(-50%) rotate(45deg);
}
.side-nav .depth2 > li.current .depth2-title {
  font-weight: 700;
  color: #3C91E6;
}
.side-nav .depth2 > li + li::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.05);
}
.side-nav .depth3 {
  position: relative;
  padding: 0 10px;
}
.side-nav .depth3 > li > a {
  display: block;
  height: 36px;
  line-height: 36px;
  padding: 0 14px 0 20px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 3px;
  color: #717680;
}
.side-nav .depth3 > li + li {
  margin-top: 3px;
}
.side-nav .depth3 > li.current > a {
  color: #3C91E6;
  background-color: #E8F1FF;
}
.side-nav .depth3 > li:hover > a {
  background-color: #E8F1FF;
}

.header-fixed {
  display: none;
}

.side-nav.fixed .header-fixed {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 5px 2px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.side-nav.fixed .header-fixed__logo {
  padding: 12px;
}
.side-nav.fixed .header-fixed__logo a {
  display: flex;
  align-items: center;
  width: 86px;
}
.side-nav.fixed .header-fixed__logo a .header__logo-title {
  position: relative;
  font-size: 22px;
  font-weight: 700;
  color: #212529;
  letter-spacing: -0.04em;
  margin-bottom: 0px;
  margin-left: 10px;
  word-break: keep-all;
  color: #3d4246;
}
.side-nav.fixed .header-fixed__logo a > img {
  position: relative;
  top: -2px;
}
.side-nav.fixed .header-fixed__button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
}
.side-nav.fixed .header-fixed__button svg {
  flex-shrink: 0;
  fill: #ffffff;
}
.side-nav.fixed .header-fixed__button span {
  transition: all 0.3s ease-in-out;
  opacity: 1;
}
.side-nav.fixed + .content .side-nav__fold {
  position: fixed;
  top: 12px;
  left: 230px;
  z-index: 101;
  border-radius: 0 4px 4px 0;
  transition: 0.3s ease-in-out;
}
.side-nav.fixed + .content .side-nav__fold.closed {
  left: 0;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
}

.content {
  background-color: #ECF0F4;
  padding-left: 230px;
  transition: all 0.3s ease-in-out;
  width: 100%;
}
.content__inner {
  position: relative;
  padding: 0 30px 68px;
  max-width: 1920px;
  min-width: 1200px;
  transition: all 0.3s ease-in-out;
}
.content__inner:has(.table.order-section) {
  min-width: 1620px;
}
.content.closed {
  padding-left: 0;
}
.content.closed__inner {
  padding: 0 24px 40px;
}
.content.closed .page-title.fixed {
  left: 0;
}
.content.closed .content-tab__fixed.fixed {
  left: 0;
}

.page-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 68px;
  top: 0;
  right: 40px;
  left: 270px;
  border-radius: 0 0 5px 5px;
  padding: 12px 2px 12px 4px;
  margin-bottom: 24px;
  min-width: 820px;
}
.page-title__title {
  font-size: 24px;
  font-weight: 700;
  color: #0d0f12;
  white-space: nowrap;
  margin-right: 24px;
}
.page-title.fixed {
  position: fixed;
  top: 0;
  left: 230px;
  right: 0;
  z-index: 100;
  background-color: #ffffff;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
  padding: 12px 24px 12px 32px;
  transition: all 0.3s ease-in-out;
}
.page-title.fixed .page-title__title {
  font-size: 22px;
}
.page-title.fixed + .content-section {
  margin-top: 92px;
}
.page-title__btn-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}

.content-section {
  position: relative;
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  padding: 24px 30px;
}
.content-section__title {
  font-size: 18px;
  font-weight: 500;
  color: #212529;
  margin-bottom: 12px;
}
.content-section__inner-title {
  font-size: 16px;
  font-weight: 500;
  color: #495057;
  margin-bottom: 8px;
}
.content-section__col-2-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.content-section__col-2-more {
  position: absolute;
  top: 32px;
  right: 36px;
  padding-left: 10px;
  color: #343a40;
}
.content-section__col-2-more:hover {
  color: #030507;
}

.footer-top {
  min-width: 1336px;
  border-top: 2px solid #868e96;
  background-color: #f8f9fa;
}
.footer-top__inner {
  display: flex;
  align-items: center;
  width: 1276px;
  height: 56px;
  margin: 0 auto;
}
.footer-top__link {
  display: flex;
  height: 100%;
  align-items: center;
  margin-right: auto;
}
.footer-top__link li + li {
  margin-left: 100px;
}
.footer-top__link a {
  display: block;
  font-size: 16px;
  color: #495057;
  height: 56px;
  line-height: 56px;
}

.family-site-link li.disabled {
  display: none;
}
.family-site-link.nice-select .list {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 12px;
  transform-origin: 50% 100%;
  box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.family-site-link.nice-select .list .option {
  line-height: 34px;
  min-height: 34px;
  font-size: 13px;
}

.footer-body {
  border-top: 1px solid #dee2e6;
}
.footer-body__inner {
  position: relative;
  width: 1276px;
  margin: 0 auto;
  padding: 40px 0;
}
.footer-body__text01 {
  font-weight: 500;
  color: #495057;
  font-size: 15px;
}
.footer-body__text02 {
  font-size: 14px;
  color: #495057;
  font-weight: 300;
  line-height: 2;
  margin-top: 12px;
}
.footer-body__text02 a {
  font-weight: 400;
  text-decoration: underline;
}
.footer-body__text03 {
  font-size: 13px;
  color: #868e96;
  font-weight: 300;
  margin-top: 12px;
}
.footer-body__text03 a {
  font-weight: 400;
  text-decoration: underline;
  margin-left: 8px;
}

.footer-image-container {
  position: absolute;
  top: 36px;
  right: 0;
}
.footer-image-container__misc {
  display: flex;
  align-items: center;
  margin-top: 20px;
  justify-content: flex-end;
  gap: 12px;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  background-color: #ECF0F4;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 100%;
}

.page-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.main {
  min-height: 100vh;
  width: 100%;
}

main {
  position: relative;
}

body:has(main.main--dashboard) .header .header-nav__fullMenu-trigger {
  background-color: transparent;
  border-top: 0;
  color: #ffffff;
}
body:has(main.main--dashboard) .header .header-nav__fullMenu-trigger::after {
  display: none;
}

.main--dashboard .content {
  padding-left: 0;
}
.main--dashboard .content__inner {
  padding: 0 20px 12px;
}
.main--dashboard .page-title {
  border-radius: 5px;
  padding: 12px 4px;
  margin-bottom: 8px;
  gap: 12px;
}
.main--dashboard .page-title__title {
  margin-right: 16px;
}
.main--dashboard .page-title.fixed {
  left: 0;
  padding: 12px 20px;
}
.main--dashboard .content-section {
  padding: 20px;
  margin-bottom: 48px;
}
.main--dashboard .content-section__title {
  flex-shrink: 0;
  font-size: 22px;
  margin-bottom: 0;
  margin-right: 16px;
  font-weight: 700;
}

.dashboardTitle__left {
  display: flex;
  align-items: center;
}
.dashboardTitle__right {
  flex-shrink: 0;
}
.dashboardTitle__subTitle {
  font-size: 13px;
  margin-top: 2px;
  color: #7e8282;
}

.dashboardDate {
  display: flex;
  align-items: center;
  border-radius: 4px;
  border: 1px solid #ced4da;
  height: 36px;
  background-color: #ffffff;
}
.dashboardDate > * + * {
  border-left: 1px solid #dee2e6;
}
.dashboardDate__btn {
  font-size: 14px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
}
.dashboardDate__btn.prev::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid #868e96;
  border-left: 2px solid #868e96;
  transform: translateX(3px) rotate(-45deg);
}
.dashboardDate__btn.next::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid #868e96;
  border-right: 2px solid #868e96;
  transform: translateX(-3px) rotate(45deg);
}
.dashboardDate__btn:hover {
  background-color: #f8f8f8;
}
.dashboardDate__date {
  font-size: 14px;
  padding: 0 16px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dateRange-btnContainer .dateRange-btn {
  height: 34px;
  padding: 0 12px;
}

.dashboardSummary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.dashboardSummary__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 124px;
  background-color: #ffffff;
  border-radius: 5px;
  padding: 20px 20px 16px;
}
.dashboardSummary__subText {
  font-size: 13px;
  color: #7e8282;
  margin-bottom: 6px;
}
.dashboardSummary__title {
  display: flex;
  align-items: center;
  color: #16191d;
  font-size: 20px;
  font-weight: 700;
}
.dashboardSummary__title > * {
  display: flex;
  align-items: center;
}
.dashboardSummary__title > * + *:before {
  content: "";
  display: block;
  width: 1px;
  height: 12px;
  background-color: #ced4da;
  margin: 0 8px;
}
.dashboardSummary__sales {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #16191d;
  margin-top: 12px;
}
.dashboardSummary__data {
  display: flex;
  align-items: center;
  color: #495057;
  font-size: 16px;
  font-weight: 500;
  margin-top: 8px;
}
.dashboardSummary__data > * {
  display: flex;
  align-items: center;
}
.dashboardSummary__data > * + *:before {
  content: "";
  display: block;
  width: 1px;
  height: 12px;
  background-color: #ced4da;
  margin: 0 8px;
}
.dashboardSummary__up {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #f03e3e;
  font-weight: 500;
  margin-left: 6px;
}
.dashboardSummary__up::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid #f03e3e;
  margin-top: 2px;
}
.dashboardSummary__down {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #1c7ed6;
  font-weight: 500;
  margin-left: 6px;
}
.dashboardSummary__down::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #1c7ed6;
  margin-top: 2px;
}

.dashboardContentTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}
.dashboardContentTitle__left {
  display: flex;
  align-items: center;
}
.dashboardContentTitle__right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dashboardContentTitle__subTitle {
  font-size: 13px;
  margin-top: 2px;
  color: #7e8282;
}

.dashboardInfo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.dashboardInfo__item {
  position: relative;
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
  min-height: 300px;
  overflow: hidden;
}
.dashboardInfo__header {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid #e9ecef;
  min-height: 56px;
}
.dashboardInfo__header .btn.xsm {
  min-height: 32px;
  padding: 0 10px;
}
.dashboardInfo__title {
  font-size: 18px;
  font-weight: 700;
  color: #212529;
  margin-right: auto;
}
.dashboardInfo__titleDate {
  font-size: 13px;
  font-weight: 400;
  color: #7e8282;
}
.dashboardInfo__body {
  height: calc(100% - 56px);
}
.dashboardInfo__noResult {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding-bottom: 20px;
  font-size: 15px;
}
.dashboardInfo__table {
  margin-bottom: 20px;
}
.dashboardInfo__table .table {
  border-top: none;
}
.dashboardInfo__table .table th,
.dashboardInfo__table .table td {
  text-align: center;
  height: 44px;
  line-height: 1.25;
  font-size: 13px;
}
.dashboardInfo__table .table th {
  border-right: 1px solid #f1f3f5;
}
.dashboardInfo__table .table th:only-of-type, .dashboardInfo__table .table th:last-of-type {
  border-right: 0;
}
.dashboardInfo__dateText {
  font-size: 12px;
  color: #7e8282;
}

.dashboardInfoRank {
  padding: 16px 16px 20px;
}
.dashboardInfoRank__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}
.dashboardInfoRank__item + .dashboardInfoRank__item {
  margin-top: 16px;
}
.dashboardInfoRank__item + .dashboardInfoRank__item::before {
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  background-color: #f5f5f5;
  top: -8px;
}
.dashboardInfoRank__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  width: 18px;
  height: 18px;
  color: #ffffff;
  background-color: #b1b6b9;
  border-radius: 50%;
  font-weight: 500;
  flex-shrink: 0;
}
.dashboardInfoRank__text {
  color: #0d0f12;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
}
.dashboardInfoRank__num {
  color: #666968;
  white-space: nowrap;
  font-size: 13px;
  margin-left: 2px;
}
.dashboardInfoRank__left {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.dashboardInfoRank__right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.dashboardInfoRank__price {
  color: #212529;
  font-weight: 500;
  font-size: 13px;
}
.dashboardInfoRank__remindNum {
  color: #212529;
  font-weight: 500;
  font-size: 13px;
}

.intraBoard {
  padding: 16px 16px 20px;
}
.intraBoard__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}
.intraBoard__item + .intraBoard__item {
  margin-top: 16px;
}
.intraBoard__item + .intraBoard__item::before {
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  background-color: #f5f5f5;
  top: -8px;
}
.intraBoard__title {
  color: #0d0f12;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
}
.intraBoard__date {
  color: #7e8282;
  font-size: 13px;
}

.dashboardInfoTab__trigger {
  display: flex;
}
.dashboardInfoTab__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  padding: 0 14px 0 16px;
  flex: 1;
  color: #606060;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #eaeaea;
  border-width: 0px 0px 1px 1px;
  background-color: #f5f5f5;
}
.dashboardInfoTab__btn:hover {
  background-color: #f0f0f0;
}
.dashboardInfoTab__btn.current {
  background-color: #ffffff;
  color: #212529;
  border-bottom: 1px solid #ffffff;
}
.dashboardInfoTab__btn:first-child {
  border-width: 0px 0px 1px 0px;
}
.dashboardInfoTab__btn .dashboardInfo__more {
  font-size: 11px;
}
.dashboardInfoTab__content {
  display: none;
}
.dashboardInfoTab__content.current {
  display: block;
}

.dashboardContent__wrapper + .dashboardContent__wrapper {
  padding-top: 20px;
  margin-top: 28px;
  border-top: 1px solid #e9ecef;
}

.table.table--stats tr:hover td {
  background-color: #f5fbff;
}
.table.table--stats th,
.table.table--stats td {
  font-size: 13px;
  height: 30px;
}
.table.table--stats th {
  padding: 4px 16px;
}
.table.table--stats td {
  padding: 4px 5px;
}
.table.table--stats .table--stats__upText {
  color: #f03e3e;
}
.table.table--stats .table--stats__upText::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid #f03e3e;
  margin-right: 4px;
  margin-bottom: 2px;
}
.table.table--stats .table--stats__downText {
  color: #1c7ed6;
}
.table.table--stats .table--stats__downText::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #1c7ed6;
  margin-right: 4px;
  margin-bottom: 2px;
}

.table.table--statsDashboard td {
  text-align: right;
  white-space: nowrap;
}
.table.table--statsDashboard .mini-info-btn {
  margin-left: 4px;
  margin-bottom: 2px;
}

.table-wrapper:has(.table--statsDashboard) {
  overflow-x: auto;
}

@media screen and (max-width: 1440px) {
  .dashboardSummary {
    grid-template-columns: repeat(3, 1fr);
  }
  .dashboardInfo {
    grid-template-columns: repeat(3, 1fr);
  }
}
.text-order-recept {
  color: #DA6525;
}

.text-order-confirm {
  color: #EA8729;
}

.text-order-prep {
  color: #ECB22A;
}

.text-order-delivery {
  color: #3CAB50;
}

.text-order-complete {
  color: #1c7ed6;
}

.text-order-gray {
  color: #979b9d;
}

.order-status-badge {
  display: inline-block;
  color: #ffffff;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 4px;
}
.order-status-badge.recept {
  background-color: #DA6525;
}
.order-status-badge.confirm {
  background-color: #EA8729;
}
.order-status-badge.prep {
  background-color: #ECB22A;
}
.order-status-badge.gray {
  background-color: #979b9d;
}
.order-status-badge.delivery {
  background-color: #3CAB50;
}
.order-status-badge.complete {
  background-color: #1c7ed6;
}

.btn.recept {
  color: #ffffff;
  background-color: #DA6525;
  font-weight: 500;
}
.btn.recept:hover {
  background-color: #cd5f23;
}
.btn.confirm {
  color: #ffffff;
  background-color: #EA8729;
  font-weight: 500;
}
.btn.confirm:hover {
  background-color: #e97f1b;
}
.btn.prep {
  color: #ffffff;
  background-color: #ECB22A;
  font-weight: 500;
}
.btn.prep:hover {
  background-color: #ebad1c;
}
.btn.delivery {
  color: #ffffff;
  background-color: #3CAB50;
  font-weight: 500;
}
.btn.delivery:hover {
  background-color: #38a04b;
}
.btn.complete {
  color: #ffffff;
  background-color: #1c7ed6;
  font-weight: 500;
}
.btn.complete:hover {
  background-color: #1a76c8;
}
.btn.gray {
  color: #ffffff;
  background-color: #979b9d;
  font-weight: 500;
}
.btn.gray:hover {
  background-color: #8f9396;
}
.btn.delivery {
  color: #ffffff;
  background-color: #3CAB50;
  font-weight: 500;
}
.btn.delivery:hover {
  background-color: #38a04b;
}
.btn.complete {
  color: #ffffff;
  background-color: #1c7ed6;
  font-weight: 500;
}
.btn.complete:hover {
  background-color: #1a76c8;
}

.table.order-section .order-section__header {
  border-bottom: 2px solid #dee2e6;
}
.table.order-section .order-section__header.recept {
  border-color: #DA6525;
}
.table.order-section .order-section__header.confirm {
  border-color: #EA8729;
}
.table.order-section .order-section__header.prep {
  border-color: #ECB22A;
}
.table.order-section .order-section__header.delivery {
  border-color: #3CAB50;
}
.table.order-section .order-section__header.complete {
  border-color: #1c7ed6;
}
.table.order-section .order-section__header.gray {
  border-color: #979b9d;
}
.table.order-section .order-section__header .form-control-container {
  position: relative;
  justify-content: space-between;
  align-items: flex-end;
}
.table.order-section .order-section__header .form-control-container .center {
  position: absolute;
  bottom: -6px;
  left: 50%;
}
.table.order-section .order-section__header > td {
  padding: 14px 10px 6px;
}
.table.order-section .order-section__footer {
  position: relative;
  background-color: #f9f9f9;
  border-bottom: 1px solid #dedede;
}
.table.order-section .order-section__footer > td {
  padding: 12px 10px;
}
.table.order-section .order-section__detail {
  border-bottom: 2px solid #dedede;
}
.table.order-section .order-section__detail > td {
  padding: 0;
}
.table.order-section .order-section__detail-inner {
  background-color: #f0f0f0;
  border-top: 1px solid #dedede;
  padding: 12px 20px;
}
.table.order-section .order-section__detail td {
  background-color: #ffffff;
}
.table.order-section .order-section__detail th {
  padding: 6px 6px;
  word-break: break-all;
}
.table.order-section .order-section__detail .table td {
  padding: 6px 6px;
}
.table.order-section .order-section__detail .table-wrapper {
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
}
.table.order-section .order-section__detail-title {
  text-align: left;
  font-size: 17px;
  color: #343a40;
  font-weight: 700;
  margin-bottom: 8px;
}
.table.order-section .order-section__detail-sum {
  font-weight: 700;
}
.table.order-section .order-section__product {
  display: flex;
  gap: 8px;
}
.table.order-section .order-section__product-image {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 2px;
  overflow: hidden;
}
.table.order-section .order-section__product-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.order-step {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 236px;
  height: 46px;
  color: #ffffff;
  border-radius: 4px 4px 0 0;
  font-size: 15px;
  padding: 0 8px;
}
.order-step__wrapper {
  position: absolute;
  display: flex;
  align-items: center;
  left: 50%;
  top: -4px;
  gap: 6px;
  transform: translateX(calc(-50% - 36px));
}
.order-step.recept {
  background-color: #DA6525;
}
.order-step.confirm {
  background-color: #EA8729;
}
.order-step.prep {
  background-color: #ECB22A;
}
.order-step.delivery {
  background-color: #3CAB50;
}
.order-step.complete {
  background-color: #1c7ed6;
}
.order-step.gray {
  background-color: #979b9d;
}
.order-step em {
  font-style: normal;
  font-weight: 500;
}

.order-number__category {
  font-size: 13px;
  color: #666968;
}
.order-number__content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  color: #212529;
  font-weight: 500;
  word-break: break-all;
}
.order-number__content.recept {
  color: #DA6525;
}
.order-number__content.confirm {
  color: #EA8729;
}
.order-number__content.prep {
  color: #ECB22A;
}
.order-number__content.gray {
  color: #979b9d;
}
.order-number__content.delivery {
  color: #3CAB50;
}
.order-number__content.complete {
  color: #1c7ed6;
}
.order-number__btn-container {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.order-number__btn-container button {
  font-size: 0;
}

.sum-area {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 12px;
}
.sum-area__title {
  display: inline-block;
  color: #3a3a37;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}
.sum-area__title > button {
  position: relative;
}
.sum-area__title > button:after {
  content: "";
  position: relative;
  display: inline-block;
  color: #979b9d;
  width: 0;
  height: 0;
  margin-left: 10px;
  vertical-align: middle;
  border-top: 5px solid;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid transparent;
}
.sum-area__title > button.opened:after {
  transform: rotate(180deg);
  top: -5px;
}
.sum-area__content {
  display: none;
}
.sum-area__content.opened {
  display: block;
}
.sum-area__sign {
  font-family: Tahoma;
  color: #666968;
  font-size: 20px;
  font-weight: 700;
}
.sum-area__list > li {
  position: relative;
  padding-left: 10px;
  font-size: 13px;
  color: #666968;
  line-height: 1.7;
}
.sum-area__list > li::before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: #979b9d;
  border-radius: 50%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.sum-area__list-title {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  margin-left: 7px;
  margin-bottom: 2px;
  color: #3a3a37;
}
.sum-area__list-wrapper {
  text-align: left;
}

/* 개발자 추가 코드 */
/* loding 이미지 */
.loadingImg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 100;
}

.loadingImg .loding_popup_wrap {
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -33px;
  transform: translateY(-50%);
}

.login {
  position: relative;
  max-width: 520px;
  height: 100%;
  margin-inline: auto;
}
.login__page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.login__box {
  width: 480px;
  height: 408px;
  padding: 30px 36px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.login .input-text {
  height: 56px;
  margin-bottom: 2px;
  border-color: #ced4da;
}
.login .input-text:focus {
  border-color: #495057;
}
.login__pageTitle {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}
.login__pageTitle__text {
  position: relative;
  font-size: 22px;
  font-weight: 700;
  color: #212529;
  margin-left: 10px;
  top: 2px;
  word-break: keep-all;
  margin-top: -4px;
}
.login__logo {
  display: none;
  height: 28px;
}
.login__logo.active {
  display: inline-block;
}
.login__logoWrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.login__logoWrapper:hover .siteSelect {
  display: block;
}
.login__logoWrapper .header__siteSelectArrow {
  margin-top: 2px;
}
.login__inputBox {
  margin-bottom: 12px;
}
.login__inputBox .input-text {
  font-size: 15px;
  padding-left: 12px;
}
.login__inputBox .input-text + .input-text {
  margin-top: 20px;
}
.login__inputBox__alertText {
  color: #f03e3e;
  padding-left: 6px;
  font-size: 12px;
  margin-bottom: 8px;
}
.login__inputBox__alertText:last-of-type {
  padding-bottom: 0;
}
.login__inputBox .inputWithBtn .btn {
  flex-shrink: 0;
  height: 60px;
  width: 142px;
}
.login__inputBox .inputTimer {
  width: 100%;
}
.login__misc {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}
.login__misc__link {
  margin-left: auto;
  font-size: 14px;
  color: #1c7ed6;
}
.login__misc__link:hover {
  text-decoration: underline;
}
.login__loginBtn.btn {
  position: absolute;
  bottom: 0;
  margin-bottom: 10px;
  font-size: 20px;
  height: 60px;
  padding: 0 42px;
  font-weight: 500;
}
.login__findResult {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 4px;
  text-align: center;
  font-size: 16px;
  margin-bottom: 16px;
  color: #212529;
  min-height: 140px;
  border: 1px solid #f1f3f5;
}
.login__findResult em {
  font-style: normal;
  font-weight: 500;
  color: #16191d;
}
.login__btnContainer-half {
  display: flex;
  gap: 8px;
}
.login__btnContainer-half .btn {
  flex-grow: 1;
  font-size: 18px;
}

.phoneAuth {
  width: 300px;
  margin-inline: auto;
  text-align: center;
  padding: 20px 0;
}
.phoneAuth__text {
  font-size: 14px;
  color: #030507;
  margin-bottom: 16px;
}
.phoneAuth__inputBox {
  width: 100%;
  margin-bottom: 8px;
}
.phoneAuth__inputBox .input-text {
  width: 100%;
  max-width: none;
  text-align: left;
}
.phoneAuth .input-text[type=number]::-webkit-outer-spin-button, .phoneAuth .input-text[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.phoneAuthTimer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f5f5f5;
  padding: 12px;
  border-radius: 4px;
}
.phoneAuthTimer__left {
  display: flex;
  align-items: center;
}
.phoneAuthTimer__title {
  font-size: 14px;
  font-weight: 500;
  color: #7e8282;
  margin-right: 6px;
}
.phoneAuthTimer svg {
  margin-right: 4px;
}
.phoneAuthTimer__time {
  font-size: 14px;
  font-weight: 700;
  color: #f03e3e;
}
.phoneAuthTimer__resend {
  font-size: 14px;
  font-weight: 400;
  color: #1c7ed6;
  text-decoration: underline;
}/*# sourceMappingURL=style.css.map */