@charset "UTF-8";
@import '../fonts/pretendard/pretendard.css';
@import '../fonts/SCoreDream/SCoreDream.css';
:root {
  --font-family-base: "SCoreDream", "Inter";
  --font-size-base: 16px;
  --font-size-large: 24px;
  --font-size-small: 12px;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --line-height-base: 1.5;
  --bg-color: #ffffff;
  --bg-color-light: #f8f9fa;
  --bg-color-dark: #343a40;
  --bg-outside: #f5f5f5;
  --bg-disabled: #f2f4f7;
  --bg-input: #ffffff;
  --border-color: #dee2e6;
  --border-radius: 0.25rem;
  --box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  --padding-base: 1rem;
  --margin-base: 1rem;
  --common-grey-100: #f7f7f7;
  --btn-default: #ffffff;
  --btn-primary-hover: #f5f5f5;
  --btn-disabled: #808080;
  --btn-disabled-bg: #f2f4f7;
  --btn-select: #59a5ff;
  --btn-primary: #3b71fe;
  --btn-primary-hover: #1454b9;
  --btn-primary-50: #e6f0ff;
  --stroke-default: #d2d2d2;
  --stroke-hover: #3b71fe;
  --stroke-focus: #3b71fe;
  --stroke-correct: #3b71fe;
  --stroke-error: #ee4f24;
  --stroke-wrong: #ff0000;
  --stroke-completion: #222222;
  --stroke-dropdown-open: #000000;
  --stroke-focus-visible: #000000;
  --scrollbar-color: #808080;
  --color-blue-800: #1454b9;
  --color-blue: #3b71fe;
  --color-blue-300: #8cd6ff;
  --color-blue-200: #bbe5ff;
  --color-blue-100: #d9f0ff;
  --color-blue-50: #eef9ff;
  --color-green: #07bba9;
  --color-red: #ee4f24;
  --color-red-800: #cc360e;
  --color-coral: #ff8c78;
  --color-coral-300: #ffcbc2;
  --color-coral-400: #ffe6e2;
  --color-yellow: #ffde6a;
  --color-primary: #00b894;
  --color-secondary: #6c757d;
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --color-info: #17a2b8;
  --color-light: #f8f9fa;
  --color-dark: #343a40;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray: #6c757d;
  --color-muted: #6c757d;
  --color-link: #00b894;
  --color-link-hover: rgba(0, 184, 148, 0.15);
  --color-text: #212529;
  --color-text-reverse: #ffffff;
  --color-text-light: #f8f9fa;
  --color-text-dark: #343a40;
  --color-text-muted: #6c757d;
  --color-text-secondary: #6c757d;
  --color-text-success: #28a745;
  --color-text-danger: #dc3545;
  --color-text-warning: #ffc107;
  --color-text-info: #17a2b8;
  --color-text-white: #ffffff;
  --color-text-black: #000000;
  --color-text-gray: #6c757d;
  --color-text-disabled: #9e9e9e;
}

/* 기본 초기화 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

html {
  font-size: 16px; /* 기본 폰트 크기 */
  line-height: 1.5;
  -webkit-text-size-adjust: 100%; /* 모바일 브라우저에서 텍스트 크기 조정 방지 */
  -webkit-font-smoothing: antialiased; /* 폰트 렌더링 부드럽게 */
  -moz-osx-font-smoothing: grayscale; /* macOS에서 폰트 렌더링 부드럽게 */
  text-rendering: optimizeLegibility; /* 텍스트 가독성 최적화 */
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-base, system-ui, -apple-system, sans-serif);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text);
  background-color: var(--background-color, #ffffff);
  overflow-x: hidden;
}

/* 기본적인 요소 스타일 초기화 */
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
figure {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

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

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

button,
input,
select,
textarea {
  color: inherit;
  border: none;
  background: none;
  outline: none;
  font: inherit;
}

button {
  padding: 0;
  cursor: pointer;
}

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

input,
textarea,
select {
  font: inherit;
  color: inherit;
  border: none;
  outline: none;
  background: none;
}

fieldset {
  border: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

strong,
b {
  font-weight: bold;
}

i,
em {
  font-style: italic;
}

/* 기본 제목 태그 스타일링 */
h1,
h2,
h3 {
  font-weight: 700;
}

h1,
.f44b,
.f44r {
  font-size: 44px;
  /* line-height: 64px; */
  letter-spacing: -1px;
}

h2,
.f32b,
.f32r {
  font-size: 32px;
  /* line-height: 48px; */
  letter-spacing: -1px;
}

h3,
.f28b,
.f28r {
  font-size: 28px;
  /* line-height: 38px; */
  letter-spacing: -0.5px;
}

.f24b,
.f24r {
  font-size: 24px;
  /* line-height: 36px; */
  letter-spacing: -0.5px;
}

/* 폰트사이즈 44 */
.f44b {
  font-weight: 700;
}

.f44r {
  font-weight: 400;
}

/* 폰트사이즈 32 */
.f32b {
  font-weight: 700;
}

.f32r {
  font-weight: 400;
}

/* 폰트사이즈 28 */
.f28b {
  font-weight: 700;
}

.f28r {
  font-weight: 400;
}

/* 폰트사이즈 24 */
.f24b {
  font-weight: 700;
}

.f24r {
  font-weight: 400;
}

/* 폰트사이즈 20 */
.f20b,
.f20r {
  font-size: 20px;
  /* line-height: 32px; */
  letter-spacing: -0.5px;
}

.f20b {
  font-weight: 700;
}

.f20r {
  font-weight: 400;
}

/* 폰트사이즈 16 */
.f16b,
.f16r {
  font-size: 16px;
  /* line-height: 24px; */
  letter-spacing: -0.5px;
}

.f16b {
  font-weight: 700;
}

.f16r {
  font-weight: 400;
}

/* 폰트사이즈 14 */
.f14b,
.f14r {
  font-size: 14px;
  /* line-height: 20px; */
  letter-spacing: -0.5px;
}

.f14b {
  font-weight: 700;
}

.f14r {
  font-weight: 400;
}

.guide-text {
  font-size: 13px;
  color: #737373;
}

/* 기본 버튼 스타일 */
.btn,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.25;
  transition: box-shadow 0.1s ease-in-out, background-color 0.1s ease-in-out;
  cursor: pointer;
  /* Added Focus Styles */
}
.btn:hover,
button:hover {
  background-color: var(--btn-hover);
  box-shadow: 0px 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
}
.btn:disabled,
button:disabled {
  cursor: default;
  pointer-events: none;
  background-color: var(--btn-disabled-bg);
  border-color: var(--stroke-default);
  color: var(--font-disabled);
}
.btn:focus-visible, .btn[role=button]:focus-visible,
button:focus-visible,
button[role=button]:focus-visible {
  outline: 1px solid var(--btn-primary-focus);
  outline-offset: -0.1875rem;
  border-color: transparent !important;
  background-clip: padding-box !important;
}

.btn {
  --py: 10px;
  --px: 24px;
  padding: var(--py) var(--px);
  font-size: 1rem;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
}

.btn-primay {
  background-color: var(--btn-primary);
  border-color: var(--btn-primary);
  color: var(--color-text-reverse);
  background: #00b894;
  color: #ffffff;
  border-color: #00b894;
}
.btn-primay:hover {
  background-color: var(--btn-primary-hover);
  box-shadow: 0px 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
  background: #00b894;
}
.btn-primay:active {
  background: #00b894;
}


.btn-blue {
  background-color: var(--btn-primary);
  border-color: var(--btn-primary);
  color: var(--color-text-reverse);
  background: #004FFF;
  color: #ffffff;
  border-color: #004FFF;
}
.btn-blue:hover {
  background-color: var(--btn-primary-hover);
  box-shadow: 0px 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
  background: #004FFF;
}
.btn-blue:active {
  background: #004FFF;
}

.btn-orange {
  background-color: var(--btn-primary);
  border-color: var(--btn-primary);
  color: var(--color-text-reverse);
  background: #FF6F00;
  color: #ffffff;
  border-color: #FF6F00;
}
.btn-orange:hover {
  background-color: var(--btn-primary-hover);
  box-shadow: 0px 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
  background: #FF6F00;
}
.btn-orange:active {
  background: #FF6F00;
}

.btn-secondary {
  background-color: var(--btn-secondary);
  border-color: var(--btn-secondary);
  color: var(--color-text-reverse);
  background: #262626;
  color: #ffffff;
  border-color: #262626;
}
.btn-secondary:hover {
  background-color: var(--btn-secondary-hover);
  box-shadow: 0px 0.5re, 1.5rem rgba(0, 0, 0, 0.12);
  background: #1f1f1f;
}
.btn-secondary:active {
  background: #333333;
}

.btn-default {
  background-color: var(--btn-default);
  border-color: var(--btn-default);
  color: var(--color-text);
  background: #ffffff;
  border: 1px solid #d4d4d4;
}
.btn-default:hover {
  background-color: var(--btn-default-hover);
  box-shadow: 0px 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
  background: #f3f4f6;
}
.btn-default:active {
  background: #e5e7eb;
}

.form-actions,
.btn-group {
  --gap: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
}
.form-actions > button,
.form-actions .btn,
.btn-group > button,
.btn-group .btn {
  height: 100%;
}
.form-actions:not(.flex-end) .btn,
.btn-group:not(.flex-end) .btn {
  width: 100%;
}

.form-actions > button,
.form-actions .btn {
  --py: 1.375rem;
  --px: 0.625rem;
  font-size: 1rem;
}

.modal-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  font-size: 0;
  cursor: pointer;
}
.modal-help:after {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background: url("../img/icons/ic_help.svg") no-repeat center center;
  background-size: contain;
}
.modal-help:hover {
  background: #f3f4f6;
  box-shadow: none;
}

.badge {
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: #ffffff;
  border-radius: 20px;
}
.badge.badge-green {
  background: #00b894;
}
.badge.badge-blue {
  background: #004fff;
}

input,
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.25;
  color: #000;
  background-color: #fff;
  transition: border-color 0.3s ease;
}
input:hover,
select:hover,
textarea:hover {
  border-color: #00b894;
}
input:focus,
select:focus,
textarea:focus {
  border-color: #00b894;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 184, 148, 0.25);
}
input:disabled,
select:disabled,
textarea:disabled {
  background-color: #f5f5f5;
  color: #1f1f1f;
  cursor: not-allowed;
}
input::placeholder,
select::placeholder,
textarea::placeholder {
  color: #cccccc;
}
input.error,
select.error,
textarea.error {
  border-color: #dc3545;
}

select {
  padding-right: 36px;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23999" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
select option {
  font-size: 16px;
  color: #000;
  background-color: #fff;
  padding: 8px;
}
select option:hover {
  background-color: #f5f5f5;
}
select option:checked {
  background-color: #00b894;
  color: #fff;
}

textarea {
  min-height: 90px;
}

.input-group {
  --gap: 8px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--gap);
}
.input-group input,
.input-group select,
.input-group textarea {
  flex: 1;
}

.error-message {
  color: #dc3545;
  font-size: 14px;
  margin-top: 4px;
}

.form-section {
  --gap: 1rem;
  --mb: 2rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin-bottom: var(--mb);
}
.form-section:last-child {
  margin-bottom: 0;
}

.form-group {
  --gap: 8px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.form-group > label {
  flex: none;
  font-size: 14px;
  color: #404040;
}
.form-group > .input-group {
  flex: none;
  width: 100%;
}
.form-group.inline {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}
.form-group.flex-row {
  flex-direction: row;
}
.form-group.flex-row > label {
  margin-top: 8px;
  flex: 0 0 auto;
  width: 120px;
}
.form-group.flex-row > .input-group {
  flex: 2;
}
.form-group.row-reverse {
  flex-direction: row-reverse;
}
.form-group.row-reverse > label {
  flex: 1;
}
.form-group.row-reverse > .input-group {
  flex: 2;
}

.form-row {
  --gap: 16px;
  --mb: 16px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gap);
  margin-bottom: var(--mb);
}
.form-row:last-child {
  margin-bottom: 0;
}
.form-row > .form-group {
  flex: 1;
  min-width: 200px;
}

/* Form styles */
/* checkbox, radio, toggle */
.radio,
.checkbox {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.radio input,
.checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  visibility: hidden;
}
.radio input[type=checkbox] + label:before, .radio input[type=checkbox] + label:after,
.checkbox input[type=checkbox] + label:before,
.checkbox input[type=checkbox] + label:after {
  border-radius: 3px;
}
.radio input[type=checkbox]:checked + label:before, .radio input[type=checkbox]:checked + label:after,
.checkbox input[type=checkbox]:checked + label:before,
.checkbox input[type=checkbox]:checked + label:after {
  border-radius: 3px;
}
.radio input[type=checkbox]:checked + label:after,
.checkbox input[type=checkbox]:checked + label:after {
  background: #00b894 url("../img/icons/ic_check_wh.svg") no-repeat center;
}
.radio input[type=checkbox]:checked + label:before,
.checkbox input[type=checkbox]:checked + label:before {
  background-color: #00b894;
  border-color: #00b894;
}
.radio input[type=radio] + label:before, .radio input[type=radio] + label:after,
.checkbox input[type=radio] + label:before,
.checkbox input[type=radio] + label:after {
  border-radius: 50%;
}
.radio input[type=radio]:checked + label:after,
.checkbox input[type=radio]:checked + label:after {
  left: 4px;
  width: 6px;
  height: 6px;
  background-color: #00b894;
}
.radio input[type=radio]:checked + label:before,
.checkbox input[type=radio]:checked + label:before {
  border-color: #00b894;
}
.radio input:disabled,
.checkbox input:disabled {
  cursor: not-allowed;
  background-color: #f5f5f5;
  color: #999;
}
.radio input:disabled + label,
.checkbox input:disabled + label {
  color: #999;
}
.radio label,
.checkbox label {
  display: flex;
  padding-left: 24px;
  font-size: 16px;
  color: #000;
  width: 100%;
  cursor: pointer;
}
.radio label:before, .radio label:after,
.checkbox label:before,
.checkbox label:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  transition: background-color 0.15s ease-in-out, border 0.15s ease-in-out;
}
.radio label:before,
.checkbox label:before {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.65);
}
.radio:hover label:before,
.checkbox:hover label:before {
  border-color: #00b894;
}

.container,
.container_full {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0 0.2rem;
}

.container {
  max-width: 1280px;
}

.row {
  --gutter-x: 1rem;
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(-0.5 * var(--gutter-x));
  margin-right: calc(-0.5 * var(--gutter-x));
}
/* .row > * {
  --gutter-x: 1rem;
  padding-left: calc(var(--gutter-x) * 0.5);
  padding-right: calc(var(--gutter-x) * 0.5);
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
} */

.col {
  flex: 1 0 0;
}
.col-1 {
  flex: 0 0 auto;
  width: 8.3333333333%;
}
.col-2 {
  flex: 0 0 auto;
  width: 16.6666666667%;
}
.col-3 {
  flex: 0 0 auto;
  width: 25%;
}
.col-4 {
  flex: 0 0 auto;
  width: 33.3333333333%;
}
.col-5 {
  flex: 0 0 auto;
  width: 41.6666666667%;
}
.col-6 {
  flex: 0 0 auto;
  width: 50%;
}
.col-7 {
  flex: 0 0 auto;
  width: 58.3333333333%;
}
.col-8 {
  flex: 0 0 auto;
  width: 66.6666666667%;
}
.col-9 {
  flex: 0 0 auto;
  width: 75%;
}
.col-10 {
  flex: 0 0 auto;
  width: 83.3333333333%;
}
.col-11 {
  flex: 0 0 auto;
  width: 91.6666666667%;
}
.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}
@media (min-width: 0) {
  .col-auto-xs {
    width: auto;
  }
}
@media (min-width: 576px) {
  .col-auto-sm {
    width: auto;
  }
}
@media (min-width: 768px) {
  .col-auto-md {
    width: auto;
  }
}
@media (min-width: 992px) {
  .col-auto-lg {
    width: auto;
  }
}
@media (min-width: 1280px) {
  .col-auto-xl {
    width: auto;
  }
}

@media (min-width: 0) {
  .container-0 {
    max-width: 0;
  }
  .row-0 {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
  .col-xs-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-xs-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xs-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xs-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-xs-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-xs-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xs-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-xs-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-xs-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xs-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-xs-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-xs-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 576px) {
  .container-576px {
    max-width: 576px;
  }
  .row-576px {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .container-768px {
    max-width: 768px;
  }
  .row-768px {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 992px) {
  .container-992px {
    max-width: 992px;
  }
  .row-992px {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 1280px) {
  .container-1280px {
    max-width: 1280px;
  }
  .row-1280px {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}

#car-registration .modal-body,
#find-password-modal .modal-body,
#reservation-cancel-modal .modal-body{
  padding-bottom:90px;
}
.modal .modal-content .modal-body:nth-child(1) {
  padding-top: 24px;
}
.modal .modal-content .modal-inner-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
  max-height:calc(90vh - 230px) ! important;
  box-sizing:border-box;
  overflow:hidden;
  overflow-y:auto;
}
.modal .modal-content .modal-inner-content.alert {
  max-width: 400px;
  padding: 32px 32px 8px;
}
.modal .modal-content .modal-inner-content.size-xs {
  max-width: 300px;
  padding-top: 0;
  padding-bottom: 8px;
}
.modal .modal-content .modal-inner-content.size-sm {
  max-width: 480px;
  padding-top: 0;
  padding-bottom: 8px;
}
.modal .modal-content .modal-inner-content.size-lg {
  max-width: 600px;
}
.modal .modal-content .modal-inner-content.size-xl {
  max-width: 800px;
}
.modal .modal-content .modal-inner-content.size-xxl {
  max-width: 1000px;
}
.modal .modal-content .modal-inner-content.size-xxxl {
  max-width: 1200px;
}
.modal .modal-content .modal-inner-content.size-xxxxl {
  max-width: 1400px;
}
.modal .modal-content .modal-actions {
  position:absolute;
  left:0;bottom:0;width:100%;
  gap: 12px;
  padding: 16px 24px 24px;
}
.modal .modal-content .modal-actions.border-top {
  border-top: 1px solid #e5e7eb;
}
.modal .modal-content .modal-actions .btn {
  padding: 13px 16px;
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
}
.modal .modal-content .guide-box p {
  color: #737373;
  font-size: 14px;
}
.modal .modal-content .guide-box a {
  color: #000000;
  font-size: 14px;
}

.help-price {
  margin-top: 20px;
}
.help-price .time {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #525252;
  font-size: 18px;
}
.help-price .time > [class^=ic_] {
  width: 16px;
  height: 16px;
}
.help-price .price {
  font-size: 20px;
  font-weight: 600;
}

.accordion {
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
}
.accordion .accordion-item {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 24px;
}
.accordion .accordion-item .accordion-header {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 24px;
  font-size: 20px;
  border: none;
  outline: none;
  background-color: #ffffff;
  border-radius: 7px;
  transition: background-color 0.3s ease;
  cursor: pointer;
}
.accordion .accordion-item .accordion-header .header-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  background: #262626;
  border-radius: 50%;
  margin-right: 12px;
}
.accordion .accordion-item .accordion-header .header-icon span {
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  color: #ffffff;
}
.accordion .accordion-item .accordion-header .header-title {
  font-size: 20px;
  color: #000000;
}
.accordion .accordion-item .accordion-header .header-toggle {
  position: absolute;
  right: 24px;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.accordion .accordion-item .accordion-header .header-toggle .toggle-icon {
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE2IDE2SDBWMGgxNnYxNnoiLz48cGF0aCBkPSJNNy4yOTQgMTIuNzA2Yy4zOS4zOSAxLjAyNS4zOSAxLjQxNSAwbDYtNmExLjAwMiAxLjAwMiAwIDAwLTEuNDE1LTEuNDE1TDggMTAuNTg0bC01LjI5NC01LjI5YTEuMDAyIDEuMDAyIDAgMDAtMS40MTUgMS40MTVsNiA2IC4wMDMtLjAwM3oiIGZpbGw9IiMwMDAiLz48L3N2Zz4=") no-repeat center;
  background-size: 16px;
  transition: transform 0.3s ease;
}
.accordion .accordion-item .accordion-header .header-toggle:hover {
  background: rgba(0, 184, 148, 0.1);
}
.accordion .accordion-item .accordion-content {
  display: none;
  padding: 24px;
  font-size: 16px;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  overflow: hidden;
  border-radius: 0 0 7px 7px;
  transition: max-height 0.3s ease;
}
.accordion .accordion-item:last-child {
  margin-bottom: 0;
}
.accordion .accordion-item.active .accordion-header {
  background: #fafafa;
  border-radius: 7px 7px 0 0;
}
.accordion .accordion-item.active .header-toggle .toggle-icon {
  transform: rotate(180deg);
}
.accordion .accordion-item.toggle-none .accordion-header {
  border-radius: 7px 7px 0 0;
}
.accordion .accordion-item.toggle-none .accordion-content,
.accordion .accordion-item.active .accordion-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media screen and (max-width:674px){
  .accordion .accordion-item .accordion-header {padding:12px 24px 12px 12px;}
  .accordion .accordion-item .accordion-header .header-toggle{margin-right:-20px;}
  .accordion .accordion-item .accordion-header .header-icon{margin-right:6px;}
  .accordion .accordion-item.active .accordion-content{padding:12px;}
}
.calendar {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.calendar .calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.calendar .calendar-header .prev-month,
.calendar .calendar-header .next-month {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #6b7280;
}
.calendar .calendar-header .prev-month:hover,
.calendar .calendar-header .next-month:hover {
  color: #374151;
}
.calendar .calendar-header .prev-month .icon,
.calendar .calendar-header .next-month .icon {
  font-size: 20px;
}
.calendar .calendar-header .current-month {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}
.calendar .calendar-body .calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #f3f4f6;
  padding: 8px 0;
}
.calendar .calendar-body .calendar-weekdays .weekday {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
}
.calendar .calendar-body .calendar-dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 16px;
}
.calendar .calendar-body .calendar-dates .date {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: #111827;
  border-radius: 4px;
  cursor: pointer;
}
.calendar .calendar-body .calendar-dates .date:hover {
  background: #f3f4f6;
}
.calendar .calendar-body .calendar-dates .date.selected {
  background: #00b894;
  color: #ffffff;
}
.calendar .calendar-body .calendar-dates .date.disabled {
  color: #9ca3af;
  pointer-events: none;
}

/* calendar weekly styles */
.calendar-week {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  /* calendar weekly styles2 */
}
.calendar-week .calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.calendar-week .calendar-header .prev-week,
.calendar-week .calendar-header .next-week {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #6b7280;
}
.calendar-week .calendar-header .prev-week:hover,
.calendar-week .calendar-header .next-week:hover {
  color: #374151;
}
.calendar-week .calendar-header .prev-week [class*=ic_],
.calendar-week .calendar-header .next-week [class*=ic_] {
  font-size: 14px;
  width: 14px;
  height: 14px;
}
.calendar-week .calendar-header .current-week {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}
.calendar-week .calendar-body .calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #f3f4f6;
  padding: 8px 0;
}
.calendar-week .calendar-body .calendar-weekdays .weekday {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
}
.calendar-week .calendar-body .calendar-dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 16px;
}
.calendar-week .calendar-body .calendar-dates .date {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  border-radius: 4px;
  cursor: pointer;
}
.calendar-week .calendar-body .calendar-dates .date:hover {
  background: #f3f4f6;
}
.calendar-week .calendar-body .calendar-dates .date.selected {
  background: #00b894;
  color: #ffffff;
}
.calendar-week .calendar-body .calendar-dates .date.disabled {
  color: #9ca3af;
  pointer-events: none;
}
.calendar-week.weekly-type2 {
  position: relative;
  width: 100%;
  max-width: none;
  padding: 5px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
  overflow: hidden;
}
.calendar-week.weekly-type2 .calendar-header {
  background: #fff;
  padding: 0;
  border: none;
}
.calendar-week.weekly-type2 .calendar-header > button {
  position: absolute;
  bottom: 27px;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  width: 34px;
  height: 34px;
  transition: background-color 0.3s;
}
.calendar-week.weekly-type2 .calendar-header > button:hover {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.calendar-week.weekly-type2 .calendar-header .prev-week {
  left: 24px;
}
.calendar-week.weekly-type2 .calendar-header .next-week {
  right: 24px;
}
.calendar-week.weekly-type2 .calendar-body {
  padding-left: 60px;
  padding-right: 60px;
}
.calendar-week.weekly-type2 .calendar-body .calendar-weekdays {
  padding-top: 0;
  padding-bottom: 16px;
  background: transparent;
}
.calendar-week.weekly-type2 .calendar-body .calendar-weekdays .weekday {
  color: #374151;
}
.calendar-week.weekly-type2 .calendar-body .calendar-dates {
  padding: 0;
}
.calendar-week.weekly-type2 .calendar-body .calendar-dates .date {
  background: #f4f4f4;
}
.calendar-week.weekly-type2 .calendar-body .calendar-dates .date:hover {
  background: rgba(0, 184, 148, 0.25);
}
.calendar-week.weekly-type2 .calendar-body .calendar-dates .date.selected {
  background: #00b894;
  color: #ffffff;
}
.calendar-week.weekly-type2 .calendar-body .calendar-dates .date.selected:hover {
  background: rgba(0, 184, 148, 0.8);
}
.calendar-week.weekly-type2 .calendar-body .calendar-dates .date.selected.disabled {
  background: #00b894;
  color: #ffffff;
}

@media screen and (max-width:674px){
  /* .calendar-week.weekly-type2{padding:12px 50px;} */
  .calendar-week.weekly-type2 .calendar-header > button{bottom:33px;}
  .calendar-week.weekly-type2 .calendar-header .prev-week{left:12px;}
  .calendar-week.weekly-type2 .calendar-header .next-week{right:12px;}
  .calendar-week.weekly-type2 .calendar-body{padding:0 0 10px 0;overflow:hidden;overflow-x:auto;}
  .calendar-week.weekly-type2 .calendar-body::-webkit-scrollbar {
      height: 8px;
  }
  .calendar-week.weekly-type2 .calendar-body::-webkit-scrollbar-thumb {
      background-color: #ddd;
      border-radius: 4px;
  }
  .calendar-week.weekly-type2 .calendar-body::-webkit-scrollbar-track {
      background-color: #f1f1f1;
  }
  .calendar-week.weekly-type2 .calendar-body .calendar-weekdays .weekday{min-width:44px;}
  .calendar-week.weekly-type2 .calendar-body .calendar-dates .date{min-width:40px;}
}
[class^=list_] {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  font-size: 16px;
  font-weight: 400;
}
[class^=list_] > li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
}

.list-check-type1 > li {
  position: relative;
  padding-left: 20px;
}
.list-check-type1 > li:after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEwLjk1IDEuNzk1QTEgMSAwIDEwOS41MzYuMzgxbC00Ljk1IDQuOTVMMi40NjUgMy4yMUExIDEgMCAwMDEuMDUgNC42MjRsMi43NTggMi43NThhMS4xIDEuMSAwIDAwMS41NTYgMGw1LjU4Ni01LjU4N3oiIGZpbGw9IiMwMDAiLz48L3N2Zz4=") no-repeat center;
  background-size: 13px;
  position: absolute;
  top: 4px;
  left: 0;
}

.list-dot > li {
  position: relative;
  padding-left: 12px;
}
.list-dot > li:after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #232323;
  position: absolute;
  top: 10px;
  left: 0;
}

.icon,
[class*=ic_] {
  position: relative;
  font-style: normal;
  line-height: 1;
  width: 24px;
  height: 24px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #000000;
  text-decoration: none;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  text-indent: 0;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
}
.icon:after,
[class*=ic_]:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

.ic_notification:after {
  background-image: url("../img/icons/ic_notification.svg");
}

.ic_instargram:after {
  background-image: url("../img/icons/ic_instagram.svg");
}

.ic_facebook:after {
  background-image: url("../img/icons/ic_facebook.svg");
}

.ic_youtube:after {
  background-image: url("../img/icons/ic_youtube.svg");
}

.ic_car_wash:after {
  background-image: url("../img/icons/ic_car_wash.svg");
}

.ic_glass_coating:after {
  background-image: url("../img/icons/ic_glass_coating.svg");
}

.ic_polishing:after {
  background-image: url("../img/icons/ic_polishing.svg");
}

.ic_interior_coating:after {
  background-image: url("../img/icons/ic_interior_coating.svg");
}

.ic_other_services:after {
  background-image: url("../img/icons/ic_other_services.svg");
}

.ic_clock:after {
  background-image: url("../img/icons/ic_clock.svg");
}

.ic_help:after {
  background-image: url("../img/icons/ic_help.svg");
}

.ic_card:after {
  background-image: url("../img/icons/ic_card.svg");
}

.ic_email:after {
  background-image: url("../img/icons/ic_email.svg");
}

.ic_manual_payment:after {
  background-image: url("../img/icons/ic_manual_payment.svg");
}

.ic_arrow_pre::after {
  background-image: url("../img/icons/ic_arrow_pre.svg");
}

.ic_arrow_next::after {
  background-image: url("../img/icons/ic_arrow_next.svg");
}

.ic_kakaokalk:after {
  background-image: url("../img/icons/ic_kakaokalk.svg");
}

.ic_kakaokalk2:after {
  background-image: url("../img/icons/ic_kakaotalk2.svg");
}

.ic_google:after {
  background-image: url("../img/icons/ic_google.svg");
}

.ic_naver:after {
  background-image: url("../img/icons/ic_naver.svg");
}

.ic_clock2:after {
  background-image: url("../img/icons/ic_clock2.svg");
}

.ic_sendemail:after {
  background-image: url("../img/icons/ic_sendemail.svg");
}

.ic_check_lg:after {
  background-image: url("../img/icons/ic_check_lg.svg");
}

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

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

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

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

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

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

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

.pt-4 {
  padding-top: 4px !important;
}

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

.pl-4 {
  padding-left: 4px !important;
}

.pr-4 {
  padding-right: 4px !important;
}

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

.py-4 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

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

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

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

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

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

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

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

.pt-8 {
  padding-top: 8px !important;
}

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

.pl-8 {
  padding-left: 8px !important;
}

.pr-8 {
  padding-right: 8px !important;
}

.px-8 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.py-8 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

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

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

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

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

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

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

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

.pt-16 {
  padding-top: 16px !important;
}

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

.pl-16 {
  padding-left: 16px !important;
}

.pr-16 {
  padding-right: 16px !important;
}

.px-16 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.py-16 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

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

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

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

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

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

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

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

.pt-20 {
  padding-top: 20px !important;
}

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

.pl-20 {
  padding-left: 20px !important;
}

.pr-20 {
  padding-right: 20px !important;
}

.px-20 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

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

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

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

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

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

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

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

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

.pt-24 {
  padding-top: 24px !important;
}

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

.pl-24 {
  padding-left: 24px !important;
}

.pr-24 {
  padding-right: 24px !important;
}

.px-24 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.py-24 {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

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

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

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

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

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

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

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

.pt-32 {
  padding-top: 32px !important;
}

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

.pl-32 {
  padding-left: 32px !important;
}

.pr-32 {
  padding-right: 32px !important;
}

.px-32 {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

.py-32 {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

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

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

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

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

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

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

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

.pt-48 {
  padding-top: 48px !important;
}

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

.pl-48 {
  padding-left: 48px !important;
}

.pr-48 {
  padding-right: 48px !important;
}

.px-48 {
  padding-left: 48px !important;
  padding-right: 48px !important;
}

.py-48 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

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

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

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

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

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

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

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

.pt-64 {
  padding-top: 64px !important;
}

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

.pl-64 {
  padding-left: 64px !important;
}

.pr-64 {
  padding-right: 64px !important;
}

.px-64 {
  padding-left: 64px !important;
  padding-right: 64px !important;
}

.py-64 {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

.w-1 {
  width: 8.3333333333% !important;
}

.w-2 {
  width: 16.6666666667% !important;
}

.w-3 {
  width: 25% !important;
}

.w-4 {
  width: 33.3333333333% !important;
}

.w-5 {
  width: 41.6666666667% !important;
}

.w-6 {
  width: 50% !important;
}

.w-7 {
  width: 58.3333333333% !important;
}

.w-8 {
  width: 66.6666666667% !important;
}

.w-9 {
  width: 75% !important;
}

.w-10 {
  width: 83.3333333333% !important;
}

.w-11 {
  width: 91.6666666667% !important;
}

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

@media (min-width: 576px) {
  .mr-sm-auto {
    margin-right: auto !important;
  }
}

@media (min-width: 768px) {
  .mr-md-auto {
    margin-right: auto !important;
  }
}

@media (min-width: 992px) {
  .mr-lg-auto {
    margin-right: auto !important;
  }
}

@media (min-width: 1280px) {
  .mr-xl-auto {
    margin-right: auto !important;
  }
}

.relative {
  position: relative !important;
}

.absolute {
  position: absolute !important;
}

.fixed {
  position: fixed !important;
}

.sticky {
  position: sticky !important;
}

.flex {
  display: flex !important;
}

.flex-row {
  flex-direction: row !important;
}

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

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

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

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

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

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

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

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

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

.flex-space-evenly {
  justify-content: space-evenly !important;
}

.flex-space-around {
  justify-content: space-around !important;
}

.align-self-auto {
  align-self: auto !important;
}

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

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

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

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

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

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

.justify-self-auto {
  justify-self: auto !important;
}

.justify-self-end {
  justify-self: end !important;
}

.justify-self-start {
  justify-self: start !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

.basis-1 {
  flex-basis: 8.3333333333% !important;
}

.basis-2 {
  flex-basis: 16.6666666667% !important;
}

.basis-3 {
  flex-basis: 25% !important;
}

.basis-4 {
  flex-basis: 33.3333333333% !important;
}

.basis-5 {
  flex-basis: 41.6666666667% !important;
}

.basis-6 {
  flex-basis: 50% !important;
}

.basis-7 {
  flex-basis: 58.3333333333% !important;
}

.basis-8 {
  flex-basis: 66.6666666667% !important;
}

.basis-9 {
  flex-basis: 75% !important;
}

.basis-10 {
  flex-basis: 83.3333333333% !important;
}

.basis-11 {
  flex-basis: 91.6666666667% !important;
}

.basis-12 {
  flex-basis: 100% !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

.basis-1 {
  flex-basis: 8.3333333333% !important;
}

.basis-2 {
  flex-basis: 16.6666666667% !important;
}

.basis-3 {
  flex-basis: 25% !important;
}

.basis-4 {
  flex-basis: 33.3333333333% !important;
}

.basis-5 {
  flex-basis: 41.6666666667% !important;
}

.basis-6 {
  flex-basis: 50% !important;
}

.basis-7 {
  flex-basis: 58.3333333333% !important;
}

.basis-8 {
  flex-basis: 66.6666666667% !important;
}

.basis-9 {
  flex-basis: 75% !important;
}

.basis-10 {
  flex-basis: 83.3333333333% !important;
}

.basis-11 {
  flex-basis: 91.6666666667% !important;
}

.basis-12 {
  flex-basis: 100% !important;
}

.grid-1 {
  display: grid !important;
  grid-template-columns: repeat(1, 1fr) !important;
}

.grid-2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
}

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

.grid-4 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
}

.grid-5 {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
}

.grid-6 {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
}

.grid-7 {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
}

.grid-8 {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr) !important;
}

.grid-9 {
  display: grid !important;
  grid-template-columns: repeat(9, 1fr) !important;
}

.grid-10 {
  display: grid !important;
  grid-template-columns: repeat(10, 1fr) !important;
}

.grid-11 {
  display: grid !important;
  grid-template-columns: repeat(11, 1fr) !important;
}

.grid-12 {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
}

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

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

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

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

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

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

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

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

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

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

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

.scrollable-content-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-bottom: 8px; /* 스크롤바 공간 확보 */
}

.scrollable-content {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 8px 0;
  width: 100%;
  scrollbar-width: thin; /* Firefox용 스크롤바 크기 */
  scrollbar-color: #9ca3af #f3f4f6; /* 스크롤바 색상 (Firefox) */
}
.scrollable-content::-webkit-scrollbar {
  width: 6px;
  background-color: #f3f4f6;
}
.scrollable-content::-webkit-scrollbar-thumb {
  background-color: #9ca3af; /* 스크롤바 색상 */
  border-radius: 4px; /* 스크롤바 모서리 둥글게 */
}
.scrollable-content::-webkit-scrollbar-thumb:hover {
  background-color: #6b7280; /* 스크롤바 호버 색상 */
}
.scrollable-content::-webkit-scrollbar-track {
  background-color: #f3f4f6; /* 스크롤바 트랙 색상 */
  border-radius: 4px;
}

.app_header,
.app_footer,
.app_layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow-x:hidden;
}

.app_layout {
  min-height: 100vh;
}

.app_header {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 10;
}
@media screen and (max-width:674px){
  .app_header.scrolled{
    z-index:9999;
  }
}
.app_header + .app_layout {
  margin-top: 138px;
}
.app_header.app-download-close {
  height: 74px;
}
.app_header.app-download-close + .app_layout {
  margin-top: 74px;
}

.transparent + .app_layout {
  margin-top: 64px;
}
.transparent.app-download-close {
  height: 74px;
}
.transparent.app-download-close + .app_layout {
  margin-top: 0;
}

.app_layout {
  margin-top: 64px;
  background-color: #f5f5f5;
  transition: margin-top 0.15s ease-in-out;
}
.app_layout > .container {
  flex-direction: row;
}

.app_sidebar {
  float:left;
  display: flex;
  flex-direction: column;
  margin:32px 0 80px;
  padding:16px;
  width: 250px;
  border:1px solid #e5e7eb;
  border-radius: 7px;
  background:#fff;
}
.app_sidebar li + li{margin-top:10px;}
.app_sidebar a{display:block;padding:0 0 0 40px;line-height:42px;border-radius:6px;}
.app_sidebar .account{background:url(../img/icons/ic_side_account.svg) no-repeat 12px center/16px}
.app_sidebar .reservation{background:url(../img/icons/ic_side_reservation.svg) no-repeat 12px center/16px}
.app_sidebar .product{background:url(../img/icons/ic_side_product.svg) no-repeat 12px center/16px}
.app_sidebar .logout{background:url(../img/icons/ic_side_logout.svg) no-repeat 12px center/16px}
.app_sidebar .active{background-color:#f5f5f5;}

.app_sidebar + #content{
  margin-left:270px;
}


@media screen and (max-width:1020px){
    .app_sidebar{float:none;margin-bottom:0;width:100%;}
    .app_sidebar ul{display:flex;padding-bottom:10px;overflow:hidden;overflow-x:auto;}
    .app_sidebar ul::-webkit-scrollbar{height:8px;}
    .app_sidebar ul::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px;}
    .app_sidebar ul::-webkit-scrollbar-track{background-color:#f1f1f1;}
    .app_sidebar li{width:100%;min-width:80px;}
    .app_sidebar li + li{margin-top:0;}
    .app_sidebar a{padding:40px 0 10px 0;line-height:20px;text-align:center;}
    .app_sidebar a{background-position:center 10px ! important;}
    .app_sidebar + #content{margin-left:0;}
}
#content {
  flex: 1;
  padding: 32px 0 80px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
#content .section {
  --gap: 1rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
#content .section .section-header {
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
@media screen and (min-width: 1280px) {
  #content .section .section-header {
    flex-direction: row;
    gap: 24px;
    text-align: left;
  }
}
#content .section .section-header h2 {
  text-align: center;
}
#content .section .section_title {
  font-size: 1.5rem;
  color: #000;
  align-items: center;
}
#content .section .section_content {
  font-size: 1rem;
  color: #666;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: -14px;
}
.page-header .page-title {
  font-size: 24px;
  color: #000;
}
.page-header .page-actions {
  display: flex;
  gap: 16px;
}
.page-header .page-actions button {
  padding: 8px 16px;
  background-color: #00b894;
  color: #fff;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
.page-header .page-actions button:hover {
  background-color: #0056b3;
}

/* Header 스타일 */
.app_header {
  background-color: #ffffff;
  border-bottom: 1px solid #e5e5e5;
  transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-bottom 0.15s ease-in-out;
  /* Navigation Section */
}
.app_header .app_download {
  background: #001e60;
}
.app_header .app_download .app_download_content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 11px 16px;
  width: 100%;
}
@media (min-width: 992px) {
  .app_header .app_download .app_download_content {
    height: 64px;
  }
}
.app_header .app_download .app_download_content .app_download_text {
  display: flex;
  flex-direction: column;
  padding-right: 40px;
}
@media (min-width: 992px) {
  .app_header .app_download .app_download_content .app_download_text {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 0;
  }
}
.app_header .app_download .app_download_content .app_download_text .app_title {
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  color: #5c84da;
}
@media (min-width: 992px) {
  .app_header .app_download .app_download_content .app_download_text .app_title {
    font-size: 20px;
  }
}
.app_header .app_download .app_download_content .app_download_text .app_description {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
  color: #ffffff;
}
.app_header .app_download .app_download_content .app_download_close {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background-color: #ffffff;
  line-height: 1;
  font-weight: 700;
  font-size: 24px;
  background: url(../img/icons/ic_close_wh.svg) no-repeat center/24px;
}
.app_header .mobile_menu_trigger {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  box-shadow: none;
  order: 3;
  background: rgbA(255, 255, 255, 0.9);
}
@media (min-width: 992px) {
  .app_header .mobile_menu_trigger {
    display: none;
  }
}
.app_header .mobile_menu_trigger > span:after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: url(../img/icons/ic_mobile_menu.svg) no-repeat center/24px;
  background-size: contain;
}
.app_header .header_nav .nav_content {
  height: 74px;
  display: flex;
  align-items: center;
}
.app_header .header_nav .nav_content .logo {
  padding-left: 46px;
  position: relative;
}
@media (min-width: 992px) {
  .app_header .header_nav .nav_content .logo {
    padding-left: 66px;
  }
}
.app_header .header_nav .nav_content .logo:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: url(../img/logo/logo-black.png) no-repeat center/56px;
  background-size: contain;
}
@media (min-width: 992px) {
  .app_header .header_nav .nav_content .logo:after {
    width: 56px;
    height: 56px;
  }
}
.app_header .header_nav .nav_content .logo .logo_text {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: #101010;
}

.app_header .header_nav .nav_content .nav_menu {
  display: flex;
  flex-direction: row;
  gap: 24px;
  margin-left: auto;
  margin-right: 24px;
}
.app_header .header_nav .nav_content .nav_menu .nav_item {
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  color: #101010;
  text-decoration: none;
}
.app_header .header_nav .nav_content .nav_menu .nav_item.active {
  font-weight: 500;
  text-decoration: underline;
  color: #000;
}

.app_header .header_nav .nav_content .nav_buttons {
  display: flex;
  flex-direction: row;
  margin-left: auto;
  gap: 8px;
}
@media (min-width: 992px) {
  .app_header .header_nav .nav_content .nav_buttons {
    margin-left: unset;
    gap: 12px;
  }
}
.app_header .header_nav .nav_content .nav_buttons .login_button,
.app_header .header_nav .nav_content .nav_buttons .signup_button,
.app_header .header_nav .nav_content .nav_buttons .logout_button {
  order: 2;
  display: flex;
  align-items: center;
  justify-self: center;
  padding-left: 12px;
  padding-right: 12px;
  height: 42px;
  border-radius: 8px;
  font-size: 1rem;
}
.app_header .header_nav .nav_content .nav_buttons .login_button:hover,
.app_header .header_nav .nav_content .nav_buttons .signup_button:hover,
.app_header .header_nav .nav_content .nav_buttons .logout_button:hover {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
}
.app_header .header_nav .nav_content .nav_buttons .signup_button {
  display: none;
  background: #000;
  color: #ffffff;
  border: 1px solid #000;
}
@media screen and (max-width:350px){
  .app_header .header_nav .nav_content .nav_buttons {
    gap: 5px;
  }
  .app_header .header_nav .nav_content{padding:0 5px;}
}
@media (min-width: 992px) {
  .app_header .header_nav .nav_content .nav_buttons .signup_button {
    display: flex;
  }
}
.app_header .header_nav .nav_content .nav_buttons .signup_button:hover {
  background: #101010;
  color: #000000;
  border-color: #101010;
}
@media (min-width: 992px) {
  .app_header .header_nav .nav_content .nav_buttons .login_button {
    background: #ffffff;
    color: #000000;
    border: 1px solid #eaeaea;
  }
}
.app_header .header_nav .nav_content .nav_buttons .login_button > .icon {
  width: 18px;
  height: 18px;
}
@media (min-width: 992px) {
  .app_header .header_nav .nav_content .nav_buttons .login_button > .icon {
    display: none;
  }
}
.app_header .header_nav .nav_content .nav_buttons .logout_button > .icon.ic_login,
.app_header .header_nav .nav_content .nav_buttons .login_button > .icon.ic_login {
  background: url(../img/icons/ic_login.svg) no-repeat center/18px;
}
.app_header .header_nav .nav_content .nav_buttons .logout_button > .icon.ic_logout,
.app_header .header_nav .nav_content .nav_buttons .login_button > .icon.ic_logout {
  margin:0 -4px;
  width:24px;height:24px;border-radius:50%;
  background: url(../img/icons/ic_user.svg) no-repeat center/cover;
}
.app_header .header_nav .nav_content .nav_buttons .logout_button > .text,
.app_header .header_nav .nav_content .nav_buttons .login_button > .text {
  display: none;
}
@media (min-width: 992px) {
  .app_header .header_nav .nav_content .nav_buttons .login_button > .text {
    display: block;
  }
}
.app_header .header_nav .nav_content .nav_buttons .logout_button:hover,
.app_header .header_nav .nav_content .nav_buttons .login_button:hover {
  background: #f3f4f6;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
}
.app_header .header_nav .nav_content .nav_buttons .notification_button {
  order: 1;
  position: relative;
  width: 42px;
  height: 42px;
/*  border: 1px solid #eaeaea;*/
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.app_header .header_nav .nav_content .nav_buttons .notification_button:after {
  background-image: url(../img/icons/ic_notification.svg);
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}
.app_header .header_nav .nav_content .nav_buttons .notification_button:hover {
  background-color: #f3f4f6;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
}
.app_header .header_nav .nav_content .nav_buttons .notification_button .icon_notification {
  width: 17.5px;
  height: 20px;
}
.app_header .header_nav .nav_content .nav_buttons .notification_button .notification_badge {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  background: #ff0000;
  border-radius: 50%;
}
.app_header.transparent {
  background: transparent;
  border-color: transparent;
}
.app_header.transparent .header_nav .nav_content .logo:after {
  background-image: url(../img/logo/logo-white.png);
}
.app_header.transparent .header_nav .nav_content .logo .logo_text {
  color: #ffffff;
}
.app_header.transparent .header_nav .nav_content .nav_menu .nav_item {
  color: #ffffff;
}
.app_header.transparent .header_nav .nav_content .nav_menu .nav_item.active {
  color: #ffffff;
}
.app_header.transparent .header_nav .nav_content .nav_buttons .notification_button {
  border-color: transparent;
  background-color: transparent;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
}
.app_header.transparent .header_nav .nav_content .nav_buttons .notification_button:after {
  background-image: url(../img/icons/ic_notification_wh.svg);
}
.app_header.transparent .header_nav .nav_content .nav_buttons .notification_button:hover {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
  background-color: rgba(255, 255, 255, 0.95);
}
.app_header.transparent .header_nav .nav_content .nav_buttons .notification_button:hover:after {
  background-image: url(../img/icons/ic_notification.svg);
}
.app_header.transparent .header_nav .nav_content .nav_buttons .signup_button {
  color: #ffffff;
  border: 1px solid #00b894;
  background-color: rgba(0, 184, 148, 0.9);
}
.app_header.transparent .header_nav .nav_content .nav_buttons .signup_button:hover {
  background: #00b894;
  border-color: #00b894;
}
.app_header.transparent .header_nav .nav_content .nav_buttons .logout_button,
.app_header.transparent .header_nav .nav_content .nav_buttons .login_button {
  border-color: transparent;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
}
.app_header.transparent .header_nav .nav_content .nav_buttons .logout_button:hover,
.app_header.transparent .header_nav .nav_content .nav_buttons .login_button:hover {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
}

.app_header.scrolled {
  background: #ffffff;
  border-color: #e5e5e5;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.app_header.scrolled .header_nav .nav_content .logo:after {
  background-image: url(../img/logo/logo-black.png);
}

.app_header .header_nav .nav_content .nav_menu .app_allmenu_close {
  display:none;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background-color: #ffffff;
  line-height: 1;
  font-weight: 700;
  font-size: 24px;
  background: url(../img/icons/ic_close.svg) no-repeat center/16px;
  box-shadow:none ! important;
}
.app_header.transparent .header_nav .nav_content .nav_buttons .logout_button {
  background-color: transparent;
}
.app_header.transparent .header_nav .nav_content .nav_buttons .logout_button > .icon.ic_logout{
  background: url(../img/icons/ic_user_white.svg) no-repeat center/cover;
}
@media screen and (max-width:992px){
  .app_header .header_nav .nav_content .nav_menu .app_allmenu_close{
    display:block;
  }
  .app_header .header_nav .nav_content .nav_menu.active{
    display:block;
  }
  .app_header .header_nav .nav_content .nav_menu {
    display:none;
    position:fixed;
    padding:50px 0 0 0;
    margin:0;
    right:0;
    top:0;
    width:50%;
    height:100%;
    background:#fff;
    z-index:999;
    text-align:center;
  }
  .app_header .header_nav .nav_content .nav_menu:before {
    content:'';
    display:block;
    position:fixed;
    left:0;
    top:0;
    width:50%;
    height:100%;
    background:rgba(0, 0, 0, 0.7);
    z-index:11;
  }
  .app_header .header_nav .nav_content .nav_menu .nav_item,
  .app_header.transparent .header_nav .nav_content .nav_menu .nav_item{
    color:#000;
    display:block;
    line-height:70px;
    font-size:18px;
  }
}
.app_footer {
  background-color: #171717;
  color: #a3a3a3;
  padding: 48px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  font-size: 14px;
}
.app_footer a {
  color: inherit;
  text-decoration: none;
}
.app_footer a:hover {
  text-decoration: underline;
}
.app_footer .footer_container {
  max-width: 1280px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.app_footer .footer_container .footer_top {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 16px;
}
@media (min-width: 1280px) {
  .app_footer .footer_container .footer_top {
    flex-direction: row;
    justify-content: space-between;
  }
}
.app_footer .footer_container .footer_top .footer_section h4 {
  font-size: 18px;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 16px;
}
.app_footer .footer_container .footer_top .footer_section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.app_footer .footer_container .footer_top .footer_section ul li {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #a3a3a3;
  margin-bottom: 8px;
}
.app_footer .footer_container .footer_top .footer_section ul li:last-child {
  margin-bottom: 0;
}
.app_footer .footer_container .footer_top .footer_section:nth-child(2), .app_footer .footer_container .footer_top .footer_section:nth-child(3) {
  flex: 1;
}

.footer_section_group{
  min-width:50%;
  display: flex;
  flex-direction: row;
  gap: 24px;
}
.footer_section_group .footer_section{
  width:50%;
}
@media (min-width: 1280px) {
  .app_footer .footer_container .footer_top .footer_section {
    flex-direction: row;
    justify-content: space-between;
  }
}
.app_footer .footer_container .footer_top .footer-title {
  position: relative;
  padding-left: 40px;
  background-color: transparent;
}
.app_footer .footer_container .footer_top .footer-title:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: transparent url(../img/logo/logo-white.png) no-repeat center;
  background-size: contain;
}
.app_footer .footer_container .footer_middle {
  display: flex;
  border-top: 1px solid #262626;
  padding-top: 24px;
}
@media (min-width: 1280px) {
  .app_footer .footer_container .footer_middle {
    justify-content: space-between;
  }
}
.app_footer .footer_container .footer_middle .contact_info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.app_footer .footer_container .footer_middle .contact_info p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #a3a3a3;
}
.app_footer .footer_container .footer_middle .footer_company_info {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 600px;
  font-weight: 400;
  line-height: 16px;
  color: #a3a3a3;
}
@media screen and (max-width:1060px){
  .app_footer .footer_container .footer_middle{
    display:block;
  }
}
.app_footer .footer_container .footer_middle .footer_company_info .compnay_name {
  width: 100%;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}
.app_footer .footer_container .footer_middle .footer_middle_links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}
.app_footer .footer_container .footer_middle .legal_links {
  order: 2;
  display: flex;
  gap: 16px;
}
@media screen and (max-width:1060px){
  .app_footer .footer_container .footer_middle .footer_middle_links{
    margin-top:20px;
    align-items:flex-start;
  }
}
@media screen and (max-width:674px){
  .app_footer .footer_container .footer_middle .legal_links {
    display:block;
  }

  .app_footer .footer_container .footer_middle .legal_links a{
    display:inline-block;
    margin-right:10px;
  }
}
.app_footer .footer_container .footer_middle .social_media {
  order: 1;
  display: flex;
  gap: 16px;
}
.app_footer .footer_container .footer_middle .social_media a {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.app_footer .footer_container .footer_middle .social_media a .icon_instargram{
  background:url("../img/logo/f_img_05.png") no-repeat center/cover;
}
.app_footer .footer_container .footer_middle .social_media a .icon_facebook{
  background:url("../img/logo/f_img_03.png") no-repeat center/cover;
}
.app_footer .footer_container .footer_middle .social_media a .icon_youtube{
  background:url("../img/logo/f_img_04.png") no-repeat center/cover;
}
.app_footer .footer_container .footer_bottom {
  text-align:right;
  border-top: 1px solid #262626;
  padding-top: 24px;
}
.app_footer .footer_container .footer_bottom .copyright {
  float:left;
  font-size: 16px;
  color: #a3a3a3;
  line-height:72px;
}

.app_footer .footer_container .footer_bottom .info{
  position:relative;
  display:inline-block;
  margin-right:50px;
  padding-right:80px;
  font-size: 16px;
  line-height:72px;
}
.app_footer .footer_container .footer_bottom .info:after{
  display:block;content:'';position:absolute;right:0;top:6px;width:60px;height:60px;border-radius:50%;overflow:hidden;
   background:url("../img/logo/f_img_01.gif") no-repeat right/cover;
}

.app_footer .footer_container .footer_bottom .payment{
  display:inline-block;
  padding-right:250px;
  font-size: 16px;
  line-height:30px;
  word-break:keep-all;
   background:url("../img/logo/f_img_02.png") no-repeat right/237px 30px;
}
@media screen and (max-width:650px){
  .app_footer .footer_container .footer_bottom{
    text-align:center;
  }
  .app_footer .footer_container .footer_bottom .copyright{
    float:none;
    line-height:30px;
  }
  .app_footer .footer_container .footer_bottom .info{
    display:block;
    width:200px;
    margin:20px auto;
  }
}

/* Sidebar styles */
.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar ul li {
  margin-bottom: 8px;
}

.sidebar ul li a {
  text-decoration: none;
  color: #333;
}

.sidebar ul li a:hover {
  color: #00b894;
}

.swiper-pagination{z-index:1 ! important;}

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


.logo-wrapper {
    margin-top: 10px;
}

.logo_text {
    display: inline-flex;
    align-items: center;
    gap: 8px; 
    text-decoration: none;
}

.logo_text img {
    display: block;
    height: 45px;
}

.logo_text span {
    font-size: 18px;     
    font-weight: 700;    
    color: #000;  
    line-height: 1;
}